/* Base Styles - Shared across all destinations */
/* Theme colors are injected by engine.js via CSS variables */

:root {
    --primary-color: #EC700B;
    --accent-color: #f5a142;
    --bg-color: #fff3cd;
    --card-bg: #ffffff;
    --text-color: #555555;
    --font-scale: 1;
}

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

body {
    font-family: 'Varela Round', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-bottom: 80px;
    min-height: 100vh;
}

/* RTL Support */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="ltr"] body {
    text-align: left;
}

/* Loading Screen */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Screen */
.error-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: 20px;
}

.error-screen h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.error-screen p {
    color: var(--text-color);
    margin-bottom: 20px;
}

.error-screen button {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    transition: all 0.3s;
}

.error-screen button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

/* Accessibility */
.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;
}

/* Focus States */
a:focus,
button:focus,
input:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Countdown Banner */
.countdown-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    text-align: center;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 15px;
    margin: 15px 15px 0 15px;
    box-shadow: 0 4px 15px rgba(236, 112, 11, 0.3);
}

.countdown-banner p {
    margin: 0;
}

.countdown-banner.during-trip {
    background: linear-gradient(135deg, #28a745 0%, #5cb85c 100%);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* ==================== FLOATING CONTROLS ==================== */
.floating-controls {
    position: fixed;
    bottom: 90px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 999;
}

.floating-btn {
    width: 42px;
    height: 42px;
    background: rgba(85, 85, 85, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-btn:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

/* Font size controls */
.font-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.font-btn {
    width: 36px;
    height: 36px;
    background: rgba(85, 85, 85, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

.font-btn:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

.font-btn:active {
    transform: scale(0.95);
}

.font-btn.font-increase {
    font-size: 16px;
}

.font-btn.font-decrease {
    font-size: 12px;
}

/* print button is now a .floating-btn inside .floating-controls */

/* Font scaling support - applies to main content */
.container {
    font-size: calc(1rem * var(--font-scale, 1));
}

/* Ensure key text scales properly */
.day-content,
.info-card,
.tip-card,
.hotel-card,
.timeline-item {
    font-size: calc(1em * var(--font-scale, 1));
}

.day-header h3 {
    font-size: calc(1.15em * var(--font-scale, 1));
}

.section-title {
    font-size: calc(1.6em * var(--font-scale, 1));
}

.desc,
.day-intro p,
.timeline-item .desc {
    font-size: calc(0.95em * var(--font-scale, 1));
    line-height: 1.7;
}

/* ==================== PRINT STYLES ==================== */
@media print {
    /* Hide interactive/non-essential elements */
    .floating-controls,
    .floating-btn,
    .font-controls,
    .font-btn,
    .pwa-banner,
    .countdown-banner,
    .quick-links,
    .theme-selector,
    .mini-edit-btn,
    .edit-hint,
    .upload-area,
    .upload-box,
    .expense-form,
    .emergency-form,
    .add-item-container,
    .book-toggle,
    .btn,
    button:not(.day-header),
    #pwa-install-banner,
    .tips-accordion-close,
    .accordion-close-x,
    .agent-branding {
        display: none !important;
    }

    /* Hide non-itinerary tabs - ONLY show itinerary */
    #tickets-tab,
    #expenses-tab,
    #tips-tab,
    #emergency-tab {
        display: none !important;
    }

    /* Show itinerary tab always */
    #itinerary-tab {
        display: block !important;
    }

    /* Reset page margins - smaller for more content per page */
    @page {
        margin: 1cm;
        size: A4;
    }

    /* Reset body for print - larger font for older readers */
    body {
        background: white !important;
        color: black !important;
        padding: 0 !important;
        font-size: 12pt !important;
    }

    /* Container full width */
    .container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Header styling for print - NO background image, just compact text */
    header {
        background: var(--primary-color) !important;
        background-image: none !important;
        border-radius: 0 !important;
        padding: 15px 20px !important;
        min-height: auto !important;
        height: auto !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    header h1 {
        font-size: 1.5em !important;
        margin-bottom: 5px !important;
    }

    header .subtitle {
        font-size: 1em !important;
        margin-bottom: 0 !important;
    }

    /* CRITICAL: Prevent page breaks inside content blocks */
    .info-card,
    .day-card,
    .tip-card,
    .hotel-card,
    .hotel-box,
    .travelers-card,
    .timeline-item,
    .expense-item,
    .checklist-item,
    .phrases-card,
    .phrase-item,
    .emergency-number,
    .emergency-contact-item,
    .document-item,
    .day-intro,
    .tip-box,
    .day-options-box,
    .bookable-item,
    .embassy-info,
    .blog-card,
    .category-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Expand all day cards for printing - compact layout */
    .day-card .day-content {
        max-height: none !important;
        overflow: visible !important;
        padding: 10px 15px !important;
    }

    /* Hide day hero images in print to save ink */
    .day-hero {
        display: none !important;
    }

    /* Day cards - ALLOW page breaks inside for continuous flow */
    .day-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 10px !important;
        /* NO page-break-inside: avoid - allows content to flow continuously */
    }

    /* Expand all accordions */
    .tips-accordion .tips-accordion-content {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Day header - compact for print */
    .day-header {
        cursor: default !important;
        border-bottom: 1px solid #eee !important;
        padding: 10px 15px !important;
    }

    .day-header h3 {
        font-size: 1.1em !important;
        margin: 0 !important;
    }

    .day-header .day-location {
        font-size: 0.9em !important;
        margin-top: 3px !important;
    }

    .day-header i {
        display: none !important;
    }

    /* Info cards - compact for print */
    .info-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-before: auto;
        margin-bottom: 10px !important;
        padding: 10px 15px !important;
    }

    /* Day intro and tip boxes - compact */
    .day-intro,
    .tip-box,
    .day-options-box {
        margin: 8px 0 !important;
        padding: 8px 12px !important;
    }

    /* Images for print - hide attraction images, keep small hotel image */
    .attraction-img {
        display: none !important;
    }

    .hotel-image {
        max-height: 120px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Timeline improvements - compact */
    .timeline-item {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
    }

    /* Travelers card */
    .travelers-card {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* Section titles - keep with content */
    .section-title,
    h2,
    h3,
    h4 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* Links - show URL for important links */
    .hotel-buttons a::after,
    .btn-primary::after {
        content: none !important;
    }

    /* Tab content - show itinerary tab */
    .tab-content {
        display: none !important;
    }

    .tab-content#itinerary-tab {
        display: block !important;
    }

    /* Footer - compact */
    footer {
        margin-top: 10px !important;
        padding: 10px !important;
        border-top: 1px solid #ddd !important;
        background: white !important;
        page-break-before: avoid;
        font-size: 0.9em !important;
    }

    /* Hotel boxes - more compact */
    .hotel-box {
        margin-bottom: 8px !important;
        padding: 10px !important;
    }

    /* Colors for print */
    .day-header h3,
    .info-card h3,
    .tip-card h4,
    .section-title {
        color: var(--primary-color) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve backgrounds */
    .day-intro,
    .tip-box,
    .day-options-box,
    .info-item,
    .tip-card,
    .hotel-box,
    .phrase-item,
    .emergency-number,
    .checklist-item {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background: #f9f9f9 !important;
    }

    /* Border colors */
    .day-header,
    .info-item,
    .day-intro,
    .tip-box,
    .day-options-box,
    .tip-card,
    .timeline-item {
        border-right-color: var(--primary-color) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ==================== IMPROVED PRINT READABILITY FOR OLDER READERS ==================== */

    /* Larger, more readable text for descriptions */
    .desc,
    .day-intro p,
    .timeline-item .desc,
    .info-item p {
        font-size: 12pt !important;
        line-height: 1.8 !important;
    }

    /* Activity titles more prominent */
    .timeline-item h4 {
        font-size: 13pt !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    /* Time stamps clear and readable */
    .time {
        font-size: 12pt !important;
        font-weight: 700 !important;
    }

    /* Day headers more prominent */
    .day-header h3 {
        font-size: 14pt !important;
        font-weight: 700 !important;
    }

    .day-header span {
        font-size: 11pt !important;
    }

    /* Section titles */
    .section-title {
        font-size: 16pt !important;
        font-weight: 700 !important;
        margin: 15px 0 !important;
    }

    /* Day intro title */
    .day-intro h4 {
        font-size: 13pt !important;
        font-weight: 700 !important;
    }

    /* Tip boxes readable */
    .tip-box,
    .day-options-box {
        font-size: 11pt !important;
        padding: 12px !important;
        line-height: 1.7 !important;
    }

    /* Hotel details */
    .hotel-details h4 {
        font-size: 13pt !important;
    }

    .hotel-notes {
        font-size: 11pt !important;
        line-height: 1.7 !important;
    }

    /* Map links - hide in print as they're not clickable */
    .map-btn,
    a[href*="maps.google"] {
        display: none !important;
    }

    /* Reduce visual noise - hide decorative images */
    .day-hero {
        display: none !important;
    }

    /* Better spacing between days */
    .day-card {
        margin-bottom: 25px !important;
    }

    /* Traveler names */
    .traveler {
        font-size: 11pt !important;
        padding: 8px 12px !important;
    }

    /* Print header with trip info */
    header h1 {
        font-size: 18pt !important;
    }

    header .subtitle {
        font-size: 12pt !important;
    }
}

/* ==================== HEADER ==================== */
/* Maya 2026-05-29 round 4 — TRUE glass row. Earlier rounds left a 100%-
   opacity gradient under everything (an inline-style override that won the
   cascade). The engine no longer injects an inline background; this CSS
   alone drives the surface. A translucent primary-color tint + heavy
   backdrop blur make the row genuinely glassy — the page content below
   shimmers through as you scroll. The flag overlay stays subtle (see the
   ::before rule). White poster-title with strong shadow keeps readable
   over the tinted glass on every theme.
*/
header {
    /* Round 8 (Maya 2026-05-30) — translucent theme color, no blur, no
       white. Zero backdrop-filter means zero milkiness. The translucent
       primary-color gradient lets page content sharp-show through (real
       glass, not frosted). Flag at 30% opacity sits on top. */
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb, 236, 112, 11), 0.78) 0%,
        rgba(var(--primary-color-rgb, 236, 112, 11), 0.65) 100%);
    color: white;
    text-align: center;
    /* Maya 2026-06-16: vertical padding tightened from 28→18 (desktop) +
       title size 1.95em→1.7em so the header takes ~30% less vertical
       real estate without losing legibility. */
    padding: 18px 90px 18px 25px;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900;
    overflow: hidden;
}
header h1 {
    font-size: 1.7em;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.18;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55),
                 0 0 24px rgba(0, 0, 0, 0.28);
}
header p.subtitle {
    font-size: 0.92em;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* When the side drawer is open, hide the sticky header so the drawer's own
   logo+name+dates is the only top-of-page element (Maya 2026-05-29).
   `display:none` removes it from flow → drawer is the topmost thing. */
body.nav-open > #app > header,
body.nav-open header {
    display: none !important;
}

/* Flag overlay — Maya 2026-06-18. REVERTED the opaque white-backed flag
   layer (added 2026-06-16) that made the header read as a milky OPAQUE panel
   with "glass on top" instead of the header itself being glass. The header's
   own translucent primary-colour gradient (see `header` above) IS the glass;
   the flag must be a SUBTLE TRANSLUCENT wash on top of it, so page content
   shows through and the header reads as real glass.
   No #ffffff backdrop, no heavy white wash, low opacity → translucent. */
header[data-flag]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--flag-bg) center/cover no-repeat;
    opacity: 0.28;          /* subtle flag tint — header stays glass */
    z-index: 0;
    pointer-events: none;
    /* Keep the flag's own colours (no theme filter/blend tinting it). */
    filter: none;
    mix-blend-mode: normal;
    isolation: isolate;
}

header > * {
    position: relative;
    z-index: 1;
}

/* Glasses connection indicator (Maya 2026-06-20) — subtle, always-on icon in
   the header. White when connected; dimmed with a fine diagonal slash when the
   glasses are not connected. Sits on the left, mirroring the hamburger. */
.glasses-status {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.35s ease, opacity 0.35s ease;
}
.glasses-status .fa-glasses {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.glasses-status.connected {
    color: #fff;
    opacity: 0.98;
}
.glasses-status.disconnected {
    color: rgba(255, 255, 255, 0.6);
    opacity: 0.9;
}
/* Fine diagonal slash, only when disconnected. */
.glasses-status.disconnected::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

h1 {
    margin: 0;
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 1px;
}

p.subtitle {
    margin: 8px 0 0;
    font-size: 1.1em;
    opacity: 0.95;
}

.agent-branding {
    margin-top: 15px;
    font-size: 0.9em;
    background: rgba(255,255,255,0.25);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
}

/* ==================== CONTAINER ==================== */
.container {
    max-width: 700px;
    /* Negative margin removed (Maya 2026-05-29) — used to tuck the first
       card under the rounded header bottom, but with sticky header that
       permanently overlapped 20px of content. Now content starts cleanly
       below the header. */
    margin: 12px auto 0;
    padding: 0 15px;
    position: relative;
    z-index: 10;
}

/* ==================== QUICK LINKS NAVIGATION ==================== */
.quick-links {
    display: flex;
    justify-content: space-between;
    background: var(--card-bg);
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.q-link {
    text-align: center;
    flex: 1;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85em;
    transition: all 0.3s;
}

.q-link:hover { color: var(--primary-color); }
.q-link.active { color: var(--primary-color); }
.q-link.active i { filter: drop-shadow(0 0 4px rgba(var(--primary-color-rgb, 236, 112, 11), 0.25)); }
.q-link i {
    display: block;
    font-size: 1.5em;
    color: var(--primary-color);
    margin-bottom: 6px;
}

/* ==================== TAB CONTENT ==================== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==================== SECTION TITLE ==================== */
.section-title {
    font-size: 1.6em;
    color: var(--primary-color);
    text-align: center;
    margin: 30px 0 20px;
    font-weight: 700;
}

/* ==================== INFO CARD ==================== */
.info-card {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.info-card h3 {
    font-size: 1.2em;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item {
    background: var(--bg-color);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 12px;
    border-right: 4px solid var(--primary-color);
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item h4 {
    font-size: 1em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.info-item p {
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--text-color);
}

/* ==================== TRAVELERS CARD ==================== */
/* Lives inside Settings tab now — uses the normal card surface so the
   text stays legible in every theme (Maya 2026-05-28). The white-on-gradient
   look only worked in dark mode; the light themes (ocean, sunset, cream)
   washed the text out. */
.travelers-card {
    background: var(--card-bg);
    color: var(--text-color);
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    text-align: center;
}

.travelers-card h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.travelers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.traveler {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.10);
    color: var(--text-color);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.95em;
    border: 1px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.22);
}

/* ==================== DESTINATION SUMMARY TABLE ==================== */
/* ==================== DESTINATION SUMMARY TABLE ==================== */
.dest-summary-table {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.dest-summary-row {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background 0.2s ease;
}

.dest-summary-row:last-child {
    border-bottom: none;
}

.dest-summary-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.dest-summary-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.dest-summary-row:nth-child(even):hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Top line: city | nights | dates */
.dest-summary-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dest-summary-name {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--primary-color);
}

.dest-summary-name strong {
    color: #333;
    font-weight: 700;
}

.dest-summary-dates {
    font-size: 0.92em;
    color: #333;
    flex-shrink: 0;
    direction: ltr;
    text-align: left;
}

.dest-summary-dates strong {
    font-weight: 700;
    color: #333;
}

/* Description line below */
.dest-summary-desc {
    margin-top: 4px;
    font-size: 0.88em;
    color: #777;
    line-height: 1.4;
}

/* ==================== DAY CARD (ACCORDION) ==================== */
.day-card {
    background: var(--card-bg);
    margin-bottom: 15px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.day-header {
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-right: 5px solid var(--primary-color);
}

.day-header h3 {
    margin: 0;
    font-size: 1.15em;
    color: var(--primary-color);
}

.day-header span {
    font-size: 0.9em;
    color: #777;
    display: block;
    margin-top: 5px;
}

.day-header i {
    color: var(--primary-color);
    transition: transform 0.3s;
}

.day-content {
    max-height: 0;
    overflow: hidden;
    background: var(--card-bg);
    padding: 0 22px;
    transition: max-height 0.4s ease-out, padding 0.3s;
    border-top: 1px solid #f0f0f0;
    position: relative;
}

/* Expanded State */
.day-card.active .day-content {
    max-height: 5000px;
    padding: 22px;
}

.day-card.active .day-header i { transform: rotate(180deg); }
.day-card.active { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

/* Day hero image */
.day-hero {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 15px;
    margin-bottom: 20px;
}

/* Attraction image */
.attraction-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    margin: 10px 0;
}

/* Day intro */
.day-intro {
    background: var(--bg-color);
    padding: 18px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-right: 4px solid var(--primary-color);
}

.day-intro h4 {
    color: var(--primary-color);
    font-size: 1.05em;
    margin-bottom: 10px;
}

.day-intro p {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-color);
}

/* ==================== TIMELINE ==================== */
.timeline-item {
    position: relative;
    padding-right: 25px;
    margin-bottom: 22px;
    border-right: 2px solid var(--bg-color);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    right: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
}

.time {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.95em;
}

.activity {
    font-weight: 700;
    margin: 6px 0;
    color: #333;
    font-size: 1.05em;
}

.desc {
    font-size: 0.92em;
    color: var(--text-color);
    line-height: 1.65;
}

/* Loop Tour Banner */
.loop-tour-banner {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
    border-right: 4px solid #3498db;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 15px 0;
    font-size: 0.92em;
    line-height: 1.65;
}

.loop-tour-header {
    font-size: 1em;
    color: #1a6a9a;
    margin-bottom: 8px;
}

.loop-tour-body p {
    margin: 4px 0;
    color: #2c3e50;
}

.tip-box {
    background: var(--bg-color);
    border-right: 4px solid var(--primary-color);
    padding: 15px;
    font-size: 0.9em;
    margin-top: 15px;
    border-radius: 10px;
    line-height: 1.6;
}

.tip-box strong {
    color: var(--primary-color);
}

.crowd-warning-box {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border-right: 4px solid #f9a825;
    padding: 15px;
    font-size: 0.9em;
    margin-top: 12px;
    border-radius: 10px;
    line-height: 1.6;
}

.crowd-warning-box strong {
    color: #e65100;
}

.day-options-box {
    background: var(--bg-color);
    border-right: 4px solid #e67e22;
    padding: 15px;
    font-size: 0.9em;
    margin-top: 15px;
    border-radius: 10px;
    line-height: 1.6;
}

/* ==================== BUTTONS (unified design — Maya 2026-05-05c) ====
   The new system, derived from Story Mode's design language:
     - Rounded rectangle CTAs (radius 10px, NOT pill-shape)
     - Filled orange for primary actions, soft gray for secondary
     - Light lift + glow shadow on hover (subtle, not jumpy)
     - Single inline icon supported via inline <i> or text glyph
   Older pill-shape `border-radius: 50px` removed — Maya: the booking
   button looked like "a disconnected cube". This brings every CTA in
   the app into the same family as the .sm-add-custom / .sm-backup-btn
   buttons. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-color);
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.92em;
    margin-top: 12px;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(236, 112, 11, 0.18);
}

.btn:hover {
    background: var(--accent-color);
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 112, 11, 0.25);
}
.btn:active { transform: translateY(0); }

/* Allow explicit overrides via inline style="background:var(--accent-color)"
   (yellow "הזמן" button etc.) — still inherits the rounded-rect shape. */
.btn[style*="accent-color"] { color: #333; }
.btn[style*="accent-color"]:hover { background: var(--primary-color); color: #fff; }

.btn i { margin-inline-start: 0; }

.btn-primary {
    background: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background: var(--accent-color);
    color: #333;
    transform: translateY(-1px);
}

/* Secondary: outlined, neutral. Same shape & sizing as .btn-primary so
   they line up perfectly side-by-side. */
.btn-secondary {
    background: #fff;
    color: #555;
    border: 1.5px solid #dee2e6;
    box-shadow: none;
}
.btn-secondary:hover {
    background: #f8f9fa;
    color: #333;
    border-color: #c8cdd3;
}

/* Small variant for compact toolbars (e.g. inside cards) */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.85em;
    border-radius: 8px;
    margin-top: 0;
}

/* ==================== HOTEL CARD ==================== */
.hotel-card {
    background: var(--bg-color);
    border-radius: 15px;
    margin: 25px 0;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.hotel-card h3 {
    font-size: 1.1em;
    color: var(--primary-color);
    padding: 15px 20px;
    background: rgba(0,0,0,0.03);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotel-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

.hotel-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

.hotel-details h4 {
    font-size: 1.25em;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.hotel-notes {
    font-size: 0.95em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px;
}

.hotel-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hotel Box (simple) */
.hotel-box {
    background: var(--bg-color);
    padding: 18px;
    border-radius: 15px;
    margin: 15px 0;
}

.hotel-box h4 {
    color: var(--primary-color);
    font-size: 1em;
    margin-bottom: 8px;
}

.hotel-box p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* Action-button row inside .hotel-box (day-card inline hotel). Matches
   .lodging-card-actions so buttons look identical across both contexts.
   Maya 2026-05-12: every hotel button across the system uses the same
   .btn / .btn-secondary family. */
.hotel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    align-items: center;
}
.hotel-actions .btn { margin-top: 0; }

/* ==================== HOTEL BOOKED BADGE ==================== */
.hotel-booked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.75em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #a5d6a7;
    vertical-align: middle;
    margin-inline-start: 6px;
}
.hotel-booked-badge i {
    font-size: 0.9em;
}
.hotel-booked {
    border-inline-start: 3px solid #4caf50;
}
.lodging-booked {
    border-inline-start: 3px solid #4caf50;
}

/* ==================== CANCELLATION POLICY ==================== */
.cancellation-policy-section,
.pricing-summary-section {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}
.cancellation-policy-section .section-title,
.pricing-summary-section .section-title {
    text-align: center;
    margin-bottom: 20px;
}
.cancel-deposit {
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-weight: 500;
    color: #e65100;
}
.cancel-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.cancel-tier {
    background: var(--bg-color, #f9f9f9);
    border-radius: 12px;
    padding: 14px 18px;
    border-inline-start: 4px solid var(--primary-color, #2196f3);
}
.cancel-tier-range {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--primary-color, #2196f3);
}
.cancel-tier-charge {
    font-size: 0.92em;
    line-height: 1.5;
}
.cancel-notes {
    font-size: 0.9em;
    padding-inline-start: 20px;
    margin-bottom: 12px;
    line-height: 1.6;
}
.cancel-force-majeure {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 10px;
    font-size: 0.92em;
    line-height: 1.6;
}
.cancel-special {
    font-size: 0.85em;
    color: #777;
    text-align: center;
    margin-top: 8px;
}

/* ==================== PRICING SUMMARY ==================== */
.pricing-card {
    background: linear-gradient(135deg, var(--primary-color, #2196f3), #1565c0);
    color: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 12px;
}
.pricing-total {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.pricing-total .pricing-amount {
    font-size: 2em;
    font-weight: 700;
}
.pricing-total .pricing-label {
    font-size: 0.95em;
    opacity: 0.9;
}
.pricing-per-person {
    font-size: 0.95em;
    opacity: 0.85;
}
.pricing-contact {
    text-align: center;
    font-size: 0.9em;
    color: #777;
}
.pricing-contact a {
    color: var(--primary-color, #2196f3);
}

/* ==================== FOOTER ==================== */
/* Glass surface (Maya 2026-05-28) — translucent so the cream page tint
   shows through, no more harsh white block at the bottom. */
footer {
    text-align: center;
    padding: 30px 20px;
    font-size: 0.85em;
    color: var(--text-color, #555);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px 20px 0 0;
    margin-top: 30px;
}
/* Sticky footer (Maya 2026-06-19) — keep the footer pinned to the bottom of
   the viewport even when a tab's content is short (e.g. "הסיפור שלי" with few
   photos), instead of floating mid-page. Flex column centres the content
   column while header/footer stay full width. */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
}
#app > header,
#app > footer,
#app > #pwa-install-banner { width: 100%; }
#app > .container { width: 100%; flex: 1 0 auto; }
html[data-theme="dark"] footer {
    background: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

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

/* Footer block (Maya 2026-05-29 round 2) — simpler one-stack layout:
   custom-route line → copyright → privacy/terms links.
   No "created by" line and no separator dot between the legal links. */
.footer-custom {
    color: var(--text-color, #555);
    opacity: 0.9;
    font-size: 0.92em;
    margin-bottom: 14px;
}
.footer-copyright {
    color: var(--text-color, #555);
    opacity: 0.8;
    font-size: 0.85em;
    margin-bottom: 6px;
}
.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 28px;
    font-size: 0.85em;
}
.footer-legal-links a {
    color: var(--primary-color);
    text-decoration: none;
}
.footer-legal-links a:hover {
    text-decoration: underline;
}

/* Blog card — same glass surface as footer (Maya 2026-05-28). */
.blog-info-card {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* Centered title for "מאמרים בבלוג" (Maya 2026-05-29) */
.blog-info-card h3 {
    justify-content: center;
    text-align: center;
}
html[data-theme="dark"] .blog-info-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10);
}

/* ==================== PWA BANNER ==================== */
.pwa-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-gradient);
    padding: 15px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.pwa-banner p {
    color: white;
    margin: 0 0 10px 0;
    font-size: 1em;
}

.pwa-close-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255,255,255,0.3);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.pwa-install-btn {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* ==================== MOBILE RESPONSIVENESS ==================== */
@media (max-width: 768px) {
    header { padding: 16px 18px; }
    h1 { font-size: 1.4em; }
    p.subtitle { font-size: 0.88em; }
    .container { padding: 0 10px; }
    .section-title { font-size: 1.35em; }
    .info-card { padding: 18px; }
    .day-header { padding: 18px; }
    .day-header h3 { font-size: 1.05em; }
    .day-card.active .day-content { padding: 18px; }
    .travelers-list { gap: 8px; }
    .traveler { padding: 8px 14px; font-size: 0.85em; }
    .flight-divider img { max-width: 180px; }
    .day-hero { height: 180px; }
    .attraction-img { height: 150px; }

    .quick-links {
        flex-wrap: wrap;
        gap: 5px;
    }

    .q-link {
        flex: 0 0 30%;
        margin-bottom: 10px;
    }

    .hotel-content {
        flex-direction: column;
    }
}

@media (min-width: 600px) {
    .hotel-content {
        flex-direction: row;
    }
    .hotel-image {
        flex: 0 0 200px;
        height: auto;
    }
    .hotel-details {
        flex: 1;
    }
}

@media (min-width: 768px) {
    .day-hero {
        height: 280px;
        object-position: center 40%;
    }
    .attraction-img {
        height: 200px;
    }
}

/* ==================== FORM STYLES ==================== */
/* Universal form input styles */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
select {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1em;
    font-family: inherit;
    background: #f8f9fa;
    color: var(--text-color);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 236, 112, 11), 0.1);
    outline: none;
}

input::placeholder {
    color: #999;
}

/* ==================== EXPENSE STYLES ==================== */
.expense-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expense-form input,
.expense-form select {
    margin: 0;
}

.expense-summary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
    color: white;
}

.expense-summary h3 {
    color: white !important;
}

.expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 10px;
    border-right: 4px solid var(--primary-color);
}

.expense-item:last-child {
    margin-bottom: 0;
}

.expense-item .expense-info {
    flex: 1;
}

.expense-item .expense-category {
    font-size: 1.5em;
    margin-left: 10px;
}

.expense-item .expense-desc {
    font-weight: 700;
    color: #333;
}

.expense-item .expense-amount {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1em;
}

.expense-item .delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
}

.expense-item .delete-btn:hover {
    background: #c82333;
}

/* ==================== CURRENCY CONVERTER STYLES ==================== */
.currency-converter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.currency-converter input {
    flex: 1;
    min-width: 100px;
}

.currency-converter select {
    flex: 0 0 120px;
}

.currency-converter span {
    font-size: 1.2em;
    color: var(--primary-color);
    font-weight: 700;
}

.currency-converter .btn {
    flex: 0 0 auto;
}

.convert-result {
    background: var(--bg-color);
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* ==================== TIP CALCULATOR STYLES ==================== */
.tip-calculator {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tip-calculator input {
    width: 100%;
}

.tip-btn {
    background: var(--bg-color) !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

.tip-btn:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* ==================== TIPS ACCORDION STYLES ==================== */
.tips-accordion {
    background: var(--card-bg);
    margin-bottom: 15px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.tips-accordion-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
}

.tips-accordion-header h3 {
    margin: 0;
    /* 1.2em matches .general-tips-name + .culinary-name + .city-tips-name —
       Maya 2026-05-28: 'לפני שממריאים' / 'בשטח' rows now visually identical
       to the rest of the Like-a-Local tab blocks. */
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-accordion-header i.toggle-icon {
    transition: transform 0.3s;
}

/* Direct-child (>) so an OPEN accordion does NOT force its NESTED accordions
   open too (Maya 2026-06-19). With a descendant selector, opening "צ'ק ליסטים
   לאריזה" was expanding every packing category inside it. */
.tips-accordion.active > .tips-accordion-header .toggle-icon {
    transform: rotate(180deg);
}

.tips-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.tips-accordion.active > .tips-accordion-content {
    max-height: 10000px;
}

.tips-accordion-inner {
    padding: 15px;
    position: relative;
    padding-bottom: 50px;
}

.tips-accordion-close {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 28px;
    height: 28px;
    background: rgba(85, 85, 85, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Add-your-own-item row at the bottom of each packing-list category.
   Pattern copied from the nativ project (Maya 2026-05-28). */
.add-item-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.add-item-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95em;
    background: var(--card-bg, #fff);
    color: var(--text-color);
}
.add-item-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 236, 112, 11), 0.15);
}
.add-item-btn {
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.add-item-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); }

/* X to delete a custom-added checklist item. Built-in items don't get it. */
.delete-item {
    margin-right: 8px;
    color: #c0392b;
    font-size: 0.85em;
    cursor: pointer;
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
}
.delete-item:hover { opacity: 1; background: rgba(192, 57, 43, 0.08); }
html[data-theme="dark"] .add-item-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--text-color);
}

.tips-accordion-close:hover {
    background: rgba(85, 85, 85, 0.9);
    transform: scale(1.1);
}

/* ==================== GUIDE TAB — FULL REDESIGN ==================== */

/* Wrapper */
.guide-wrapper {
    padding: 0;
}

/* ── Detail view header (back btn + title) ───────────────────────── */
.guide-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 18px;
    position: sticky;
    top: 60px;
    background: var(--bg-color, #fff);
    z-index: 40;
}

.guide-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid var(--primary-color, #EC700B);
    border-radius: 20px;
    background: transparent;
    color: var(--primary-color, #EC700B);
    font-size: 0.85em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.guide-back-btn:hover {
    background: var(--primary-color, #EC700B);
    color: #fff;
}

.guide-detail-title {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text-color, #333);
}

/* ── Overview grid: 2×2 visual cards ────────────────────────────── */
.guide-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 10px;
}

.guide-cat-card {
    border-radius: 18px;
    padding: 24px 16px 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    color: #fff;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    min-height: 150px;
    justify-content: center;
    user-select: none;
}

.guide-cat-card:hover, .guide-cat-card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

.guide-cat-card-emoji {
    font-size: 2.4em;
    line-height: 1;
}

.guide-cat-card-name {
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.25;
}

.guide-cat-card-meta {
    margin-top: 4px;
}

.guide-cat-card-badge {
    display: inline-block;
    background: rgba(255,255,255,0.28);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.75em;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.guide-cat-badge-done {
    background: rgba(255,255,255,0.45);
}

/* ── City sub-accordions in detail view ──────────────────────────── */
.guide-cat-detail {
    padding-top: 4px;
}

.guide-city-accordion {
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}

.guide-city-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-color, #333);
    background: var(--card-bg, #fff);
}

.guide-city-accordion-header span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: var(--primary-color, #EC700B);
}

.guide-city-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--primary-color, #EC700B);
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
}

.guide-city-chevron {
    transition: transform 0.25s;
    color: #999;
    flex-shrink: 0;
}

.guide-city-accordion.active .guide-city-chevron {
    transform: rotate(180deg);
}

.guide-city-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.guide-city-accordion.active .guide-city-accordion-content {
    max-height: 20000px;
}

/* Story grid within a city */
.guide-city-stories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 14px 14px 0;
}

/* Story card body (new layout with body wrapper) */
.story-card-body {
    padding: 14px;
}

/* Full-width story image (in detail view) */
.story-card-image-full {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    display: block;
}

/* Mid-accordion close button (distributed every 5 stories) */
.guide-city-close-mid {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: rgba(0,0,0,0.04);
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 0.82em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    margin: 4px 0;
}

.guide-city-close-mid:hover {
    background: rgba(0,0,0,0.09);
}

/* Bottom close button */
.guide-city-close-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 28px);
    margin: 12px 14px 14px;
    padding: 10px;
    background: rgba(0,0,0,0.04);
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 0.82em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.guide-city-close-bottom:hover {
    background: rgba(0,0,0,0.09);
}

/* ── Heard empty state ───────────────────────────────────────────── */
.guide-heard-empty {
    text-align: center;
    color: #aaa;
    font-size: 0.9em;
    padding: 30px 20px;
    font-style: italic;
}

/* ── Heard count badge on overview card ──────────────────────────── */
.guide-heard-count {
    /* inherits guide-cat-card-badge styles */
}

/* ═══════════════ GUIDE TAB v3 — FILTER + FLAT LAYOUT ═══════════════ */

/* ── Today banner ─────────────────────────────────────────────── */
.guide-today-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff8f0, #ffe8d4);
    border: 1px solid rgba(236,112,11,0.25);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.95em;
    font-weight: 600;
    color: #b85500;
    gap: 10px;
    flex-wrap: wrap;
}
.guide-today-btn {
    background: var(--primary-color, #EC700B);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.guide-today-btn:hover { opacity: 0.85; }

/* ── Guide filters — multi-select dropdowns (Maya 2026-05-29) ─────────
   Replaces the old gray chips with two clean dropdowns themed to the
   trip's primary color. Each dropdown is a <details> element that
   collapses to a single line and expands into a checkbox list. */
.guide-filters {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}
.guide-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
/* Free-text search over the stories index (Maya 2026-06-16) */
.guide-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.guide-search-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--primary-color, #EC700B);
    font-size: 0.9em;
    pointer-events: none;
}
.guide-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 12px;   /* room for the icon on the right (RTL) */
    border: 1px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.3);
    border-radius: 10px;
    background: var(--bg-soft, #faf7f3);
    color: var(--text-color, #222);
    font-family: inherit;
    font-size: 0.95em;
}
.guide-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #EC700B);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 236, 112, 11), 0.12);
}
html[data-theme="dark"] .guide-search-input {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color, #eee);
}
.guide-dropdown {
    flex: 1 1 200px;
    background: var(--bg-color, #fff8e1);
    border: 1.5px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.22);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-dropdown[open] {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
}
.guide-dropdown-head {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-color);
    user-select: none;
}
.guide-dropdown-head::-webkit-details-marker { display: none; }
.guide-dropdown-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
}
.guide-dropdown-title i { font-size: 0.95em; }
.guide-dropdown-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.10);
    color: var(--primary-color);
    font-size: 0.82em;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.guide-dropdown-count.active {
    background: var(--primary-color);
    color: #fff;
}
.guide-dropdown-arrow {
    color: var(--primary-color);
    font-size: 0.9em;
    transition: transform 0.25s ease;
}
.guide-dropdown[open] .guide-dropdown-arrow {
    transform: rotate(180deg);
}
.guide-dropdown-list {
    padding: 4px 6px 8px;
    max-height: 280px;
    overflow-y: auto;
    border-top: 1px dashed rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
}
.guide-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-color);
    font-size: 0.92em;
    --opt-color: var(--primary-color);
}
.guide-filter-option:hover {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.08);
}
.guide-filter-input {
    width: 18px;
    height: 18px;
    accent-color: var(--opt-color, var(--primary-color));
    cursor: pointer;
    flex-shrink: 0;
}
.guide-filter-input:checked + .guide-filter-option-label {
    color: var(--opt-color, var(--primary-color));
    font-weight: 700;
}
.guide-filter-option-label {
    flex: 1;
    line-height: 1.35;
}

.guide-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.10);
}
.guide-visible-count {
    font-size: 0.85em;
    color: var(--primary-color);
    font-weight: 700;
}
.guide-filter-clear {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.10);
    border: 1.5px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.25);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 0.82em;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.guide-filter-clear:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

