/* ============================================================================
   Theme Park Foodie — Design System
   Mobile-first, matching Figma designs

   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
   FOUNDATIONS
     Variables ............................................. ~line   8
     Reset (box-sizing, margin/padding) .................... ~line  66
     Site chrome (header, nav, footer) ..................... ~line 112
     Buttons (.btn, .btn-primary, .btn-outline, .btn-sm) ... ~line 360
     Section headings + utility tiles ...................... ~line 410
     Reusable cards (.page-heading-card) ................... ~line 485
     Entity tile (listing rows) ............................ ~line 590
     Restaurant grid + cards ............................... ~line 690
     Badges (.badge-service/cuisine/price) ................. ~line 870
     Prix-fixe / buffet menu layout (#97) .................. ~line 915

   ITEMS + MENU PRIMITIVES
     Menu items shared chrome .............................. ~line 1245
     List-add button (+ list picker popover) ............... ~line 1310

   PAGE: SEARCH
     Search page + suggestions ............................. ~line 1410

   PAGE: PROFILE / SETTINGS
     User profile + activity ............................... ~line 4400
     Settings page ......................................... ~line 4320

   PAGE: REVIEWS form components
     Yes/no toggle, score boxes, prompt chips .............. ~line 3895

   PAGE: HOMEPAGE
     Hero, browse-by-park, popular rails, articles ......... ~line 2090

   PAGE: RESTAURANT DETAIL (#106 redesign)
     Stars + .btn-external utility ......................... ~line 5215
     Header card ........................................... ~line 5260
     Photo carousel (Option D count-aware grid) ............ ~line 5360
     Shared section chrome ................................. ~line 5450
     Popular Items row ..................................... ~line 5480
     Review chip picker + review cards ..................... ~line 5530
     Related links ......................................... ~line 5705
     Mobile breakpoints .................................... ~line 5720

   PAGE: MENU (#99 Option B — mirror Disney sections)
     Toolbar (meal entry + view controls) .................. ~line 5820
     Filter panel .......................................... ~line 5960
     Top Rated carousel .................................... ~line 5990
     Sub-section accordions ................................ ~line 6065
     Item cards (thumb / main / side) ...................... ~line 6125
     Thumbs-up % badge + Rate it pill ...................... ~line 6245
     Pricing banner (prix-fixe / buffet) ................... ~line 6325
     Mobile breakpoints .................................... ~line 6295

   PAGE: BLOG
     Blog index, post layout, sidebar ...................... ~line 4840

   MOBILE OVERRIDES (≤480px) ............................... ~line 4770
   FLASH messages, error banners ........................... ~line 1975
   AUTH modals ............................................. ~line 2835
   ADMIN tooling (admin-page-header, admin-table) .......... www/css/admin.css
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   Variables
   --------------------------------------------------------------------------- */
:root {
    /* Brand — TPF Brand Guide / UI & Homepage Design Guide.
       Coral is the primary accent, navy carries headings + chrome,
       warm cream is the body surface, gold is the editorial sparkle
       accent, neutral pairs with cream for borders/dividers. */
    --color-primary: #FF5A47;
    --color-primary-dark: #E04332;
    --color-primary-light: #FF7868;
    --color-primary-tint: rgba(255, 90, 71, 0.12);

    /* Chrome */
    --color-header: #0D2B52;
    --color-footer: #0D2B52;

    /* Neutral */
    --color-bg: #F8F3EC;
    --color-bg-light: #FFFFFF;
    --color-text: #1F2937;
    --color-text-light: #6B7280;
    --color-border: #E8E3DC;
    --color-white: #FFFFFF;

    /* Scores */
    --color-score-green: #4CAF50;
    --color-score-yellow-green: #8BC34A;
    --color-score-yellow: #FFC107;
    --color-score-orange: #FF9800;
    --color-score-red: #F44336;

    /* Feedback */
    --color-success: #2E7D32;
    --color-error: #C62828;

    /* Secondary CTA (editorial gold accent) */
    --color-secondary: #F5C14E;

    /* Layout */
    --max-width: 480px;
    --max-width-wide: 1100px;
    --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 6px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(13, 43, 82, 0.06), 0 1px 2px rgba(13, 43, 82, 0.05);
    --shadow-hover: 0 6px 18px rgba(13, 43, 82, 0.10);

    /* Card design tokens — flat-bordered canonical (post-#99/#106
       cleanup). Use these on any container that needs the standard
       card chrome so the radius/border stays consistent. */
    --radius-card: 10px;
    --card-border: 1px solid var(--color-border);
}

/* Headings use the editorial display face. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-header);
    line-height: 1.2;
}

html { font-size: 16px; }
body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Stop the hero collage's intentionally-overflowing photos and
       decorations from creating a horizontal scrollbar on mobile, where
       the content container fills the viewport. Desktop has whitespace
       margins so nothing actually visible gets clipped. */
    overflow-x: hidden;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

.btn-admin-edit {
    display: block;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
    background: #7B1FA2;
    border-radius: var(--radius);
    margin-bottom: 8px;
    text-decoration: none;
}
.btn-admin-edit:hover {
    background: #6A1B9A;
    color: var(--color-white);
}

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-accent {
    height: 4px;
    background: var(--color-primary);
}

.env-banner {
    background: repeating-linear-gradient(
        135deg,
        #facc15 0,
        #facc15 16px,
        #1f2937 16px,
        #1f2937 32px
    );
    color: var(--color-white);
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    padding: 4px 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.header-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 16px;
}

.header-container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo img {
    display: block;
    height: 48px;
    width: auto;
}

/* Resort switcher — neutral cream pill that flips coral when active. */
.resort-switcher {
    display: flex;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-right: 8px;
}
.resort-toggle {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.03em;
}
.resort-toggle:hover {
    color: var(--color-header);
    text-decoration: none;
}
.resort-toggle.active {
    background: var(--color-primary);
    color: var(--color-white);
}
.desktop-nav {
    display: none;
    align-items: center;
    gap: 24px;
}
.desktop-nav a {
    color: var(--color-header);
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}
.desktop-nav a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
/* Highlight the primary auth CTA in the desktop nav as a coral pill. */
.desktop-nav a.header-cta {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.15s;
}
.desktop-nav a.header-cta:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

@media (min-width: 769px) {
    .desktop-nav { display: flex; }
    .header-hamburger { display: none !important; }
    .search-menu-icon { display: none !important; }
    .mobile-nav { display: none !important; }
}

.header-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.header-hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--color-header);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Search bar section */
.search-bar-section {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
}

.search-container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-menu-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.search-menu-icon span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
}

.search-form-inline {
    display: flex;
    flex: 1;
    min-width: 0;
}

.search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 16px;
    font-family: var(--font-family);
    color: var(--color-text);
    min-width: 0;
}
.search-input::placeholder { color: #BDBDBD; }
.search-input:focus { outline: none; border-color: var(--color-primary); }

.search-btn {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 10px 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.search-btn:hover { background: var(--color-primary-dark); }

/* Mobile nav overlay */
.mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--color-header);
    padding: 0 16px 16px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
    color: var(--color-white);
    padding: 10px 0;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: var(--color-primary-light); }

/* ---------------------------------------------------------------------------
   Main Content
   --------------------------------------------------------------------------- */
.site-main { flex: 1; }

.content-container {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 24px 16px;
}

/* ---------------------------------------------------------------------------
   Hero Section
   --------------------------------------------------------------------------- */
/* Hero action row — used inside page-heading-card-hero on 404/error
   pages and inside .home-hero. Column-stack centered. */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 14px 28px;
    /* Transparent 2px border so .btn-primary and .btn-outline both
       render at the same total size — variants only swap the border
       color rather than redefining padding. */
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); }

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-header);
}
.btn-secondary:hover { background: #E0AC32; color: var(--color-header); }

/* Secondary CTA per brand guide — white bg, navy border + text.
   Inherits .btn padding (the transparent border on .btn reserves
   the 2px that the visible border takes here). */
.btn-outline {
    background: var(--color-white);
    border-color: var(--color-header);
    color: var(--color-header);
}
.btn-outline:hover {
    background: var(--color-header);
    color: var(--color-white);
}

.btn-block { width: 100%; max-width: 380px; }
.btn-sm { padding: 8px 16px; font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   Section Headings
   --------------------------------------------------------------------------- */
.section-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   Category / Image Grid (circular items)
   --------------------------------------------------------------------------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 16px;
}
.category-item {
    aspect-ratio: 1;
    background: #D3D3D3;
    border-radius: var(--radius);
}

.circle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 320px;
    margin: 0 auto;
    padding: 0 16px;
}
.circle-item {
    aspect-ratio: 1;
    background: #D3D3D3;
    border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Featured / Content Cards
   --------------------------------------------------------------------------- */
.featured-image {
    width: 100%;
    aspect-ratio: 16/9;
    background: #D3D3D3;
    border-radius: var(--radius);
}

/* Testimonial — quote card with a primary-color accent stripe on
   the left, matching the rest of the card language. */
.testimonial-card {
    margin: 0;
    padding: 18px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow);
    color: var(--color-text);
}
.testimonial-text {
    font-size: 1rem;
    line-height: 1.55;
    font-style: italic;
    margin: 0 0 8px;
}
.testimonial-author {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* ---------------------------------------------------------------------------
   Reusable page + section heading cards (#36 design language extension)
   --------------------------------------------------------------------------- */
/* Big white card with a primary-color top accent, mirroring the
   restaurant page heading. Used as the top-of-page identity block on
   the parks index and park-detail pages. */
.page-heading-card {
    position: relative;
    margin: 8px 0 16px;
    padding: 18px 56px 14px;
    text-align: center;
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    border-top: 4px solid var(--color-primary);
}
/* Score badge top-left, save button top-right — mirrors the restaurant
   summary treatment so the H1 stays centered as actions appear. */
.page-heading-card-score {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 1rem;
    padding: 4px 10px;
}
.page-heading-card > .btn-list-add {
    position: absolute;
    top: 10px;
    right: 12px;
}
.page-heading-card-title h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    color: var(--color-header);
}
.page-heading-card-subtitle {
    margin: 4px 0 0;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

/* Hero variant of the heading card — larger type and CTA-friendly. */
.page-heading-card-hero {
    padding: 36px 24px 28px;
    margin-top: 16px;
}
.page-heading-card-hero .page-heading-card-title h1 {
    font-size: 2.1rem;
    line-height: 1.18;
}
.page-heading-card-hero .page-heading-card-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.page-heading-card-hero .hero-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.page-heading-card-hero .login-note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Lighter visual weight than the page heading — a centered subsection
   title with a primary-color underline accent. Anchors a group of
   tiles below it without competing with the page heading. */
.section-heading-card {
    position: relative;
    margin: 0 0 10px;
    padding-bottom: 4px;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-header);
}
.section-heading-card::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: 6px auto 0;
    background: var(--color-primary);
    border-radius: 2px;
}
.section-heading-count {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-left: 4px;
}

/* ---------------------------------------------------------------------------
   Entity tile (parks index, park detail) — menu-tile pattern reused for
   restaurants in a park and parks within a resort. Image-right thumb,
   title + meta on the left, optional score badge in the top-right.
   --------------------------------------------------------------------------- */
.entity-tile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
/* Multi-column tile grid variant for homepage-style sections where we
   want to show several entity tiles side-by-side on wider viewports. */
.entity-tile-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .entity-tile-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 960px) {
    .entity-tile-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.entity-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.entity-tile:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-text);
}
.entity-tile-body {
    flex: 1 1 auto;
    min-width: 0;
}
/* Title-row pattern matches the menu page + restaurant detail —
   bookmark sits inline to the right of the title. Only renders for
   logged-in users so listed-state can drive the button. */
