:root {
    --charcoal: #1a1a1a;
    --slate: #757575;
    --cream: #fcfbf9;
    --border: #e0e0e0;
    --accent: #C5A059;
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */
body.dark-mode {
    --charcoal: #fcfbf9;
    --cream: #050505;
    --slate: #cbd5e1;
    --border: #333333;
}

body.dark-mode .btn-submit {
    background-color: var(--accent);
    color: #050505; /* Ensures the text is readable on gold */
}

body.dark-mode .btn-submit:hover {
    background-color: #a37c35;
}

body.dark-mode select.form-control {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23fcfbf9" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

body.dark-mode .quote-panel {
    background: rgba(255, 255, 255, 0.03); /* Subtle highlight against black background */
}

/* Global reset now lives in core.css (loaded first by base.html) */

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cream);
    color: var(--charcoal);
    display: flex;
    height: 100vh;
    overflow: hidden;
    transition: color 0.4s ease, background-color 0.4s ease;
}

.brand-logo {
    position: absolute;
    top: 40px;
    left: 60px;
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: white; /* Always white over the image */
    /* Keep the logo legible over bright regions of the hero photo (e.g. lit
       chandeliers), which the flat 0.4 overlay alone doesn't cover. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6);
    text-decoration: none;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: color 0.3s;
    z-index: 10;
}

.brand-logo:hover {
    color: var(--accent);
}

.sticky-nav {
    position: sticky;
    top: 0;
    background-color: var(--cream);
    padding: 40px 40px 20px 40px;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center; /* FIX: Forces perfect vertical centering */
    border-bottom: 1px solid var(--border);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center; /* FIX: Centers the text links vertically */
}

.nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--charcoal);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent);
}

/* =========================================
   HEADER ACTIONS (Theme & Menu Toggle)
   ========================================= */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    order: 2; /* Puts it immediately after the nav-links on desktop */
    margin-left: 30px; /* FIX: Adds breathing room from the VENDORS link */
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--slate);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.theme-toggle .moon-icon { display: none; }
body.dark-mode .theme-toggle .sun-icon { display: none; }
body.dark-mode .theme-toggle .moon-icon { display: block; }


.visual-pane {
    flex: 1.2;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
    min-width: 0;
}

.visual-content {
    position: absolute;
    bottom: 60px;
    left: 60px;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6);
}

.visual-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.visual-content p {
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 1.1rem;
    max-width: 400px;
    line-height: 1.6;
}

.form-pane {
    flex: 1;
    background-color: var(--cream);
    overflow-y: auto;
    position: relative;
    padding: 0;
    min-width: 0;
    transition: background-color 0.4s ease;
}

.form-content-wrapper {
    padding: 40px 80px 80px 80px;
}

.form-header {
    margin-bottom: 50px;
}

.form-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 10px;
    transition: color 0.4s ease;
}

.form-header p {
    color: var(--slate);
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 300;
    transition: color 0.4s ease;
}

.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--slate);
    margin-bottom: 8px;
    transition: color 0.4s ease;
}

.form-control {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: var(--charcoal);
    background: transparent;
    border-radius: 0;
    transition: border-color 0.4s, color 0.4s ease;
}

.form-control:focus {
    outline: none;
    border-bottom-color: var(--charcoal);
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="%231a1a1a" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 0px center;
}

.checkbox-group-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.checkbox-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
}

.checkbox-category h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--charcoal);
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--charcoal);
    cursor: pointer;
    font-weight: 400;
    transition: color 0.4s ease;
}

.checkbox-label input {
    accent-color: var(--charcoal);
    width: 16px;
    height: 16px;
}

/* Live Quote Bar */
.quote-panel {
    background: rgba(0, 0, 0, 0.02);
    padding: 40px 30px;
    border: 1px solid var(--border);
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.quote-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--slate);
    margin-bottom: 10px;
    display: block;
    transition: color 0.4s ease;
}

