/* ==========================================================================
   THEME.CSS — Visual styling
   Colors, typography, borders, shadows, transitions, and decoration.
   Loaded after structure.css which handles all spatial layout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* ── Palette ── */
    --c-white:        #ffffff;
    --c-gray-50:      #f9fafb;
    --c-gray-100:     #f3f4f6;
    --c-gray-200:     #e5e7eb;
    --c-gray-300:     #d1d5db;
    --c-gray-400:     #9ca3af;
    --c-gray-500:     #6b7280;
    --c-gray-600:     #4b5563;
    --c-gray-700:     #374151;
    --c-gray-800:     #1f2937;
    --c-gray-900:     #111827;

    --c-blue-50:      #eff6ff;
    --c-blue-100:     #dbeafe;
    --c-blue-200:     #bfdbfe;
    --c-blue-500:     #3b82f6;
    --c-blue-600:     #2563eb;
    --c-blue-700:     #1d4ed8;
    --c-blue-800:     #1e40af;

    --c-teal-50:      #f0fdfa;
    --c-teal-500:     #14b8a6;
    --c-teal-600:     #0d9488;

    --c-green-500:    #22c55e;
    --c-green-600:    #16a34a;

    --c-amber-500:    #f59e0b;

    --c-red-500:      #ef4444;

    /* ── Semantic ── */
    --c-bg:            var(--c-white);
    --c-bg-subtle:     var(--c-gray-50);
    --c-bg-muted:      var(--c-gray-100);
    --c-surface:       var(--c-white);
    --c-border:        var(--c-gray-200);
    --c-border-strong: var(--c-gray-300);

    --c-text:          var(--c-gray-900);
    --c-text-secondary:var(--c-gray-600);
    --c-text-muted:    var(--c-gray-500);
    --c-text-faint:    var(--c-gray-400);

    --c-link:          var(--c-blue-600);
    --c-link-hover:    var(--c-blue-700);
    --c-primary:       var(--c-blue-600);
    --c-primary-hover: var(--c-blue-700);

    --c-rating:        var(--c-amber-500);

    /* ── Typography ── */
    --font-sans:  system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  ui-monospace, 'SF Mono', SFMono-Regular,
                  Menlo, Consolas, monospace;

    --text-xs:    0.75rem;    /* 12 px */
    --text-sm:    0.875rem;   /* 14 px */
    --text-base:  1rem;       /* 16 px */
    --text-lg:    1.125rem;   /* 18 px */
    --text-xl:    1.25rem;    /* 20 px */
    --text-2xl:   1.5rem;     /* 24 px */
    --text-3xl:   1.875rem;   /* 30 px */
    --text-4xl:   2.25rem;    /* 36 px */

    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Effects ── */
    --shadow-xs:  0 1px 2px rgb(0 0 0 / .05);
    --shadow-sm:  0 1px 3px rgb(0 0 0 / .1),  0 1px 2px -1px rgb(0 0 0 / .1);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

    --radius-sm:   0.25rem;
    --radius:      0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    --ease:       150ms ease;
    --ease-slow:  300ms ease;
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--c-blue-200);
    color: var(--c-blue-800);
}


/* --------------------------------------------------------------------------
   3. FOCUS & ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

.skip-link:focus {
    background-color: var(--c-primary);
    color: var(--c-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: 0 0 var(--radius) 0;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--c-text);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

p {
    line-height: var(--leading-relaxed);
}

strong, b {
    font-weight: var(--weight-semibold);
}


/* --------------------------------------------------------------------------
   5. LINKS
   -------------------------------------------------------------------------- */
a {
    color: var(--c-link);
    transition: color var(--ease);
}

a:hover {
    color: var(--c-link-hover);
}


/* --------------------------------------------------------------------------
   6. SITE HEADER
   -------------------------------------------------------------------------- */
.site-header {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-header__logo {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--c-text);
    letter-spacing: -0.01em;
    transition: color var(--ease);
}

.site-header__logo:hover {
    color: var(--c-primary);
}

/* Hamburger icon bars */
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
    background-color: var(--c-text);
    border-radius: 1px;
    transition: background-color var(--ease);
}

.site-header__menu-toggle {
    border-radius: var(--radius);
    transition: background-color var(--ease);
}

.site-header__menu-toggle:hover {
    background-color: var(--c-bg-muted);
}


/* --------------------------------------------------------------------------
   7. SITE NAVIGATION
   -------------------------------------------------------------------------- */
.site-nav__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-secondary);
    border-radius: var(--radius);
    transition: color var(--ease), background-color var(--ease);
}

.site-nav__link:hover {
    color: var(--c-text);
    background-color: var(--c-bg-muted);
}

.site-nav__link.is-active {
    color: var(--c-primary);
    background-color: var(--c-blue-50);
}

/* Mobile: dropdown panel */
@media (max-width: 47.999rem) {
    .site-nav {
        background-color: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        box-shadow: var(--shadow-lg);
    }

    .site-nav__link {
        font-size: var(--text-base);
        border-bottom: 1px solid var(--c-border);
    }

    .site-nav__item:last-child .site-nav__link {
        border-bottom: none;
    }
}

/* Desktop: hide scrollbar for single-line nav */
@media (min-width: 48rem) {
    .site-nav {
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   8. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs {
    background-color: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-sm);
}

.breadcrumbs a {
    color: var(--c-text-muted);
}

.breadcrumbs a:hover {
    color: var(--c-primary);
}

.breadcrumbs [aria-current="page"] {
    color: var(--c-text);
    font-weight: var(--weight-medium);
}

.breadcrumbs li + li::before {
    content: '›';
    color: var(--c-text-faint);
    padding-right: var(--sp-xs);
}


/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.025em;
    color: var(--c-text);
}

.hero__summary {
    font-size: var(--text-lg);
    color: var(--c-text-secondary);
    line-height: var(--leading-relaxed);
}

/* Key-stat badges */
.hero__stat {
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.hero__stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--c-primary);
}