.entity-tile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}
.entity-tile-title-row .entity-tile-title {
    flex: 1;
    margin: 0;
    min-width: 0;
}
.entity-tile-title-row .btn-list-add {
    flex-shrink: 0;
}
.entity-tile-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.25;
    color: var(--color-header);
}
.entity-tile-meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
}
.entity-tile-description {
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.4;
    margin: 4px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entity-tile-title .dietary-icon {
    font-size: 0.85rem;
    margin-left: 4px;
    vertical-align: middle;
}
.entity-tile-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.entity-tile-tags .score-badge {
    margin-left: auto;
    font-size: 0.78rem;
    padding: 2px 8px;
}
.entity-tile-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-light);
}
.entity-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------------------
   Restaurant Grid & Cards
   --------------------------------------------------------------------------- */
.restaurant-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.restaurant-card {
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    padding: 16px;
    display: block;
    color: var(--color-text);
    transition: border-color 0.2s;
}
.restaurant-card.has-image {
    padding: 0;
    overflow: hidden;
}
.restaurant-card.has-image .restaurant-card-body {
    padding: 12px 16px 16px;
}
.restaurant-card-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.restaurant-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.restaurant-card:hover { border-color: var(--color-primary); text-decoration: none; }
.restaurant-card h3 { font-size: 1rem; margin-bottom: 4px; }

/* Photo Gallery */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.photo-gallery-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--color-white);
}
.photo-gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.photo-gallery-meta {
    padding: 6px 10px;
}
.photo-caption {
    font-size: 0.8rem;
    margin-bottom: 2px;
    /* Single-line ellipsis so cards don't end up wildly different
       heights — grid row equalization stretches shorter cards to
       match the tallest, which is what creates the dead-space feel
       Brandon noted on the Casey's Corner page. Real aspect-ratio
       fix tracked separately. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.photo-credit {
    font-size: 0.75rem;
    color: var(--color-text-light);
}
.photo-gallery-item.photo-pending {
    position: relative;
    opacity: 0.7;
}
.photo-pending-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-card);
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.photo-upload-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.photo-upload-section h3 {
    margin-bottom: 12px;
}

.photo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 20px 16px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-light);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.photo-dropzone:hover {
    border-color: var(--color-accent, #C2185B);
    color: var(--color-text);
}
.photo-dropzone.is-dragover {
    border-color: var(--color-accent, #C2185B);
    background: #FFF3F8;
    color: var(--color-text);
}
.photo-dropzone input[type="file"] {
    /* Visually hidden but still focusable so click-to-browse and
       keyboard activation work via the label. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.photo-dropzone-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}
.photo-dropzone-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    font-size: 1rem;
    font-weight: 600;
}
.photo-dropzone-link {
    color: var(--color-accent, #C2185B);
    text-decoration: underline;
}
.photo-dropzone-filename {
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 500;
    word-break: break-all;
}
.photo-dropzone-filename.is-error {
    color: var(--color-error);
}

.area-section { margin-bottom: 24px; }
.area-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-weight: 500;
    margin-right: 4px;
    text-decoration: none;
}
a.badge:hover {
    /* Subtle darken on hover so clickable badges hint at it without
       changing the brand color palette (#47 Phase 4). */
    filter: brightness(0.92);
}

/* /search empty-result CTA (#47 Phase 5). When filters return zero,
   surface a one-click "drop this chip" for each active filter so the
   user can broaden out without having to find the chip strip again. */
.search-empty-state {
    padding: 32px 20px;
    text-align: center;
}
.search-empty-suggestions {
    margin-top: 10px;
    font-size: 0.92rem;
    color: var(--color-text-light);
}
.search-empty-suggestion {
    display: inline-block;
    margin: 0 4px;
    padding: 2px 10px;
    background: var(--color-bg);
    border-radius: 999px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
}
.search-empty-suggestion:hover {
    filter: brightness(0.94);
}

/* ---------------------------------------------------------------------------
   Prix-fixe / buffet / character-dining menus (#97)
   Used on /restaurants/{slug}/menu when a menu's pricing_model is
   not 'a_la_carte'. Renders the menu as a card with a pricing header
   ($N per adult / per child), then "included" categories (buffet
   stations or course choices) followed by collapsed beverage add-ons.
   --------------------------------------------------------------------------- */

.prixfixe-menu {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.prixfixe-header {
    /* Matches .page-heading-card pattern: white card with a 4px
       primary-color top accent. Reads as a section header rather than
       a marketing hero. */
    background: var(--color-white);
    border-top: 4px solid var(--color-primary);
    padding: 22px 32px 22px;
    text-align: center;
}
.prixfixe-eyebrow {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 6px;
}
.prixfixe-title {
    color: var(--color-text);
    font-size: 1.6rem;
    margin: 0 0 16px;
    font-weight: 700;
}
.prixfixe-pricing {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 8px;
}
.prixfixe-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text);
}
.prixfixe-price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}
.prixfixe-price-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    color: var(--color-text-light);
}
.prixfixe-pricenote {
    color: var(--color-text-light);
    font-size: 0.78rem;
    margin: 8px 0 0;
}
.prixfixe-section {
    padding: 20px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.prixfixe-section-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 14px;
}
.prixfixe-section-hint {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 0.85rem;
}
.prixfixe-section-addons {
    background: var(--color-bg);
}
/* <details>/<summary> collapse for add-on sections. */
details.prixfixe-section {
    padding: 0;
}
details.prixfixe-section[open] {
    padding-bottom: 14px;
}
.prixfixe-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.prixfixe-section-summary::-webkit-details-marker {
    display: none;
}
.prixfixe-section-summary:hover {
    background: rgba(0, 0, 0, 0.03);
}
.prixfixe-section-heading-inline {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}
.prixfixe-section-toggle {
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: transform 0.15s ease;
}
details[open] .prixfixe-section-toggle {
    transform: rotate(180deg);
}
details.prixfixe-section .prixfixe-items {
    padding: 0 24px;
}
.prixfixe-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.prixfixe-item {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.prixfixe-item:last-child {
    border-bottom: none;
}
.prixfixe-item-name {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}
.prixfixe-item-name:hover {
    color: var(--color-primary);
}
.prixfixe-item-desc {
    color: var(--color-text-light);
    font-size: 0.82rem;
    margin: 4px 0 0;
    line-height: 1.4;
}
.prixfixe-item-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.prixfixe-item-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.18);
    position: relative;
    top: -3px;
}
.prixfixe-item-price {
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-size: 0.9rem;
}
.prixfixe-item-price-missing {
    font-style: italic;
    color: var(--color-text-light);
}

/* Zero-result suggestions section (#47 Phase 5 follow-up). When the
   filters produce nothing, we surface "Popular at {scope}" alternatives
   beneath the chip-removal CTAs. Visually distinct from the horizontal
   list-style search result cards — these are image-prominent grid tiles
   (modeled after .blog-featured-card) so the user reads them as a
   different kind of content: invitations, not matches. */
.search-suggestions {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 20px 18px 18px;
    margin-top: 18px;
    border: 1px dashed rgba(0, 0, 0, 0.08);
}
.search-suggestions-eyebrow {
    color: var(--color-text-light);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
}
.search-suggestions-heading {
    font-size: 1.05rem;
    color: var(--color-text);
    margin: 0 0 14px;
    font-weight: 600;
}
.search-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 769px) {
    .search-suggestion-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.search-suggestion-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.search-suggestion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.search-suggestion-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-bg);
    overflow: hidden;
}
.search-suggestion-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search-suggestion-card-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000 30%) 100%);
    color: var(--color-white);
    font-size: 2.4rem;
    font-weight: 700;
}
.search-suggestion-card-score {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.78rem;
}
.search-suggestion-card-body {
    padding: 10px 12px 12px;
}
.search-suggestion-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 4px;
    /* Clamp to 2 lines so all cards in the row stay the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-suggestion-card-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin: 0;
    /* Same clamping — keeps grid rows aligned. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Park-scoped search section (#47 Phase 3). Sits between the heading
   card and the area-grouped restaurant list. Reuses .home-searchbar
   for the bar itself; .park-searchbar-section provides spacing and
   the small context line above the bar. */
.park-searchbar-section {
    margin: 12px 0 20px;
}
.park-searchbar-context {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.85rem;
    margin: 0 0 10px;
}
.park-searchbar-context strong {
    color: var(--color-text);
}
.badge-service { background: #E3F2FD; color: #1565C0; }
.badge-cuisine { background: #F3E5F5; color: #7B1FA2; }
.badge-price { background: #E8F5E9; color: #2E7D32; }
.badge-style { background: #FFF3E0; color: #E65100; }

/* Score badges */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-white);
}
.score-green { background: var(--color-score-green); }
.score-yellow-green { background: var(--color-score-yellow-green); }
.score-yellow { background: var(--color-score-yellow); color: var(--color-text); }
.score-orange { background: var(--color-score-orange); }
.score-red { background: var(--color-score-red); }

/* Dietary tag pills */
.tag-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 2px 4px 2px 0;
}
.tag-green { background: #E8F5E9; color: #2E7D32; }
.tag-coral { background: #FFEBEE; color: #C62828; }
.tag-blue { background: #E3F2FD; color: #1565C0; }

/* ---------------------------------------------------------------------------
   Menu Items
   --------------------------------------------------------------------------- */
.menu-section { margin-bottom: 24px; }
.menu-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 4px;
}
.menu-category-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-text);
    display: inline-block;
}
.menu-items { display: flex; flex-direction: column; gap: 8px; }
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    box-shadow: var(--shadow);
}
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-info h3 { font-size: 1rem; margin-bottom: 4px; }
.item-description {
    font-size: 0.72rem;
    color: var(--color-text-light);
    font-weight: 400;
    margin: 0;
    line-height: 1.35;
    /* No clamp — boxes grow to fit. Mirrors My Disney Experience's
       Mobile Order tiles where Disney curates descriptions short
       enough that the tile heights mostly stay uniform. */
}
.item-description-full {
    /* Detail page keeps multi-line; tile uses .item-description (truncated). */
    font-size: 0.875rem;
    color: var(--color-text-light);
}
.item-category { font-size: 0.75rem; color: var(--color-text-light); font-style: italic; }
.item-location { font-size: 0.8rem; color: var(--color-text-light); }
.item-location a { font-weight: 500; }
.menu-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}
.item-price {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   List-add Button (+ picker)
   --------------------------------------------------------------------------- */
.btn-list-add {
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    color: var(--color-text-light);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn-list-add:hover {
    border-color: var(--color-accent, #C2185B);
    color: var(--color-accent, #C2185B);
    transform: scale(1.05);
}
.btn-list-add.in-list {
    background: var(--color-accent, #C2185B);
    border-color: var(--color-accent, #C2185B);
    color: var(--color-white);
}
.btn-list-add.in-list:hover {
    background: var(--color-accent, #C2185B);
    color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   List-picker Popover
   --------------------------------------------------------------------------- */
.list-picker-popover {
    position: absolute;
    z-index: 1000;
    width: 240px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    font-size: 0.9rem;
}
.list-picker-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text);
}
.list-picker-body {
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
}
.list-picker-row {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    gap: 10px;
}
.list-picker-row:hover {
    background: var(--color-surface);
}
.list-picker-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.list-picker-name {
    flex: 1;
    color: var(--color-text);
}
.list-picker-count {
    color: var(--color-text-light);
    font-size: 0.8rem;
}
.list-picker-teaser {
    margin-top: 6px;
    padding: 10px 14px;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-light);
    font-size: 0.8rem;
    font-style: italic;
}
.list-picker-error {
    margin: 6px 14px;
    padding: 8px 10px;
    background: #FFEBEE;
    color: var(--color-error);
    border: 1px solid #EF9A9A;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Search Page
   --------------------------------------------------------------------------- */
.search-form { margin-bottom: 24px; }
.search-bar-page { display: flex; gap: 8px; margin-bottom: 12px; }
.search-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-family: var(--font-family);
    background: var(--color-white);
}

/* Unified select chevron — replace the native dropdown arrow with a
   consistent SVG so the indicator sits at a uniform offset on every
   <select> across the site. Without this, browsers position the
   native arrow flush to the right edge with their own padding, which
   reads inconsistent next to our custom buttons. */
.filter-select,
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230D2B52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}
select.form-input {
    padding-right: 32px;
    background-color: var(--color-white);
}
.results-count { color: var(--color-text-light); margin-bottom: 12px; }
.search-page-btn { padding: 10px 24px; }

/* Compact heading for the search-results state (#50 review tweak). The
   heavy page-heading-card chrome dwarfs the actual content when the
   user is in working/query mode rather than landing on the directory. */
.search-results-heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 4px 0 16px;
    color: var(--color-text);
}

/* "More filters" toggle — collapses venue/cuisine/diet behind a button
   so the primary search bar + parks filter aren't competing with three
   selects most users don't touch. Auto-expanded when any secondary
   filter is active (server-rendered, no flicker). */
.more-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.more-filters-toggle:hover {
    background: var(--color-bg);
}
.more-filters-caret { font-size: 0.75em; }
.search-filters-more { margin-top: 8px; }
.search-filters-more.is-collapsed { display: none; }

/* Active-filter chip strip (#50). Renders the currently-selected
   filters as removable pills so users can see what's narrowing the
   list and clear individual filters without dropping back into the
   selects. */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 12px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.active-filter-label {
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-weight: 500;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.active-filter-chip:hover {
    background: rgba(255, 90, 71, 0.22);
}
.active-filter-chip-x {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.7;
}
.active-filter-clear {
    margin-left: auto;
    color: var(--color-text-light);
    font-size: 0.85rem;
    text-decoration: underline;
}

/* Park grouping in the browse/filtered modes — each park gets its own
   subheading + tile list so 400+ restaurants don't render as one
   undifferentiated wall. */
.park-group { margin-bottom: 28px; }
.park-group-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-header);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-border);
}
.park-group-count {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 0.9em;
}

/* Pagination on the directory view. Simple prev/next + "Page X of Y"
   indicator. */
.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 8px;
}
.search-pagination-info {
    color: var(--color-text-light);
    font-size: 0.9rem;
}
.search-pagination .btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* Search sections */
.search-section { margin-bottom: 32px; }
.search-section-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.search-section-count {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* Venue cards grid */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.venue-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    transition: box-shadow 0.2s, transform 0.2s;
}
.venue-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--color-text);
}
.venue-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--color-bg-light);
    overflow: hidden;
}
.venue-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.venue-card-placeholder {
    width: 100%;
    height: 100%;
    background: #D3D3D3;
}
.venue-score {
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.venue-card-body {
    padding: 12px;
}
.venue-card-body h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.venue-card-location {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.venue-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.venue-hidden { display: none; }

/* Search items list */
.search-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.search-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    box-shadow: var(--shadow);
}
.search-item-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}
.search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-item-info {
    flex: 1;
    min-width: 0;
}
.search-item-info h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.search-item-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 2px;
}
.search-item-meta a { font-weight: 500; }
.search-item-sep { margin: 0 4px; }
.search-item-price {
    flex-shrink: 0;
    margin-left: 8px;
}
.item-hidden { display: none; }

