/* ==========================================================================
   1. Global Resets, CSS Variables & Premium Typography
   ========================================================================== */
:root {
    /* V2 Summer Palette */
    --yellow:  #FFF9D2;   /* pale yellow — page bg */
    --peach:   #FFEBCC;   /* peach — card/surface */
    --sky:     #BFDDF0;   /* sky blue — borders, chips */
    --blue:    #8CC0EB;   /* steel blue — accent/active */
    --dark:    #2C4A6E;   /* deep blue — text, icons */

    /* Map old dark variable names → summer light equivalents */
    --btn-primary: #8CC0EB;
    --ocean-teal: #8CC0EB;
    --deep-teal: #FFEBCC;
    --dark-teal: #FFF9D2;
    --midnight: #FFFEF5;
    --navy-blue: #FFFFFF;
    --interactive-blue: #8CC0EB;

    /* Elevation */
    --bg-base: #FFFEF5;
    --bg-surface: #FFFFFF;
    --bg-input: #FFF9D2;
    --bg-card-deep: #FFFFFF;
    --bg-card-hover: #FFF0D6;
    --text-primary: #2C4A6E;
    --text-secondary: #6B829E;

    /* Semantic aliases */
    --color-primary: #CD5360;
    --color-secondary: var(--blue);
    --color-logo-dot: var(--blue);
    --color-interactive: var(--blue);
    --color-bg-main: var(--bg-base);
    --color-bg-card: #FFFFFF;
    --color-bg-card-deep: var(--peach);
    --color-bg-input: var(--yellow);
    --color-text-main: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-border: var(--sky);
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
}

html {
    height: -webkit-fill-available;
}

body {
    margin: 0;
    display: flex;
    height: 100vh;
    height: 100dvh; /* Chrome mobile: shrinks with browser UI, Firefox ignores */
    min-height: -webkit-fill-available; /* older Chrome/Safari fallback */
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    overflow: hidden;
}

/* ==========================================================================
   2. Layout & Page Containers
   ========================================================================== */
#map-container { 
    flex: 1; 
    position: relative; 
    height: 100%;
    margin-right: 35%; /* Reserves space for sidebar */
    transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* media queries to match min/max widths of the sidebar itinerary panel */
@media (min-width: 1428px) {
    #map-container {
        margin-right: 500px;
    }
}
@media (max-width: 1200px) {
    #map-container {
        margin-right: 420px;
    }
}

.sidebar-collapsed #map-container {
    margin-right: 72px;
}

@media (max-width: 768px) {
    #map-container {
        margin-right: 0 !important; /* sidebar overlays on mobile viewports */
    }
    .sidebar-collapsed #map-container {
        margin-right: 0 !important;
    }
}

#map { 
    width: 100%; 
    height: 100%; 
}

/* Sidebar Panel - Slate Dark Theme with deep drop shadow */
#itinerary-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35%;
    min-width: 420px;
    max-width: 500px;
    background: var(--color-bg-main);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    /* overflow-x must NOT be set here — it clips top:-26px positioned children (toggle, logo) */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    z-index: 100;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#itinerary-panel.collapsed {
    transform: translateX(100%);
}

/* Sidebar Toggle Button — positioned relative to #itinerary-panel */
.sidebar-toggle-btn {
    position: absolute;
    top: 0;
    height: 68px; /* overridden to panel-header height via JS syncToggleHeight() */
    left: -37px;
    width: 37px;
    background: var(--navy-blue);
    border: 1px solid rgba(144, 184, 224, 0.2);
    border-right: none;
    border-top: none;
    border-radius: 8px 0 0 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1000;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.12);
    outline: none;
    padding: 0;
}

.sidebar-toggle-btn:hover {
    color: var(--color-text-main);
    background: #1E5AA0;
    border-color: rgba(144, 184, 224, 0.4);
}

/* ==========================================================================
   3. Sidebar Header & Branding
   ========================================================================== */
.panel-header {
    padding: 24px 20px 16px 20px;
    background: var(--navy-blue);
    border-bottom: 1px solid rgba(144, 184, 224, 0.2);
}

/* Desktop: compact header flush with tabs */
@media (min-width: 769px) {
    .panel-header {
        padding: 10px 16px;
        border-bottom: none;
    }
    .tabs-container {
        padding: 0 6px;
        border-top: none;
    }
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Premium reeldot. Logo Styling */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-wrapper:hover {
    transform: translateY(-1px) scale(1.02);
}

.logo-icon {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 28px;
    height: 20px;
}

.logo-dot-large {
    width: 18px;
    height: 18px;
    background-color: var(--color-text-main);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.25s ease;
}

.logo-wrapper:hover .logo-dot-large {
    box-shadow: 0 0 12px var(--color-text-main);
}

.logo-dot-small {
    width: 6px;
    height: 6px;
    background-color: var(--color-text-main);
    border-radius: 50%;
    position: absolute;
    right: 1px;
    bottom: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Shiny reflection highlight on the small circle */
.logo-dot-small::after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    width: 1.5px;
    height: 1.5px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.9;
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    text-transform: lowercase;
    line-height: 1;
    display: flex;
    align-items: baseline;
    user-select: none;
}

.logo-dot-blue {
    color: var(--color-logo-dot);
    transition: text-shadow 0.25s ease;
}

.logo-wrapper:hover .logo-dot-blue {
    text-shadow: 0 0 8px var(--color-logo-dot);
}

.brand-badge {
    margin-left: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-text-main);
    background: var(--dark-teal);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(45, 110, 110, 0.5);
    white-space: nowrap;
}

/* ── Auth chip (Login button / user pill) ───────────────────────────────── */
.auth-chip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Hidden while /api/me is still loading — prevents layout flash */
.auth-chip--loading { display: none; }

/* Signed-out state: "Login" button (works as <a> or <button>) */
.auth-chip .auth-signin-btn,
.auth-chip a.auth-signin-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dark-teal);
    color: var(--color-text-main);
    border: 1px solid rgba(45, 110, 110, 0.5);
    border-radius: 20px;
    padding: 0 14px;
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1;
}
.auth-chip .auth-signin-btn:hover,
.auth-chip a.auth-signin-btn:hover { opacity: 0.85; }

/* Signed-in state: avatar + name pill — locked to same height as Login button */
.auth-chip .auth-user-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0 12px 0 5px;
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    position: relative;
    user-select: none;
}
.auth-dropdown {
    display: none;
    position: fixed; /* fixed so it's never clipped by overflow:hidden ancestors */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    min-width: 130px;
    z-index: 9999;
    overflow: hidden;
}
.auth-dropdown.open { display: block; }
.auth-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.15s;
}
.auth-dropdown-item:hover { background: rgba(255,255,255,0.07); }
.auth-chip .auth-avatar {
    width: 20px;
    height: 20px;
    max-height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    vertical-align: middle;
}
.auth-chip .auth-name { color: var(--color-text-main); }

/* Mobile auth chip — compact; no name text */
.auth-chip--mobile { margin-left: 8px; }
.auth-chip--mobile .auth-signin-btn,
.auth-chip--mobile a.auth-signin-btn { padding: 3px 9px; font-size: 11px; border-radius: 14px; }
.auth-chip--mobile .auth-user-pill { padding: 2px 8px 2px 3px; }
.auth-chip--mobile .auth-avatar { width: 18px; height: 18px; font-size: 9px; }
.auth-chip--mobile .auth-name { display: none; } /* avatar-only on mobile */

/* ── Login modal overlay ─────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 36px 28px 28px;
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.22s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.modal-close:hover { color: var(--color-text-main); background: rgba(255,255,255,0.06); }

.modal-brand .logo-text { font-size: 22px; }

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 4px 0 0;
    text-align: center;
}

.modal-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 6px;
    max-width: 260px;
}

/* Google sign-in button — follows Google brand guidelines */
.btn-google-signin {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--al);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.15s, background 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    margin-top: 4px;
}
.btn-google-signin:hover {
    background: var(--bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Desktop crew bubble — invite + history only (no fake avatars) ───────── */
.crew-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.collab-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
}
.btn-close-collab {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}
.btn-close-collab:hover { color: var(--color-text-main); }
.collab-history-empty {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
    padding: 10px 0;
}

.system-status-badge {
    display: none; /* Hidden by default - Dev Mode removed permanently */
    margin-left: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
    transition: all 0.25s ease;
}

.system-status-badge.dev-mode {
    background: rgba(245, 158, 11, 0.15); /* Amber/Orange tint */
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

.system-status-badge.pi-mode {
    background: rgba(16, 185, 129, 0.15); /* Green tint */
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

/* Mobile top header — hidden on desktop, shown on mobile */
#mobile-top-header {
    display: none;
}

.mobile-logo {
    display: none;
}

.mobile-collab-dropdown {
    display: none;
}

/* ==========================================================================
   4. Navigation Tabs
   ========================================================================== */
.tabs-container {
    display: flex;
    background: var(--navy-blue);
    padding: 0 6px;
    gap: 6px;
    border-bottom: 1px solid var(--color-border);
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    padding: 12px 6px 10px;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover {
    color: var(--color-text-main);
    border-bottom-color: rgba(45, 110, 110, 0.5);
}

/* Active tab — teal underline indicator */
.tab-btn.active {
    color: #fff;
    border-bottom: 3px solid var(--ocean-teal);
}

.tab-icon {
    font-size: 15px;
}

/* ==========================================================================
   Phosphor Icons — always white, sized to context
   ========================================================================== */
[class^="ph"],
[class*=" ph-"] {
    color: #fff;
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* Large placeholder icons (empty-state) */
.icon-placeholder [class^="ph"],
.icon-placeholder [class*=" ph-"] {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.7;
}

/* Spinner glyph — Phosphor icons are static, so animate circle-notch ourselves */
@keyframes phSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ph-circle-notch {
    display: inline-block;
    animation: phSpin 1s linear infinite;
}

/* ==========================================================================
   5. Dynamic Content Views
   ========================================================================== */
.views-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.view-page {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px;
    box-sizing: border-box;
    background: var(--color-bg-main);
}

/* Custom Webkit scrollbars for premium dark feel */
.view-page::-webkit-scrollbar {
    width: 6px;
}

.view-page::-webkit-scrollbar-track {
    background: var(--color-bg-main);
}

.view-page::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

.view-page::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

.cards-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grouped-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   6. Location Card Layouts
   ========================================================================== */
.location-item { 
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border); 
    padding: 18px 20px;
    border-radius: 12px; 
    cursor: pointer; 
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-item:hover { 
    background: var(--bg-card-hover);
    border-color: var(--color-logo-dot);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

/* Homebase badge icon shown next to card title */
.homebase-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 6px;
    opacity: 0.75;
    font-size: 14px;
}

/* Card title row: name + optional time badge side-by-side */
.card-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.location-item strong {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;           /* allow long names to truncate/wrap */
    word-break: break-word;
}

/* Time badge — inline with title, no absolute positioning */
.time-badge {
    flex-shrink: 0;
    background: var(--am);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(26, 79, 138, 0.4);
}

/* ==========================================================================
   7. Card Form Editors
   ========================================================================== */
.edit-form { 
    display: none; 
    margin-top: 16px; 
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.edit-form label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.edit-form input, .edit-form textarea { 
    width: 100%; 
    padding: 10px 12px; 
    margin-bottom: 12px; 
    box-sizing: border-box; 
    background: var(--color-bg-input);
    border: 1px solid var(--color-border); 
    color: var(--color-text-main);
    border-radius: 8px; 
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: all 0.2s;
}

.edit-form input:focus, .edit-form textarea:focus {
    border-color: var(--color-logo-dot);
    outline: none;
    box-shadow: 0 0 0 3px rgba(144, 184, 224, 0.25);
}

/* Date & Time Picker Custom Styles (Centering text and lighting up dark picker indicators) */
.edit-form input[type="date"],
.edit-form input[type="time"],
.inline-input[type="date"],
.inline-input[type="time"] {
    text-align: center;
}

.edit-form input[type="date"]::-webkit-calendar-picker-indicator,
.edit-form input[type="time"]::-webkit-calendar-picker-indicator,
.inline-input[type="date"]::-webkit-calendar-picker-indicator,
.inline-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.3);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.edit-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.edit-form input[type="time"]::-webkit-calendar-picker-indicator:hover,
.inline-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.inline-input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.edit-form textarea { 
    resize: vertical; 
    min-height: 70px; 
}

/* ==========================================================================
   8. Buttons & Controls
   ========================================================================== */
.btn-group { 
    display: flex; 
    gap: 8px; 
}

.btn-save { 
    background: var(--color-primary); 
    color: var(--color-text-main); 
    border: none; 
    padding: 10px 16px; 
    cursor: pointer; 
    flex: 1; 
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: opacity 0.2s;
    box-shadow: 0 2px 6px rgba(26, 78, 82, 0.4);
}

.btn-save:hover {
    opacity: 0.9;
}

.btn-delete { 
    background: #ef4444; 
    color: white; 
    border: none; 
    width: 42px;
    cursor: pointer; 
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-delete:hover { 
    background: #dc2626; 
}

.btn-clear { 
    background: transparent; 
    color: var(--color-logo-dot); 
    border: 1px dashed rgba(144, 184, 224, 0.4); 
    padding: 8px; 
    cursor: pointer; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 12px;
    margin-bottom: 12px; 
    width: 100%;
    transition: all 0.2s;
}

.btn-clear:hover {
    background: rgba(144, 184, 224, 0.1);
    border-color: var(--color-logo-dot);
}

/* ==========================================================================
   9. Daily Itinerary blocks & timelines
   ========================================================================== */
.date-block {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(45, 110, 110, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.date-block h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(45, 110, 110, 0.35);
}

.date-header {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-header:hover {
    color: var(--color-logo-dot);
}

.mode-select {
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: border 0.2s;
}

.mode-select:focus {
    border-color: var(--color-logo-dot);
}

.date-items-row { 
    display: flex; 
    flex-direction: column; 
}

.date-items-row .location-item { 
    margin-bottom: 0; 
    width: 100%;
    box-sizing: border-box;
}

/* Timeline Connectors & transit times indicators */
.transit-connector { 
    display: flex; 
    justify-content: center;
    align-items: center; 
    margin: 12px 0;
    position: relative;
    height: 40px;
}

.transit-line { 
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0px; 
    border-left: 2px dashed var(--color-border); 
    z-index: 1;
    transition: border-color 0.25s ease;
}

.transit-info { 
    position: relative;
    z-index: 2;
    background: var(--color-bg-input); 
    border: 1px solid var(--color-border); 
    border-radius: 20px; 
    padding: 6px 16px; 
    font-size: 11px; 
    color: var(--color-text-muted); 
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    margin: 0;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px; /* Improved spacing between elements */
    transition: all 0.25s ease;
}

/* Custom styles for select inside transit pill */
.connector-mode-select {
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-size: 11px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    padding: 2px 6px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.connector-mode-select:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.connector-mode-select option {
    background: var(--color-bg-card);
    color: var(--color-text-main);
    font-weight: 600;
}

/* Google Maps direction shortcut link */
.transit-map-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 2px;
}

.transit-map-link:hover {
    color: var(--color-logo-dot);
    transform: scale(1.2) translate(1px, -1px);
    text-shadow: 0 0 6px var(--color-logo-dot);
}

/* Color definitions for each transport type */
.transit-connector.mode-DRIVING .transit-line { border-left-color: #f43f5e; }
.transit-connector.mode-DRIVING .transit-info { border-color: #f43f5e; }

.transit-connector.mode-WALKING .transit-line { border-left-color: #10b981; }
.transit-connector.mode-WALKING .transit-info { border-color: #10b981; }

.transit-connector.mode-TRAIN .transit-line { border-left-color: #3B82F6; }
.transit-connector.mode-TRAIN .transit-info { border-color: #3B82F6; }

.transit-connector.mode-BUS .transit-line { border-left-color: #f59e0b; }
.transit-connector.mode-BUS .transit-info { border-color: #f59e0b; }

/* ==========================================================================
   10. Add-place button + Map Autocomplete Input Box
   ========================================================================== */

/* "+" floating button — mobile only, shown only in peek state */
#add-place-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 300;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 22px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background 0.15s, border-color 0.15s;
}
#add-place-btn:hover,
#add-place-btn.active {
    background: var(--color-logo-dot);
    border-color: var(--color-logo-dot);
    color: #fff;
}

/* Search bar — hidden by default, shown when add-place-btn is active */
#pac-input {
    position: absolute !important;
    top: 10px !important;
    left: 58px !important;   /* right of the + button */
    margin: 0 !important;
    width: 320px !important;
    height: 40px !important;
    padding: 0 16px !important;
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
    color: var(--color-text-main) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    box-shadow: var(--elev-3) !important;
    outline: none !important;
    z-index: 300;
    transition: opacity 0.2s, transform 0.2s !important;
    /* hidden state */
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-6px) !important;
}
#pac-input.search-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

#pac-input::placeholder {
    color: var(--color-text-muted) !important;
}

/* Recent searches — shown under the search bar when it's focused and empty,
   hidden as soon as the user starts typing (Google's own .pac-container
   suggestion dropdown takes over from there). */
.recent-searches-list {
    position: absolute;
    /* Gap between the search bar and the list, and full viewport width —
       matches Google's own .pac-container suggestion dropdown instead of
       hugging the search bar's own (narrower, inset) width. */
    top: 64px;
    left: 0;
    right: 0;
    width: auto;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 299;
    overflow: hidden;
}
.recent-searches-clear-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--al);
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--am);
    cursor: pointer;
}
.recent-searches-clear-btn:active {
    background: var(--bg);
}
.recent-search-item {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--al);
}
.recent-search-item:last-child {
    border-bottom: none;
}
.recent-search-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.recent-search-item-main:active {
    background: var(--bg);
}
.recent-search-item-main i {
    color: var(--sub);
    flex-shrink: 0;
}
.recent-search-item-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-search-item-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.recent-search-item-remove:active {
    background: var(--al);
    color: var(--text);
}

#pac-input:focus {
    background: var(--color-bg-input) !important;
    border-color: var(--color-logo-dot) !important;
    box-shadow: 0 4px 16px rgba(144, 184, 224, 0.25) !important;
}

/* ==========================================================================
   11. Google Map Info Window popups styling
   ========================================================================== */
.info-window {
    text-align: center;
    padding: 14px 16px 16px;
    width: min(340px, calc(100vw - 32px));
    max-width: 340px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    outline: none;
}
.info-window p { text-align: left; }
/* Google's InfoWindow chrome (and/or its back/close buttons) is focusable —
   on some mobile browsers a tap leaves the default focus ring showing as a
   stray black outline around the card. Suppress it everywhere a popup card
   can render. */
.gm-style-iw, .gm-style-iw-c, .gm-style-iw-d,
.reel-card, .info-window, .map-back-btn,
.gm-style-iw:focus, .gm-style-iw-c:focus, .reel-card:focus, .info-window:focus,
.map-back-btn:focus, .map-back-btn:focus-visible {
    outline: none !important;
}

.info-window-title {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    text-align: center;
}

.info-window h3 {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    text-align: center; /* close X removed — title centers cleanly */
}

.info-window p {
    color: var(--sub);
    font-size: 12px;
    margin: 0 0 8px 0;
}

.info-window .rating-text {
    color: var(--sub);
    font-size: 12px;
    margin-bottom: 10px;
}

.btn-save-map {
    background: var(--color-primary);
    color: #ffffff;
    border: none !important;
    outline: none !important;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: auto;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 8px rgba(205, 83, 96, 0.25);
    transition: opacity 0.2s;
    box-sizing: border-box !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save-map:hover {
    opacity: 0.88;
}

/* ==========================================================================
   Google Maps InfoWindow — Dark Theme Override
   Eliminates default white bg, top chrome gap, and unstyled arrow
   ========================================================================== */

/* Main container: dark bg + teal border */
.gm-style .gm-style-iw-c {
    background: #141C2B !important;
    border: 1px solid #1A4E52 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
}

/* Scrollable inner div — fluid on small phones, never clips off-screen */
.gm-style .gm-style-iw-d {
    max-height: 560px !important;
    overflow: hidden !important;
    padding: 0 !important;
    max-width: min(290px, calc(100vw - 56px)) !important;
    width: min(290px, calc(100vw - 56px)) !important;
    box-sizing: border-box !important;
}

/* Ensure the outer InfoWindow wrapper never overflows the viewport */
.gm-style .gm-style-iw-c {
    max-width: min(310px, calc(100vw - 40px)) !important;
    box-sizing: border-box !important;
}

/* Chrome row removed entirely — no default 'x' button, no empty top bar.
   Popups are dismissed by tapping the map; reels use the in-popup Exit button. */
.gm-style .gm-style-iw-chr {
    display: none !important;
}

/* Arrow / tail — match dark bg */
.gm-style .gm-style-iw-tc::after,
.gm-style .gm-style-iw-t::after {
    background: #141C2B !important;
}

/* ==========================================================================
   12. Country header lists
   ========================================================================== */
.country-group {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(45, 110, 110, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: padding 0.2s ease;
}

/* Expanded state gets more breathing room around the cards */
.country-group:not(.country-group--collapsed) {
    padding: 14px 16px;
    margin-bottom: 20px;
}

/* Grid (not flex) so the title truly centers between the star and the
   bulk-arrow — both small icon buttons of similar width, unlike before when
   the count sat on the far right as its own flex item and threw the title
   off-centre. */
.country-header {
    display: grid;
    /* Fixed (not auto) edge columns of equal width — with auto, the star
       button and the count badge (variable width depending on digit count)
       never matched, so the title never actually centered relative to the
       full row, only within whatever space happened to be left over. */
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    margin: 0;
    padding: 0 4px;
    border: none;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

/* Clickable country label — centered within its grid column. The bulk-arrow
   chevron now lives in its own grid column (mirroring the star's column on
   the opposite side) instead of sharing this flexbox, so .chl-name is the
   sole content here and centers cleanly on its own. */
.country-header-label {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: color 0.15s;
    min-width: 0;
}
.country-header:hover .country-header-label { color: var(--color-logo-dot); }

/* Country name centers on its own; the flag hangs off its left edge (absolute)
   so it does not push the text off-centre. */
.country-header-label .chl-name {
    position: relative;
    display: inline-block;
}
.country-header-label .chl-name::before {
    content: attr(data-flag);
    position: absolute;
    right: 100%;
    margin-right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
}

.country-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #d1d5db;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    justify-self: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.15s;
}
.country-star--active { color: #f59e0b !important; transform: scale(1.15); }
.country-star--active i { color: #f59e0b !important; }

.country-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    background: rgba(67,132,150,0.18);
    color: var(--color-logo-dot);
    border-radius: 10px;
    padding: 2px 6px;
    flex-shrink: 0;
    justify-self: center;
    text-align: center;
    min-width: 18px;
    box-sizing: border-box;
}

.city-subheader {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px 4px;
}

/* Route timing pill — floated at midpoint of each route segment via OverlayView */
@keyframes routePillFadeIn {
    from { opacity: 0; transform: translate(-50%, -130%) scale(0.88); }
    to   { opacity: 1; transform: translate(-50%, -120%) scale(1); }
}
@keyframes routePillFadeOut {
    from { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -130%) scale(0.88); }
}
.route-timing-pill {
    background: var(--am) !important;
    border: 1px solid var(--am) !important;
    border-radius: 20px;
    padding: 4px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.1px;
    animation: routePillFadeIn 0.4s ease forwards;
}

/* Per-transport-mode colours matching the polyline strokes (getModeColor) */
.route-timing-DRIVING  { background: #2B5A8A !important; border-color: #3a78be !important; }
.route-timing-WALKING  { background: #C0392B !important; border-color: #e74c3c !important; }
.route-timing-TRAIN    { background: #2E7A50 !important; border-color: #3aaa6e !important; }
.route-timing-BUS      { background: #9a7714 !important; border-color: #C89B1C !important; }

/* Separator only shows when expanded */
.country-group:not(.country-group--collapsed) .country-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}

/* Reel count pill — shown on saved cards */
.reel-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--color-logo-dot);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.reel-tag-pill i { font-size: 9px; }
.location-item.itinerary-card .reel-tag-pill { display: none; }
/* Tapping an itinerary card is a no-op (see app.js createDOMCard) — suppress
   the default mobile tap-highlight flash so it doesn't look like something
   activated when nothing did. */
.location-item.itinerary-card { -webkit-tap-highlight-color: transparent; }

.country-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Homebase ring on active homebase cards */
.location-item.homebase-active {
    outline: 2px solid #2D6E6E;
    box-shadow: 0 0 0 4px rgba(45, 110, 110, 0.22), 0 2px 8px rgba(0,0,0,0.25);
}

/* View-mode notes display in itinerary cards and right panel */
.view-mode-notes {
    padding: 4px 0 2px;
}

.view-mode-notes p {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-mode-notes .empty-notes {
    opacity: 0.45;
    font-style: italic;
}

/* ==========================================================================
   13. Floating Current Location Map Control Button
   ========================================================================== */
#current-location-btn {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(8, 24, 73, 0.85); /* bg-main fallback */
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#current-location-btn:hover {
    background: var(--color-logo-dot);
    color: #ffffff;
    transform: scale(1.08) rotate(15deg);
    border-color: rgba(144, 184, 224, 0.5);
    box-shadow: 0 6px 16px rgba(144, 184, 224, 0.4);
}

#current-location-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   14. Trip Selection & Management Toolbar
   ========================================================================== */
/* ==========================================================================
   14. Trip Selection & Management Toolbar
   ========================================================================== */
.trip-management-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.trip-selector {
    flex: 1;
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.trip-selector:focus {
    border-color: var(--color-logo-dot);
}

.btn-trip-action {
    background: var(--color-bg-input);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-trip-action:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-main);
    border-color: var(--color-logo-dot);
}

.btn-trip-action.btn-trip-add:hover {
    background: rgba(144, 184, 224, 0.15);
    color: var(--color-logo-dot);
    border-color: rgba(144, 184, 224, 0.4);
}

.btn-trip-action.btn-trip-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Quick add/remove trip location buttons inside Saved Places */
.btn-trip-add-loc {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px dashed rgba(16, 185, 129, 0.4);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 12px;
    width: 100%;
    transition: all 0.2s;
}

.btn-trip-add-loc:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.btn-trip-remove-loc {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px dashed rgba(245, 158, 11, 0.4);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 12px;
    width: 100%;
    transition: all 0.2s;
}

.btn-trip-remove-loc:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

/* ==========================================================================
   15. Unscheduled Location Picker & Inline Form Styles
   ========================================================================== */
.picker-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.picker-filter-chips::-webkit-scrollbar { display: none; }
/* No press/active-state animation on the itinerary picker's country filter
   chips — the shared .filter-chip class transitions color/transform, but
   this list re-filters instantly and shouldn't visibly animate. Extra
   specificity (body.v2) needed to beat the later, equally-specific
   `body.v2 .filter-chip` !important rule. */
body.v2 .picker-filter-chips .filter-chip,
body.v2 .picker-filter-chips .filter-chip:active {
    transition: none !important;
    transform: none !important;
}

.saved-selector-container {
    margin-top: 8px;
    width: 100%;
}

.saved-selector-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}
.saved-selector-title {
    margin: 0;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.5px;
    padding: 0 2px;
}

.saved-selector-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: visible;
    padding-right: 0;
}

.saved-selector-list::-webkit-scrollbar,
.saved-selector-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.select-location-row {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 10px);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
    text-align: left;
    box-shadow: 0 1px 3px var(--shadow, rgba(0,0,0,0.05));
}
.select-location-row:last-child { margin-bottom: 0; }

.select-location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.select-location-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-main);
    flex: 1;
}

.btn-schedule-badge {
    font-size: 12px;
    color: var(--color-text-main);
    font-weight: 700;
    background: rgba(144, 184, 224, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(144, 184, 224, 0.3);
    flex-shrink: 0;
    text-align: center;
    min-width: 85px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-schedule-badge:hover {
    background: rgba(144, 184, 224, 0.25);
    border-color: rgba(144, 184, 224, 0.5);
}

/* "Save to my Pins" — shown on picker rows for pins from a shared trip the
   viewer doesn't own, next to the Schedule badge. */
.btn-save-mine-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-save-mine-badge:active { background: var(--al); }

.inline-schedule-form {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}

.inline-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.inline-form-field {
    flex: 1;
}

.inline-label {
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.inline-input {
    margin: 0;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    width: 100%;
    box-sizing: border-box;
    transition: border 0.2s;
}

.inline-input:focus {
    border-color: var(--color-logo-dot);
    outline: none;
}

.inline-btn-submit {
    margin: 0;
    padding: 8px;
    font-size: 12px;
    width: 100%;
}

.add-location-panel {
    margin-top: 20px;
    border-top: 1px dashed var(--color-border);
    padding-top: 16px;
}

.add-location-btn-toggle {
    width: 100%;
    margin-bottom: 12px;
    background: rgba(144, 184, 224, 0.15);
    border: 1px solid rgba(144, 184, 224, 0.4);
    color: var(--color-logo-dot);
}

.add-location-btn-toggle:hover {
    background: rgba(144, 184, 224, 0.25);
}

.add-location-picker-container {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--al);
}
.picker-locations-scroll {
    overflow-y: auto;
    max-height: 240px;
    padding-right: 4px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.picker-locations-scroll::-webkit-scrollbar { width: 4px; }
.picker-locations-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ==========================================================================
   16. Desktop Extended Mode Layout Styling
   ========================================================================== */
#itinerary-panel {
    display: flex;
    flex-direction: row;
}

.panel-primary-column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Contains horizontal overflow without clipping outside children */
}

@media (min-width: 769px) {
    /* On desktop: always-visible search bar fixed at viewport centre.
       Not pushed into Google Maps controls — CSS handles centering. */
    #add-place-btn { display: none !important; }
    #pac-input,
    #pac-input.search-visible {
        position: absolute !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
        width: 360px !important;
        z-index: 300 !important;
    }
    #recent-searches-list {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 360px !important;
    }

    #itinerary-panel.extended {
        width: 60% !important;
        min-width: 750px !important;
        max-width: 900px !important;
    }

    .sidebar-extended #map-container {
        margin-right: 60% !important;
    }

    /* Extended mode: the map narrows, so the 3-button pill collides with the
       search box. Collapse it to the compact single cycle button instead. */
    .sidebar-extended #map-type-control {
        display: none !important;
    }
    .sidebar-extended #map-type-mobile-btn {
        display: flex;
        position: absolute;
        top: 10px;
        left: 58px; /* right of the + button */
        z-index: 200;
    }
}