html[data-theme="dark"] .guide-filters {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .guide-dropdown {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .guide-dropdown-head { color: var(--text-color); }

/* ── Story grid (v3 flat, full-width) ─────────────────────────── */
.guide-story-grid {
    display: block;
}
.guide-city-section {
    margin-bottom: 24px;
}
.guide-city-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88em;
    font-weight: 700;
    color: #555;
    padding: 6px 2px 8px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 12px;
}
.guide-city-section-header i {
    color: var(--primary-color, #EC700B);
    margin-left: 5px;
}
.guide-city-section-count {
    font-size: 0.78em;
    font-weight: 600;
    background: #f3f3f3;
    border-radius: 10px;
    padding: 2px 8px;
    color: #888;
}
.guide-city-section-stories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ── Filter empty state ───────────────────────────────────────── */
.guide-filter-empty {
    text-align: center;
    color: #aaa;
    font-size: 0.9em;
    padding: 50px 20px;
    font-style: italic;
}
.guide-filter-empty i {
    display: block;
    font-size: 2em;
    margin-bottom: 10px;
    opacity: 0.35;
}

/* ── Heard section (v3 collapsible) ──────────────────────────── */
.guide-heard-section {
    border: 1px solid #eee;
    border-radius: 14px;
    margin-top: 24px;
    overflow: hidden;
}
.guide-heard-section-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    background: #fafafa;
    font-size: 0.9em;
    font-weight: 700;
    color: #666;
    user-select: none;
    gap: 8px;
}
.guide-heard-section-header > span:first-child {
    flex: 1;
}
.guide-heard-section-header .fa-chevron-down {
    transition: transform 0.25s;
    font-size: 0.85em;
    color: #aaa;
}
.guide-heard-section.open .guide-heard-section-header .fa-chevron-down {
    transform: rotate(180deg);
}
.guide-heard-section-header .guide-heard-count {
    background: #e8e8e8;
    color: #666;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: 600;
}
.guide-heard-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.guide-heard-section.open .guide-heard-section-content {
    max-height: 40000px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ── Story category tag inside cards ─────────────────────────── */
.story-card-cat-tag {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ==================== TIPS CONTENT STYLES ==================== */
.tip-card {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-right: 4px solid var(--primary-color);
}

.tip-card:last-child {
    margin-bottom: 0;
}

.tip-card h4 {
    color: var(--primary-color);
    font-size: 1.05em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tip-card h4 i {
    font-size: 1.2em;
}

.tip-card p,
.tip-card li {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-color);
}

.tip-card ul {
    margin: 0;
    padding-right: 20px;
}

.tip-card li {
    margin-bottom: 8px;
}

.tip-card li:last-child {
    margin-bottom: 0;
}

.tip-card a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}

.tip-card a:hover {
    text-decoration: underline;
}

.tip-highlight {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.1);
    padding: 12px 15px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 0.9em;
}

.tip-highlight strong {
    color: var(--primary-color);
}

/* ==================== PHRASES CARD STYLES ==================== */
.phrases-card {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 15px;
    margin-top: 20px;
}

.phrases-card h4 {
    color: var(--primary-color);
    font-size: 1.1em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.phrase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 10px;
}

.phrase-item:last-child {
    margin-bottom: 0;
}

.phrase-text {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.05em;
}

.phrase-pronunciation {
    font-size: 0.85em;
    color: #777;
    font-style: italic;
}

.phrase-meaning {
    font-size: 0.95em;
    color: var(--text-color);
}

/* ==================== EMERGENCY TAB STYLES ==================== */
.emergency-form {
    margin-top: 14px;
    background: var(--bg-color);
    border-radius: 16px;
    padding: 14px;
    border-right: 4px solid var(--primary-color);
}

.emergency-form .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.emergency-form input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.95em;
    outline: none;
}

