/* /dates/ — ByQualification.php (unscoped), AA2.php/AA3.php (city-scoped),
   AA4.php (county-scoped), and every dates/core/*.php AJAX fragment they
   load into #TopInfoBox/#DatesInfoBox. Same design tokens as Category.css/
   Courses.css/Descriptions.css under this page's own "dates-" prefix (see
   project memory "dates_client_page_fix_2026_09"). The popup pages
   (Classroom_additional.php, Alternatives_additional.php) load this same
   stylesheet directly rather than duplicating a second, smaller one. */
:root{
    --dates-navy: #0B1F3A;
    --dates-navy-2: #14315C;
    --dates-navy-3: #1E4079;
    --dates-coral: #D6363C;
    --dates-coral-dark: #C22A30;
    --dates-amber: #FFB020;
    --dates-teal: #0B7A6D;
    --dates-green: #188058;
    --dates-red: #D64545;
    --dates-bg: #F5F7FB;
    --dates-ink: #1A2333;
    --dates-muted: #5B6478;
    --dates-border: #E3E7F0;
    --dates-heading-font: 'Zilla Slab', Georgia, serif;
    --dates-body-font: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dates-main{background:var(--dates-bg);font-family:var(--dates-body-font);color:var(--dates-ink);}

/* Breadcrumb */
.dates-crumb{background:#fff;border-bottom:1px solid var(--dates-border);padding:12px 20px;}
.dates-crumb-wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--dates-muted);flex-wrap:wrap;}
.dates-crumb-wrap a{color:var(--dates-navy-3);text-decoration:none;}
.dates-crumb-wrap a:hover{text-decoration:underline;}

/* Hero */
.dates-hero{background:linear-gradient(100deg, var(--dates-navy) 0%, var(--dates-navy-2) 55%, var(--dates-navy-3) 100%);color:#fff;padding:40px 20px;text-align:center;}
.dates-hero-eyebrow{display:inline-block;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dates-amber);margin-bottom:10px;}
.dates-hero h1{font-family:var(--dates-heading-font);font-size:clamp(1.4rem, 3.6vw, 2.1rem);font-weight:700;margin:0;}