@media (min-width: 1428px) {
    .sidebar-extended #map-container {
        margin-right: 900px !important;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar-extended #map-container {
        margin-right: 750px !important;
    }
}

/* ==========================================================================
   17. Mobile Viewport Bottom Sheet Layout Tweaks
   ========================================================================== */
@media (max-width: 768px) {

    /* ── Slim top header (replaces the old handle-strip tabs) ── */
    #mobile-top-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        padding: 0 12px;
        background: var(--navy-blue);
        border-bottom: 1px solid rgba(144, 184, 224, 0.2);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        z-index: 400;
        box-sizing: border-box;
    }
    /* Left slot: collab bubble */
    #mobile-top-header > :first-child { justify-self: start; }
    /* Center slot: logo — always perfectly centered */
    #mobile-top-header .logo-wrapper {
        justify-self: center;
        gap: 5px;
    }
    #mobile-top-header .logo-icon {
        width: 20px;
        height: 15px;
    }
    #mobile-top-header .logo-dot-large {
        width: 13px;
        height: 13px;
    }
    #mobile-top-header .logo-dot-small {
        width: 5px;
        height: 5px;
    }
    #mobile-top-header .logo-text {
        font-size: 19px;
        font-weight: 700;
        color: var(--color-text-main);
        text-transform: lowercase;
        user-select: none;
    }
    /* Right slot: auth chip */
    #mobile-top-header > :last-child { justify-self: end; }
    #mobile-top-header .mobile-collab-bubble {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--dark-teal);
        border: 1.5px solid rgba(45, 110, 110, 0.6);
        font-size: 15px;
        cursor: pointer;
        color: var(--color-text-main);
        box-shadow: 0 0 0 2px rgba(45, 110, 110, 0.2);
        transition: background 0.15s;
    }
    #mobile-top-header .mobile-collab-bubble:active {
        background: var(--color-bg-main);
    }
    #mobile-top-header .auth-chip--mobile {
        max-width: 110px;
    }

    /* Push map down so it starts below the header */
    #map-container {
        margin-top: 48px !important;
        height: calc(100% - 48px) !important;
    }

    /* "+" button — only in peek state */
    body.sheet-peek #add-place-btn {
        display: flex;
        top: 10px;
    }
    /* Search bar hidden in full/half states (map is mostly covered) */
    body.sheet-full #pac-input,
    body.sheet-half #pac-input,
    body.sheet-full #recent-searches-list,
    body.sheet-half #recent-searches-list {
        display: none !important;
    }
    /* Search bar on mobile — stretches from + button to right edge */
    #pac-input {
        top: 10px !important;
        left: 58px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    #recent-searches-list {
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }

    #itinerary-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Anchor below header — panel can never slide behind the 48px header */
        top: 48px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        border-left: none;
        border-top: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.7), 0 -6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: translateY(0);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    /* Peek state — only the top drag handle visible */
    #itinerary-panel.collapsed {
        transform: translateY(calc(100% - 60px)) !important;
    }

    /* Half state — roughly half the panel visible */
    #itinerary-panel.sheet-half {
        transform: translateY(45vh) !important;
    }
    body.sheet-half .detail-content,
    body.sheet-half .detail-placeholder,
    body.sheet-peek .detail-content,
    body.sheet-peek .detail-placeholder {
        display: none !important;
    }
    /* Hide floating pickers and edit bars in peek/half — they'd show over the map */
    body.sheet-peek #global-location-picker,
    body.sheet-half #global-location-picker,
    body.sheet-peek .reels-edit-bar,
    body.sheet-half .reels-edit-bar,
    body.sheet-peek #trip-edit-bar,
    body.sheet-half #trip-edit-bar,
    body.sheet-peek .section-menu-popup,
    body.sheet-half .section-menu-popup {
        display: none !important;
    }
    .saved-right-column { display: none !important; }
    #itinerary-right-column-dynamic { display: none !important; }

    /* In half state the panel is shifted down 45vh, so its bottom sits 45vh off-screen.
       Cap the primary column to only the visible slice so overflow-y scroll stays
       within what the user can actually see and reach. Panel's own height is
       calc(100vh - 70px) (see body.v2 #itinerary-panel), not the 48px this used
       to assume, and #sheet-handle (drag bar + back/title row) sits above the
       column in normal flow eating another ~80px before the scrollable area even
       starts — both must be subtracted or the column's bottom renders past the
       visible screen edge, clipping the last item(s) out of scroll reach. */
    body.sheet-half .panel-primary-column {
        height: calc(55vh - 150px);
        max-height: calc(55vh - 150px);
    }

    /* Scroll fix: panel uses 90vh, the flex chain must explicitly cap sizes */
    .panel-primary-column {
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .views-wrapper {
        flex: 1 1 0;
        min-height: 0;       /* prevents flex children overflowing their container */
        overflow: hidden;
    }
    .view-page {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Expand/collapse handle — sits at the very top of the sheet (inside panel,
       below the fixed 48px header). panel-primary-column is padded down to clear it. */
    .sidebar-toggle-btn {
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 44px !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        background: var(--navy-blue) !important;
        box-shadow: none !important;
        color: var(--color-text-muted) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        z-index: 10 !important;
        /* Larger invisible touch target above the visible strip */
        touch-action: none;
    }
    .sidebar-toggle-btn::before { content: none; }

    /* Push tab content below the 44px handle strip */
    .panel-primary-column {
        padding-top: 44px;
    }

    /* Peek now uses 30px toggle height */
    #itinerary-panel.collapsed {
        transform: translateY(calc(100% - 60px)) !important;
    }

    .panel-header {
        display: none !important;
    }

    /* Old handle-strip elements hidden — they moved to #mobile-top-header */
    .mobile-logo { display: none !important; }
    .mobile-collab-bubble { display: none; }

    /* Mobile collab dropdown header text & close button */
    .mobile-collab-title {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text-main);
    }
    .mobile-collab-close {
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: 14px;
        padding: 0 4px;
    }
    /* Invite toggle button */
    .btn-invite-toggle {
        width: 100%;
        padding: 8px;
        background: transparent;
        border: 1px dashed var(--color-border);
        border-radius: 8px;
        color: var(--color-text-muted);
        font-size: 12px;
        cursor: pointer;
        text-align: center;
        transition: border-color 0.2s, color 0.2s;
    }
    .btn-invite-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

    /* Send invite button within mobile dropdown */
    .mobile-invite-send { width: 100%; padding: 8px; }

    /* Mobile collab dropdown — anchored to top header collab button */
    .mobile-collab-dropdown {
        position: fixed;
        top: 52px;
        left: 8px;
        width: calc(100vw - 16px);
        max-width: 340px;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 14px 16px 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 1001;
        box-sizing: border-box;
    }

    .mobile-collab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .tabs-container {
        padding: 0 4px;
    }

    .tab-btn {
        padding: 10px 4px 8px;
    }

    /* Map controls — only in peek state.
       Panel peek = translateY(calc(100% - 60px)), so 60px is always visible at bottom.
       Buttons sit 16px above that edge, which is reliable across all screen sizes. */
    #current-location-btn {
        display: none !important;
    }
    body.sheet-peek #current-location-btn {
        display: flex !important;
        bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        z-index: 200 !important;
    }

    /* Desktop terrain pill — hidden on mobile */
    #map-type-control { display: none !important; }

    /* Mobile terrain cycling button — only in peek state */
    #map-type-mobile-btn {
        position: absolute;
        bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        display: none;
        z-index: 200;
    }
    body.sheet-peek #map-type-mobile-btn {
        display: flex;
    }
}

/* ==========================================================================
   17b. Tab Filter Chips (Saved country filter, Bookings type filter)
   ========================================================================== */
/* Toolbar row: chips on the left, Edit button pinned to the right */
.saved-toolbar {
    display: flex;
    align-items: center;
    padding: 0 4px 10px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-main);
}
.saved-toolbar #saved-country-chips {
    flex: 1;
    min-width: 0 !important;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* v2: grouped (itinerary) page uses flexbox so date-tab-bar is always at top, timeline scrolls below */
body.v2 #page-grouped.view-page {
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* The whole grey content area (pill row + timeline below) reads as one
       rounded panel, top and bottom, rather than a flush rectangle sharing
       the sheet's own edges. */
    border-radius: 16px !important;
}
body.v2 #date-tab-bar-wrapper {
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
}
/* Add Location — its own bar between the date-picker pills and the
   timeline (edit mode only), rather than pinned inline in the pill row. */
body.v2 #add-location-bar {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
    overflow: hidden !important;
    /* Slide + fade down when edit mode reveals it (fresh element each render,
       so the entry animation plays on insert) instead of popping in. */
    animation: addLocSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top;
}
@keyframes addLocSlideDown {
    from { max-height: 0; opacity: 0; transform: translateY(-8px); }
    to   { max-height: 70px; opacity: 1; transform: translateY(0); }
}
body.v2 #add-location-bar-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.3px;
    background: rgba(205, 83, 96, 0.15);
    border: 1px solid rgba(205, 83, 96, 0.5);
    color: #f87171;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.v2 #page-grouped #grouped-timeline.grouped-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 14px !important;
    min-height: 0 !important;
}
/* Folder grid view (contains the trip pill list) mirrors the Reels tab's page
   padding (14px 6px) so the Add Trip / Sort toolbar sits with the same inset
   and the same top/bottom breathing room as the Reels tab's function buttons.
   The drilled-in day-timeline view (date blocks, no pill list) keeps its own
   8px/16px inset. */
body.v2 #page-grouped #grouped-timeline.grouped-list:has(.trip-pill-list) {
    padding: 14px 6px !important;
}

/* v2: saved page uses flexbox so toolbar is always at top, list scrolls below */
body.v2 #page-saved.view-page {
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    position: relative !important; /* anchor the floating Add-pins bar */
}
/* Leave room so the last pins aren't hidden behind the floating Add-pins bar. */
body.v2.pins-in-list #page-saved #saved-list.cards-list { padding-bottom: 80px !important; }
body.v2 #page-saved .saved-toolbar {
    flex-shrink: 0 !important;
    /* Small downward nudge (was -6px, absorbing all of the .views-wrapper's
       14px top gap) so the chip row sits with a touch more breathing room
       below the header instead of sitting flush against it. */
    margin-top: 0px !important;
    padding: 8px 14px 10px !important;
    position: static !important;
    /* Same grey as the panel body (matches #date-tab-bar-wrapper in the
       Itinerary tab) so the whole panel reads as one continuous grey area,
       with the outer container's own rounding visible at the top corners. */
    background: var(--bg) !important;
    border-bottom: 1px solid var(--al) !important;
    z-index: auto !important;
}
body.v2 #page-saved #saved-list.cards-list,
body.v2 #page-saved #saved-others-list.cards-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 14px 14px !important;
    min-height: 0 !important;
}
/* Tighter spacing between Saved country bars (was 20px flex gap + 8px group
   margin = ~28px). */
body.v2 #page-saved #saved-list.cards-list { gap: 10px !important; }
body.v2 #saved-list .country-group { margin-bottom: 0 !important; }
.sort-btn {
    flex-shrink: 0;
    margin-left: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--elev-1);
    color: var(--color-text-main, #1e293b);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.sort-btn:active { opacity: 0.7; transform: translateY(1px); box-shadow: none; }
.saved-pin-sort-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 4px 8px 0;
}
/* Name chip labels shown above map pins during route/date filter mode */
.map-pin-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: opacity 0.3s ease;
}
/* Route-mode glide: fades a stop's label once the icon has passed it, so a
   cluster of nearby stops doesn't stay a solid wall of overlapping
   full-opacity labels for the rest of the animation. */
.map-pin-label.route-label-passed {
    opacity: 0.45;
}

/* Date map-filter toggle button in the itinerary date header */
.btn-date-map-toggle {
    flex-shrink: 0;
    width: auto;
    min-width: 72px;
    height: 36px;
    padding: 0 10px;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-date-map-toggle::after {
    content: 'Route';
    font-size: 12px;
    font-weight: 500;
}
.btn-date-map-toggle:hover {
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}
.btn-date-map-toggle.active {
    background: rgba(144, 184, 224, 0.15);
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}

/* Date block collapse */
.date-block--collapsed .date-items-row,
.date-block--collapsed .add-location-picker-container {
    display: none !important;
}
.date-collapse-caret {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.tab-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 4px 0;
    margin-bottom: 14px;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--elev-1);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.filter-chip:hover {
    border-color: var(--color-logo-dot);
    color: var(--color-text-main);
}
.filter-chip.active {
    background: var(--am);
    border-color: var(--am);
    color: #fff;
}

/* ==========================================================================
   17c. Mobile Reel Overlay — large modal (not full screen)
   ========================================================================== */
#mobile-reel-overlay {
    display: none;
    position: fixed;
    top: 6vh;
    left: 4vw;
    right: 4vw;
    bottom: 6vh;
    z-index: 600;
    background: #000;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
#mobile-reel-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-bg-main);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}
#mobile-reel-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto; /* pin to right */
}
#mobile-reel-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none; /* clicks pass through to the back button behind it */
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 80px; /* prevent overlap with back button on short titles */
}
#mobile-reel-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

/* ==========================================================================
   18. Collaboration Panel Styles (Extended Column)
   ========================================================================== */
.panel-extended-column {
    display: none;
}

#itinerary-panel.extended .panel-primary-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.extended-header {
    padding: 24px 20px 16px 20px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extended-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
}

.sync-status {
    font-size: 11px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.extended-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.extended-scrollable::-webkit-scrollbar {
    width: 6px;
}
.extended-scrollable::-webkit-scrollbar-track {
    background: var(--color-bg-main);
}
.extended-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

.collab-card {
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.collab-card h4 {
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    display: flex;
    justify-content: space-between;
}

.crew-avatars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
}

.avatar.owner {
    background: var(--color-primary);
    border-color: var(--color-logo-dot);
}

.avatar:hover {
    transform: scale(1.1);
}

.avatar-add {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed rgba(45, 110, 110, 0.6);
    color: var(--color-text-main);
    background: var(--dark-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-add:hover {
    border-color: var(--ocean-teal);
    color: #fff;
    background: rgba(45, 110, 110, 0.35);
}

.crew-notes-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    resize: vertical;
    margin-bottom: 8px;
}

.crew-notes-textarea:focus {
    border-color: var(--color-logo-dot);
    outline: none;
}

.export-buttons-grid {
    display: flex;
    gap: 8px;
}

.btn-export {
    flex: 1;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 8px 4px !important;
    height: auto !important;
    background: var(--color-bg-input);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-export:hover {
    background: rgba(144, 184, 224, 0.15);
    border-color: var(--color-logo-dot);
    color: var(--color-logo-dot);
}

/* ==========================================================================
   19. Bookings & Logistics Sub-Tab Cards Styling
   ========================================================================== */
.booking-card {
    background: var(--dark-teal);
    border: 1px solid var(--color-border);
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    margin-bottom: 12px;
}

.booking-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-logo-dot);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

.booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
}

.btn-booking-edit {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

.booking-row {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--color-text-main);
}

.booking-row strong {
    color: var(--color-text-muted);
}

.pnr-container {
    background: var(--color-bg-input);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-top: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pnr-container:hover {
    border-color: var(--color-logo-dot);
    box-shadow: 0 0 10px rgba(144, 184, 224, 0.2);
}

.pnr-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pnr-code {
    font-family: 'Outfit', monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-logo-dot);
    text-transform: uppercase;
}

.basecamp-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================================================
   20. Split Screen Extended Layout CSS
   ========================================================================== */

/* Mobile / Default non-extended split styles */
.saved-split-container,
.itinerary-split-container,
.bookings-split-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saved-left-column, .saved-right-column,
.itinerary-left-column, .itinerary-right-column,
.bookings-left-column, .bookings-right-column {
    width: 100%;
}

.saved-right-column,
.itinerary-right-column,
.extended-crew-bubble {
    display: none;
}

/* Desktop Extended split styles */
@media (min-width: 769px) {
    /* Chips row not needed in split view — left column still shows the list */
    #itinerary-panel.extended #saved-country-chips { display: none; }

    #itinerary-panel.extended .saved-split-container,
    #itinerary-panel.extended .itinerary-split-container,
    #itinerary-panel.extended .bookings-split-container {
        display: flex;
        flex-direction: row;
        gap: 24px;
        height: calc(100vh - 120px); /* tighter offset now chips row is hidden */
        box-sizing: border-box;
    }

    #itinerary-panel.extended .saved-left-column,
    #itinerary-panel.extended .saved-right-column,
    #itinerary-panel.extended .itinerary-left-column,
    #itinerary-panel.extended .itinerary-right-column,
    #itinerary-panel.extended .bookings-left-column,
    #itinerary-panel.extended .bookings-right-column {
        flex: 1;
        width: 50%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
    }

    /* Hide scrollbars on split columns — the left/right divider already
       shows visually; a second teal bar in the middle looks misaligned */
    #itinerary-panel.extended .saved-left-column,
    #itinerary-panel.extended .saved-right-column,
    #itinerary-panel.extended .itinerary-left-column,
    #itinerary-panel.extended .itinerary-right-column,
    #itinerary-panel.extended .bookings-left-column,
    #itinerary-panel.extended .bookings-right-column {
        scrollbar-width: none; /* Firefox */
    }
    #itinerary-panel.extended .saved-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .saved-right-column::-webkit-scrollbar,
    #itinerary-panel.extended .itinerary-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .itinerary-right-column::-webkit-scrollbar,
    #itinerary-panel.extended .bookings-left-column::-webkit-scrollbar,
    #itinerary-panel.extended .bookings-right-column::-webkit-scrollbar {
        width: 0;
        display: none;
    }

    #itinerary-panel.extended .saved-right-column {
        display: flex;
        border-left: 1px solid var(--color-border);
        padding-left: 20px;
        padding-top: 0;
    }
    #itinerary-panel.extended .saved-right-column .detail-content {
        margin-top: 0;
    }

    #itinerary-panel.extended .itinerary-right-column {
        display: flex;
        border-left: 1px solid var(--color-border);
        padding-left: 20px;
    }

    /* Floating Collaboration Crew Bubble on Top Right */
    /* Hide auth chip and system badge in expanded mode — crew bubble takes that space */
    body.sidebar-extended #auth-chip,
    body.sidebar-extended #system-status-badge { display: none !important; }

    #itinerary-panel.extended .extended-crew-bubble {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        height: 48px; /* matches compact header height */
        padding: 0 16px;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 99;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .crew-avatars {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    #itinerary-panel.extended .extended-crew-bubble .avatar-add {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 200px;
    }
    
    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline .inline-input {
        padding: 6px 8px;
        font-size: 11px;
    }

    #itinerary-panel.extended .extended-crew-bubble .invite-form-inline .btn-save {
        padding: 6px;
        font-size: 11px;
        width: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   V2 Layout — full-screen map + bottom sheet
   Palette: #F8FAFC (bg) · #D9EAFD (accent-light) · #BCCCDC (accent-mid) · #9AA6B2 (accent-dark)
   UI is mostly white; palette used as accents only.
   ========================================================================== */

/* ── V2 Palette tokens + override all cream/yellow globals inside body.v2 ── */
:root {
    --bg:        #F1F3F4;
    --al:        #DADCE0;
    --am:        #1A73E8;
    --ad:        #70757A;
    --text:      #202124;
    --sub:       #5F6368;
    --icon:      #3C4043;
    --white:     #FFFFFF;
    --shadow:    rgba(0,0,0,0.08);
    --shadow-md: rgba(0,0,0,0.14);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    --elev-1:    0 1px 2px rgba(0,0,0,.06), 0 2px 5px rgba(0,0,0,.06);
    --elev-2:    0 1px 3px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.09);
    --elev-3:    0 4px 10px rgba(0,0,0,.10), 0 14px 32px rgba(0,0,0,.13);
    --border-soft: rgba(0,0,0,.06);
    --accent-tint: rgba(26,115,232,.08);
    --accent-shadow: 0 4px 12px rgba(26,115,232,.20);
    --radius:    14px;
    --radius-sm: 10px;
    --transition: 0.18s ease;
}

/* Override every cream/old-palette variable that V1 set globally — scoped to body.v2
   so V1 at "/" is completely unaffected. */
body.v2 {
    --yellow:        #DADCE0;
    --peach:         #DADCE0;
    --sky:           #DADCE0;
    --blue:          #1A73E8;
    --dark:          #202124;
    --btn-primary:      #1A73E8;
    --ocean-teal:       #1A73E8;
    --deep-teal:        #DADCE0;
    --dark-teal:        #F1F3F4;
    --midnight:         #F1F3F4;
    --navy-blue:        #FFFFFF;
    --interactive-blue: #1A73E8;
    --bg-base:          #F1F3F4;
    --bg-surface:       #FFFFFF;
    --bg-input:         #F1F3F4;
    --bg-card-deep:     #FFFFFF;
    --bg-card-hover:    #F1F3F4;
    --text-primary:     #202124;
    --text-secondary:   #5F6368;
    --color-secondary:  #1A73E8;
    --color-logo-dot:   #1A73E8;
    --color-interactive:#1A73E8;
    --color-bg-main:    #F1F3F4;
    --color-bg-card:    #FFFFFF;
    --color-bg-card-deep: #F1F3F4;
    --color-bg-input:   #F1F3F4;
    --color-text-main:  #202124;
    --color-text-muted: #5F6368;
    --color-border:     #DADCE0;
}