.emergency-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 10px;
}

.emergency-number:last-child {
    margin-bottom: 0;
}

.emergency-number .service-name {
    font-weight: 700;
    color: var(--text-color);
}

.emergency-number a {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.emergency-number a:hover {
    text-decoration: underline;
}

.embassy-info {
    background: var(--bg-color);
    padding: 20px;
    border-radius: 15px;
    margin-top: 15px;
    border-right: 4px solid var(--primary-color);
}

.embassy-info h4 {
    color: var(--primary-color);
    margin-bottom: 12px;
}

.embassy-info p {
    margin-bottom: 8px;
    font-size: 0.95em;
}

.embassy-info a {
    color: var(--primary-color);
    text-decoration: none;
}

.emergency-contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 10px;
}

.emergency-contact-item .contact-info {
    flex: 1;
}

.emergency-contact-item .contact-name {
    font-weight: 700;
    color: #333;
}

.emergency-contact-item .contact-phone a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}

.emergency-contact-item .delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* ── Emergency accordions (Maya 2026-06-10, demo prep) ──────────────
   Insurance + emergency-contact cards collapse behind a "+" sign.
   When .has-data is set by the engine the accordion is locked open
   and the toggle disappears. */
details.emergency-accordion > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
details.emergency-accordion > summary::-webkit-details-marker { display: none; }
details.emergency-accordion > summary h3 { margin: 0; }
.emergency-accordion-toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.12);
    color: var(--primary-color);
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s;
}
details.emergency-accordion[open] .emergency-accordion-toggle { transform: rotate(45deg); }
details.emergency-accordion.has-data .emergency-accordion-toggle { display: none; }
details.emergency-accordion.has-data > summary { cursor: default; }
.emergency-accordion-body { margin-top: 14px; }

/* ==================== UPLOAD AREA STYLES ==================== */
.upload-area {
    margin-top: 15px;
}

.upload-box {
    border: 2px dashed var(--primary-color);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-color);
}

.upload-box:hover {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.1);
    border-style: solid;
}

.document-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 10px;
}

.document-item .doc-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-item .doc-icon {
    font-size: 1.5em;
    color: var(--primary-color);
}

.document-item .doc-name {
    font-weight: 700;
    color: #333;
}

.document-item .doc-size {
    font-size: 0.85em;
    color: #777;
}

.document-item .delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* ==================== BLOG CARD STYLES ==================== */
.blog-card {
    background: linear-gradient(135deg, var(--bg-color) 0%, #fff 100%);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin-top: 20px;
    border: 2px solid var(--primary-color);
}

.blog-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.blog-card p {
    font-size: 0.95em;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* ==================== CHECKLIST STYLES ==================== */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.checklist-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.checklist-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: #999;
}

.checklist-item span {
    flex: 1;
    line-height: 1.4;
}

.checklist-item .delete-item {
    color: #cc0000;
    cursor: pointer;
    padding: 0 5px;
    font-size: 16px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.checklist-item .delete-item:hover {
    opacity: 1;
}

.add-item-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.add-item-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
}

.add-item-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
}

.add-item-btn:hover {
    opacity: 0.85;
}

/* back-to-top is now a .floating-btn inside .floating-controls */