.hero__stat-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CTA buttons */
.hero__cta {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--ease), box-shadow var(--ease), color var(--ease);
}

.hero__cta[data-priority="primary"] {
    background-color: var(--c-primary);
    color: var(--c-white);
}

.hero__cta[data-priority="primary"]:hover {
    background-color: var(--c-primary-hover);
    box-shadow: var(--shadow-md);
}

.hero__cta[data-priority="secondary"] {
    background-color: transparent;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 2px var(--c-primary);
}

.hero__cta[data-priority="secondary"]:hover {
    background-color: var(--c-blue-50);
}

/* Widget placeholder */
.hero__widget {
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

/* Hero products */
.hero__products {
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Hero image */
.hero__image img {
    border-radius: var(--radius-lg);
}

@media (max-width: 47.999rem) {
    .hero__title {
        font-size: var(--text-2xl);
        letter-spacing: -0.015em;
    }

    .hero__summary {
        font-size: var(--text-base);
    }
}


/* --------------------------------------------------------------------------
   10. NAVIGATION GRID (index page cards)
   -------------------------------------------------------------------------- */
.nav-grid__card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    color: var(--c-text);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.nav-grid__card:hover {
    border-color: var(--c-blue-200);
    box-shadow: var(--shadow-md);
    color: var(--c-text);
}

.nav-grid__card-icon {
    background-color: var(--c-blue-50);
    border-radius: var(--radius-md);
    color: var(--c-blue-600);
    transition: color var(--ease), background-color var(--ease);
}

.nav-grid__card:hover .nav-grid__card-icon {
    background-color: var(--c-blue-100);
    color: var(--c-blue-700);
}

.nav-grid__card-label {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
}

.nav-grid__card-desc {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: var(--leading-snug);
}

.nav-grid__card-count {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--c-primary);
    background-color: var(--c-blue-50);
    border-radius: var(--radius-full);
}


/* --------------------------------------------------------------------------
   11. CONTENT SECTIONS
   -------------------------------------------------------------------------- */
.section {
    border-top: 1px solid var(--c-border);
}

.section__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--c-text);
}

.section__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-primary);
    white-space: nowrap;
}

.section__link:hover {
    color: var(--c-primary-hover);
}

.section__count {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.section__more {
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    color: var(--c-primary);
}

.section__more:hover {
    color: var(--c-primary-hover);
}

.section__prose {
    color: var(--c-text-secondary);
    line-height: var(--leading-relaxed);
}

@media (min-width: 48rem) {
    .section__prose { text-align: justify; }
}

.section--cta {
    border-top: none;
}

@media (max-width: 47.999rem) {
    .section__title {
        font-size: var(--text-xl);
    }
}


/* --------------------------------------------------------------------------
   12. PREVIEW CARDS
   -------------------------------------------------------------------------- */
.preview-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.preview-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
}

/* Extra inline padding so text doesn't touch card edges */
.preview-card__body {
    padding-inline: var(--sp-md);
    padding-block-end: var(--sp-md);
}

.preview-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
}

.preview-card__price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--c-primary);
}

.preview-card__meta {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.preview-card__rating {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-rating);
}

/* ── Video card: play overlay ── */
.preview-card--video {
    color: var(--c-text);
}

.preview-card--video .preview-card__media::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / .55);
    color: var(--c-white);
    font-size: 0.875rem;
    border-radius: var(--radius-full);
    transition: background-color var(--ease), transform var(--ease);
}

.preview-card--video:hover .preview-card__media::after {
    background-color: var(--c-primary);
    transform: translate(-50%, -50%) scale(1.1);
}

/* ── Business card: no image, taller body ── */
.preview-card--business .preview-card__body {
    padding-block: var(--sp-md);
}


/* --------------------------------------------------------------------------
   13. DATA TABLE (rates, comparisons)
   -------------------------------------------------------------------------- */
.data-table th {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--c-border-strong);
}

.data-table td {
    font-size: var(--text-base);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: var(--c-bg-subtle);
}


/* --------------------------------------------------------------------------
   14. FEED LIST  (compact news list on index page)
   -------------------------------------------------------------------------- */
.feed-list__item {
    border-bottom: 1px solid var(--c-border);
}

.feed-list__item:last-child {
    border-bottom: none;
}

.feed-list__title {
    font-weight: var(--weight-medium);
    color: var(--c-text);
    transition: color var(--ease);
}

.feed-list__link:hover .feed-list__title {
    color: var(--c-primary);
}

.feed-list__meta {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}


/* --------------------------------------------------------------------------
   14b. NEWS PAGE
   -------------------------------------------------------------------------- */

/* ── Card link ── */

.news-card__link {
    color: inherit;
    text-decoration: none;
}

/* ── Image ── */

.news-card__media {
    background-color: var(--c-bg-muted);
    border-radius: var(--radius-md);
}

.news-card__img {
    transition: transform var(--ease-slow);
}

.news-card__link:hover .news-card__img,
.news-card__link:focus-visible .news-card__img {
    transform: scale(1.04);
}

/* ── Typography ── */

.news-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
    line-height: var(--leading-snug);
    transition: color var(--ease);
}

.news-card__link:hover .news-card__title,
.news-card__link:focus-visible .news-card__title {
    color: var(--c-primary);
}

.news-card__source {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-muted);
}

.news-card__time {
    font-size: var(--text-sm);
    color: var(--c-text-faint);
}

.news-card__time::before {
    content: '·';
    margin-right: var(--sp-xs);
    color: var(--c-text-faint);
}

/* ── Hero ── */

.news-card--hero .news-card__media {
    border-radius: var(--radius-lg);
}

.news-card--hero .news-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* ── Wide ── */

.news-card--wide .news-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* ── No-image ── */

.news-card--no-image .news-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}


/* ── Mobile  (< 48 rem) ─────────────────────────────────────── */