/* ── Dark mode — Google Maps palette ── */
body.v2.dark {
    --bg:        #2D2F33;
    --al:        #3C3E42;
    --am:        #8AB4F8;
    --ad:        #9AA0A6;
    --text:      #E8EAED;
    --sub:       #9AA0A6;
    --icon:      #DADCE0;
    --white:     #1B1D21;
    --shadow:    rgba(0,0,0,0.34);
    --shadow-md: rgba(0,0,0,0.46);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.46), 0 1px 3px rgba(0,0,0,0.34);
    --elev-1:    0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    --elev-2:    0 1px 3px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
    --elev-3:    0 4px 12px rgba(0,0,0,.44), 0 16px 36px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);
    --border-soft: rgba(255,255,255,.08);
    --accent-tint: rgba(138,180,248,.14);
    --accent-shadow: 0 4px 12px rgba(138,180,248,.24);
    --yellow:        #3C3E42;
    --peach:         #3C3E42;
    --sky:           #3C3E42;
    --blue:          #8AB4F8;
    --dark:          #E8EAED;
    --btn-primary:      #8AB4F8;
    --ocean-teal:       #8AB4F8;
    --deep-teal:        #3C3E42;
    --dark-teal:        #2D2F33;
    --midnight:         #2D2F33;
    --navy-blue:        #1B1D21;
    --interactive-blue: #8AB4F8;
    --bg-base:          #2D2F33;
    --bg-surface:       #1B1D21;
    --bg-input:         #3C3E42;
    --bg-card-deep:     #1B1D21;
    --bg-card-hover:    #3C3E42;
    --text-primary:     #E8EAED;
    --text-secondary:   #9AA0A6;
    --color-secondary:  #8AB4F8;
    --color-logo-dot:   #8AB4F8;
    --color-interactive:#8AB4F8;
    --color-bg-main:    #2D2F33;
    --color-bg-card:    #1B1D21;
    --color-bg-card-deep: #3C3E42;
    --color-bg-input:   #3C3E42;
    --color-text-main:  #E8EAED;
    --color-text-muted: #9AA0A6;
    --color-border:     #3C3E42;
}
/* Dark mode — element overrides */
body.v2.dark .float-tab { background: #2D2F33; color: #DADCE0; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
body.v2.dark .float-tab i { color: #9AA0A6; }
body.v2.dark .float-tab--active { background: #1A73E8; color: #fff; box-shadow: 0 4px 16px rgba(26,115,232,0.30); }
body.v2.dark .float-tab--active i { color: #fff; }
body.v2.dark .reel-popup-overlay::before { background: rgba(0,0,0,0.70); }
body.v2.dark .section-menu-popup { background: #2D2F33; border-color: #3C3E42; }
body.v2.dark .reels-toolbar-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .add-reel-input { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .add-reel-folder-select { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .iw-meta-link { color: #8AB4F8; }
body.v2.dark .date-day { color: #DADCE0 !important; }
body.v2.dark .date-label { color: #DADCE0 !important; }
body.v2.dark .trip-pill-meta { color: #BDC1C6; }
body.v2.dark .trip-pill-arrow { color: #BDC1C6 !important; }
body.v2.dark .reels-section-title { color: #E8EAED; }
body.v2.dark .reels-section-count { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-counter { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .feed-platform { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-popup-notes-pill { color: #BDC1C6; background: #3C3E42; border-color: #5F6368; }
body.v2.dark .sheet-title { color: #E8EAED !important; }
body.v2.dark .sheet-close-btn { color: #E8EAED !important; }
body.v2.dark .card-title-row strong { color: #E8EAED !important; }
body.v2.dark .card-edit-btn { color: #BDC1C6 !important; }
body.v2.dark .alldays-count { color: #BDC1C6; }
body.v2.dark .reel-name { color: #E8EAED; }
body.v2.dark .reel-popup-note { color: #E8EAED; }
body.v2.dark .reel-popup-close { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .reel-popup-close i { color: #E8EAED; }
body.v2.dark .settings-close { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .time-badge { background: #3C3E42 !important; color: #E8EAED !important; }
body.v2.dark .sidebar-toggle-btn { color: #BDC1C6 !important; }
body.v2.dark .trip-pill { background: var(--white); border-color: var(--color-border); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
body.v2.dark .trip-pill-name { color: #E8EAED; }
body.v2.dark .acct-info-name { color: #E8EAED; }
body.v2.dark .acct-info-email { color: #9AA0A6; }
body.v2.dark .acct-item { color: #E8EAED; }
body.v2.dark .acct-item i { color: #9AA0A6; }
body.v2.dark .reel-tile { border-color: #3C3E42; }
body.v2.dark .reel-tile-label { color: #fff; }
body.v2.dark .sheet-handle { background: #1B1D21; }
@media (max-width: 768px) {
    body.v2.dark #itinerary-panel { box-shadow: 0 -20px 48px rgba(0,0,0,0.7), 0 -6px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
}
body.v2.dark .sheet-handle .handle-bar { background: #5F6368; }
body.v2.dark .pin-inline-btn { color: #8AB4F8; }
body.v2.dark .reel-header { background: #1B1D21; border-color: #3C3E42; }
body.v2.dark .reel-card { background: #1B1D21; border-color: #3C3E42; }
/* Match .trip-pill's dark tone (var(--white), #1B1D21) — noticeably darker
   than --color-bg-card-deep (#3C3E42), which read as too light here. */
body.v2.dark .alldays-date-header { color: #E8EAED; background: #1B1D21; border-color: var(--color-border); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
body.v2.dark .location-item.itinerary-card { background: var(--white) !important; border-color: var(--color-border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
body.v2.dark .date-block-header { background: #2D2F33 !important; border-color: #3C3E42 !important; }
body.v2.dark .edit-bar-buttons { box-shadow: 0 -4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
body.v2.dark .date-block { background: var(--color-bg-card-deep) !important; border-color: var(--color-border) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
body.v2.dark .sheet-close-btn { background: #3C3E42; border-color: #5F6368; }
body.v2.dark .sheet-pill-btn { background: #3C3E42 !important; border-color: #5F6368 !important; color: #E8EAED !important; }
body.v2.dark .sheet-pill-btn i { color: #E8EAED !important; }
body.v2.dark .icon-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .sort-btn { background: #3C3E42; border-color: #5F6368; color: #E8EAED; }
body.v2.dark .route-btn { background: #3C3E42 !important; border-color: #5F6368 !important; color: #E8EAED !important; }
body.v2.dark .route-btn i { color: #E8EAED !important; }

/* Mobile-width shell — 430px centered, dark side bars on desktop */
body.v2 {
    background: #0F172A;
    justify-content: center;
}

/* Hide ALL Google Maps native UI — we provide our own buttons */
body.v2 .gm-style-mtc,
body.v2 .gm-style-mtc-bbw,
body.v2 .gm-fullscreen-control,
body.v2 .gm-svpc,
body.v2 .gm-bundled-control,
body.v2 .gm-bundled-control-on-bottom,
body.v2 .gmnoprint,
body.v2 button[title="Show street map"],
body.v2 button[title="Show satellite imagery"],
body.v2 button[title="Toggle fullscreen view"],
body.v2 button[jsaction="mouseup:mbr"],
body.v2 .gm-control-active { display: none !important; }

/* Keep only Google attribution / copyright */
body.v2 .gm-style-cc { display: flex !important; }

/* Map fills centered column */
body.v2 #map-container {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: max(0px, calc(50% - 215px)) !important;
    right: max(0px, calc(50% - 215px)) !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0;
}
/* Admin Mode banner (style.css companion to theme.js's #admin-mode-banner,
   36px tall) pushes the map/topbar down instead of overlapping them — the
   banner used to sit at z-index 9999 directly over #topbar (z-index 25). */
body.v2.admin-banner-active #map-container {
    top: 36px !important;
    height: calc(100% - 36px) !important;
}

/* ── Top bar: All (left) + Right cluster ── */
#topbar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 25; /* Higher than #pac-input's z-index 20 */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}
#topbar > * { pointer-events: auto; }

/* "All" pill */
.all-pill {
    background: var(--white);
    border: none;
    border-radius: 50px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    box-shadow: 0 2px 12px var(--shadow-md);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.all-pill:active { background: var(--al); transform: scale(0.97); }
.all-pill.active { background: var(--am); color: var(--white); }

/* Left & Right clusters — vertical stack */
.top-left,
.top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

body.v2 .top-left .account-menu {
    left: 0;
    right: auto;
}

/* Hide the legacy auth-chip-mobile element — replaced by auth-btn */
body.v2 #auth-chip-mobile { display: none !important; }

/* The Pins tab uses #pins-sort-btn for its Edit control; the shared
   #itinerary-add-btn must never appear here (it kept leaking as a duplicate
   "Edit"). Force it hidden whenever the Pins tab is active — declarative, so no
   JS timing race can re-show it. (Reels legitimately reuses the button, so this
   is scoped to page-saved only.) */
body.v2[data-main-tab="page-saved"] #itinerary-add-btn { display: none !important; }

/* Icon buttons — auth, search, location, terrain */
.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border-soft);
    box-shadow: var(--elev-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.icon-btn:active {
    background: var(--al);
    transform: translateY(1px) scale(0.97);
    box-shadow: var(--elev-1);
}
.icon-btn.active {
    background: var(--am);
    border-color: var(--am);
    color: #FFFFFF;
    box-shadow: var(--accent-shadow);
}

/* SVG icons inside buttons */
.icon-btn svg { pointer-events: none; }

/* Override V1 #current-location-btn ID rule (ID beats class).
   In v2 the button lives inside .top-right (position:static), so the
   mobile sheet-peek display:none rule must not apply — visibility is
   controlled solely by _setMapControlsHidden on the parent container. */
body.v2 #current-location-btn {
    display: flex !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--al) !important;
    color: var(--icon) !important;
    font-size: 19px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    transition: all var(--transition) !important;
    transform: none !important;
}
body.v2 #current-location-btn:hover {
    background: var(--white) !important;
    color: var(--icon) !important;
    transform: none !important;
    border-color: var(--al) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
body.v2 #current-location-btn:active {
    background: var(--al) !important;
    transform: scale(0.95) !important;
}

/* Auth circle */
.auth-circle { font-size: 20px; }
.auth-circle.signed-in {
    background: var(--al);
    border-color: var(--am);
    color: var(--text);
}

/* ── Notifications ── */
.notif-btn {
    position: relative;
    font-size: 19px;
}
.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    line-height: 1;
}
.notif-dropdown {
    /* Fixed to the viewport (its .top-left parent is a narrow column, so an
       absolute width bled off the right). left+right give equal screen padding. */
    position: fixed;
    top: 98px;          /* under the account circle (44) + gap (10) + bell (44) */
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 440px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: var(--elev-3);
    z-index: 400;
    -webkit-overflow-scrolling: touch;
}
.notif-dropdown-header {
    position: sticky;
    top: 0;
    background: var(--white);
    padding: 16px 18px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--al);
}
/* Notification filter tabs (All / Boards / Follows) */
.notif-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--al);
    background: var(--white);
}
.notif-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--sub);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.notif-tab--active { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.notif-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    background: var(--bg); color: var(--sub);
}
.notif-tab--active .notif-tab-badge { background: rgba(255,255,255,0.28); color: #fff; }
.notif-list { }
.notif-section-label {
    padding: 12px 18px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sub);
}
.notif-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--sub);
    font-size: 13px;
}
.notif-item {
    padding: 10px 18px;
    border-bottom: 1px solid var(--al);
}
.notif-item:last-child { border-bottom: none; }
.notif-item-body { display: flex; gap: 10px; align-items: flex-start; }
.notif-item-icon { font-size: 17px; color: var(--am); flex-shrink: 0; margin-top: 1px; }
.notif-item-title { font-size: 13px; color: var(--text); line-height: 1.45; }
.notif-item-sub { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.notif-item-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: var(--am); color: #fff; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.notif-invite-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}
.notif-accept-btn, .notif-reject-btn {
    border-radius: 999px;
    padding: 6px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--al);
    -webkit-tap-highlight-color: transparent;
}
.notif-accept-btn { background: var(--am); border-color: var(--am); color: #fff; }
.notif-reject-btn { background: var(--white); color: var(--sub); }

/* ── Public Profile panel ── */
/* Backdrop; the panel itself is sized to sit in the map band between the
   topbar (~14+44px) and the bottom tab pills (~80px), centered, phone-width. */
.profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease;
}
.profile-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 76px;
    bottom: 96px;
    width: min(430px, calc(100vw - 24px));
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    box-shadow: var(--elev-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.18s ease;
}
.profile-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
/* Shared-collection title — centred on the SAME row as the close/search
   buttons (between them), not below in the body. */
.profile-head-title {
    position: absolute;
    top: 12px;
    left: 52px;
    right: 52px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 1;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-head-title .pht-text { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.profile-head-title .pht-count {
    flex-shrink: 0; background: var(--am); color: #fff;
    border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 11px; padding: 2px 8px; min-width: 20px; text-align: center;
}
/* Left spacer matches the count pill so the title stays centred. */
.profile-head-title .pht-balance { flex-shrink: 0; min-width: 27px; }
/* Shared reels: no folder chrome — just the grid. */
.profile-search-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
/* Round header action button (top-right) — e.g. shared-trip "Copy to itinerary".
   Accent-coloured so it reads as the primary action. */
.profile-head-action {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--am); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.profile-head-action:active { opacity: 0.85; }
.profile-search-inputwrap {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 6px 10px; padding: 9px 12px;
    background: var(--bg); border: 1px solid var(--al); border-radius: 12px;
    color: var(--sub);
}
.profile-search-input {
    flex: 1; border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    margin: 0 !important;
}
.profile-char-count { text-align: right; font-size: 11px; color: var(--sub); margin: 2px 2px 8px; }
/* Profile search: header Clear + recent rows with per-item × */
.follow-list-header-actions { display: flex; align-items: center; gap: 10px; }
.profile-recents-clear { background: none; border: none; cursor: pointer; color: var(--am); font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif; }
.profile-recents-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--sub); padding: 6px 12px 2px; }
.profile-search-row { display: flex; align-items: center; }
.profile-search-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 10px 4px 10px 12px; cursor: pointer; }
.profile-recent-x { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--sub); font-size: 15px; padding: 8px 12px; }
.profile-recent-x:active { color: var(--text); }
/* Places autocomplete dropdown must sit above the profile panel (z 9500+). */
.pac-container { z-index: 100000 !important; }
.profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 52px 22px 24px; /* clears the top-left close + top-right search buttons */
    -webkit-overflow-scrolling: touch;
}
.profile-loading, .profile-empty {
    text-align: center;
    color: var(--sub);
    font-size: 13px;
    padding: 24px 8px;
}
/* View mode */
.profile-avatar {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin: 4px auto 12px;
    border: 3px solid var(--al);
}
/* Own-profile avatar with an edit pencil */
.profile-avatar-wrap { position: relative; display: inline-block; margin: 4px auto 12px; }
.profile-avatar-wrap .profile-avatar { margin: 0; }
.profile-avatar-edit {
    position: absolute; right: -2px; bottom: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--am); color: #fff; border: 2px solid var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; padding: 0;
}
/* Photo editor (zoom + pan crop) */
.photo-editor-overlay {
    position: fixed; inset: 0; z-index: 9700;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.photo-editor-sheet {
    width: min(360px, calc(100vw - 24px));
    background: var(--white); border-radius: 18px; padding: 14px 16px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.photo-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text);
}
.photo-editor-header span { font-size: 15px; }
.photo-editor-cancel, .photo-editor-save {
    background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 700;
    font-family: 'Outfit', sans-serif; padding: 4px 2px;
}
.photo-editor-cancel { color: var(--sub); }
.photo-editor-save { color: var(--am); }
.photo-editor-save:disabled { opacity: 0.5; }
.photo-editor-stage {
    position: relative; width: 300px; height: 300px; max-width: 78vw; max-height: 78vw;
    overflow: hidden; border-radius: 14px; background: #111;
    touch-action: none; cursor: grab; user-select: none;
}
.photo-editor-stage:active { cursor: grabbing; }
#photo-editor-img { position: absolute; user-select: none; pointer-events: none; }
/* Circular crop window: a 240px hole via a huge surrounding shadow. */
.photo-editor-ring {
    position: absolute; top: 50%; left: 50%; width: 240px; height: 240px;
    max-width: 62.4vw; max-height: 62.4vw;
    transform: translate(-50%, -50%); border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0,0,0,0.55); pointer-events: none;
    border: 2px solid rgba(255,255,255,0.8);
}
.photo-zoom-slider { width: 100%; accent-color: var(--am); }
.photo-editor-pick {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    color: var(--am); font-weight: 700; font-size: 13.5px; font-family: 'Outfit', sans-serif;
}
.profile-avatar--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--sub);
    font-size: 34px;
}
.profile-name {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}
.profile-handle-row {
    text-align: center;
    font-size: 13px;
    color: var(--sub);
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}
.profile-loc { display: inline-flex; align-items: center; gap: 3px; }
.profile-loc i { font-size: 13px; }
.profile-bio {
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    margin: 12px 4px 0;
}
.profile-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 16px 0 4px;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.profile-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sub);
    margin: 22px 0 10px;
}
/* ── Instagram-style profile layout ─────────────────────────────────────── */
.ig-top { display: flex; align-items: center; gap: 18px; margin: 6px 0 12px; }
.ig-top .profile-avatar, .ig-top .profile-avatar-wrap { margin: 0; flex-shrink: 0; }
.ig-top .profile-avatar { width: 76px; height: 76px; }
.ig-stats { display: flex; flex: 1; justify-content: space-around; }
.ig-stat {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--text); font-family: 'Inter', sans-serif;
}
.ig-stat b { font-size: 17px; font-weight: 700; }
.ig-stat span { font-size: 12.5px; color: var(--sub); }
.ig-identity { text-align: left; margin-bottom: 12px; }
.ig-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
/* Location shown inline next to the nickname (smaller, grey, normal weight). */
.ig-name-loc { font-weight: 500; font-size: 12.5px; color: var(--sub); }
.ig-name-loc .profile-loc { display: inline-flex; align-items: center; gap: 3px; }
.ig-handle { font-size: 12.5px; color: var(--sub); margin-top: 1px; }
.ig-bio { font-size: 13.5px; color: var(--text); margin-top: 5px; line-height: 1.45; }
.ig-addbio { background: none; border: none; padding: 5px 0 0; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--am); }
.ig-btns { display: flex; gap: 8px; margin-bottom: 4px; }
.ig-btn {
    flex: 1; padding: 8px 10px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--al); color: var(--text);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
}
.ig-btn:active { filter: brightness(0.95); }
.ig-btn--primary { background: var(--am); color: #fff; }
.ig-btn--primary.following { background: var(--al); color: var(--text); }
/* Icon-only tab row */
.ig-tabs .profile-tab { flex: 1; padding: 10px 0; font-size: 0; }
.ig-tabs .profile-tab i { font-size: 20px; }
/* Follower / following counts + Follow button (legacy centred variant) */
.profile-stats { display: flex; justify-content: center; gap: 28px; margin: 14px 0 4px; }
.profile-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: none; border: none; cursor: pointer; padding: 2px 6px;
    color: var(--text); font-family: 'Inter', sans-serif;
}
.profile-stat b { font-size: 16px; font-weight: 700; }
.profile-stat span { font-size: 11.5px; color: var(--sub); }
.profile-follow-btn {
    display: block; margin: 10px auto 2px; min-width: 140px;
    padding: 9px 20px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--am); color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 13.5px; font-weight: 700;
}
.profile-follow-btn.following { background: var(--al); color: var(--text); }
.profile-follow-btn:disabled { opacity: 0.6; }
/* Reels / Trips / Pins tabs */
.profile-tabs {
    display: flex; gap: 4px; margin: 20px 0 12px;
    border-bottom: 1px solid var(--al);
}
.profile-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 9px 4px;
    color: var(--sub); font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.profile-tab.active { color: var(--am); border-bottom-color: var(--am); }
.profile-tab i { font-size: 15px; }
/* Follow list overlay */
.follow-list-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.follow-list-sheet {
    width: min(400px, calc(100vw - 24px)); max-height: 70vh;
    display: flex; flex-direction: column;
    background: var(--white); border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.follow-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--al);
    font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text);
}
.follow-list-close { background: none; border: none; cursor: pointer; color: var(--sub); font-size: 18px; }
.follow-list-body { overflow-y: auto; padding: 6px; }
.follow-list-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: none; background: none; cursor: pointer; text-align: left;
    border-radius: 12px;
}
.follow-list-row:active { background: var(--al); }
.follow-list-row img, .follow-list-avatar-blank {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--al); color: var(--sub);
}
.follow-list-meta { display: flex; flex-direction: column; min-width: 0; }
.follow-list-meta b { font-size: 14px; color: var(--text); }
.follow-list-meta small { font-size: 12px; color: var(--sub); }
.profile-collections { display: flex; flex-direction: column; gap: 8px; }
.profile-collection-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--al);
    background: var(--bg);
    cursor: pointer;
    font-family: inherit;
}
.profile-collection-card:active { background: var(--al); }
.profile-collection-card > i { font-size: 20px; color: var(--am); flex-shrink: 0; }
.profile-collection-arrow { margin-left: auto; color: var(--sub); font-size: 16px; }
/* Collection drill-in view (inside the profile panel) */
.profile-collection-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.profile-back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--al); color: var(--icon);
    cursor: pointer; flex-shrink: 0; font-size: 15px;
}
.profile-collection-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); }
.profile-reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-reel-tile { aspect-ratio: 9 / 14; border-radius: 10px; overflow: hidden; background: var(--al); cursor: pointer; position: relative; }
.profile-item-list { display: flex; flex-direction: column; gap: 6px; }
.profile-item-row { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1); }
.profile-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile-item-sub { font-size: 12px; color: var(--sub); margin-top: 1px; }
.profile-collection-meta { min-width: 0; }

/* ── Shared pin list (read-only, richer cards: type icon, rating, location,
   notes, optional photo) + a "Save list" header action. ─────────────────── */
.shared-pinlist { display: flex; flex-direction: column; gap: 10px; }
.shared-pin-card {
    display: flex; gap: 12px; align-items: stretch;
    padding: 12px 14px; border-radius: 14px;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-2);
}
.shared-pin-photo { flex-shrink: 0; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: var(--bg); }
.shared-pin-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-pin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.shared-pin-top { display: flex; align-items: center; gap: 8px; }
.shared-pin-typeicon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--am) 12%, transparent);
}
.shared-pin-typeicon i { font-size: 15px; color: var(--am); }
.shared-pin-name { flex: 1; min-width: 0; font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.shared-pin-rating { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: #E0A400; }
.shared-pin-rating i { font-size: 13px; color: #F5B400; }
.shared-pin-loc { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); }
.shared-pin-loc i { font-size: 13px; flex-shrink: 0; }
.shared-pin-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-pin-notes { font-size: 12.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; }

/* Shared-itinerary day pickers (All Days / Day 1 / Day 2 …) */
.shared-itin-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.shared-itin-days::-webkit-scrollbar { display: none; }
.shared-day-pill {
    flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--sub);
    cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.shared-day-pill--active { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }

/* ── Shared itinerary (read-only) — same format as the in-app trip timeline
   (time chip + stop card + transport/time/directions leg rows), day/date
   hidden, with a Copy-to-itinerary action up top. ───────────────────────── */
.shared-itin-copybtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-bottom: 14px; padding: 12px;
    border: none; border-radius: 12px; cursor: pointer;
    background: var(--am); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
}
.shared-itin-copybtn:active { opacity: 0.9; }
.shared-itin-copybtn[disabled] { opacity: 0.7; cursor: default; }
.shared-itin-copybtn i { font-size: 17px; }

.shared-itin2 { display: flex; flex-direction: column; margin-top: 12px; }
.shared-itin-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px; background: var(--white);
    border: 1px solid var(--al); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.shared-itin-time {
    flex-shrink: 0; background: #202124; color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px;
    padding: 4px 10px; border-radius: 999px;
}
.shared-itin-cardname {
    flex: 1; text-align: center; min-width: 0;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Equal side columns shared by stop cards and leg rows so the transport icon
   aligns under the time chip and the name aligns with the leg-time. */
.sic-side { flex: 0 0 58px; display: flex; align-items: center; justify-content: center; }
/* leg row between two stops: transport icon · dashed line · time · dashed line · directions arrow */
.shared-itin-legrow { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.shared-itin-legicon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--sub);
}
.shared-itin-legicon i { font-size: 15px; }
.shared-itin-legline { flex: 1; height: 0; border-top: 1.5px dashed var(--al); }
.shared-itin-legtime {
    flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--al);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--sub);
}
.shared-itin-legdir {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--al); background: var(--white); color: var(--am);
    text-decoration: none;
}
.shared-itin-legdir i { font-size: 15px; }

/* Copy-to-itinerary name-clash prompt */
.copy-conflict-overlay {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: fadeIn 0.15s ease;
}
.copy-conflict-card {
    background: var(--white); border-radius: 18px; padding: 24px 22px 20px;
    width: min(340px, 100%); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.copy-conflict-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--text); padding: 0 4px; }
.copy-conflict-sub { font-size: 13px; color: var(--sub); margin: 8px 0 20px; }
.copy-conflict-actions { display: flex; gap: 12px; }
/* Yes/No variant has no sub-line, so the title sits directly above the buttons
   — give it breathing room (the conflict variant is spaced by its -sub margin). */
.copy-conflict-title + .copy-conflict-actions { margin-top: 22px; }
.copy-conflict-actions .ccb {
    flex: 1; padding: 13px; border-radius: 12px; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; border: 1px solid var(--al);
}
.ccb-new { background: var(--bg); color: var(--text); }
.ccb-replace { background: var(--am); color: #fff; border-color: var(--am); }
.copy-conflict-actions .ccb:active { opacity: 0.9; }
.ccb-cancel { margin-top: 18px; padding: 8px; background: none; border: none; cursor: pointer; color: var(--sub); font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.profile-collection-name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile-collection-sub { font-size: 12px; color: var(--sub); margin-top: 1px; }
/* Edit mode */
.profile-field-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub);
    margin: 14px 0 5px;
}
.profile-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--al);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
    resize: none;
}
.profile-input:focus { outline: none; border-color: var(--am); }
.profile-username-wrap { position: relative; display: flex; align-items: center; }
.profile-at {
    position: absolute;
    left: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sub);
    pointer-events: none;
}
.profile-input--username { padding-left: 26px; }
.profile-username-hint { font-size: 11.5px; color: var(--sub); margin-top: 5px; line-height: 1.4; }
.profile-username-hint--error { color: #EF4444; }
.profile-pick-group { margin-top: 12px; }
.profile-pick-title {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.profile-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--al);
    background: var(--bg);
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.profile-pick-cb { width: 17px; height: 17px; accent-color: var(--am); flex-shrink: 0; }
.profile-hint { font-size: 12px; color: var(--sub); line-height: 1.5; margin: 0 0 4px; }
.profile-edit-actions { display: flex; gap: 10px; margin-top: 20px; }
.profile-cancel-btn, .profile-save-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.profile-cancel-btn { border: 1px solid var(--al); background: var(--white); color: var(--sub); }
.profile-save-btn { border: none; background: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.profile-save-btn:active { transform: translateY(1px); box-shadow: var(--elev-1); }
.profile-save-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
/* Clickable collaborator name (opens their profile) — reset button to match
   the plain .collab-member-email look, just tappable. */
.collab-member-link {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.collab-member-link:hover { text-decoration: underline; }

/* All pill — also needs contrast border */
.all-pill {
    border: 1.5px solid rgba(188,204,220,0.4) !important;
}

/* Account menu dropdown */
.account-menu {
    position: absolute;
    top: 54px;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    box-shadow: var(--elev-3);
    min-width: 170px;
    overflow: hidden;
    z-index: 300;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.acct-info {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--al);
}
.acct-info-name { font-weight: 700; font-size: 13px; color: var(--text); font-family: 'Outfit', sans-serif; }
.acct-info-email { font-size: 11px; color: var(--sub); margin-top: 2px; }

.acct-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}
.acct-item:active { background: var(--al); }
.acct-item i { color: var(--ad); font-size: 16px; }

/* ── All-button saved places popup ── */
.all-popup {
    position: absolute;
    top: 72px;
    left: 14px;
    width: calc(100% - 28px);
    max-width: 340px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--al);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 300;
    overflow: hidden;
    animation: fadeIn 0.18s ease;
}
.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--al);
}
.popup-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.popup-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.popup-close:active { background: var(--al); }

.popup-chips {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.popup-chips::-webkit-scrollbar { display: none; }
.popup-chips .filter-chip {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 5px 12px !important;
    min-height: 30px !important;
    white-space: nowrap;
}

.popup-list {
    max-height: 44vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 10px 12px;
}

/* Cards inside popup — compact version */
body.v2 .popup-list .location-item {
    margin-bottom: 6px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
}

/* PAC input — shortened non-overlapping search bar when open */
body.v2 #pac-input,
body.v2 #pac-input.search-visible {
    position: absolute !important;
    top: 14px !important;
    left: 72px !important;
    right: 72px !important;
    z-index: 200 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    color: var(--text) !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    display: none !important;
    box-sizing: border-box !important;
}
body.v2 #pac-input.search-open {
    display: block !important;
    pointer-events: auto !important;
    border-radius: 50px !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
    font-size: 15px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AA6B2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}

/* Clear (×) button inside the search bar — the bar itself stays inset between
   the login bubble and the search toggle button (see #pac-input left/right: 72px). */
#pac-clear-btn {
    display: none;
    position: absolute;
    /* Vertically centred against the search bar: bar top:14px, height ≈
       (15px font + 12px*2 padding) ≈ 42px, so centre-line = 14 + 21 = 35px. */
    top: 35px;
    transform: translateY(-50%);
    right: 82px;
    z-index: 210;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sub);
    font-size: 16px;
    padding: 0;
}
#pac-clear-btn:hover { background: var(--al); }

/* PAC suggestions: keep Google's default look entirely (fonts, colors, borders,
   item styling) — only override the container's position/width so the dropdown
   spans the full viewport even though the search bar itself stays inset. */
body.v2 .pac-container {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 8px !important;
    /* Above the Settings overlay (z-index 9500) so the autocomplete dropdown
       isn't hidden behind it — otherwise "search" looks like it has no results. */
    z-index: 10000 !important;
}

/* Floating bulletin-board button — bottom-right corner of an individual
   trip's timeline view only (shown/hidden by openTripTimeline/goBackToFolders
   in app.js). Fixed so it stays anchored to the visible sheet regardless of
   how far the timeline is scrolled; #itinerary-panel's own transform (used
   for the drag-to-snap sheet) becomes its containing block, so it still
   travels with the sheet as it's dragged, same as .reels-edit-bar. */
.bulletin-board-fab {
    position: fixed;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    right: 26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--am);
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.bulletin-board-fab i { font-size: 24px; color: #fff; }
.bulletin-board-fab:active { transform: scale(0.92); }
/* "New post" badge — a red dot on the board FAB when a collaborator has posted
   something the current user hasn't seen yet. */
.bulletin-board-fab { overflow: visible; }
.bulletin-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid var(--white, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: bulletinBadgePop 0.25s ease;
}
@keyframes bulletinBadgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Bottom floating tabs ── */
#bottom-tabs {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    width: min(380px, calc(100vw - 32px));
}

.float-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.22s ease;
    min-height: 48px;
    flex: 1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.float-tab:active { background: var(--bg); transform: scale(0.96); }
.float-tab:focus { outline: none; }
.float-tab:focus:not(:focus-visible) { background: var(--white); }
.float-tab i { font-size: 16px; color: var(--ad); transition: color 0.22s ease; }
.float-tab--active {
    background: #D2E3FC;
    color: #1A73E8;
    box-shadow: 0 4px 12px rgba(26,115,232,0.15), 0 1px 3px rgba(0,0,0,0.06);
}
.float-tab--active i { color: #1A73E8; }
body.route-active .float-tab--active {
    background: var(--white);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
}
body.route-active .float-tab--active i { color: var(--ad); }

/* ── Bottom Sheet ── */
body.v2 #itinerary-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: max(0px, calc(50% - 215px)) !important;
    right: max(0px, calc(50% - 215px)) !important;
    width: auto !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.10), 0 -1px 6px rgba(0,0,0,0.06) !important;
    background: var(--white) !important;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
    z-index: 200 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ══════════════════════════════════════════════════════════════════
   DEV MODE — master admin, wide desktop viewport only (see app.js
   _updateDevModeState). Pins a fixed-size iPhone-14-Pro-Max-shaped
   (430×932) mock to the LEFT — real bezel, Dynamic Island, side
   buttons, injected by _renderPhoneBezel() — instead of a phone-width
   column stretched to the browser's own height. Frees the right side
   for a persistent, non-modal dock for Klook pin curation and Admin
   Mode (template editing happens by using the phone mock on the left,
   scoped to __template__ data) — so both can be done without a
   full-screen overlay hiding the live map.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    body.v2.dev-mode {
        /* Distance from the viewport's top/bottom edge to the 932px-tall
           phone box — centers it vertically when there's room, clamps to
           a 24px margin on short windows rather than overflowing. --phone-x
           now HORIZONTALLY centers the 430px phone (50vw - half its width)
           so the Template dock sits to its left and Klook to its right. */
        --phone-y: max(24px, calc(50vh - 466px));
        --phone-x: calc(50vw - 215px);
    }
    body.v2.dev-mode #map-container {
        left: var(--phone-x) !important;
        right: auto !important;
        top: var(--phone-y) !important;
        bottom: auto !important;
        width: 430px !important;
        height: 932px !important;
        border-radius: 52px !important;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
        z-index: 1;
        /* Clips the reparented bottom-sheet (see _syncDevPhoneClip) — the
           sheet is now an absolute child of this box, so its off-screen
           peek/half slide is contained within the phone instead of spilling
           into the dark area below it. Also rounds the map to the phone. */
        overflow: hidden !important;
    }
    /* Bottom sheet, reparented into #map-container by _syncDevPhoneClip and
       re-anchored as an absolute child of the phone screen. Its own
       translateY peek/half slide now clips against the phone's bottom edge
       (via #map-container's overflow:hidden) rather than the viewport's. */
    body.v2.dev-mode #itinerary-panel {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 70px) !important;
        max-height: calc(100% - 70px) !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 2;
    }
    /* #topbar and #bottom-tabs are DOM children of #map-container, which is
       itself the position:fixed containing block their own left/right/
       bottom percentages resolve against — so unlike #itinerary-panel
       (a body-level sibling), they need NO viewport-relative left/width
       override at all; #map-container moving is enough to carry them
       along correctly. Only #topbar's `top` needs a genuine change, to
       clear the Dynamic Island (which sits ~11–48px from the screen's
       true top edge — well past the 14px inset meant for a notch-less
       phone). */
    body.v2.dev-mode #topbar {
        top: 58px !important;
        z-index: 3;
    }

    /* Decorative bezel + Dynamic Island + side buttons, injected once by
       _renderPhoneBezel() (app.js) — purely visual, pointer-events:none,
       sized slightly larger than the 430×932 screen so an even metal
       ring shows around it. Their default `display:none` deliberately
       lives OUTSIDE this media query (see below) — kept in here, these
       elements had no hidden state at all below 1100px and leaked
       through at their unstyled div default (position:fixed with an
       undefined --phone-x/--phone-y calc(), landing near the top-left
       corner) on every screen size, including phones. */
    body.v2.dev-mode #phone-bezel,
    body.v2.dev-mode .phone-island,
    body.v2.dev-mode .phone-btn {
        display: block;
    }
    #phone-bezel {
        left: calc(var(--phone-x) - 14px);
        top: calc(var(--phone-y) - 14px);
        width: calc(430px + 28px);
        height: calc(932px + 28px);
        border-radius: 66px;
        background: linear-gradient(155deg, #3a3d42, #1a1c1f 40%, #101113);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 30px 70px rgba(0,0,0,0.55);
        z-index: 0;
    }
    .phone-island {
        left: calc(var(--phone-x) + 152px);
        top: calc(var(--phone-y) + 11px);
        width: 126px;
        height: 37px;
        border-radius: 20px;
        background: #000;
        z-index: 10;
    }
    .phone-btn--mute   { left: calc(var(--phone-x) - 16px); top: calc(var(--phone-y) + 92px);  width: 3px; height: 28px; }
    .phone-btn--vol-up { left: calc(var(--phone-x) - 16px); top: calc(var(--phone-y) + 140px); width: 3px; height: 52px; }
    .phone-btn--vol-dn { left: calc(var(--phone-x) - 16px); top: calc(var(--phone-y) + 202px); width: 3px; height: 52px; }
    .phone-btn--power  { left: calc(var(--phone-x) + 430px + 13px); top: calc(var(--phone-y) + 160px); width: 3px; height: 84px; }

    /* Two flanking docks around the centered phone. Positioning lives HERE,
       inside the media query, alongside the --phone-x/--phone-y it depends
       on. Left dock spans from the left margin to the phone's left bezel
       edge (--phone-x - 14px) minus a gap; right dock mirrors it. Both
       match the phone's vertical span for a clean 3-column line-up. */
    #dev-template-panel {
        left: 24px;
        right: calc(100vw - var(--phone-x) + 30px);
        top: var(--phone-y);
        bottom: var(--phone-y);
    }
    #dev-klook-panel {
        left: calc(var(--phone-x) + 430px + 30px);
        right: 24px;
        top: var(--phone-y);
        bottom: var(--phone-y);
    }
    body.v2.dev-mode #dev-template-panel,
    body.v2.dev-mode #dev-klook-panel { display: flex; }

    /* Phone-scoped overlays — every bottom-sheet/modal/picker that belongs
       to the simulated phone UI (Klook edit form, pin pickers, reel viewer,
       photo lightbox, attach-reel float) is `position:fixed; inset:0` so it
       normally covers the whole screen. In dev mode that meant a form
       triggered from the phone/right-panel spanned the entire browser
       window instead of the 430px phone. Clip them all to the phone box and
       round to the screen's radius so they read as in-phone overlays. */
    /* White iOS-style status bar with a clock at the top of the phone screen. */
    body.v2.dev-mode .phone-statusbar {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 48px;
        background: #fff;
        padding: 0 34px;
        z-index: 4;
        pointer-events: none;
    }
    body.v2.dev-mode .phone-clock {
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: #111;
        margin-top: 4px;
    }

    body.v2.dev-mode .replace-pin-overlay,
    body.v2.dev-mode .pin-picker-overlay,
    body.v2.dev-mode .reel-popup-overlay,
    body.v2.dev-mode .pdc-lightbox,
    body.v2.dev-mode .profile-overlay,
    body.v2.dev-mode .settings-overlay,
    body.v2.dev-mode .follow-list-overlay,
    body.v2.dev-mode .klook-popup-overlay,
    body.v2.dev-mode .pin-list-picker-overlay,
    body.v2.dev-mode .add-to-list-overlay {
        /* Override each side individually — a shorthand `inset: auto` here
           would re-clobber left/top no matter their order, since it's a
           shorthand for all four sides. */
        right: auto !important;
        bottom: auto !important;
        left: var(--phone-x) !important;
        top: var(--phone-y) !important;
        width: 430px !important;
        height: 932px !important;
        border-radius: 44px !important;
        overflow: hidden !important;
    }
    /* The bottom-sheet inside those overlays already rounds its own top
       corners; cap its height to the phone so it never spills past the
       rounded screen. */
    body.v2.dev-mode .replace-pin-sheet,
    body.v2.dev-mode .pin-picker-sheet {
        max-height: 88% !important;
    }
    /* The profile panel is its own position:fixed element (not a child of a
       backdrop), so it must be re-anchored to the phone column rather than the
       viewport centre, and kept between the phone's top bar and bottom tabs. */
    body.v2.dev-mode .profile-panel {
        left: calc(var(--phone-x) + 14px) !important;
        transform: none !important;
        top: calc(var(--phone-y) + 76px) !important;
        bottom: auto !important;
        height: calc(932px - 76px - 100px) !important;
        width: 402px !important;
    }
    /* Floating (non-backdrop) dev/pin helpers are viewport-fixed too —
       re-anchor them to the phone column so they don't drift to the middle
       of the desktop window. */
    body.v2.dev-mode .pdc-attach-float,
    body.v2.dev-mode .reel-select-confirm {
        left: calc(var(--phone-x) + 16px) !important;
        right: auto !important;
        width: 398px !important;
        transform: none !important;
    }
    body.v2.dev-mode .reel-select-banner {
        left: calc(var(--phone-x) + 16px) !important;
        right: auto !important;
        width: 398px !important;
        transform: none !important;
    }
}
/* Hidden by default at ANY width — only the >=1100px media query above
   ever reveals these (and only combined with body.v2.dev-mode). Without
   this, a master admin on a phone (or a narrower desktop window) would
   see the decorative bezel/island/buttons floating unstyled near the
   page's top-left corner instead of nothing at all. position/pointer-
   events also live here (rather than inside the media query) since
   they're needed regardless of which breakpoint reveals the element —
   only left/top/size are breakpoint-dependent (they reference --phone-x/
   --phone-y, only defined inside the media query).*/