/* Show More button */
.btn-show-more {
    display: block;
    margin: 16px auto 0;
    padding: 10px 32px;
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}
.breadcrumbs a { color: var(--color-text-light); }
.breadcrumbs a:hover { color: var(--color-primary); }

/* Restaurant detail meta */
.restaurant-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.meta-location { color: var(--color-text-light); font-size: 0.9rem; }
.restaurant-description { color: var(--color-text-light); margin-bottom: 24px; }

/* ---------------------------------------------------------------------------
   Info Table (restaurant detail)
   --------------------------------------------------------------------------- */
.info-table {
    width: 100%;
    margin-bottom: 24px;
}
.info-table tr {
    border-bottom: 1px solid var(--color-border);
}
.info-table td {
    padding: 10px 0;
    font-size: 0.9rem;
    vertical-align: top;
}
.info-table td:first-child {
    font-weight: 600;
    width: 120px;
    color: var(--color-text);
}
.info-table td:last-child {
    color: var(--color-text-light);
}

/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
}
.tab {
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-light);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--color-primary); }
.tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Rating Bars
   --------------------------------------------------------------------------- */
.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.rating-label {
    font-size: 0.85rem;
    color: var(--color-text-light);
    min-width: 140px;
}
.rating-bar {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.rating-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--color-score-green);
}
.rating-value {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--color-text);
}
.form-input:focus { border-color: var(--color-primary); outline: none; }
textarea.form-input {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}
.form-label-hint {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 0.85rem;
}

.login-form { margin: 24px 0; }
.login-note {
    color: var(--color-text-light);
    font-size: 0.85rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Empty State
   --------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-light);
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Lists index
   --------------------------------------------------------------------------- */
