/* ══════════════════════════════════════════════════════════
   HOLYLAND AFRICA SAFARIS — Design System v2.0
   Premium Luxury Safari Brand
   ══════════════════════════════════════════════════════════ */

/* ── 1. Light Mode Tokens (Default) ────────────────────────── */
:root {
    /* Brand */
    --hl-primary:         #0F3D2E;
    --hl-primary-dk:      #0a2e22;
    --hl-secondary:       #D4AF37;
    --hl-secondary-lt:    #e8c84a;
    --hl-secondary-rgb:   212, 175, 55;

    /* Page Surfaces */
    --hl-bg:       #F8F4E9;
    --hl-surface:  #FFFFFF;
    --hl-card:     #FFFFFF;

    /* Typography */
    --hl-text:         #1C1C1C;
    --hl-text-muted:   #4A4A4A;
    --hl-text-inverse: #F8F4E9;

    /* Borders & Shadows */
    --hl-border:    #E5E0D5;
    --hl-shadow-sm: 0 2px 10px rgba(15,61,46,.07);
    --hl-shadow:    0 6px 28px rgba(15,61,46,.11);
    --hl-shadow-lg: 0 12px 52px rgba(15,61,46,.18);

    /* Semantic */
    --hl-success: #2E7D32;
    --hl-warning: #F9A825;
    --hl-error:   #C62828;

    /* Navigation */
    --hl-nav-bg:   #FFFFFF;
    --hl-nav-text: #0F3D2E;
    --hl-nav-hover:#D4AF37;

    /* Footer */
    --hl-footer-bg:   #0F3D2E;
    --hl-footer-text: #F8F4E9;

    /* Hero Overlay */
    --hl-overlay:   rgba(15,61,46,.72);
    --hl-overlay-2: rgba(10,30,22,.35);

    /* CTA Banner */
    --hl-cta-bg: linear-gradient(135deg,#0F3D2E 0%,#1a5c44 60%,#0a2e22 100%);

    /* Transition */
    --hl-ease: .3s ease;
}

/* ── 2. Dark Mode Token Overrides ───────────────────────────── */
html[data-theme="dark"] {
    --hl-primary:      #1E5A45;
    --hl-primary-dk:   #26735a;

    --hl-bg:      #0B1410;
    --hl-surface: #13211B;
    --hl-card:    #1A2A23;

    --hl-text:         #F8F4E9;
    --hl-text-muted:   #C9C4B8;
    --hl-text-inverse: #0B1410;

    --hl-border:    #2A3A33;
    --hl-shadow-sm: 0 2px 10px rgba(0,0,0,.28);
    --hl-shadow:    0 6px 28px rgba(0,0,0,.42);
    --hl-shadow-lg: 0 12px 52px rgba(0,0,0,.62);

    --hl-success: #4CAF50;
    --hl-warning: #FFC107;
    --hl-error:   #EF5350;

    --hl-nav-bg:   #13211B;
    --hl-nav-text: #F8F4E9;

    --hl-footer-bg: #0B1410;

    --hl-overlay:   rgba(0,0,0,.72);
    --hl-overlay-2: rgba(0,0,0,.35);

    --hl-cta-bg: linear-gradient(135deg,#1E5A45 0%,#0F3D2E 60%,#0B1410 100%);
}

/* ── 3. Smooth Theme Transitions ────────────────────────────── */
body,
.es-navbar,
.es-footer,
.card,
.es-tour-card,
.es-page-header,
.es-pkg-hero,
.es-cta-banner,
.form-control,
.form-select,
.form-label,
.list-group-item,
.modal-content,
.btn,
hr {
    transition: background-color var(--hl-ease),
                color var(--hl-ease),
                border-color var(--hl-ease),
                box-shadow var(--hl-ease);
}

/* ── 4. Base & Typography ───────────────────────────────────── */
body {
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    background-color: var(--hl-bg);
    color: var(--hl-text);
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--hl-text);
    letter-spacing: -.01em;
    line-height: 1.2;
}
.display-3, .display-4, .display-5 { letter-spacing: -.025em; }

/* ── 5. Utilities ───────────────────────────────────────────── */
.py-6          { padding-top: 5rem; padding-bottom: 5rem; }
.tracking-wide { letter-spacing: .08em; }
.text-gold     { color: var(--hl-secondary) !important; }
.bg-hl         { background-color: var(--hl-bg) !important; }
.bg-surface    { background-color: var(--hl-surface) !important; }

/* Bootstrap warning → luxury gold */
.bg-warning               { background-color: var(--hl-secondary) !important; }
.badge.bg-warning         { background-color: var(--hl-secondary) !important; color: #0B1410 !important; }
.text-warning             { color: var(--hl-secondary) !important; }
.border-warning           { border-color: var(--hl-secondary) !important; }

/* Bootstrap dark overrides */
.bg-light                 { background-color: var(--hl-bg) !important; }
.text-muted               { color: var(--hl-text-muted) !important; }
.text-dark                { color: var(--hl-text) !important; }
.border                   { border-color: var(--hl-border) !important; }
hr                        { border-color: var(--hl-border); }

/* ── 6. Buttons ─────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    transition: background-color var(--hl-ease),
                color var(--hl-ease),
                border-color var(--hl-ease),
                transform .15s,
                box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary green button */
.btn-hl-primary {
    background: var(--hl-primary);
    color: #fff;
    border: 2px solid var(--hl-primary);
}
.btn-hl-primary:hover,
.btn-hl-primary:focus {
    background: var(--hl-secondary);
    border-color: var(--hl-secondary);
    color: #0B1410;
    box-shadow: 0 6px 20px rgba(var(--hl-secondary-rgb),.35);
}

/* Gold/warning button */
.btn-warning {
    background-color: var(--hl-secondary) !important;
    border-color: var(--hl-secondary) !important;
    color: #0B1410 !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--hl-secondary-lt) !important;
    border-color: var(--hl-secondary-lt) !important;
    color: #0B1410 !important;
    box-shadow: 0 6px 20px rgba(var(--hl-secondary-rgb),.4) !important;
}

/* Secondary gold outline */
.btn-hl-secondary {
    background: transparent;
    color: var(--hl-secondary);
    border: 2px solid var(--hl-secondary);
}
.btn-hl-secondary:hover,
.btn-hl-secondary:focus {
    background: var(--hl-secondary);
    color: #0B1410;
    box-shadow: 0 6px 20px rgba(var(--hl-secondary-rgb),.35);
}

/* Outline dark: adapts to theme */
.btn-outline-dark {
    color: var(--hl-text) !important;
    border-color: var(--hl-text) !important;
}
.btn-outline-dark:hover {
    background-color: var(--hl-text) !important;
    color: var(--hl-surface) !important;
    transform: translateY(-2px);
}

/* Outline light: ghost on dark hero */
.btn-outline-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.7) !important;
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,.15) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ── 7. Navbar ──────────────────────────────────────────────── */
.es-navbar {
    background: var(--hl-nav-bg) !important;
    box-shadow: var(--hl-shadow-sm);
}
.es-navbar .nav-link {
    color: var(--hl-nav-text) !important;
    font-weight: 500;
    letter-spacing: .015em;
    padding: .5rem .75rem !important;
    border-radius: 6px;
    transition: color var(--hl-ease), background var(--hl-ease);
}
.es-navbar .nav-link:hover,
.es-navbar .nav-link:focus  { color: var(--hl-secondary) !important; }
.es-navbar .nav-link.active { color: var(--hl-secondary) !important; }
.es-navbar .navbar-toggler {
    border-color: var(--hl-border) !important;
    color: var(--hl-nav-text) !important;
}
/* Hamburger icon color by mode */
.es-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815%2C61%2C46%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .es-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248%2C244%2C233%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── 8. Logo ────────────────────────────────────────────────── */
.hl-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 0 2px rgba(var(--hl-secondary-rgb),.3);
    flex-shrink: 0;
}
.es-nav-logo {
    height: 42px;
    width: auto;
    border-radius: 50%;
    display: block;
}
.es-footer-logo {
    height: 60px;
    width: auto;
    border-radius: 50%;
    display: block;
}