#phone-bezel, .phone-island, .phone-btn, .dev-side-panel {
    display: none;
}
#phone-bezel, .phone-island, .phone-btn {
    position: fixed;
    pointer-events: none;
}
.phone-btn {
    background: #232528;
    border-radius: 3px;
}
.dev-side-panel {
    position: fixed;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    flex-direction: column;
    z-index: 50;
}

.dev-panel-header {
    flex-shrink: 0;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--al);
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.dev-panel-header i { color: var(--am); font-size: 20px; }
.dev-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 32px;
}
.dev-panel-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sub);
    margin: 0 0 10px;
}
.dev-panel-hint {
    font-size: 13.5px;
    color: var(--sub);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 46em;
}
.dev-panel-toggle-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.dev-panel-toggle-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px solid var(--al);
    background: var(--bg);
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dev-panel-toggle-btn:hover { border-color: var(--am); }
.dev-panel-toggle-btn.active { background: var(--am); border-color: var(--am); color: #fff; }
.dev-panel-publish-btn,
.dev-panel-add-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: var(--am);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--am) 35%, transparent);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.dev-panel-publish-btn { background: var(--text); box-shadow: none; }
.dev-panel-publish-btn:hover, .dev-panel-add-btn:hover { transform: translateY(-1px); }

/* Desktop-scale Klook row list — more breathing room than the mobile
   overlay version of these same rows. */
#dev-klook-panel .klook-admin-list { gap: 10px; padding: 0; }
#dev-klook-panel .klook-admin-row {
    border-radius: 16px;
    padding: 6px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#dev-klook-panel .klook-admin-row:hover { border-color: var(--al); background: var(--white); }
#dev-klook-panel .klook-admin-row-main { padding: 10px 16px; }
#dev-klook-panel .klook-admin-row-name { font-size: 14px; }
#dev-klook-panel .klook-admin-row-icon { width: 38px; height: 38px; font-size: 16px; }
#dev-klook-panel .klook-admin-row-icon:hover { background: var(--al); }

/* Drag handle area */
.sheet-handle {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 0;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    touch-action: none;
    user-select: none;
    cursor: grab;
    gap: 10px;
}
.drag-bar {
    width: 36px;
    height: 4px;
    background: var(--al);
    border-radius: 2px;
    flex-shrink: 0;
}
.sheet-header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    min-height: 40px;
}
/* Title in the auto centre column — always at the exact visual centre */
.sheet-title {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2;
}
.sheet-close-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
    justify-self: start;
}
.sheet-close-btn:active { background: var(--al); color: var(--text); }

/* Sheet header action button (e.g. + New Trip) — dark circle to match top-bar icons */
.sheet-action-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--icon);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.sheet-action-btn:active { background: var(--am); color: var(--white); }

/* Left slot wrapper — holds close button and optional collab row */
.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-column: 1;
    justify-self: start;
}

/* Right slot wrapper — holds action button, pushed to far right */
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    grid-column: 3;
    justify-self: end;
}

/* Pill text variant of sheet action button (Add Folder / Add Pin) */
.sheet-pill-btn {
    width: auto !important;
    min-width: unset !important;
    border-radius: 20px !important;
    padding: 0 12px !important;
    gap: 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.sheet-pill-btn i { font-size: 14px; }

/* Collab row inside header (timeline mode) */
.header-collab-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Unified collab pill button for header */
.collab-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 2px 8px 2px 2px;
    height: 30px;
    cursor: pointer;
    transition: all var(--transition);
}
.collab-pill-btn:hover {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 8%, white);
}
.collab-pill-btn i {
    font-size: 12px;
    color: var(--text);
}
/* Overlapping avatar stack — replaces the old static "Shared" text badge and
   the owner-only single-avatar pill, so both owner and collaborator views
   show real people instead of a generic label. */
.collab-bubble-stack {
    display: flex;
    align-items: center;
}
.collab-bubble-stack .collab-row-avatar {
    width: 24px;
    height: 24px;
    margin-left: -8px;
    border: 2px solid var(--white);
}
.collab-bubble-stack .collab-row-avatar:first-child { margin-left: 0; }
/* Role rings — owner red, guest/collaborator blue — so role reads at a
   glance in the overlapping stack. */
/* Full border shorthand — the full collaborators panel (.collab-member-row)
   doesn't get a border from anywhere else, so border-color alone would have
   nothing to color there. */
.collab-row-avatar.collab-avatar-owner { border: 2px solid #ef4444; }
.collab-row-avatar.collab-avatar-guest { border: 2px solid #3b82f6; }
/* Add-collaborator badge — matches avatar ring styling so it reads as
   part of the stack instead of a bare floating icon. */
.collab-row-avatar.collab-add-avatar {
    background: var(--bg);
    color: var(--am);
    font-size: 12px;
    cursor: pointer;
}

/* Shared avatar look used both in the header stack and the full panel rows */
.collab-row-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.collab-row-initial {
    background: var(--am);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.collab-overflow {
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 10px;
    font-weight: 700;
}

/* Collab management panel */
.collab-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.collab-panel {
    position: relative;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 320px;
}
.collab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.collab-panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.collab-log-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
}
.collab-log-btn i { font-size: 13px; }
/* The shared .collab-history-dropdown is normally absolutely positioned
   relative to a wrapper with no other content, so top:100% sits right
   under it. Inside .collab-panel that same wrapper contains the whole
   member list too, so absolute positioning here would push it way down.
   Keep it in normal flow instead — it just expands the panel. */
#panel-collab-history-dropdown {
    position: static;
    width: 100%;
    max-height: 200px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.collab-panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.collab-panel-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sub);
    font-size: 14px;
}
.collab-panel-loading {
    font-size: 13px;
    color: var(--sub);
    text-align: center;
    padding: 8px 0;
}
.collab-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--al);
}
.collab-member-row .collab-row-avatar { width: 28px; height: 28px; font-size: 12px; }
.collab-owner-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 4px;
}
.collab-member-email {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collab-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--sub);
    border-radius: 4px;
    flex-shrink: 0;
}
.collab-remove-btn:hover { color: #e53e3e; }
.collab-makeowner-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--sub);
    border-radius: 4px;
    flex-shrink: 0;
}
.collab-makeowner-btn:hover { color: #ef4444; }
.collab-permission-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--al);
    border: 1px solid var(--al);
    cursor: pointer;
    padding: 3px 8px;
    color: var(--sub);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.collab-permission-toggle--edit {
    background: color-mix(in srgb, var(--am) 14%, transparent);
    border-color: var(--am);
    color: var(--am);
}
.collab-guest-tag {
    color: var(--sub) !important;
    background: var(--al) !important;
}
/* View-only is a restriction, so give it a warmer tint to stand apart from
   the neutral grey "Guest" pill next to it. */
.collab-viewonly-tag {
    color: #d97706 !important;
    background: rgba(217, 119, 6, 0.12) !important;
}
.collab-empty {
    font-size: 12px;
    color: var(--sub);
    text-align: center;
    margin: 6px 0;
}
.collab-invite-permission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: var(--sub);
}
.collab-invite-permission-toggle {
    display: flex;
    background: var(--al);
    border-radius: 999px;
    padding: 2px;
}
.collab-invite-permission-toggle button {
    border: none;
    background: none;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub);
    border-radius: 999px;
    cursor: pointer;
}
.collab-invite-permission-toggle button.active {
    background: var(--white);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Username-search invite (Collaborators panel) */
.collab-invite-search { margin-top: 12px; }
.collab-invite-search-inputwrap {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 12px;
    background: var(--bg); border: 1px solid var(--al); color: var(--sub);
}
.collab-invite-search-inputwrap i { font-size: 15px; flex-shrink: 0; }
.collab-invite-search-inputwrap input {
    flex: 1; border: none; background: none !important; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    /* Beat the global body.v2 input min-height:44px — this input sits inside a
       padded wrap, so it only needs to be a single text line tall. */
    margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
}
.collab-invite-search-results { display: flex; flex-direction: column; margin-top: 4px; }
.collab-invite-empty { font-size: 12px; color: var(--sub); padding: 8px 12px; }
.collab-invite-result {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; background: none; cursor: pointer;
    border-radius: 10px; text-align: left;
}
.collab-invite-result:active { background: var(--bg); }
.collab-invite-result--sending { opacity: 0.5; }
.collab-invite-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.collab-invite-avatar-initial {
    display: flex; align-items: center; justify-content: center;
    background: var(--am); color: #fff; font-weight: 700; font-size: 13px;
}
.collab-invite-result-name {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.collab-invite-result-handle { font-weight: 500; font-size: 11.5px; color: var(--sub); }
.collab-invite-result > i { color: var(--am); font-size: 16px; flex-shrink: 0; }
.collab-invite-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--am);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    box-shadow: var(--accent-shadow);
}
.collab-invite-btn:hover { opacity: 0.9; }
.collab-invite-btn:active { transform: translateY(1px); box-shadow: var(--elev-1); }

.collab-leave-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: transparent;
    color: #ef4444;
    border: 1.5px solid #ef4444;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
}
.collab-leave-btn:hover { background: rgba(239,68,68,0.08); }

/* ── Settings panel: nickname field (added to the existing modal in
   theme.js, reusing its .settings-section/.settings-label) ──────────── */
.settings-hint {
    font-size: 11px;
    color: var(--sub);
    margin: 2px 0 6px;
}
.settings-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--al);
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    background: var(--bg);
}
.settings-input:focus { outline: none; border-color: var(--am); }
.settings-save-btn {
    margin-top: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: var(--am);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.settings-save-btn:active { opacity: 0.85; }

/* Shared trip folder badge */
.folder-shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border-radius: 6px;
    padding: 2px 6px;
}
.trip-folder--shared .folder-tab {
    border-color: color-mix(in srgb, var(--am) 40%, transparent);
}
.trip-folder--shared .folder-body {
    border-color: color-mix(in srgb, var(--am) 40%, transparent);
}

/* Hide desktop chrome */
body.v2 .sidebar-toggle-btn,
body.v2 .extended-crew-bubble,
body.v2 .panel-header,
body.v2 #mobile-top-header,
body.v2 #system-status-badge { display: none !important; }

/* Hidden tab bar */
body.v2 .tabs-hidden { display: none !important; }

/* Panel column */
body.v2 .panel-primary-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    min-height: 0;
}

/* Scrollable content area */
body.v2 .views-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    background: var(--white);
    padding: 14px;
    box-sizing: border-box;
}

/* Location cards */
body.v2 .location-item {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--elev-2) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 8px !important;
    min-height: unset !important;
    padding: 12px 14px !important;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}
body.v2 .location-item:hover {
    background: var(--white) !important;
    border-color: var(--am) !important;
    transform: none !important;
    box-shadow: var(--elev-3) !important;
}
body.v2 .location-item:active {
    background: var(--bg) !important;
    transform: translateY(1px) scale(0.995) !important;
    box-shadow: var(--elev-1) !important;
}
body.v2 .location-item.selected {
    background: color-mix(in srgb, var(--am) 8%, white) !important;
    border-color: var(--am) !important;
}
body.v2 .loc-name { color: var(--text) !important; }
body.v2 .loc-country, body.v2 .loc-meta { color: var(--sub) !important; }

/* Country group — transparent wrapper, two separate bubbles */
body.v2 .country-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
body.v2 .country-group.group-hidden { display: none !important; }
/* Tighten the gap between the country bar and its first state separator. */
body.v2 .country-cards-list .picker-city-group:first-child .pins-city-header { margin-top: 4px; }
/* Header — standalone pill bubble. Same size as the Others-tab country bar
   and the itinerary folder view's .trip-pill (16px/18px padding, 12px
   radius) — was a taller 21px/16px pill, inconsistent with those. */
body.v2 .country-header {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: var(--elev-2) !important;
    transition: all 0.15s ease !important;
    /* Same grid geometry as the Others list (.picker-country-header) so the
       Saved country bars read as the same card: count pill + star on the left,
       name centered, ⋮ on the right. */
    grid-template-columns: 1fr minmax(0, auto) 1fr !important;
    column-gap: 10px !important;
}
/* Left group: blue count pill (matching the Others list) + the star. */
body.v2 .country-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-self: start !important;
}
body.v2 .country-count-pill {
    background: var(--am);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
}
/* Trim the ⋮ button's padding so the bar height matches the Others list
   (its taller default padding was inflating the row past the 53px Others bar). */
body.v2 .country-header .country-bulk-arrow { justify-self: start !important; padding: 0 !important; font-size: 16px !important; }
/* Right group: pin count + red pin marker + drill-in caret (matches the
   Saved / custom-list bars). */
body.v2 .country-header-meta { justify-self: end !important; display: flex; align-items: center; gap: 8px; }
body.v2 .country-header:active { transform: scale(0.98) !important; }
body.v2 .country-group:not(.country-group--collapsed) .country-header {
    border-radius: 12px !important;
    border-bottom: 1px solid var(--al) !important;
    margin-bottom: 4px !important;
}
body.v2 .country-header-label {
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    gap: 8px !important;
}
body.v2 .country-count {
    background: var(--am) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 2px 9px !important;
    border-radius: 12px !important;
}
/* Cards list — transparent flex column; each card is its own island */
body.v2 .country-cards-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 6px !important;
    display: flex;
    flex-direction: column !important;
}
/* Each individual location card = standalone white bubble with left accent.
   Also applies to .picker-country-group (the Pins tab "Others" list) so its
   rows share the same card look as the main Saved Pins list. */
body.v2 .country-cards-list .location-item,
body.v2 .picker-country-group .location-item {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    border-left: 3px solid var(--am) !important;
    border-right: 3px solid var(--am) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    padding: 14px 14px 14px 16px !important;
    margin: 0 0 6px !important;
    transition: all 0.15s ease !important;
}
body.v2 .country-cards-list .location-item:active,
body.v2 .picker-country-group .location-item:active {
    transform: scale(0.98) !important;
    background: var(--bg) !important;
}
body.v2 .country-cards-list .location-item:last-child {
    border-bottom: 1px solid var(--al) !important;
}
/* Others-tab rows reuse .saved-card's centered title row, but need their own
   bookmark "save to mine" badge (circular, distinct from the flat pencil
   edit button) positioned the same way .card-edit-btn is in the All tab. */
body.v2 .shared-pin-row .card-title-row .btn-save-mine-badge {
    position: absolute !important;
    right: 0 !important;
}
/* Bulk-select highlight — must out-specificity the base card rules above,
   which force border/background/box-shadow regardless of card context. */
body.v2 .location-item.saved-selected,
body.v2 .country-cards-list .location-item.saved-selected {
    background: color-mix(in srgb, var(--am) 20%, var(--white)) !important;
    border-color: var(--am) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px var(--am) !important;
}
body.v2 .reel-tag-pill { background: color-mix(in srgb, var(--am) 12%, white) !important; color: var(--am) !important; }

/* Trip controls */
body.v2 .trip-selector { background: var(--white) !important; border-color: var(--al) !important; color: var(--text) !important; }
body.v2 .btn-trip-action { background: var(--white) !important; border-color: var(--al) !important; color: var(--icon) !important; min-height: 40px; }
body.v2 .btn-trip-action:active { background: var(--al) !important; }

/* Inputs */
body.v2 .inline-input,
body.v2 input[type="text"],
body.v2 input[type="email"],
body.v2 input[type="date"],
body.v2 input[type="time"],
body.v2 select,
body.v2 textarea {
    background: var(--bg) !important;
    border-color: var(--al) !important;
    color: var(--text) !important;
    min-height: 44px;
    border-radius: 10px !important;
}
body.v2 .inline-input::placeholder { color: var(--ad) !important; }
body.v2 .inline-label { color: var(--sub) !important; }

/* Primary action button */
body.v2 .btn-save {
    background: var(--am) !important;
    color: var(--white) !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2) !important;
    transition: all var(--transition) !important;
}
body.v2 .btn-save:active { background: #2563EB !important; }
body.v2 .btn-delete {
    min-height: 36px !important;
    height: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #ef4444 !important;
    border: 1.5px solid #ef4444 !important;
    color: #000 !important;
}
body.v2 .btn-delete:active { background: #dc2626 !important; }
/* Pins tab's "Delete Location" specifically — a touch wider than the generic
   36px square so it doesn't feel like an afterthought next to Save. */
body.v2 .btn-delete.btn-delete-pin { width: 48px !important; }

/* Filter chips */
body.v2 .filter-chip {
    background: var(--white) !important;
    border: 1.5px solid var(--al) !important;
    color: var(--sub) !important;
    height: 36px;
    border-radius: 50px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}
body.v2 .filter-chip:active { transform: scale(0.95) !important; }
body.v2 .filter-chip.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: var(--white) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.25) !important;
}

/* Pins tab's country bar (All/country/Others chips) — shrunk to match the
   Itinerary tab's "Add Trip"/"A–Z" toolbar bar size instead of the taller,
   fully-pill-shaped default .filter-chip used elsewhere (Reels folders,
   pickers, etc). */
body.v2 #saved-country-chips.tab-filter-chips .filter-chip {
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* Booking cards */
body.v2 .booking-card {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.v2 .booking-card-header { border-bottom-color: var(--al) !important; }

/* ── Left-side vertical timeline layout ────────────────────────── */
body.v2 .timeline-container {
    position: relative;
    padding: 4px 0 8px 0;
}
/* Vertical connecting line behind dots and icons
   Container padding-left=48px → content starts at 48px from container left.
   Line sits at left=22px (inside the 48px padding zone).
   Dot (12px wide) centered on line: left = 22-6 = 16px from container → left:-32px from item.
   Badge (22px wide) centered on line: left = 22-11 = 11px from container → left:-37px from transit-row.
   With view-page 16px padding: line at 38px, dot at 32px, badge at 27px from screen left. */
body.v2 .timeline-container::before {
    display: none;
}
/* Location card wrapper */
body.v2 .tl-item {
    position: relative;
    margin-bottom: 4px;
}
body.v2 .tl-item.route-segment-highlighted .location-item {
    outline: 2px solid var(--route-highlight-color, var(--am));
    outline-offset: 2px;
    border-radius: 12px;
    animation: routeCardPulse 0.4s ease forwards;
}
@keyframes routeCardPulse {
    0%   { outline-color: transparent; }
    50%  { outline-color: var(--route-highlight-color, var(--am)); }
    100% { outline-color: var(--route-highlight-color, var(--am)); }
}
.picker-country-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 10px 4px 8px;
    border-bottom: 1px solid var(--al);
    margin-bottom: 10px;
}
.picker-country-group {
    /* No margin-bottom here — the parent .cards-list already applies a 20px
       flex `gap` between groups; a margin on top of that doesn't collapse
       with flex gap and was stacking into a doubled, oversized gap. */
}
/* Centred country header (Add-to-Itinerary picker): title dead-centre; the flag
   + count + caret sit on the right (title→flag→count order) without offsetting
   the centred title. */
.picker-country-header--centred { position: relative; justify-content: center; }
.picker-country-header--centred .pch-country-name { text-align: center; font-weight: 700; }
.picker-country-header--centred .pch-country-right {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;
}
.picker-country-header--centred .pch-country-right .picker-country-count { margin-left: 0; }
.picker-country-count {
    margin-left: auto;
    background: var(--am);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}
/* Others tab: header-to-cards spacing matches Saved Pins' .country-group
   (flex column + 8px gap between the header pill and its cards), instead of
   the header and cards sitting flush together with only the header's own
   padding between them. */
#saved-others-list .picker-country-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#saved-others-list .picker-country-group.group-hidden { display: none !important; }
/* Others tab: collapsible country bars — same size/shape and true grid
   centering as the itinerary folder view's .trip-pill (not the taller Saved
   Pins .country-header pill), with the title centered in its own grid
   column regardless of how wide the count/chevron group on the right is. */
#saved-others-list .picker-country-header {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 10px;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 0;
    box-shadow: 0 1px 4px var(--shadow);
    transition: all 0.15s ease;
    box-sizing: border-box;
}
#saved-others-list .picker-country-header:active {
    background: var(--bg);
    transform: scale(0.98);
}
#saved-others-list .picker-country-header-left {
    display: flex;
    align-items: center;
    justify-self: start;
}
#saved-others-list .picker-country-header-left .picker-country-count {
    margin-left: 0;
}
#saved-others-list .picker-country-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
#saved-others-list .picker-country-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
/* Reels "Add to Pin" picker: same trip-pill-sized, centered country bar as
   the Others tab, plus accent-bordered card rows instead of the flat
   .pin-loc-item look used elsewhere — the row stays a single click-anywhere
   button (no separate action icon needed here), just reskinned. */
.reel-pin-picker-group > .picker-country-header {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 10px;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    box-sizing: border-box;
}
.reel-pin-picker-group > .picker-country-header .picker-country-header-spacer {
    justify-self: stretch;
}
.reel-pin-picker-group > .picker-country-header .picker-country-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.reel-pin-picker-group > .picker-country-header .picker-country-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
.reel-pin-picker-group .pin-loc-item {
    background: var(--white);
    border: 1px solid var(--al);
    border-left: 3px solid var(--am);
    border-right: 3px solid var(--am);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    padding: 14px 14px 14px 16px;
    margin-bottom: 6px;
    justify-content: center;
}
.reel-pin-picker-group .pin-loc-item .pin-loc-info {
    flex: unset;
    align-items: center;
}
.reel-pin-picker-group .pin-loc-item .pin-loc-name {
    text-align: center;
}
/* Add to Itinerary picker rows: same accent-bordered card as Pins tab lists.
   The Schedule icon button's own positioning rule is further down
   (.itinerary-picker-row .btn-schedule-icon). */
body.v2 .itinerary-picker-row .card-title-row {
    cursor: pointer;
}
.picker-country-chevron {
    flex-shrink: 0;
    color: var(--sub);
    font-size: 13px;
    transition: transform 0.2s ease;
}
.picker-country-group:not(.country-group--collapsed) .picker-country-chevron {
    transform: rotate(180deg);
}
/* City sub-groups: collapsed-by-default rows nested inside a country block.
   Lighter/smaller than the country bar since they sit one level down. */
.picker-city-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    padding: 7px 2px 6px 8px;
    cursor: pointer;
}
.picker-city-count {
    margin-left: auto;
    background: var(--al);
    color: var(--text);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.picker-city-chevron {
    flex-shrink: 0;
    color: var(--sub);
    font-size: 12px;
    transition: transform 0.2s ease;
}
.picker-city-group:not(.city-group--collapsed) .picker-city-chevron {
    transform: rotate(180deg);
}
/* Centred state separator between city groups (no counter, more prominent). */
.pins-state-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 4px 8px;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
}
.pins-state-sep::before, .pins-state-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--al);
}
.pins-state-sep span { white-space: nowrap; }

/* Pins-tab city header: a centred separator — line across, city name + caret
   dead-centre, pin count floated on the right (absolute so it doesn't push the
   name off-centre). Symmetric padding keeps the name truly centred. */
.pins-city-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px; margin: 8px 0 2px; cursor: pointer;
}
.pins-city-header .pch-line { flex: 1; height: 1px; background: var(--al); }
/* State title inside a white pill with a grey outline; the title text is
   centred in the pill (symmetric padding) and the caret sits in the right pad. */