.page-subtitle {
    color: var(--color-text-light);
    margin-bottom: 24px;
}
.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.list-card {
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.list-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.list-detail-back {
    margin-bottom: 8px;
}
.list-detail-back a {
    color: var(--color-text-light);
    font-size: 0.9rem;
}
.list-detail-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.list-visibility-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.list-visibility-control select {
    font-size: 0.85rem;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-white);
    cursor: pointer;
}
.list-visibility-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: #ECEFF1;
    color: var(--color-text-light);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.list-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface);
}
.list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.list-card-image-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    font-size: 2.5rem;
}
.list-card-body {
    padding: 14px 16px 16px;
}
.list-card-body h2 {
    font-size: 1.1rem;
    margin: 0 0 4px;
}
.list-card-count {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0;
}
.list-card-teaser {
    border-style: dashed;
    background: #FAFAFA;
}
.list-card-image-teaser {
    background: linear-gradient(135deg, #ECEFF1, #CFD8DC);
    color: var(--color-text-light);
    font-size: 3rem;
    font-weight: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-card-cta {
    margin: 8px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent, #C2185B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Flash Messages
   --------------------------------------------------------------------------- */
.flash {
    max-width: var(--max-width-wide);
    margin: 12px auto;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
}
.flash a { color: inherit; text-decoration: underline; }
.flash-success { background: #E8F5E9; color: var(--color-success); border: 1px solid #A5D6A7; }
.flash-error { background: #FFEBEE; color: var(--color-error); border: 1px solid #EF9A9A; }
.flash-warning { background: #FFF8E1; color: #8A6D00; border: 1px solid #FFE082; }
.verify-banner-resend {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 12px;
    background: #8A6D00;
    color: var(--color-white) !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
}
.verify-banner-resend:hover { background: #6d5500; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-footer);
    color: var(--color-white);
    text-align: center;
    padding: 32px 16px 24px;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}
.footer-nav a {
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.footer-nav a:hover { color: var(--color-primary-light); }

.footer-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}
.footer-social a {
    color: var(--color-white);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.footer-social a:hover { color: var(--color-primary-light); }

.footer-legal {
    margin-bottom: 12px;
    font-size: 0.8rem;
}
.footer-legal a { color: var(--color-white); }
.footer-legal a:hover { color: var(--color-primary-light); }
.footer-divider {
    margin: 0 8px;
    opacity: 0.5;
}

.footer-copyright {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Responsive — Tablet+
   --------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .hero h1 { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .two-col { flex-direction: row; align-items: center; }
    .two-col > * { flex: 1; }
    .two-col.reverse { flex-direction: row-reverse; }

    .circle-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 480px;
    }

    .restaurant-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 640px) {
    .search-menu-icon { display: flex; }
    .menu-item { flex-direction: column; }
    .menu-item-actions { margin-left: 0; margin-top: 8px; }
    .venue-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .search-item-row { flex-wrap: wrap; }
    .search-item-price { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Homepage Sections — sit on the gray body surface; their content
   (cards, tiles, stat strips) provides the visual structure.
   --------------------------------------------------------------------------- */
.home-section {
    padding: 12px 0;
}
.home-section-cta {
    text-align: center;
    margin-top: 14px;
}
@media (min-width: 769px) {
    .home-section {
        padding: 14px 0;
    }
}

/* Homepage hero — mobile-first vertical stack. On desktop it splits
   60/40 with text on the left and a 3-photo collage on the right. */
.home-hero {
    padding: 0 0 12px;
}
.home-hero-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
}
.home-hero-text {
    text-align: left;
}
.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 18px;
}
.home-hero-eyebrow::after {
    content: '';
    display: inline-block;
    width: 48px;
    height: 3px;
    margin-left: 12px;
    background: var(--color-primary);
    border-radius: 2px;
}
.home-hero-title {
    font-size: 2.3rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-header);
    margin: 0 0 16px;
}
.home-hero-accent {
    position: relative;
    display: inline-block;
    color: var(--color-header);
}
.home-hero-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    width: 100%;
    height: 12px;
    color: var(--color-primary);
    pointer-events: none;
}
.home-hero-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-light);
    max-width: 460px;
    margin: 0 0 22px;
}
.home-hero-subtitle-accent {
    color: var(--color-primary);
    font-weight: 700;
}
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.home-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
}
.home-hero-cta-primary svg,
.home-hero-cta-secondary svg {
    flex-shrink: 0;
}

/* Photo collage — three rotated/overlapping cards positioned
   absolutely inside a flex slot. Heights driven by the column
   itself, so the collage scales with the available width. */
.home-hero-collage {
    position: relative;
    width: 86%;
    max-width: 480px;
    margin: 0 auto;
    height: 0;
    padding-bottom: 60%; /* aspect ratio of the collage box on mobile */
    color: var(--color-primary);
}
.home-hero-photo {
    position: absolute;
    border-radius: 22px;
    overflow: hidden;
    background: var(--color-bg-light);
    border: 8px solid var(--color-white);
    box-shadow: 0 12px 28px rgba(13, 43, 82, 0.18);
}
.home-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Photos enlarged + positioned to overlap each other significantly,
   matching the mockup's polaroid-stack feel. Each one extends past
   the next so the eye reads them as a unified cluster. */
.home-hero-photo-1 {
    top: 6%;
    left: 0;
    width: 66%;
    height: 82%;
    transform: rotate(-5deg);
    z-index: 2;
}
.home-hero-photo-2 {
    top: -2%;
    right: -2%;
    width: 56%;
    height: 60%;
    transform: rotate(7deg);
    z-index: 1;
}
.home-hero-photo-3 {
    bottom: -4%;
    right: 0;
    width: 60%;
    height: 56%;
    transform: rotate(4deg);
    z-index: 3;
}
/* Fixed coral badge — anchored to the upper-left of the collage so
   it doesn't sit in the middle competing with the photos. Acts like
   a sticker peeking out from behind photo 1. */
.home-hero-badge {
    position: absolute;
    left: -6%;
    top: 40%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: 7px solid var(--color-white);
    box-shadow: 0 12px 24px rgba(255, 90, 71, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    z-index: 5;
}
@media (max-width: 768px) {
    .home-hero-badge {
        width: 64px;
        height: 64px;
        border-width: 5px;
        box-shadow: 0 8px 18px rgba(255, 90, 71, 0.4);
    }
}
.home-hero-badge svg {
    width: 60%;
    height: 60%;
    display: block;
}

/* Decorative SVG accents sprinkled around the collage — coral stars
   and small expression-line clusters that read like comic-book
   motion marks, giving the section its "fun & whimsical" energy. */
.home-hero-deco {
    position: absolute;
    color: var(--color-primary);
    pointer-events: none;
    z-index: 5;
    display: block;
}
.home-hero-deco svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Whimsy decorations — bigger, two-color (coral + navy), more of them.
   Coral carries the brand energy; navy adds editorial counterweight
   matching the mockup's mix. Per-decoration position/size/color/rotation
   are emitted as inline styles by the index template, randomized in
   index.php so each pageload is a fresh arrangement (same effect as the
   hero collage's per-load photo shuffle). */
.home-hero-star { color: var(--color-primary); }
.home-hero-lines { color: var(--color-primary); opacity: 0.9; }

/* Mobile: hide the trailing decorations so the small-screen collage
   reads ~40% lighter. Bands are shuffled per-pageload in PHP so the
   subset that's hidden varies — keeps the layout feeling fresh
   without the small-screen clutter. */
@media (max-width: 768px) {
    .home-hero-star-i5,
    .home-hero-star-i6,
    .home-hero-star-i7,
    .home-hero-star-i8,
    .home-hero-lines-i3,
    .home-hero-lines-i4 {
        display: none;
    }
}

@media (min-width: 769px) {
    .home-hero {
        padding: 10px 0 18px;
    }
    .home-hero-wrap {
        flex-direction: row;
        align-items: stretch;
        gap: 48px;
    }
    .home-hero-text {
        flex: 1 1 56%;
        display: flex;
        flex-direction: column;
    }
    /* Push the trust strip to the bottom of the text column so it
       lines up with the bottom of the collage on the right. */
    .home-hero-text .home-hero-trust {
        margin-top: auto;
    }
    .home-hero-collage {
        flex: 0 0 42%;
        width: auto;
        max-width: none;
        margin: 0;
        padding-bottom: 0;
        height: 520px;
    }
    .home-hero-title {
        font-size: 3.1rem;
    }
    /* Small top breathing room above the eyebrow on desktop only —
       helps the column visually balance with the collage when the
       trust strip is pinned to the bottom. On mobile this would
       create asymmetric spacing below the search bar. */
    .home-hero-eyebrow {
        margin-top: 12px;
    }
}

/* Homepage search bar — narrow centered pill that sits just under
   the header (above the hero). Coral icon + accent on focus, neutral
   divider between input and the All-Parks filter chip. */
.home-searchbar-section {
    padding: 20px 0;
}
/* Mobile only: the shared .content-container adds its own 24px
   top/bottom which would stack on top of the section padding above
   and (via the neighbouring hero's container) below — collapse them
   so the 20px section padding is the only spacing around the search
   bar. Desktop keeps the container padding for editorial breathing
   room. */
@media (max-width: 768px) {
    .home-searchbar-section > .content-container,
    .home-hero > .content-container {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (min-width: 769px) {
    .home-searchbar-section {
        padding: 14px 0 0;
    }
}
.home-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 6px 18px rgba(13, 43, 82, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.home-searchbar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 6px 22px rgba(255, 90, 71, 0.18);
}
.home-searchbar-icon {
    display: inline-flex;
    color: var(--color-primary);
    flex-shrink: 0;
}
.home-searchbar-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 6px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-header);
    outline: none;
}
.home-searchbar-input::placeholder {
    color: var(--color-text-light);
}
.home-searchbar-divider {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    flex-shrink: 0;
}
.home-searchbar-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-header);
    padding: 0 4px 0 10px;
    flex-shrink: 0;
}
.home-searchbar-filter-icon {
    color: var(--color-header);
    flex-shrink: 0;
}
.home-searchbar-filter {
    border: none;
    background: transparent;
    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-header);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 110px;
    max-width: 110px;
    padding: 4px 24px 4px 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* Chevron + offset matched to the unified select treatment
       (.filter-select / select.form-input) for visual consistency. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230D2B52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}
/* Native dropdown popup option rendering. Chrome inherits font /
   color / background from the <select> trigger into each <option>
   in the popup, so two selects with different trigger styling (e.g.
   the homepage filter uses heading font + bold; .filter-select uses
   default) produce visually different popups even when option padding
   is identical. Reset the font + color + background here so popup
   options look uniform across the site regardless of how the trigger
   itself is styled. Right padding is more generous than left to
   handle browsers that size the popup tightly to the option text.
   Safari largely ignores this — acceptable; falls back to system. */
.home-searchbar-filter option,
.filter-select option,
select.form-input option {
    padding: 6px 16px 6px 12px;
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--color-text);
    background: var(--color-white);
}
.home-searchbar-submit {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.home-searchbar-submit:hover {
    background: var(--color-primary-dark);
}
@media (max-width: 480px) {
    .home-searchbar-divider,
    .home-searchbar-filter-wrap {
        display: none;
    }
    /* Shrink only the placeholder text (not what the user types) so
       the longer "Search snacks, restaurants, and more…" fits without
       clipping on phone widths. */
    .home-searchbar-input {
        padding: 12px 4px;
    }
    .home-searchbar-input::placeholder {
        font-size: 0.85rem;
    }
}

/* Hero trust callouts — promoted into the hero left column. Stacked
   icon-over-label-over-subtitle, 4 across, no card backgrounds so the
   strip sits visually inside the hero block. */
.home-hero-trust {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    margin: 40px 0 16px;
    padding: 0;
}
/* Hide the trust callouts on mobile — they restate the
   headline/subtitle and the vertical real estate is more valuable
   for the hero collage. They re-appear at desktop widths where the
   hero column has room to anchor them at the bottom. */
@media (max-width: 768px) {
    .home-hero-trust {
        display: none;
    }
}
@media (min-width: 769px) {
    .home-hero-trust {
        margin-top: 48px;
    }
}
.home-hero-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}
.home-hero-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.home-hero-trust-icon img {
    width: 64%;
    height: 64%;
    object-fit: contain;
    display: block;
}
.home-hero-trust-label {
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-header);
    line-height: 1.2;
}
.home-hero-trust-sub {
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.3;
}
@media (min-width: 769px) {
    .home-hero-trust {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Homepage park browse grid — image-prominent cards with a dark
   bottom-gradient overlay carrying the park name + count. */
.home-park-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.home-park-card {
    display: block;
    position: relative;
    aspect-ratio: 3/2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-header);
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.home-park-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: var(--color-white);
    text-decoration: none;
}
.home-park-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}
.home-park-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--color-white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.home-park-card-count {
    font-size: 0.8rem;
    color: var(--color-white);
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@media (min-width: 481px) {
    .home-park-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 769px) {
    .home-park-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Stats row — sits in a white card so the three big primary-color
   numbers feel like their own anchor block on the gray surface. */
.stats-section {
    padding: 8px 0;
}
.stats-grid {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    padding: 18px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.stat-item {
    text-align: center;
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-weight: 500;
}


/* Featured article — compact editorial card replacing the previous
   long two-column blocks. Image-left + body-right on desktop,
   stacked on mobile. Whole card is one anchor. */
.featured-article {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
.featured-article:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    color: var(--color-text);
    text-decoration: none;
}
.featured-article-image {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-bg);
}
.featured-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.featured-article-body {
    padding: 18px 20px 20px;
}
.featured-article-eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-family-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.featured-article-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-header);
}
.featured-article-blurb {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-light);
}
.featured-article-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}
.featured-article:hover .featured-article-cta {
    color: var(--color-primary-dark);
}
@media (min-width: 769px) {
    .featured-article {
        flex-direction: row;
        align-items: stretch;
    }
    .featured-article-image {
        flex: 0 0 40%;
        aspect-ratio: auto;
    }
    .featured-article-body {
        flex: 1 1 60%;
        padding: 24px 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .featured-article-title {
        font-size: 1.5rem;
    }
}

/* Secondary article cards — compact image-on-top tiles sitting in a
   2-column grid below the featured article. Image-on-top contrasts
   the featured article's image-left layout; no blurb keeps the
   section vertically tight. */
.secondary-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.secondary-article {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
.secondary-article:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    color: var(--color-text);
    text-decoration: none;
}
.secondary-article-image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg);
}
.secondary-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.secondary-article-body {
    padding: 10px 12px 12px;
}
.secondary-article-eyebrow {
    margin: 0 0 4px;
    font-family: var(--font-family-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.secondary-article-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-header);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 640px) {
    .secondary-articles {
        gap: 16px;
        margin-top: 20px;
    }
    .secondary-article-body {
        padding: 14px 16px 16px;
    }
    .secondary-article-eyebrow {
        font-size: 0.7rem;
    }
    .secondary-article-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
    }
}

/* ---------------------------------------------------------------------------
   Auth Modals
   --------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    width: 100%;
    /* min() so on a 320px phone (95vw = 304px) the modal doesn't try to
       stretch to 420px and overflow the overlay's 16px padding. */
    max-width: min(420px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hidden { display: none !important; }
.modal-card.hidden { display: none; }
.modal-overlay.hidden { display: none; }

.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--color-text-light);
    cursor: pointer;
    line-height: 1;
    /* 8px padding + ~28px glyph ≈ 44px tap target (Apple recommended min). */
    padding: 8px;
}
.modal-close:hover { color: var(--color-text); }

.modal-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
}

.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-header-row h2 { margin-bottom: 0; }

.modal-error {
    background: #FFEBEE;
    color: var(--color-error);
    border: 1px solid #EF9A9A;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.modal-success {
    background: #E8F5E9;
    color: var(--color-success);
    border: 1px solid #A5D6A7;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.bug-report-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bug-report-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.bug-report-btn-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 600px) {
    .bug-report-btn-label { display: none; }
    /* Collapsed icon-only on mobile, tucked tighter into the bottom-
       right corner so it doesn't overlap page content. */
    .bug-report-btn {
        padding: 10px;
        bottom: 4px;
        right: 8px;
    }
}

.modal-card .form-group { margin-bottom: 16px; }

.modal-card .btn-block {
    width: 100%;
    max-width: none;
    margin-top: 8px;
}

