/**
 * Custom CSS — Classic Ivory & Rich Burgundy Theme
 * Matrimony Platform
 */

/* ── Color Variables ─────────────────────────────────────────────────────────── */
:root {
    /* Primary Burgundy palette */
    --brand-50:  #fff1f3;
    --brand-100: #ffe4e8;
    --brand-200: #fdc2cb;
    --brand-300: #fc8d9e;
    --brand-400: #fa5771;
    --brand-500: #f02d49;
    --brand-600: #d61833;
    --brand-700: #b01026;
    --brand-800: #88091d;
    --brand-900: #650616;
    --brand-950: #4a0410;

    /* Ivory / Champagne palette */
    --ivory-50:  #fffffc;
    --ivory-100: #fcfbf5;
    --ivory-200: #f7f3e8;
    --ivory-300: #f2ebd9;
    --ivory-400: #e8deca;
    --ivory-500: #d4c8aa;
    --ivory-600: #b0a386;
    --ivory-700: #8c7f66;
    --ivory-800: #665c49;
    --ivory-900: #4a4233;

    /* Dark backgrounds */
    --dark-950:    #120d0e;
    --dark-900:    #1c1415;
    --dark-800:    #2a1c1e;

    /* Brand tokens */
    --brand-primary:   #88091d; /* Rich Burgundy */
    --brand-secondary: #650616; /* Deep Burgundy */
    --brand-accent:    #d4c8aa; /* Champagne */
    --brand-gold:      #b0a386; /* Antique Gold */
    --brand-light:     #fcfbf5; /* Soft Ivory */
    --gradient:        linear-gradient(135deg, #650616, #88091d, #b01026);
    --gradient-gold:   linear-gradient(135deg, #b0a386, #d4c8aa, #e8deca);
    --gradient-hero:   linear-gradient(135deg, #4a0410 0%, #650616 35%, #88091d 75%, #b01026 100%);
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Custom Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ivory-100); }
::-webkit-scrollbar-thumb { background: var(--brand-700); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-800); }

/* ── Glassmorphism ──────────────────────────────────────────────────────────── */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(252, 251, 245, 0.6); /* ivory-100 */
}
.glass-dark {
    background: rgba(28, 20, 21, 0.75); /* dark-900 */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 200, 170, 0.1); /* ivory-500 */
}

/* ── Gradient Text ──────────────────────────────────────────────────────────── */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Primary Button ─────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--gradient);
    color: var(--ivory-50);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 24px rgba(101, 6, 22, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(101, 6, 22, 0.55);
    opacity: 0.95;
}
.btn-primary:active { transform: translateY(0); }

/* ── Gold Button ────────────────────────────────────────────────────────────── */
.btn-gold {
    background: var(--gradient-gold);
    color: var(--dark-950);
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 24px rgba(176, 163, 134, 0.4); /* ivory-600 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(176, 163, 134, 0.55);
}

/* ── Hero Background ────────────────────────────────────────────────────────── */
.hero-bg {
    background: var(--gradient-hero);
}

/* ── Card Hover ─────────────────────────────────────────────────────────────── */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(136, 9, 29, 0.08); /* brand-800 */
    border-color: rgba(136, 9, 29, 0.15) !important;
}

/* ── Particles ──────────────────────────────────────────────────────────────── */
.particle {
    position: absolute;
    border-radius: 50%;
    opacity: .25;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0%   { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }
    10%  { opacity: .3; }
    90%  { opacity: .2; }
    100% { transform: translateY(-100px) scale(1) rotate(360deg); opacity: 0; }
}

/* ── Completion Ring ────────────────────────────────────────────────────────── */
.completion-ring { transform: rotate(-90deg); }
.completion-ring-progress { transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }

/* ── Stat Number ────────────────────────────────────────────────────────────── */
.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* ── Navigation Tabs ────────────────────────────────────────────────────────── */
.profile-tab {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ivory-800);
    cursor: pointer;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    gap: 10px;
    text-decoration: none;
    border: 1px solid transparent;
}
.profile-tab:hover { 
    background: var(--brand-50); 
    color: var(--brand-900); 
    transform: translateX(4px);
}
.profile-tab.active {
    background: linear-gradient(135deg, rgba(136,9,29,0.04), rgba(176,16,38,0.06));
    color: var(--brand-primary);
    font-weight: 700;
    border-color: rgba(136,9,29,0.1);
    box-shadow: 0 4px 12px rgba(136,9,29,0.03);
}
.profile-tab.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 15%; height: 70%; width: 4px;
    background: var(--gradient);
    border-radius: 0 6px 6px 0;
}