.pins-city-header .pch-name {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    padding: 5px 28px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.pins-city-header .picker-city-chevron {
    position: absolute; right: 10px; top: 50%; margin-top: -6px; color: var(--sub);
}
/* Count sits at the far right; a matching-width spacer on the left keeps the
   name dead-centre while both lines extend the full width of the country bar. */
.pins-city-header .picker-city-count { position: static; margin: 0; flex: 0 0 auto; min-width: 22px; }
.pins-city-header .pch-count-balance { flex: 0 0 auto; min-width: 22px; }
/* Star toggle on the LEFT of a state separator — same width as the count on the
   right so the state name stays dead-centre. Yellow when starred (state pins to
   the top of its country), grey outline otherwise. */
.pins-city-header .pins-state-star {
    flex: 0 0 auto; min-width: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 4px 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pins-city-header .pins-state-star i { font-size: 16px; color: #F4B400 !important; transition: color 0.15s ease, transform 0.12s ease; }
.pins-city-header .pins-state-star--active i { color: #F4B400 !important; }
.pins-city-header .pins-state-star:active i { transform: scale(0.85); }
/* Reel editor: horizontal row of draggable preview tiles + an "add URL" input */
.reel-edit-tiles {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    scrollbar-width: none;
}
.reel-edit-tiles::-webkit-scrollbar { display: none; }
.reel-edit-tile {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    cursor: grab;
    -webkit-touch-callout: none;
}
.reel-edit-tile:active { cursor: grabbing; }
.reel-edit-tile .reel-tile-preview {
    width: 84px;
    aspect-ratio: 9 / 14;
    border-radius: 10px;
    overflow: hidden;
    background: var(--al);
    pointer-events: none; /* let pointerdown fall through to the tile for drag */
}
/* Drag hint pill at the bottom of the tile (the whole tile actually drags). */
.reel-edit-drag {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 18px;
    border-radius: 9px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}
/* × to unpin the reel — top-right of the tile. */
.reel-edit-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.reel-edit-remove:active { background: #EA4335; }
.reel-edit-dragging { opacity: 0.35; }
/* Floating clone that follows the finger while reordering. */
.reel-edit-ghost {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    transform: scale(1.06);
    opacity: 0.95;
}
.reel-edit-ghost .reel-edit-remove, .reel-edit-ghost .reel-edit-drag { display: none; }
/* Reel carousel popup — floats ABOVE the location card's Reel button, no dark
   backdrop (the overlay is transparent, only there to catch outside clicks). */
.reel-carousel-overlay {
    position: fixed; inset: 0; z-index: 9550;
    background: transparent;
}
.reel-carousel-pop {
    position: fixed;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 16px));
    background: var(--white);
    border-radius: 16px;
    padding: 10px 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.32);
    animation: fadeIn 0.14s ease;
}
.reel-carousel-head {
    display: grid; grid-template-columns: 32px 1fr 32px; align-items: center;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--text);
}
.reel-carousel-title { text-align: center; }
.reel-carousel-close, .reel-carousel-editbtn {
    background: none; border: none; cursor: pointer; color: var(--sub);
    font-size: 17px; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
}
.reel-carousel-editbtn { justify-self: end; }
.reel-carousel-close { justify-self: start; }
.reel-carousel-pop.editing .reel-carousel-editbtn { color: var(--am); background: var(--al); }
/* Up to 3 tiles across; each is exactly a third of the row so a single reel
   keeps that size (isn't blown up to full width) and 3 fill the card. */
.reel-carousel-tiles { padding-bottom: 2px; overflow-x: visible; gap: 10px; }
.reel-carousel-tiles .reel-edit-tile { flex: 0 0 auto; width: calc((100% - 20px) / 3); min-width: 0; }
.reel-carousel-tiles .reel-edit-tile .reel-tile-preview { width: 100%; }
/* View mode hides the edit affordances; the pencil (.editing) reveals them. */
.reel-carousel-pop .reel-edit-remove,
.reel-carousel-pop .reel-carousel-add,
.reel-carousel-pop .reel-carousel-actions { display: none; }
.reel-carousel-pop.editing .reel-edit-remove { display: flex; }
.reel-carousel-pop.editing .reel-carousel-add { display: block; }
.reel-carousel-pop.editing .reel-carousel-actions { display: flex; }
.reel-carousel-actions { gap: 10px; }
.reel-carousel-cancel, .reel-carousel-save {
    flex: 1; padding: 10px; border-radius: 12px; border: none; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
}
.reel-carousel-cancel { background: var(--al); color: var(--text); }
.reel-carousel-save { background: var(--am); color: #fff; }
.reel-add-url-input { width: 100%; margin-bottom: 0 !important; }
/* Dot on the vertical line: left=-32px from item (at 48px) → 16px from container left */
body.v2 .tl-dot {
    display: none;
}
/* Transit row between two cards — compact single-line "leg" style (small
   mode icon + plain time/distance text + a plain "Directions" link), with a
   dashed connector line behind it, instead of the old three chunky colored-
   pill elements. */
/* Outer row is now a column: the icon/text/Directions line on top, and (edit
   mode only) the insert-stop button centered alone on its own line below —
   rather than trying to cram all four into one row. */
body.v2 .transit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
body.v2 .transit-row-top {
    position: relative;
    /* 3-column grid mirroring the location card's own layout: a fixed left
       column that lines the transport icon up under the card's time badge,
       a centered middle column so the time estimate sits under the centered
       card title, and an equal-width right column for the Directions arrow.
       Padding matches the card's 14px horizontal padding so the columns
       actually align with the card content above/below. */
    display: grid;
    /* Left col (44px) centers the transport icon under the card's time badge;
       right col (32px) centers the Directions arrow under the card's top-right
       note/pencil button. The two differ by design because the badge and the
       note button sit at slightly different insets. */
    grid-template-columns: 44px 1fr 32px;
    align-items: center;
    min-height: 24px;
    padding: 2px 14px;
}
body.v2 .transit-row-top::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    border-top: 1.5px dashed var(--al);
    z-index: 0;
}
body.v2 .transit-row-top > * { position: relative; z-index: 1; }
body.v2 .transit-row-insert {
    display: flex;
    justify-content: center;
}
/* Standalone "+" below the last card (no transit leg above it) — a little top
   space so it doesn't crowd the card. */
body.v2 .transit-row--end-insert { margin-top: 6px; }
/* Small mode icon — the <select> itself is kept for real interaction (still
   how you change Driving/Walking/Train/Bus) but shrunk to an invisible
   overlay stacked exactly on the icon, tap targets the icon, no visible
   dropdown chrome. */
body.v2 .transit-mode-icon-wrap {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;   /* centered in the 44px grid column → under the time badge */
    width: 30px;
    height: 20px;
    background: var(--bg);
}
body.v2 .transit-mode-icon { font-size: 15px; color: var(--sub); pointer-events: none; }
body.v2 .transit-row.mode-DRIVING .transit-mode-icon { color: #2B5A8A; }
body.v2 .transit-row.mode-WALKING .transit-mode-icon { color: #C0392B; }
body.v2 .transit-row.mode-TRAIN   .transit-mode-icon { color: #2E7A50; }
body.v2 .transit-row.mode-BUS     .transit-mode-icon { color: #C89B1C; }
body.v2 .transit-mode-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
body.v2 .transit-row .transit-text {
    /* Middle grid column — centered, so it lines up under the centered card
       title. Styled as a tinted pill (like the "Add Location" button) whose
       colour matches the transport mode; the per-mode rules below set the
       actual colour. The fill also masks the dashed connector line behind. */
    position: relative;
    z-index: 1;
    justify-self: center;
    text-align: center;
    padding: 4px 22px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    border-radius: 20px;
    cursor: pointer;
    /* Neutral fallback (a row with no recognised mode class). */
    color: var(--sub);
    background: var(--bg);
    border-color: var(--al);
}
/* Each mode's tint is layered OVER an opaque var(--bg) base so the pill fully
   masks the dashed connector line behind it (a bare rgba tint let the line
   show straight through). */
body.v2 .transit-row.mode-DRIVING .transit-text {
    color: #2B5A8A; border-color: rgba(43, 90, 138, 0.5);
    background: linear-gradient(rgba(43, 90, 138, 0.12), rgba(43, 90, 138, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-WALKING .transit-text {
    color: #C0392B; border-color: rgba(192, 57, 43, 0.5);
    background: linear-gradient(rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-TRAIN .transit-text {
    color: #2E7A50; border-color: rgba(46, 122, 80, 0.5);
    background: linear-gradient(rgba(46, 122, 80, 0.12), rgba(46, 122, 80, 0.12)), var(--bg);
}
body.v2 .transit-row.mode-BUS .transit-text {
    color: #C89B1C; border-color: rgba(200, 155, 28, 0.5);
    background: linear-gradient(rgba(200, 155, 28, 0.12), rgba(200, 155, 28, 0.12)), var(--bg);
}
/* Directions arrow — a compact tap target in the right grid column (was the
   full "Directions" text, too tight now). */
body.v2 .transit-directions-link {
    position: relative;
    z-index: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    font-size: 16px;
    color: var(--am);
    cursor: pointer;
}
body.v2 .transit-directions-link i { color: var(--am) !important; }
body.v2 .transit-directions-link:active { opacity: 0.7; }
body.v2.dark .transit-directions-link { color: #8AB4F8; }
body.v2.dark .transit-mode-icon-wrap,
body.v2.dark .transit-text,
body.v2.dark .transit-directions-link { background: var(--bg); }
/* Edit-mode-only "add a stop here" button — same small grey circular icon
   button as the itinerary picker's .btn-schedule-icon, for visual
   consistency between the two "add a stop" affordances. */
body.v2 .transit-insert-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.v2 .transit-insert-btn:active { transform: scale(0.9); }

/* Modal */
body.v2 .modal-card { background: var(--white) !important; color: var(--text) !important; }
body.v2 .modal-title { color: var(--text) !important; }
body.v2 .modal-subtitle { color: var(--sub) !important; }

/* Toast */
body.v2 .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }

/* Date tab active color */
body.v2 .date-tab-btn.active { background: var(--am) !important; color: var(--white) !important; border-color: var(--am) !important; }
/* Dark mode: the bright light-blue --am read as too harsh here — match the
   dark-grey .time-badge ("12:00" timeline pills) instead for a more subdued,
   consistent dark-theme look. */
body.v2.dark .date-tab-btn.active { background: #3C3E42 !important; color: #E8EAED !important; border-color: #3C3E42 !important; }

    #itinerary-panel.extended .brand-row {
        position: relative;
    }

    #itinerary-panel.extended .brand-badge {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        pointer-events: none;
    }

    #itinerary-panel.extended #system-status-badge {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Master-Detail views style */
.detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 250px;
    text-align: center;
    padding: 20px;
    opacity: 0.6;
}

.detail-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-align: left;
    margin-top: 4px;
}

.detail-content .edit-form {
    display: block !important;
    background: var(--color-bg-card-deep);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 12px;
}

.detail-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
}

/* Homebase neon badge visual styling */
.basecamp-badge {
    background: rgba(56, 189, 248, 0.15);
    color: var(--color-interactive);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

#itinerary-panel.extended #empty-itinerary-message #btn-create-trip,
#itinerary-panel.extended #empty-itinerary-message #trip-creator-selector {
    display: none !important;
}

.itinerary-right-title {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 14px 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-location-picker-container-extended {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 4px;
}

/* Multi-Booking Layout & Items styling */
.booking-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-item-row {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.booking-item-row:hover {
    border-color: var(--color-logo-dot);
    box-shadow: 0 4px 12px rgba(144, 184, 224, 0.1);
}

.booking-item-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.btn-booking-item-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 11px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-booking-item-action:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-main);
    border-color: var(--color-logo-dot);
}

.booking-card-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
}

/* Collaboration History Dropdown styling */
.collab-history-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 105;
}

.collab-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collab-history-item {
    font-size: 11px;
    padding: 8px;
    border-radius: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    transition: background 0.2s, border-color 0.2s;
    max-width: 85%;
}

/* Own posts sit to the right (like a sent chat bubble); everyone else's
   activity sits to the left — mirrors _actorLabel()'s "You" vs. named crew. */
.collab-history-item--own {
    align-self: flex-end;
    background: rgba(205, 83, 96, 0.12);
    border-color: rgba(205, 83, 96, 0.35);
}
.collab-history-item--other {
    align-self: flex-start;
}

/* Card highlight flash animation */
@keyframes cardHighlightFlash {
    0% {
        background-color: rgba(67, 132, 150, 0.3);
        box-shadow: 0 0 15px rgba(67, 132, 150, 0.4);
    }
    100% {
        background-color: var(--color-bg-card);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
}

.card-highlight-flash {
    animation: cardHighlightFlash 2.0s ease-out;
}

/* Mobile map type cycle button — hidden by default (desktop uses the pill).
   Only revealed at the mobile peek state via the media query below. */
#map-type-mobile-btn {
    background: rgba(20, 33, 45, 0.88);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-main);
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: background 0.15s;
    line-height: 1;
}
#map-type-mobile-btn:hover {
    background: var(--color-primary);
}

/* Standard exit button inside the InfoWindow reel player.
   Replaces the floating 'x' — single clear control to leave the reel view. */
.btn-reel-exit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-reel-exit:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Desktop map-type selector (Road / Satellite / Terrain) */
#map-type-control {
    display: flex;
    gap: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 3px;
    margin: 10px 0 0 10px; /* offset from top-left corner */
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    /* Positioned inside the map by the Maps API (LEFT_TOP) */
}
#map-type-control button {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
#map-type-control button.active,
#map-type-control button:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   V2 ITINERARY STYLING — clean timeline matching modern app design
   ══════════════════════════════════════════════════════════════════ */

/* Date block — white card with real elevation, not just a hairline border */
body.v2 .date-block {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius) !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    box-shadow: var(--elev-2) !important;
    overflow: hidden !important;
}

/* Date block header — subtle grey bar, day far-left, date centred, route btn far-right */
body.v2 .date-block h4,
body.v2 .date-block-header {
    position: relative !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    margin: 0 !important;
    padding: 10px 70px !important;
    border-bottom: 1px solid var(--al) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.date-label {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.date-day {
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
}
/* In the timeline date-block header, pin day to far left */
body.v2 .date-block-header .date-day {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
}

/* Items inside date block */
/* Itinerary card — clean white, time badge on left */
body.v2 .location-item.itinerary-card {
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 0 !important;
    box-shadow: var(--elev-1) !important;
    min-height: 48px !important;
}
body.v2 .location-item.itinerary-card:active { background: var(--bg) !important; transform: translateY(1px) scale(0.995) !important; box-shadow: none !important; }

/* Date items row spacing */
body.v2 .date-items-row {
    padding: 10px 6px 12px !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Time badge — left-side pill */
body.v2 .time-badge {
    background: var(--text) !important;
    color: var(--white) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.3px !important;
}

/* Card title row — itinerary: left-aligned (time | name), saved: centered */
body.v2 .itinerary-card .card-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
}
body.v2 .saved-card .card-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    position: relative !important;
}
body.v2 .saved-card .card-title-row strong {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    /* Symmetric side padding reserves room for the absolute pencil on the right
       (and keeps the name centred); long names ellipsis-truncate before it. */
    padding: 0 40px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body.v2 .saved-card .card-title-row .card-edit-btn {
    position: absolute !important;
    right: 0 !important;
    margin-left: 0 !important;
}
body.v2 .card-title-row strong {
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.3 !important;
    text-align: center !important;
    justify-content: center !important;
    flex: unset !important;
}
/* Itinerary cards: a 3-column grid — time badge (left), name TRULY centred
   (so it lines up with the centred transit time-estimate below it), and the
   note/pencil actions (right). Equal 1fr side columns are what force the name
   to the card's true centre regardless of the badge/button widths. */
body.v2 .itinerary-card .card-title-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 36px !important;
    gap: 8px !important;
}
body.v2 .itinerary-card .card-title-row .time-badge {
    flex-shrink: 0 !important;
    justify-self: start !important;
}
/* Untimed stops: invisible time pill that still reserves its width, so the
   name centers identically to timed stops. */
body.v2 .time-badge--empty { visibility: hidden !important; }

/* Archived trips: unarchive button on each archived pill, and the read-only
   banner at the top of an archived trip's timeline. */
body.v2 .trip-unarchive-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 20px;
    background: color-mix(in srgb, var(--am) 12%, transparent);
    border: 1px solid var(--am); color: var(--am);
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body.v2 .trip-unarchive-btn:active { background: color-mix(in srgb, var(--am) 20%, transparent); }
/* Archived views are read-only and calm — kill entrance/hint animations
   (swipe wiggles, route-button pulse, pill pop-ins, etc.). Scoped to the
   itinerary page so a lingering class can't freeze animations elsewhere. */
body.archived-view #page-grouped *,
body.archived-view #page-grouped *::before,
body.archived-view #page-grouped *::after { animation: none !important; }
body.v2 .archived-trip-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--am) 8%, var(--white));
    border: 1px solid color-mix(in srgb, var(--am) 35%, transparent);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--am);
}
body.v2 .archived-trip-banner > span { display: inline-flex; align-items: center; gap: 6px; }
body.v2 .archived-banner-unarchive {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 7px 12px; border-radius: 20px;
    background: var(--am); border: none; color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.v2 .archived-banner-unarchive:active { opacity: 0.85; }

/* Location-card ⋮ menu + pin-type bottom sheet (reached from that menu). */
body.v2 .pin-card-menu-sheet {
    position: relative;
    height: auto !important;
    max-height: 70vh !important;
    padding-bottom: 18px;
    background: var(--white);
    border-radius: 20px 20px 0 0;
}
body.v2 .pin-type-row--sheet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 6px 16px 14px;
}
body.v2 .itinerary-card .card-title-row strong {
    text-align: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Right column: note + pencil buttons grouped, pinned to the right edge. */
body.v2 .itinerary-card .card-title-row .card-title-actions {
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
/* Pencil edit button — rightmost flex item, always inside card */
.card-edit-btn {
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    color: var(--ad) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
    display: flex !important;
    align-items: center !important;
}
.card-edit-btn:active { color: var(--text) !important; }

/* Note toggle button — same footprint as the pencil, sits just left of it. */
.card-note-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    margin-left: 4px;
    cursor: pointer;
    color: var(--ad);
    font-size: 15px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
}
.card-note-btn:active { color: var(--text); }
/* The notes bar that drops open below the card title when the note button
   is tapped. */
.card-notes-view {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    text-align: left;
    word-break: break-word;
}
.card-notes-view p { margin: 0; }
.card-notes-view .empty-notes { color: var(--sub); }

/* Pin-type picker — first section of the location editor. Horizontal
   scrollable row of category icon buttons. */
.pin-type-picker { margin-bottom: 16px; }
.pin-type-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pin-type-row::-webkit-scrollbar { display: none; }
.pin-type-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 60px;
    padding: 8px 4px;
    background: var(--bg);
    border: 1.5px solid var(--al);
    border-radius: 12px;
    color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pin-type-btn i { font-size: 20px; }
.pin-type-btn .pin-type-glyph { display: inline-flex; align-items: center; justify-content: center; height: 20px; color: inherit; }
.pin-type-btn .pin-type-glyph svg { width: 20px; height: 20px; display: block; }
.pin-type-btn span {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.pin-type-btn:active { transform: scale(0.95); }
.pin-type-btn.active {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, transparent);
    color: var(--am);
}

/* Card collapse button — appears inside the edit form header */
.card-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    font-size: 14px;
    color: var(--icon);
    cursor: pointer;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
    align-self: flex-start;
}
.card-collapse-btn:active { background: var(--am); color: var(--white); }

/* Old transit-line hidden in v2 (replaced by timeline-container layout) */
body.v2 .transit-connector { display: none !important; }

/* Trip management row — hidden in v2 (navigation via back button) */
body.v2 .trip-management-row { display: none !important; }
body.v2 .trip-selector {
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* Empty itinerary state text colors */
body.v2 #empty-itinerary-message h3 { color: var(--text) !important; }
body.v2 #empty-itinerary-message p { color: var(--sub) !important; }

/* Date filter tab bar */
body.v2 #date-filter-tabs button {
    font-family: 'Outfit', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 POPUP CHIPS — ensure V2 palette even if V1 inline styles bleed
   ══════════════════════════════════════════════════════════════════ */
#all-popup .filter-chip {
    background: var(--bg) !important;
    border: 1.5px solid var(--al) !important;
    color: var(--sub) !important;
    border-radius: 50px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: 34px !important;
    transition: background 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
}
#all-popup .filter-chip.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: var(--white) !important;
}
#all-popup .country-header {
    background: var(--al) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}
#all-popup .country-header-label { color: var(--text) !important; font-weight: 600 !important; }
#all-popup .country-count { background: var(--am) !important; color: white !important; }
#all-popup .location-item {
    background: var(--white) !important;
    border: 1px solid var(--al) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}
#all-popup .location-item:active { background: var(--bg) !important; }
#all-popup .loc-name { color: var(--text) !important; font-weight: 600 !important; }
#all-popup .loc-country, #all-popup .loc-meta { color: var(--sub) !important; }
/* Hide the edit forms and action buttons inside popup items */
#all-popup .edit-form,
#all-popup .btn-trip-add-loc,
#all-popup .btn-trip-remove-loc { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   V2 FOLDER GRID — trip folder cards
   ══════════════════════════════════════════════════════════════════ */
.trip-management-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 2px;
}
.trip-management-bar .btn-trip-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border-radius: 50px;
    min-height: 44px;
    width: 100%;
    background: var(--am) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2);
    transition: all var(--transition);
}
.trip-management-bar .btn-trip-action:active {
    background: #2563EB !important;
    transform: scale(0.97);
}

/* Pencil edit icon overlaid on trip folder — positioned to top-right */
.folder-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: var(--icon);
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.folder-edit-icon:active { color: var(--text); }

.folder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 16px 32px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.trip-folder { min-width: 0; }

/* ── Itinerary pill list ── */
.trip-pill-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 32px;
}
.trip-pill {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    position: relative;
    column-gap: 10px;
    width: 100%;
    padding: 17px 18px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
    font-family: 'Inter', sans-serif;
    transition: box-shadow .2s var(--transition), transform .2s var(--transition), background .2s var(--transition);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.trip-pill:active {
    background: var(--bg);
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.trip-pill--active {
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.09);
}
.trip-pill-left {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: stretch; /* fill grid col 1 so the badge can center within it */
    width: 100%;
}
.trip-star {
    font-size: 20px;
    color: #F4B400;
    flex-shrink: 0;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.15s;
}
/* Right group (stops count + chevron) — grid col 3, pinned right */
.trip-pill-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
.trip-star.country-star--active { color: #f59e0b !important; transform: scale(1.15); }
/* Icon lives in an inner <i class="ph ph-star">, which body.v2 i[class*="ph-"]
   colours directly — so colour the <i>, not just the span, to win over it. */
.trip-star i { color: #F4B400 !important; }
.trip-star.country-star--active i { color: #f59e0b !important; }
.trip-selected {
    border-color: var(--am) !important;
    background: #EBF5FF !important;
    box-shadow: 0 0 0 2px var(--am) !important;
}
.trip-pill-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.trip-pill-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.trip-pill-arrow {
    font-size: 14px !important;
    color: var(--ad) !important;
    flex-shrink: 0;
}
/* Pin-count marker icons across the itinerary/pins/day cards are red to match
   the map's saved-pin markers. */
.trip-pill-meta .ph-map-pin,
.alldays-count .ph-map-pin { color: #e53935 !important; }
/* Collab badge — just the icon, colored to match the pill's own outline
   (no ring/circle around it). Owner red, guest/collaborator blue.
   !important needed to beat the dark-mode .trip-pill border-color
   override further up the sheet, and the global Phosphor icon color
   reset (body.v2 i[class*="ph-"]) for the icon color. */
/* Collab role marker — a tidy tinted avatar disc (not a full-card outline,
   which read like an error state). Owner = red ring, guest = blue ring. The
   colored ring + soft tint reads as "who owns this" without shouting. */
.trip-pill-collab-badge {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    /* Left-anchor the badge a fixed distance from the star. Column 1 (1fr) has
       a fixed left edge but its right edge shrinks as the centered name grows,
       so centering the badge here made it drift with name length. margin-right
       auto keeps it pinned just right of the star regardless of the name. */
    margin-left: 8px;
    margin-right: auto;
}
/* No more full-card colored border — the disc carries the signal now. */
.trip-pill--collab-owner .trip-pill-collab-badge { background: #FDECEC; border-color: #F2A6A6; }
.trip-pill--collab-owner .trip-pill-collab-badge i { color: #E23B3B !important; }
.trip-pill--collab-guest .trip-pill-collab-badge { background: #E9F1FE; border-color: #A7C6F5; }
.trip-pill--collab-guest .trip-pill-collab-badge i { color: #2E74E8 !important; }
body.v2.dark .trip-pill--collab-owner .trip-pill-collab-badge { background: rgba(226,59,59,.16); border-color: rgba(226,59,59,.55); }
body.v2.dark .trip-pill--collab-guest .trip-pill-collab-badge { background: rgba(46,116,232,.16); border-color: rgba(46,116,232,.55); }

/* Date-picker pills (itinerary day filter: All Days / Sep 7 / …). Idle pills
   are white with a soft lift; the active day fills with the accent, lifts, and
   glows so the current day is unmistakable. */
.date-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    color: var(--sub);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.2px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.06);
    transition: background .18s, color .18s, box-shadow .18s, transform .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
}
.date-tab-pill i { font-size: 13px; }
.date-tab-pill:active { transform: translateY(1px) scale(0.97); }
.date-tab-pill--active {
    background: var(--am);
    border-color: var(--am);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26,115,232,.34), 0 8px 18px rgba(26,115,232,.22);
}
.date-tab-pill--active i { color: #fff !important; }
body.v2.dark .date-tab-pill--active {
    background: #3C3E42;
    border-color: #4A4D52;
    color: #E8EAED;
    box-shadow: var(--elev-2);
}
body.v2.dark .date-tab-pill--active i { color: #E8EAED !important; }

.trip-folder {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.trip-folder:active .folder-art { transform: scale(0.96); }

.folder-art {
    width: 100%;
    aspect-ratio: 1 / 0.9;
    position: relative;
    transition: transform 0.15s;
    margin-bottom: 8px;
}

/* Folder tab — slim accent bar at top */
.folder-tab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--al);
    border-radius: 14px 14px 0 0;
    z-index: 1;
}
.trip-folder--active .folder-tab { background: var(--am); }

/* Folder body — clean rounded card */
.folder-body {
    position: absolute;
    inset: 0;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 10px 26px;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.trip-folder--active .folder-body {
    border-color: var(--am);
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

.folder-flags { display: none; }
.folder-dots { display: none; }
.folder-dot { display: none; }
.folder-dot-more { display: none; }

/* Trip name inside the folder body */
.folder-name-inside {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    line-height: 1.3;
    max-width: 90%;
    word-break: break-word;
}

/* Collab row — positioned to bottom-left of folder body */
.folder-collab-row {
    display: flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    bottom: 8px;
    left: 8px;
}
/* Unified collab pill button inside folder card */
.folder-collab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1.5px solid var(--am);
    border-radius: 12px;
    padding: 1px 5px 1px 1px;
    height: 22px;
    cursor: pointer;
    transition: background 0.15s;
}
.folder-collab-pill:hover {
    background: var(--am);
}
.folder-collab-pill .folder-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    object-fit: cover;
    font-family: 'Outfit', sans-serif;
    font-size: 8px;
    font-weight: 700;
    background: var(--am);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.folder-collab-pill i {
    font-size: 9px;
    color: var(--text);
}

/* Bottom row: location count badge */
.folder-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}
.folder-count-badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
}

.folder-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.folder-meta { display: none; }
.folder-active-badge { display: none; }

/* Reels folder cards — a long horizontal "file folder" per folder (colored
   gradient, small tab notch), stacked in a single column. Height matches a
   carousel reel tile (140px wide, 9:16 portrait ≈ 249px tall) so an
   expanded folder's tiles read as roughly the same scale as the collapsed
   card that opened them. Tapping a card expands its tile carousel inline
   right below it (accordion — see _expandedReelsFolderKey in app.js)
   instead of navigating to a separate page, which is what keeps every
   other folder's card in the DOM as a live cross-folder drop target. */
.reels-folder-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 10px 16px 32px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.reels-folder-card {
    position: relative;
    width: 100%;
    height: 115px;
    max-height: 115px;
    border-radius: 20px;
    box-shadow: var(--elev-3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: visible;
    transition: transform 0.15s, opacity 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s ease;
    margin-top: 10px;
}
.reels-folder-card:active { transform: translateY(1px) scale(0.98); box-shadow: var(--elev-2); }
/* Tapped-open transition: the card fades + scales away first (enterReelsFolder
   in app.js adds this class, waits for the transition to finish, then swaps
   to the carousel) so opening a folder reads as "the folder closes, then
   the carousel opens" instead of an instant, jarring swap. Deliberately NOT
   animating max-height/margin here (an earlier version did) — this card has
   overflow:visible (needed for the folder-tab notch poking above it), so a
   shrinking max-height doesn't actually clip/collapse its contents smoothly
   the way it would with overflow:hidden; it just let the box shrink under
   still-full-size content, which read as a snap near the end instead of a
   smooth fade. A plain opacity+scale fade in place looks smooth throughout,
   and the one-frame height jump when loadReels() finally swaps this card
   for the carousel is far less noticeable than a broken mid-fade snap.
   Also keep box-shadow untouched here — it's already used by the drag-over
   affordance below and shouldn't animate alongside this unrelated close
   transition. */
.reels-folder-card--closing {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
    /* Promote to its own GPU layer for the animation so the card's gradient
       fill + elev-3 shadow are rasterized once and merely composited each
       frame, instead of repainting the whole (expensive) card per frame —
       that repaint was the source of the open/close jank on mobile. */
    will-change: opacity, transform;
}

/* Small folder-tab notch, top-left — same trick as a real file-folder icon:
   a slightly narrower, same-colored block sitting above the main body so
   the silhouette reads as a folder, not just a rounded rectangle. */
/* Folder tab removed for now — cards/folders are plain rounded rectangles. */
.reels-folder-tab,
.reels-folder-open-tab { display: none; }

.reels-folder-card-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The global Phosphor icon-color reset (body.v2 i[class*="ph-"]) otherwise
   wins over this button's own color:#fff, since it targets the <i> element
   directly rather than inheriting — the "⋮" was rendering dark/near-
   invisible against the darker gradient folders without this. */
.reels-folder-card-menu i { color: #fff !important; }
.reels-folder-card-bottom {
    position: absolute;
    inset: 0;
    padding: 0 44px; /* clear the ⋮ menu / collab avatar in the corners */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    pointer-events: none; /* taps fall through to the card */
}
.reels-folder-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reels-folder-card-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

/* Collab bubble stack — bottom-right corner, opposite the name/count. */
.reels-folder-card .folder-collab-row {
    position: absolute;
    right: 18px;
    bottom: 14px;
    left: auto;
    /* It's a <button> now (tap opens the folder's collab panel) — strip the
       native button chrome so it looks identical to the old plain avatar row. */
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reels-folder-card .folder-collab-row:active { transform: scale(0.92); }
.reels-folder-card .folder-collab-row .collab-row-avatar {
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border: 1.5px solid #fff;
    font-size: 10px;
}
.reels-folder-card .folder-collab-row .collab-row-avatar:first-child { margin-left: 0; }
.reels-folder-card .folder-collab-row .collab-overflow { width: 22px; height: 22px; font-size: 9px; }

/* Expanded accordion body — the folder's real tile carousel, rendered right
   below its card instead of on a separate page. Animates in on its own
   (fade + slight drop) each time it mounts, which — combined with
   .reels-folder-card--closing's shrink-away on the tapped card just before
   this replaces it — reads as "the folder closes, then the carousel opens"
   rather than an instant swap. */
.reels-folder-list .reels-section {
    margin-top: -6px;
    padding: 0 2px;
    animation: reelsSectionEnter 0.26s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
}
@keyframes reelsSectionEnter {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.reels-folder-list .reels-carousel { padding: 0; }
/* Collapsing back to the grid — added by enterReelsFolder just before it
   swaps back, mirrors reelsSectionEnter in reverse. Timing matches
   .reels-folder-card--closing's 0.22s so the two halves of either
   transition (opening: card away → carousel in; closing: carousel away →
   card back) feel like one consistent motion rather than two different
   speeds stitched together. */
.reels-folder-list .reels-section--closing {
    animation: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity, transform;
}

/* Drag-over "minimize + shake" affordance — a folder card currently
   underneath a dragged reel tile shrinks and jiggles continuously, the same
   "this can accept a drop" cue as an iOS home-screen folder icon wiggling
   while you're rearranging apps. Added/removed live by the shared
   onDragMove Sortable hook in app.js. No added ring/box-shadow here (an
   earlier version had one) — it read as an extra colored background
   plate sitting behind the card once shrunk, competing with the actual
   drag ghost preview instead of just quietly indicating the drop target;
   the shrink+jiggle alone is a clear enough cue on its own. */
.reels-folder-card.reels-folder-drag-over {
    animation: reelsFolderDragShake 0.45s ease-in-out infinite;
}
@keyframes reelsFolderDragShake {
    0%, 100% { transform: scale(0.9) rotate(0deg); }
    25% { transform: scale(0.9) rotate(-2.5deg); }
    75% { transform: scale(0.9) rotate(2.5deg); }
}

/* Back button in timeline view */
.timeline-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--sub);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    -webkit-tap-highlight-color: transparent;
}
.timeline-back-btn:active { background: var(--al); }

/* ══════════════════════════════════════════════════════════════════
   V2 REELS TAB
   ══════════════════════════════════════════════════════════════════ */
.reels-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 32px;
}

.reels-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--sub);
    gap: 12px;
    font-size: 14px;
}

/* Share instructions in Reels empty state */
.share-instructions {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 14px;
    padding: 16px;
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    text-align: left;
}
.share-step-num {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--text);
    color: var(--white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
}

/* ── 2-column vertical preview grid ── */
.reels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* 3-column portrait grid for flat reels feed */
.reels-grid-portrait {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
}
.reel-tile-portrait {
    aspect-ratio: 9 / 14 !important;
    border-radius: 12px !important;
}

/* Note overlay at bottom of live tile */
.reel-tile-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 6px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 2;
}
.reel-tile-label {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Platform gradient backgrounds */
.reel-plat-ig {
    background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%) !important;
}
.reel-plat-tt {
    background: linear-gradient(135deg, #010101 0%, #25F4EE 50%, #FE2C55 100%) !important;
}
.reel-plat-yt {
    background: linear-gradient(135deg, #282828 0%, #FF0000 100%) !important;
}
.reel-plat-pin {
    background: linear-gradient(135deg, #E60023 0%, #BD081C 100%) !important;
}
.reel-plat-generic {
    background: linear-gradient(135deg, var(--text) 0%, var(--icon) 100%) !important;
}

/* Itinerary timeline cards: swipe reveals a delete/replace button underneath
   instead of firing blind — the card (foreground) slides over these. */
.itinerary-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.itinerary-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    border: none;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}
.itinerary-swipe-action--delete { left: 0; background: #ef4444; }
.itinerary-swipe-action--replace { right: 0; background: #3b82f6; }
.itinerary-card-wrap .location-item.itinerary-card { position: relative; z-index: 1; }
/* Raised above the card/pill while its side is revealed, so a tap during the
   snap-into-place transition can't fall through to the card/pill underneath.
   Shared class — used by both itinerary card and date-pill action buttons. */
.swipe-reveal-active { z-index: 2 !important; }

/* Date pills (top tab bar + "All Days" headers): swipe reveals a delete
   button underneath instead of firing blind, matching the timeline cards. */
.pill-swipe-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: inline-flex;
    flex-shrink: 0;
}
.pill-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}
.pill-swipe-action--delete { left: 0; background: #ef4444; }
.pill-swipe-action--change-date { right: 0; background: #3b82f6; }
.pill-swipe-wrap > button:not(.pill-swipe-action) { position: relative; z-index: 1; }

/* One-time discoverability wiggle on the first date/timeline pill so users
   notice the swipe-to-reveal gesture exists. */
@keyframes swipeHintWiggle {
    /* Slide far enough to expose ~78% of the 64px action buttons on each side,
       holding briefly on each so the delete (left) and replace/change-date
       (right) buttons are clearly visible before snapping back. */
    0%   { transform: translateX(0); }
    14%  { transform: translateX(50px); }
    36%  { transform: translateX(50px); }
    58%  { transform: translateX(-50px); }
    80%  { transform: translateX(-50px); }
    100% { transform: translateX(0); }
}
.swipe-hint-wiggle {
    animation: swipeHintWiggle 2s ease 0.4s;
}

/* Date pill's swipe-left "change date" action — a small centred sheet with a
   real, visible date input rather than trying to silently trigger the native
   picker on a hidden proxy element (unreliable on some mobile browsers). */
.change-date-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.change-date-sheet {
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.change-date-label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.change-date-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--al);
    font-size: 14px;
}
.change-date-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.change-date-actions button { flex: 1; }

/* Swipe-left-to-replace picker (trip timeline cards) */
.replace-pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    display: flex;
    align-items: flex-end;
}
.replace-pin-sheet {
    background: var(--white, #fff);
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.replace-pin-sheet-body {
    overflow-y: auto;
}
.replace-pin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--al, #e5e7eb);
    color: var(--text, #202124);
}
.replace-pin-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--sub, #64748b);
    cursor: pointer;
    padding: 4px;
}
/* Klook admin pin list — taller sheet (was capped at the shared 88vh, cramped
   once there are more than a couple pins) + a vertical pill-bar list instead
   of the old 3-per-row photo-tile carousel, which broke down to overlapping
   icons whenever a tile's photo failed to load. Title-only rows with inline
   hide/delete icons are far more robust and scannable for an admin list. */
.klook-admin-sheet { max-height: 94vh; }
.klook-admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 12px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.klook-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg, #f1f3f4);
    border-radius: 999px;
    padding: 4px;
}
.klook-admin-row--hidden { opacity: 0.55; }
.klook-admin-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 14px;
    text-align: left;
    cursor: pointer;
}
.klook-admin-row-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #202124);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.klook-admin-row-badge {
    flex-shrink: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 999px;
}
.klook-admin-row-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--white, #fff);
    color: var(--icon, #5f6368);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.klook-admin-row-icon--danger { color: #ef4444; }
.klook-admin-row-icon:active { opacity: 0.7; }

/* Klook popup body — gradient grey instead of flat light-orange */
.klook-popup-body {
    background: linear-gradient(180deg, #F5F6F7 0%, #E3E5E8 100%);
}
/* Dark mode: the chips/notes card below used var(--white), which is a
   near-black surface color in dark mode — reading as flat black instead of
   the intended grey card look. Use the mid-grey --al surface instead, with
   the body gradient darkened to match. */
body.v2.dark .klook-popup-body {
    background: linear-gradient(180deg, #2D2F33 0%, #232527 100%);
}
body.v2.dark .klook-meta-chip {
    background: #3C3E42;
    color: #8AB4F8;
}
body.v2.dark .klook-meta-chip--muted { color: #9AA0A6; }
body.v2.dark .klook-notes-card {
    background: #3C3E42;
    color: #E8EAED;
}

/* Klook-branded accents — scoped to #klook-popup-overlay only, since
   .klook-meta-chip/.klook-notes-card/.klook-popup-body are shared with the
   regular (non-Klook) pin notes panel elsewhere on the map. Must not leak
   Klook's orange/teal/gold palette onto ordinary users' own pins. */
#klook-popup-overlay .klook-popup-body {
    /* Yellow-to-orange wash — a genuine hue shift (not just a lighter tint
       of the same orange) settling into Klook's brand orange (#FF5B00),
       instead of continuing past it into a much darker burnt-orange tone. */
    background: linear-gradient(180deg, #FFCB4D 0%, #FF5B00 100%);
}
#klook-popup-overlay .klook-meta-chip--rating {
    color: #A85200;
    box-shadow: 0 1px 4px rgba(245,166,35,0.3);
}
#klook-popup-overlay .klook-meta-chip--website {
    color: #00695C;
    box-shadow: 0 1px 4px rgba(0,191,174,0.3);
}
/* Frosted-glass notes card (teal gradient sampled from the Klook logo's
   swirl accent) + rounder corners — widened by the same -6px bleed as
   .klook-reel-row so both sections line up edge-to-edge. Deliberately NOT
   overridden in dark mode (no body.v2.dark variant below) so it reads
   identically regardless of theme, same as the top close/save-pin buttons. */
#klook-popup-overlay .klook-notes-card {
    /* Teal-to-blue wash — starts at the sampled Klook swirl teal
       (#00CBD0) and shifts into blue, reverse direction of the orange
       body wash above. */
    background: linear-gradient(135deg, rgba(0,203,208,0.88) 0%, rgba(74,144,255,0.85) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-left: -6px;
    margin-right: -6px;
}
body.v2.dark #klook-popup-overlay .klook-popup-body {
    background: linear-gradient(180deg, #4A2410 0%, #7A3D14 100%);
}
body.v2.dark #klook-popup-overlay .klook-meta-chip--rating { color: #F5A623; }
body.v2.dark #klook-popup-overlay .klook-meta-chip--website { color: #4DD8C9; }

/* Title row (name + rating badge, overlaid on the top photo) and the
   purple-gradient affiliate CTA button — purple sampled from the Klook
   logo's swirl accent. Single definition, no dark-mode variant, so these
   stay identical regardless of theme. */
#klook-popup-overlay .klook-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
}
#klook-popup-overlay .klook-title-rating {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
#klook-popup-overlay a.klook-title-rating:hover {
    text-decoration: underline;
}
#klook-popup-overlay .klook-cta-wrap {
    position: relative;
    margin-top: 14px;
    margin-left: -6px;
    margin-right: -6px;
}
#klook-popup-overlay .klook-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(77,64,202,0.35);
    -webkit-tap-highlight-color: transparent;
}
#klook-popup-overlay .klook-cta-btn:active { opacity: 0.85; }

/* Same purple CTA, unscoped — for a Klook pin the user has saved to their own
   Pins, rendered inside the standard (non-Klook-styled) saved-pin popup's
   notes panel, at the bottom of the note section. */
.loc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6C5CE7 0%, #4D40CA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(77,64,202,0.35);
    -webkit-tap-highlight-color: transparent;
}
.loc-cta-btn:active { opacity: 0.85; }
/* Discount bubble — a small rotated sticker-style badge floating at the
   button's top-right corner, echoing the red "% OFF" callouts used on
   Klook's own promo tiles. Only rendered when discount_percent is set. */
#klook-popup-overlay .klook-discount-badge {
    position: absolute;
    top: -10px;
    right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    transform: rotate(8deg);
    white-space: nowrap;
}