/* Layout */
.dates-wrap{max-width:1100px;margin:0 auto;padding:28px 20px 64px;display:flex;flex-direction:column;gap:20px;}
.dates-card{background:#fff;border:1px solid var(--dates-border);border-radius:14px;padding:18px 20px;}
.dates-tabs-lead{margin:0 0 12px;font-size:0.92rem;}

/* Tab bars (delivery + top) */
.dates-tabbar,.dates-toptabbar{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--dates-border);padding-bottom:12px;margin-bottom:14px;}
.dates-tab,.dates-toptab{display:inline-flex;align-items:center;gap:6px;background:var(--dates-bg);color:var(--dates-navy);border:1px solid var(--dates-border);border-radius:999px;padding:8px 16px;font-size:0.85rem;font-weight:700;cursor:pointer;transition:background-color .2s ease,color .2s ease;}
.dates-tab:hover,.dates-toptab:hover{background:#EDF0F8;}
.dates-tab.is-active,.dates-toptab.is-active{background:var(--dates-navy);color:#fff;border-color:var(--dates-navy);}
.dates-tab-count,.dates-tab i,.dates-toptab i{font-size:0.75rem;}

.dates-infobox{min-height:80px;}
.dates-infobox-panel h2,.dates-infobox-panel h3{font-family:var(--dates-heading-font);color:var(--dates-navy);margin:0 0 10px;font-size:1.1rem;}
.dates-loading,.dates-error,.dates-empty{padding:18px;text-align:center;color:var(--dates-muted);font-size:0.9rem;}
.dates-error{color:var(--dates-red);}

/* Country/county/city filter row */
.dates-filter-row{display:flex;flex-wrap:wrap;gap:14px;background:var(--dates-bg);border:1px solid var(--dates-border);border-radius:10px;padding:14px;margin-bottom:14px;}
.dates-filter-field{display:flex;flex-direction:column;gap:4px;font-size:0.78rem;font-weight:700;color:var(--dates-muted);text-transform:uppercase;letter-spacing:0.03em;flex:1;min-width:160px;}
.dates-filter-field select{font-family:inherit;font-size:0.9rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--dates-ink);padding:8px 10px;border-radius:8px;border:1px solid var(--dates-border);background:#fff;}

/* Event cards */
.dates-event-card{display:grid;grid-template-columns:1.4fr 1fr auto;grid-template-areas:"main included book" "more more more";gap:16px;align-items:start;background:#fff;border:1px solid var(--dates-border);border-radius:12px;padding:18px;margin-bottom:14px;}
.dates-event-main{grid-area:main;}
.dates-event-included{grid-area:included;}
.dates-event-book{grid-area:book;display:flex;align-items:center;}
.dates-event-more{grid-area:more;}
.dates-event-city{margin-bottom:6px;font-size:1.02rem;}
.dates-map-link{background:none;border:none;color:var(--dates-navy-3);text-decoration:underline;cursor:pointer;font:inherit;padding:0;}
.dates-event-date{margin:2px 0;}
.dates-event-time,.dates-event-cutoff{font-size:0.85rem;color:var(--dates-muted);margin:2px 0;}
.dates-event-subcategory{margin-top:8px;font-size:0.82rem;color:var(--dates-navy-3);font-style:italic;}
.dates-event-included-label{font-weight:700;font-size:0.82rem;margin:0 0 6px;}
.dates-event-included ul{list-style:none;margin:0;padding:0;font-size:0.85rem;display:flex;flex-direction:column;gap:6px;}
.dates-icon-yes{color:var(--dates-green);}
.dates-icon-no{color:var(--dates-red);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.dates-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:0.85rem;padding:10px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;transition:background-color .2s ease, transform .2s ease;font-family:inherit;}
.dates-btn-book{background:var(--dates-green);color:#fff;flex-direction:column;line-height:1.3;}
.dates-btn-book:hover{filter:brightness(0.95);}
.dates-event-price{font-size:1rem;}
.dates-event-vat{font-size:0.72rem;opacity:0.85;}
.dates-event-book-label{font-size:0.78rem;}
.dates-btn-info{background:var(--dates-navy);color:#fff;width:100%;}
.dates-btn-info:hover{background:var(--dates-navy-3);}

/* Pagination */
.dates-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px;}
.dates-page-btn{background:var(--dates-bg);border:1px solid var(--dates-border);border-radius:999px;padding:8px 16px;font-size:0.82rem;font-weight:700;cursor:pointer;color:var(--dates-navy);}
.dates-page-btn:disabled{opacity:0.4;cursor:not-allowed;}
.dates-pagination-status{font-size:0.82rem;color:var(--dates-muted);}

/* Cities/Counties chip lists */
.dates-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.dates-chip{background:var(--dates-amber);color:var(--dates-navy);font-weight:700;font-size:0.85rem;padding:8px 16px;border-radius:999px;text-decoration:none;}
.dates-chip:hover{filter:brightness(0.95);}

.dates-rich-text{font-size:0.92rem;line-height:1.6;}
.dates-other-courses{margin-top:12px;padding-top:12px;border-top:1px solid var(--dates-border);}

/* Alternatives ("Similar Courses") cards */
.dates-alt-card{grid-template-areas:"main main book" "more more more";grid-template-columns:2fr auto;}
.dates-alt-name{font-size:1.05rem;}

/* Not-found state */
.dates-empty-page{background:#fff;border:1px solid var(--dates-border);border-radius:14px;padding:36px;text-align:center;color:var(--dates-muted);max-width:640px;margin:36px auto;}
.dates-empty-page h1{font-family:var(--dates-heading-font);color:var(--dates-navy);font-size:1.5rem;margin:0 0 10px;}
.dates-empty-page a{color:var(--dates-navy-3);font-weight:700;}

/* Standalone "More Info." popup pages (Classroom_additional.php,
   Alternatives_additional.php) — small, self-contained windows, not the
   full site chrome. */
.dates-popup-body{margin:0;padding:18px;font-family:var(--dates-body-font);color:var(--dates-ink);background:var(--dates-bg);}
.dates-popup-card{background:#fff;border:1px solid var(--dates-border);border-radius:12px;padding:18px;}
.dates-popup-logo{text-align:center;margin-bottom:12px;}
.dates-popup-logo img{height:50px;width:50px;border-radius:8px;object-fit:cover;}
.dates-popup-title{font-family:var(--dates-heading-font);color:var(--dates-navy);text-align:center;font-size:1.1rem;margin:0 0 12px;}
.dates-popup-subtitle{text-align:center;margin:0 0 12px;}
.dates-popup-section{font-size:0.9rem;line-height:1.55;margin-bottom:10px;}
.dates-popup-label{font-weight:700;font-size:0.82rem;margin:0 0 6px;}
.dates-popup-terms{text-align:right;font-size:0.85rem;}
.dates-popup-terms a{color:#6b2fb3;font-weight:700;text-decoration:none;}
.dates-popup-terms a:hover{text-decoration:underline;}

@media (max-width: 720px){
    .dates-event-card{grid-template-columns:1fr;grid-template-areas:"main" "included" "book" "more";}
    .dates-btn-book{width:100%;}
}