/* =====================================================
   VARIABLE INITIALIZATION (LIGHT THEME DEFAULT)
   ===================================================== */
:root {
    /* Brand */
    --color-primary: #1B4537;
    --color-accent: #CBAA7D;

    /* Backgrounds */
    --color-background: #F6F8FA;
    --color-surface: #FFFFFF;
    --color-light-bg: #F3F3F3;
    --color-light-gray: #EFEFEF;

    /* Text */
    --color-text: #1B4537;
    --color-text-muted: #777777;

    /* Borders */
    --color-border: #DDDDDD;

    /* Misc */
    --color-white: #FFFFFF;

    /* Shadows */
    --shadow-sm: 0 3px 8px rgba(0,0,0,.05);
    --shadow-md: 0 8px 20px rgba(0,0,0,.08);

    /* Radius */
    --radius-card: 20px;
    --radius-pill: 50px;
}

/* =====================================================
   DARK THEME OVERRIDES
   ===================================================== */
@media(prefers-color-scheme: dark) {
    :root {
        /* Brand */
        --color-primary: #2A6B55;
        --color-accent: #CBAA7D;

        /* Backgrounds */
        --color-background: #111315;
        --color-surface: #1B1D20;
        --color-light-bg: #26292D;
        --color-light-gray: #34373C;

        /* Text */
        --color-text: #F8F8F8;
        --color-text-muted: #AAAAAA;

        /* Borders */
        --color-border: #3B3F45;

        /* Misc */
        --color-white: #1B1D20;

        /* Shadows */
        --shadow-sm: 0 3px 10px rgba(0,0,0,.35);
        --shadow-md: 0 10px 25px rgba(0,0,0,.45);
    }
}

/* =====================================================
   GLOBAL RULES & GRAPHICS CORE
   ===================================================== */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    padding-top: 80px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accent-gold { 
    color: var(--color-accent) !important; 
}

.fw-extrabold { 
    font-weight: 800; 
}

/* =====================================================
   NAVIGATION BAR
   ===================================================== */
.glass-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.navbar-brand .text-white {
    color: var(--color-text) !important;
}

.badge-premium {
    background: linear-gradient(135deg, var(--color-primary), #123026);
    color: var(--color-white);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media(prefers-color-scheme: dark) {
    .badge-premium {
        background: linear-gradient(135deg, var(--color-accent), #a38458);
        color: #000000;
    }
}

/* =====================================================
   HERO & STRUCTURE SECTIONS
   ===================================================== */
.hero-section {
    padding: 80px 0 40px 0;
}

.hero-section .text-muted {
    color: var(--color-text-muted) !important;
}

.hero-section .text-white {
    color: var(--color-text) !important;
}

/* =====================================================
   PREMIUM CARDS & WIZARD INTERFACE
   ===================================================== */
.glass-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s;
}

.glass-card:hover {
    border-color: var(--color-accent);
}

.interactive-card {
    cursor: pointer;
    background: var(--color-light-bg);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 20px;
    color: var(--color-text);
    transition: all 0.25s ease;
}

.interactive-card:hover {
    background: var(--color-light-gray);
    transform: translateY(-3px);
}

.interactive-card.selected {
    border-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

/* =====================================================
   INTERACTIVE PROGRESS ELEMENTS
   ===================================================== */
.progress {
    background-color: var(--color-light-gray);
    height: 8px;
    border-radius: var(--radius-pill);
}

.progress-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* =====================================================
   DYNAMIC STEP ANIMATION WRAPPERS
   ===================================================== */
.step-container {
    display: none;
}

.step-container.active {
    display: block;
    animation: fadeInSlide 0.4s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   TIMELINE STEPS (HOW IT WORKS)
   ===================================================== */
.timeline-step {
    position: relative;
    padding-left: 35px;
    margin-bottom: 25px;
    border-left: 2px dashed var(--color-border);
}

.timeline-step h5 {
    color: var(--color-text);
    font-weight: 700;
}

.timeline-step .text-muted {
    color: var(--color-text-muted) !important;
}

.timeline-step::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* =====================================================
   FORMS & LAYOUT UTILITIES
   ===================================================== */
.form-control, .form-select {
    background-color: var(--color-light-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px;
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(27, 69, 55, 0.15) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.bg-light.bg-opacity-5 {
    background-color: var(--color-light-bg) !important;
    border-color: var(--color-border) !important;
}

/* =====================================================
   PREMIUM CALL TO ACTION BUTTONS
   ===================================================== */
.btn-premium {
    background: linear-gradient(135deg, var(--color-primary), #123026);
    color: var(--color-white) !important;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 14px 32px;
    border: none;
    box-shadow: 0 4px 15px rgba(27, 69, 55, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 69, 55, 0.35);
}

@media(prefers-color-scheme: dark) {
    .btn-premium {
        background: linear-gradient(135deg, var(--color-accent), #a38458);
        color: #111315 !important;
        box-shadow: 0 4px 15px rgba(203, 170, 125, 0.2);
    }
    .btn-premium:hover {
        box-shadow: 0 6px 20px rgba(203, 170, 125, 0.4);
    }
}

.btn-outline-light {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent;
}

.btn-outline-light:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

@media(prefers-color-scheme: dark) {
    .btn-outline-light {
        border-color: var(--color-text) !important;
        color: var(--color-text) !important;
    }
    .btn-outline-light:hover {
        background: var(--color-text) !important;
        color: var(--color-white) !important;
    }
}