/* Klook admin photo crop modal — upload → pan/zoom within a fixed-ratio
   viewport → canvas-render at 2x that ratio → upload as the cached photo. */
.klook-crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.klook-crop-sheet {
    background: var(--white, #fff);
    border-radius: 16px;
    width: 92%;
    max-width: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.klook-crop-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.klook-crop-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    touch-action: none;
    cursor: grab;
    margin: 0 auto;
}
.klook-crop-viewport:active { cursor: grabbing; }
#klook-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.klook-crop-zoom-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sub);
    align-self: flex-start;
}
#klook-crop-zoom { width: 100%; }

/* Full-size "view current picture" lightbox for the admin edit form's tiny
   48x48 thumbnail. */
.klook-photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.klook-photo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.klook-photo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Deeper card shadow + a thin multi-color top accent strip (echoes the
   logo's purple/teal/orange/gold blobs) — .reel-popup-card is shared with
   the generic reel viewer too, so this stays scoped to the Klook popup. */
#klook-popup-overlay .reel-popup-card {
    box-shadow: 0 0 0 1px rgba(255,91,0,0.18),
                0 4px 10px rgba(0,191,174,0.14),
                0 10px 26px rgba(79,63,224,0.12),
                0 20px 48px rgba(0,0,0,0.24);
}
#klook-popup-overlay .reel-popup-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4F3FE0 0%, #00BFAE 35%, #FF5B00 68%, #F5A623 100%);
    z-index: 2;
}

/* Rating/phone/website "islands" — each its own background chip, generously
   spaced, instead of plain stacked text. Shared by the popup and the admin
   edit form's preview. */
.klook-meta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2px 0 12px;
}
.klook-meta-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--white, #fff);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue, #2C4A6E);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.klook-meta-chip:active { opacity: 0.7; }
.klook-meta-chip--muted { color: var(--sub, #6b7280); cursor: default; }

/* Up to 3 reel-preview tiles, evenly spaced */
.klook-reel-row {
    display: flex;
    gap: 8px;
    margin: 4px -6px 0;
}
.klook-reel-tile { position: relative; }

/* Solid white background island for notes text, matching the meta chips.
   Capped height — long notes scroll within this card alone instead of
   stretching the whole popup panel. */
.klook-notes-card {
    background: var(--white, #fff);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Rich-text notes content — base weight is normal (not forced bold like the
   old plain-text rendering), with explicit <b>/<strong> and <h4> markup
   (applied per word/phrase in the admin editor) standing out from the rest. */
.klook-notes-rich {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-wrap;
    /* White — the card's notes panel is a teal→blue gradient (see
       .klook-notes-card above), dark text loses contrast against the darker
       blue end. */
    color: #fff;
}
.klook-notes-rich b, .klook-notes-rich strong { font-weight: 800; }
/* Inline, not block — heading is applied to whatever text run the admin
   selected (same as bold), which may be only part of a line. A heading that
   *is* a whole paragraph still reads on its own line since it's already the
   sole content of its own <p>/<div> from the editor. */
.klook-notes-rich h4 {
    display: inline;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
.klook-notes-rich p, .klook-notes-rich div { margin: 0 0 8px; }
.klook-notes-rich p:last-child, .klook-notes-rich div:last-child { margin-bottom: 0; }

/* Admin notes editor — contenteditable box + a formatting toolbar BELOW it
   (so tapping a button doesn't cover the text being formatted), standing in
   for the old plain <textarea>, so individual words/phrases can be marked
   bold or heading instead of the whole block sharing one weight. */
#klook-form-notes {
    border: 1px solid var(--al);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-y: auto;
    max-height: 300px;
}
#klook-form-notes:empty:before {
    content: attr(placeholder);
    color: var(--sub);
}
/* Heading is applied to an arbitrary run of selected text (same as bold),
   not a whole block — inline display so it doesn't force a line break when
   it's only part of a paragraph. */
#klook-form-notes h4 { display: inline; font-size: 16px; font-weight: 800; margin: 0; }
.klook-notes-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.klook-notes-toolbar button {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.klook-notes-toolbar button:active { background: var(--al); }

/* Tile needs relative positioning for the delete button */
.reel-tile {
    position: relative;
}
/* Reels filter chips row */
.reels-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.reels-chips::-webkit-scrollbar { display: none; }
.reel-tile {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--elev-2);
    transition: border-color var(--transition), box-shadow 0.22s ease, transform 0.22s ease;
}
.reel-tile:active { transform: translateY(1px) scale(0.99); box-shadow: var(--elev-1); }
/* Portrait preview area (9:16) */
.reel-tile-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.reel-tile-preview .reel-iframe,
.reel-tile-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.reel-thumb-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    border-radius: 12px;
    /* Without this, Android Chrome's OWN native long-press image-drag
       preview fires on this <img> alongside our custom SortableJS drag —
       its enlarged floating copy of the thumbnail is a separate browser
       gesture entirely, not something SortableJS's fallback clone (already
       correctly sized via .sortable-fallback below) has any control over.
       That's what kept showing an oversized preview even after the
       fallback clone itself was fixed to stay at 140px. */
    -webkit-user-drag: none;
    user-select: none;
    /* -webkit-user-drag:none only blocks the HTML5 mouse-drag ghost — the
       oversized preview kept appearing anyway because Android/iOS's native
       long-press image callout/preview is a SEPARATE touch-hold gesture
       path, suppressed by this property instead. */
    -webkit-touch-callout: none;
}
.reel-platform-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 4;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 3px 7px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
/* "Pinned to N pins" badge — top-right of a Saved Pins tile that represents
   one reel attached to multiple pins. */
.reel-pin-count {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 6px 12px 6px 10px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.12s ease;
}
.reel-pin-count:hover { background: rgba(0,0,0,0.78); }
.reel-pin-count:active { transform: scale(0.92); }
.reel-pin-count i { font-size: 15px; color: #EA4335 !important; }
/* Attached-pins popup list */
.reel-pin-list-empty { padding: 12px 14px; font-size: 13px; color: var(--sub); }
.reel-tile-no-thumb .reel-platform-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.reels-section-count-inline {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 8px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    margin-left: 4px;
}
.reel-ig-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 7px;
}
/* Floating delete on the tile */
.reel-tile-del {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-tile-del:active { background: #ef4444; }
.reel-tile-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reel-tile-note {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Manual add-reel toggle button */
.add-reel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg);
    border: 1.5px dashed var(--al);
    border-radius: var(--radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--sub);
    cursor: pointer;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.add-reel-toggle:hover { border-color: var(--am); color: var(--am); }
.add-reel-toggle:active { background: var(--am); color: var(--white); }

/* Expanded add-reel form */
.add-reel-form {
    display: none;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--al);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.add-reel-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--al);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    outline: none;
}
.add-reel-input:focus { border-color: var(--am); }
.add-reel-folder-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--al);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    outline: none;
}
.add-reel-submit {
    align-self: center;
    padding: 10px 28px;
    background: #f1f5f9;
    color: #1e293b;
    border: none;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.add-reel-submit:active { background: var(--icon); }

/* Popup notes toggle button + panel */
.popup-notes-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--sub);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}
.popup-notes-btn.active {
    background: var(--am);
    color: var(--white);
    border-color: var(--am);
    box-shadow: 0 1px 3px rgba(59,130,246,0.2);
}
/* Wraps header + notes panel so the panel can anchor to "100% of this wrap"
   (i.e. exactly the header's bottom edge) regardless of the header's real height. */
.reel-titlebar-wrap {
    position: relative;
    z-index: 5;
}
.popup-notes-panel {
    /* Slides down from the header's bottom edge, overlaying the reel body below
       it — the reel never moves. Collapsed by default (max-height:0); opening
       adds .notes-open which animates it open like a dropdown. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 6;
    background: var(--bg);
    border-bottom: 1px solid var(--al);
    box-shadow: 0 10px 18px rgba(0,0,0,0.16);
    padding: 0 12px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: height 0.24s ease, opacity 0.18s ease;
}
.popup-notes-panel.notes-open {
    /* A slight 12px gap between the header and the photo (not fully flush).
       A flex column with the photo/meta chips locked to their natural size
       (flex-shrink:0) and the notes card set to flex:1 + its own overflow-y
       means the photo and meta always stay fully visible and ONLY the notes
       card scrolls for long content — no outer scroll competing with an
       inner one. A fixed height (not max-height) so the panel always covers
       the whole card by default (header + reel embed + nav dots) even when
       there's only a little content — otherwise it shrank to fit and the
       reel-nav bar below the embed peeked out under it. */
    display: flex;
    flex-direction: column;
    height: min(90vh, 700px);
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
    /* Bottom padding closes off the notes card so it doesn't bleed into the
       panel's very edge — flex:1 previously let it stretch flush to the
       bottom with nothing but 8px separating it from the panel's own edge. */
    padding: 12px 12px 16px;
}
.popup-notes-panel.notes-open > img,
.popup-notes-panel.notes-open > .klook-meta-row {
    flex-shrink: 0;
}
.popup-notes-panel.notes-open .klook-notes-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.popup-notes-panel a {
    overflow-wrap: break-word;
    word-break: break-all;
}

.reel-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--al), 0 2px 8px rgba(0,0,0,0.06);
}

/* Grid layout (not absolute positioning) — every control stays in normal flow
   so nothing is ever clipped or click-blocked. Outer columns are both 1fr so
   they're always equal width regardless of what they contain — that's what
   keeps the centre (name) column truly centred, even when the delete button
   and notes pill have very different widths (or one side is empty). */
.reel-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--al);
    min-height: 48px;
    position: relative;
    gap: 10px;
}
.reel-header .map-back-btn { grid-column: 1; justify-self: start; }
.reel-header .reel-name { grid-column: 2; }
.reel-header .reel-popup-notes-pill { grid-column: 3; justify-self: end; margin-left: 0; }

/* Top tab bar — placed below header and above embed (kept for non-map contexts) */
.reel-tabs-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--white);
    border-bottom: 1.5px solid var(--al);
}

/* Clips the iframe — flex:1 takes all space minus the overlay bar */
.reel-iframe-clip {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* iOS Instagram loading placeholder + multi-slide carousel (see
   _loadIgSlides in app.js) — sized to fill whichever container it's in
   (.reel-iframe-clip for map cards, .reel-popup-body for the popup),
   same as the .reel-iframe rule right below. */
.ig-slides-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.reel-loading-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: ig-spin 0.8s linear infinite;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.ig-carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ig-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    object-fit: contain;
    background: #000;
}
.ig-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 3;
}
.ig-carousel-dots .reel-dot {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.5);
}
.ig-carousel-dots .reel-dot.active {
    background: #fff;
    width: 7px;
    height: 7px;
}
/* Left/right slide navigation, layered above the video/image but below the
   dots — separate gesture zone from the outer reel-to-reel swipe/arrows
   (those move between different saved posts; these move between slides of
   the same carousel post). */
.ig-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}
.ig-carousel-arrow:active { transform: translateY(-50%) scale(0.9); }
.ig-carousel-prev { left: 8px; }
.ig-carousel-next { right: 8px; }
.reel-iframe-clip .reel-iframe,
.reel-iframe-clip .reel-iframe-insta {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: unset !important;
    border: none;
}

/* Solid bar — always present, covers like/comment row, shows tab selector */
.reel-bottom-overlay {
    flex-shrink: 0;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--white);
    border-top: 1px solid var(--al);
}

/* Info window meta links (rating, phone, website) */
.iw-meta-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0 10px;
    overflow: hidden;
}
.iw-meta-link {
    font-size: 12px;
    color: var(--blue, #2C4A6E);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: block;
    line-height: 1.4;
    width: 100%;
    font-family: inherit;
}
.iw-meta-link:active { opacity: 0.7; }
.iw-website-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}
.iw-meta-muted {
    font-size: 12px;
    color: var(--sub);
}
.reel-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Back button on map cards (reel card + plain info window) — matches the
   standard tab-header back button (.sheet-close-btn) for consistency. */
.map-back-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.map-back-btn i { font-size: 18px; color: var(--icon); }
.map-back-btn:active { background: var(--al); color: var(--text); }
.iw-titlerow {
    display: grid;
    /* .map-back-btn is 38px — matching the outer columns to that (instead of
       the old 26px) stops the button overflowing its column and eating into
       the gap meant to separate it from the title. */
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 14px;
    min-height: 38px;
    margin-bottom: 4px;
}
.iw-titlerow .map-back-btn { grid-column: 1; }
.iw-titlerow .info-window-title {
    grid-column: 2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iw-titlerow .reel-popup-notes-pill { grid-column: 3; }
.reel-country {
    font-size: 12px;
    color: var(--sub);
}

.reel-body {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #000;
}

.reel-embed {
    flex: 1;
    min-height: 340px;
    background: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
}

.reel-iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: none;
    display: block;
}

.reel-open-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 120px;
    color: var(--white);
    background: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 20px;
}
/* iOS: IG embeds can't play — show a prominent open-in-app button */
.reel-ig-ios-btn {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    text-decoration: none !important;
    border-radius: inherit !important;
    height: 100% !important;
    min-height: 120px !important;
}
.reel-ig-ios-btn i { font-size: 28px !important; }
/* Scaled down for the small grid-tile preview context (vs. the full-size
   popup player where the base rule's dimensions apply). */
.reel-tile-preview .reel-ig-ios-btn {
    min-height: 0 !important;
    gap: 6px !important;
    font-size: 11px !important;
    padding: 8px;
    text-align: center;
}
.reel-tile-preview .reel-ig-ios-btn i { font-size: 20px !important; }
/* iOS Instagram reels: sits over a src-less iframe (see buildReelEmbed) so
   the tap never touches the cross-origin frame — that's what freezes on
   WebKit — and instead launches the reel externally. */
.client-touch-shield {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}
.reel-ig-fallback {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    z-index: 5;
    border-radius: 0;
}

/* Numbered tab switcher — right side */
.reel-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    background: var(--bg);
    border-left: 1px solid var(--al);
    min-width: 36px;
}

.reel-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--al);
    background: var(--white);
    color: var(--sub);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.reel-num.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--white);
}
.reel-num:active { transform: scale(0.9); }

/* ══════════════════════════════════════════════════════════════════
   V2 BOTTOM TABS — 3 tabs
   ══════════════════════════════════════════════════════════════════ */
/* Already styled by .float-tab — just ensure 3 fit */
body.v2 #bottom-tabs {
    gap: 8px;
}
body.v2 .float-tab {
    font-size: 13px;
    padding: 10px 14px;
    flex: 1;
    justify-content: center;
}
body.v2 .float-tab i {
    font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════════
   V2 ICON BUTTON — ensure all 4 buttons are visually identical
   ══════════════════════════════════════════════════════════════════ */
body.v2 .top-left .icon-btn,
body.v2 .top-right .icon-btn {
    color: var(--icon) !important;
    background: var(--white) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--elev-3) !important;
}
body.v2 .top-left .icon-btn.active,
body.v2 .top-right .icon-btn.active {
    background: var(--am) !important;
    border-color: var(--am) !important;
    color: #FFFFFF !important;
    box-shadow: var(--accent-shadow) !important;
}
body.v2 .top-left .icon-btn.signed-in,
body.v2 .top-right .icon-btn.signed-in {
    background: color-mix(in srgb, var(--am) 10%, var(--white)) !important;
    border-color: var(--am) !important;
    color: var(--am) !important;
}

/* Dark icons on sheet buttons — force override any inherited white */
body.v2 .sheet-close-btn,
body.v2 .sheet-action-btn,
body.v2 #itinerary-add-btn {
    color: var(--icon) !important;
    background: var(--bg) !important;
    border: 1px solid var(--al) !important;
}
body.v2 .sheet-close-btn i,
body.v2 .sheet-action-btn i,
body.v2 #itinerary-add-btn i {
    color: var(--icon) !important;
}
/* Global: all Phosphor icons in v2 default to dark text unless a parent overrides */
body.v2 i[class*="ph-"] {
    color: var(--icon);
}
body.v2 .icon-btn i {
    color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 MAP POPUP REEL OVERRIDES — InfoWindow summer palette & sizing
   ══════════════════════════════════════════════════════════════════ */
body.v2 .gm-style .gm-style-iw-c {
    background: var(--white) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    border-radius: var(--radius) !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.v2 .gm-style .gm-style-iw-d {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}
body.v2 .gm-style .gm-style-iw-d::-webkit-scrollbar { display: none !important; }

body.v2 .gm-style .gm-style-iw-tc::after,
body.v2 .gm-style .gm-style-iw-t::after {
    background: var(--white) !important;
    border-color: var(--al) !important;
}

/* Place discovery popup — lock container + content to the same width so there's no right gap */
body.v2 .gm-style .gm-style-iw-c:has(.info-window),
body.v2 .gm-style .gm-style-iw-d:has(.info-window) {
    width: min(340px, calc(100vw - 32px)) !important;
    max-width: 340px !important;
    min-width: 0 !important;
}

/* Reel card popup — lock container to a wider width to fit screens and prevent layout restrictions */
body.v2 .gm-style .gm-style-iw-c:has(.reel-card),
body.v2 .gm-style .gm-style-iw-d:has(.reel-card) {
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    min-width: 0 !important;
}
body.v2 .info-window {
    width: min(340px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
    padding: 14px !important;
}
body.v2 .btn-save-map {
    background: var(--am) !important;
    color: var(--white) !important;
    box-shadow: 0 1px 3px rgba(59,130,246,0.2) !important;
    width: 100% !important;
    border-radius: 8px !important;
}

/* Make sure the reel card inside the map popup doesn't have double border/shadow */
body.v2 .gm-style-iw-c .reel-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* Hide Google's built-in close button — eliminates the right-side gap it reserves */
body.v2 .gm-style-iw-tc,
body.v2 .gm-style-iw-chr {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
}
body.v2 .gm-style-iw-c .reel-card {
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Header overlaps Instagram's own header */
body.v2 .gm-style-iw-c .reel-header {
    position: relative !important;
    z-index: 3 !important;
    background: var(--white) !important;
}
body.v2 .gm-style-iw-c .reel-embed {
    display: block !important;
    position: relative !important;
    height: calc(100svh - 210px) !important;
    min-height: 250px !important;
    max-height: 480px !important;
    overflow: hidden !important;
}
body.v2 .gm-style-iw-c .reel-iframe-clip {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}
/* Hide any stray links/text injected by embed scripts (Instagram footer etc) */
body.v2 .gm-style-iw-c a[style*="text-align"],
body.v2 .gm-style-iw-c .reel-iframe-clip ~ *,
body.v2 .gm-style-iw-c .reel-body > :not(.reel-embed),
body.v2 .gm-style-iw-c .reel-embed > :not(.reel-iframe-clip) {
    display: none !important;
}
/* Nav bar sits below the embed, overlaps Instagram footer */
body.v2 .gm-style-iw-c .reel-nav-inline {
    border-radius: 0 0 14px 14px !important;
    position: relative !important;
    z-index: 4 !important;
    background: var(--white) !important;
    border-top: 1px solid var(--al) !important;
    margin-top: -1px !important;
    min-height: 58px !important;
}
body.v2 .gm-style-iw-c .reel-iframe-clip iframe {
    width: 100% !important;
    min-height: unset !important;
}
body.v2 .gm-style-iw-c .reel-bottom-overlay {
    display: none !important;
}
body.v2 .gm-style-iw-c .reel-iframe {
    display: block !important;
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    margin-top: 0 !important;   /* show Instagram's own header (avatar + username) */
    border: none !important;
}

/* Horizontal top-right header tabs styling */
body.v2 .header-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 BRAND LOGO — Top center elegant branding
   ══════════════════════════════════════════════════════════════════ */
body.v2 .brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}
body.v2 .brand-logo .logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
}
body.v2 .brand-logo .logo-dot-blue {
    color: var(--blue);
}

/* All-days date-header bubble list */
.alldays-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 24px;
}
/* Dark card style — mirrors the trip date-block header (centred wording, no route btn) */
.alldays-date-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 12px;
    padding: 14px 84px;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color var(--transition);
    box-shadow: 0 1px 4px var(--shadow);
}
.alldays-date-header:active { opacity: 0.82; }
/* Day name pinned left inside All Days header */
.alldays-date-header .date-day {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
}
/* Count + chevron pinned right */
.alldays-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
.alldays-right .ph-caret-right {
    color: var(--ad);
    font-size: 14px;
}
/* Matches the trip folder pill's plain-text count style (.trip-pill-meta)
   instead of its own filled blue badge, so the two "N pins" indicators read
   consistently across the folder list and the itinerary's All Days list. */
.alldays-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Route exit floating button */
/* Route control bar — one centered row: [play/pause][prev] · Exit Route · [next][clear] */
.route-control-bar {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: space-between;
    /* Narrower than full-width so the outer buttons sit a bit in from the
       screen edges and closer to the centred Exit Route button. */
    width: min(410px, calc(100vw - 60px));
}
.route-control-bar .rc-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rc-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--al);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    color: var(--text);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rc-btn:active { transform: scale(0.92); }
.rc-btn#rc-playpause { background: var(--am); border-color: var(--am); color: #fff; }
.rc-btn--disabled { opacity: 0.4; pointer-events: none; }
.route-exit-btn {
    position: static;
    transform: none;
    z-index: 500;
    background: var(--white);
    border: 1px solid var(--al);
    border-radius: 24px;
    padding: 10px 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* Route toggle button in date block header — outline blue, floats right */
.route-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border: 1.5px solid var(--am);
    border-radius: 50%;
    color: var(--am);
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.route-toggle-btn i {
    color: var(--am) !important;
    font-size: 17px;
}
/* Draws the eye to the icon once when the day's timeline first renders — a
   bigger, more energetic shake than before. Delayed to start AFTER the first
   timeline pill's swipe-hint wiggle (ends at 2.4s) so the hints read as a
   sequence. Only on a FRESH render (route-toggle-btn--hint) — NOT on preserved
   re-renders like the edit-mode toggle or the 8s collab sync, where replaying
   the wiggle/ripple looked like the route button firing on its own. */
.route-toggle-btn--hint i {
    animation: route-btn-hint 1.3s ease-in-out 2.4s 1;
}
.route-toggle-btn:active { opacity: 0.7; }

@keyframes route-btn-hint {
    0%, 100% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(-22deg) scale(1.18); }
    30% { transform: rotate(18deg) scale(1.18); }
    45% { transform: rotate(-16deg) scale(1.14); }
    60% { transform: rotate(12deg) scale(1.1); }
    75% { transform: rotate(-8deg) scale(1.06); }
    90% { transform: rotate(4deg) scale(1.02); }
}

/* Small "finger tap" ripple alongside the icon wiggle above — an expanding
   ring that fades out, timed to the same delay/duration so the two read as
   one combined hint ("someone just tapped this"). */