/* ==================== DAY ACCORDION CLOSE BUTTON ==================== */
.accordion-close-x {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 28px;
    height: 28px;
    background: rgba(85, 85, 85, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.accordion-close-x:hover {
    background: rgba(85, 85, 85, 0.9);
    transform: scale(1.1);
}

/* ==================== FLIGHT DIVIDER ==================== */
.flight-divider {
    text-align: center;
    margin: 25px 0;
}

.flight-divider img {
    max-width: 280px;
    width: 70%;
    filter: drop-shadow(0 0 6px rgba(60, 60, 60, 0.15));
}

/* Region divider (Maya 2026-05-28) — between itinerary parts (north → central
   → south, etc). Inherits the same drop-shadow as .flight-divider so the
   three plane silhouettes feel like one family. */
.region-divider {
    text-align: center;
    margin: 36px 0 18px;
}
.region-divider img {
    max-width: 280px;
    width: 70%;
    /* EXACTLY same shadow as .flight-divider img — Maya: "וודא שאתה מעתיק
       בדיוק את אותו CSS" */
    filter: drop-shadow(0 0 6px rgba(60, 60, 60, 0.15));
    display: block;
    margin: 0 auto;
}
.region-divider-text {
    margin-top: 8px;
}
.region-divider-title {
    color: var(--primary-color);
    font-size: 1.6em;
    margin: 8px 0 6px;
    font-weight: 700;
}
.region-divider-desc {
    color: var(--text-color, #555);
    font-size: 0.98em;
    line-height: 1.55;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (max-width: 768px) {
    .region-divider img { max-width: 200px; width: 60%; }
    .region-divider-title { font-size: 1.35em; }
    .region-divider-desc { font-size: 0.92em; }
}
html[data-theme="dark"] .region-divider-desc { color: #d8d8d8; }

/* ==================== MINI EDIT BUTTON ==================== */
/* Maya 2026-06-10 (demo prep): was white-on-translucent-white, which is
   invisible on the light-mode card. Now uses the theme primary color so
   the pencil is clearly visible in BOTH light and dark modes. */
.mini-edit-btn {
    border: none;
    background: var(--primary-color);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mini-edit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.mini-edit-btn.editing { filter: brightness(0.9); }

.edit-hint {
    margin-top: 12px;
    font-size: 0.85em;
    color: #777;
    opacity: 0.95;
}

html[data-theme="dark"] .edit-hint { color: #d8d8d8; }

.edit-hint.hidden { display: none; }

.travelers-card.editing .traveler {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
    outline: 2px dashed rgba(var(--primary-color-rgb, 236, 112, 11), 0.55);
    cursor: text;
}

.travelers-card.editing .traveler:focus {
    outline: 2px solid var(--primary-color);
}

/* ==================== BOOKABLE ITEM ==================== */
.bookable-item {
    position: relative;
    transition: all 0.3s ease;
}

.bookable-item.booked {
    opacity: 0.7;
    border-right-color: #28a745;
}

.bookable-item.booked h4::after {
    content: ' ✓';
    color: #28a745;
}

.book-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.book-toggle:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.bookable-item.booked .book-toggle {
    background: #28a745;
}

.bookable-item.booked .book-toggle:hover {
    background: #218838;
}

/* ==================== BOOKING OPTIONS (multi-option bookings) ==================== */
.booking-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.booking-options .btn {
    font-size: 0.85em;
    padding: 8px 14px;
}

.booking-options-label {
    width: 100%;
    font-size: 0.85em;
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 2px;
}

/* Booked badge (shown inline in activity after booking) */
.booking-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #28a745;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 8px;
}

/* Booking card in tickets tab */
.booking-card {
    background: var(--bg-color);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 12px;
    border-right: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.booking-card.booked {
    border-right-color: #28a745;
}

.booking-card h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.booking-card.booked h4::after {
    content: ' ✓';
    color: #28a745;
}

.booking-card .day-label {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 5px;
}

.booking-day-group {
    margin-bottom: 20px;
}

.booking-day-group h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1em;
}

/* "I booked" button */
.btn-i-booked {
    background: #e8f5e9;
    color: #28a745;
    border: 2px solid #28a745;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.85em;
    transition: all 0.2s;
}

.btn-i-booked:hover {
    background: #28a745;
    color: white;
}

.btn-whatsapp-transfer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 12px;
    text-decoration: none;
    transition: all 0.3s;
    direction: ltr;
    cursor: pointer;
}

.btn-whatsapp-transfer:hover {
    background: #128C7E;
    color: white;
    transform: translateY(-2px);
}

.btn-whatsapp-transfer i {
    font-size: 1.2em;
}

/* ==================== LODGING TAB ==================== */

.hotel-options-compact {
    background: var(--bg-color);
    border: 2px dashed var(--accent-color);
    border-radius: 15px;
    padding: 15px 18px;
    margin: 15px 0;
    text-align: center;
}

.hotel-options-compact.chosen {
    border-style: solid;
    border-color: #28a745;
    background: #f0fff0;
}

.hotel-compact-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.95em;
}

.hotel-compact-option {
    font-weight: bold;
    color: var(--text-color);
}

.hotel-compact-divider {
    color: #ccc;
    font-size: 1.2em;
}

.hotel-compact-compare {
    font-size: 0.9em;
    padding: 8px 20px;
}

.hotel-compact-chosen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #28a745;
    font-weight: bold;
    margin-bottom: 8px;
}

.hotel-compact-chosen i {
    font-size: 1.2em;
}

.hotel-compact-change {
    display: inline-block;
    font-size: 0.85em;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.lodging-group {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.lodging-group-header {
    margin-bottom: 20px;
}

.lodging-group-header h3 {
    font-size: 1.2em;
    color: var(--primary-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lodging-dates {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px;
}

.lodging-group-note {
    font-size: 0.9em;
    color: #888;
    font-style: italic;
    margin-top: 5px;
}

.lodging-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Single-display variant: only ONE hotel card in this group (either a
   prebooked hotel or an option-group where the user has already chosen).
   Maya 2026-05-12: every lodging tab card must use the same layout —
   horizontal flex with the image on one side and info on the other —
   regardless of whether it came from `prebooked` or `optionGroup` data. */
.lodging-cards.lodging-cards-single {
    grid-template-columns: 1fr;
}

.lodging-card {
    background: var(--bg-color);
    border-radius: 15px;
    padding: 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.lodging-card h4 {
    color: var(--primary-color);
    font-size: 1.05em;
    margin-bottom: 5px;
}

.lodging-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.lodging-option-label {
    background: var(--primary-color);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
}

.lodging-chosen-icon {
    color: #28a745;
    font-size: 1.3em;
}

.hotel-stars {
    display: inline-block;
    color: #f5a623;
    font-size: 0.85em;
    margin-bottom: 8px;
}

/* Unified card body. Default (multi-option grid) = vertical: image on top,
   info below. Single-display = horizontal: image on side, info next to it. */
.lodging-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lodging-card-single .lodging-card-body {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}
.lodging-card-info { flex: 1; }

.lodging-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin: 10px 0;
}
/* In single-display the image becomes a side panel, not full-width */
.lodging-card-single .lodging-card-image {
    width: 220px;
    height: 155px;
    margin: 0;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    /* On mobile, single-display also stacks vertically so the card is
       readable on narrow screens. */
    .lodging-card-single .lodging-card-body { flex-direction: column; }
    .lodging-card-single .lodging-card-image {
        width: 100%; height: 180px; margin: 0 0 12px;
    }
}

.lodging-card-desc {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--text-color);
}

/* Maya 2026-05-12: every button in the lodging tab uses the SAME .btn
   family — same height, padding, radius, font-size. Differentiation is
   purely by background color (primary brand / secondary gray / success
   green for "chosen"). No custom shape per button type. */
.lodging-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    align-items: center;
}
.lodging-card-actions .btn {
    /* Override the .btn default margin-top so all three line up flush. */
    margin-top: 0;
}

.lodging-btn-book,
.lodging-btn-map,
.lodging-btn-choose {
    font-size: 0.92em;
    padding: 10px 18px;
    border-radius: 10px;
}

.lodging-btn-choose.chosen {
    background: #28a745;
    color: white;
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.25);
}
.lodging-btn-choose.chosen:hover {
    background: #1e7e34;
    color: white;
}

.lodging-card-chosen {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.lodging-card-dimmed {
    opacity: 0.55;
    filter: grayscale(30%);
}

.lodging-card-dimmed:hover {
    opacity: 0.8;
    filter: none;
}

.lodging-prebooked-full {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.lodging-prebooked-image {
    width: 220px;
    height: 155px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}

.lodging-prebooked-info {
    flex: 1;
}

.lodging-prebooked-info h4 {
    color: var(--primary-color);
    font-size: 1.1em;
    margin-bottom: 6px;
}

.lodging-room-type,
.lodging-address {
    font-size: 0.88em;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .lodging-btn-map: visual style now comes from .btn-secondary (white
   bg, neutral gray border) — same shape & size as the other two
   lodging buttons. Maya 2026-05-12: no custom pill anymore. */

@media (max-width: 768px) {
    .lodging-prebooked-full {
        flex-direction: column;
    }
    .lodging-prebooked-image {
        width: 100%;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .lodging-cards {
        grid-template-columns: 1fr;
    }
    .lodging-group {
        padding: 18px;
    }
    .lodging-card-image {
        height: 140px;
    }
    .hotel-compact-options {
        flex-direction: column;
        gap: 4px;
    }
    .hotel-compact-divider {
        display: none;
    }
}

/* Booking option selection prompt */
.booking-select-prompt {
    background: #f0fff0;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
}

.booking-select-prompt p {
    margin: 0 0 8px;
    font-size: 0.9em;
    color: #555;
}

.booking-select-prompt .btn {
    font-size: 0.85em;
    margin: 4px;
}

/* Booked confirmation in card */
.booking-booked-info {
    color: #28a745;
    font-size: 0.9em;
    margin-top: 5px;
}

/* ==================== DOCUMENT ITEM (detailed) ==================== */
.document-item .doc-actions {
    display: flex;
    gap: 8px;
}

.document-item .doc-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.2s;
}

.document-item .doc-btn.view-btn {
    color: var(--primary-color);
}

.document-item .doc-btn.view-btn:hover {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.1);
}

.document-item .doc-btn.delete-btn {
    color: #dc3545;
}

.document-item .doc-btn.delete-btn:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* ==================== EXPENSE ITEM & CATEGORY CARDS ==================== */
.expense-item .expense-info .category-icon {
    font-size: 1.2em;
    margin-left: 8px;
}

.expense-item .expense-info .description {
    font-weight: bold;
    color: #333;
}

.expense-item .expense-info .meta {
    font-size: 0.85em;
    color: #777;
    margin-top: 3px;
}

.expense-item .delete-expense {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
    transition: color 0.2s;
}

.expense-item .delete-expense:hover {
    color: #e74c3c;
}

.quick-category-btn {
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    background: white;
    /* Explicit text color so the label is readable in every theme
       (Maya 2026-05-29) — without this, dark mode inherited a light
       body color on a white background → label invisible. */
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.quick-category-btn.active {
    background: var(--primary-color) !important;
    color: white;
}

/* Dark mode: white background swap to translucent surface + light text. */
html[data-theme="dark"] .quick-category-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}
html[data-theme="dark"] .quick-category-btn.active {
    background: var(--primary-color) !important;
    color: #fff;
}

.category-card {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 10px;
    text-align: center;
}

.category-card .cat-icon {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.category-card .cat-name {
    font-size: 0.85em;
    color: #777;
}

.category-card .cat-total {
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 5px;
}

/* ==================== RESPONSIVE FORM STYLES ==================== */
@media (max-width: 768px) {
    .currency-converter {
        flex-direction: column;
    }

    .currency-converter input,
    .currency-converter select {
        flex: 1 1 100%;
    }

    .currency-converter span {
        display: none;
    }

    .expense-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .expense-item .expense-category {
        order: -1;
        margin-left: 0;
    }
}

/* ==================== THEME SELECTOR ==================== */
.theme-selector {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.theme-selector p {
    margin-bottom: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    text-align: center;
}

.theme-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.theme-btn {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 0;
    position: relative;
    background: none;
    overflow: hidden;
}

/* Mobile: smaller theme buttons */
@media (max-width: 480px) {
    .theme-btn {
        width: 42px;
        height: 42px;
    }

    .theme-options {
        gap: 8px;
    }
}

.theme-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.theme-btn.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
    transform: scale(1.1);
}

.theme-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

/* Flag-based theme previews (round flags) */
.theme-preview.flag {
    background-size: cover;
    background-position: center;
}

/* Generic theme previews (gradients) */
.theme-preview.ocean {
    background: linear-gradient(135deg, #E3F2FD, #B3E5FC);
}

.theme-preview.sunset {
    background: linear-gradient(135deg, #FFF3E0, #FFCCBC);
}

.theme-preview.forest {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
}

.theme-preview.desert {
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
}

.theme-preview.purple {
    background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
}

.theme-preview.classic {
    background: linear-gradient(135deg, #4A4A4A, #6A6A6A);
}

.theme-preview.dark {
    background: linear-gradient(135deg, #15171c, #1f232b);
    border: 1px solid #FF8A4A;
}

.theme-btn span {
    display: none;
}

.update-notice {
    background: #fff3cd;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #856404;
    display: none;
    text-align: center;
}

.update-notice.show {
    display: block;
}

/* RTL support for update notice */
html[dir="rtl"] .update-notice {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] .update-notice {
    direction: ltr;
    text-align: left;
}
/* Dark mode ONLY (Maya 2026-06-20): in dark mode a broad text rule turned the
   notice text light while its cream background stayed, making "ערכת הנושא
   עודכנה!" unreadable. Give it a dark background + light text so it's legible;
   light mode is untouched. */
html[data-theme="dark"] .update-notice {
    background: rgba(236, 112, 11, 0.18);
    color: #ffe0b2;
    border-color: var(--primary-color, #EC700B);
}

/* ==================== GUIDE TAB - Story Cards ==================== */

.story-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-right: 4px solid var(--accent-color, #EC700B);
    transition: box-shadow 0.2s ease;
}

.story-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.story-card-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 12px;
    max-height: 200px;
    object-fit: cover;
}

.story-card-title {
    color: var(--primary-color, #2D3436);
    font-size: 1.15em;
    margin: 0 0 8px 0;
}

.story-card-teaser {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.story-read-more {
    display: inline-block;
    color: var(--accent-color, #EC700B);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.story-read-more:hover {
    color: var(--primary-color, #2D3436);
}

.story-full-content {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.95em;
    line-height: 1.75;
    color: #444;
}

.story-card.highlighted {
    animation: storyHighlight 2s ease-out;
}

@keyframes storyHighlight {
    0% { box-shadow: 0 0 0 4px var(--accent-color); }
    100% { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
}

html[dir="ltr"] .story-card {
    border-right: none;
    border-left: 4px solid var(--accent-color, #EC700B);
}

/* ── Story card enhancements ─────────────────────────────────────── */
.story-card-header {
    position: relative;
    margin-bottom: 8px;
}

.story-card-location {
    font-size: 0.78em;
    color: #888;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.story-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.story-audio-btn {
    background: none;
    border: none;
    color: var(--accent-color, #EC700B);
    font-size: 1.4em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.15s;
}

.story-audio-btn:hover { transform: scale(1.15); }

/* Heard badge */
.story-heard-badge {
    display: inline-block;
    background: #27ae60;
    color: #fff;
    border-radius: 20px;
    font-size: 0.7em;
    padding: 2px 8px;
    margin-right: 8px;
    font-weight: 600;
    vertical-align: middle;
}

.story-heard {
    opacity: 0.75;
    border-right-color: #27ae60;
}

html[dir="ltr"] .story-heard {
    border-left-color: #27ae60;
    border-right-color: transparent;
}

/* ── Daily Story card (top of each day) ─────────────────────────── */
/* Soft, integrated styling — clean white card with a quiet warm accent
   on the inline-end edge. Matches the visual rhythm of .tip-box / .day-card,
   so the card whispers rather than shouts on the cream body background. */
.daily-story-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-right: 3px solid var(--accent-color, #f5a142);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 12px 0 18px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[dir="ltr"] .daily-story-card {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 3px solid var(--accent-color, #f5a142);
}

.daily-story-label {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--primary-color, #EC700B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

.daily-story-location {
    font-size: 0.72em;
    color: #999;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.daily-story-title {
    font-size: 1.05em;
    color: #2D3436;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.daily-story-teaser {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    margin: 0 0 12px 0;
    /* Show only first 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.daily-story-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.daily-story-btn {
    font-size: 0.85em;
    padding: 7px 14px;
    background: var(--primary-color, #EC700B);
    color: #fff;
}

.daily-story-audio-btn {
    background: none;
    border: none;
    color: var(--primary-color, #EC700B);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
    opacity: 0.85;
}
.daily-story-audio-btn:hover { transform: scale(1.15); opacity: 1; }

/* ── Transport Story card (inside transport activities) ──────────── */
.transport-story-card {
    background: #f7f2ff;
    border: 1px solid #d4b8ff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.transport-story-label {
    font-size: 0.72em;
    font-weight: 700;
    color: #6c5ce7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.transport-story-location {
    font-size: 0.78em;
    color: #888;
}

.transport-story-title {
    font-size: 0.9em;
    color: #333;
    font-weight: 600;
    flex: 1;
}

.transport-story-actions {
    display: flex;
    gap: 12px;
}

.btn-link {
    background: none;
    border: none;
    color: #6c5ce7;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link:hover { color: #4a35c2; }

/* ── Story Modal ─────────────────────────────────────────────────── */
#mdj-story-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
}

#mdj-story-modal.active {
    display: block;
}

.story-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
}

.story-modal-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 24px 22px 32px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1;
    animation: slideUpModal 0.3s ease;
}

@keyframes slideUpModal {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.story-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1em;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-modal-location {
    font-size: 0.72em;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.story-modal-title {
    font-size: 1.3em;
    color: var(--primary-color, #2D3436);
    margin: 0 0 16px 0;
    line-height: 1.35;
    padding-left: 36px; /* room for close button */
}

.story-modal-content {
    font-size: 0.97em;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.story-modal-deep-dive {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 16px;
    font-size: 0.93em;
    line-height: 1.75;
}

.story-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.story-modal-audio-btn {
    background: var(--accent-color, #EC700B);
    flex: 1;
}

.story-modal-deepdive-btn {
    flex: 1;
}

.story-modal-loading {
    text-align: center;
    padding: 24px;
    color: #888;
    font-size: 1em;
}

.story-modal-heard {
    background: #e8f5e9;
    color: #27ae60;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
}

/* Transport timeline item subtle visual */
.timeline-transport {
    border-right-color: #a29bfe !important;
}

/* ── Night Brief Card ───────────────────────────────────────────── */
.night-brief-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e8e8f0;
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0 10px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}

.night-brief-card::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(162,155,254,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.night-brief-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.night-brief-icon {
    font-size: 1.3em;
}

.night-brief-label {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a29bfe;
    opacity: 0.9;
}

.night-brief-today {
    font-size: 0.9em;
    color: rgba(232,232,240,0.6);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.night-brief-today-tag {
    color: rgba(232,232,240,0.4);
    font-size: 0.85em;
}

.night-brief-tomorrow {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.night-brief-tomorrow-title {
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.night-brief-tomorrow-title i {
    color: #a29bfe;
    font-size: 0.85em;
}

.night-brief-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
}

.night-brief-highlight {
    background: rgba(162,155,254,0.12);
    border: 1px solid rgba(162,155,254,0.2);
    color: #d4d0ff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8em;
}

.night-brief-alarm {
    font-size: 0.88em;
    color: #ffeaa7;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.night-brief-critical {
    font-size: 0.85em;
    color: #fd79a8;
    font-weight: 600;
    background: rgba(253,121,168,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    border-right: 3px solid #fd79a8;
}

/* ── Night Brief Voice Buttons ──────────────────────────────────── */
.night-brief-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
/* Compact mode (Maya 2026-05-29) — the card now has no header + no footer.
   The 16px margin-bottom from .night-brief-actions used to push the
   buttons up off the footer; with the footer gone, it created uneven
   padding (20 top / 36 bottom). Zero it out so the card centers cleanly. */
.night-brief-card-compact .night-brief-actions {
    margin-bottom: 0;
}

.night-brief-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    font-family: inherit;
}

.night-brief-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.night-brief-summary-btn {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
}

.night-brief-story-btn {
    background: rgba(162,155,254,0.12);
    border: 1px solid rgba(162,155,254,0.25);
    color: #d4d0ff;
}

.night-brief-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.82em;
    color: rgba(232,232,240,0.45);
    text-align: center;
}

.night-brief-last-day {
    font-size: 0.9em;
    color: #a29bfe;
    text-align: center;
    padding: 8px 0;
}

.night-brief-start {
    font-size: 0.88em;
    color: #74b9ff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* ==================== Cultural Events Banner (gated by data.showCulturalEvents) ==================== */
.cultural-events-container {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cultural-event-banner {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe9b8 100%);
    border: 1px solid #e8c976;
    border-right: 5px solid #d4a93a;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    direction: rtl;
}
.cultural-event-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cultural-flag {
    font-size: 1.8em;
    line-height: 1;
    flex-shrink: 0;
}
.cultural-event-meta {
    flex: 1;
    min-width: 0;
}
.cultural-event-name {
    display: inline-block;
    font-size: 1.05em;
    color: #5a3a07;
    margin-left: 8px;
}
.cultural-public-mark {
    display: inline-block;
    background: #d4a93a;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    margin-right: 6px;
}
.cultural-event-short {
    margin: 6px 0 0;
    color: #6b4d1c;
    font-size: 0.95em;
    line-height: 1.5;
}
.cultural-event-btn {
    margin-top: 10px;
    background: #d4a93a;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.cultural-event-btn:hover {
    background: #b48b22;
    transform: translateY(-1px);
}
.cultural-event-impact {
    margin-top: 10px;
    color: #6b4d1c;
    font-size: 0.9em;
}
.cultural-event-impact summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
}
.cultural-event-impact > div {
    padding: 8px 0 0;
    line-height: 1.6;
}

/* Modal */
.cultural-event-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.cultural-event-modal {
    background: #fff;
    max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto;
    border-radius: 16px;
    padding: 28px 24px;
    direction: rtl;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.cultural-modal-close {
    position: absolute; top: 12px; left: 12px;
    background: transparent; border: none;
    font-size: 1.8em; cursor: pointer;
    color: #888; line-height: 1;
}
.cultural-modal-close:hover { color: #222; }
.cultural-modal-header {
    text-align: center;
    border-bottom: 2px solid #f0e2bf;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.cultural-modal-header h2 {
    margin: 6px 0;
    color: #5a3a07;
}
.cultural-modal-subtitle {
    color: #888;
    margin: 0 0 8px;
    font-size: 0.95em;
}
.cultural-modal-body h4 {
    color: #5a3a07;
    margin-bottom: 8px;
}
.cultural-modal-body p {
    line-height: 1.7;
    color: #444;
}

/* ==================== STORY MODE — "הסיפור שלי" ====================
   Activated when trip JSON has storyMode: true. Maya 2026-05-04.
   All controls live alongside existing itinerary UI; no separate page.
   Brand: orange-leaning palette to match MDJ. */

/* Visual hierarchy fix (Maya 2026-05-05): wrap the whole activity (title +
   description + controls) in a soft card so the controls clearly belong to
   the activity ABOVE them, not to the next block. The dashed separator was
   confusing because it visually separated the activity from its OWN
   controls. New: light cream card + subtle inner separator. */
.timeline-item.sm-has-controls {
    background: #fffaf2;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(236, 112, 11, 0.12);
}
.timeline-item.sm-custom-timeline.sm-has-controls,
.timeline-item.sm-custom-timeline {
    background: linear-gradient(180deg, #fff7eb 0%, #fffdf8 100%);
    border: 1px solid rgba(236, 112, 11, 0.28) !important;
}

.sm-act-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding-top: 8px;
    /* Subtle inner divider — clearly INSIDE the activity card, not between
       activities. Removed dashed orange border that caused confusion. */
    border-top: 1px solid rgba(236, 112, 11, 0.15);
}

.sm-rating { display: inline-flex; gap: 2px; cursor: pointer; user-select: none; }
.sm-star { color: #ddd; font-size: 1.2em; transition: color 0.15s; }
.sm-star.on { color: #EC700B; }
.sm-star:hover { color: #f5a64f; }

/* ───── Story Mode UNIFIED icon-button system (Maya 2026-05-05c) ──────
   Every single-symbol button in Story Mode is a 32×32 circle with the
   same cream bg / orange border / hover-fill behavior. Includes:
     .sm-icon-btn  (📝 📷 ✕ "didn't do" toggle)
     .sm-block-add (+)
     .sm-react-btn (❤️ reaction base)
   Variants below override only their distinctive "on" colors. */
.sm-icon-btn,
.sm-block-add,
.sm-react-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #fff8ec;
    border: 1.5px solid rgba(236, 112, 11, 0.4);
    color: #b85a00;
    font-size: 1em;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s;
}
.sm-icon-btn:hover,
.sm-block-add:hover,
.sm-react-btn:hover {
    background: #EC700B;
    color: #fff;
    border-color: #EC700B;
    transform: scale(1.08);
}
.sm-icon-btn.on,
.sm-block-add.on,
.sm-react-btn.on {
    background: #EC700B;
    color: #fff;
    border-color: #EC700B;
}
/* "didn't do" toggled state — grey fill to distinguish from primary actions */
.sm-icon-btn.sm-didnt-do.on {
    background: #888;
    border-color: #888;
    color: #fff;
}

.sm-note-wrap { display: inline-flex; flex-direction: column; gap: 4px; flex: 1 1 100%; }
.sm-note-text {
    width: 100%;
    border: 1px solid #f0c794;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.92em;
    direction: rtl;
    text-align: right;
    resize: vertical;
    min-height: 50px;
    background: #fffaf0;
}
.sm-note-text:focus { outline: 2px solid #EC700B; outline-offset: -1px; }

.sm-photo-wrap { display: inline-flex; flex-direction: column; gap: 6px; }
.sm-photo-gallery { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-photo-tile { position: relative; }
.sm-photo-thumb {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: 6px; border: 1px solid #ddd;
}
/* Delete X on photo thumbnails — smaller circle (20px) but same family */
.sm-photo-del {
    position: absolute;
    top: -6px; left: -6px;
    width: 22px; height: 22px; min-width: 22px;
    border-radius: 50%;
    background: #d33;
    color: #fff;
    border: 1.5px solid #fff;
    font-size: 14px; line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.1s, background 0.15s;
}
.sm-photo-del:hover { background: #a00; transform: scale(1.15); }

.sm-strikethrough .activity-title { text-decoration: line-through; opacity: 0.55; }
.sm-strikethrough { opacity: 0.7; }

/* "לא עשינו" activities collapse to a single line (time + title) so the
   itinerary stays clean. Click anywhere on the collapsed row to expand
   (accordion). Maya 2026-05-11. */
.sm-strikethrough:not(.sm-expanded) {
    cursor: pointer;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.sm-strikethrough:not(.sm-expanded) > *:not(.time):not(.activity):not(.activity-title) {
    display: none !important;
}
.sm-strikethrough:not(.sm-expanded) > .activity::after,
.sm-strikethrough:not(.sm-expanded) > .activity-title::after {
    content: '  ▾';
    font-size: 0.75em;
    color: #999;
    opacity: 0.7;
    text-decoration: none;
    display: inline-block;
}
.sm-strikethrough.sm-expanded > .activity::after,
.sm-strikethrough.sm-expanded > .activity-title::after {
    content: '  ▴';
    font-size: 0.75em;
    color: #999;
    opacity: 0.7;
    text-decoration: none;
    display: inline-block;
}
.sm-strikethrough.sm-expanded { cursor: pointer; }

/* Video tile: thumbnail image with a centered play triangle overlay */
.sm-video-thumb {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: zoom-in;
}
.sm-video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.sm-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-indent: 2px;  /* visual centering for the ▶ glyph */
}
.sm-lightbox-video {
    background: #000;
}

/* Daily journal block at bottom of each day */
.sm-journal {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(180deg, #fff7eb 0%, #fffdf8 100%);
    border-right: 4px solid var(--primary-color, #EC700B);
    border-radius: 8px;
}
.sm-journal-label {
    font-weight: 600;
    color: var(--primary-color, #b85a00);
    margin-bottom: 8px;
    font-size: 0.95em;
}
.sm-journal-text {
    width: 100%;
    border: 1px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.95em;
    direction: rtl;
    text-align: right;
    background: #fff;
    color: #333;
    resize: vertical;
    min-height: 70px;
}
.sm-journal-text:focus { outline: 2px solid var(--primary-color, #EC700B); outline-offset: -1px; }
.sm-journal-text::placeholder { color: #999; }

/* Dark-mode override (Maya 2026-05-29) — the journal block + textarea
   were hard-coded cream/white, leaving illegible faint placeholder text
   on a too-bright box inside the dark theme. */
html[data-theme="dark"] .sm-journal {
    background: rgba(255, 255, 255, 0.05);
    border-right-color: var(--primary-color);
}
html[data-theme="dark"] .sm-journal-label {
    color: var(--primary-color);
}
html[data-theme="dark"] .sm-journal-text {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-color);
}
html[data-theme="dark"] .sm-journal-text::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.sm-mood-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
    direction: ltr;  /* keep emoji order LTR for consistent reading */
    justify-content: flex-end;
}
/* Mood picker circles — match the unified 32px icon-button system, just
   slightly larger (36px) since they're a content row, not action buttons. */
.sm-mood {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #fff8ec;
    border: 1.5px solid rgba(236, 112, 11, 0.4);
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.sm-mood:hover { background: #ffeed4; transform: scale(1.1); }
.sm-mood.on { background: #EC700B; border-color: #EC700B; transform: scale(1.1); }

/* Custom (user-added) activities */
.sm-custom-block { margin-top: 14px; }
/* Prominent CTA button (Maya 2026-05-05): shares .btn family — same
   10px radius, same hover lift. The gradient + extra padding mark it
   as the primary action of the day section. */
.sm-add-custom {
    background: linear-gradient(135deg, #EC700B, #f59042);
    border: 0;
    color: #fff;
    border-radius: 10px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(236, 112, 11, 0.25);
    letter-spacing: 0.01em;
    font-family: inherit;
    font-size: 0.95em;
    font-family: inherit;
    font-size: 0.95em;
    width: 100%;
    text-align: center;
    transition: background 0.15s;
}
.sm-add-custom:hover {
    background: linear-gradient(135deg, #d65d00, #EC700B);
    box-shadow: 0 4px 14px rgba(236, 112, 11, 0.35);
    transform: translateY(-1px);
}
.sm-add-custom:active { transform: translateY(0); }

.sm-customs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sm-custom-item {
    background: #fff;
    border: 1px solid #f0c794;
    border-radius: 6px;
    padding: 8px 12px;
}
.sm-custom-head { display: flex; align-items: center; gap: 10px; }
.sm-custom-time { color: #b85a00; font-weight: 600; }
.sm-custom-title { flex: 1; }
.sm-custom-del {
    background: transparent; border: 0; color: #999;
    cursor: pointer; font-size: 1.2em; padding: 0 4px;
}
.sm-custom-del:hover { color: #d33; }

/* Backup panel inside the "הסיפור שלי" tab (replaces the old floating
   .sm-tools panel that lived at the bottom of the root). */
.sm-backup-panel {
    margin: 28px 0 12px;
    padding: 18px 20px;
    background: #fffaf0;
    border-radius: 12px;
    border: 1px solid #f0c794;
}
.sm-backup-title {
    color: #EC700B;
    margin: 0 0 8px;
    font-size: 1.1em;
}
.sm-backup-help {
    margin: 0 0 14px;
    color: #555;
    line-height: 1.6;
    font-size: 0.93em;
}
.sm-backup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.sm-backup-btn { margin-top: 0; }
@media (max-width: 500px) {
    .sm-backup-btn { flex: 1 1 100%; }
}

@media (max-width: 600px) {
    .sm-act-controls { gap: 6px; }
    .sm-photo-thumb { width: 56px; height: 56px; }
    .sm-mood { width: 32px; height: 32px; line-height: 28px; font-size: 1.05em; }
}

/* ==================== STORY MODE — additions 2026-05-05 ==================== */

/* FB-style per-activity reaction button — base styles come from the
   unified icon-btn block above (same 32px circle, same hover behavior). */
.sm-react-wrap { position: relative; display: inline-block; }
.sm-react-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    display: none;
    background: #fff;
    border: 1px solid #f0c794;
    border-radius: 24px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    white-space: nowrap;
}
.sm-react-popup.open { display: flex; gap: 2px; animation: smReactIn 0.15s ease-out; }
@keyframes smReactIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Emojis in the FB-style reaction popup — circle, same family as moods */
.sm-react-pick {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.sm-react-pick:hover { background: #fff7eb; transform: scale(1.18); }
.sm-react-pick.on { background: #ffe7c8; transform: scale(1.12); }

/* Custom activities inserted chronologically into the timeline */
.sm-custom-timeline {
    border-right: 3px solid #EC700B !important;
    background: linear-gradient(180deg, #fff7eb 0%, #fffdf8 100%) !important;
    border-radius: 8px;
    padding: 10px 14px !important;
}
.sm-ct-time { color: #EC700B; font-weight: 700; }
.sm-ct-title { display: flex; align-items: center; gap: 6px; }
.sm-ct-del {
    margin-right: auto;
    background: transparent; border: 0; color: #999;
    cursor: pointer; font-size: 1.3em; padding: 0 4px;
}
.sm-ct-del:hover { color: #d33; }

/* Lightbox: fullscreen photo viewer */
.sm-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
    animation: smLbIn 0.18s ease-out;
}
@keyframes smLbIn { from { opacity: 0; } to { opacity: 1; } }
.sm-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    cursor: default;
}
.sm-lightbox-close {
    position: absolute;
    top: 14px; right: 18px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.6em; line-height: 36px;
    cursor: pointer;
    padding: 0;
}
.sm-lightbox-close:hover { background: rgba(255, 255, 255, 0.32); }

/* Make thumbnails clearly clickable */
.sm-photo-thumb { cursor: zoom-in; }
.sm-photo-thumb:hover { transform: scale(1.04); transition: transform 0.15s; }

/* ==================== STORY MODE — additions 2026-05-05b ============== */

/* + button per activity (replaces the row of always-visible buttons) */
.sm-act-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sm-controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; }
.sm-add-wrap { position: relative; margin-right: auto; }
/* .sm-block-add base styles come from the unified icon-btn block above —
   same 32px circle. Only override the font weight to make the "+" bolder. */
.sm-block-add { font-weight: 700; font-size: 1.2em; }
/* Menu uses position:fixed (set inline by JS at open time) so that ancestor
   overflow:hidden / clip from day-card rounded corners can never chop it
   mid-screen. Maya 2026-05-11: she was seeing the menu sliced in half. */
.sm-add-menu {
    display: none;
    background: #fff;
    border: 1px solid #f0c794;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    min-width: 200px;
    max-width: calc(100vw - 16px);
    padding: 4px;
}
.sm-add-menu.open { display: block; animation: smMenuIn 0.15s ease-out; }
@keyframes smMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sm-add-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: transparent; border: 0;
    padding: 10px 14px;
    text-align: right;
    cursor: pointer;
    font-family: inherit; font-size: 0.95em;
    color: #333;
    border-radius: 6px;
    direction: rtl;
}
.sm-add-menu-item:hover { background: #fff7eb; color: #EC700B; }
.sm-add-menu-icon { font-size: 1.1em; }
.sm-add-menu-empty {
    padding: 10px 14px;
    color: #888;
    font-size: 0.88em;
    text-align: right;
    direction: rtl;
}

/* Emoji picker grid — opens inside the + menu (Maya 2026-05-28) */
.sm-emoji-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    direction: ltr;
}
.sm-emoji-pick {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1.3em;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sm-emoji-pick:hover {
    background: #fff7eb;
    border-color: rgba(236, 112, 11, 0.25);
    transform: scale(1.12);
}
.sm-emoji-cancel {
    color: #888;
    font-size: 1em;
}
html[data-theme="dark"] .sm-emoji-pick:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Controls hidden by default — surfaced via + menu OR when data exists */
.sm-control { display: none; }
.sm-control.sm-shown { display: inline-flex; align-items: center; }

/* ===== Inline data displays (Maya 2026-05-11: main view shows DATA only,
   no trigger icons). Each appears only when the user has actual data. ===== */
.sm-data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    direction: rtl;
}
.sm-data-row:empty { display: none; }

.sm-inline-rating { display: inline-flex; gap: 2px; cursor: pointer; user-select: none; }

.sm-inline-note {
    flex: 1 1 100%;
    display: flex;
}
.sm-inline-note-display {
    flex: 1;
    background: #fffaf0;
    border: 1px solid #f0c794;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.92em;
    color: #5a3a18;
    cursor: text;
    direction: rtl;
    text-align: right;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.2em;
}
.sm-inline-note-display:hover { border-color: #EC700B; }
.sm-inline-note-edit {
    flex: 1;
    width: 100%;
    border: 1px solid #EC700B;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.92em;
    direction: rtl;
    text-align: right;
    resize: vertical;
    min-height: 50px;
    background: #fffaf0;
    outline: none;
}

.sm-inline-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Static (non-editable) reaction emoji — for non-reactable activities that
   somehow have a stored reaction. Just shows it inline, no popup. */
.sm-inline-reaction-static {
    font-size: 1.2em;
    line-height: 1;
    padding: 2px 4px;
}

/* Hero image overridden by user's personal photo — subtle visual cue */
.sm-hero-overridden {
    box-shadow: 0 0 0 2px rgba(236, 112, 11, 0.55), 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Universal hero-image overlay button — used on day hero AND every
   activity image so the user can swap any built-in photo with their
   own. Maya 2026-05-11: "every block image should be replaceable". */
.sm-hero-wrap {
    position: relative;
    display: block;
    /* So the absolutely-positioned button can sit inside */
}
.sm-hero-wrap > img.day-hero { display: block; }
.sm-hero-edit {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #b85a00;
    border: 1.5px solid rgba(236, 112, 11, 0.65);
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 2;
    line-height: 1;
}
.sm-hero-edit > i.fas,
.sm-hero-edit > i.far {
    /* Font Awesome glyphs are pre-centered — no extra offset needed.
       Setting an explicit font-size + line-height eliminates the
       emoji whitespace problem the 📷 character used to have. */
    font-size: 15px;
    line-height: 1;
    display: block;
}
.sm-hero-edit:hover {
    background: #EC700B;
    color: #fff;
    transform: scale(1.08);
}

/* Delete button — sits next to the camera button, only visible when a
   personal hero photo exists. Click → restore the default image.
   Maya 2026-05-31: gives the user "full control" — clear way to undo a
   personal-photo replacement without going through a confirm dialog. */
.sm-hero-delete {
    position: absolute;
    bottom: 10px;
    left: 56px;            /* sits 10px right of .sm-hero-edit */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #c0392b;
    border: 1.5px solid rgba(192, 57, 43, 0.55);
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 2;
    line-height: 1;
}
.sm-hero-delete > i { font-size: 14px; line-height: 1; display: block; }
.sm-hero-delete:hover {
    background: #c0392b;
    color: #fff;
    transform: scale(1.08);
}

/* ── Personal hero photo framing (pan + zoom) — Maya 2026-06-15 ──────────
   The client adds a photo, then drags + zooms it so it sits correctly in
   the fixed hero box instead of being auto-cropped to center. We clip the
   wrap (overflow hidden) so a zoomed image never spills, and move the
   image's radius + bottom margin onto the wrap so the clip is clean. */
.sm-hero-wrap {
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 20px;
}
.sm-hero-wrap > img.day-hero {
    display: block;
    margin-bottom: 0;          /* moved to the wrap */
    border-radius: 0;          /* wrap clips the corners now */
    transition: object-position 0.05s linear;
    will-change: transform, object-position;
}
/* Keep the "personal photo" highlight ring visible on the clipping wrap. */
.sm-hero-wrap:has(> img.sm-hero-overridden) {
    box-shadow: 0 0 0 2px rgba(236, 112, 11, 0.55), 0 4px 14px rgba(0, 0, 0, 0.12);
}
.sm-hero-wrap > img.sm-hero-overridden { box-shadow: none; }

/* Re-frame button — third button on the hero overlay, right of delete. */
.sm-hero-crop-open {
    position: absolute;
    bottom: 10px;
    left: 102px;               /* 10px right of .sm-hero-delete (left:56 + 36) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #b85a00;
    border: 1.5px solid rgba(236, 112, 11, 0.65);
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 2;
    line-height: 1;
}
.sm-hero-crop-open > i { font-size: 14px; line-height: 1; display: block; }
.sm-hero-crop-open:hover {
    background: #EC700B;
    color: #fff;
    transform: scale(1.08);
}

/* While framing: show a move cursor and dim nothing — the live image is
   the preview. The control bar sits over the bottom of the hero box. */
.sm-hero-wrap.sm-hero-editing { cursor: move; touch-action: none; }
.sm-hero-wrap.sm-hero-editing > img.day-hero { transition: none; }
.sm-hero-crop-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;                /* above the camera / delete / crop buttons */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.45));
    backdrop-filter: blur(2px);
}
.sm-hero-crop-hint {
    color: #fff;
    font-size: 0.82em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.sm-hero-crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sm-hero-crop-zoom > i { color: #fff; font-size: 13px; }
.sm-hero-crop-zoom > input[type="range"] {
    flex: 1;
    accent-color: #EC700B;
    cursor: pointer;
}
.sm-hero-crop-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.sm-hero-crop-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.sm-hero-crop-btn.primary { background: #EC700B; color: #fff; }
.sm-hero-crop-btn.ghost {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}
.sm-hero-crop-btn:active { transform: scale(0.97); }

/* Single "+" hero trigger (Maya 2026-06-15): replaces the camera+trash+crop
   trio. Small, semi-transparent so it doesn't fight the photo; opens the
   .sm-add-menu (same menu used on itinerary content blocks). */
.sm-hero-add-wrap { position: absolute; bottom: 10px; left: 10px; z-index: 3; }
.sm-hero-add {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    border: 1.5px solid rgba(236, 112, 11, 0.55);
    color: #b85a00;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s;
}
.sm-hero-add:hover {
    background: #EC700B;
    color: #fff;
    border-color: #EC700B;
    transform: scale(1.08);
}
.sm-hero-editing .sm-hero-add-wrap { display: none; } /* hide while framing */

/* ── "מה חדש / ברוכים הבאים" onboarding slides popup — Maya 2026-06-16 ── */
.wn-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease-out;
    direction: rtl;
}
.wn-overlay.open { opacity: 1; }
.wn-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #222);
    border-radius: 20px;
    padding: 30px 24px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s ease-out;
    font-family: inherit;
}
.wn-overlay.open .wn-card { transform: translateY(0) scale(1); }
.wn-close {
    position: absolute;
    top: 12px;
    left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #888;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.wn-close:hover { background: rgba(0, 0, 0, 0.12); color: #444; }
.wn-icon { font-size: 52px; line-height: 1; margin: 6px 0 14px; }
.wn-title {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--primary-color, #EC700B);
}
.wn-body {
    font-size: 1em;
    line-height: 1.65;
    margin: 0 0 18px;
    color: var(--text-color, #444);
    min-height: 4.6em; /* steady height so buttons don't jump between slides */
    white-space: pre-line; /* honor \n line breaks in slide bodies */
}
.wn-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-bottom: 18px;
}
.wn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
    transition: background 0.2s, transform 0.2s;
}
.wn-dot.on { background: var(--primary-color, #EC700B); transform: scale(1.25); }
.wn-nav { display: flex; gap: 10px; }
.wn-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.wn-btn.primary { background: var(--primary-color, #EC700B); color: #fff; }
.wn-btn.primary:hover { filter: brightness(0.95); }
.wn-btn.ghost { background: rgba(0, 0, 0, 0.05); color: var(--text-color, #555); }
.wn-btn:active { transform: scale(0.98); }

/* Settings entry button that re-opens the tour. */
.wn-settings-open {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1.5px solid var(--primary-color, #EC700B);
    border-radius: 10px;
    background: var(--primary-color, #EC700B);
    color: #fff;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
}
.wn-settings-open:hover { filter: brightness(0.96); }

html[data-theme="dark"] .wn-close { background: rgba(255,255,255,0.12); color: #ccc; }
html[data-theme="dark"] .wn-btn.ghost { background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .wn-dot { background: rgba(255,255,255,0.22); }

/* Tap-to-reveal delete UX (Maya 2026-05-31 round 2).
   Photos render clean — no overlay covering the image. First tap on a
   photo adds `.selected` to its tile; an action bar with the מחק button
   slides in BELOW the photo (does not obscure the photo). Tap the
   button to delete (with confirm). Tap the photo again while selected
   → opens the lightbox. Tap outside any tile → dismisses. Same classes
   apply to both .sm-photo-tile (activity photos in day cards) and
   .sm-mystory-tile (the "Story Mode" gallery). */
.sm-photo-tile,
.sm-mystory-tile {
    position: relative;
}
.sm-photo-tile.selected,
.sm-mystory-tile.selected {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}
.sm-photo-tile-actions {
    display: none;
    margin-top: 6px;
    text-align: center;
}
.sm-photo-tile.selected .sm-photo-tile-actions,
.sm-mystory-tile.selected .sm-photo-tile-actions {
    display: block;
    animation: smTileBarIn 0.18s ease-out;
}
@keyframes smTileBarIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sm-photo-tile-del {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 5px 14px;
    font-size: 0.85em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.32);
    transition: transform 0.1s, box-shadow 0.15s;
}
.sm-photo-tile-del:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(192, 57, 43, 0.4);
}
.sm-photo-tile-del > i { font-size: 0.85em; }

/* Lightbox delete button — top-left corner, mirroring the × close button
   on the top-right. Maya 2026-06-10 (demo prep): was bottom-center where
   it collided with the caption field. */
.sm-lightbox-delete {
    position: absolute;
    top: 14px;
    left: 18px;
    background: rgba(220, 53, 69, 0.92);
    color: #fff;
    border: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.15em; line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-lightbox-delete:hover { background: #a02030; transform: scale(1.08); }

/* Lightbox: swipe gallery with caption */
.sm-lightbox-stage {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: default;
}
.sm-lightbox-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    background: #000;
}
.sm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    font-size: 2em; line-height: 44px;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.sm-lightbox-nav:hover { background: rgba(255,255,255,0.34); }
.sm-lightbox-prev { right: 12px; }
.sm-lightbox-next { left: 12px; }
.sm-lightbox-counter {
    color: #fff; font-size: 0.9em; opacity: 0.8;
}
.sm-lightbox-caption {
    width: min(600px, 90vw);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Caption ✓ save button (Maya 2026-06-10, demo prep): appears while
   typing, turns green when the caption was saved. */
.sm-lightbox-caption-save {
    flex: 0 0 auto;
    background: var(--primary-color, #EC700B);
    color: #fff;
    border: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background 0.2s, transform 0.1s;
}
.sm-lightbox-caption-save:hover { transform: scale(1.06); }
.sm-lightbox-caption-save.saved { background: #2e9e44; }
.sm-lightbox-caption-input {
    width: 100%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95em;
    direction: rtl;
    text-align: right;
    resize: none;
    backdrop-filter: blur(6px);
}
.sm-lightbox-caption-input::placeholder { color: rgba(255,255,255,0.5); }
.sm-lightbox-caption-input:focus { outline: 2px solid #EC700B; border-color: #EC700B; }

/* My Story tab content */
#mystory-tab { padding-top: 20px; }
#mystory-tab .sm-mystory-header { text-align: center; margin-top: 8px; margin-bottom: 18px; }
#mystory-tab .sm-mystory-header h2 { color: #EC700B; font-size: 1.6em; margin-bottom: 6px; }
#mystory-tab .sm-mystory-sub { color: #666; }
.sm-mystory-empty {
    padding: 40px 24px;
    text-align: center;
    background: #fffaf2;
    border: 1px dashed #f0c794;
    border-radius: 12px;
    color: #888;
}
.sm-mystory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.sm-mystory-tile {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: zoom-in;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sm-mystory-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sm-mystory-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.sm-mystory-cap {
    padding: 8px 10px;
    font-size: 0.88em;
    color: #444;
    border-top: 1px solid #f0c794;
    line-height: 1.4;
}
.sm-mystory-cap-empty { color: #aaa; font-style: italic; font-size: 0.8em; }

/* ════════════════════════════════════════════════════════════════════
   NAV HAMBURGER + SETTINGS TAB (Maya 2026-05-16)
   Hamburger is the mobile-only nav entry. Desktop keeps the horizontal
   .quick-links bar. Settings tab consolidates font controls, print,
   map-app preference, user manual and contact info — replacing the
   floating buttons.
   ════════════════════════════════════════════════════════════════════ */

/* Hamburger button — lives INSIDE <header> on every viewport (Maya 2026-05-28).
   Absolute-positioned at top-right so it stays glued to the sticky header
   bar and is always visible alongside the trip title + flag. The drawer
   opens from the right via .quick-links.open (mobile breakpoint below). */
.nav-hamburger {
    display: flex;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 5;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 0.95em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.nav-hamburger i { color: #fff; font-size: 1.1em; }
.nav-hamburger:hover { background: rgba(255, 255, 255, 0.32); }
.nav-hamburger.open { background: #fff; color: var(--primary-color); border-color: #fff; }
.nav-hamburger.open i { color: var(--primary-color); }

/* Overlay behind the slide-in panel (mobile) */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nav-overlay.show {
    display: block;
    opacity: 1;
}

/* Settings tab — block layout */
.settings-block {
    margin-bottom: 16px;
}
.settings-block h3 {
    margin-bottom: 6px;
    font-size: 1.1em;
}
.settings-block h3 i {
    color: var(--primary-color);
    margin-left: 6px;
}

/* Settings font controls — bigger, in-row (override the floating .font-btn) */
.settings-font-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.settings-block .font-btn,
.settings-font-controls .font-btn {
    width: 56px;
    height: 48px;
    background: var(--primary-color, #EC700B);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.15em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-block .font-btn.font-reset,
.settings-font-controls .font-btn.font-reset {
    background: #888;
    font-size: 1em;
}
.settings-block .font-btn:hover,
.settings-font-controls .font-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Radio group for map app preference */
.settings-radio-group {
    display: grid;
    gap: 10px;
}
.settings-radio-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95em;
    transition: background 0.2s ease;
}
.settings-radio-group label:hover { background: rgba(0, 0, 0, 0.06); }
.settings-radio-group input[type="radio"] {
    accent-color: var(--primary-color, #EC700B);
    transform: scale(1.2);
    cursor: pointer;
}

/* Accordion items inside the manual */
.manual-acc {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-bottom: 8px;
    background: rgba(255, 251, 245, 0.5);
    overflow: hidden;
}
.manual-acc > summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.manual-acc > summary::-webkit-details-marker { display: none; }
.manual-acc > summary::after {
    content: "▾";
    margin-right: auto;
    transition: transform 0.25s ease;
    color: var(--primary-color, #EC700B);
}
.manual-acc[open] > summary::after { transform: rotate(180deg); }
.manual-acc > summary i { color: var(--primary-color, #EC700B); }
.manual-acc-body {
    position: relative;
    padding: 4px 18px 16px;
    font-size: 0.92em;
    line-height: 1.7;
    color: #444;
}

/* X close button — Maya 2026-06-15. Every accordion in the interface has
   the same close affordance. Same shape/colour as .accordion-close-x so
   the client doesn't learn two visual languages. */
.manual-acc-close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    background: rgba(85, 85, 85, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 5;
    padding: 0;
}
.manual-acc-close:hover {
    background: rgba(85, 85, 85, 0.9);
    transform: scale(1.1);
}
/* Glasses tab only (Maya 2026-06-18): the X sits in the BOTTOM-LEFT corner of
   the block. The body reserves space at the bottom so the X never overlaps the
   text. Scoped to #glasses-tab — the Settings accordions are untouched. */
#glasses-tab .manual-acc-body {
    position: relative;
    padding-bottom: 46px;
}
#glasses-tab .manual-acc-close {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: 12px;
    float: none;
    margin: 0;
}
.manual-acc-body ol,
.manual-acc-body ul {
    padding-right: 22px;
    margin: 8px 0;
}
.manual-acc-body li { margin: 6px 0; }
.manual-acc-body strong { color: var(--primary-color, #EC700B); }
.manual-acc-body .tip {
    background: rgba(255, 152, 0, 0.08);
    border-right: 3px solid #ff9800;
    padding: 10px 14px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    font-size: 0.92em;
}

/* ──────── MOBILE BREAKPOINT — nav becomes a slide-in panel ──────── */
@media (max-width: 768px) {
    /* Hide the horizontal nav by default on mobile; reveal as right-side panel when .open */
    .quick-links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 78%;
        max-width: 320px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 24px 18px;
        background: var(--card-bg, #fff);
        border-radius: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 999;
        overflow-y: auto;
        gap: 4px;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        margin-bottom: 0;
    }
    .quick-links.open {
        display: flex;
        transform: translateX(0);
    }
    .quick-links .q-link {
        flex: 0 0 auto;
        text-align: right;
        padding: 14px 12px;
        margin: 0;
        border-radius: 10px;
        font-size: 1em;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .quick-links .q-link i {
        display: inline-block;
        font-size: 1.25em;
        margin-bottom: 0;
        width: 28px;
        text-align: center;
    }
    .quick-links .q-link.active {
        background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.08);
    }

    /* Settings font buttons stay row, but shrink slightly */
    .settings-font-controls .font-btn { width: 52px; height: 44px; }
}

/* Print: don't print the hamburger or the slide-in nav */
@media print {
    .nav-hamburger,
    .nav-overlay { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY HEADER WITH HAMBURGER INSIDE (Maya 2026-05-28 / 2026-05-29)
   The hamburger is positioned absolutely inside <header> at .nav-hamburger
   above. Padding-right is set in the base `header` rule (line ~660). This
   block only carries mobile-specific tweaks for the title + hamburger label.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.55em !important;     /* shrinks the poster title on phone */
        line-height: 1.2;
        text-align: center;
        letter-spacing: 1px;
    }
    .nav-hamburger-label {
        display: none;
    }
    .quick-links {
        background: var(--bg-color, #fff8e1) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES (Maya 2026-05-16)
   When `applyTheme('dark')` runs, the CSS variables already shift
   (--bg-color, --card-bg, --text-color). These rules patch the many
   places in the templates that hard-code white/black instead of using
   variables — keeps cards, modals, day-cards, lists readable in dark.
   ════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background: var(--bg-color);
    color: var(--text-color);
}
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .day-card,
html[data-theme="dark"] .tip-card,
html[data-theme="dark"] .hotel-card,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .travelers-card,
html[data-theme="dark"] .quick-links,
html[data-theme="dark"] .nav-hamburger,
html[data-theme="dark"] .settings-block,
html[data-theme="dark"] .manual-acc {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .manual-acc {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .manual-acc-body { color: #cfcfcf; }
html[data-theme="dark"] .manual-acc-body .tip {
    background: rgba(255, 152, 0, 0.12);
    color: #e6e6e6;
}
html[data-theme="dark"] .settings-radio-group label {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}
html[data-theme="dark"] .settings-radio-group label:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* Inputs / textareas inside the dark theme */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #2a2f38;
    color: #e6e6e6;
    border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #888; }

/* Anything that hard-codes `color: #555` / `#333` / `#777` etc. gets a soft
   light fallback. Brand-color text (links, buttons) stays untouched because
   it uses --primary-color which already shifts. */
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #777"],
html[data-theme="dark"] [style*="color:#777"],
html[data-theme="dark"] [style*="color: #888"],
html[data-theme="dark"] [style*="color:#888"] {
    color: #cfcfcf !important;
}
/* Hard-coded white backgrounds → swap to card surface */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: white"] {
    background: var(--card-bg) !important;
    color: var(--text-color);
}

/* ════════════════════════════════════════════════════════════════════
   PER-CITY TIPS BLOCKS in "כמו מקומיים" tab (Maya 2026-05-16)
   One <details> per city. Categories inside (districts/culinary/...) are
   all open. Today's city auto-opens at render time.
   ════════════════════════════════════════════════════════════════════ */

.city-tips-heading {
    margin: 35px 0 14px;
    color: var(--primary-color);
    font-size: 1.3em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.city-tips-heading i { font-size: 0.95em; }

.city-tips-block {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.city-tips-summary {
    cursor: pointer;
    padding: 16px 20px;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 236, 112, 11), 0.08) 0%, transparent 100%);
}
.city-tips-summary::-webkit-details-marker { display: none; }
.city-tips-summary::after {
    content: "▾";
    margin-right: auto;
    color: var(--primary-color);
    font-size: 1.1em;
    transition: transform 0.25s ease;
}
.city-tips-block[open] > .city-tips-summary::after { transform: rotate(180deg); }

.city-tips-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
}
.city-tips-subtitle {
    font-size: 0.92em;
    color: #777;
    opacity: 0.95;
}
.city-nights {
    margin-right: auto;
    font-size: 0.85em;
    color: #888;
}

.city-tips-body {
    padding: 8px 20px 22px;
}

.city-section {
    margin: 18px 0;
}
.city-section h4 {
    color: var(--primary-color);
    font-size: 1.05em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
}
.city-section-intro {
    color: #666;
    font-size: 0.92em;
    font-style: italic;
    margin-bottom: 12px;
}

/* Named item rows (districts, markets, cafes, attractions) */
.city-item-row {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.city-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.city-item-head strong { color: #333; font-size: 1em; }
.city-item-tag {
    background: var(--primary-color);
    color: white;
    font-size: 0.72em;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.city-item-sub {
    color: var(--primary-color);
    font-size: 0.85em;
    font-style: italic;
    margin-bottom: 4px;
}
.city-item-desc { color: #555; font-size: 0.92em; line-height: 1.6; }

/* Dish cards (culinary) */
.city-dish-card {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, transparent 100%);
    border-right: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.city-dish-name {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 4px;
}
.city-dish-sub {
    color: #777;
    font-weight: normal;
    font-size: 0.88em;
}
.city-dish-desc { color: #555; font-size: 0.92em; line-height: 1.6; }

/* Tip rows */
.city-tip-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.city-tip-row:last-child { border-bottom: none; }
.city-tip-icon {
    font-size: 1.4em;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
}

/* Dark-mode overrides for city blocks */
html[data-theme="dark"] .city-tips-block { background: var(--card-bg); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .city-item-head strong,
html[data-theme="dark"] .city-item-desc,
html[data-theme="dark"] .city-dish-desc { color: #d8d8d8; }
html[data-theme="dark"] .city-section-intro { color: #aaa; }
html[data-theme="dark"] .city-item-row { background: rgba(255, 255, 255, 0.04); }

/* Mobile breakpoint — slightly tighter padding */
@media (max-width: 768px) {
    .city-tips-summary { padding: 14px 16px; gap: 8px; }
    .city-tips-name { font-size: 1.1em; }
    .city-tips-body { padding: 6px 14px 18px; }
    .city-section { margin: 14px 0; }
    .city-item-row, .city-dish-card { padding: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   GENERAL TIPS BLOCK — above the per-city blocks (Maya 2026-05-16).
   One open <details> with a responsive grid of category cards.
   ════════════════════════════════════════════════════════════════════ */
.general-tips-block {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin: 30px 0 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.general-tips-summary {
    cursor: pointer;
    padding: 16px 20px;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    /* Maya 2026-05-29 round 8 — switched tint from --primary-color to
       --accent-color. Vietnam's primary is pure red and produced pink at
       any blend ratio. Accent for Vietnam is gold (#FFD700) which mixes
       with cream into a clean light-gold tint. Every other theme's
       accent is also a softer companion to its primary, so this works
       universally without per-theme overrides. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 22%, var(--card-bg)) 0%,
        var(--card-bg) 100%);
}
.general-tips-summary::-webkit-details-marker { display: none; }
.general-tips-summary::after {
    content: "▾";
    margin-right: auto;
    color: var(--primary-color);
    transition: transform 0.25s ease;
}
.general-tips-block[open] > .general-tips-summary::after { transform: rotate(180deg); }
.general-tips-name { font-size: 1.2em; font-weight: bold; color: var(--primary-color); }
.general-tips-sub { font-size: 0.85em; color: #888; }

.general-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    padding: 8px 18px 22px;
}
/* Collapsible sub-section inside the "טיפים כלליים" + "קולינריה" blocks
   (Maya 2026-06-18) — each topic opens only on tap, no wall of text. */
.tips-sub-acc {
    background: rgba(0, 0, 0, 0.025);
    border-right: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    margin: 8px 0;
}
.tips-sub-acc > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tips-sub-acc > summary::-webkit-details-marker { display: none; }
.tips-sub-acc > summary::after {
    content: '▾';
    margin-inline-start: auto;
    opacity: 0.55;
    transition: transform 0.2s;
}
.tips-sub-acc[open] > summary::after { transform: rotate(180deg); }
.tips-sub-acc-body { padding: 0 14px 14px; }
.tips-sub-acc-body ul { list-style: none; padding: 0; margin: 0; }
.tips-sub-acc-body li {
    color: #555;
    font-size: 0.92em;
    line-height: 1.65;
    padding: 6px 0;
    padding-inline-start: 18px;
    position: relative;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.tips-sub-acc-body li:last-child { border-bottom: none; }
.tips-sub-acc-body li::before {
    content: '•';
    color: var(--primary-color);
    position: absolute;
    inset-inline-start: 0;
}
html[data-theme="dark"] .tips-sub-acc { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .tips-sub-acc-body li { color: var(--text-color); }

.general-tip-card {
    background: rgba(0, 0, 0, 0.025);
    border-right: 3px solid var(--primary-color);
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
}
.general-tip-card h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.general-tip-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.general-tip-card li {
    color: #555;
    font-size: 0.92em;
    line-height: 1.65;
    padding: 6px 0;
    padding-right: 18px;
    position: relative;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.general-tip-card li:last-child { border-bottom: none; }
.general-tip-card li::before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    right: 0;
    top: 6px;
    font-weight: bold;
}

/* Dark mode */
html[data-theme="dark"] .general-tips-block { background: var(--card-bg); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .general-tip-card { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .general-tip-card li { color: #d8d8d8; border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .general-tips-sub { color: #aaa; }

@media (max-width: 768px) {
    .general-tips-grid { grid-template-columns: 1fr; padding: 6px 14px 18px; }
    .general-tips-name { font-size: 1.1em; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — class-based color overrides (Maya 2026-05-16 round 2)
   The earlier dark-mode block caught inline styles. These rules catch
   class-based color: #333 / #555 / #777 etc. that wouldn't swap on their
   own. Each rule names the class explicitly so we don't blanket-override.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .expense-item .expense-desc,
html[data-theme="dark"] .expense-item .expense-category,
html[data-theme="dark"] .expense-item .expense-amount,
html[data-theme="dark"] .expense-item .expense-meta,
html[data-theme="dark"] .day-content,
html[data-theme="dark"] .day-content p,
html[data-theme="dark"] .day-content strong,
html[data-theme="dark"] .day-card .day-intro,
html[data-theme="dark"] .day-card .day-intro p,
html[data-theme="dark"] .timeline-item .desc,
html[data-theme="dark"] .timeline-item h4,
html[data-theme="dark"] .hotel-card,
html[data-theme="dark"] .hotel-card p,
html[data-theme="dark"] .flight-info,
html[data-theme="dark"] .flight-info p,
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .info-card li,
html[data-theme="dark"] .info-card strong,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .booking-card p {
    color: var(--text-color) !important;
}

/* Lighter "subtle" text (was #777 / #888) in dark mode */
html[data-theme="dark"] .meta,
html[data-theme="dark"] .subtle,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .day-intro small,
html[data-theme="dark"] .timeline-item .time,
html[data-theme="dark"] .timeline-item small,
html[data-theme="dark"] .phrase-pron,
html[data-theme="dark"] .phrases-intro {
    color: #aaa !important;
}

/* Tip-card bulleted items (Maya 2026-05-16) — proper spacing + dark fix */
.tip-card-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tip-card-items li {
    padding: 10px 0;
    padding-right: 18px;
    position: relative;
    line-height: 1.7;
    color: var(--text-color);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.tip-card-items li:last-child { border-bottom: none; }
.tip-card-items li::before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    right: 0;
    top: 10px;
    font-weight: bold;
}
html[data-theme="dark"] .tip-card-items li { color: var(--text-color); border-bottom-color: rgba(255, 255, 255, 0.08); }

/* Phrases card — list layout (replaces the old <p> with <br> dump) */
.phrases-intro {
    color: #777;
    font-size: 0.95em;
    margin-bottom: 12px;
    font-style: italic;
}
.phrases-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.phrases-list li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    line-height: 1.7;
    color: var(--text-color);
}
.phrases-list li:last-child { border-bottom: none; }
.phrases-list strong { color: var(--primary-color); }
.phrase-pron { color: #888; font-size: 0.9em; }
html[data-theme="dark"] .phrases-list li { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ════════════════════════════════════════════════════════════════════
   TIPS-ACCORDION DARK-THEME OVERRIDE (Maya 2026-05-17 — round 4 scope fix)
   Earlier round-3 unconditionally replaced the brand-gradient header with
   a subtle 12% tint — this washed out the colored themes (Ocean / Sunset
   / Forest / Desert / Purple / Destination flag). Now the override is
   SCOPED to dark mode only; light themes keep their original vibrant
   brand-gradient header.
   ════════════════════════════════════════════════════════════════════ */
.tips-accordion {
    border: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .tips-accordion-header {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 255, 138, 74), 0.18) 0%, transparent 100%);
    color: var(--text-color);
}
html[data-theme="dark"] .tips-accordion-header h3,
html[data-theme="dark"] .tips-accordion-header i.toggle-icon { color: var(--primary-color); }
html[data-theme="dark"] .tips-accordion { border-color: rgba(255, 255, 255, 0.08); }

/* Close-X button for the new tips blocks (general + city). Matches the
   look of the legacy .tips-accordion-close. */
.tips-block-close {
    display: block;
    margin: 14px auto 16px;
    width: 30px;
    height: 30px;
    background: rgba(85, 85, 85, 0.55);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tips-block-close:hover { background: rgba(85, 85, 85, 0.9); transform: scale(1.08); }
html[data-theme="dark"] .tips-block-close { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .tips-block-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Bingo card — THE one bright gradient block in the Tips tab (Maya 2026-05-28).
   All other blocks (before-flight, on-ground, general tips, culinary, per-city)
   use the soft brand-tint style. Bingo gets the loud red/yellow gradient because
   it's the call-to-action — every other block is informational. */
.bingo-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border: none;
    border-radius: 14px;
    margin: 14px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 22px 20px;
    color: #fff;
}
.bingo-card h3 {
    color: #fff;
    margin-bottom: 8px;
    justify-content: center;
    text-align: center;
}
.bingo-card p { color: #fff; margin: 8px 0 14px; }
.bingo-card .btn {
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.bingo-card .btn:hover { background: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] .bingo-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border: none;
}

/* Plain-accordion modifier (Maya 2026-05-28 + 2026-05-29): kills the bright
   gradient header on .tips-accordion so before-flight + on-ground +
   packing-list categories visually match the .general-tips-block +
   .culinary-block look exactly — same border, radius, shadow, padding. */
.tips-accordion.plain-accordion {
    border-radius: 14px;                          /* was 20px on base */
    border: 1px solid rgba(0, 0, 0, 0.08);        /* base has no border */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);   /* lighter than base */
}
.tips-accordion.plain-accordion .tips-accordion-header {
    padding: 16px 20px;
    /* accent-color blend — parity with .general-tips-summary (Maya 2026-05-29 round 8) */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 22%, var(--card-bg)) 0%,
        var(--card-bg) 100%);
    color: var(--primary-color);
}
.tips-accordion.plain-accordion .tips-accordion-header h3,
.tips-accordion.plain-accordion .tips-accordion-header i.toggle-icon {
    color: var(--primary-color);
}

/* ════════════════════════════════════════════════════════════════════
   NAV PANEL HEADER + FOOTER (Maya 2026-05-16 round 3)
   Mobile-only nav panel now opens with: brand logo + client name + dates
   at the top, navigation links in the middle, and "Created by MDJ" +
   contact icons at the bottom — same UX pattern as Outlook / Booking.
   ════════════════════════════════════════════════════════════════════ */

.nav-panel-header,
.nav-panel-footer { display: none; }

@media (max-width: 768px) {
    .nav-panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 14px 18px;
        margin: -24px -18px 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 236, 112, 11), 0.12) 0%, transparent 100%);
    }
    .nav-panel-logo {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        flex-shrink: 0;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .nav-panel-text { min-width: 0; flex: 1; }
    .nav-panel-name {
        font-weight: bold;
        font-size: 1.05em;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    .nav-panel-dates {
        font-size: 0.82em;
        color: var(--text-color);
        opacity: 0.7;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-panel-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 14px 14px 16px;
        margin: auto -18px -24px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.02);
    }
    .nav-panel-brand {
        font-size: 0.78em;
        color: var(--text-color);
        opacity: 0.65;
        text-decoration: none;
        text-align: center;
        line-height: 1.4;
    }
    .nav-panel-brand:hover { opacity: 1; color: var(--primary-color); }
    .nav-panel-contact {
        display: flex;
        gap: 14px;
    }
    .nav-panel-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--primary-color);
        color: white !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 1.1em;
        transition: transform 0.2s ease;
    }
    .nav-panel-icon:hover { transform: scale(1.1); }
    .nav-panel-icon i { color: white; }
}

/* Dark-mode panel header/footer */
html[data-theme="dark"] .nav-panel-header {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 255, 138, 74), 0.15) 0%, transparent 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .nav-panel-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — round 3 (Maya 2026-05-16)
   More class-based color overrides. Maya pointed at: destinationSummary
   ("2 לילות" + dates), activity titles ("נחיתה בהאנוי" etc.),
   crowd-warning box, expense categories. All hard-coded #333/#777 in CSS
   rules — invisible-to-attribute-selector overrides.
   ════════════════════════════════════════════════════════════════════ */

/* Activity titles in timeline items (was hardcoded #333) */
html[data-theme="dark"] .activity,
html[data-theme="dark"] .timeline-item .activity { color: var(--text-color) !important; }

/* Destination summary table — table of contents at top of itinerary */
html[data-theme="dark"] .dest-summary-table {
    background: var(--card-bg);
}
html[data-theme="dark"] .dest-summary-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .dest-summary-row:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .dest-summary-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
html[data-theme="dark"] .dest-summary-row:nth-child(even):hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .dest-summary-name strong,
html[data-theme="dark"] .dest-summary-dates,
html[data-theme="dark"] .dest-summary-dates strong { color: var(--text-color) !important; }
html[data-theme="dark"] .dest-summary-desc { color: #aaa !important; }

/* Crowd warning box — was light-yellow gradient (illegible bg-on-bg in dark).
   Use a translucent amber tint instead, keep brand-style warning vibe. */
html[data-theme="dark"] .crowd-warning-box {
    background: rgba(249, 168, 37, 0.12) !important;
    color: var(--text-color) !important;
    border-right-color: #f9a825 !important;
}
html[data-theme="dark"] .crowd-warning-box strong { color: #ffcc80 !important; }

/* Tip / options boxes that share the same light-bg pattern */
html[data-theme="dark"] .tip-box,
html[data-theme="dark"] .day-options-box {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-color) !important;
}

/* Expense category labels + descriptions — earlier round caught the icon
   but not the inline name+amount which use various classes. Cast wider. */
html[data-theme="dark"] .expense-item,
html[data-theme="dark"] .expense-item *:not(button):not(.btn):not(i) { color: var(--text-color); }
html[data-theme="dark"] .expense-name,
html[data-theme="dark"] .expense-title,
html[data-theme="dark"] .category-name,
html[data-theme="dark"] .category-label { color: var(--text-color) !important; }
html[data-theme="dark"] .expense-meta,
html[data-theme="dark"] .expense-date,
html[data-theme="dark"] .expense-currency { color: #aaa !important; }

/* Catch-all for any remaining inline rgb(...) dark text inside cards */
html[data-theme="dark"] .info-card *:not(button):not(.btn):not(i):not(a) { color: inherit; }
html[data-theme="dark"] .day-content *:not(button):not(.btn):not(i):not(a):not(.time) { color: inherit; }
html[data-theme="dark"] .day-content,
html[data-theme="dark"] .day-content p,
html[data-theme="dark"] .day-content strong { color: var(--text-color); }

/* ════════════════════════════════════════════════════════════════════
   CULINARY ACCORDION (Maya 2026-05-17)
   Standalone block in "כמו מקומיים" tab. Contains: sweetness warning,
   national dishes, coffee culture, per-city signatures, dietary section.
   Image support per dish (falls back to 🍜 placeholder).
   ════════════════════════════════════════════════════════════════════ */

.culinary-block {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin: 14px 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.culinary-summary {
    cursor: pointer;
    padding: 16px 20px;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    /* accent-color blend — parity with .general-tips-summary */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 22%, var(--card-bg)) 0%,
        var(--card-bg) 100%);
}
.culinary-summary::-webkit-details-marker { display: none; }
.culinary-summary::after {
    content: "▾";
    margin-right: auto;
    color: var(--primary-color);
    transition: transform 0.25s ease;
}
.culinary-block[open] > .culinary-summary::after { transform: rotate(180deg); }
.culinary-name { font-size: 1.2em; font-weight: bold; color: var(--primary-color); }
.culinary-sub { font-size: 0.85em; color: #888; }

.culinary-body { padding: 16px 20px 8px; }
.culinary-intro { color: var(--text-color); line-height: 1.7; margin-bottom: 14px; }

.culinary-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, transparent 100%);
    border-right: 4px solid #ff9800;
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    margin: 14px 0 20px;
}
.culinary-warning strong { color: #e65100; display: block; margin-bottom: 6px; }
.culinary-warning p { line-height: 1.6; margin: 0; color: var(--text-color); }

.culinary-section { margin: 22px 0 14px; }
.culinary-section h4 {
    color: var(--primary-color);
    font-size: 1.1em;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 236, 112, 11), 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
}
.culinary-section-intro {
    color: #666;
    font-size: 0.92em;
    font-style: italic;
    margin-bottom: 12px;
}

.culinary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.culinary-dish {
    display: flex;
    gap: 12px;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 12px;
    padding: 10px;
    align-items: flex-start;
}
.culinary-img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.culinary-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.08);
    font-size: 2em;
    color: var(--primary-color);
}
.culinary-dish-body { flex: 1; min-width: 0; }
.culinary-dish-name {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1em;
    line-height: 1.3;
}
.culinary-dish-sub {
    color: #777;
    font-size: 0.85em;
    margin: 2px 0 6px;
}
.culinary-dish-desc {
    color: var(--text-color);
    font-size: 0.9em;
    line-height: 1.6;
}
.culinary-dish-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.culinary-tag {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.12);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72em;
    font-weight: 600;
}
.culinary-tag-spicy {
    background: rgba(255, 82, 82, 0.18); color: #d32f2f;
}
.culinary-tag-vegan,
.culinary-tag-vegetarian {
    background: rgba(76, 175, 80, 0.18); color: #2e7d32;
}
.culinary-tag-gluten-free {
    background: rgba(33, 150, 243, 0.18); color: #1565c0;
}
.culinary-tag-contains-gluten {
    background: rgba(158, 158, 158, 0.2); color: #555;
}

.culinary-city {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.culinary-city h5 {
    color: var(--primary-color);
    font-size: 1em;
    margin-bottom: 6px;
}
.culinary-city-intro {
    color: #666;
    font-size: 0.88em;
    font-style: italic;
    margin-bottom: 10px;
}

/* Dietary inner accordions */
.culinary-diet {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 4px 0;
}
.culinary-diet > summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.culinary-diet > summary::-webkit-details-marker { display: none; }
.culinary-diet > summary::after {
    content: "▾";
    margin-right: auto;
    color: var(--primary-color);
    font-size: 0.9em;
    transition: transform 0.25s ease;
}
.culinary-diet[open] > summary::after { transform: rotate(180deg); }
.culinary-diet-body { padding: 0 18px 12px; }
.culinary-diet-body ul {
    padding-right: 18px;
    margin: 0;
}
.culinary-diet-body li {
    padding: 6px 0;
    color: var(--text-color);
    line-height: 1.65;
    font-size: 0.92em;
}
.culinary-diet-phrase {
    background: rgba(var(--primary-color-rgb, 236, 112, 11), 0.06);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.92em;
    color: var(--text-color);
}
.culinary-diet-phrase strong { color: var(--primary-color); margin-left: 4px; }
.culinary-diet-phrase span { color: #888; }

/* Dark-mode tuning */
html[data-theme="dark"] .culinary-block { background: var(--card-bg); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .culinary-dish { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .culinary-city,
html[data-theme="dark"] .culinary-diet { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .culinary-warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, transparent 100%);
}
html[data-theme="dark"] .culinary-warning strong { color: #ffcc80; }
html[data-theme="dark"] .culinary-dish-sub,
html[data-theme="dark"] .culinary-section-intro,
html[data-theme="dark"] .culinary-city-intro,
html[data-theme="dark"] .culinary-diet-phrase span { color: #aaa; }
html[data-theme="dark"] .culinary-sub { color: #aaa; }

/* Mobile */
@media (max-width: 768px) {
    .culinary-grid { grid-template-columns: 1fr; gap: 10px; }
    .culinary-img { width: 72px; height: 72px; }
    .culinary-name { font-size: 1.1em; }
    .culinary-body { padding: 12px 14px 6px; }
}

/* "המדריכה שלי" guide hub: square blocks for Chat / Translations / Stories. */
.guide-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 22px;}
.gblock{background:#fff;border:2px solid #ececec;border-radius:18px;padding:18px 8px;text-align:center;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:9px;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s,border-color .2s;}
.gblock:hover{transform:translateY(-3px);box-shadow:0 9px 24px rgba(0,0,0,.12);}
.gblock.active{border-color:var(--primary-color,#EC700B);box-shadow:0 8px 22px rgba(0,0,0,.10);}
.gblock.active .gb-label{color:var(--primary-color,#EC700B);}
.gblock .gb-emoji{font-size:1.9em;line-height:1;}
.gblock .gb-label{font-size:.9em;font-weight:700;color:#444;}
@media(max-width:480px){.guide-blocks{gap:8px;}.gblock{padding:14px 5px;border-radius:14px;}.gblock .gb-label{font-size:.8em;}}
/* "טיפים / כמו מקומיים" blocks: square tiles with emoji, like the guide hub. */
.local-blocks{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.local-blocks .gblock{aspect-ratio:1/1;padding:8px 6px;justify-content:center;gap:6px;}
.local-blocks .gb-emoji{font-size:1.7em;}
.local-blocks .gb-label{font-size:.76em;line-height:1.2;}

/* Persistent story mini-player (always stoppable, visible across tabs). */
.mdj-story-player{position:fixed;left:12px;right:12px;bottom:14px;z-index:10000;display:flex;align-items:center;gap:10px;background:var(--primary-color,#EC700B);color:#fff;padding:10px 14px;border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.28);transform:translateY(140%);opacity:0;transition:transform .28s ease,opacity .28s ease;font-family:inherit;}
.mdj-story-player.show{transform:translateY(0);opacity:1;}
.mdj-story-player .msp-icon{font-size:1.1em;flex:0 0 auto;}
.mdj-story-player .msp-title{flex:1;font-weight:700;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mdj-story-player .msp-ctrls{display:flex;gap:6px;flex:0 0 auto;}
.mdj-story-player .msp-btn{background:rgba(255,255,255,.22);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.95em;display:flex;align-items:center;justify-content:center;}
.mdj-story-player .msp-btn:active{background:rgba(255,255,255,.4);}