@media (max-width: 576px) { .es-nav-logo { height: 34px; } }

/* ── 9. Theme Toggle ────────────────────────────────────────── */
#themeToggle {
    line-height: 1;
    padding: 5px 9px;
    font-size: .85rem;
    background: transparent !important;
    color: var(--hl-nav-text) !important;
    border-color: var(--hl-border) !important;
}
#themeToggle:hover {
    background: var(--hl-primary) !important;
    border-color: var(--hl-primary) !important;
    color: #fff !important;
}

/* ── 10. Hero ───────────────────────────────────────────────── */
.es-hero {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
    background-color: var(--hl-primary); /* fallback while images load */
}

/* Carousel fills the full hero */
.es-hero-carousel,
.es-hero-carousel .carousel-inner {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

.es-hero-slide-img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
    object-position: center;
}

/* Dark gradient overlay so text stays readable */
.es-hero-carousel .carousel-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10,30,22,.78) 0%, rgba(10,30,22,.38) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Hero text sits above the overlay */
.es-hero-content {
    position: relative;
    z-index: 2;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* Dots sit below the text, above the overlay */
.es-hero-dots {
    z-index: 3 !important;
    margin-bottom: 1.5rem !important;
}

.es-hero-dots [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-top: 0;
    border-bottom: 0;
    opacity: .55;
    background-color: #fff;
    transition: opacity var(--hl-ease), transform var(--hl-ease), background-color var(--hl-ease);
}

.es-hero-dots .active {
    background-color: var(--hl-secondary);
    opacity: 1;
    transform: scale(1.45);
}

/* Prev/Next arrows sit above overlay */
.es-hero-ctrl { z-index: 3 !important; }

.es-hero h1,
.es-hero-content h1 {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 6px 32px rgba(0,0,0,.5);
    letter-spacing: -.025em;
    line-height: 1.1;
}

.es-hero-content p,
.es-hero-content .lead {
    color: #fff !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

@media (max-width: 768px) {
    .es-hero           { min-height: 74vh; }
    .es-hero-content   { min-height: 74vh; }
    .es-hero-slide-img { height: 74vh; }
    .es-hero h1        { font-size: 2.25rem; }
}

/* ── 11. Cards ──────────────────────────────────────────────── */
.card {
    background-color: var(--hl-card) !important;
    border-color: var(--hl-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--hl-shadow-sm);
    color: var(--hl-text);
}
.card:hover { box-shadow: var(--hl-shadow) !important; }
.card-header {
    background: transparent !important;
    border-color: var(--hl-border) !important;
}
.card-footer {
    background: transparent !important;
    border-color: var(--hl-border) !important;
}
.card-body  { color: var(--hl-text); }
.card-title { color: var(--hl-text); }
.card-text  { color: var(--hl-text-muted); }

/* ── 12. Tour Cards ─────────────────────────────────────────── */
.es-tour-card {
    border-radius: 16px !important;
    overflow: hidden;
}
.es-tour-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hl-shadow-lg) !important;
}
.es-tour-thumb {
    height: 220px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, #1a5c44 100%);
    position: relative;
}