.modal-toggle {
    text-align: center;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.modal-toggle a {
    color: var(--color-text-light);
    text-decoration: underline;
}
.modal-toggle a:hover { color: var(--color-primary); }

.modal-legal {
    margin-top: 20px;
    font-size: 0.75rem;
    color: var(--color-text-light);
    line-height: 1.5;
}
.modal-legal a {
    color: var(--color-text-light);
    text-decoration: underline;
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

/* UGC license acknowledgement block (#82.3). Required check on the
   review + photo submission forms so the user actively grants the
   license described in /terms § User Content. Slightly muted so it
   reads as a confirmation, not a primary input. */
.ugc-consent {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.ugc-consent .checkbox-label {
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.ugc-consent input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.ugc-consent a {
    color: var(--color-primary);
    text-decoration: underline;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    cursor: pointer;
    font-weight: 400;
}

.text-link-sm {
    color: var(--color-text-light);
    text-decoration: underline;
    font-size: 0.85rem;
}
.text-link-sm:hover { color: var(--color-primary); }

/* ---------------------------------------------------------------------------
   Restaurant Detail — Hero
   --------------------------------------------------------------------------- */
.restaurant-hero {
    position: relative;
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    background: var(--color-bg-light);
}
.restaurant-hero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
.restaurant-hero-overlay {
    position: absolute;
    bottom: 12px;
    right: 16px;
}
.restaurant-hero-overlay .score-badge {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ---------------------------------------------------------------------------
   Restaurant Detail — Menu Buttons & Links
   --------------------------------------------------------------------------- */
.menu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.menu-buttons .btn small {
    font-weight: 400;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Restaurant Detail — Menu Buttons
   --------------------------------------------------------------------------- */
.restaurant-menu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.btn-menu-link {
    display: inline-block;
    padding: 12px 24px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background 0.15s;
}
.btn-menu-link:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Restaurant Detail — CTA Buttons
   --------------------------------------------------------------------------- */
.restaurant-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.btn-cta-disney {
    display: inline-block;
    padding: 10px 20px;
    background: #FFC107;
    color: #212121;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background 0.15s;
}
.btn-cta-disney:hover {
    background: #FFD54F;
    color: #212121;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Restaurant Detail — Description
   --------------------------------------------------------------------------- */
.restaurant-description-section {
    margin-bottom: 24px;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Restaurant Detail — Sections
   --------------------------------------------------------------------------- */
.restaurant-section {
    padding-top: 24px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}
.restaurant-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* (Old horizontal-scroll Popular Items chrome retired. Current
   pattern is .popular-items-row + .popular-item-card +
   .popular-item-thumb defined lower in this file, post-#106 port.) */

/* ---------------------------------------------------------------------------
   Restaurant Detail — Review list heading
   --------------------------------------------------------------------------- */
.review-list-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 20px 0 12px;
    color: var(--color-text);
}

.tab-panel { min-height: 120px; }

@media (min-width: 641px) {
    .restaurant-hero { max-height: 400px; }
    .restaurant-hero img { height: 400px; }
}

/* ---------------------------------------------------------------------------
   Restaurant Menu Page
   --------------------------------------------------------------------------- */
.menu-toggle-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.menu-toggle-btn {
    padding: 8px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.menu-toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.menu-toggle-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}
.menu-toggle-btn small {
    font-weight: 400;
    opacity: 0.8;
}
.menu-toggle-style {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 4px);
    background: #FFF3E0;
    color: #E65100;
    vertical-align: middle;
}

.menu-info-card {
    background: #FFF8F0;
    border: 1px solid #F0D8B8;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.badge-menu-style {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius);
    background: #FFF3E0;
    color: #E65100;
    margin-bottom: 8px;
}
.menu-price-note {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-primary-dark);
    margin-bottom: 4px;
}
.menu-instructions {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* The old Food/Drinks/Snacks bucket-accordion layout
   (.menu-bucket-block, .menu-category-block, .menu-course-block,
   .menu-drink-summary, .bucket-chevron) was retired in #99 when
   the menu page ported to mirroring Disney's sections directly.
   See .menu-section-block / .menu-section-summary lower in this
   file for the current accordion chrome. */

/* Filter pills — used by the new menu page filter panel. */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: var(--font-family);
}
.filter-pill:hover {
    border-color: var(--color-primary);
}
.filter-pill.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.filter-pill-clear {
    padding: 4px 10px;
    font-size: 0.8rem;
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-family);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Dense menu-item tile (#40) — goal: ~8 items per phone screen,
   scannable like a printed menu. Single-line truncation on name +
   description; price + score share the footer row. The save (+)
   button floats absolute in the card's top-right corner so the
   footer has room for the rating to grow into. */
.menu-item-card {
    position: relative;
    display: flex;
    gap: 10px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s;
    align-items: center;
}
.menu-item-card:hover {
    box-shadow: var(--shadow-hover);
}

/* (Old dense-tile menu item chrome — .menu-item-thumb sizing,
   .menu-item-card-body/header/footer, .item-price-*, .score-decimal,
   .menu-page-back, .menu-toggle-* — retired with the #99 mirror
   port. Current .menu-item-card geometry lives lower in this file.) */

/* ---------------------------------------------------------------------------
   Menu Item Detail Page
   --------------------------------------------------------------------------- */

/* Image Carousel */
.item-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    background: var(--color-bg-light);
}
.item-carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.4s ease;
    gap: 8px;
    padding: 16px 0;
}
.item-carousel-slide {
    position: relative;  /* anchors the attribution badge (#76 Phase 4) */
    min-width: 60%;
    max-width: 60%;
    flex-shrink: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5;
    transform: scale(0.85);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.item-carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}
.item-carousel-slide img {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    display: block;
}
@media (min-width: 641px) {
    .item-carousel-slide {
        min-width: 50%;
        max-width: 50%;
    }
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-white);
    border: none;
    font-size: 2rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.7); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.carousel-dot.active {
    background: var(--color-white);
}

/* Compact carousel variant for the restaurant page (#36) — short
   strip below the summary instead of a full-height hero up top. */
.item-carousel-compact {
    margin: 16px 0 24px;
    border-radius: var(--radius-lg);
}
.item-carousel-compact .item-carousel-track {
    padding: 0;
    gap: 0;
}
.item-carousel-compact .item-carousel-slide {
    min-width: 100%;
    max-width: 100%;
    opacity: 1;
    transform: none;
    border-radius: var(--radius-lg);
}
.item-carousel-compact .item-carousel-slide img {
    max-height: 200px;
    object-fit: cover;
    width: 100%;
}
.item-carousel-compact .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
}

/* Image attribution badge (#76 Phase 4) — small pill anchored to the
   bottom-right corner of every food/restaurant photo so guests can
   tell at a glance whether they're looking at Disney's official
   imagery, a TPF staff upload, or a real photo a user submitted.
   User badges link to /u/{username}.

   Auto-hidden at < 200px container width — too small to read without
   obscuring the photo. The relevant photo container (e.g.
   .item-carousel-slide) must be `position: relative` for anchoring. */
.image-attribution {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 4px;
    text-decoration: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-attribution:hover {
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-white);
}
.image-attribution-disney  { /* default neutral — Disney first-party is the most common */ }
.image-attribution-staff   { background: rgba(255, 90, 71, 0.85); /* coral for TPF staff */ }
.image-attribution-user    { /* default neutral — user badges still rely on the camera glyph in the label */ }

/* Hide badge on small thumbnails — readability over information density. */
.entity-tile-thumb .image-attribution,
.photo-gallery-item .image-attribution {
    display: none;
}
@media (max-width: 480px) {
    .image-attribution {
        font-size: 0.68rem;
        padding: 2px 6px;
    }
}

/* Photo empty-state (#76 Phase 3) — renders in place of the carousel
   when a menu item or restaurant has no real photos. Copy + CTA invite
   contributions; never reads as "broken" or "missing". Same height
   footprint as the carousel so the page rhythm stays consistent. */
.photo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px;
    margin: 20px auto;
    max-width: 480px;
    min-height: 180px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.photo-empty-state-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.7;
}
.photo-empty-state-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-header);
    margin: 0 0 6px;
}
.photo-empty-state-body {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0 0 14px;
    max-width: 320px;
    line-height: 1.4;
}
.photo-empty-state-cta {
    padding: 8px 18px;
}
.photo-empty-state-secondary {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.photo-empty-state-secondary a {
    color: var(--color-primary);
    text-decoration: underline;
}
.item-carousel-compact .carousel-dots {
    bottom: 8px;
}
@media (min-width: 641px) {
    .item-carousel-compact .item-carousel-slide img { max-height: 260px; }
}

/* Item summary tags — small pill row above the menu item description
   (price/cuisine/course/rating). Used by templates/menu_item.html.
   Was previously bundled with .restaurant-summary-tags from the old
   restaurant page layout; that family removed in the #99/#106 cleanup
   pass since the new restaurant page uses .restaurant-tags instead. */
.item-summary-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .item-summary-tags {
        gap: 5px;
        margin-bottom: 10px;
    }
}

/* Source attribution footer (#74 Phase 5). Quiet single-line credit
   at the bottom of restaurant pages for community-maintained venues
   so guests calibrate trust appropriately. Default Disney-API rows
   don't show this. */
.source-attribution {
    margin: 32px 0 16px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.5;
}
.source-attribution a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Section spacing for vertical flow layout */
.item-section {
    margin-bottom: 32px;
    padding-top: 8px;
}
.item-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.item-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
/* Info Grid */
.item-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.info-grid-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
}
.info-value small {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}
.info-value .score-badge-sm {
    margin-right: 8px;
}

/* Dietary Tags */
.dietary-tags-section {
    margin-bottom: 24px;
}
.dietary-tags-section h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.dietary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dietary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
}
.dietary-pill .dietary-icon {
    font-size: 1rem;
}

.item-description-full {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}
.empty-state-text {
    color: var(--color-text-light);
    font-style: italic;
}

/* Locations Served */
.locations-section {
    margin-bottom: 32px;
}
.locations-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.locations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.location-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.location-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary);
    text-decoration: none;
}
.location-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.location-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.location-card-meta {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.location-card-menu {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.location-card-menus {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.location-card-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.location-card-menu-row .price {
    font-weight: 600;
    color: var(--color-primary-dark);
}
.badge-menu {
    background: #E3F2FD;
    color: #1565C0;
}
.badge-meal {
    background: #F3E5F5;
    color: #7B1FA2;
}
.location-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.location-card-price .price {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
}
.location-card-price .price-note {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-style: italic;
}

/* Nutrition Facts - FDA Style */
.nutrition-section {
    margin-bottom: 32px;
}
.nutrition-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.nutrition-label {
    max-width: 320px;
    border: 1px solid var(--color-text);
    padding: 12px;
    background: var(--color-white);
    font-family: Helvetica, Arial, sans-serif;
}
.nutrition-header h3 {
    font-size: 1.75rem;
    font-weight: 900;
    margin: 0 0 4px 0;
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 4px;
}
.nutrition-header p {
    margin: 2px 0;
    font-size: 0.9rem;
}
.nutrition-divider {
    border-top: 1px solid var(--color-text);
    margin: 4px 0;
}
.nutrition-divider.thick {
    border-top-width: 8px;
}
.nutrition-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.9rem;
}
.nutrition-row.calories {
    font-size: 1.5rem;
    font-weight: 900;
}
.nutrition-row.calories .nutrition-label-text {
    font-size: 1.5rem;
}
.nutrition-row.indent {
    padding-left: 16px;
}
.nutrition-label-text {
    font-weight: 600;
}
.nutrition-value {
    font-weight: 600;
}
.nutrition-row.vitamins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.vitamin-item {
    display: flex;
    justify-content: space-between;
}

/* Responsive */
@media (min-width: 641px) {
    .locations-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .item-info-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Menu item links in restaurant menu */
.menu-item-link {
    color: var(--color-text);
    text-decoration: none;
}
.menu-item-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.menu-item-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Make item names clickable */
.menu-item-card-header h3 a,
.menu-item-info h3 a,
.popular-card-body h3 a,
.search-item-info h3 a {
    color: var(--color-text);
    text-decoration: none;
}
.menu-item-card-header h3 a:hover,
.menu-item-info h3 a:hover,
.popular-card-body h3 a:hover,
.search-item-info h3 a:hover {
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------------- */
.tab-count {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--color-text-light);
}

/* Sub-rating summary bars */
.sub-ratings-summary {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
}
.sub-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.sub-rating-row:last-child { margin-bottom: 0; }
.sub-rating-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    min-width: 140px;
    flex-shrink: 0;
}
.sub-rating-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}
.sub-rating-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}
.sub-rating-bar-fill.score-green { background: var(--color-score-green); }
.sub-rating-bar-fill.score-yellow-green { background: var(--color-score-yellow-green); }
.sub-rating-bar-fill.score-yellow { background: var(--color-score-yellow); }
.sub-rating-bar-fill.score-orange { background: var(--color-score-orange); }
.sub-rating-bar-fill.score-red { background: var(--color-score-red); }
.sub-rating-value {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

/* Review card chrome lives in the new design-system block lower in
   this file (.review-list/.review-card/.review-head/.review-author/
   .review-author-text/.review-name/.review-verified-badge/.review-time/
   .review-rating/.review-chips/.review-body etc.). Old review CSS
   removed in the #99/#106 cleanup pass. */

.yes-no-toggle {
    display: flex;
    gap: 8px;
    max-width: 480px;
}
.yes-no-btn {
    flex: 1;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.yes-no-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.yes-no-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.prompt-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.prompt-chip {
    padding: 5px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--color-text);
}
.prompt-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.char-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 4px;
}
.char-counter.is-near-limit {
    color: var(--color-primary-dark);
    font-weight: 600;
}

.form-hint {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin: 0 0 6px;
}
.form-hint-inline {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-weight: 400;
}