.quote-value {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--charcoal);
    transition: color 0.4s ease;
}

.btn-submit {
    background-color: var(--charcoal);
    color: var(--cream); /* Dynamic text color */
    border: none;
    width: 100%;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    transition: background 0.4s, color 0.4s ease;
}

.btn-submit:hover {
    background-color: var(--accent);
    color: #050505;
}

.consent-text {
    margin-top: 15px;
    font-size: 0.7rem;
    color: var(--slate);
    text-align: center;
    line-height: 1.5;
    transition: color 0.4s ease;
}

.consent-text a {
    color: var(--charcoal);
    text-decoration: underline;
    transition: color 0.4s ease;
}

.consent-text a:hover {
    color: var(--accent);
}

.pdf-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--border);
    text-align: center;
    transition: border-color 0.4s ease;
}

.pdf-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.pdf-section p {
    font-size: 0.95rem;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    transition: color 0.4s ease;
}

.pdf-viewer {
    width: 100%;
    height: 600px;
    border: 1px solid var(--border);
    margin-bottom: 30px;
    background-color: var(--cream);
    transition: border-color 0.4s ease, background-color 0.4s ease;
}

.btn-outline {
    display: inline-block;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
    padding: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline:hover {
    background-color: var(--charcoal);
    color: var(--cream);
}

#toast {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: var(--charcoal);
    color: var(--cream);
    padding: 20px 40px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    transform: translateY(150px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================
   TERMS OF SERVICE MODAL
   ========================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--cream);
    color: var(--charcoal);
    padding: 40px;
    border-radius: 4px;
    max-width: 800px;
    width: 90%;
    position: relative;
    /* This transition ensures it smoothly shifts colors when toggling dark mode */
    transition: background-color 0.4s ease, color 0.4s ease;
}

.modal-content h2 {
    color: var(--accent);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.modal-body p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.modal-body strong {
    color: var(--charcoal);
    font-size: 1rem;
}

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--charcoal);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.4s ease;
}

.close-modal-btn:hover {
    color: var(--accent);
}

/* =========================================
   TERMS OF SERVICE CONSENT GATE
   (stacks below the full T&C reader so the reader can open on top)
   ========================================= */
.consent-gate {
    z-index: 1900;
}

.consent-modal-content {
    max-width: 480px;
}

.consent-modal-body p {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--slate);
    margin-bottom: 24px;
    transition: color 0.4s ease;
}

.consent-modal-body a {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--charcoal);
    line-height: 1.5;
    cursor: pointer;
    transition: color 0.4s ease;
}

.consent-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.consent-modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    transition: border-color 0.4s ease;
}

.btn-consent-cancel,
.btn-consent-agree {
    padding: 12px 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.btn-consent-cancel {
    background: transparent;
    color: var(--slate);
}

.btn-consent-cancel:hover {
    color: var(--charcoal);
    border-color: var(--charcoal);
}

.btn-consent-agree {
    background-color: var(--accent);
    color: #050505;
    border-color: var(--accent);
}

.btn-consent-agree:hover:not(:disabled) {
    background-color: #a37c35;
    border-color: #a37c35;
}

.btn-consent-agree:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .consent-modal-actions {
        flex-direction: column-reverse;
    }
    .btn-consent-cancel,
    .btn-consent-agree {
        width: 100%;
        text-align: center;
    }
}

/* Hybrid fix (note 10): below 1500px the two-pane form area becomes too narrow
   for the horizontal nav, so the layout stacks -- the hero image moves from the
   side to the top and the form (with its nav) takes the full width, keeping every
   link visible instead of spilling over the image. Two-pane returns at >=1500px. */
@media (max-width: 1150px) {
    body { flex-direction: column; height: auto; overflow: visible; }
    .visual-pane { min-height: 400px; }
    .brand-logo { top: 30px; left: 30px; font-size: 1.3rem; }
    .visual-content { bottom: 30px; left: 30px; }
    .form-pane { overflow-y: visible; }
    .sticky-nav {
        padding: 25px 30px;
        justify-content: center;
    }
    .form-content-wrapper { padding: 40px 30px; }
}