/* ── Form Inputs ────────────────────────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--ivory-300);
    border-radius: 12px;
    font-size: 14px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--ivory-50);
    outline: none;
    color: var(--dark-900);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}
.form-input:hover {
    border-color: var(--ivory-500);
    background: white;
}
.form-input:focus {
    border-color: var(--brand-600);
    background: white;
    box-shadow: 0 0 0 4px rgba(136, 9, 29, 0.08), inset 0 2px 4px rgba(0,0,0,0.01);
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ivory-900);
    margin-bottom: 5px;
}

/* ── Tag Select ─────────────────────────────────────────────────────────────── */
.tag-checkbox { display: none; }
.tag-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1.5px solid var(--ivory-400);
    border-radius: 99px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;
    color: var(--ivory-800);
}
.tag-label:hover { border-color: var(--brand-300); color: var(--brand-800); }
.tag-checkbox:checked + .tag-label {
    background: var(--gradient);
    border-color: transparent;
    color: var(--ivory-50);
    font-weight: 500;
}

/* ── Match Card ─────────────────────────────────────────────────────────────── */
.match-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid var(--ivory-300);
    position: relative;
}
.match-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(136, 9, 29, 0.1);
    border-color: var(--brand-200);
}
.match-card-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.match-card-placeholder {
    width: 100%; height: 220px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ivory-100), var(--ivory-200));
    font-size: 4rem;
}

/* ── Interest Button ────────────────────────────────────────────────────────── */
.btn-interest { background: white; border: 2px solid var(--ivory-400); color: var(--ivory-800); }
.btn-interest:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-50); }
.btn-interest.sent { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(136,9,29,.05); }
.btn-interest.accepted { border-color: #10B981; color: #059669; background: #ECFDF5; }

/* ── Skeleton Loading ───────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--ivory-200) 25%, var(--ivory-300) 50%, var(--ivory-200) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 8px;
}
@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Privacy Badges ─────────────────────────────────────────────────────────── */
.privacy-public   { color: #059669; background: #ECFDF5; border-color: #A7F3D0; }
.privacy-interest { color: var(--brand-primary); background: var(--brand-50); border-color: var(--brand-200); }
.privacy-manual   { color: var(--brand-gold); background: var(--ivory-100); border-color: var(--ivory-400); }

/* ── Password Strength ──────────────────────────────────────────────────────── */
.strength-bar { height: 4px; border-radius: 2px; transition: all .3s ease; }
.strength-weak .strength-bar  { background: #EF4444; }
.strength-fair .strength-bar  { background: #F59E0B; }
.strength-good .strength-bar  { background: #3B82F6; }
.strength-strong .strength-bar { background: #10B981; }

/* ── Toast Notifications ────────────────────────────────────────────────────── */
#toast-container {
    position: fixed; bottom: 24px; right: 24px;
    z-index: 9999; display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.toast {
    padding: 14px 20px; border-radius: 14px;
    font-size: 14px; font-weight: 500; color: white;
    min-width: 260px; max-width: 380px;
    pointer-events: all;
    animation: toastIn .3s ease forwards;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.toast-success { background: linear-gradient(135deg, #059669, #10B981); }
.toast-error   { background: linear-gradient(135deg, #88091d, #b01026); }
.toast-info    { background: linear-gradient(135deg, #b0a386, #8c7f66); color: var(--ivory-50); }
.toast.removing { animation: toastOut .3s ease forwards; }

@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* ── Page Transitions ───────────────────────────────────────────────────────── */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-animate { animation: pageIn .4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes panelIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.panel-animate { animation: panelIn .3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ── Logo Link ──────────────────────────────────────────────────────────────── */
.logo-link { text-decoration: none; }
.logo-link svg { transition: transform .2s ease; }
.logo-link:hover svg { transform: scale(1.03); }