@media (max-width: 47.9375rem) {

    .news-card__media {
        border-radius: var(--radius);
    }

    .news-card--hero .news-card__media {
        border-radius: var(--radius-md);
    }

    .news-card--hero .news-card__title {
        font-size: var(--text-lg);
    }

    /* list separators */
    .news-card--side {
        padding-bottom: var(--sp-md);
        border-bottom: 1px solid var(--c-border);
    }

    .news-featured__aside > :last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .news-card--grid {
        padding-bottom: var(--sp-md);
        border-bottom: 1px solid var(--c-border);
    }

    .news-grid > :last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .news-featured {
        padding-bottom: var(--sp-lg);
        border-bottom: 1px solid var(--c-border);
    }
}


/* ── Tablet  (≥ 48 rem) ─────────────────────────────────────── */

@media (min-width: 48rem) {

    .news-card--hero .news-card__title {
        font-size: var(--text-2xl);
        letter-spacing: -0.015em;
    }

    /* grid card chrome */
    .news-card--grid {
        background-color: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        transition: border-color var(--ease), box-shadow var(--ease);
    }

    .news-card--grid:hover {
        border-color: var(--c-border-strong);
        box-shadow: var(--shadow-sm);
    }

    .news-card--grid .news-card__media {
        border-radius: 0;
    }

    .news-card--no-image.news-card--grid {
        background: linear-gradient(135deg, var(--c-bg-subtle), var(--c-bg-muted));
    }
}


/* ── Tablet ONLY  (48 rem – 63.9375 rem) ─────────────────────── */

@media (min-width: 48rem) and (max-width: 63.9375rem) {

    .news-card--side + .news-card--side {
        padding-top: var(--sp-md);
        border-top: 1px solid var(--c-border);
    }
}


/* ── Desktop  (≥ 64 rem) ────────────────────────────────────── */

@media (min-width: 64rem) {

    .news-card--hero .news-card__title {
        font-size: var(--text-3xl);
        letter-spacing: -0.02em;
    }

    /* side cards: card chrome (vertical cards now) */
    .news-card--side {
        background-color: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        transition: border-color var(--ease), box-shadow var(--ease);
    }

    .news-card--side:hover {
        border-color: var(--c-border-strong);
        box-shadow: var(--shadow-sm);
    }

    .news-card--side .news-card__media {
        border-radius: 0;
    }

    /* wide card */
    .news-card--wide .news-card__title {
        font-size: var(--text-2xl);
        letter-spacing: -0.015em;
    }

    .news-card--wide .news-card__media {
        border-radius: 0;
    }
}


/* --------------------------------------------------------------------------
   15. FAQ LIST
   -------------------------------------------------------------------------- */
.faq-list__item {
    border-bottom: 1px solid var(--c-border);
}

.faq-list__item:last-child {
    border-bottom: none;
}

.faq-list__question {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
}

.faq-list__answer {
    color: var(--c-text-secondary);
    line-height: var(--leading-relaxed);
}

.faq-list__answer p,
.faq-list__answer ul,
.faq-list__answer ol { margin-bottom: 0.75em; }
.faq-list__answer p:last-child,
.faq-list__answer ul:last-child,
.faq-list__answer ol:last-child { margin-bottom: 0; }

.faq-list__answer ul,
.faq-list__answer ol { padding-left: 1.5em; }
.faq-list__answer li + li { margin-top: 0.25em; }


/* --------------------------------------------------------------------------
   16. LEAD-GEN CTA
   -------------------------------------------------------------------------- */
.lead-cta {
    background-color: var(--c-blue-50);
    border: 1px solid var(--c-blue-100);
    border-radius: var(--radius-xl);
}

.lead-cta__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--c-text);
}

.lead-cta__text {
    font-size: var(--text-lg);
    color: var(--c-text-secondary);
}

.lead-cta__btn {
    background-color: var(--c-primary);
    color: var(--c-white);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--ease), box-shadow var(--ease);
}

.lead-cta__btn:hover {
    background-color: var(--c-primary-hover);
    color: var(--c-white);
    box-shadow: var(--shadow-md);
}


/* --------------------------------------------------------------------------
   17. AD SLOTS
   -------------------------------------------------------------------------- */
.ad-slot {
    background-color: var(--c-bg-subtle);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
}

.ad-slot:empty {
    border: none;
    background: none;
}

/* ── Ad banner (rich affiliate ad) ── */
.ad-banner {
    background: #fff8e1;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    transition: box-shadow var(--ease);
}

.ad-banner:hover {
    box-shadow: var(--shadow-md);
}

.ad-banner__title {
    color: var(--c-text);
}

.ad-banner__subtitle {
    color: var(--c-text-secondary);
}

.ad-banner__cta {
    background-color: var(--c-primary);
    color: var(--c-white);
    transition: background-color var(--ease);
}

.ad-banner:hover .ad-banner__cta {
    background-color: var(--c-primary-hover);
    color: var(--c-white);
}

.ad-banner__media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    background: linear-gradient(to right, #fff8e1, transparent);
}




/* --------------------------------------------------------------------------
   18. CONSENT BANNER
   -------------------------------------------------------------------------- */
.consent-banner {
    background-color: var(--c-gray-900);
    color: var(--c-gray-200);
    box-shadow: 0 -4px 24px rgb(0 0 0 / .2);
}

.consent-banner__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--c-gray-300);
}

.consent-banner__settings-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--c-white);
}

.consent-banner__btn {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius);
    transition: background-color var(--ease), color var(--ease),
                box-shadow var(--ease);
}

.consent-banner__btn--accept {
    background-color: var(--c-primary);
    color: var(--c-white);
}

.consent-banner__btn--accept:hover {
    background-color: var(--c-primary-hover);
}

.consent-banner__btn--reject {
    background-color: transparent;
    color: var(--c-gray-300);
    box-shadow: inset 0 0 0 1px var(--c-gray-600);
}

.consent-banner__btn--reject:hover {
    background-color: var(--c-gray-800);
    color: var(--c-white);
}

.consent-banner__btn--settings {
    background-color: transparent;
    color: var(--c-gray-400);
}

