.elegant-footer .footer-city span {
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* --- Elegant Footer Styles --- */
.elegant-footer {
    background: linear-gradient(90deg, #0B2E6B 0%, #1a3a6e 100%);
    color: #fff;
    font-size: 1rem;
    padding: 0;
    border-top: 0;
}
.elegant-footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 20px 18px 20px;
    max-width: var(--container);
    margin: 0 auto;
}
.elegant-footer .footer-branding {
    flex: 1 1 180px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.elegant-footer .footer-logo {
    height: 48px;
    width: auto;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(11,46,107,0.08);
}
.elegant-footer .footer-contacts {
    flex: 2 1 340px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    align-items: flex-start;
    justify-content: flex-start;
}
.elegant-footer .footer-contacts-group {
    min-width: 220px;
}
.elegant-footer .footer-contacts-cities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
    margin-top: 8px;
}
.elegant-footer .footer-city strong {
    color: #ffd700;
    font-weight: 700;
}
.elegant-footer .footer-email {
    min-width: 180px;
    margin-top: 8px;
}
.elegant-footer .footer-email a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    word-break: break-all;
}
.elegant-footer h4 {
    font-size: 1.08em;
    margin: 0 0 4px 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.elegant-footer .footer-copyright {
    flex: 1 1 180px;
    min-width: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 0.98em;
    color: #e0e6f0;
}
@media (max-width: 900px) {
    .elegant-footer .footer-inner {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
        padding: 28px 10px 14px 10px;
    }
    .elegant-footer .footer-contacts-cities {
        grid-template-columns: 1fr;
        gap: 8px 0;
    }
    .elegant-footer .footer-branding, .elegant-footer .footer-copyright {
        align-items: flex-start;
        justify-content: flex-start;
    }
}
@media (max-width: 600px) {
    .elegant-footer .footer-inner {
        padding: 18px 4vw 10px 4vw;
        gap: 18px;
    }
    .elegant-footer .footer-logo {
        height: 38px;
    }
    .elegant-footer .footer-contacts {
        gap: 18px 0;
    }
    .elegant-footer .footer-contacts-cities {
        gap: 6px 0;
    }
}
:root{
    --bg:#f7f9fb;
    /* Brand colors (Navy Classique chosen) */
    --brand-primary-rgb: 11,46,107; /* #0B2E6B - Navy Classique */
    --brand-danger-rgb: 215,38,61;  /* red from 'tchad' */
    --brand-rgb: var(--brand-primary-rgb);
    --accent: rgb(var(--brand-rgb));
    --accent-600: #072244; /* darker navy for hover/active */
    --accent-100: rgba(var(--brand-rgb),0.08);
    --accent-120: rgba(var(--brand-rgb),0.12);
    --danger: rgb(var(--brand-danger-rgb));
    --danger-600: #b21f36;
    --muted:#6b7280;
    --card:#ffffff;
    --radius:12px;
    --container:1200px;
    --gap:20px;
    --text-body: rgb(var(--brand-rgb));
    --text-on-accent:#ffffff;
    /* Force hero text color to use accent (navy) */
    --hero-foreground: var(--accent);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}  
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text-body)}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:20px;top:20px;width:auto;height:auto;background:#fff;padding:8px;border-radius:6px;box-shadow:0 6px 18px rgba(2,6,23,0.08)}

/* Header */
.site-header{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));backdrop-filter: blur(6px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(15,23,42,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:22px;color:var(--accent);text-decoration:none}
.logo-img{height:44px;width:auto;display:block}
@media (max-width:640px){
  .logo-img{height:36px}
}

/* Nav */
.nav-menu ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.nav-menu a{display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--accent);background:transparent;transition:all .15s ease}

/* Amélioration lisibilité menu principal dans hero */
.hero .nav-menu ul > li > a {
    background: orange !important;
    color: #222 !important;
    box-shadow: 0 2px 8px rgba(255,140,0,0.18) !important;
    border: 1px solid #ff9800 !important;
    font-weight: 700;
}
.hero .nav-menu ul > li > a:hover,
.hero .nav-menu ul > li > a:focus {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent-600) !important;
    outline: none !important;
    transform: translateY(-2px) !important;
}
.hero .nav-menu ul > li > a.active {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent-600) !important;
    box-shadow: 0 8px 24px rgba(var(--brand-rgb),0.14) !important;
}
.nav-menu a:hover,.nav-menu a:focus{background:rgba(var(--brand-rgb),0.08);outline:none;transform:translateY(-2px)}
.nav-menu a.active{background:var(--accent);color:var(--text-on-accent);box-shadow:0 8px 24px rgba(var(--brand-rgb),0.12)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.hamburger{width:22px;height:2px;background:var(--accent);display:inline-block;position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--accent)}
.hamburger::before{top:-7px}.hamburger::after{top:7px}

