/* GiftMe Stylesheet */

/* Common styles */
body {
    background-color: var(--color-blue-50);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1200px;
}

/* Profile cards */
.profile-card {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-blue-100);
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.profile-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 5px solid var(--color-blue-50);
    margin: 0 auto;
}

/* New profile card */
.new-profile-card {
    border: 2px dashed var(--color-purple-300);
    background-color: var(--color-blue-100);
}

.new-profile-icon {
    color: var(--color-blue-500);
}

.new-profile-card:hover .new-profile-icon {
    color: var(--color-blue-600);
}

/* Color pickers */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-purple-200);
    margin-right: 5px;
    vertical-align: middle;
}

/* Profile view page */
.profile-view-card {
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background-color: var(--color-blue-100);
}

.profile-picture {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 5px solid var(--color-blue-50);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-title {
    font-weight: bold;
    margin-top: 15px;
    color: var(--color-purple-800);
}

.profile-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-purple-200);
}

.profile-section:last-child {
    border-bottom: none;
}

.profile-section h3 {
    font-size: 1.4rem;
    color: var(--color-purple-600);
    margin-bottom: 15px;
}

.profile-item {
    margin-bottom: 10px;
}

.profile-item-label {
    font-weight: bold;
    display: inline-block;
    width: 120px;
    color: var(--color-purple-700);
}

.color-box {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid var(--color-purple-200);
}

.animal-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}

.no-thank-you-section {
    background-color: var(--color-blue-50);
    padding: 15px;
    border-radius: 10px;
}

.no-thank-you-list {
    margin-bottom: 0;
}

/* Form validation */
.form-control.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
}

/* Alert styles */
.alert-success {
    background-color: var(--color-purple-200);
    border-color: var(--color-purple-300);
    color: var(--color-purple-800);
}

.alert-success .alert-link {
    color: var(--color-purple-700);
    text-decoration: underline;
}

.alert-success .alert-link:hover {
    color: var(--color-purple-800);
}

/* Delete buttons - keeping them red */
.btn-danger,
.btn-outline-danger {
    color: #faf6f7 !important;
    border-color: #dc3545 !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Modal close button */
.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Theme colors */
:root {
    --color-blue-50: #ffffff;
    --color-blue-100: #ffffff;
    --color-purple-200: #ddd6ff;
    --color-purple-300: #c4b4ff;
    --color-purple-400: #a684ff;
    --color-blue-500: #6C3baa;
    --color-purple-600: #8e51ff;
    --color-purple-700: #7f22fe;
    --color-purple-800: #7008e7;
    --color-purple-900: #5d0ec0;
    --color-purple-950: #4d179a;
}