.consent-banner__btn--settings:hover {
    color: var(--c-white);
}

.consent-banner__btn--save {
    background-color: var(--c-teal-600);
    color: var(--c-white);
}

.consent-banner__btn--save:hover {
    background-color: var(--c-teal-500);
}

/* Settings panel toggles */
.consent-banner__option-toggle span {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-gray-200);
}

.consent-banner__option-desc {
    font-size: var(--text-xs);
    color: var(--c-gray-400);
    line-height: var(--leading-normal);
}

.consent-banner input[type="checkbox"] {
    accent-color: var(--c-blue-500);
}

.consent-banner__option-toggle input:disabled + span {
    opacity: .65;
}


/* --------------------------------------------------------------------------
   19. WIDGETS (shared base)
   -------------------------------------------------------------------------- */

/* Title */
.widget__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
}

/* Field labels */
.widget__field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-secondary);
}

/* Inputs */
.widget__field input,
.widget__field select,
.calculator__field input,
.calculator__field select,
.attr-nav-mobile select,
.unit-category-inline {
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--c-text);
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: border-color var(--ease), box-shadow var(--ease);
}

.widget__field input:focus,
.widget__field select:focus,
.calculator__field input:focus,
.calculator__field select:focus,
.attr-nav-mobile select:focus,
.unit-category-inline:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / .15);
    outline: none;
}

.widget__field input::placeholder {
    color: var(--c-text-faint);
}

/* Button */
.widget__btn {
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--c-white);
    background-color: var(--c-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--ease), box-shadow var(--ease);
}

.widget__btn:hover {
    background-color: var(--c-primary-hover);
    color: var(--c-white);
    box-shadow: var(--shadow-sm);
}

/* Result area */
.widget__result {
    background-color: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.widget__result-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--c-text-muted);
}

.widget__result-value {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--c-text);
}

.widget__result-category {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-left: auto;
}

/* Disclaimer */
.widget__disclaimer {
    font-size: var(--text-xs);
    color: var(--c-text-faint);
    line-height: var(--leading-normal);
}

/* Reset / recalculate link-button */
.widget__reset {
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--ease);
}

.widget__reset:hover {
    color: var(--c-primary-hover);
}


/* --------------------------------------------------------------------------
   19b. BMI CALCULATOR — specific styles
   -------------------------------------------------------------------------- */

/* Category colours on the result text */
.widget__result-category[data-bmi-cat="underweight"] {
    color: var(--c-blue-600);
}

.widget__result-category[data-bmi-cat="normal"] {
    color: var(--c-green-600);
}

.widget__result-category[data-bmi-cat="overweight"] {
    color: var(--c-amber-500);
}

.widget__result-category[data-bmi-cat="obese"] {
    color: var(--c-red-500);
}

/* Gradient meter bar — uses same colours as category text */
.bmi-meter__bar {
    background: linear-gradient(
        to right,
        var(--c-blue-600)  0%,  var(--c-blue-600)  14%,
        var(--c-green-600) 14%, var(--c-green-600) 40%,
        var(--c-amber-500) 40%, var(--c-amber-500) 60%,
        var(--c-red-500)   60%, var(--c-red-500)   100%
    );
    border-radius: var(--radius-full);
}

/* Marker dot */
.bmi-meter__marker {
    background-color: var(--c-gray-900);
    border: 2px solid var(--c-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: left var(--ease-slow);
}

/* Scale labels */
.bmi-meter__labels span {
    font-size: var(--text-xs);
    color: var(--c-text-faint);
}

/* ── Unit converter ───────────────────────────────────────── */

.unit-category-inline {
    font-size: var(--text-sm);
}

/* ── Symptom gateway widget ── */
.sc-checkbox:has(input:disabled) {
    color: var(--c-text-faint);
    cursor: default;
}

.unit-swap-btn {
    color: var(--c-primary);
    background-color: var(--c-bg);
    border-color: var(--c-border);
    font-size: var(--text-lg);
    line-height: 1;
    transition: background-color var(--ease), border-color var(--ease);
}

.unit-swap-btn:hover {
    background-color: var(--c-bg-subtle);
    border-color: var(--c-border-strong);
}

/* Result appear animation */
.widget__result:not([hidden]) {
    animation: widget-fade-in var(--ease-slow);
}

@keyframes widget-fade-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --------------------------------------------------------------------------
   19c. STRUCTURED CONTENT PAGES (faq, glossary, prices, pricing, treatment)
   -------------------------------------------------------------------------- */

.page-content__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--c-heading);
    line-height: 1.2;
}

/* ── FAQ ── */
.faq__item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background-color: var(--c-surface);
    overflow: hidden;
}

.faq__q {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
    transition: background-color var(--ease);
}

.faq__q:hover { background-color: var(--c-bg-subtle); }

.faq__q::after {
    content: '+';
    flex-shrink: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    color: var(--c-text-muted);
    transition: transform var(--ease);
}

details[open] > .faq__q::after {
    transform: rotate(45deg);
}

.faq__a {
    font-size: var(--text-base);
    color: var(--c-text-secondary);
    line-height: 1.7;
    border-top: 1px solid var(--c-border);
}

/* ── Glossary ── */
.glossary__term {
    font-weight: var(--weight-semibold);
    color: var(--c-heading);
    font-size: var(--text-base);
    border-top: 1px solid var(--c-border);
}

.glossary__def {
    color: var(--c-text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    border-top: 1px solid var(--c-border);
}

.glossary__term:first-of-type,
.glossary__def:first-of-type {
    border-top: none;
}

/* ── Data table ── */
.data-table th {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-text-secondary);
    background-color: var(--c-bg-subtle);
    border-bottom: 2px solid var(--c-border);
}

.data-table td {
    font-size: var(--text-sm);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover td { background-color: var(--c-bg-subtle); }

.data-table a {
    color: var(--c-primary);
    text-decoration: none;
}
.data-table a:hover { text-decoration: underline; }

/* ── Content items (treatment) ── */
.content-item__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--c-heading);
}