/* ── 13. Icon Circles ───────────────────────────────────────── */
.es-icon-circle {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: rgba(var(--hl-secondary-rgb),.12);
    border: 2px solid rgba(var(--hl-secondary-rgb),.30);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    flex-shrink: 0;
}

/* ── 14. CTA Banner ─────────────────────────────────────────── */
.es-cta-banner {
    background: var(--hl-cta-bg);
    position: relative;
    overflow: hidden;
}
.es-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── 15. Page Header ────────────────────────────────────────── */
.es-page-header {
    background: linear-gradient(135deg, var(--hl-primary) 0%, #1a5c44 100%);
    min-height: 210px;
    display: flex;
    align-items: center;
}

/* ── 15b. Hero Text — Always White + Bold (Light & Dark) ─────── */
.es-page-hero h1,
.es-page-hero h2,
.es-page-hero h3,
.es-page-header h1,
.es-page-header h2,
.es-page-header h3,
.es-animal-hero h1,
.es-animal-hero h2 {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.es-page-hero p,
.es-page-hero .lead,
.es-page-header p,
.es-page-header .lead {
    color: rgba(255,255,255,.9) !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ── 16. Package Hero ───────────────────────────────────────── */
.es-pkg-hero {
    min-height: 440px;
    background:
        linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.22) 100%),
        var(--hl-primary) center/cover no-repeat;
    background-color: var(--hl-primary);
    display: flex;
    align-items: flex-end;
}
@media (max-width: 768px) { .es-pkg-hero { min-height: 290px; } }

/* ── 17. Gallery & Booking ──────────────────────────────────── */
.es-gallery-img   { height: 340px; object-fit: cover; border-radius: 12px; }
.es-booking-card  { border-radius: 16px !important; }

/* ── 18. Footer ─────────────────────────────────────────────── */
.es-footer {
    background: var(--hl-footer-bg);
    color: var(--hl-footer-text);
}
.es-footer h5,
.es-footer h6               { color: var(--hl-secondary) !important; }
.es-footer p,
.es-footer li,
.es-footer .text-secondary,
.es-footer .text-muted      { color: rgba(248,244,233,.62) !important; }
.es-footer a                { color: rgba(248,244,233,.62) !important; text-decoration: none; transition: color var(--hl-ease); }
.es-footer a:hover          { color: var(--hl-secondary) !important; }
.es-footer .text-light      { color: var(--hl-footer-text) !important; }
.es-footer .text-warning    { color: var(--hl-secondary) !important; }
.es-footer hr,
.es-footer .border-secondary { border-color: rgba(var(--hl-secondary-rgb),.22) !important; }

/* ── 19. Floating Buttons ───────────────────────────────────── */
.calendar-float {
    position: fixed; bottom: 106px; right: 28px; z-index: 1050;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--hl-secondary); color: #0B1410;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 18px rgba(var(--hl-secondary-rgb),.5);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.calendar-float:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 26px rgba(var(--hl-secondary-rgb),.7);
    color: #0B1410;
}
.calendar-float .cal-tooltip {
    position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
    background: var(--hl-primary); color: #fff;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    padding: 4px 10px; border-radius: 20px;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.calendar-float:hover .cal-tooltip { opacity: 1; }

.whatsapp-float {
    position: fixed; bottom: 28px; right: 28px; z-index: 1050;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 4px 18px rgba(37,211,102,.45);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 26px rgba(37,211,102,.65);
    color: #fff;
}

/* ── 20. Wishlist Button ────────────────────────────────────── */
.es-wl-btn {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; color: #bbb;
    font-size: .9rem; padding: 0; line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    transition: transform .15s, background .15s, color .15s;
}
.es-wl-btn:hover  { transform: scale(1.15); background: #fff; color: var(--hl-error); }
.es-wl-btn.saved  { color: var(--hl-error); background: #fff; }
.es-wl-btn-full   { transition: color .15s; }
.es-wl-btn-full.saved { color: var(--hl-error) !important; border-color: var(--hl-error) !important; }
.es-wl-btn-full.saved .bi-heart::before { content: "\f38b"; }

/* ── 21. Star Rating ────────────────────────────────────────── */
.es-star-rating { flex-direction: row-reverse; }
.es-star-rating input:checked ~ label,
.es-star-rating label:hover,
.es-star-rating label:hover ~ label { color: var(--hl-secondary) !important; }
.es-star-rating label { color: var(--hl-border); cursor: pointer; }

/* ── 22. Safari Calendar ────────────────────────────────────── */
.es-cal-table { font-size: .8rem; }
.es-cal-table th {
    font-weight: 600; text-align: center;
    padding: 6px 4px; white-space: nowrap;
    color: var(--hl-text-muted);
}
.es-cal-table td { padding: 5px 4px; vertical-align: middle; }
.es-season-row td { font-size: .65rem; font-weight: 700; letter-spacing: .04em; padding: 4px 2px; }
.es-cal-dot   { display: block; width: 100%; height: 18px; border-radius: 4px; }
.es-cal-dot.on  { background: var(--hl-secondary); }
.es-cal-dot.off { background: var(--hl-border); }
.es-cal-label { font-size: .78rem; font-weight: 500; white-space: nowrap; padding-right: 8px !important; }
.es-cal-scroll { position: relative; }
@media (max-width: 767px) {
    .es-cal-scroll::after {
        content: '';
        position: absolute; top: 0; right: 0;
        width: 40px; height: 100%;
        background: linear-gradient(to right, transparent, var(--hl-surface));
        pointer-events: none;
        border-radius: 0 .375rem .375rem 0;
    }
}

/* ── 23. Wildlife Specific ──────────────────────────────────── */
.es-dark-card {
    background: var(--hl-card) !important;
    border: 1px solid var(--hl-border) !important;
}
.es-dark-card .text-white    { color: var(--hl-text) !important; }
.es-big-five-section         { background: var(--hl-surface) !important; }
.es-big-five-section .text-white   { color: var(--hl-text) !important; }
.es-big-five-section .text-white-50 { color: var(--hl-text-muted) !important; }
.es-funfact-card p, .es-funfact-card .text-white { color: #fff !important; }
.es-funfact-card .text-warning { color: var(--hl-secondary) !important; }
html[data-theme="dark"] .es-funfact-card { background: rgba(var(--hl-secondary-rgb),.08) !important; }

/* ── 24. Dark Mode: Body & Surfaces ────────────────────────── */
html[data-theme="dark"] body         { background-color: var(--hl-bg); color: var(--hl-text); }
html[data-theme="dark"] .bg-light    { background-color: var(--hl-surface) !important; }
html[data-theme="dark"] .bg-white    { background-color: var(--hl-surface) !important; }
html[data-theme="dark"] hr           { border-color: var(--hl-border); opacity: 1; }
html[data-theme="dark"] .shadow-sm   { box-shadow: var(--hl-shadow-sm) !important; }

/* Dark: text */
html[data-theme="dark"] .text-dark      { color: var(--hl-text) !important; }
html[data-theme="dark"] .text-secondary { color: var(--hl-text-muted) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--hl-text); }

/* Dark: forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--hl-surface);
    border-color: var(--hl-border);
    color: var(--hl-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--hl-card);
    border-color: var(--hl-secondary);
    color: var(--hl-text);
    box-shadow: 0 0 0 .2rem rgba(var(--hl-secondary-rgb),.2);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--hl-text-muted); opacity: .6; }
html[data-theme="dark"] .form-label     { color: var(--hl-text); }
html[data-theme="dark"] .form-text      { color: var(--hl-text-muted); }
html[data-theme="dark"] .input-group-text {
    background-color: var(--hl-surface);
    border-color: var(--hl-border);
    color: var(--hl-text-muted);
}

/* Dark: tables */
html[data-theme="dark"] .table {
    --bs-table-color: var(--hl-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hl-border);
    color: var(--hl-text);
    border-color: var(--hl-border);
}
html[data-theme="dark"] .table thead th    { color: var(--hl-text-muted); border-color: var(--hl-border); }
html[data-theme="dark"] .table tbody tr td { border-color: var(--hl-border); }
html[data-theme="dark"] .table-hover tbody tr:hover > td {
    background-color: rgba(var(--hl-secondary-rgb),.05);
}

/* Dark: badges & chips */
html[data-theme="dark"] .badge.bg-secondary { background-color: #2A3A33 !important; color: var(--hl-text-muted); }
html[data-theme="dark"] .badge.bg-light     { background-color: var(--hl-surface) !important; color: var(--hl-text); }
html[data-theme="dark"] .badge.bg-dark      { background-color: var(--hl-surface) !important; color: var(--hl-text-muted); }

/* Dark: breadcrumb */
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active          { color: var(--hl-text-muted); }
html[data-theme="dark"] .breadcrumb-item a               { color: var(--hl-secondary); }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--hl-border); }

/* Dark: alerts */
html[data-theme="dark"] .alert-success { background: rgba(76,175,80,.12); border-color: rgba(76,175,80,.3); color: #81c784; }
html[data-theme="dark"] .alert-danger  { background: rgba(239,83,80,.12); border-color: rgba(239,83,80,.3); color: #ef9a9a; }
html[data-theme="dark"] .alert-warning { background: rgba(var(--hl-secondary-rgb),.12); border-color: rgba(var(--hl-secondary-rgb),.3); color: var(--hl-secondary); }
html[data-theme="dark"] .alert-info    { background: rgba(79,195,247,.10); border-color: rgba(79,195,247,.25); color: #81d4fa; }

/* Dark: modals */
html[data-theme="dark"] .modal-content { background: var(--hl-surface); border-color: var(--hl-border); color: var(--hl-text); }
html[data-theme="dark"] .modal-header  { border-color: var(--hl-border); }
html[data-theme="dark"] .modal-footer  { border-color: var(--hl-border); }
html[data-theme="dark"] .btn-close     { filter: invert(1) grayscale(1); }

/* Dark: dropdowns */
html[data-theme="dark"] .dropdown-menu   { background: var(--hl-surface); border-color: var(--hl-border); }
html[data-theme="dark"] .dropdown-item   { color: var(--hl-text); }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(var(--hl-secondary-rgb),.08); color: var(--hl-secondary); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--hl-border); }

/* Dark: list groups */
html[data-theme="dark"] .list-group-item {
    background-color: var(--hl-card);
    border-color: var(--hl-border);
    color: var(--hl-text);
}

/* Dark: pagination */
html[data-theme="dark"] .page-item .page-link {
    background-color: var(--hl-surface);
    border-color: var(--hl-border);
    color: var(--hl-text);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--hl-secondary);
    border-color: var(--hl-secondary);
    color: #0B1410;
}
html[data-theme="dark"] .page-item.disabled .page-link { opacity: .38; }

/* Dark: progress bars */
html[data-theme="dark"] .progress { background-color: var(--hl-card); }

/* ── 25. Gallery ────────────────────────────────────────────── */
.es-gallery-grid {
    columns: 3;
    column-gap: 10px;
}

.es-gallery-item {
    break-inside: avoid;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.es-gallery-item img {
    width: 100%;
    display: block;
    transition: transform .5s ease;
}

.es-gallery-item:hover img {
    transform: scale(1.06);
}

.es-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1rem .875rem .75rem;
    opacity: 0;
    transition: opacity .3s ease;
    color: #fff;
}

.es-gallery-item:hover .es-gallery-overlay {
    opacity: 1;
}

.es-gallery-label {
    font-size: .8rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    margin-top: .35rem;
}

.es-filter-btn { transition: all .2s ease; }

@media (max-width: 767px) {
    .es-gallery-grid { columns: 2; column-gap: 8px; }
    .es-gallery-item { margin-bottom: 8px; }
}
@media (max-width: 420px) {
    .es-gallery-grid { columns: 1; }
}

/* ── 26. Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}