/* Yes/No signal badges on review cards */
.review-signals {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.review-signal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}
.review-signal-yes {
    background: #E8F5E9;
    color: var(--color-success);
}
.review-signal-no {
    background: #FFEBEE;
    color: var(--color-error);
}
.score-input-row {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.score-btn {
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-light);
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.score-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.score-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.review-mode-toggle {
    display: inline-block;
    margin: 4px 0 16px;
    color: var(--color-text-light);
    font-size: 0.9rem;
    text-decoration: underline;
}
.review-mode-toggle:hover {
    color: var(--color-primary);
}
/* Overall score: 10 numbered boxes that fill continuously left-to-right
   as the score increases. In Simple mode the user clicks the left or
   right half of each box for 0.5-step picks; in Advanced (readonly)
   mode the boxes display the computed score with arbitrary precision
   (e.g. 8.3 → box 9 fills 30%). Box fill and box color both update
   dynamically as the score changes — see tierForScore in the
   templates' JS. Box 1 maps both halves to 1; the scale floor is 1.0. */
.score-box-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
}
.score-box {
    /* --score-fill: 0..1, set per-box by JS. --score-fill-color
       cascades from the row's .score-tier-N class. */
    --score-fill: 0;
    --score-fill-color: var(--color-primary);
    position: relative;
    /* Boxes share the row width and stay square, capped at 44px so
       they don't get oversized on desktop. On phones they shrink
       below the cap to keep all 10 on one line. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 44px;
    aspect-ratio: 1;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    background: linear-gradient(
        to right,
        var(--score-fill-color) calc(var(--score-fill) * 100%),
        var(--color-white) calc(var(--score-fill) * 100%)
    );
    overflow: hidden;
    transition: border-color 0.1s, background 0.15s;
}
.score-box-row:not(.readonly) .score-box:hover {
    border-color: var(--score-fill-color);
}
.score-box[style*="--score-fill"] {
    border-color: var(--score-fill-color);
}
.score-box-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-weight: 600;
    color: var(--color-text);
    z-index: 1;
}
.score-box-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.score-box-half-left  { left: 0; }
.score-box-half-right { right: 0; }
/* Read-only state for Advanced mode — boxes display the computed
   score; user interacts with the sub-rating buttons below. */
.score-box-row.readonly .score-box {
    cursor: default;
}
.score-box-row.readonly .score-box-half {
    pointer-events: none;
    cursor: default;
}
/* Five-tier dynamic palette — Brandon's curated theme-park palette,
   red → orange → yellow → lime-yellow → bright green for worst → best. */
.score-box-row.score-tier-1 .score-box { --score-fill-color: #FF4545; }
.score-box-row.score-tier-2 .score-box { --score-fill-color: #FFA534; }
.score-box-row.score-tier-3 .score-box { --score-fill-color: #FFE234; }
.score-box-row.score-tier-4 .score-box { --score-fill-color: #A8E62B; }
.score-box-row.score-tier-5 .score-box { --score-fill-color: #57E32C; }
/* Hint text below the box row — used for "Rate N more categories" in
   partial Advanced state and "Computed from your category scores: X.X"
   when complete. */
.score-box-hint {
    margin-top: 8px;
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-style: italic;
}
/* Phones: tighten Overall row spacing so 10 boxes fit edge-to-edge on
   ~358px content widths (iPhone 13 et al). Shrink sub-rating buttons
   below the desktop 32px so the Overall row stays visually dominant. */
@media (max-width: 600px) {
    .score-box-row {
        gap: 4px;
    }
    .score-input-row {
        gap: 3px;
    }
    .score-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }
}
.review-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.review-message-success {
    background: #E8F5E9;
    color: var(--color-success);
    border: 1px solid #A5D6A7;
}
.review-message-error {
    background: #FFEBEE;
    color: var(--color-error);
    border: 1px solid #EF9A9A;
}
.review-login-prompt {
    text-align: center;
    padding: 24px;
    color: var(--color-text-light);
}
.review-login-prompt p {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   Legal & Contact Pages
   --------------------------------------------------------------------------- */
.legal-body {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.legal-body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--color-header);
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body p {
    margin-bottom: 12px;
    line-height: 1.7;
    color: var(--color-text);
}
.legal-body ol,
.legal-body ul {
    padding-left: 1.6rem;
    margin: 0 0 12px;
    line-height: 1.7;
    color: var(--color-text);
}
.legal-body li {
    margin-bottom: 6px;
}
.legal-body li::marker {
    color: var(--color-text-light);
}
.legal-body blockquote {
    margin: 0 0 16px;
    padding: 12px 18px;
    border-left: 4px solid var(--color-primary);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}
.legal-body blockquote p:last-child {
    margin-bottom: 0;
}
.legal-body code {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}
.legal-body pre {
    background: var(--color-bg);
    padding: 12px 14px;
    border-radius: var(--radius-sm, 6px);
    overflow-x: auto;
    margin: 0 0 12px;
}
.legal-body pre code {
    background: transparent;
    padding: 0;
}
.legal-body hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 20px 0;
}
.legal-body a {
    color: var(--color-primary);
}
.legal-body a:hover {
    color: var(--color-primary-dark);
}
.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 0.95em;
}
.legal-body th,
.legal-body td {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.legal-body thead th {
    background: var(--color-header);
    color: var(--color-bg);
    font-weight: 700;
}
.legal-body tbody tr:nth-child(even) td {
    background: var(--color-bg);
}

.contact-form {
    /* No max-width cap — let the form fill the .content-container
       (same pattern as .settings-form). Paired form-row fields keep
       individual inputs at a comfortable width on wider screens. */
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.contact-form .form-group {
    margin-bottom: 16px;
}
.contact-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.contact-success {
    text-align: center;
    padding: 28px 20px;
}
.contact-success p {
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: var(--color-success);
}

/* ---------------------------------------------------------------------------
   Settings Page
   --------------------------------------------------------------------------- */
.settings-section {
    margin-bottom: 16px;
    padding: 16px 20px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.settings-section .section-heading-card {
    margin-top: 0;
    margin-bottom: 16px;
}
.settings-form {
    /* No max-width cap — let the form fill the .settings-section
       container (which itself sits inside the .content-container's
       1100px max). Paired form-row fields keep individual inputs at
       a comfortable width on wider screens. */
}
.settings-form .form-group {
    margin-bottom: 16px;
}
.settings-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 4px;
}
.form-row {
    display: flex;
    gap: 16px;
}
.form-row .form-group { flex: 1; }
.input-prefix-group {
    display: flex;
    align-items: stretch;
}
.input-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--color-text-light);
    font-weight: 500;
}
.input-prefix-group .form-input {
    border-radius: 0 var(--radius) var(--radius) 0;
}
.settings-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg-light);
    font-size: 0.9rem;
}
.settings-info-row:last-child { border-bottom: none; }
.settings-info-label {
    color: var(--color-text-light);
    font-weight: 500;
}

@media (max-width: 640px) {
    .form-row { flex-direction: column; gap: 0; }
}

@media (max-width: 640px) {
    .sub-rating-label { min-width: 100px; font-size: 0.8rem; }
    .score-btn { width: 28px; height: 28px; font-size: 0.75rem; }
}

/* ---------------------------------------------------------------------------
   User Profile
   --------------------------------------------------------------------------- */
/* Profile header is a 2-col grid. Mobile (default): row 1 holds the
   avatar (col 1) + identity meta (col 2); socials, bio, and the action
   button drop below and span both cols so they fill the card width.
   Desktop (≥769px): the avatar stays pinned to col 1 spanning every
   row, and everything else stacks down col 2 — the original side-by-
   side look that had plenty of room. */
.profile-header {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 16px;
    row-gap: 14px;
    margin: 8px 0 16px;
    padding: 18px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--color-primary);
    box-shadow: var(--shadow);
}
.profile-header-meta {
    min-width: 0;
    align-self: center;
}
.profile-header > .profile-social-row,
.profile-header > .profile-bio,
.profile-header > .profile-header-action {
    grid-column: 1 / -1;
}
@media (min-width: 769px) {
    .profile-header {
        column-gap: 20px;
    }
    .profile-header > .profile-avatar-lg {
        grid-row: 1 / -1;
        align-self: start;
    }
    .profile-header-meta {
        align-self: start;
    }
    .profile-header > .profile-social-row,
    .profile-header > .profile-bio,
    .profile-header > .profile-header-action {
        grid-column: 2;
    }
}
.profile-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.profile-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-avatar-initial {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
}
.profile-header-meta h1 {
    font-size: 1.5rem;
    margin-bottom: 2px;
}
.profile-username {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.profile-location {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 2px;
}
.profile-member-since {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}
.profile-bio {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* Profile "where else to find me" social row (#79).
   Brand-colored 44px pill icons directly under the meta lines, above
   the bio. Each link opens in a new tab. Brand colors as the resting
   state draw the eye; hover lifts + adds a soft shadow.

   Touch target: 44x44px hits the standard mobile minimum. */
.profile-social-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.profile-social-row li { margin: 0; }
.profile-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--color-white);
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    will-change: transform;
}
.profile-social-link svg {
    width: 22px;
    height: 22px;
    display: block;
}
.profile-social-link:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 43, 82, 0.18);
    filter: brightness(1.08);
    color: var(--color-white);
}
.profile-social-link:active { transform: translateY(0) scale(1); }