.content-item__body {
    color: var(--c-text-secondary);
    line-height: 1.7;
    font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   19d. PROSE (rendered Markdown content)
   -------------------------------------------------------------------------- */
.prose { color: var(--c-text); line-height: 1.75; }

@media (min-width: 48rem) {
    .prose p { text-align: justify; }
}

.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
    color: var(--c-heading);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose h4 { font-size: var(--text-lg); }

.prose p, .prose ul, .prose ol,
.prose blockquote, .prose table, .prose pre { margin-bottom: 1.25em; }

.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.3em; }

.prose a { color: var(--c-primary); text-decoration: underline; }
.prose a:hover { color: var(--c-primary-dark); }

.prose strong { font-weight: var(--weight-semibold); color: var(--c-heading); }

.prose blockquote {
    border-left: 4px solid var(--c-border-strong);
    padding-left: 1em;
    color: var(--c-text-secondary);
    font-style: italic;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 2em 0;
}

.prose pre {
    background-color: var(--c-bg-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 1em 1.25em;
    overflow-x: auto;
    font-size: var(--text-sm);
}
.prose code {
    background-color: var(--c-bg-muted);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

@media (max-width: 47.9375rem) {
    .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prose th,
    .prose td {
        max-width: 12rem;
        white-space: normal;
    }
}
.prose th, .prose td {
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--c-border);
    text-align: left;
}
.prose th {
    background-color: var(--c-bg-subtle);
    font-weight: var(--weight-semibold);
    color: var(--c-heading);
}
.prose tr:nth-child(even) td { background-color: var(--c-bg-subtle); }

/* ── Table of Contents (inside .prose) ── */
.prose .toc {
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.prose .toc__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
}
.prose .toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}
.prose .toc__item {
    counter-increment: toc;
    margin: 0;
    border-top: 1px solid var(--c-border);
}
.prose .toc__item:first-child { border-top: none; }
.prose .toc__link {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--c-text);
    text-decoration: none;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    transition: color var(--ease);
}
.prose .toc__link::before {
    content: counter(toc, decimal-leading-zero);
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--c-text-faint);
    min-width: 1.25rem;
}
.prose .toc__link:hover {
    color: var(--c-primary);
}
.prose .toc__link:hover::before {
    color: var(--c-primary);
}


/* --------------------------------------------------------------------------
   20. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--c-bg-subtle);
    border-top: 1px solid var(--c-border);
}

.site-footer a {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    transition: color var(--ease);
}

.site-footer a:hover {
    color: var(--c-text);
}

.site-footer__copy {
    font-size: var(--text-sm);
    color: var(--c-text-faint);
}


/* --------------------------------------------------------------------------
   21. SCROLLBARS (horizontal scroll areas)
   -------------------------------------------------------------------------- */
.nav-grid,
.preview-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--c-gray-300) transparent;
}

.nav-grid::-webkit-scrollbar,
.preview-grid::-webkit-scrollbar {
    height: 4px;
}

.nav-grid::-webkit-scrollbar-thumb,
.preview-grid::-webkit-scrollbar-thumb {
    background-color: var(--c-gray-300);
    border-radius: 2px;
}

.nav-grid::-webkit-scrollbar-track,
.preview-grid::-webkit-scrollbar-track {
    background-color: transparent;
}


/* --------------------------------------------------------------------------
   22. PAGE HEADER  (shared by all sub-pages)
   -------------------------------------------------------------------------- */
.page-header__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--c-text);
    line-height: var(--leading-tight);
}

.page-header__subtitle {
    font-size: var(--text-lg);
    color: var(--c-text-secondary);
}

.page-header__desc {
    font-size: var(--text-lg);
    color: var(--c-text-secondary);
    line-height: var(--leading-relaxed);
}

.page-header__count {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-muted);
}

@media (max-width: 47.999rem) {
    .page-header__title {
        font-size: var(--text-2xl);
    }
}


/* --------------------------------------------------------------------------
   23. PILL NAVIGATION
   -------------------------------------------------------------------------- */
.pill-nav__item {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--c-text-secondary);
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    transition: color var(--ease), background-color var(--ease),
                border-color var(--ease);
}

.pill-nav__item:hover {
    color: var(--c-text);
    background-color: var(--c-bg-muted);
    border-color: var(--c-border-strong);
}

.pill-nav__item.is-active {
    color: var(--c-white);
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

.pill-nav__item.is-active:hover {
    background-color: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: var(--c-white);
}


/* --------------------------------------------------------------------------
   24. PRODUCT CARD
   -------------------------------------------------------------------------- */
.product-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.product-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
}

.product-card__media {
    background-color: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
}

/* ── Title ── */
.product-card__title {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--c-text);
}

.product-card__title a {
    color: inherit;
    transition: color var(--ease);
}

.product-card__title a:hover {
    color: var(--c-primary);
}

/* ── Stars ── */
.product-card__star {
    color: var(--c-gray-300);
    font-size: var(--text-sm);
    line-height: 1;
}

.product-card__star.is-filled {
    color: var(--c-rating);
}

.product-card__rating-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-text);
}

.product-card__rating-count {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

/* ── Price ── */
.product-card__price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--c-text);
    line-height: var(--leading-tight);
}

.product-card__currency {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--c-text-muted);
}

/* ── CTA button ── */
.product-card__cta {
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-white);
    background-color: var(--c-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--ease), box-shadow var(--ease);
}

.product-card__cta:hover {
    background-color: var(--c-primary-hover);
    color: var(--c-white);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 47.999rem) {
    .product-card__price {
        font-size: var(--text-base);
    }
}


/* --------------------------------------------------------------------------
   25. EMPTY STATE
   -------------------------------------------------------------------------- */
.empty-state {
    color: var(--c-text-muted);
    font-size: var(--text-lg);
}

/* ───────────────────────────────────────────────
   Map page – visual styling
   ─────────────────────────────────────────────── */