/* =========================================
    MOBILE POLISH (The "Blending" Fix)
    ========================================= */
.mobile-menu-btn, .mobile-close-btn, .mobile-logo {
    display: none;
}

@media (max-width: 900px) {
    body {
        flex-direction: column;
        overflow-y: auto;
        height: auto;
    }

    .brand-logo {
        display: none;
    }

    .sticky-nav {
        position: fixed; top: 0; left: 0; width: 100%;
        background: var(--cream);
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
        z-index: 1000;
    }

    .mobile-logo {
        display: block;
        font-family: 'Cinzel', serif;
        font-size: 1.2rem;
        color: var(--charcoal);
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        transition: color 0.4s ease;
    }

    .header-actions {
        order: 0; /* Lets space-between handle placement */
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex; flex-direction: column; align-items: center;
        background: none; border: none; color: var(--charcoal); cursor: pointer;
        transition: color 0.4s ease;
    }
    .mobile-menu-btn span {
        font-size: 0.55rem;
        margin-top: 4px;
        letter-spacing: 1px;
        font-family: 'Montserrat', sans-serif;
    }

    .visual-pane {
        min-height: 35vh;
        flex: none; width:
        100%; margin-top: 60px;
    }

    .visual-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .visual-content h2 {
        font-size: 2.2rem;
        margin-bottom: 5px;
    }
    .visual-content p {
        font-size: 1rem;
        max-width: 100%;
    }

    .form-pane {
        overflow-y: visible;
        width: 100%;
    }

    .form-content-wrapper {
        padding: 40px 20px;
    }

    .form-header h1 {
        font-size: 2rem;
    }

    /* Overlay Menu */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--cream);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    body.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
    }

    body.menu-open {
        overflow: hidden;
    }

    .mobile-close-btn {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        color: var(--charcoal);
        font-size: 2rem;
        cursor: pointer;
        transition: color 0.4s ease;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
     }

    .checkbox-group-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
     }
    .pdf-viewer {
        height: 400px;
    }

    #toast {
        bottom: 20px;
        right: 20px;
        left: 20px;
        text-align: center;
    }

}

/* === De-inlined from inquire.html / inquire.js === */
.field-full { width: 100%; }
.quote-fineprint { margin-top: 15px; font-size: 0.65rem; }
.no-scroll { overflow: hidden; }

.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.calendar-icon-btn {
    position: absolute;
    right: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--slate);
    padding: 10px 0;
    outline: none;
    z-index: 2;
}

/* ============================================
   LIVE TIME-AVAILABILITY HINT (under the time fields)
   States are class-driven only: .is-ok / .is-warn / .is-block
   ============================================ */
.avail-hint-group {
    margin-top: -8px;
}
.time-avail-hint {
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(201, 165, 92, 0.45);
    background: rgba(201, 165, 92, 0.10);
    /* --charcoal flips with the page theme (dark text in light mode, light
       text in dark mode). The old var(--text-main) was never defined on this
       page, so the hint always fell back to #ddd — unreadable in light mode. */
    color: var(--charcoal, #1a1a1a);
    margin: 0;
}
.time-avail-hint.hidden {
    display: none;
}
.time-avail-hint.is-ok {
    border-color: rgba(92, 171, 130, 0.65);
    background: rgba(92, 171, 130, 0.16);
}
.time-avail-hint.is-warn {
    border-color: rgba(214, 164, 65, 0.75);
    background: rgba(214, 164, 65, 0.18);
}
.time-avail-hint.is-block {
    border-color: rgba(192, 109, 122, 0.75);
    background: rgba(192, 109, 122, 0.18);
}
.time-avail-hint strong {
    font-weight: 700;
}