/* =============================================
   GALATEO ARTISTI - MULTI-THEME SYSTEM
   Based on Brand Style Guide Color Modes
   ============================================= */

/* --- Champagne / Ivory (default — light mode) --- */
:root {
    --bg-body: #F5F0E8;
    --bg-body-rgb: 245, 240, 232;
    --text-body: #1A1A1A;
    --text-muted: #817b70;
    --text-heading: #1A1A1A;
    --gold-accent: #D4AF37;
    --gold-light: #C7AA74;
    --gold-dark: #A88A4F;
    --watermark-color: #222;
    --watermark-opacity: 0.04;
    --banner-bg: rgba(255, 255, 255, 0.4);
    --banner-shadow: rgba(0, 0, 0, 0.05);
    --card-shadow: rgba(0, 0, 0, 0.15);
    --pattern-opacity: 0.20;
    --silhouette-opacity: 0.25;
    --border-accent: rgba(168, 138, 79, 0.3);
    --noise-opacity: 0.04;
}

/* --- Onyx (pure black) --- */
[data-theme="onyx"] {
    --bg-body: #050505;
    --bg-body-rgb: 5, 5, 5;
    --text-body: #E8E4DC;
    --text-muted: #8A857A;
    --text-heading: #F0EDE6;
    --watermark-color: #333;
    --watermark-opacity: 0.05;
    --banner-bg: rgba(20, 20, 20, 0.6);
    --banner-shadow: rgba(0, 0, 0, 0.4);
    --card-shadow: rgba(0, 0, 0, 0.5);
    --pattern-opacity: 0.06;
    --silhouette-opacity: 0.20;
    --border-accent: rgba(212, 175, 55, 0.25);
    --noise-opacity: 0.02;
}

/* --- Blackberry (deep plum) --- */
[data-theme="blackberry"] {
    --bg-body: #2A1028;
    --bg-body-rgb: 42, 16, 40;
    --text-body: #E8E0E6;
    --text-muted: #B898B0;
    --text-heading: #F0EAF0;
    --watermark-color: #3A1A38;
    --watermark-opacity: 0.06;
    --banner-bg: rgba(35, 14, 33, 0.5);
    --banner-shadow: rgba(0, 0, 0, 0.35);
    --card-shadow: rgba(0, 0, 0, 0.45);
    --pattern-opacity: 0.08;
    --silhouette-opacity: 0.18;
    --border-accent: rgba(212, 175, 55, 0.3);
    --noise-opacity: 0.02;
}

/* --- Evergreen (dark forest green) --- */
[data-theme="evergreen"] {
    --bg-body: #1A2E1E;
    --bg-body-rgb: 26, 46, 30;
    --text-body: #E0E8E2;
    --text-muted: #98B8A0;
    --text-heading: #EAF0EC;
    --watermark-color: #2A3E2E;
    --watermark-opacity: 0.06;
    --banner-bg: rgba(22, 38, 24, 0.5);
    --banner-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow: rgba(0, 0, 0, 0.4);
    --pattern-opacity: 0.08;
    --silhouette-opacity: 0.18;
    --border-accent: rgba(212, 175, 55, 0.3);
    --noise-opacity: 0.02;
}

/* --- Khaki (olive/earth) --- */
[data-theme="khaki"] {
    --bg-body: #5C5A3E;
    --bg-body-rgb: 92, 90, 62;
    --text-body: #F0EDE6;
    --text-muted: #C5C0A8;
    --text-heading: #F5F0E8;
    --watermark-color: #4A4830;
    --watermark-opacity: 0.08;
    --banner-bg: rgba(70, 68, 48, 0.5);
    --banner-shadow: rgba(0, 0, 0, 0.25);
    --card-shadow: rgba(0, 0, 0, 0.35);
    --pattern-opacity: 0.10;
    --silhouette-opacity: 0.15;
    --border-accent: rgba(212, 175, 55, 0.35);
    --noise-opacity: 0.03;
}

/* --- Prussian (dark teal) --- */
[data-theme="prussian"] {
    --bg-body: #0D3B4A;
    --bg-body-rgb: 13, 59, 74;
    --text-body: #E4E0D8;
    --text-muted: #9AB0B8;
    --text-heading: #F0EDE6;
    --watermark-color: #1A4A5A;
    --watermark-opacity: 0.07;
    --banner-bg: rgba(10, 48, 60, 0.5);
    --banner-shadow: rgba(0, 0, 0, 0.3);
    --card-shadow: rgba(0, 0, 0, 0.4);
    --pattern-opacity: 0.08;
    --silhouette-opacity: 0.18;
    --border-accent: rgba(212, 175, 55, 0.3);
    --noise-opacity: 0.02;
}