.map-controls__input {
    border: 1px solid var(--border, #d1d5db);
    border-right: 0;
    border-radius: .375rem 0 0 .375rem;
    font: inherit;
    font-size: .875rem;
    background: var(--bg-surface, #fff);
}

.map-controls__input:focus {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: -1px;
}

.map-controls__submit {
    border: 1px solid var(--accent, #2563eb);
    border-radius: 0 .375rem .375rem 0;
    background: var(--accent, #2563eb);
    color: #fff;
    cursor: pointer;
}

.map-controls__submit:hover {
    opacity: .9;
}

.map-controls__geo-btn {
    border: 1px solid var(--border, #d1d5db);
    border-radius: .375rem;
    background: var(--bg-surface, #fff);
    font: inherit;
    font-size: .8125rem;
    color: var(--text-base, #1f2937);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.map-controls__geo-btn:hover,
.map-controls__geo-btn.is-active {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.map-controls__geo-btn.is-loading {
    opacity: .6;
}

.map-controls__chip {
    border: 1px solid var(--border, #d1d5db);
    border-radius: 999px;
    background: var(--bg-surface, #fff);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.map-controls__chip[aria-pressed="true"] {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
}

.map-embed {
    border-radius: .5rem;
    background: var(--bg-muted, #f3f4f6);
}

.map-embed__prompt {
    font-size: .875rem;
    color: var(--text-muted, #6b7280);
    background: var(--bg-muted, #f3f4f6);
    border-radius: .5rem;
}

/* ================================================================
   SYMPTOM CHECKER — Theme (colors, typography, decoration only)
   Prefix: sc-
   ================================================================ */

/* ── Typography ──────────────────────────────────────────────── */
.sc-title       { font-size: 1.5rem; font-weight: 700; color: var(--color-heading, #0f172a); }
.sc-subtitle    { font-size: 1.25rem; font-weight: 600; color: var(--color-heading, #0f172a); }
.sc-instruction { font-size: 0.9375rem; color: var(--color-text-muted, #64748b); }
.sc-hint        { font-size: 0.8125rem; color: var(--color-text-muted, #94a3b8); }

/* ── Progress ────────────────────────────────────────────────── */
.sc-progress__dot {
    border-radius: 50%;
    background-color: var(--color-border, #e2e8f0);
    transition: background-color 0.2s ease;
}
.sc-progress__dot--done { background-color: var(--color-primary, #2563eb); }

/* ── Tags ────────────────────────────────────────────────────── */
.sc-tag {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text, #334155);
    background-color: var(--color-bg-alt, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
}
.sc-tag__x {
    color: var(--color-text-muted, #94a3b8);
    font-size: 1.125rem;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.sc-tag__x:hover {
    color: var(--color-danger, #dc2626);
    background-color: var(--color-danger-bg, #fef2f2);
}

/* ── Emergency ───────────────────────────────────────────────── */
.sc-emergency {
    background-color: var(--color-danger-bg, #fef2f2);
    border: 2px solid var(--color-danger, #dc2626);
    border-radius: 0.625rem;
    color: var(--color-danger-text, #7f1d1d);
}
.sc-emergency p {
    font-size: 0.9375rem;
    line-height: 1.55;
}
.sc-emergency__item {
    font-weight: 600;
    font-size: 1rem;
}
.sc-emergency .sc-text-list {
    color: var(--color-danger-text, #7f1d1d);
}

/* ── Demographics ────────────────────────────────────────────── */
.sc-field > label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text, #334155);
}

/* Normal weight for standalone checkbox label */
.sc-checkbox--standalone span {
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--color-text, #334155);
    line-height: 1;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.sc-input {
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 0.375rem;
    font-size: 1rem;
    color: var(--color-text, #1e293b);
    background-color: var(--color-bg, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sc-input:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37,99,235,.12));
}

/* ── Fieldsets ───────────────────────────────────────────────── */
.sc-fieldset {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.625rem;
    background-color: var(--color-bg, #ffffff);
    transition: border-color 0.2s ease;
}
.sc-fieldset--error {
    border-color: var(--color-danger, #dc2626);
    animation: sc-shake 0.3s ease;
}
@keyframes sc-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}
.sc-fieldset__legend {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-heading, #0f172a);
}

/* ── Radios & checkboxes ─────────────────────────────────────── */
.sc-radio,
.sc-checkbox {
    font-size: 0.9375rem;
    color: var(--color-text, #334155);
    transition: color 0.1s ease;
}
.sc-radio:hover,
.sc-checkbox:hover { color: var(--color-primary, #2563eb); }

.sc-radio input[type="radio"],
.sc-checkbox input[type="checkbox"] {
    accent-color: var(--color-primary, #2563eb);
}

/* ── Category grid cards ─────────────────────────────────────── */
.sc-grid__card {
    background-color: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    color: var(--color-text, #334155);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.sc-grid__card:hover,
.sc-grid__card:focus-visible {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37,99,235,.12));
    background-color: var(--color-primary-bg, #eff6ff);
}
.sc-grid__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #334155);
    line-height: 1.3;
}

/* ── Symptom list ────────────────────────────────────────────── */
.sc-list__item {
    background-color: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    color: var(--color-text, #334155);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.sc-list__item:hover {
    background-color: var(--color-primary-bg, #eff6ff);
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37,99,235,.12));
}
.sc-list__item:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* ── Entry list ──────────────────────────────────────────────── */
.sc-entry {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.625rem;
    background-color: var(--color-bg, #ffffff);
}
.sc-entry__head strong {
    font-size: 0.9375rem;
    color: var(--color-heading, #0f172a);
}
.sc-entry__chip {
    font-size: 0.75rem;
    color: var(--color-text-muted, #64748b);
    background-color: var(--color-bg-alt, #f1f5f9);
    border-radius: 4px;
}

/* ── Result cards ────────────────────────────────────────────── */
.sc-result {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.625rem;
    background-color: var(--color-bg, #ffffff);
    border-left: 4px solid var(--color-border, #e2e8f0);
}
.sc-result--high   { border-left-color: var(--color-success,      #16a34a); }
.sc-result--low    { border-left-color: var(--color-text-muted,   #94a3b8); }

.sc-result__name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-heading, #0f172a);
}
.sc-result__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sc-result__badge--high   { background-color: var(--color-success-bg, #dcfce7); color: var(--color-success-text, #166534); }
.sc-result__badge--medium {
    background-color: var(--color-info-bg,   #dbeafe);
    color:            var(--color-info-text,  #1e40af);
}

.sc-result--medium {
    border-left-color: var(--color-info, #3b82f6);
}
.sc-result__badge--low    { background-color: var(--color-bg-alt,     #f1f5f9); color: var(--color-text-muted,   #475569); }

.sc-result__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
}
.sc-result__details { font-size: 0.875rem; }
.sc-result__details summary {
    font-weight: 500;
    color: var(--color-primary, #2563eb);
    transition: color 0.1s ease;
}
.sc-result__details summary:hover { color: var(--color-primary-dark, #1d4ed8); }
.sc-result__action {
    font-size: 0.875rem;
    color: var(--color-text-muted, #64748b);
    border-top: 1px solid var(--color-border, #f1f5f9);
    line-height: 1.5;
}

/* ── Text lists ──────────────────────────────────────────────── */
.sc-text-list {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text, #334155);
}

/* ── Fallback info (neutral, appears AFTER results) ──────────── */
.sc-fallback-info {
    background-color: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.625rem;
    color: var(--color-text, #334155);
}
.sc-fallback-info__msg {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-text-muted, #64748b);
}
.sc-fallback-info__heading {
    font-size: 0.9375rem;
    color: var(--color-text, #334155);
}
.sc-fallback-info__selfcare {
    border-top: 1px solid var(--color-border, #e2e8f0);
}
.sc-fallback-info__selfcare h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-heading, #0f172a);
}
.sc-fallback-info__selfcare-body {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text, #334155);
}
.sc-fallback-info__selfcare-body p { font-size: 0.875rem; }

.sc-selfcare__title,
.sc-fallback-info__selfcare h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-heading, #0f172a);
    margin: 0 0 0.5rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.sc-btn {
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sc-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* Primary — blue filled */
.sc-btn--primary {
    background-color: var(--color-primary, #2563eb);
    color: #ffffff;
    border-color: var(--color-primary, #2563eb);
}
.sc-btn--primary:active {
    background-color: var(--color-primary-darker, #1e40af);
    color: #ffffff;
}
/* Always white text even when rendered as <a> */
a.sc-btn--primary,
a.sc-btn--primary:hover,
a.sc-btn--primary:visited,
a.sc-btn--primary:active {
    color: #ffffff;
}

/* Secondary — light fill */
.sc-btn--secondary {
    background-color: var(--color-bg-alt, #f1f5f9);
    color: var(--color-text, #334155);
    border-color: var(--color-border, #e2e8f0);
}

/* Outline — transparent with border (Back / Reset) */
.sc-btn--outline {
    background-color: transparent;
    color: var(--color-text-muted, #64748b);
    border-color: var(--color-border, #e2e8f0);
}

/* Danger */
.sc-btn--danger {
    background-color: var(--color-danger, #dc2626);
    color: #ffffff;
    border-color: var(--color-danger, #dc2626);
}
a.sc-btn--danger,
a.sc-btn--danger:hover,
a.sc-btn--danger:visited {
    color: #ffffff;
}

/* Primary — blue filled */
.sc-btn--primary:hover {
    background-color: var(--color-primary-dark, #1d4ed8);
    border-color: var(--color-primary-dark, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37, 99, 235, 0.20));
}
.sc-btn--primary:active {
    background-color: var(--color-primary-darker, #1e40af);
    color: #ffffff;
    box-shadow: none;
}

/* Secondary — light fill */
.sc-btn--secondary:hover {
    background-color: var(--color-border, #e2e8f0);
    border-color: var(--color-text-muted, #94a3b8);
    color: var(--color-text, #334155);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37, 99, 235, 0.12));
}

/* Outline — transparent with border */
.sc-btn--outline:hover {
    background-color: var(--color-bg-alt, #f8fafc);
    color: var(--color-text, #334155);
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37, 99, 235, 0.12));
}

/* Danger */
.sc-btn--danger:hover {
    background-color: var(--color-danger-dark, #b91c1c);
    border-color: var(--color-danger-dark, #b91c1c);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
}

/* Icon / delete button */
.sc-btn--icon {
    color: var(--color-text-muted, #94a3b8);
    font-size: 1.25rem;
    font-weight: 400;
}
.sc-btn--icon:hover { color: var(--color-danger, #dc2626); }

/* ── Disclaimer ──────────────────────────────────────────────── */
.sc-disclaimer {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted, #64748b);
    background-color: var(--color-bg-alt, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
}

/* =============================================
   Videos page – theme rules
   ============================================= */

/* ── Card ── */

.video-card__player {
    background: var(--color-surface-alt, #111);
    border-radius: var(--radius, 0.5rem) var(--radius, 0.5rem) 0 0;
    cursor: pointer;
}

.video-card__play {
    transition: opacity 0.15s ease;
}

.video-card__play-icon {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
    transition: transform 0.15s ease;
}

.video-card__player:hover .video-card__play-icon,
.video-card__player:focus-visible .video-card__play-icon {
    transform: scale(1.12);
}

.video-card__title a {
    color: inherit;
    text-decoration: none;
}

.video-card__title a:hover,
.video-card__title a:focus-visible {
    text-decoration: underline;
}

.video-card__meta {
    color: var(--color-text-muted, #666);
}

.video-card__channel {
    color: inherit;
    text-decoration: none;
}

.video-card__channel:hover,
.video-card__channel:focus-visible {
    text-decoration: underline;
}

/* ── Overlay – appearance ── */

.video-overlay__backdrop {
    background: rgba(0, 0, 0, 0.88);
    animation: vo-fade-in 0.2s ease;
}

.video-overlay__wrap {
    animation: vo-scale-in 0.2s ease;
}

@keyframes vo-fade-in {
    from { opacity: 0; }
}

@keyframes vo-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

.video-overlay__title {
    color: var(--overlay-text, #fff);
    font-weight: 600;
}

.video-overlay__close {
    border-radius: 50%;
    background: var(--overlay-btn-bg, rgba(255, 255, 255, 0.12));
    color: var(--overlay-text, #fff);
    cursor: pointer;
    transition: background 0.15s ease;
}

.video-overlay__close:hover,
.video-overlay__close:focus-visible {
    background: var(--overlay-btn-bg-hover, rgba(255, 255, 255, 0.25));
}

.video-overlay__player {
    background: #000;
    border-radius: var(--radius, 0.5rem);
}

.video-overlay__channel {
    color: var(--overlay-text-muted, rgba(255, 255, 255, 0.7));
    text-decoration: none;
}

.video-overlay__channel:hover,
.video-overlay__channel:focus-visible {
    color: var(--overlay-text, #fff);
}

.video-overlay__yt-link {
    color: var(--overlay-text-subtle, rgba(255, 255, 255, 0.55));
    text-decoration: none;
}

.video-overlay__yt-link:hover,
.video-overlay__yt-link:focus-visible {
    color: var(--overlay-text, #fff);
}

/* --------------------------------------------------------------------------
   WEATHER WIDGET
   -------------------------------------------------------------------------- */
.wx-widget__value { color: var(--c-heading); }
.wx-widget__cond  { color: var(--c-text-secondary); }
.wx-widget__details { color: var(--c-text-secondary); }

/* --------------------------------------------------------------------------
   WEATHER
   -------------------------------------------------------------------------- */
.wx-current__value { color: var(--c-heading); }
.wx-current__feels { color: var(--c-text-subtle); }

.wx-detail {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
.wx-detail__label { color: var(--c-text-subtle); }

.wx-hour-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
.wx-hour-card__wind { color: var(--c-text-subtle); }
.wx-hour-card__rain { color: var(--c-primary); font-weight: 600; }

.wx-day-row {
    border-bottom: 1px solid var(--c-border);
}
.wx-day-row:last-child { border-bottom: none; }

.wx-day-row__min   { color: var(--c-text-subtle); }
.wx-day-row__rain  { color: var(--c-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   ACCOMMODATION
   -------------------------------------------------------------------------- */
.acc-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.acc-card__name   { color: var(--c-heading); }
.acc-card__stars   { color: #f59e0b; }
.acc-card__address { color: var(--c-text-subtle); }

.acc-card__pill {
    background: #dbeafe;
    color: #1e40af;
}

.acc-card__btn--primary {
    font-weight: var(--weight-semibold);
    color: var(--c-white);
    background-color: var(--c-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--ease), box-shadow var(--ease);
}
.acc-card__btn--primary:hover {
    background-color: var(--c-primary-hover);
    color: var(--c-white);
    box-shadow: var(--shadow-sm);
}

.acc-card__btn--secondary {
    font-weight: var(--weight-medium);
    color: var(--c-text);
    background-color: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--ease);
}
.acc-card__btn--secondary:hover {
    background-color: var(--c-bg-muted);
    color: var(--c-text);
}

/* --------------------------------------------------------------------------
   ATTRACTIONS
   -------------------------------------------------------------------------- */
.attr-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.attr-card__name { color: var(--c-heading); }

.attr-sig--must_see       { background: #fef3c7; color: #92400e; }
.attr-sig--recommended    { background: #dbeafe; color: #1e40af; }
.attr-sig--worth_visiting { background: #f3f4f6; color: #374151; }

.attr-card__desc { color: var(--c-text-secondary); line-height: var(--leading-relaxed); }

.attr-card__hint { color: var(--c-text-subtle); }

.attr-card__map-btn {
    background-color: var(--c-primary);
    color: #fff;
    border: none;
}
.attr-card__map-btn:hover { opacity: 0.9; }

.attr-tag {
    background: var(--c-bg-subtle);
    color: var(--c-text-subtle);
    border: 1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.gallery-thumb {
    border-radius: var(--radius-md);
}

.gallery-thumb:hover img { opacity: 0.85; }

.gallery-overlay {
    background: rgba(0, 0, 0, 0.9);
}

.gallery-overlay__close,
.gallery-overlay__prev,
.gallery-overlay__next {
    color: #fff;
}

.gallery-overlay__close:hover,
.gallery-overlay__prev:hover,
.gallery-overlay__next:hover {
    color: var(--c-primary);
}

.gallery-overlay__image {
    border-radius: var(--radius-md);
}

.gallery-overlay__desc   { color: #ddd; }
.gallery-overlay__credit { color: #999; }
.gallery-overlay__credit a { color: #bbb; text-decoration: underline; }
.gallery-overlay__credit a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   RATE CARDS
   -------------------------------------------------------------------------- */
.rate-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.rate-card__code  { color: var(--c-primary); }
.rate-card__name  { color: var(--c-text-subtle); }

/* --------------------------------------------------------------------------
   CALCULATOR PAGE
   -------------------------------------------------------------------------- */
.calculator__swap        { color: var(--c-primary); border-radius: var(--radius-sm, 4px); }
.calculator__swap:hover  { background-color: var(--c-bg-subtle); }

.calculator__btn {
    background-color: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 4px);
    font-weight: 600;
}
.calculator__btn:hover { opacity: 0.9; }

.calculator__result-value { color: var(--c-primary); }

.calculator__reset       { color: var(--c-primary); }
.calculator__reset:hover { text-decoration: underline; }

.calculator__rate-info   { color: var(--c-text-subtle); font-size: 0.875rem; }
.calculator__disclaimer  { color: var(--c-text-subtle); font-size: 0.8125rem; }
.calculator__meta        { color: var(--c-text-subtle); font-size: 0.8125rem; }