.route-toggle-btn--hint::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--am);
    opacity: 0;
    pointer-events: none;
    animation: route-btn-tap-ripple 1.3s ease-out 1.1s 1;
}
@keyframes route-btn-tap-ripple {
    0% { transform: scale(0.8); opacity: 0; }
    12% { transform: scale(0.95); opacity: 0.9; }
    55% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ── Reel tile thumbnail (2-col grid, tap-to-popup) ──────────────────────── */
.reel-tile-thumb-bg {
    position: absolute;
    inset: 0;
    background: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-tile-platform-icon {
    font-size: 32px;
    color: rgba(255,255,255,0.25);
}
.reel-tile-thumb-note {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-align: center;
    padding: 0 10px;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.reel-tile-play-btn { display: none !important; }

/* Platform badge in reel tile thumbnail */
.reel-tile-platform-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 20px;
    color: var(--white);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    text-transform: uppercase;
}
.platform-ig  { background: rgba(225,48,108,0.55);  border-color: rgba(225,48,108,0.6); }
.platform-tt  { background: rgba(0,0,0,0.55);        border-color: rgba(255,255,255,0.2); }
.platform-yt  { background: rgba(255,0,0,0.55);      border-color: rgba(255,0,0,0.6); }
.platform-generic { background: rgba(255,255,255,0.12); }
/* Transparent overlay captures the tap so the iframe underneath shows but doesn't steal the click */
.reel-tile-tap-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* ── Oversized Iframe Mask — tile previews ────────────────────────
   Cross-origin iframes prevent CSS injection into IG's .EmbedHeader
   or .Feedback. Instead we render the iframe taller than the 9:16
   container so IG's flexbox expands the video to fill the space,
   then overflow:hidden on .reel-tile-preview clips the chrome.

   Offset math (URLs forced to /embed/ — no /captioned/ — for a
   predictable ~44px footer):
     IG embed header  ≈ 58px  →  top: -58px  (shifted above view)
     IG footer bar    ≈ 44px  →  pushed below container by the
                                 extra height, clipped by overflow
     iframe height = 100% + 58 + 44 = container + 102px
     min-height: 400px guarantees IG's layout has enough room to
     expand the video even on very small tile widths.
   Width 140% + left -20% centres the video while clipping IG's
   side-swipe arrows on multi-image carousel posts.
   pointer-events: none prevents scroll-hijack inside the grid.  */
.reel-tile-preview iframe,
.reel-tile-preview .reel-iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    pointer-events: none;
}
.reel-tile-preview .reel-iframe-insta {
    top: -58px !important;
    bottom: auto !important;
    height: calc(100% + 160px) !important;
    min-height: 400px !important;
    width: 140% !important;
    left: -20% !important;
    right: auto !important;
}
/* ── Reel fullscreen popup overlay ──────────────────────────────────────── */
.reel-popup-overlay {
    position: fixed;
    inset: 0;
    /* Above the reel carousel (9550) and location card so tapping a preview tile
       opens the player ON TOP of the card + tiles rather than behind them. */
    z-index: 9560;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    pointer-events: none;
}
/* Blur on a pseudo-element avoids the Chromium bug where backdrop-filter
   on an ancestor intercepts pointer events inside iframes (Android Chrome). */
.reel-popup-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.reel-popup-overlay .reel-popup-card,
.reel-popup-overlay .reel-nav-inline {
    pointer-events: auto;
}
.reel-popup-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    box-shadow: 0 0 0 1px var(--al), 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}
/* Outer columns are both 1fr — always equal width regardless of what they
   contain, which keeps the note/title truly centred even though the delete
   button and the platform badge ("Instagram" vs "TT") are very different widths. */
.reel-popup-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 14px;
    background: var(--white);
    border-bottom: 1px solid var(--al);
    min-height: 48px;
    gap: 8px;
    position: relative;
}
.reel-popup-header .reel-popup-back { grid-column: 1; justify-self: start; }
.reel-popup-header .reel-popup-note { grid-column: 2; }
.reel-popup-header .feed-platform,
.reel-popup-header .reel-pin-inline-btn,
.reel-popup-header .reel-popup-attach-pin-btn { grid-column: 3; justify-self: end; }
.reel-popup-attach-pin-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
body.v2 .reel-popup-attach-pin-btn i { font-size: 18px; color: #EA4335; }
.reel-popup-attach-pin-btn:active { background: var(--al); }
.reel-popup-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    min-width: 0;
    text-align: center;
}
.reel-popup-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition);
}
.reel-popup-close i { font-size: 16px; color: var(--text); }
/* Back button next to the reel name — matches the standard tab-header back
   button (.sheet-close-btn) for consistency across the app. */
.reel-popup-back {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.reel-popup-back i { font-size: 18px; color: var(--icon); }
.reel-popup-back:active { background: var(--al); color: var(--text); }
.reel-popup-body {
    flex: 1;
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    max-height: min(calc(100svh - 210px), 480px);
    overflow: hidden;
    background: #000;
}
/* iOS Instagram extraction/playback failure — shows whatever real preview
   frame we have (see _igFallbackFrameHtml in app.js) instead of a bare
   black box, with .reel-open-app-btn (below) as a small non-blocking
   overlay rather than the only thing on screen. */
.reel-ig-fallback-frame {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: center;
}
.reel-open-app-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 8px 18px;
    border-radius: 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 6px;
}
.reel-popup-body .reel-iframe-clip {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}
.reel-popup-body iframe,
.reel-popup-body video,
.reel-popup-body blockquote { width: 100% !important; height: 100% !important; object-fit: contain; background: #000; }
/* Popup view: iframe fixed at 600px, header now shown (margin-top:0 exposes
   Instagram's avatar + username bar). Overflow:hidden on .reel-iframe-clip +
   the nav bar overlay clip the IG footer at the bottom. */
.reel-popup-body iframe.reel-iframe-insta {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    max-height: none !important;
    margin-top: 0 !important;
}
/* Nav bar overlaps the bottom of the popup embed — covers any IG footer
   chrome that bleeds through, matching the map popup's z-index overlay. */
.reel-popup-card > .reel-nav-inline {
    position: relative;
    z-index: 4;
    background: var(--white);
    border-top: 1px solid var(--al);
    border-radius: 0 0 16px 16px;
    margin-top: -1px;
    padding: 16px 16px;
    min-height: 58px;
}

/* ── Frameless feed reel viewer (v2) ──────────────────────────────────────
   The back / action buttons float freely at the screen corners, the reel is
   its own rounded pill panel, and the reel selector is a separate island pill
   below it — all three are independent siblings inside the overlay, which
   stacks them as a centred column with the floating buttons pinned on top. */
/* The overlay reserves a top zone (floating buttons) and a bottom zone (reel
   selector) via padding, and centres the content pill in what's left — so the
   content never runs under the buttons or the selector. The buttons and the
   selector are absolutely-positioned overlays that sit inside those zones. */
.reel-popup-overlay--v2 {
    padding: 92px 12px 116px;
    box-sizing: border-box;
    gap: 0;
}
/* Content pill: rounded panel holding just the reel — fills the space left
   between the reserved top/bottom zones. */
.reel-popup-card--v2 {
    background: #000;
    border-radius: 20px;
    max-height: 100%;
}
.reel-popup-card--v2 .reel-popup-body {
    max-height: 100%;
    border-radius: 20px;
}
/* Back (top-left) + action (top-right) float at the screen's top corners,
   over the blurred backdrop — like the map's logo / search buttons. Larger
   solid white circles for contrast + easier tapping. */
.reel-popup-float-btn {
    position: absolute;
    top: 18px;
    z-index: 7;
    pointer-events: auto;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.reel-popup-float-btn i { font-size: 22px !important; }
.reel-popup-back.reel-popup-float-btn { left: 16px; }
.reel-popup-attach-pin-btn.reel-popup-float-btn { right: 16px; }
/* Detach button sits just below the add-more button on the right edge. */
.pdc-reel-opt--danger span { color: #EA4335; }
.pdc-reel-opt--danger i { color: #EA4335; }
/* Folder-name pill floats top-centre, between the two buttons. */
.reel-popup-note--float {
    position: absolute;
    top: 27px; left: 50%; transform: translateX(-50%);
    z-index: 6;
    max-width: 48%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    border-radius: 22px;
    backdrop-filter: blur(6px);
    -webkit-line-clamp: 1;
}
/* Reel selector — its own island pill, lower (near the bottom), enlarged. */
.reel-popup-overlay--v2 .reel-nav-inline {
    position: absolute;
    bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 6;
    pointer-events: auto;
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    width: auto;
    min-width: 260px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 22px !important;
    background: rgba(0,0,0,0.58) !important;
    border: none !important;
    border-top: none !important;
    border-radius: 28px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.reel-popup-overlay--v2 .reel-nav-inline .reel-arrow {
    width: 40px; height: 40px;
    font-size: 24px;
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
}
/* Counter fills the middle and centres its own text, with the arrows pinned
   at the pill's two ends — so "N / M" sits dead-centre even when the next
   arrow is hidden on the last reel. Dots are dropped here (redundant with the
   counter + arrows, and they pushed the counter off-centre). */
.reel-popup-overlay--v2 .reel-nav-inline .reel-dots { display: none; }
.reel-popup-overlay--v2 .reel-nav-inline .reel-counter {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    color: #fff;
}

/* ── Reel popup: Pin button in header top-left ─────────────────────────────── */
.reel-pin-inline-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--am) 10%, white);
    border: 1px solid var(--am);
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--am);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: all var(--transition);
}
.reel-pin-inline-btn:active { background: var(--am); color: #fff; }

/* Notes pill button in reel popup header */
.reel-popup-notes-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    font-size: 18px;
    color: var(--sub);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: all var(--transition);
}
.reel-popup-notes-pill.active {
    background: var(--am);
    color: var(--white);
    border-color: var(--am);
}

/* ── Reels edit mode ─────────────────────────────────────────────────────────── */
.reel-select-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.reel-tile { position: relative; }
.reel-tile.edit-mode .reel-select-indicator { display: flex; }
.reel-select-indicator:active { transform: scale(0.88); }
.reel-select-indicator.selected {
    background: var(--am);
    border-color: #fff;
}
.reel-tile.reel-selected .reel-tile-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(44,74,110,0.25);
    border-radius: inherit;
    pointer-events: none;
}

/* Edit mode action bar */
.reels-edit-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.edit-bar-float-area {
    display: none;
}
.edit-bar-count {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 24px;
    padding: 8px 22px;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
}
.edit-bar-buttons {
    background: var(--white);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.edit-bar-btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    box-shadow: var(--elev-1);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.edit-bar-btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.edit-bar-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.edit-bar-btn i { font-size: 16px; }
/* Push scrollable content above the edit bar when active */
body.saved-edit-active .view-page {
    padding-bottom: 90px;
}
.edit-move-btn { background: #e0edff; color: #1d4ed8; border-color: var(--am); }
.edit-move-btn i { color: #1d4ed8; }
body.v2.dark .edit-move-btn { background: #1e3a5f; color: #93c5fd; border-color: var(--am); }
body.v2.dark .edit-move-btn i { color: #93c5fd; }
.edit-pin-btn { background: var(--bg); }
.edit-delete-btn { background: #fff; color: #ef4444; border-color: #fecaca; }
.edit-delete-btn i { color: #ef4444; }

/* ── Saved pins bulk-select — 3-dot menu button next to a country's title
   slides down a small panel with "select individually" / "select all"
   options ── */
.country-bulk-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-text-muted, #94a3b8);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    justify-self: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.country-bulk-arrow.open { color: var(--am); }
.country-bulk-panel {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
    transition: max-height 0.25s ease;
}
.country-bulk-panel.open {
    max-height: 120px;
    padding: 4px 4px 8px;
}
.country-bulk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--al);
    background: var(--white);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.country-bulk-item:active { background: var(--bg); }
.bulk-item-label { flex: 1; text-align: center; }
.country-bulk-item i { font-size: 17px; flex-shrink: 0; }
.bulk-icon-blue { color: #3b82f6; }
.bulk-icon-red { color: #ef4444; }
/* Invisible mirror of the real icon on the opposite side — without it the
   label's flex:1/text-align:center only centers within (button width minus
   icon width), which visibly skews the text off the button's true center. */
.bulk-icon-spacer { visibility: hidden; }

/* Selected-pin highlight while in bulk-select mode — a clearly visible fill,
   accent border, and a checkmark badge so it's obvious at a glance. Pencil
   button hidden and card reserves room on the right so it never overlaps
   the title text or the checkmark badge. */
.saved-card.saved-select-mode {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.saved-card.saved-select-mode .card-edit-btn { display: none !important; }
.saved-card.saved-selected {
    background: color-mix(in srgb, var(--am) 50%, var(--white));
    border-color: var(--am);
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--am);
}

/* ── Pins "Hold to edit" pill ────────────────────────────────────────────────── */
.pins-hold-tip {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    white-space: nowrap;
    letter-spacing: 0.01em;
    background: var(--bg);
    border: 1.5px solid var(--al);
    border-radius: 20px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Reel refresh overlay — transparent, activates after delay */
.reel-refresh-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}
.reel-refresh-overlay.active {
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════
   V2 REELS CAROUSEL — horizontal scroll rows grouped by folder
   ══════════════════════════════════════════════════════════════════ */
#page-reels.view-page {
    padding: 14px 6px;
    border-radius: 16px;
}
.reels-section {
    margin-bottom: 20px;
    border-radius: 14px;
    transition: background var(--transition), box-shadow var(--transition);
}
/* Expanded folder rendered as an OPEN folder: a coloured flap/header carrying
   the folder name + reel count (layout + X buttons on the right), with the
   reels sitting inside a same-colour tinted wrapper. --fc is the folder's own
   colour, set inline per folder. */
.reels-section--folder {
    position: relative;
    margin-top: 18px;
    border: none;
    border-radius: 16px;
    background: var(--fg, var(--fc));
    overflow: visible;
}
.reels-section--folder .reels-section-header {
    position: relative;
    z-index: 1;
    background: transparent;
    border-radius: 15px 15px 0 0;
    /* Roomier header so the centred title and the floating layout button aren't
       cramped against each other / the top edge. */
    padding: 20px 18px 14px;
    min-height: 52px;
    box-sizing: border-box;
    cursor: pointer;
}
/* Darker grabber bar centred at the top of the header — signals the whole
   coloured header is tappable (to close the folder). */
.reels-section--folder .reels-section-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.28);
}
.reels-section--folder .reels-section-header--folder:active { filter: brightness(0.94); }
/* Centre the title (name + count) in the header; the layout toggle floats at
   the right edge so it doesn't pull the title off-centre. */
.reels-section--folder .reels-section-header { justify-content: center; }
/* Shared reels folder header: always-expanded, shows only the count centred —
   no title, no collapse affordance. */
/* Reels collection view: the panel body doesn't scroll — the grid gets a
   max-height (set in JS to fill to the panel bottom) and scrolls internally.
   max-height (not a flex/definite height) so the aspect-ratio tiles size their
   own rows correctly instead of stretching/overlapping. */
.profile-body--reels { overflow: hidden !important; }
/* #profile-collection-items must be able to flex-grow inside the body. */
.profile-body--reels { display: flex; flex-direction: column; }

/* Empty coloured folder header (no title/layout/count) — just a coloured band. */
.reels-section--folder .shared-reels-header { cursor: default; min-height: 34px; }
.reels-section--folder .shared-reels-header:active { filter: none; }
.reels-section--folder .shared-reels-header::before { display: none; }
.reels-section--folder .reels-section-title {
    color: #fff;
    flex: none;
    justify-content: center;
    text-align: center;
}
/* Match the collapsed card's ⋮ menu button — dark translucent circle, white
   icon — instead of a white pill. */
.reels-section--folder .reels-section-layout-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
}
.reels-section--folder .reels-section-layout-btn:active { background: rgba(0, 0, 0, 0.4); }
.reels-section--folder .reels-section-layout-btn i { color: #fff !important; }
.reels-section--folder .reels-section-count-inline {
    color: #fff;
    background: rgba(255,255,255,0.25);
    border-color: transparent;
}
.reels-section--folder .reels-carousel { padding: 8px 14px 16px; }
.reels-section-dropover {
    background: rgba(26,115,232,0.08);
    outline: 2px dashed var(--am);
    outline-offset: -2px;
}
/* No touch-action override here on purpose — an earlier touch-action:none
   (for the old SortableJS setup) broke native horizontal scrolling of the
   carousel. The custom pointer-events drag (_initReelTileDrag in app.js)
   instead distinguishes a scroll from a drag via a long-press timer + a
   pre-drag movement threshold, and only blocks native scroll (via a
   passive:false touchmove preventDefault) once a drag is actually underway. */
.reel-tile { cursor: grab; }
/* Our own drag clone (built by _initReelTileDrag): a fixed-position, fixed
   140px-wide copy of the tile that follows the finger. Explicitly sized so it
   can never balloon to full width the way SortableJS's body-reparented
   fallback did. Iframe hidden in the clone (the tile's own black background
   shows instead) to avoid a cross-origin embed re-loading blank mid-drag. */
.reel-drag-clone {
    position: fixed;
    z-index: 100000;
    width: 140px;
    margin: 0;
    pointer-events: none;
    opacity: 0.92;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.reel-drag-clone iframe { display: none !important; }
/* The source tile stays in place (and reflows for live reordering) but dimmed
   while its clone is the thing being dragged. */
.reel-drag-source { opacity: 0.35; }
.reels-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 8px;
}
.reels-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
/* Short caption for the two computed (non-manual) buckets — "Saved" and
   "Saved Pins" — explaining what they mean, since unlike real trip folders
   their name alone doesn't make that obvious. Sits to the right of the
   title/count on the same line, not stacked below it. */
.reels-section-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.reels-section-count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 1px 7px;
}
.reels-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reels-carousel::-webkit-scrollbar { display: none; }
.reel-drag-finger {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 46px;
    /* body.v2 i[class*="ph-"] otherwise resets every Phosphor icon to
       var(--icon) (a dark gray) — needs to win here so the hint stays
       legible against dark/light thumbnails alike. */
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation: reel-drag-finger-move 2s ease-in-out 1;
}
/* Just an up-and-settle-back motion — dragging a tile UP into a folder card
   is the only gesture that actually does anything here, so a hint that also
   swiped down/left/right was demonstrating motions that don't mean
   anything. The remaining up leg travels further (-170% vs the old -125%)
   so it reads clearly as "lift this up", not just a small jiggle. */
@keyframes reel-drag-finger-move {
    0%   { opacity: 0;   transform: translate(-50%, -50%); }
    10%  { opacity: 1;   transform: translate(-50%, -50%); }
    55%  { opacity: 1;   transform: translate(-50%, -170%); }
    90%  { opacity: 1;   transform: translate(-50%, -50%); }
    100% { opacity: 0;   transform: translate(-50%, -50%); }
}
/* Dims the real tile while its ghost clone is being "dragged" above it, so
   it's clear which tile the hint belongs to. */
.reel-tile-drag-source > .reel-tile-preview:not(.reel-drag-ghost) {
    opacity: 0.45;
    transition: opacity 0.2s;
}
.reel-drag-ghost {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.16);
    pointer-events: none;
    z-index: 2;
    animation: reel-drag-tile-move 2s ease-in-out 1;
}
@keyframes reel-drag-tile-move {
    0%, 10%   { transform: translate(0, 0); }
    55%       { transform: translate(0, -46px); }
    90%, 100% { transform: translate(0, 0); }
}
.reels-carousel .reel-tile {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    scroll-snap-align: start;
}
.reels-carousel .reel-tile-portrait {
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
}
/* Grid layout: 2-column vertical grid (scrolls with the sheet) instead of a
   horizontal strip. */
.reels-carousel--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-x: hidden;
    /* Capped to ~3.5 rows (max-height set by _capReelsGrids after layout);
       taller lists scroll within the grid instead of the whole sheet. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reels-carousel--grid::-webkit-scrollbar { display: none; }
.reels-carousel--grid .reel-tile {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
.reels-layout-btn { flex: 0 0 auto !important; }

.reels-add-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px dashed var(--al);
    background: transparent;
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.reels-add-btn:hover { background: var(--bg); }
.reels-add-btn:active { transform: scale(0.98); }
.reels-add-row {
    display: flex;
    gap: 8px;
    padding: 8px 14px 20px;
}
.reels-add-row .reels-add-btn { flex: 1; }

/* Reels top toolbar */
.reels-toolbar {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
}
/* Pins tab: custom-list cards + sub-page "Add pins" toolbar.
   The New List / A–Z toolbar reuses the Itinerary tab's exact toolbar (base
   .reels-toolbar + .reels-toolbar-btn) — same button style, gap and padding
   against the panel — so the two tabs read identically. No overrides here. */
/* 14px top pad matches the Itinerary tab's .grouped-list padding-top so the
   toolbar isn't flush against the panel's top edge. */
.pins-toolbar-row { padding: 14px 14px 12px; }
/* Cards sit directly under the toolbar — kill the .trip-pill-list top pad so
   the gap to the first card matches the inter-card gap. */
.pins-list-cards { padding-top: 0; margin-bottom: 10px; }
/* Pin-list search — only on a drilled-in list sub-page (Saved / a custom list),
   not the top-level list-of-lists. */
body.v2 .pins-list-search-row { display: none; padding: 10px 14px 12px; }
body.v2.pins-in-list .pins-list-search-row { display: block; }
.pins-search-wrap {
    display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 14px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pins-search-wrap:focus-within { border-color: var(--am); box-shadow: var(--elev-2); }
.pins-search-wrap i { font-size: 16px; color: var(--sub); flex-shrink: 0; }
.pins-search-wrap .pins-search-input {
    flex: 1; border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    min-height: 0; height: auto; padding: 0; margin: 0;
}
.pins-search-wrap .pins-search-input::placeholder { color: var(--ad); }

/* Custom list: the "Add pins" action floats at the BOTTOM of the panel (over the
   list), instead of a toolbar row pinned above the country groups. */
.pins-add-floating-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 68%, transparent);
    display: flex; justify-content: center;
    pointer-events: none;
}
.pins-add-floating-bar .pins-add-floating-btn {
    pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 480px; padding: 13px 18px; border-radius: 999px;
    background: var(--am); color: #fff; border: none; box-shadow: var(--accent-shadow);
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.pins-add-floating-bar .pins-add-floating-btn:active { transform: translateY(1px) scale(0.99); box-shadow: var(--elev-1); }
/* Pins list cards reuse .trip-star as a generic icon holder (bookmark / list
   glyph), NOT a favourite star — so keep those icons a neutral grey outline
   rather than the yellow used by real trip stars. */
.pins-list-cards .trip-star i { color: var(--sub) !important; }
/* In edit mode, fixed lists (Saved / Others) can't be selected — dim them so
   it's clear only custom lists are editable. */
.trip-pill--fixed { opacity: 0.5; }
/* Drag-to-reorder (edit mode) */
.trip-pill--dragging {
    box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
    opacity: 1 !important;
    transform: scale(1.02);
    transition: none !important;
}
.trip-pill-drag-placeholder {
    border: 2px dashed var(--am);
    border-radius: 12px;
    background: color-mix(in srgb, var(--am) 12%, var(--bg));
    margin: 0;
    box-sizing: border-box;
}
/* Left-edge grab handle — the drag/hold point, only shown in reorder (edit)
   mode. Absolutely positioned so it doesn't disturb the row's own layout;
   reorder mode adds left padding to make room. */
.list-drag-handle {
    display: none;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    align-items: center;
    justify-content: center;
    color: var(--ad);
    font-size: 20px;
    cursor: grab;
    touch-action: none; /* let the handle own the pointer gesture (no scroll) */
    z-index: 3;
}
.list-drag-handle:active { cursor: grabbing; }
body.list-reorder-active .list-drag-handle { display: flex; }
/* Make room for the handle in reorder mode (trip-pill = trips + pins cards). */
body.list-reorder-active .trip-pill { padding-left: 38px; }
/* Reels folder card: handle sits over the tab strip on the left. */
/* Reels handle sits OUTSIDE the card, in the left gutter, vertically centred.
   It's over the grey panel now, so it uses a dark-grey (not white) glyph. */
.list-drag-handle--reels {
    left: -30px; top: 50%; bottom: auto; transform: translateY(-50%);
    color: var(--sub);
}
/* In edit mode the reels cards shift slightly right (narrower + left margin, so
   they never run off-screen) to open a left gutter for the drag handle, which
   sits OUTSIDE the card at left-centre. */
body.list-reorder-active .reels-folder-card {
    padding-left: 0;
    width: calc(100% - 30px);
    margin-left: 30px;
}
/* Gentle iOS-style jiggle while editing (not the card being dragged). */
@keyframes reelsJiggle { 0%,100% { transform: rotate(-0.55deg); } 50% { transform: rotate(0.55deg); } }
@keyframes reelsJiggle2 { 0%,100% { transform: rotate(0.55deg); } 50% { transform: rotate(-0.55deg); } }
body.list-reorder-active .reels-folder-card:not(.trip-pill--dragging) {
    animation: reelsJiggle 0.3s ease-in-out infinite;
}
body.list-reorder-active .reels-folder-card:nth-child(even):not(.trip-pill--dragging) {
    animation-name: reelsJiggle2;
}
/* "Add pins" — mirrors the itinerary "Add Location" bar (own full-width
   section + divider, tinted pill), but in blue instead of red. Full-bleed to
   the panel edges (cancels #saved-list's 14px padding). */
.pins-sublist-toolbar {
    margin: 0 -14px 8px;
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--al);
}
.pins-sublist-toolbar .reels-toolbar-btn {
    flex: 1;
    padding: 9px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(26,115,232,0.12);
    border: 1px solid rgba(26,115,232,0.5);
    color: var(--am);
    border-radius: 20px;
}
.pins-sublist-toolbar .reels-toolbar-btn i { color: var(--am); font-size: 14px; }
.pins-sublist-toolbar .reels-toolbar-btn:active { transform: scale(0.99); background: rgba(26,115,232,0.2); }
/* Empty custom-list state. */
.pins-list-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 44px 24px 24px; gap: 4px;
}
.pins-list-empty-icon {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px;
    background: rgba(26,115,232,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--am); font-size: 30px;
}
.pins-list-empty-icon i { color: var(--am); }
.pins-list-empty-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.pins-list-empty-sub { font-size: 13px; color: var(--sub); margin: 0 0 12px; max-width: 240px; line-height: 1.5; }
.pins-list-empty-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 22px; border-radius: 12px; border: none;
    background: var(--am); color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pins-list-empty-btn i { font-size: 16px; color: #fff; }
.pins-list-empty-btn:active { transform: scale(0.97); }
.pinlist-pick .pinlist-check { font-size: 22px; color: var(--sub); flex-shrink: 0; }
/* Multi-select accent card (Add pins to list) — selected = accent border + a
   filled accent circle button. */
.pinlist-pick.pinlist-selected { border-color: var(--am) !important; background: rgba(26,115,232,0.06) !important; }
.pinlist-pick.pinlist-selected .pinlist-check-btn { background: var(--am); color: #fff; }
.pinlist-pick.pinlist-selected .pinlist-check-btn i { color: #fff; }
.reels-toolbar-btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--white);
    box-shadow: var(--elev-1);
    color: var(--sub);
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.reels-toolbar-btn:active { transform: translateY(1px) scale(0.98); background: var(--bg); box-shadow: none; }
.reels-toolbar-btn i { font-size: 14px; }

/* Empty carousel placeholder */
.reels-carousel-empty {
    flex: 1 1 auto;
    padding: 16px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: var(--sub);
    border: 1.5px dashed var(--al);
    border-radius: 12px;
    margin: 0 2px;
    text-align: center;
}

/* Section header menu button */
.reels-section-menu {
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-menu:active { background: var(--al); }
/* Per-folder layout toggle, next to the close button — matches the ⋮/× pair. */
.reels-section-layout-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 17px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-layout-btn:active { background: var(--al); }
/* The layout button already claims margin-left:auto, so the ⋮ menu after it
   shouldn't grab it again (that would split them to opposite ends). */
.reels-section-layout-btn ~ .reels-section-menu { margin-left: 0; }

/* Close button on the expanded carousel's header, same line as the title —
   the only way back to the grid now that the tapped-open folder card is no
   longer rendered while its carousel is showing. */
.reels-section-close-btn {
    /* Matches .reels-section-menu (the ⋮ button on the same header row) —
       same 32px white circle with border + shadow — so the two icon buttons
       read as a matched pair instead of the X looking smaller/plainer. */
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--al);
    color: var(--sub);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.reels-section-close-btn:active { background: var(--al); }

/* Section context menu popup */
.section-menu-popup {
    position: absolute;
    z-index: 200;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--elev-3);
    padding: 4px;
    min-width: 160px;
    animation: fadeIn 0.12s ease;
}
.section-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.section-menu-item:active { background: var(--bg); }
.section-menu-item i { font-size: 16px; color: var(--sub); }
.section-menu-danger { color: #ef4444; }
.section-menu-danger i { color: #ef4444; }

/* Inline rename input */
.reels-rename-input {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--am);
    border-radius: 8px;
    padding: 2px 8px;
    outline: none;
    width: 140px;
}

/* Platform badge — used in reel popup header */
.feed-platform {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    margin-left: auto;
    flex-shrink: 0;
}

/* Hide map nav buttons when a reel popup / info window is open. Individually
   hiding the buttons wasn't enough — the .top-right wrapper div they sit in
   still occupied that same screen rectangle and intercepted taps meant for
   whatever popup content (e.g. the reel card's notes button) happened to
   render underneath it, since hiding a child doesn't shrink its parent's own
   hit area. Disable pointer-events on the wrapper itself too. */
body.map-controls-hidden #terrain-btn,
body.map-controls-hidden #current-location-btn,
body.map-controls-hidden .route-control-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.map-controls-hidden .top-right {
    pointer-events: none !important;
}
/* #search-btn lives inside .top-right and IS the control that closes search
   mode (the state that triggered map-controls-hidden in the first place) —
   disabling it along with the rest meant the first tap on it did nothing,
   and closing only worked once some other interaction cleared the hidden
   state first. Keep it tappable regardless. */
body.map-controls-hidden .top-right #search-btn {
    pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   V2 PIN PICKER — bottom sheet with tappable location cards
   ══════════════════════════════════════════════════════════════════ */
.pin-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pin-picker-sheet {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: var(--elev-3);
    animation: fadeIn 0.18s ease;
}
/* Panel variant (pin-list pickers): no dark backdrop, white sheet matching the
   Add-to-Itinerary picker; a touch shorter, with a floating Add button. */
.pin-picker-overlay--panel {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pin-picker-overlay--panel .pin-picker-sheet {
    height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    background: var(--white);
    position: relative;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
}
.pin-picker-overlay--panel .picker-chips-bar { background: var(--white); }
/* Extra bottom padding so the last rows clear the floating Add button. */
.pin-picker-overlay--panel .pin-picker-list { padding: 10px 14px 88px; }
/* Floating "Add N" button — small, centred at the bottom of the sheet. */
.pinlist-add-floating {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 6; display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 26px; border-radius: 26px; border: none;
    background: var(--am); color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 16px rgba(26,115,232,0.4);
    -webkit-tap-highlight-color: transparent;
}
.pinlist-add-floating i { font-size: 16px; color: #fff; }
.pinlist-add-floating:active { transform: translateX(-50%) scale(0.96); }
.pin-picker-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
}
.pin-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--al);
}
.pin-picker-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Add to Itinerary" sheet only — close (left) / title (centered) / sort
   (right), matching the requested layout for this specific sheet without
   touching the other pickers that reuse .pin-picker-header/.pin-picker-title
   with the close button on the right. */
/* Truly centre the title regardless of the close (left) / sort (right) buttons
   — text-align:center alone centres it in the offset flex space, not the sheet.
   Applies to the Add-to-Itinerary sheet and the pin-list pickers. */
#add-itinerary-sheet-overlay .pin-picker-header,
.pin-picker-header--centered { position: relative; }
#add-itinerary-sheet-overlay .pin-picker-title,
.pin-picker-header--centered .pin-picker-title {
    position: absolute; left: 64px; right: 64px; text-align: center;
    flex: none; pointer-events: none;
}
/* Icon-only schedule button (replaces the old "+ Schedule" text pill) for
   the itinerary-picker row — same absolute-right positioning the old badge
   had, just a small circular icon button instead of a wide text pill. */
.itinerary-picker-row .btn-schedule-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--al);
    color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.itinerary-picker-row .btn-schedule-icon:active { transform: translateY(-50%) scale(0.9); }
/* Centered country header for the "Add to Itinerary" sheet only — other
   pickers sharing .picker-country-header/.picker-country-count keep their
   existing left-aligned-name / right-pinned-count layout. */
.add-location-picker-container .picker-country-header {
    justify-content: center;
}
.add-location-picker-container .picker-country-count {
    margin-left: 0;
}
.pin-picker-sort-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 999px;
    padding: 5px 12px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#bulletin-board-overlay .pin-picker-header {
    position: relative;
    justify-content: flex-start;
}
/* Centered-header variant (e.g. the "Add to pin…" sheet): close button on
   the LEFT, title dead-centre regardless of what flanks it — same pattern
   as the Planning Board header above. */
.pin-picker-header--centered {
    position: relative;
    justify-content: flex-start;
}
.pin-picker-header--centered .pin-picker-title {
    position: absolute;
    left: 56px;
    right: 56px;
    text-align: center;
    pointer-events: none;
}
.pin-picker-header--centered .pin-picker-close {
    margin-left: 0;
}
/* Sort button sits on the right of the header (matches the Add-to-Itinerary
   sheet); flex-start keeps close on the left, margin-left:auto pushes sort over. */
.pin-picker-header--centered .pin-picker-sort-btn { margin-left: auto; }
#bulletin-board-overlay .bulletin-picker-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}
/* Palette button relocated to the header's top-right (was in the composer's
   top row) so it's reachable without opening the compose bar. */
.bulletin-header-color-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.bulletin-color-popup--header {
    position: absolute;
    top: 100%;
    right: 16px;
    z-index: 5;
    width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* Category chips — livelier per-category colors instead of the generic blue
   "active" state shared by every other filter-chip row in the app. */
#bulletin-category-chips .filter-chip[data-cat="general"] i { color: #10B981; }
#bulletin-category-chips .filter-chip[data-cat="flight"] i { color: #3B82F6; }
#bulletin-category-chips .filter-chip[data-cat="hotel"] i { color: #F59E0B; }
#bulletin-category-chips .filter-chip[data-cat="pinned"] i { color: #6366F1; }
#bulletin-category-chips .filter-chip[data-cat="pinned"].active {
    background: #6366F1 !important;
    border-color: #6366F1 !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="general"].active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="flight"].active {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3) !important;
}
#bulletin-category-chips .filter-chip[data-cat="hotel"].active {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3) !important;
}
#bulletin-category-chips .filter-chip.active i { color: #fff !important; }
.pin-picker-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--icon);
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 10px;
}
.pin-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}
/* Inside the overlay sheet the scroll container should fill available height, not cap at 240px */
.pin-picker-list .picker-locations-scroll {
    max-height: none;
    overflow-y: visible;
    flex: 1;
}