/* Hero */
.hero{position:relative;background-image:linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.25));background-size:cover;background-position:center;color:var(--danger);padding:80px 0;padding-left:140px}
.hero::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:180px;height:180px;background-image:var(--hero-watermark, none);background-repeat:no-repeat;background-position:center;background-size:contain;border-radius:10px;z-index:0;pointer-events:none;opacity:var(--hero-watermark-opacity,0);transition:opacity .28s ease,transform .28s ease} 
.hero:hover::before,.hero:focus-within::before{opacity:0.18;transform:translateY(-55%) scale(1.03)}
/* Specific lighter hero variants (keep gradient but watermark more subtle) */
.page-admissions .hero::before,.page-contact .hero::before,.page-services .hero::before{width:220px;height:220px;left:18px;opacity:0.06;filter:grayscale(1) saturate(.6) contrast(.95)}
/* Make sure content stays above the watermark */
.hero-inner{display:flex;align-items:center;gap:40px;position:relative;z-index:1}
/* Hide watermark on small screens to preserve space */
@media (max-width:640px){
  .hero::before{display:none}
}
.hero-copy{flex:1}
.hero h1{font-size:28px;line-height:1.05;margin-bottom:10px}
.tagline{font-weight:600;color:#e6f7ea;margin-bottom:10px}
.sub{color:rgba(255,255,255,0.9);margin-bottom:18px}
.hero-visual{width:320px;flex-shrink:0}
.card-cta{background:rgba(255,255,255,0.95);color:#062024;padding:18px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.12)}
.card-cta h3{margin-bottom:6px;color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--text-on-accent)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.18);color:var(--accent)}
.btn-ghost{background:rgba(255,255,255,0.12);color:var(--accent)}
.btn:hover{transform:translateY(-3px)}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:20px;margin-bottom:14px}
.about-list{list-style:none;color:var(--muted);display:grid;gap:8px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.reasons .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.reasons h3{color:var(--accent);margin-bottom:8px}

/* Stats */
.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat{background:linear-gradient(180deg,#fff,#f7fafc);padding:18px;border-radius:12px;text-align:center;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.stat-val{font-weight:800;font-size:26px;color:var(--accent);margin-bottom:6px}
.stat-label{font-size:13px;color:var(--muted)}

/* Footer */
.site-footer{background:#0b1720;color:var(--accent);padding:22px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-logo{height:40px;width:auto;display:block;border-radius:6px}
@media (max-width:640px){.footer-logo{height:32px}}
.site-footer a{color:rgba(255,255,255,0.85)}

/* Responsive */
@media (max-width:960px){
    .hero-inner{flex-direction:column;align-items:flex-start}
    .hero-visual{width:100%}
    .grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .nav-menu{display:none;position:absolute;top:72px;right:20px;background:var(--card);padding:12px;border-radius:10px;box-shadow:0 18px 54px rgba(2,6,23,0.12)}
    .nav-menu.open{display:block}
    .nav-toggle{display:block}
    .nav-menu ul{flex-direction:column}
    .header-inner{height:64px}
    .hero{padding:40px 0;padding-left:20px;background-position:center;background-size:cover}
    .hero::before{display:none}
    .hero h1{font-size:20px}
    .stats-grid{grid-template-columns:1fr}
}

/* Small touches */

/* Planning UI -> interactive emplois du temps */
.planning-ui{display:flex;flex-direction:column;gap:18px;margin-top:16px}
.filiere-list{display:flex;flex-wrap:wrap;gap:10px}
.filiere-btn{background:transparent;border:1px solid rgba(var(--brand-rgb),0.08);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;background:#fff;color:var(--accent);transition:transform .15s ease,box-shadow .15s ease}
.filiere-btn[aria-selected="true"], .filiere-btn:focus{background:var(--accent);color:var(--text-on-accent);box-shadow:0 10px 30px rgba(var(--brand-rgb),0.12);transform:translateY(-3px)}
.levels{min-height:58px;display:flex;align-items:center}
.levels-wrap{display:flex;gap:10px;opacity:0;transform:translateY(8px);transition:all .28s ease}
.levels-wrap.is-visible{opacity:1;transform:none}
.level-btn{background:transparent;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--accent);padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;transition:transform .12s ease}
.level-btn:hover,.level-btn:focus{transform:translateY(-3px);box-shadow:0 8px 20px rgba(2,6,23,0.12)}
.planning-feedback{color:var(--muted);font-weight:600}

[tabindex="-1"]:focus{outline:none}
a:focus{outline:3px solid rgba(var(--brand-rgb),0.15);outline-offset:3px}

/* --- Page Formations --- */
.page-formation .hero{padding:56px 0;min-height:320px;--hero-overlay:linear-gradient(180deg, rgba(var(--brand-rgb),0.48), rgba(var(--brand-rgb),0.30));--hero-watermark-opacity:0;color:var(--hero-foreground,#fff);position:relative}
.page-formation .hero::before{display:none} 
.form-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}
.search{flex:1;min-width:220px}
.search input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(2,6,23,0.06)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{background:transparent;border:1px solid rgba(2,6,23,0.06);padding:8px 12px;border-radius:999px;font-weight:600;cursor:pointer}
.filter-btn[aria-pressed="true"]{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}

/* Download button in controls */
.download-btn{margin-left:16px;background:var(--accent);color:var(--text-on-accent);padding:10px 14px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:0;white-space:nowrap}
.download-btn:hover{background:var(--accent-600);transform:translateY(-2px)}

/* Mobile: stack controls and make download full width */
@media (max-width:640px){
  .form-controls{flex-direction:column;align-items:stretch}
  .filters{order:2}
  .search{order:1}
  .download-btn{order:3;margin-left:0;width:100%;justify-content:center}
}

.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.program-card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.06);display:flex;flex-direction:column;gap:10px;transform:translateY(8px);opacity:0;transition:all .5s ease}
.program-card.is-visible{transform:none;opacity:1}
.program-card h3{margin:0;color:var(--accent)}
.program-meta{font-size:13px;color:var(--muted)}
.accordion{border-top:1px solid rgba(2,6,23,0.04);margin-top:8px;padding-top:8px}
.accordion button{background:none;border:0;width:100%;text-align:left;padding:8px 0;font-weight:700;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.accordion-content{overflow:hidden;max-height:0;transition:max-height .28s ease;padding:0 0}
.accordion-content p{margin:8px 0;color:var(--muted)}

/* Catalogue */
.catalogue-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:18px 0}
.catalogue-group{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.04);transform:translateY(8px);opacity:0;transition:all .45s ease}
.catalogue-group.is-visible{transform:none;opacity:1}

/* Clickable catalogue items */
.catalog-item{background:transparent;border:0;padding:0;margin:0;text-align:left;font-weight:600;color:var(--muted);cursor:pointer;border-radius:6px}
.catalog-item:hover,.catalog-item:focus{color:var(--accent);outline:none;text-decoration:underline}

/* Controls meta */
.controls-meta{display:flex;gap:12px;align-items:center;margin-top:12px}
.result-count{color:var(--muted);font-weight:600}

/* No results state */
.no-results{background:rgba(245,249,255,0.9);border:1px solid rgba(var(--brand-rgb),0.06);color:var(--accent);padding:10px 14px;border-radius:8px;margin-top:12px}
.catalogue-group h3{margin:0 0 8px 0;color:var(--accent);font-size:16px}
.catalogue-group ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}
.catalogue-group li{margin-bottom:6px}
@media (max-width:960px){.catalogue-grid{grid-template-columns:1fr}}

/* Responsive */
@media (max-width:960px){.program-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.program-grid{grid-template-columns:1fr}.form-controls{flex-direction:column;align-items:stretch}}

/* --- Unified hero with CSS variables (themeable) --- */
:root{--hero-bg: url('Logo.jpg');--hero-overlay: none;--hero-watermark-opacity:0;--hero-min-height:320px;--hero-padding:56px 0;--hero-text-shadow: 0 6px 18px rgba(2,6,23,0.78);} 

/* Base hero uses variables so pages can override */
.hero{padding:var(--hero-padding);min-height:var(--hero-min-height);background-image:var(--hero-overlay), var(--hero-bg);background-repeat:no-repeat;background-position:center;background-size:cover;color:var(--hero-foreground,#fff);position:relative;background-color:rgba(var(--brand-rgb),0.16)}

/* Allow pages to override watermark opacity or hide it entirely */
/* Keep ::before watermark behaviour but driven by --hero-watermark-opacity */
/* For pages that should hide the watermark, set --hero-watermark-opacity: 0 */
/* Keep a strong text shadow by default (accessible over images) */
.hero h1, .hero .tagline{ text-shadow: var(--hero-text-shadow) }

/* Force hero text color to the configured hero foreground (user requested red) */
/* Targets common text elements in the hero to override remaining white defaults */
.hero, .hero h1, .hero h2, .hero h3, .hero h4, .hero .tagline, .hero .sub, .hero p, .hero a, .hero .card-cta, .hero .btn, .hero .btn-primary, .hero .btn-outline, .hero .btn-ghost{ color: var(--hero-foreground) !important }

/* Per-page variants: you can add/remove classes to change the overlay or watermark */
.page-admissions, .page-formation, .scolarite-main, .library-hero, .page-services, .page-contact, .page-emplois{ --hero-overlay: linear-gradient(180deg, rgba(var(--brand-rgb),0.52), rgba(var(--brand-rgb),0.30)); --hero-watermark-opacity: 0; }

/* Keep card CTA style for admissions specifically */
.page-admissions .hero .card-cta{background:linear-gradient(180deg,#fff,#f7fff9);color:var(--accent);box-shadow:0 10px 30px rgba(var(--brand-rgb),0.06)}

@media (max-width:640px){ .hero{ min-height:220px; padding:40px 20px; background-position:center top } }

/* Prefer modern formats if detected by the page (class toggled via JS) */
.has-avif .hero{ --hero-bg: url('Logo.avif') }
.has-webp .hero{ --hero-bg: url('Logo.webp') }

/* Prefer modern formats if detected -> handled by variables above */
/* Use --hero-bg to swap in modern image formats when available
   e.g. add class .has-avif or .has-webp on <html> via small JS check */
.has-avif .hero{ --hero-bg: url('Logo.avif') }
.has-webp .hero{ --hero-bg: url('Logo.webp') }
/* Slightly lighter shadow for admissions content for better contrast */
.page-admissions .hero h1, .page-admissions .hero .tagline, .page-admissions .hero .sub{ text-shadow: 0 6px 18px rgba(2,6,23,0.6);}


/* Form layout */
#admission-form{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.06)}
.form-row{display:block;margin-bottom:14px}
.form-row.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row label{display:block;font-weight:700;margin-bottom:6px}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="date"], .form-row select, .form-row input[type="file"]{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(2,6,23,0.06);background:#fff}
.form-row input:focus, .form-row select:focus{outline:3px solid rgba(var(--brand-rgb),0.12);outline-offset:3px}
.fieldset-files{border-top:1px solid rgba(2,6,23,0.04);padding-top:12px;margin-top:8px}
.file-row{margin-bottom:12px}
.muted{color:var(--muted)}

/* Suggestion box styles */
.suggestion-card{background:linear-gradient(180deg,#fff,#f8fffb);padding:18px;border-radius:14px;box-shadow:0 12px 36px rgba(2,6,23,0.06);margin-top:12px}
.suggestion-form label{font-weight:700;margin-bottom:6px;display:block}
.suggestion-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(2,6,23,0.06);resize:vertical;background:#fff}
.suggestion-form input[type="email"], .suggestion-form select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(2,6,23,0.06);background:#fff}
.toggle-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.char-count{font-size:12px;color:var(--muted);text-align:right;margin-top:6px}
.btn-ghost{background:transparent;border:1px solid rgba(2,6,23,0.06);color:var(--accent);padding:8px 12px;border-radius:10px}

/* Small responsive tweaks */
@media (max-width:640px){
    .suggestion-form .two-cols{display:block}
    .char-count{text-align:right}
}

.form-messages{margin-top:12px;color:var(--muted)}
.form-messages.error{color:var(--accent)}
.form-messages.success{color:var(--accent)}

/* Modal */
#modal-root{position:fixed;inset:0;pointer-events:none;z-index:120}
#modal-root[aria-hidden="false"]{pointer-events:auto}
#modal-root .modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.48);padding:20px}
#modal-root .modal-panel{background:var(--card);padding:18px;border-radius:12px;max-width:720px;width:100%;box-shadow:0 24px 80px rgba(2,6,23,0.2)}
.modal-summary{background:#f7f9fb;padding:12px;border-radius:8px;max-height:280px;overflow:auto;font-family:monospace;margin:12px 0}
.modal-actions{display:flex;gap:12px;justify-content:flex-end}

/* Accordion specific for admissions */
[data-accordion] .accordion-btn{background:#fff;padding:10px;border-radius:8px;border:1px solid rgba(2,6,23,0.04)}
[data-accordion] .accordion-panel{overflow:hidden;max-height:0;transition:max-height .28s ease;margin-bottom:8px;padding-left:8px}

/* Accessibility helpers */
button[aria-expanded="true"]{box-shadow:0 8px 22px rgba(var(--brand-rgb),0.06);transform:translateY(-2px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Responsive small */
@media (max-width:640px){
  .form-row.two-cols{grid-template-columns:1fr}
  .modal-summary{max-height:200px}
}

/* --- User request: show only the intact logo on all hero sections --- */
/* This forces the hero to use the Logo image only and hides watermarks/overlays */
.hero{
  background-image: url('Logo.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  color: var(--danger);
  --hero-watermark-opacity: 0 !important;
  --hero-overlay: none !important;
}
.hero::before{display:none !important;}

/* --- Brand application: headings, links and interactive text use the logo color --- */
/* Headings use brand color for a dynamic look; body text remains high-contrast for readability */
h1,h2,h3,h4,h5,h6{color:var(--accent)}

/* Links and interactive elements */
a{color:var(--accent);text-decoration:none}
a:hover,a:focus{color:var(--accent-600);text-decoration:underline}

/* Nav, logo and other prominent UI elements */
.logo, .nav-menu a{color:var(--accent)}

/* Ensure buttons using accent have accessible text color */
.btn-primary, .download-btn{background:var(--accent);color:var(--text-on-accent)}

/* Muted text remains neutral */
.muted{color:var(--muted)}

/* Schedule Selector — Emplois du temps */
.schedule-selector {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: flex-end;
    padding: 24px;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.04) 0%, rgba(var(--brand-rgb), 0.02) 100%);
    border-radius: var(--radius);
    border: 1px solid rgba(var(--brand-rgb), 0.1);
    margin: 20px 0;
}

.selector-group {
    display: flex;
    flex-direction: column;
}

.selector-label {
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 8px;
    color: var(--accent);
}

.selector-input {
    padding: 12px 14px;
    border: 2px solid rgba(var(--brand-rgb), 0.2);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
    color: var(--text-body);
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.selector-input:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.08);
}

.selector-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}

.selector-input:disabled {
    background: rgba(var(--brand-rgb), 0.04);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.selector-input optgroup {
    font-weight: 600;
    color: var(--accent);
}

.selector-input option {
    padding: 8px;
    color: var(--text-body);
}

.schedule-selector .btn {
    padding: 12px 20px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1em;
}

.schedule-selector .btn-primary {
    background: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.15);
}

.schedule-selector .btn-primary:hover:not(:disabled) {
    background: var(--accent-600);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.25);
}

.schedule-selector .btn-primary:disabled {
    background: rgba(var(--brand-rgb), 0.2);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

.schedule-selector .btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.15);
}

#selection-feedback {
    grid-column: 1 / -1;
    min-height: 24px;
    padding: 0;
    font-size: 0.95em;
    color: var(--accent);
    font-weight: 500;
}

#selection-feedback:empty {
    display: none;
}

/* Responsive */
@media (max-width: 900px) {
    .schedule-selector {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    
    .schedule-selector .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .schedule-selector {
        padding: 16px;
        gap: 12px;
    }
    
    .selector-label {
        font-size: 0.9em;
    }
    
    .selector-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}