/* Brand color treatments — accurate to each platform's identity. */
.profile-social-website   { background: var(--color-header); }
.profile-social-podcast   { background: #7C3AED; } /* purple — podcast/audio convention */
.profile-social-instagram {
    /* Real Instagram brand uses a gradient. */
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.profile-social-tiktok    { background: #010101; }
.profile-social-youtube   { background: #FF0000; }
.profile-social-threads   { background: #000000; }
.profile-social-twitter   { background: #000000; }
.profile-social-facebook  { background: #1877F2; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
/* Settings page "Where else to find me" subsection heading. Lighter
   than an <h2> since it sits inside the profile form, but heavier than
   the form-group labels. */
.settings-subsection {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-header);
    margin: 24px 0 4px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.settings-subsection-hint {
    margin: 0 0 12px;
    color: var(--color-text-light);
}

.profile-stats {
    display: flex;
    gap: 32px;
    justify-content: space-around;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.profile-stat {
    text-align: center;
}
.profile-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.profile-stat-label {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* #80 Phase 3: visibility checkboxes on settings form */
.settings-visibility-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}
@media (max-width: 600px) {
    .settings-visibility-grid { grid-template-columns: 1fr; }
}
.settings-visibility-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}
.settings-visibility-row input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
}
.settings-visibility-grid > .form-hint {
    grid-column: 1 / -1;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* #80 Phase 2: minimal-stub view for private / followers-only profiles */
.profile-private-stub {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 32px 24px;
    margin-bottom: 16px;
    text-align: center;
    color: var(--color-text-light);
}
.profile-private-stub p {
    margin: 0;
    font-size: 0.95rem;
}

/* #80 Phase 1: photos tab on profile */
.profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 768px) {
    .profile-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.profile-photo-tile {
    background: var(--color-white);
    border-radius: var(--radius-sm, 6px);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.profile-photo-tile.is-pending {
    opacity: 0.85;
}
.profile-photo-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--color-bg);
}
.profile-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-photo-pending-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(13, 43, 82, 0.85);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-photo-meta {
    padding: 8px 10px;
    flex: 1;
}
.profile-photo-subject {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-header);
    text-decoration: none;
    display: block;
}
.profile-photo-subject:hover {
    color: var(--color-primary);
}
.profile-photo-caption {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.3;
}
.profile-photo-actions {
    display: flex;
    gap: 6px;
    padding: 0 10px 10px;
}
.profile-photo-action {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--color-text-light);
}
.profile-photo-action:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.profile-photo-action.profile-photo-delete:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

.review-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.review-target {
    font-weight: 600;
    font-size: 0.95rem;
}
.review-target-sub {
    font-size: 0.8rem;
    color: var(--color-text-light);
}
.review-target-sub a {
    color: var(--color-text-light);
}
.review-target-sub a:hover {
    color: var(--color-primary);
}

/* ===========================================================================
   Mobile usability pass — narrow-screen overrides for ≤480px (phones)
   Surveyed via `templates/*.html` + this stylesheet; targets the BLOCKING
   and HIGH-severity issues. Lighter overrides at the 600px breakpoint are
   inline at their respective sections (see review form ≈ line 2820, etc.).
   =========================================================================== */
@media (max-width: 480px) {
    /* Restaurant info table: shrink label column so values aren't squeezed. */
    .info-table td:first-child {
        width: 80px;
        font-size: 0.85rem;
    }
    .info-table td {
        font-size: 0.85rem;
    }

    /* Search filters: full-width stack instead of a cramped 4-up row. */
    .filter-select {
        width: 100%;
    }

    /* Venue grid was 2-col on phones — cards became unreadable. Single
       column under 480px. */
    .venue-grid {
        grid-template-columns: 1fr;
    }

    /* Sub-rating bars on restaurant/menu-item pages — shorter labels
       so the bar gets useful width on narrow viewports. */
    .sub-rating-label {
        min-width: 80px;
        font-size: 0.8rem;
    }

    /* Multi-menu restaurants: stack the meal-period toggle buttons
       instead of letting them overflow horizontally. */
    .menu-toggle-bar {
        flex-direction: column;
    }
    .menu-toggle-btn {
        width: 100%;
    }

    /* Profile stats: 4 stat tiles with 32px gaps was cramped.
       Tighter gap + slightly smaller numbers fits 4-across. */
    .profile-stats {
        gap: 12px;
    }
    .profile-stat-number {
        font-size: 1.5rem;
    }

    /* List picker popover: never wider than the screen on small phones. */
    .list-picker-popover {
        max-width: 90vw;
    }
}

/* Source attribution footnote on restaurant + menu-item detail pages
   (#90.14 — GEO citation-quality signal). Muted so it reads as a
   data-provenance footer rather than competing with content. */
.data-attribution {
    margin: 20px 0 0;
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-light);
    border-left: 3px solid var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Blog index (#85)
   Featured row at top (up to 2 pinned articles), then a 2-col layout:
   main chronological feed + sidebar (Topics + Recent Posts). Sidebar
   stacks below the main feed on mobile.
   --------------------------------------------------------------------------- */

.blog-index {
    /* container styles are inherited from .content-container */
}

.blog-topic-indicator {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 14px;
    margin: 8px 0 16px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-topic-chip {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 600;
}
.blog-topic-clear {
    margin-left: auto;
    font-size: 0.85rem;
}

/* --- Featured row --- */
.blog-featured {
    margin: 8px 0 24px;
}
.blog-featured-row {
    display: grid;
    /* 2-up at every viewport. Mobile-stacked featured cards were too
       image-heavy and pushed the main feed off-screen — the pinned
       row reads as a compact "what's hot" duo regardless of width. */
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (min-width: 769px) {
    .blog-featured-row {
        gap: 16px;
    }
}
.blog-featured-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border-top: 4px solid var(--color-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.blog-featured-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg);
}
.blog-featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder shown when an article has no hero image. Branded
   gradient with the eyebrow (or first letter of the title) so every
   card has visual weight — and articles still feel distinct without
   editors needing to upload a hero for each post. */
.blog-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000 30%) 100%);
    color: var(--color-white);
    text-align: center;
}
.blog-card-placeholder-text {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    /* Cap visual size so a long eyebrow doesn't overwhelm the card. */
    max-width: 80%;
}
.blog-featured-card-body {
    padding: 16px 18px 18px;
}
.blog-featured-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.blog-featured-card-title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 4px 0 8px;
}
.blog-featured-card-blurb {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

/* --- 2-col main + sidebar layout --- */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 901px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

/* --- Main feed (list-style cards: image left, text right) --- */
.blog-main {
    min-width: 0;
}
.blog-empty {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 28px 20px;
    text-align: center;
}
.blog-empty p {
    margin-bottom: 10px;
}
.blog-list-card {
    display: flex;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-list-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.blog-list-card-image {
    flex-shrink: 0;
    width: 180px;
    background: var(--color-bg);
    overflow: hidden;
}
.blog-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-list-card-body {
    padding: 14px 18px 14px 16px;
    min-width: 0;
    flex: 1;
}
.blog-list-card-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 4px 0 6px;
}
.blog-list-card-blurb {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin: 0 0 6px;
    line-height: 1.45;
}
.blog-card-eyebrow {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.blog-card-meta {
    color: var(--color-text-light);
    font-size: 0.8rem;
    margin: 0;
}

@media (max-width: 600px) {
    /* Compact mobile sizing — image-left layout preserved so 2-4
       cards fit per screen instead of 1-2 from a stacked layout.
       Everything tighter: narrower image, smaller type, less padding,
       tighter inter-card gap. Blurb clamped to 2 lines so cards stay
       a consistent height down the feed. */
    .blog-list-card {
        margin-bottom: 10px;
    }
    .blog-list-card-image {
        width: 110px;
    }
    .blog-list-card-body {
        padding: 10px 12px 10px 12px;
    }
    .blog-list-card-title {
        font-size: 1rem;
        line-height: 1.25;
        margin: 2px 0 4px;
    }
    .blog-list-card-blurb {
        font-size: 0.82rem;
        line-height: 1.4;
        margin: 0 0 4px;
        /* 2-line clamp keeps card heights consistent down the feed. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .blog-card-eyebrow {
        font-size: 0.65rem;
    }
    .blog-card-meta {
        font-size: 0.7rem;
    }

    /* Featured cards stay 2-up but shrink their type so the body is
       readable in the narrower slots. Blurb hidden — at this width
       title + meta carry the card cleanly. */
    .blog-featured-card-body {
        padding: 10px 12px 12px;
    }
    .blog-featured-card-title {
        font-size: 0.95rem;
        line-height: 1.25;
        margin: 4px 0 4px;
    }
    .blog-featured-card-blurb {
        display: none;
    }
    .blog-featured-badge {
        font-size: 0.6rem;
        padding: 1px 6px;
        margin-bottom: 4px;
    }
    .blog-card-placeholder-text {
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 767px) {
    /* Hide the sidebar on phones. Recent Posts duplicates the main
       feed at this width, and Topics is reachable from the eyebrow
       labels on each card. Related-post suggestions belong at the
       bottom of individual article pages (see follow-up). */
    .blog-sidebar {
        display: none;
    }
}

/* --- Sidebar (Topics + Recent Posts) --- */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.blog-sidebar-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 14px 16px 16px;
}
.blog-sidebar-heading {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin: 0 0 10px;
}

.blog-topic-list,
.blog-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-topic-list li,
.blog-recent-list li {
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.blog-topic-list li:first-child,
.blog-recent-list li:first-child {
    border-top: none;
}

.blog-topic-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.92rem;
}
.blog-topic-link:hover {
    color: var(--color-primary);
}
.blog-topic-link.is-active {
    color: var(--color-primary);
    font-weight: 600;
}
.blog-topic-link-count {
    color: var(--color-text-light);
    font-size: 0.8rem;
    background: var(--color-bg);
    padding: 1px 8px;
    border-radius: 999px;
}

.blog-recent-link {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    text-decoration: none;
    color: var(--color-text);
}
.blog-recent-link-title {
    font-size: 0.92rem;
    line-height: 1.3;
}
.blog-recent-link:hover .blog-recent-link-title {
    color: var(--color-primary);
}
.blog-recent-link-date {
    color: var(--color-text-light);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* ============================================================
   Restaurant detail page — #106 redesign
   ------------------------------------------------------------
   Header / carousel / popular items / reviews / guest photos /
   related. Star scale 0-5 via half-step rendering. Uses semantic
   class names (no rmu-* prefix). Obsolete styles for the prior
   layout (.restaurant-summary, .mousedining-cta, .menu-shortcuts,
   .item-carousel-compact, .review-aggregate-row) are scheduled for
   cleanup but stay in place until this design ships.
   ============================================================ */

/* === Stars (shared, used by header + review cards) ===================== */
.stars {
    display: inline-flex;
    gap: 2px;
    vertical-align: middle;
}
.star {
    width: var(--star-size, 18px);
    height: var(--star-size, 18px);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #e1e1e1;
}
.star-full { background: #F5C14E; }
.star-half { background: linear-gradient(90deg, #F5C14E 50%, #e1e1e1 50%); }

/* === btn-external utility ============================================== */
/* Transparent navy outline button — used on CTAs that leave TPF
   (partner links, off-site references). Distinguishes external from
   internal filled .btn-primary CTAs. */
.btn-external {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    background: transparent;
    border: 1.5px solid var(--color-header);
    color: var(--color-header);
    transition: background 0.12s, color 0.12s;
}
.btn-external:hover {
    background: var(--color-header);
    color: var(--color-white);
    border-color: var(--color-header);
}
.btn-external svg {
    flex-shrink: 0;
}

/* === Section 1: Restaurant header ====================================== */
.restaurant-header {
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    margin: 8px 0 16px;
    overflow: hidden;
}
.restaurant-header-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 20px;
    align-items: start;
}
.restaurant-header-left { min-width: 0; }
.restaurant-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.restaurant-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.restaurant-name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-header);
    line-height: 1.15;
}
.restaurant-name-bookmark {
    flex-shrink: 0;
}
.restaurant-location {
    color: var(--color-text-light);
    font-size: 0.92rem;
    margin: 4px 0 8px;
}
.restaurant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.restaurant-tag {
    padding: 3px 9px;
    background: var(--color-bg);
    border-radius: var(--radius-card);
    font-size: 0.78rem;
    color: var(--color-text);
    text-decoration: none;
}
.restaurant-tag:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}
/* Price tag mirrors .badge-price (green pill) so the $/$$/$$$ symbol
   reads the same across the site regardless of which tag system the
   surface uses. */
.restaurant-tag-price {
    background: #E8F5E9;
    color: #2E7D32;
    font-weight: 700;
}
.restaurant-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.restaurant-rating-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-header);
    line-height: 1;
}
.restaurant-rating-count {
    color: var(--color-text-light);
    font-size: 0.85rem;
    padding-left: 4px;
    border-left: 1px solid var(--color-border);
}
.restaurant-reservation {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 10px;
}
.restaurant-reservation-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    font-weight: 700;
}

/* === Section 2: Photo carousel (Option D) ============================== */
.restaurant-carousel-card {
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    margin-bottom: 16px;
    overflow: hidden;
    padding: 0;
}
.restaurant-carousel {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    aspect-ratio: 16/4;
    background: var(--color-bg);
}
.restaurant-carousel-slide {
    position: relative;
    background-size: cover;
    background-position: center;
}
.restaurant-carousel-slide:nth-child(1) {
    grid-row: 1 / span 2;
}
.restaurant-carousel-attribution {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
.restaurant-carousel-attribution:hover {
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-white);
}
/* Share-a-photo tile fills empty cells when image count < 4. Dashed
   border signals "drop content here"; hover state shifts to primary. */
.restaurant-carousel-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-bg);
    border: 2px dashed var(--color-border);
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.restaurant-carousel-share:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.restaurant-carousel-share svg { flex-shrink: 0; }
.restaurant-carousel[data-image-count="0"] .restaurant-carousel-share {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.restaurant-carousel[data-image-count="1"] .restaurant-carousel-share {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
}
.restaurant-carousel[data-image-count="2"] .restaurant-carousel-slide:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.restaurant-carousel[data-image-count="2"] .restaurant-carousel-share {
    grid-column: 3;
    grid-row: 1 / span 2;
}
.restaurant-carousel[data-image-count="3"] .restaurant-carousel-share {
    grid-column: 2 / span 2;
    grid-row: 2;
}

/* === Shared section chrome (header.html + popular + reviews + photos) === */
/* Override the older .restaurant-section rule's top border treatment.
   The new design uses white card containers with no inter-section
   border line. */
.restaurant-section {
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    padding: 16px 18px 18px;
    margin: 0 0 16px;
    border-top: 1px solid var(--color-border);
}
.restaurant-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.restaurant-section-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-header);
}
.restaurant-section > h2:not(.restaurant-section-title) {
    margin: 0 0 12px;
}

/* === Section 3: Popular Items ========================================== */
.popular-items-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.popular-item-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
}
.popular-item-card:hover {
    text-decoration: none;
}
.popular-item-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 6px;
    overflow: hidden;
}
.popular-item-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.popular-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}
.popular-items-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* === Section 4: Reviews ================================================ */
/* Review form section gets a subtle inset bg so it's visually
   distinct from the review list below. */