/* ── Trip Bulletin Board ── */
#bulletin-category-chips {
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--al);
    margin-bottom: 4px;
}
.bulletin-posts-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
}
/* Chat-bubble post — owner's posts are red and right-aligned, everyone
   else's are blue and left-aligned (own tab, not "me" vs "others"), each
   with a small triangular tail pointing toward its side. */
.bulletin-post {
    position: relative;
    max-width: 80%;
    border: none;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bulletin-post--owner {
    align-self: flex-end;
    background: #E24545;
    border-bottom-right-radius: 4px;
}
.bulletin-post--guest {
    align-self: flex-start;
    background: #3B82F6;
    border-bottom-left-radius: 4px;
}
.bulletin-post--owner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.bulletin-post--guest::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -7px;
    width: 14px;
    height: 14px;
    background: inherit;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.bulletin-post--pinned {
    box-shadow: 0 0 0 2px var(--am), 0 2px 6px rgba(0,0,0,0.12);
}
/* White is the one chat-color swatch too light for the default white text/
   icons everywhere else — flip to dark text/icons just for this bubble, and
   add a border since a pure white bubble otherwise has no edge against the
   list's light-grey background. */
.bulletin-post--light {
    border: 1px solid var(--al);
}
.bulletin-post--light .bulletin-post-cat { background: rgba(0,0,0,0.08); color: #111; }
.bulletin-post--light .bulletin-post-meta { color: rgba(0,0,0,0.6); }
.bulletin-post--light .bulletin-pin-btn,
.bulletin-post--light .bulletin-delete-btn { color: rgba(0,0,0,0.6); }
.bulletin-post--light .bulletin-pin-btn.active { color: #111; }
.bulletin-post--light .bulletin-post-content { color: #111; }
.bulletin-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.bulletin-post-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Neutral translucent-white circle regardless of category — the coloured
       flight/hotel pastel chips didn't have enough contrast against a solid
       red/blue bubble background. Icon-only (label is now the title/tooltip)
       to save space in the post header. */
    background: rgba(255,255,255,0.24);
    color: #fff;
}
.bulletin-post-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bulletin-pin-btn, .bulletin-delete-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: background 0.15s ease;
}
.bulletin-pin-btn.active { color: #fff; }
.bulletin-delete-btn:active, .bulletin-pin-btn:active { background: rgba(255,255,255,0.2); }
.bulletin-post-content {
    font-size: 13px;
    color: #fff;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;
}
.bulletin-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Extra fixed padding on top of the safe-area inset — on phones with no
       home-indicator inset (env() resolves to 0) the compose row otherwise
       sat flush against the very bottom edge. */
    padding: 12px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--al);
    background: var(--white);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.bulletin-compose-toprow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* body.v2 select has a global min-height:44px (form-input reset) that beats
   a plain .bulletin-compose-select rule on specificity — qualify with the
   element type too so this one's shorter height actually wins. */
body.v2 select.bulletin-compose-select {
    flex-shrink: 0;
    height: 28px;
    min-height: 28px;
    min-width: 130px;
    border-radius: 8px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    padding: 0 10px;
}
/* Color-matched to whichever category is currently selected — same palette
   as the #bulletin-category-chips active states. */
body.v2 select.bulletin-compose-select.bulletin-cat-select-general {
    background: color-mix(in srgb, #10B981 16%, var(--bg)) !important;
    border-color: #10B981 !important;
    color: #087f5b !important;
}
body.v2 select.bulletin-compose-select.bulletin-cat-select-flight {
    background: color-mix(in srgb, #3B82F6 16%, var(--bg)) !important;
    border-color: #3B82F6 !important;
    color: #1d4ed8 !important;
}
body.v2 select.bulletin-compose-select.bulletin-cat-select-hotel {
    background: color-mix(in srgb, #F59E0B 16%, var(--bg)) !important;
    border-color: #F59E0B !important;
    color: #b45309 !important;
}
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-general { color: #6ee7b7 !important; }
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-flight { color: #93c5fd !important; }
body.v2.dark select.bulletin-compose-select.bulletin-cat-select-hotel { color: #fdba74 !important; }
.bulletin-post-btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    background: var(--am);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bulletin-post-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
/* Palette button — picks this user's own chat-bubble color, sitting between
   the category select and Post button in the composer's top row. */
.bulletin-color-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--al);
    background: var(--bg);
    color: var(--sub);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bulletin-color-popup {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 10px;
}
body.v2 textarea.bulletin-compose-input {
    min-height: 52px;   /* ~2 lines */
    max-height: 116px;  /* ~5 lines, then scrolls */
}
.bulletin-compose-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    max-height: 116px;
    overflow-y: auto;
    resize: none;
    border-radius: 12px;
    border: 1px solid var(--al);
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
}
.bulletin-compose-input:focus, .bulletin-compose-select:focus {
    outline: none;
    border-color: var(--am);
}
/* Same fix for the full-page "Select Saved Places to Schedule" empty-trip
   view — it's not a modal sheet, so the list should flow with the page's
   own scroll instead of being capped at 240px with blank space below it. */
.saved-selector-list .picker-locations-scroll {
    max-height: none;
    overflow-y: visible;
}
/* Chips bar hoisted above the scrollable list — stays visible at all times */
.picker-chips-bar {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--al);
    background: var(--white);
    flex-shrink: 0;
}
.picker-chips-bar .picker-filter-chips {
    padding: 0;
}
/* Undo toast after saving a map pin */
.undo-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}
.undo-btn {
    background: none;
    border: 1.5px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.share-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--sub);
    font-size: 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.share-divider::before, .share-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--al);
}
.share-save-pin-btn { border: 1.5px solid var(--am) !important; }
.picker-search-row {
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--al);
}
.picker-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--al);
    border-radius: 20px;
    background: var(--bg);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.picker-search-input:focus {
    border-color: var(--am);
}
.pin-loc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.pin-loc-item:active {
    background: color-mix(in srgb, var(--am) 10%, white);
    border-color: var(--am);
}
.pin-loc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pin-loc-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pin-loc-sub {
    font-size: 11px;
    color: var(--sub);
}
/* "Add to list" picker rows: centre the title in the full button width,
   floating the trailing +/check icon so it doesn't shift the centring. */
.list-pick-row, .list-pick-new { position: relative; justify-content: center; }
.list-pick-row .pin-loc-info, .list-pick-new .pin-loc-info {
    flex: none;
    text-align: center;
    align-items: center;
}
.list-pick-row > i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.pin-loc-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, white);
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   V2 REEL CAROUSEL — dot indicators + counter + swipe
   ══════════════════════════════════════════════════════════════════ */
.reel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 140px;
    overflow: hidden;
}
.reel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--al);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.reel-dot.active {
    background: var(--am);
    width: 11px;
    height: 11px;
}
.reel-dot-count {
    font-size: 11px;
    color: var(--color-text-muted, #94a3b8);
    margin-left: 4px;
    font-family: 'Outfit', sans-serif;
}
/* Carousel navigation — inline row below the reel embed
   5-column grid keeps dots truly centred (col 3) while the
   counter sits in its own space (col 4) between dots and arrow. */
.reel-nav-inline {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    padding: 14px 16px;
    background: var(--white);
    border-top: none;
    min-height: 52px;
    box-sizing: border-box;
}
.reel-nav-inline .reel-arrow:first-child {
    grid-column: 1;
    justify-self: center;
}
.reel-nav-inline .reel-dots {
    grid-column: 3;
    justify-self: center;
}
.reel-nav-inline .reel-counter {
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
}
.reel-nav-inline .reel-arrow:last-child {
    grid-column: 5;
    grid-row: 1;
    justify-self: center;
}
.reel-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--al);
    color: var(--text);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.reel-arrow:hover {
    background: var(--al);
}
.reel-arrow:active { transform: scale(0.9); }

.reel-counter {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 20px;
    padding: 2px 7px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS POPUP
   ══════════════════════════════════════════════════════════════════ */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    animation: fadeIn 0.15s ease;
}
.settings-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--al);
}
.settings-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.settings-close {
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.settings-close i { font-size: 16px; color: var(--text); }
.settings-body {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Settings as a menu of sections, each opening its own sub-page. */
.settings-back {
    background: var(--bg); border: 1px solid var(--al); border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    padding: 0; flex-shrink: 0;
}
.settings-back i { font-size: 16px; color: var(--text); }
.settings-header .settings-title { margin-right: auto; }
.settings-header .settings-back + .settings-title { margin-left: 10px; }
.settings-menu { display: flex; flex-direction: column; gap: 10px; }
.settings-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-radius: 12px; width: 100%;
    background: var(--white); border: 1px solid var(--border-soft); box-shadow: var(--elev-1);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    font-family: 'Outfit', sans-serif; transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.settings-menu-item:active { transform: translateY(1px) scale(0.99); box-shadow: none; }
.settings-menu-ico {
    display: inline-flex; width: 34px; height: 34px; border-radius: 10px;
    background: var(--bg); align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-menu-ico i { font-size: 18px; color: var(--am); }
.settings-menu-label { flex: 1; text-align: left; font-size: 14px; font-weight: 600; color: var(--text); }
.settings-menu-arrow { color: var(--sub); font-size: 15px; }
/* Admin API-usage bars */
.usage-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.usage-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.usage-label { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); }
.usage-tier { font-size: 10.5px; font-weight: 600; color: var(--sub); background: var(--bg); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.usage-count { font-size: 12.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.usage-count--over { color: #EA4335; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 999px; background: var(--am); transition: width 0.3s ease; }
.usage-bar-fill--warn { background: #F5B400; }
.usage-bar-fill--over { background: #EA4335; }
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--al);
    border-radius: 12px;
}
.settings-row-label {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-row-label i { font-size: 16px; color: var(--sub); }

/* Toggle switch */
.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--al);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
.toggle input:checked + .toggle-track {
    background: var(--am);
}
.toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
}

/* Theme selector buttons */
.theme-options {
    display: flex;
    gap: 8px;
}
.theme-btn, .admin-mode-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 2px solid var(--al);
    background: var(--bg);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-btn:active, .admin-mode-btn:active { transform: scale(0.97); }
.theme-btn.active, .admin-mode-btn.active {
    border-color: var(--am);
    background: color-mix(in srgb, var(--am) 10%, var(--bg));
    color: var(--am);
}
.theme-btn i, .admin-mode-btn i { font-size: 16px; }

/* Personal accent-color picker — fixed common-solid-color swatches (see
   window._ACCENT_COLORS), not free-form input. */
.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.color-swatch {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px solid var(--al);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
/* Pale swatches need a slightly stronger outline so they don't wash out on the
   white picker. */
.color-swatch--light { border-color: rgba(0,0,0,0.18); }
.color-swatch:active { transform: scale(0.92); }
.color-swatch.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

/* Delete account */
.settings-danger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #DC2626;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
body.v2.dark .settings-danger-btn {
    background: #2A1A1A;
    border-color: #7F1D1D;
}
.settings-danger-btn:active { transform: scale(0.98); background: #FEE2E2; }
.settings-danger-btn i { font-size: 16px; }
/* Default map location section */
.dm-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--al); background: var(--bg); color: var(--text);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dm-chip i { font-size: 15px; }
.dm-chip:active { transform: scale(0.97); }
.dm-chip--active { background: var(--am); border-color: var(--am); color: #fff; }
.dm-chip--active i { color: #fff; }
.settings-reset-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 8px; padding: 10px;
    border-radius: 12px; border: 1px solid var(--al); background: var(--bg);
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--sub); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.settings-reset-btn:active { transform: scale(0.98); }
.settings-reset-btn i { font-size: 15px; }
.settings-version {
    text-align: center;
    font-size: 11px;
    color: var(--ad);
    font-family: 'Inter', sans-serif;
    padding-top: 8px;
}

/* ── Place discovery card (map POI/search "Add Pin" bottom card) ────────── */
.place-discovery-card {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 96px;
    width: min(440px, calc(100vw - 24px));
    background: var(--white, #fff);
    border-radius: 18px;
    box-shadow: var(--elev-3);
    padding: 18px 18px 20px;
    z-index: 12;
    animation: pdcUp 0.22s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
}
@keyframes pdcUp {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Slide-up grip handle */
.pdc-grip {
    display: flex; justify-content: center; align-items: center;
    height: 16px; margin: -6px 0 4px; cursor: grab;
    touch-action: none;
}
.pdc-grip span {
    width: 40px; height: 4px; border-radius: 3px;
    background: var(--al); display: block;
}
.pdc-back {
    position: absolute; top: 18px; left: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--al);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text); cursor: pointer; z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.pdc-back:active { background: var(--al); }
.pdc-reel-btn {
    position: absolute; top: 18px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--border-soft);
    box-shadow: var(--elev-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--text); cursor: pointer; z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.pdc-reel-btn--danger { color: #E12D39; border-color: #f2c4c8; }
.pdc-reel-btn--danger:active { background: #fdeaec; }
/* Bottom action row (Directions / Itinerary / Reel) — 3 equal buttons. */
.pdc-actions-row { margin-top: 20px; display: flex; gap: 8px; }
.pdc-action-btn {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 11px 6px; border-radius: 12px;
    background: var(--white); border: 1px solid var(--border-soft); color: var(--text);
    box-shadow: var(--elev-2);
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pdc-action-btn i { font-size: 19px; }
.pdc-action-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pdc-action-btn:active { transform: translateY(1px) scale(0.98); box-shadow: var(--elev-1); }
.pdc-action-primary { background: var(--am); border-color: var(--am); color: #fff; box-shadow: var(--accent-shadow); }
.pdc-reel-btn:active { background: var(--al); }
/* Inline expandable opening-hours accordion */
.pdc-hours-toggle {
    background: none; border: none; padding: 0; margin: 0;
    width: 100%; -webkit-tap-highlight-color: transparent;
}
.pdc-hours-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; min-width: 0; }
/* The tappable target is the text + caret together (not the whole row width).
   The caret sits right after the text; tapping either opens the popover. */
.pdc-hours-trigger {
    background: none; border: none; padding: 2px 0; margin: -2px 0;
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
    cursor: pointer; -webkit-tap-highlight-color: transparent; color: inherit;
    font: inherit;
}
.pdc-hours-trigger:active { opacity: 0.6; }
.pdc-hours-trigger .pdc-hours-summary { flex: 0 1 auto; }
.pdc-caret { font-size: 13px !important; transition: transform 0.2s ease; }
.pdc-hours-block.open .pdc-caret { transform: rotate(180deg); }
.pdc-hours-acc {
    max-height: 0; overflow: hidden;
    transition: max-height 0.28s ease;
    padding-left: 23px; /* align under the clock-icon text */
}
.pdc-hours-block.open .pdc-hours-acc { max-height: 360px; margin-top: 4px; }
.pdc-title {
    margin: 0 0 10px;
    padding: 0 44px; /* symmetric: clears the back button, keeps text centred */
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 17px; font-weight: 700; line-height: 1.25;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pdc-typewrap { text-align: center; margin-bottom: 14px; }
/* No type-of-destination chip — add the vertical breathing room the chip
   would have provided, so the title doesn't sit cramped against the body. */
.place-discovery-card.pdc-no-type .pdc-title { margin-bottom: 16px; }
.pdc-type {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--am);
    background: color-mix(in srgb, var(--am) 12%, transparent);
    padding: 3px 9px; border-radius: 20px;
}
.pdc-type i { font-size: 13px; }
/* Closure status badge (from Google business_status). Empty slot collapses. */
.pdc-status-slot:empty { display: none; }
.pdc-status-slot { text-align: center; margin: -6px 0 12px; }
.pdc-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
    padding: 4px 11px; border-radius: 20px;
}
.pdc-status-badge i { font-size: 13px; }
.pdc-status-badge--closed { color: #C0392B; background: color-mix(in srgb, #E23B3B 13%, transparent); }
.pdc-status-badge--temp { color: #B7791F; background: color-mix(in srgb, #E0A400 16%, transparent); }
body.v2.dark .pdc-status-badge--closed { color: #F2A6A6; background: rgba(226,59,59,.16); }
body.v2.dark .pdc-status-badge--temp { color: #F5C97A; background: rgba(224,164,0,.16); }
/* Expanded: the 1×1 primary photo is redundant with the gallery below, so
   hide it and let the info column take the full width + wrap (address etc.
   no longer truncates). */
.place-discovery-card.expanded .pdc-photo { display: none !important; }
.place-discovery-card.expanded .pdc-info { justify-content: flex-start; }
.place-discovery-card.expanded .pdc-line span { white-space: normal; overflow: visible; }
/* Slide-up expand section: full opening hours + photo gallery + notes */
.pdc-expand {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}
.place-discovery-card.expanded .pdc-expand {
    max-height: 46vh; overflow-y: auto; opacity: 1;
    margin-top: 12px;
    -webkit-overflow-scrolling: touch;
}
.pdc-exp-title {
    display: flex; align-items: center; gap: 2px;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--sub);
    margin: 16px 0 10px;
}
.pdc-hrow {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: var(--sub); padding: 3px 0;
}
.pdc-hrow.today { color: var(--text); font-weight: 700; }
.pdc-gallery { margin-top: 4px; }
.pdc-gallery-row {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.pdc-gallery-row img {
    width: 120px; height: 120px; flex-shrink: 0;
    object-fit: cover; border-radius: 12px; background: var(--bg);
    box-shadow: var(--elev-1);
}
.pdc-notes {
    font-size: 13px; font-weight: 600; line-height: 1.6;
    white-space: pre-wrap; color: var(--text); margin-bottom: 14px;
}
.pdc-notes-sec:empty { display: none; }
/* Pencil next to the "Notes" title — opens the inline editor */
.pdc-notes-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: none; border: none; padding: 0;
    color: var(--am); font-size: 13px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-notes-editor { display: flex; flex-direction: column; gap: 8px; }
.pdc-notes-input {
    width: 100%; box-sizing: border-box; resize: none;
    border: 1px solid var(--al); border-radius: 10px; padding: 10px 12px;
    font-size: 13px; font-family: 'Inter', sans-serif; line-height: 1.5;
    color: var(--text); background: var(--bg);
}
.pdc-notes-input:focus { outline: none; border-color: var(--am); }
.pdc-notes-actions { display: flex; gap: 8px; justify-content: flex-end; }
.pdc-notes-act {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--al); border-radius: 999px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; font-family: 'Outfit', sans-serif;
    background: var(--white); color: var(--sub); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-notes-act.pdc-notes-save { background: var(--am); border-color: var(--am); color: #fff; }
.pdc-notes-act.pdc-notes-clear { margin-right: auto; }
/* Opening-hours floating popup — translucent frosted panel anchored just
   above the location card (position/width set inline by
   _pdcPositionAboveCard, matching the card's own width exactly). The backdrop
   is a full-screen transparent tap-to-close layer, not a centring flex box. */
.pdc-hours-popover {
    position: fixed; inset: 0; z-index: 19000;
    background: rgba(0,0,0,0.12);
    animation: pdcFadeIn 0.15s ease;
}
.pdc-hours-pop-card {
    background: color-mix(in srgb, var(--white) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--al);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    box-sizing: border-box;
}
.pdc-hours-pop-title {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
}
.pdc-hours-pop-title i { color: var(--am); }
/* Floating attach-a-reel card — anchored just above the location card
   (position/width set inline by _pdcPositionAboveCard). */
.pdc-attach-float,
.pdc-card-menu-float {
    z-index: 15000;
    box-sizing: border-box;
    background: var(--white); border: 1px solid var(--al);
    border-radius: 16px; padding: 12px 14px 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.22);
    display: flex; flex-direction: column; gap: 8px;
    animation: pdcFadeIn 0.15s ease;
}
/* Header: title centred, close button pinned to the LEFT. */
.pdc-attach-float-head {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 28px;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); padding-bottom: 2px;
}
.pdc-attach-float-close {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    background: var(--bg); border: 1px solid var(--al); border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; color: var(--icon); cursor: pointer; font-size: 13px;
    -webkit-tap-highlight-color: transparent;
}
/* Pin-type grid shown INSIDE the card ⋮ menu popup (replaces the old bottom
   sheet). 4 columns like the sheet; scrolls if the type list grows tall. */
.pdc-pin-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-top: 2px;
}
.pdc-attach-url-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--al); border-radius: 10px; padding: 10px 12px;
    font-size: 13px; font-family: 'Inter', sans-serif;
    color: var(--text); background: var(--bg);
}
.pdc-attach-url-input:focus { outline: none; border-color: var(--am); }
/* Reel select mode — floating banner + attach confirmation. Both anchored
   above the bottom tab bar (not the page header, which they used to cover)
   and sized to match the location card's standard width. The banner sits at
   the very bottom (closest to the tabs); the confirmation card, when shown,
   stacks directly above it (position set inline by JS — banner height varies
   with text wrap, so the confirm card's offset is computed from the banner's
   live rect, not a fixed value). */
.reel-select-banner {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 15000;
    display: flex; align-items: center; gap: 8px;
    width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
    background: color-mix(in srgb, var(--am) 92%, #000);
    color: #fff; border-radius: 999px; padding: 8px 8px 8px 14px;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    animation: pdcFadeIn 0.15s ease;
}
.reel-select-banner i { font-size: 16px; flex-shrink: 0; }
.reel-select-banner span { flex: 1; min-width: 0; }
.reel-select-cancel {
    flex-shrink: 0; background: rgba(255,255,255,0.18); border: none;
    border-radius: 999px; padding: 6px 12px; color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-select-attach {
    flex-shrink: 0; background: #fff; border: none;
    border-radius: 999px; padding: 6px 12px; color: var(--am);
    font-size: 12px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-select-confirm {
    position: fixed; left: 50%; transform: translateX(-50%);
    z-index: 15001;
    width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
    background: var(--white); border: 1px solid var(--al);
    border-radius: 16px; padding: 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13px; color: var(--text);
    animation: pdcFadeIn 0.15s ease;
}
/* Photo lightbox — reel-viewer-v2 layout: floating close, content card over a
   blurred backdrop, bottom island selector; photos pinch-zoom. */
.photo-lb-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 92px 12px 116px; box-sizing: border-box;
    animation: pdcFadeIn 0.15s ease;
}
.photo-lb-float-btn {
    position: absolute; top: 18px; left: 16px; z-index: 7;
    width: 48px; height: 48px; border-radius: 50%; border: none;
    background: #fff; color: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.photo-lb-float-btn i { font-size: 22px; }
/* Location title pill — floats top-centre, like the reel viewer's title pill. */
.photo-lb-title {
    position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 6; max-width: 60%;
    text-align: center; color: #fff; font-family: 'Outfit', sans-serif;
    font-size: 15px; font-weight: 600;
    background: rgba(0,0,0,0.5); padding: 9px 18px; border-radius: 22px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-lb-card {
    max-width: 100%; max-height: 100%;
    border-radius: 20px; overflow: hidden; background: #000;
    display: flex; align-items: center; justify-content: center;
}
.photo-lb-stage {
    max-width: 100%; max-height: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.photo-lb-img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 208px);
    object-fit: contain; display: block;
    transform-origin: center center; will-change: transform;
    user-select: none; -webkit-user-drag: none;
}
.photo-lb-nav {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 6; display: flex; align-items: center; gap: 16px;
    touch-action: none;
    min-width: 200px; padding: 12px 22px;
    background: rgba(0,0,0,0.58); border-radius: 28px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.photo-lb-arrow {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.22); color: #fff;
    font-size: 26px; line-height: 1; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.photo-lb-arrow:active { background: rgba(255,255,255,0.38); }
.photo-lb-counter {
    flex: 1; text-align: center; white-space: nowrap;
    color: #fff; font-size: 14px; font-weight: 600;
}
/* Photo lightbox / carousel (legacy) */
.pdc-lightbox {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    animation: pdcFadeIn 0.15s ease;
}
@keyframes pdcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pdc-lb-close {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: none; color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-lb-stage {
    width: min(440px, calc(100vw - 24px));
    max-height: 80vh; display: flex; align-items: center; justify-content: center;
}
.pdc-lb-img { max-width: 100%; max-height: 80vh; border-radius: 12px; object-fit: contain; }
.pdc-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: none; color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-lb-prev { left: 10px; }
.pdc-lb-next { right: 10px; }
.pdc-lb-count {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; font-weight: 600;
    background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 20px;
}
/* Attach-reel action sheet + reel grid */
.pdc-reel-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--bg); border: 1px solid var(--al);
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pdc-reel-opt i { font-size: 20px; color: var(--am); }
.pdc-reel-opt:active { background: var(--al); }
.pdc-reel-opt--danger, .pdc-reel-opt--danger i { color: #e5484d; }
.pdc-notes-empty { color: var(--sub); font-weight: 500; font-style: italic; }
.pdc-body { display: flex; gap: 14px; align-items: stretch; }
/* Centre the info column against the photo height so a sparse card (e.g. just
   an address) doesn't leave a big gap under a top-aligned single line. */
.pdc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.pdc-line {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--sub); text-decoration: none; min-width: 0;
}
.pdc-line i { font-size: 15px; flex-shrink: 0; color: var(--sub); }
.pdc-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable rows (rating/website/phone) shrink to their own content width so
   only the icon+text is tappable — the empty space to the right of the row no
   longer activates the link. (Non-link rows like the address stay full-width
   so long text can wrap.) */
.pdc-link, .pdc-rating { align-self: flex-start; max-width: 100%; }
/* Website / phone: blue link text with an underline. */
.pdc-link { color: var(--am); }
.pdc-link i { color: var(--am); }
.pdc-link span { text-decoration: underline; }
/* Rating: same link treatment as website/phone (underlined), but in the
   star's gold instead of blue — clearly a tappable link (opens reviews). */
.pdc-rating { color: #E0A400; font-weight: 700; }
.pdc-rating i { color: #F5B400; font-size: 14px; }
.pdc-rating .pdc-rating-val { text-decoration: underline; }
.pdc-rating .pdc-sub { color: #E0A400; font-weight: 500; }
.pdc-photo {
    flex-shrink: 0; width: 96px; height: 96px;
    border-radius: 12px; overflow: hidden; background: var(--bg);
}
.pdc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdc-add {
    margin-top: 14px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px; background: var(--am); color: #fff;
    border: none; border-radius: 12px;
    font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pdc-add:active { opacity: 0.9; }