/* --- Regal (deep royal blue) --- */
[data-theme="regal"] {
    --bg-body: #0F1E3D;
    --bg-body-rgb: 15, 30, 61;
    --text-body: #E0DCD4;
    --text-muted: #8A9AB8;
    --text-heading: #F0EDE6;
    --watermark-color: #1A2A4A;
    --watermark-opacity: 0.07;
    --banner-bg: rgba(12, 24, 50, 0.5);
    --banner-shadow: rgba(0, 0, 0, 0.35);
    --card-shadow: rgba(0, 0, 0, 0.45);
    --pattern-opacity: 0.08;
    --silhouette-opacity: 0.20;
    --border-accent: rgba(212, 175, 55, 0.3);
    --noise-opacity: 0.02;
}


/* =============================================
   APPLY THEME VARIABLES TO ELEMENTS
   ============================================= */

/* Body background & text */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-body) !important;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Override Tailwind text-[#1A1A1A] on body and elements */
[data-theme="onyx"] .text-\[\#1A1A1A\],
[data-theme="blackberry"] .text-\[\#1A1A1A\],
[data-theme="evergreen"] .text-\[\#1A1A1A\],
[data-theme="khaki"] .text-\[\#1A1A1A\],
[data-theme="prussian"] .text-\[\#1A1A1A\],
[data-theme="regal"] .text-\[\#1A1A1A\] {
    color: var(--text-body) !important;
}

/* Headings */
[data-theme="onyx"] h2.text-\[\#1A1A1A\],
[data-theme="blackberry"] h2.text-\[\#1A1A1A\],
[data-theme="evergreen"] h2.text-\[\#1A1A1A\],
[data-theme="khaki"] h2.text-\[\#1A1A1A\],
[data-theme="prussian"] h2.text-\[\#1A1A1A\],
[data-theme="regal"] h2.text-\[\#1A1A1A\] {
    color: var(--text-heading) !important;
}

/* Muted text */
[data-theme]:not([data-theme=""]) .text-\[\#817b70\] {
    color: var(--text-muted) !important;
}

[data-theme]:not([data-theme=""]) .text-\[\#8A857A\] {
    color: var(--text-muted) !important;
}

/* Watermark logos */
[data-theme]:not([data-theme=""]) .mask-logo.bg-\[\#222\] {
    background-color: var(--watermark-color) !important;
    opacity: var(--watermark-opacity) !important;
}

/* Tiled background pattern */
[data-theme]:not([data-theme=""]) .fixed.opacity-20[style*="--bg-pattern"],
[data-theme]:not([data-theme=""]) .fixed.opacity-20 {
    opacity: var(--pattern-opacity) !important;
}

/* Banner boxes (Contact, Apply pages) */
[data-theme]:not([data-theme=""]) .bg-white\/40 {
    background-color: var(--banner-bg) !important;
}

/* Banner border */
[data-theme]:not([data-theme=""]) .border-\[\#A88A4F\]\/30 {
    border-color: var(--border-accent) !important;
}

/* Light shadows */
[data-theme]:not([data-theme=""]) .shadow-\[0_15px_30px_rgba\(0\,0\,0\,0\.05\)\] {
    box-shadow: 0 15px 30px var(--banner-shadow) !important;
}

/* Card shadows */
[data-theme]:not([data-theme=""]) .shadow-\[0_15px_30px_rgba\(0\,0\,0\,0\.15\)\] {
    box-shadow: 0 15px 30px var(--card-shadow) !important;
}

/* Body noise texture overlay */
[data-theme]:not([data-theme=""]) body {
    background-image: none !important;
}

/* =============================================
   MENU BAR THEME COLORS
   ============================================= */

/* Add CSS variables for menu bar */
:root {
    --menu-bg-start: #5C5A55;
    --menu-bg-mid: #3D3A35;
    --menu-bg-end: #24221D;
    --menu-border: rgba(138, 133, 122, 0.4);
}

[data-theme="onyx"] {
    --menu-bg-start: #1A1A1A;
    --menu-bg-mid: #0F0F0F;
    --menu-bg-end: #050505;
    --menu-border: rgba(212, 175, 55, 0.2);
}

[data-theme="blackberry"] {
    --menu-bg-start: #3D1A3A;
    --menu-bg-mid: #2A1028;
    --menu-bg-end: #1A0818;
    --menu-border: rgba(212, 175, 55, 0.25);
}

[data-theme="evergreen"] {
    --menu-bg-start: #2A4A30;
    --menu-bg-mid: #1A2E1E;
    --menu-bg-end: #0E1E12;
    --menu-border: rgba(212, 175, 55, 0.25);
}

[data-theme="khaki"] {
    --menu-bg-start: #6A6848;
    --menu-bg-mid: #4A4830;
    --menu-bg-end: #3A3820;
    --menu-border: rgba(212, 175, 55, 0.3);
}

[data-theme="prussian"] {
    --menu-bg-start: #1A5A6A;
    --menu-bg-mid: #0D3B4A;
    --menu-bg-end: #062530;
    --menu-border: rgba(212, 175, 55, 0.25);
}

[data-theme="regal"] {
    --menu-bg-start: #1A2E5A;
    --menu-bg-mid: #0F1E3D;
    --menu-bg-end: #080E20;
    --menu-border: rgba(212, 175, 55, 0.25);
}

/* Override .dark-metal-gradient on the menu bar */
.dark-metal-gradient {
    background: linear-gradient(180deg, var(--menu-bg-start) 0%, var(--menu-bg-mid) 40%, var(--menu-bg-end) 100%) !important;
    border-color: var(--menu-border) !important;
    transition: background 0.5s ease;
}

/* Menu dropdowns */
[data-theme]:not([data-theme=""]) #global-nav,
[data-theme]:not([data-theme=""]) .theme-dropdown {
    background: var(--menu-bg-end) !important;
}


/* =============================================
   APPLY PAGE FUNNEL CARDS - THEME ADAPTATION
   ============================================= */

:root {
    --apply-card-bg: #151515;
    --apply-card-inner-from: #1C1C1A;
    --apply-card-inner-to: #0A0A0A;
    --apply-overlay-color: #121212;
    --apply-form-border: #3A3326;
    --apply-input-bg: #1A1A1A;
}

[data-theme="blackberry"] {
    --apply-card-bg: #1E0A1C;
    --apply-card-inner-from: #2A1028;
    --apply-card-inner-to: #140818;
    --apply-overlay-color: #1A0818;
    --apply-form-border: #3A1A38;
    --apply-input-bg: #1E0A1C;
}

[data-theme="evergreen"] {
    --apply-card-bg: #0E1E12;
    --apply-card-inner-from: #1A2E1E;
    --apply-card-inner-to: #0A1A0E;
    --apply-overlay-color: #0E1E12;
    --apply-form-border: #2A4A2E;
    --apply-input-bg: #0E1E12;
}

[data-theme="khaki"] {
    --apply-card-bg: #3A3820;
    --apply-card-inner-from: #4A4830;
    --apply-card-inner-to: #2A2818;
    --apply-overlay-color: #3A3820;
    --apply-form-border: #5A5838;
    --apply-input-bg: #3A3820;
}

[data-theme="prussian"] {
    --apply-card-bg: #062530;
    --apply-card-inner-from: #0D3B4A;
    --apply-card-inner-to: #041A24;
    --apply-overlay-color: #062530;
    --apply-form-border: #1A5A6A;
    --apply-input-bg: #062530;
}

[data-theme="regal"] {
    --apply-card-bg: #080E20;
    --apply-card-inner-from: #0F1E3D;
    --apply-card-inner-to: #060A18;
    --apply-overlay-color: #080E20;
    --apply-form-border: #1A2E5A;
    --apply-input-bg: #080E20;
}

/* Apply card backgrounds */
[data-theme]:not([data-theme=""]) #apply-card-1,
[data-theme]:not([data-theme=""]) #apply-card-2 {
    background-color: var(--apply-card-bg) !important;
}

/* Gradient overlays inside cards */
[data-theme]:not([data-theme=""]) #apply-card-1 .bg-gradient-to-r,
[data-theme]:not([data-theme=""]) #apply-card-2 .bg-gradient-to-l {
    background: linear-gradient(to right, rgba(var(--bg-body-rgb), 0.8), rgba(var(--bg-body-rgb), 0.5), var(--apply-overlay-color)) !important;
}

[data-theme]:not([data-theme=""]) #apply-card-2 .bg-gradient-to-l {
    background: linear-gradient(to left, rgba(var(--bg-body-rgb), 0.8), rgba(var(--bg-body-rgb), 0.5), var(--apply-overlay-color)) !important;
}

/* Form card inner */
[data-theme]:not([data-theme=""]) #apply-card-3 .bg-gradient-to-b.from-\[\#1C1C1A\].to-\[\#0A0A0A\] {
    background: linear-gradient(to bottom, var(--apply-card-inner-from), var(--apply-card-inner-to)) !important;
}

[data-theme]:not([data-theme=""]) #apply-card-3 .border-\[\#3A3326\] {
    border-color: var(--apply-form-border) !important;
}

/* Form inputs */
[data-theme]:not([data-theme=""]) .premium-input {
    background-color: var(--apply-input-bg) !important;
}

/* Form card top banner gradient */
[data-theme]:not([data-theme=""]) #apply-card-3 .bg-gradient-to-t.from-\[\#0A0A0A\] {
    background: linear-gradient(to top, var(--apply-card-inner-to), rgba(0,0,0,0.6), transparent) !important;
}

/* Form card banner bg */
[data-theme]:not([data-theme=""]) #apply-card-3 .bg-\[\#1C1C1A\] {
    background-color: var(--apply-card-inner-from) !important;
}


/* =============================================
   MOBILE SWIPE ROSTER
   ============================================= */

@media (max-width: 639px) {
    .talent-swipe-container {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex !important;
        gap: 16px;
        /* First and last cards need room on each side so scroll-snap
           can fully center them — otherwise the last card clips. */
        padding: 0 12.5vw 8px;
    }

    .talent-swipe-container::-webkit-scrollbar {
        display: none;
    }

    .talent-swipe-container > .talent-card {
        flex: 0 0 75vw;
        max-width: 75vw;
        scroll-snap-align: center;
    }

}

/* Swipe arrows — flank the visible talent card on mobile */
.swipe-arrow,
.swipe-arrow-count {
    display: none;
}

@media (max-width: 639px) {
    .swipe-arrows-wrapper {
        position: relative;
    }

    .swipe-arrow {
        display: flex;
        position: absolute;
        top: 37.5vw; /* vertical center of the square talent card (75vw wide) */
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(var(--bg-body-rgb), 0.85);
        border: 1px solid var(--border-accent);
        color: var(--gold-light, #C7AA74);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        z-index: 5;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .swipe-arrow-left {
        left: 4px;
    }

    .swipe-arrow-right {
        right: 4px;
    }

    .swipe-arrow:active {
        background: rgba(212, 175, 55, 0.2);
        border-color: #D4AF37;
        color: #D4AF37;
    }

    .swipe-arrow svg {
        width: 18px;
        height: 18px;
    }

    .swipe-arrow-count {
        display: block;
        text-align: center;
        margin-top: 10px;
        font-family: 'Cinzel', serif;
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--text-muted, #817b70);
        transition: color 0.3s ease;
    }
}


/* =============================================
   THEME SELECTOR STYLES
   ============================================= */

.theme-selector-wrapper {
    position: relative;
    height: 100%;
    border-right: 1px solid #1A1916;
}

.theme-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 14px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: #C7AA74;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.theme-selector-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.theme-selector-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Color swatch in button */
.theme-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(199, 170, 116, 0.5);
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

/* Dropdown */
.theme-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #24221D;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid #1A1916;
    z-index: 120;
    flex-direction: column;
}

.theme-selector-wrapper:hover .theme-dropdown,
.theme-selector-wrapper.open .theme-dropdown {
    display: flex;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1A1916;
    color: #C7AA74;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-option:last-child {
    border-bottom: none;
}

.theme-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.theme-option.active {
    color: #D4AF37;
}

.theme-option .theme-swatch {
    width: 14px;
    height: 14px;
}

/* Mobile theme selector in dropdown menu */
.mobile-theme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid #1A1916;
    background: rgba(26, 25, 22, 0.5);
    align-items: center;
}

.mobile-theme-row .theme-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: #8A857A;
    text-transform: uppercase;
    margin-right: 4px;
}

.mobile-theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mobile-theme-swatch:hover {
    transform: scale(1.15);
}

.mobile-theme-swatch.active {
    border-color: #D4AF37;
}