.review-form-section {
    margin: 0 0 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: 8px;
}
/* Chip picker — capped-multi-select with tone bands. */
.review-chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.review-chip-pick {
    padding: 5px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.review-chip-pick:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.review-chip-pick.is-selected.review-chip-tone-positive {
    background: #C8E6C9;
    border-color: #81C784;
    color: #1B5E20;
}
.review-chip-pick.is-selected.review-chip-tone-negative {
    background: #FFCDD2;
    border-color: #E57373;
    color: #B71C1C;
}
.review-chip-pick.is-selected.review-chip-tone-neutral {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
/* Review list — redefined (the old flat list becomes a vertical stack
   of bordered cards). */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-card {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 14px 16px;
}
.review-card.review-pending {
    border-left: 3px solid var(--color-warning, #d97706);
}
.review-pending-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning, #d97706);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.review-author {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}
.review-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.review-author-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.review-name {
    font-weight: 700;
    color: var(--color-header);
    font-size: 0.95rem;
    text-decoration: none;
}
.review-name:hover {
    color: var(--color-primary);
}
.review-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: #1D9BF0;
    color: var(--color-white);
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}
.review-time {
    color: var(--color-text-light);
    font-size: 0.78rem;
}
.review-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.review-rating-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-header);
}
.review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.review-chip {
    padding: 3px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.review-chip-tone-positive {
    background: #C8E6C9;
    border-color: #81C784;
    color: #1B5E20;
}
.review-chip-tone-negative {
    background: #FFCDD2;
    border-color: #E57373;
    color: #B71C1C;
}
.review-chip-tone-neutral {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
.review-body {
    margin: 6px 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* === Section 6: Related ================================================ */
.restaurant-related-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.restaurant-related-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.restaurant-related-link:hover {
    color: var(--color-primary-dark);
}

/* === Mobile breakpoints ================================================ */
@media (max-width: 700px) {
    .restaurant-header-content {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px;
    }
    .restaurant-header-right {
        align-items: stretch;
        gap: 10px;
        padding-top: 14px;
        border-top: 1px solid var(--color-border);
        width: 100%;
    }
    .restaurant-rating-row { gap: 8px; }
    .restaurant-rating-row .stars { --star-size: 17px; }
    .restaurant-rating-num { font-size: 1.4rem; }
    .restaurant-rating-count { font-size: 0.78rem; }
    .restaurant-reservation {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0;
        gap: 10px;
    }
    .restaurant-reservation-label {
        min-width: 0;
        line-height: 1.2;
    }
    .restaurant-reservation .btn {
        flex-shrink: 0;
    }
    /* Review rating shrinks on mobile so the 18px desktop stars don't
       overflow the card width. */
    .review-rating { gap: 4px; }
    .review-rating-num { font-size: 0.85rem; }
    .review-rating .star {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 768px) {
    /* Popular Items: 6-up grid becomes horizontal scroll strip — all 6
       visible via swipe rather than clipping to fewer. */
    .popular-items-row {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }
    .popular-item-card {
        flex: 0 0 110px;
        scroll-snap-align: start;
    }
    .popular-item-name { font-size: 0.78rem; }
}

@media (max-width: 700px) {
    .restaurant-carousel { aspect-ratio: 16/6; }
    .restaurant-carousel-share {
        font-size: 0.78rem;
        gap: 6px;
        padding: 8px;
    }
    .restaurant-carousel-share svg {
        width: 22px;
        height: 22px;
    }
}

/* Compact restaurant score for listing surfaces (search, homepage,
   park, lists). Number + small stars inline — same visual language
   as the restaurant header just shrunk. Replaces the old colored
   .score-badge for restaurant rows. Use renderStars($score, 12). */
.restaurant-card-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--color-header);
}
.restaurant-card-score strong {
    font-weight: 800;
}

/* ============================================================
   Restaurant menu page — #99 Option B (mirror Disney's sections)
   ------------------------------------------------------------
   Toolbar (meal-period buttons + columns/sort/filters) → optional
   Top Rated carousel → <details> accordions for each Disney sub-
   section → item cards with thumb / main / side three-column
   layout. Replaces the prior Food/Drinks/Snacks bucket layout on
   this surface. Bucket classifier still drives homepage filters +
   search (unchanged elsewhere).
   ============================================================ */

/* === Toolbar (meal entry + view controls) ============================== */
.menu-toolbar {
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--radius-card);
    padding: 12px 16px;
    margin: 16px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.menu-toolbar-meals {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.menu-toolbar-meals-label {
    font-weight: 600;
    color: var(--color-text-light);
}
.menu-toolbar-meal-btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1.5px solid var(--color-primary);
    background: transparent;
    border-radius: 20px;
    color: var(--color-primary);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.menu-toolbar-meal-btn:hover,
.menu-toolbar-meal-btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}
.menu-toolbar-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Columns toggle — segmented pair of icon buttons. Hidden on mobile
   since single-column is forced there. */
.menu-toolbar-cols {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-white);
}
.menu-toolbar-cols-btn {
    border: 0;
    background: transparent;
    padding: 5px 11px;
    cursor: pointer;
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menu-toolbar-cols-btn:hover {
    color: var(--color-primary);
}
.menu-toolbar-cols-btn.is-active {
    background: var(--color-header);
    color: var(--color-white);
}
@media (max-width: 768px) {
    .menu-toolbar-cols { display: none; }
}

/* Sort dropdown — pill shape matching the meal buttons. */
.menu-toolbar-sort {
    padding: 6px 30px 6px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-header);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%23666' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.menu-toolbar-sort:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Filters trigger — same shape as Sort. */
.menu-toolbar-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-header);
}
.menu-toolbar-filters-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.menu-toolbar-filters-btn[aria-expanded="true"] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.menu-toolbar-chevron {
    color: var(--color-text-light);
    font-size: 0.8rem;
    transition: transform 0.15s;
}
.menu-toolbar-filters-btn[aria-expanded="true"] .menu-toolbar-chevron {
    transform: rotate(180deg);
    color: var(--color-white);
}

/* Filter panel — visually merges into the toolbar above when expanded.
   Pairs with .menu-toolbar.is-expanded which flattens the toolbar's
   bottom corners + zeros its bottom margin so the two divs read as
   one container with the filters as a drawer extension. */
.menu-toolbar.is-expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
.menu-filter-panel {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--color-white);
    border: var(--card-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.menu-filter-panel[hidden] { display: none; }
.menu-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.menu-filter-pill-icon {
    font-size: 0.95rem;
}

/* === Top Rated carousel ================================================
   Matches the Popular Items pattern on the restaurant detail page. */
.menu-top-rated {
    margin: 0 0 20px;
}
.menu-top-rated-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.menu-top-rated-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-header);
    margin: 0;
}
.menu-top-rated-hint {
    font-size: 0.75rem;
    color: var(--color-text-light);
}
.menu-top-rated-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}
.menu-top-rated-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    color: var(--color-text);
}
.menu-top-rated-thumb {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    margin-bottom: 6px;
    background-size: cover;
    background-position: center;
}
.menu-top-rated-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: rgba(13, 43, 82, 0.88);
    color: var(--color-white);
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
}
.menu-top-rated-badge svg { flex-shrink: 0; margin-top: 1px; }
.menu-top-rated-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

/* === Sub-section accordions (Disney's structure mirrored) ============== */
.menu-section-block {
    background: var(--color-bg-light);
    border: var(--card-border);
    border-radius: var(--radius);
    margin: 0 0 10px;
    overflow: hidden;
}
.menu-section-block[open] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.menu-section-summary {
    cursor: pointer;
    padding: 12px 16px;
    background: #f3f4f6;
    border-left: 3px solid #cbd0d8;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.15s;
}
.menu-section-summary::-webkit-details-marker { display: none; }
.menu-section-summary:hover { background: #eaecef; }
.menu-section-summary::before {
    content: "▸";
    color: var(--color-text-light);
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.menu-section-block[open] > .menu-section-summary::before {
    transform: rotate(90deg);
}
.menu-section-name {
    font-weight: 700;
    font-size: 1rem;
    flex: 1;
    color: var(--color-header);
}
.menu-section-count {
    color: var(--color-text-light);
    font-size: 0.82rem;
    font-weight: 500;
}
.menu-section-items {
    padding: 4px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}
.menu-toolbar[data-cols="1"] ~ * .menu-section-items,
.menu-toolbar[data-cols="1"] ~ .menu-page-section .menu-section-items {
    grid-template-columns: 1fr;
}
@media (max-width: 768px) {
    .menu-section-items {
        grid-template-columns: 1fr;
    }
}

/* === Item cards ========================================================
   Three-column flex: thumb (LEFT) / main (FLEX) / side (RIGHT). */
.menu-item-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    gap: 16px;
    transition: background 0.12s;
}
.menu-item-card:hover {
    background: rgba(245, 193, 78, 0.08);
}
.menu-section-items .menu-item-card:nth-child(-n+2) {
    border-top: 0;
}
.menu-toolbar[data-cols="1"] ~ * .menu-section-items .menu-item-card:nth-child(-n+2) {
    border-top: 1px solid var(--color-border);
}
.menu-toolbar[data-cols="1"] ~ * .menu-section-items .menu-item-card:first-child {
    border-top: 0;
}
@media (max-width: 768px) {
    .menu-section-items .menu-item-card:nth-child(-n+2) {
        border-top: 1px solid var(--color-border);
    }
    .menu-section-items .menu-item-card:first-child {
        border-top: 0;
    }
}

/* Thumb — colored placeholder when no real image. */
.menu-item-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.menu-item-thumb-empty {
    background: #f3f4f6;
    border: 1px dashed #d8dadf;
}

.menu-item-main {
    flex: 1;
    min-width: 0;
}
.menu-item-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-item-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    min-width: 0;
}
.menu-item-title a {
    color: var(--color-header);
    text-decoration: none;
}
.menu-item-title a:hover {
    color: var(--color-primary);
}
.menu-item-add {
    flex-shrink: 0;
}
.menu-item-desc {
    margin: 0;
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}
.menu-item-tags {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.menu-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: #f3f4f6;
    border-radius: var(--radius-card);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
}

/* Right column — rating badge OR Rate it pill, then price, then note. */
.menu-item-side {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.menu-item-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary-dark);
}
.menu-item-price-note {
    font-size: 0.8rem;
    color: var(--color-text-light);
}
/* === Thumbs-up badge (binary menu-item rating, tone-banded) ============ */
.thumbs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px 6px 10px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.thumbs-badge svg {
    flex-shrink: 0;
    margin-top: -1px;
}
.thumbs-green        { background: #C8E6C9; color: #1B5E20; }
.thumbs-yellow-green { background: #DCEDC8; color: #33691E; }
.thumbs-yellow       { background: #FFF9C4; color: #8D6E00; }
.thumbs-orange       { background: #FFE0B2; color: #BF360C; }
.thumbs-red          { background: #FFCDD2; color: #B71C1C; }

/* "Rate it" pill on items without ratings yet. Same pill geometry as
   the thumbs-badge but with a primary-color outline that invites the
   first vote. Links to the item detail page where the full review
   form lives. */
.menu-rate-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 14px;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.menu-rate-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* === Mobile ============================================================ */
@media (max-width: 600px) {
    .menu-toolbar {
        padding: 10px 12px;
        gap: 10px;
    }
    .menu-toolbar-meals,
    .menu-toolbar-controls {
        width: 100%;
        margin-left: 0;
    }
    .menu-toolbar-meal-btn {
        flex: 1;
        text-align: center;
        padding: 6px 10px;
    }
    .menu-toolbar-controls {
        justify-content: space-between;
    }
    .menu-toolbar-sort { flex: 1; }
    .menu-filter-panel {
        flex-direction: column;
        align-items: stretch;
    }
    .menu-item-card {
        padding: 10px 10px;
        gap: 10px;
    }
    .menu-item-thumb {
        width: 48px;
        height: 48px;
    }
}

/* Prix-fixe / buffet / character-dining pricing banner. Surfaces the
   per-person price + any menu-level note above the sections, so users
   understand the pricing context before scanning items (most of which
   don't carry individual prices in these models). */
.menu-pricing-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 16px;
    background: var(--color-primary-tint, #fff5f3);
    border: 1px solid rgba(255, 90, 71, 0.25);
    border-radius: 8px;
    font-size: 0.92rem;
}
.menu-pricing-banner-tag {
    padding: 2px 10px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.menu-pricing-banner-price {
    font-weight: 700;
    color: var(--color-primary-dark);
}
.menu-pricing-banner-note {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    font-size: 0.88rem;
}