.show-mobile-only { display: none; }
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile-only { display: inline !important; }
}

.sr-only-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --accent: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --transition: all 0.2s ease;
}

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

html { overflow-x: hidden; max-width: 100%; width: 100%; }

body {
    overflow-x: hidden;
    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--gray-800);
    background: var(--gray-50);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    /* Content protection: prevent text selection & iOS callout */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
/* Restore selection inside all form controls */
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
/* Prevent iOS long-press save/share and drag-saving of images */
img, video {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-drag: none;
}

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

/* Navbar */
.navbar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 1rem;
}

.nav-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
}
.nav-brand .brand-pin {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.02em;
    line-height: 1;
}
.nav-brand .brand-pin .i-dot-wrap {
    position: relative;
    display: inline-block;
}
.nav-brand .brand-pin .i-dot-wrap .i-dot {
    position: absolute;
    top: 0.04em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.22em;
    height: 0.22em;
    background: #ff6b35;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(255,80,20,0.4));
}
.nav-brand .brand-pin .pin-o {
    display: inline-flex;
    align-items: flex-end;
    color: #ff6b35;
    font-size: 1.15rem;
    line-height: 1;
    transform: translate(1px, 1px);
    filter: drop-shadow(0 1px 2px rgba(255,80,20,0.3));
}

.nav-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.nav-search form {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
    border: 1.5px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search form:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    background: #fff;
}

.nav-search input {
    border: none;
    background: none;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    flex: 1;
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
}

.nav-search button {
    border: none;
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--gray-500);
    cursor: pointer;
}

/* Live search dropdown */
.nav-search-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    z-index: 99999;
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}
.nsd-section {
    padding: 6px 14px 3px;
    font-size: 0.67rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
}
.nsd-section:first-child { border-top: none; margin-top: 0; }
.nsd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    color: #111827;
    transition: background 0.1s;
}
.nsd-item:hover { background: #f8fafc; }
.nsd-item-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; flex-shrink: 0;
}
.nsd-item-name { font-size: 0.83rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsd-item-sub { font-size: 0.71rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nsd-footer {
    display: block;
    padding: 9px 14px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.78rem;
    color: #2563eb;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s;
}
.nsd-footer:hover { background: #f0f6ff; }
.nsd-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 0.82rem;
    color: #9ca3af;
    line-height: 1.8;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--gray-600);
}

.nav-mobile-invite {
    display: none;
    position: relative;
    color: var(--gray-600);
    font-size: 1.1rem;
    text-decoration: none;
}
.nav-mobile-new-trip {
    display: none;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
}
.nav-mobile-new-trip:hover { background: var(--primary-dark, #1d4ed8); }
/* Purple + button for New Event — same shape as nav-mobile-new-trip */
.nav-mobile-new-event {
    display: none;
    width: 32px;
    height: 32px;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s;
}
.nav-mobile-new-event:hover { background: #6d28d9; }
/* ── Mobile + dropdown (black trigger → New Trip / New Event) ── */
.mob-plus-dd-wrap {
    position: relative;
    flex-shrink: 0;
}
.mob-plus-dd-trigger {
    display: none;          /* shown via media query */
    width: 32px;
    height: 32px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
.mob-plus-dd-trigger:hover,
.mob-plus-dd-trigger.active { background: #1e293b; }
.mob-plus-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.16);
    min-width: 160px;
    z-index: 9999;
    display: none;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.mob-plus-dd-menu.open { display: block; }
.mob-plus-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}
.mob-plus-dd-item:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
.mob-plus-dd-item:hover { background: #f8fafc; }
.mob-plus-dd-trip  { color: #2563eb; }
.mob-plus-dd-event { color: #7c3aed; }
.mob-plus-dd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem 0.45rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.mob-plus-dd-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.mob-plus-dd-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    color: #94a3b8;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.mob-plus-dd-close:hover { color: #0f172a; background: #e2e8f0; }
/* Wrapper that holds the search + the + button side by side */
.mob-nav-plus-wrap {
    display: none;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
/* Standalone search button — same shape as nav-mobile-new-trip */
.mob-nav-search-badge {
    display: flex;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.mob-nav-search-badge:hover,
.mob-nav-search-badge:active {
    background: var(--primary);
    color: #fff;
}
.nav-mobile-invite .nav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 0.6rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 0.875rem;
    transition: var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-link { border: 1.5px solid transparent; }
.nav-link:hover { background: var(--gray-100); color: var(--gray-900); }
.nav-link.nav-active { background: #e5e7eb; color: var(--gray-900); font-weight: 600; border-color: #ff6b35; }
.nav-link i:first-child { font-size: 0.95rem; }

.nav-divider {
    width: 1px;
    height: 24px;
    background: var(--gray-200);
    margin: 0 0.25rem;
}

.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}
.nav-chevron {
    font-size: 0.55rem !important;
    transition: transform 0.2s ease;
    opacity: 0.5;
    margin-left: 0.1rem;
}
.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--gray-100);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1100;
}
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border-top: 1px solid var(--gray-100);
    border-left: 1px solid var(--gray-100);
    z-index: 1;
}
.nav-dropdown-right {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
}
.nav-dropdown-right::before {
    left: auto;
    right: 16px;
    transform: rotate(45deg);
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown.open .nav-dropdown-right {
    transform: translateX(0) translateY(0);
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    color: var(--gray-700);
    font-size: 0.875rem;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.nav-dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--gray-400);
    transition: color 0.15s ease;
}
.nav-dropdown-item:hover {
    background: var(--primary-light, #eef2ff);
    color: var(--primary);
}
.nav-dropdown-item:hover i {
    color: var(--primary);
}
.nav-dropdown-item .nav-badge {
    margin-left: auto;
}
.nav-dropdown-item-danger:hover {
    background: #fef2f2;
    color: var(--danger);
}
.nav-dropdown-item-danger:hover i {
    color: var(--danger);
}
.nav-dropdown-divider {
    height: 1px;
    background: var(--gray-100);
    margin: 0.3rem 0.5rem;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.nav-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3);
}
.nav-user-toggle {
    gap: 0.5rem;
}
.nav-username {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trips-status-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    background: #e2e4e9;
    border-radius: var(--radius);
    padding: 0.4rem;
    border: 2px solid #fdba74;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.status-tab {
    padding: 0.65rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-500);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    justify-content: center;
    text-decoration: none;
}
.status-tab i { font-size: 0.82rem; flex-shrink: 0; color: inherit; }
.status-tab-label { white-space: nowrap; color: inherit; }
.status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(0,0,0,0.08);
    color: inherit;
    transition: background 0.2s;
}

/* Memories & Shared tabs - shared hover/active */
.status-tab-memories.active,
.status-tab-shared.active,
.status-tab-events.active { color: #fff; background: var(--primary); box-shadow: 0 2px 6px rgba(67,97,238,0.3); }
.status-tab-memories.active .status-tab-count,
.status-tab-shared.active .status-tab-count,
.status-tab-events.active .status-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.status-tab-memories:hover,
.status-tab-shared:hover,
.status-tab-events:hover { color: var(--gray-700); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.status-tab-memories:hover .status-tab-count,
.status-tab-shared:hover .status-tab-count,
.status-tab-events:hover .status-tab-count { background: rgba(0,0,0,0.10); }

.badge-current { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(6,95,70,0.15); height: auto; min-width: auto; }
.badge-passed { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #fff; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(196,181,253,0.25); height: auto; min-width: auto; }
.badge-wishlist { background: linear-gradient(135deg, #fdba74, #fb923c); color: #fff; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(251,146,60,0.25); height: auto; min-width: auto; }
.badge-memory { background: linear-gradient(135deg, #e5e7eb, #d1d5db); color: #374151; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(55,65,81,0.12); height: auto; min-width: auto; }
.badge-leisure { background: linear-gradient(135deg, #a5f3fc, #67e8f9); color: #155e75; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(21,94,117,0.18); height: auto; min-width: auto; }
.badge-business { background: linear-gradient(135deg, #1e293b, #334155); color: #f1f5f9; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(30,41,59,0.25); height: auto; min-width: auto; }
.badge-adventure { background: linear-gradient(135deg, #bbf7d0, #86efac); color: #14532d; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(20,83,45,0.18); height: auto; min-width: auto; }
.badge-cultural { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(120,53,15,0.18); height: auto; min-width: auto; }
.badge-family { background: linear-gradient(135deg, #e9d5ff, #c4b5fd); color: #4c1d95; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(76,29,149,0.18); height: auto; min-width: auto; }
.badge-romantic { background: linear-gradient(135deg, #fecdd3, #fda4af); color: #881337; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(136,19,55,0.18); height: auto; min-width: auto; }
.badge-current i, .badge-passed i, .badge-wishlist i, .badge-memory i, .badge-leisure i, .badge-business i, .badge-adventure i, .badge-cultural i, .badge-family i, .badge-romantic i { font-size: 0.68rem; }

.status-radio-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Trendy Countries bar ─────────────────────────────────── */
.trendy-countries-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbf5 100%);
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 10px 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.trendy-bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #ea580c;
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
}
.trendy-bar-label i { font-size: 0.78rem; }
.trendy-bar-items {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.trendy-bar-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 99px;
    padding: 5px 12px 5px 8px;
}
.trendy-rank {
    font-size: 0.6rem;
    font-weight: 900;
    min-width: 22px;
    text-align: center;
}
.trendy-flag {
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}
.trendy-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.trendy-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ea580c;
    background: #fff7ed;
    border-radius: 99px;
    padding: 1px 8px;
    white-space: nowrap;
}
.trendy-count i { font-size: 0.62rem; }
.trendy-sep {
    width: 1px;
    height: 22px;
    background: #fed7aa;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .trendy-countries-bar { gap: 10px; padding: 10px 14px; }
    .trendy-bar-items { gap: 8px; }
    .trendy-bar-item { padding: 5px 10px 5px 7px; }
    .trendy-name { font-size: 0.74rem; }
    .trendy-sep { display: none; }
}
.status-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1.2rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.82rem;
    color: var(--gray-500);
    flex: 1;
    text-align: center;
    min-width: 90px;
}
.status-radio-card input[type="radio"] { display: none; }
.status-radio-card:hover { border-color: var(--primary-light); background: var(--gray-50); }
.status-radio-card.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.status-radio-card i { font-size: 1.1rem; }

/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 1rem 0;
    box-sizing: border-box;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0 auto 1rem;
    max-width: 1200px;
    font-size: 0.875rem;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Email verification banner */
.email-verify-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fffbeb;
    border-bottom: 1px solid #fcd34d;
    padding: 0.65rem 1.25rem;
    font-size: 0.84rem;
    color: #78350f;
    flex-wrap: wrap;
}
.evb-icon { font-size: 1rem; color: #d97706; flex-shrink: 0; }
.evb-msg  { flex: 1; min-width: 0; }
.evb-form { display: inline; margin: 0; }
.evb-btn {
    background: #d97706;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.evb-btn:hover { background: #b45309; }
.evb-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: #92400e;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.evb-dismiss:hover { opacity: 1; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary { background: var(--primary); color: white; }
.btn-orange { background: #f97316; color: white; border: none; }
.btn-orange:hover { background: #ea6c0a; color: white; }
.btn-primary:hover { background: var(--primary-dark); color: white; }
.btn-se { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; transition: opacity .15s, transform .1s; box-shadow: 0 2px 8px rgba(124,58,237,.35); }
.btn-se:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.btn-se:active { transform: translateY(0); }
.btn-dash-order { background: var(--gray-100); border: 1px solid var(--gray-300); color: var(--gray-600); font-size: .8rem; gap: .35rem; display:inline-flex;align-items:center; transition: background .15s, color .15s, transform .1s; }
.btn-dash-order:hover { background: var(--gray-200); color: var(--gray-800); transform: translateY(-1px); }
.btn-dash-order:active { transform: translateY(0); }
.btn-dash-order.is-saving { opacity: .6; pointer-events: none; }
.dash-sections-wrap { display: flex; flex-direction: column; }
.dash-section-block { width: 100%; }
.btn-outline { background: white; border: 1px solid var(--gray-300); color: var(--gray-700); }
.btn-add-section { border-color: #ff6b35 !important; color: #ff6b35 !important; }
.btn-add-section:hover { background: #fff4f0 !important; color: #e8541a !important; border-color: #e8541a !important; }
.btn-outline:hover { background: var(--gray-100); color: var(--gray-900); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; color: white; }
.btn.disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0.25rem;
    transition: var(--transition);
    font-size: 0.875rem;
}

.btn-icon:hover { color: var(--danger); }

.btn-icon-sm {
    background: rgba(0,0,0,0.5);
    border: none;
    cursor: pointer;
    color: white;
    padding: 0.25rem 0.375rem;
    border-radius: 50%;
    font-size: 0.7rem;
    position: absolute;
    top: 4px;
    right: 4px;
    transition: var(--transition);
}

.btn-icon-sm:hover { background: var(--danger); }

/* Cards */
.card {
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

.section-header-label {
    background: #e5e7eb;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0.45rem 1.5rem;
    border-top: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #1e40af !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    transition: var(--transition);
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.addr-auto-expand {
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    min-height: 38px;
    display: block;
    box-sizing: border-box;
}
.pin-badge-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
    min-height: 16px;
}
.pin-badge {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.geo-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}
.geo-pin-badge--pinned {
    color: #059669;
    background: #d1fae5;
}
.geo-pin-badge--unpinned {
    color: #dc2626;
    background: #fee2e2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input { width: auto !important; }

.inline-form .form-row {
    align-items: end;
}

.input-inline {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 { font-size: 1.75rem; color: var(--gray-900); }
.page-header-back {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 0.9rem;
    text-decoration: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.page-header-back:hover {
    background: var(--primary);
    color: #fff;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.page-actions .btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    line-height: 1.4;
    border: 1px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
}
.page-actions .btn-outline { border-color: var(--gray-300); }
.page-actions .btn-danger { border-color: var(--danger); }
.trip-edit-sticky {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.2rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(59,130,246,0.35);
    text-decoration: none;
    transition: opacity 0.25s, transform 0.25s, background 0.2s;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.trip-edit-sticky.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.trip-edit-sticky:hover { background: var(--primary-dark); color: #fff; box-shadow: 0 6px 20px rgba(59,130,246,0.45); }
@media (max-width: 768px) { .trip-edit-sticky { bottom: 5rem; right: 1rem; padding: 0.55rem 1rem; font-size: 0.8rem; } }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 { font-size: 1.25rem; }

/* Landing Page */
/* ── Landing hero ──────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1f3c 0%, #1a3a6b 55%, #1d4ed8 100%);
    color: white;
    padding: 0;
    min-height: 540px;
    display: flex;
    align-items: stretch;
}

/* Ambient orbs */
.hero-bg-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.hero-orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 70%);
    top: -100px; left: -80px;
}
.hero-orb-2 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(249,115,22,0.14), transparent 70%);
    bottom: -80px; right: 20%;
}
.hero-orb-3 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(99,102,241,0.20), transparent 70%);
    top: 40px; right: -40px;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2.5rem;
}

.hero-content { flex: 1; max-width: 560px; text-align: left; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.88);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
}
.hero-badge i { color: #f97316; font-size: 0.75rem; }
.hero-bullet { color: #ff6b35; margin: 0 0.35em; font-size: 1.1em; vertical-align: middle; }

.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}
.hero p {
    font-size: 1.1rem;
    opacity: 0.82;
    margin-bottom: 2.25rem;
    line-height: 1.7;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

.btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.55);
    color: white;
    font-weight: 600;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,0.10);
    border-color: white;
    color: white;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hero-stat strong { font-size: 0.95rem; font-weight: 700; color: white; }
.hero-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.hero-stat-sep { width: 1px; height: 30px; background: #f97316; }

/* Visual panel */
.hero-visual {
    flex: 0 0 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-globe-wrap {
    position: relative;
    width: 320px;
    height: 320px;
}
.hero-globe {
    width: 100%;
    height: 100%;
    animation: heroGlobeFloat 6s ease-in-out infinite;
}
@keyframes heroGlobeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

/* Floating cards */
.hero-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    padding: 0.65rem 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    white-space: nowrap;
    animation: heroCardFloat 5s ease-in-out infinite;
}
.hero-card-trip    { bottom: 10px; left: -30px; animation-delay: 0s; }
.hero-card-weather { top: 10px; right: -20px; animation-delay: 2.5s; }
.hero-card-event   { top: 10px; right: -20px; animation-delay: 2.5s; }
@keyframes heroCardFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.hero-card .hc-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: #2563eb;
    flex-shrink: 0;
}
.hero-card-weather .hc-icon { background: #fff7ed; color: #f97316; }
.hero-card-event  .hc-icon { background: #f3e8ff; color: #7c3aed; }
.hero-card .hc-title { font-size: 0.82rem; font-weight: 700; color: #0f172a; }
.hero-card .hc-sub   { font-size: 0.72rem; color: #64748b; }

.features {
    padding: 4rem 1rem;
    background: white;
}

.features h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: var(--gray-900);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius);
    transition: var(--transition);
}

.feature-card:hover { background: var(--gray-50); }

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}
.feature-icon-events { color: #7c3aed; }
.feature-icon-reel   { color: #0891b2; }

.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p { color: var(--gray-500); font-size: 0.9375rem; }

/* ── Auth pages: split layout ──────────────────────────────────────────────── */
.auth-page {
    display: flex;
    min-height: calc(100vh - 65px);
    margin: -1.5rem 0;
    overflow: hidden;
}

.auth-split {
    flex-direction: row;
    align-items: stretch;
}

/* Visual panel (left) */
.auth-panel-visual {
    flex: 0 0 45%;
    background: linear-gradient(145deg, #0d1f3c 0%, #1a3a6b 50%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-panel-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(59,130,246,0.30) 0%, transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.12) 0%, transparent 50%);
    pointer-events: none;
}
.auth-panel-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    gap: 1.5rem;
    color: white;
    max-width: 360px;
}

/* Logo in visual panel */
.apv-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    opacity: 0.95;
}
.apv-logo .brand-pin {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.45rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.02em;
    line-height: 1;
}
.apv-logo .brand-pin .i-dot-wrap {
    position: relative;
    display: inline-block;
}
.apv-logo .brand-pin .i-dot-wrap .i-dot {
    position: absolute;
    top: 0.04em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.22em;
    height: 0.22em;
    background: #ff6b35;
    border-radius: 50%;
    filter: drop-shadow(0 0 3px rgba(255,80,20,0.6));
}
.apv-logo .brand-pin .pin-o {
    display: inline-flex;
    align-items: flex-end;
    color: #ff6b35;
    font-size: 1.15rem;
    line-height: 1;
    transform: translate(1px, 1px);
    filter: drop-shadow(0 1px 3px rgba(255,80,20,0.5));
}

/* Globe */
.apv-globe-wrap { width: 220px; height: 220px; }
.apv-globe { width: 100%; height: 100%; animation: heroGlobeFloat 7s ease-in-out infinite; }

/* Tagline */
.apv-tagline h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.25; }
.apv-tagline p  { font-size: 0.88rem; opacity: 0.7; line-height: 1.65; }

/* Feature list */
.apv-stats {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.apv-stat {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(249,115,22,0.55);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
}
.apv-stat i { color: #60a5fa; font-size: 0.8rem; }

/* Form panel (right) */
.auth-panel-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8faff;
    padding: 2rem 1.5rem;
}

.auth-card {
    background: white;
    padding: 2.75rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 420px;
    border: 1px solid #e2e8f0;
}

/* Auth card header */
.auth-card-header { text-align: center; margin-bottom: 2rem; }
.auth-card-logo {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: #eff6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #2563eb;
    margin-bottom: 1rem;
}
.auth-card-brand {
    display: block;
    margin-bottom: 1rem;
}
.auth-card-brand .brand-pin {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.auth-card-tagline {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    background: #d1d5db;
    border: 1px solid #ff6b35;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.auth-dot {
    color: #ff6b35;
    margin: 0 0.4em;
    font-size: 1em;
}
.auth-card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.auth-footer-forgot { margin-top: 0.5rem; }
.auth-footer-forgot a { color: #ff6b35; font-size: 0.82rem; }
.auth-footer-forgot a:hover { color: #e55a25; }
.forgot-reset-link {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    word-break: break-all;
    color: var(--primary);
    cursor: pointer;
}
.forgot-reset-link:hover { text-decoration: underline; }
.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.password-wrapper {
    position: relative;
}
.password-wrapper input {
    padding-right: 2.5rem;
}
.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 1rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.password-toggle:hover {
    color: var(--gray-600);
}

/* Dashboard */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dashboard-header h1 { font-size: 1.75rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}
.stat-total {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-400);
}

.stat-label {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.stat-card-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}
.stat-card-clickable:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
    transform: translateY(-2px);
}
.stat-chevron {
    font-size: 0.65rem;
    margin-left: 0.25rem;
    color: var(--gray-400);
}
.stat-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: statFadeIn 0.2s ease;
}
@keyframes statFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.stat-popup {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: statPopIn 0.25s ease;
}
@keyframes statPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.stat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}
.stat-popup-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gray-700);
}
.stat-popup-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.15rem 0.35rem;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
.stat-popup-close:hover {
    color: var(--danger);
    background: var(--gray-50);
}
.stat-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.stat-popup-back {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0.4rem;
    border-radius: 50%;
    transition: background 0.2s;
}
.stat-popup-back:hover {
    background: var(--gray-50);
}
.stat-detail-count {
    font-size: 0.78rem;
    color: var(--gray-400);
    flex-shrink: 0;
    white-space: nowrap;
}
.buddy-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
}
.buddy-avatar,
.buddy-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}
.buddy-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.buddy-avatar-img {
    object-fit: cover;
    border: 2px solid var(--gray-100, #f0f0f0);
}
.buddy-info {
    flex: 1;
    min-width: 0;
}
.buddy-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buddy-username {
    font-size: 0.75rem;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buddy-trip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--primary-light, #e8f4f8);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    cursor: default;
    font-family: inherit;
}
.buddy-trip-badge i {
    font-size: 0.65rem;
}
.buddy-trip-badge--clickable {
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.buddy-trip-badge--clickable:hover {
    background: var(--primary);
    color: #fff;
}
#buddy-trips-popup-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
}
.buddy-trip-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--gray-700);
    transition: background 0.12s;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-100, #f3f4f6);
}
.buddy-trip-item:hover {
    background: var(--primary-light, #e8f4f8);
    border-color: var(--primary-light, #e8f4f8);
}
.buddy-trip-thumb {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    flex-shrink: 0;
    background-color: var(--gray-200, #e5e7eb);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.75rem;
}
.buddy-trip-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.buddy-trip-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buddy-trip-dates {
    font-size: 0.72rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buddy-trip-dates i {
    font-size: 0.65rem;
}
.buddy-trip-arrow {
    font-size: 0.65rem;
    color: var(--gray-400);
    flex-shrink: 0;
}
.country-flag-icon {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 1px rgba(0,0,0,.2);
}
.country-user-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.65rem; padding: 0.15rem 0.45rem; border-radius: 8px; font-weight: 600; flex-shrink: 0; white-space: nowrap; line-height: 1.2; }
.country-badge-nationality { background: #e8f4fd; color: #1976d2; }
.country-badge-residence { background: #e8f5e9; color: #2e7d32; }
.country-badge-label { font-size: 0.62rem; }
.stat-detail-summary { font-size: 0.85rem; color: #666; margin: 0 0 0.5rem; padding: 0 0.25rem; }
.unesco-rating { color: #b8860b; font-size: 0.75rem; flex-shrink: 0; }
.unesco-visit-date { font-size: 0.72rem; color: #888; white-space: nowrap; flex-shrink: 0; }
.unesco-site-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.unesco-ac-item:hover { background: #f5f5f5; }
.unesco-ac-item:last-child { border-bottom: none !important; }
.unesco-wish-add:hover { color: #e6a817 !important; background: #fffdf0 !important; transform: scale(1.15); }
.unesco-explore-link { color: #b8860b; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.15s; }
.unesco-explore-link:hover { color: #e6a817; text-decoration: underline; }
.unesco-visited-badge { font-size: 0.75rem; color: #2e7d32; font-weight: 600; white-space: nowrap; }
.unesco-remaining-badge { font-size: 0.75rem; color: #b8860b; font-weight: 600; white-space: nowrap; }
.unesco-complete-badge { font-size: 0.75rem; color: #b8860b; font-weight: 700; white-space: nowrap; }
.badge-short { display: none; }
.stat-detail-arrow { color: var(--gray-300); font-size: 0.7rem; flex-shrink: 0; }
.unesco-detail-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee; background: #fafafa; border-radius: 6px 6px 0 0; flex-wrap: wrap; }
.unesco-detail-header .unesco-filter-back { background: none; border: 1px solid #ddd; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; color: #555; font-size: 0.85rem; flex-shrink: 0; }
.unesco-detail-header .unesco-filter-back:hover { background: #f0f0f0; }
#unesco-detail-title { font-weight: 700; font-size: 1rem; }
#unesco-detail-progress { font-size: 0.82rem; color: #666; margin-left: auto; }
.unesco-complete { color: #b8860b; font-weight: 700; }
#unesco-countries-view .stat-detail-list li a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.75rem; border-radius: 6px; transition: background 0.15s;
}
#unesco-countries-view .stat-detail-list li a:hover { background: #f5f5f5; }
#unesco-countries-view .stat-detail-list li a .stat-detail-trip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#unesco-detail-view .stat-detail-list li a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.75rem; border-radius: 6px;
}
#unesco-detail-view .stat-detail-list li a:hover { background: #f5f5f5; }
#unesco-detail-view .stat-detail-list li a .country-flag-icon { margin-top: 2px; flex-shrink: 0; }
#unesco-detail-view .stat-detail-list li a .stat-detail-trip-title { flex: 1; min-width: 0; font-weight: 600; word-break: break-word; }
#unesco-detail-view .stat-detail-list li a .stat-detail-count { font-size: 0.75rem; color: #888; flex-shrink: 0; }
#unesco-detail-view .stat-detail-list li a .unesco-visit-date { font-size: 0.72rem; color: #999; flex-shrink: 0; }
@media (max-width: 600px) {
    .stat-popup-header { padding: 0.75rem 0.85rem; }
    .stat-popup-header h3 { font-size: 0.92rem; }
    #unesco-countries-view .stat-detail-list li a { flex-wrap: nowrap; gap: 0.25rem; padding: 0.45rem 0.5rem; }
    #unesco-countries-view .stat-detail-list li a .stat-detail-trip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .unesco-visited-badge .badge-full, .unesco-remaining-badge .badge-full, .unesco-complete-badge .badge-full { display: none; }
    .unesco-visited-badge .badge-short, .unesco-remaining-badge .badge-short, .unesco-complete-badge .badge-short { display: inline; }
    .unesco-visited-badge, .unesco-remaining-badge, .unesco-complete-badge { font-size: 0.62rem; }
    .stat-detail-summary { font-size: 0.78rem; padding: 0 0.5rem; }
    .unesco-detail-header { gap: 0.35rem; padding: 0.4rem 0.5rem; }
    #unesco-detail-title { font-size: 0.9rem; }
    #unesco-detail-progress { font-size: 0.75rem; width: 100%; margin-left: 0; padding-left: 2.2rem; }
    #unesco-detail-view .stat-detail-list li a { padding: 0.5rem; gap: 0.3rem; flex-wrap: wrap; }
}
.unesco-filter-active { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; flex-wrap: wrap; }
.unesco-filter-back { background: none; border: 1.5px solid #d4c9a8; color: #7a6c3a; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: all 0.2s; flex-shrink: 0; }
.unesco-filter-back:hover { background: #fdf4e3; border-color: #b8860b; color: #b8860b; }
#unesco-filter-label { font-weight: 700; font-size: 0.95rem; color: #333; }
.unesco-filter-progress { font-size: 0.82rem; color: #666; }
.unesco-missing { color: #b8860b; font-weight: 600; }
.unesco-site-flag:hover { box-shadow: 0 0 0 2px #b8860b; border-radius: 2px; }
@media (max-width: 600px) {
    .stat-detail-list li a { flex-wrap: wrap; gap: 0.3rem; }
    .country-user-badge { font-size: 0.6rem; padding: 0.12rem 0.4rem; }
}
.stat-detail-arrow {
    color: var(--gray-300);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.stat-popup-body {
    overflow-y: auto;
    flex: 1;
}
.stat-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat-detail-list li + li {
    border-top: 1px solid var(--gray-50);
}
.stat-detail-list li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: background 0.15s;
    font-size: 0.88rem;
}
.stat-detail-list li a:hover {
    background: var(--gray-50);
}
.stat-detail-list li a i {
    color: var(--primary);
    font-size: 0.85rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}
.stat-detail-trip-title {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-detail-trip-dates {
    font-size: 0.78rem;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.stat-detail-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.stat-detail-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.88rem;
    margin: 0;
}

.dashboard-section { margin-bottom: 1rem; }

/* Trips Grid */
/* View toggle */
/* In-tab view toggle buttons */
.tab-view-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: 0.25;
    margin: 0 0.15rem 0 auto;
    flex-shrink: 0;
}
.tab-view-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    font-size: 0.8rem;
    padding: 0.15rem 0.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.tab-view-btn i { color: inherit; }
.tab-view-btn:hover { opacity: 1; }
.tab-view-btn:focus,
.tab-view-btn:focus-visible,
.tab-view-btn:active { outline: none; box-shadow: none; border-color: transparent; }
.tab-view-btn.active { opacity: 1; background: rgba(255,255,255,0.22); color: inherit; border: 1.5px solid #ff6b35; }

.trips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* List view mode */
.trips-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.trips-grid.list-view .trip-card {
    display: grid;
    grid-template-columns: 64px 1fr auto 44px;
    grid-template-rows: auto auto auto;
    min-height: 72px;
    padding: 0;
    overflow: hidden;
    position: relative;
    align-content: center;
}
.trips-grid.list-view .trip-card:hover { transform: none; }
.trips-grid.list-view .trip-card .trip-card-cover-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
}
.trips-grid.list-view .trip-card .trip-card-cover {
    height: 100%;
    min-height: 72px;
    margin: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
.trips-grid.list-view .trip-card .trip-fav-star {
    top: 3px; right: 3px; width: 18px; height: 18px; font-size: 0.55rem;
}
.trips-grid.list-view .trip-card h3 {
    grid-column: 2;
    grid-row: 1;
    padding: 0.3rem 0.65rem 0;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    align-self: center;
}
.trips-grid.list-view .trip-card .trip-dates {
    grid-column: 2;
    grid-row: 2;
    padding: 0.05rem 0.65rem 0;
    margin: 0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    align-self: center;
}
.trips-grid.list-view .trip-card .trip-card-header {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
    padding: 0.05rem 0.65rem 0.3rem;
    margin-bottom: 0;
    align-self: start;
    position: static;
}
.trips-grid.list-view .trip-card .trip-card-header .badge,
.trips-grid.list-view .trip-card .trip-card-header [class*="badge-"] {
    font-size: 0.6rem; padding: 0.12rem 0.4rem;
}
.trips-grid.list-view .trip-card .trip-memory-prompt { display: none; }
/* List view: stats + share column */
.trips-grid.list-view .trip-card .trip-card-actions {
    grid-column: 3;
    grid-row: 1 / -1;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-top: none;
    border-left: 1px solid var(--gray-100);
    align-self: stretch;
}
/* Stats + share: centred */
.trips-grid.list-view .trip-card .trip-card-actions .trip-card-travelers,
.trips-grid.list-view .trip-card .trip-card-actions .trip-card-photos,
.trips-grid.list-view .trip-card .trip-card-actions .trip-card-days,
.trips-grid.list-view .trip-card .trip-card-actions .trip-card-share-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.18rem;
    font-size: 0.67rem; line-height: 1; width: 100%; text-align: center;
}
/* Map button: absolute relative to .trip-card, fills full right column */
.trips-grid.list-view .trip-card .trip-card-actions .btn-sm {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    border: none;
    border-left: 1px solid rgba(37,99,235,0.3);
    background: var(--primary);
    color: #fff;
    padding: 0;
    margin: 0;
}
.trips-grid.list-view .trip-card .trip-card-actions .btn-sm:hover {
    background: var(--primary-dark, #1d4ed8);
    color: #fff;
}

.trip-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.trip-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trip-card-active { border: 2px solid var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }

/* ── Special Event Cards ── */
.event-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.event-card-cover-wrap {
    position: relative;
}
.event-card-cover {
    position: relative;
    height: 185px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.ev-fav-star {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
    color: #9ca3af;
}
.ev-fav-star i {
    font-size: 1.1rem;
    color: #9ca3af;
    transition: color 0.25s, transform 0.25s;
}
.ev-fav-star:hover { background: rgba(0,0,0,0.6); color: #7c3aed; }
.ev-fav-star:hover i { color: #7c3aed; transform: scale(1.15); }
.ev-fav-star.is-favourite i { color: #fff; }
.ev-fav-star.is-favourite { background: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,0.5); color: #fff; }
.ev-share-btn {
    background: none; cursor: pointer;
    color: var(--ev-card-theme, #7c3aed);
    font-size: .85rem; padding: .22rem .52rem;
    border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; gap: .28rem;
    transition: background .15s, transform .15s, border-color .15s;
    flex-shrink: 0; line-height: 1; font-weight: 600;
    border: 1.5px solid color-mix(in srgb, var(--ev-card-theme, #7c3aed) 55%, transparent);
}
.ev-share-label {
    font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}
.ev-share-btn:hover { background: color-mix(in srgb, var(--ev-card-theme,#7c3aed) 12%, transparent); transform: scale(1.12); }
.ev-share-count {
    font-size: .65rem; font-weight: 700;
    color: var(--ev-card-theme, #7c3aed);
    line-height: 1; pointer-events: none;
}
.event-card-cover-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .55;
}
.ec-img--no-color { opacity: 1 !important; }
.event-card-cover-body {
    position: relative; padding: .65rem .85rem; color: var(--ev-text, #fff); width: 100%;
}
.event-card-cover-body.ec-label-bg {
    background: var(--ev-label-bg, rgba(0,0,0,.44)); backdrop-filter: blur(4px); border-radius: 0 0 6px 6px;
}
.event-card-cover-title {
    font-size: 1rem; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
    max-width: 100%;
}
.event-card-secret-stripe {
    position: absolute; top: 0; left: 0; right: 0;
    background: repeating-linear-gradient(
        -45deg, #ef4444 0px, #ef4444 8px, #dc2626 8px, #dc2626 16px
    );
    height: 6px;
}

.event-card-body {
    padding: .7rem .85rem .85rem;
    display: flex; flex-direction: column; gap: .3rem; flex: 1;
}
.event-card-date {
    font-size: .8rem; color: var(--gray-500);
    display: flex; align-items: center; gap: .35rem;
}
.event-card-date i { width: .9rem; text-align: center; }
.event-card-category {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #f3f0ff; color: #7c3aed;
    border-radius: 20px; padding: .1rem .6rem;
    font-size: .75rem; font-weight: 600;
    align-self: flex-start;
}
.event-card-secret-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #ef4444; color: #fff;
    border-radius: 20px; padding: .1rem .55rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    align-self: flex-start;
}
.event-card-footer {
    padding: .55rem .85rem;
    border-top: 2px solid color-mix(in srgb, var(--ev-card-theme, #7c3aed) 30%, #e5e7eb);
    display: grid; grid-template-columns: 1fr minmax(1.6rem, auto);
    align-items: center; gap: .5rem;
    font-size: .78rem; color: var(--gray-500);
}
.event-card-footer .ev-share-btn { justify-self: end; }
.event-card-configure {
    display: inline-flex; align-items: center; gap: .3rem;
    color: #7c3aed; font-weight: 600; font-size: .78rem;
}
.event-card-configure:hover { text-decoration: underline; }
/* ── RSVP status pills ── */
.ev-rsvp-pill {
    display: inline-flex; align-items: center;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    padding: .18rem .5rem; border-radius: 20px; white-space: nowrap;
    line-height: 1.4;
}
.ev-rsvp-hosting    { background: #ede9fe; color: #6d28d9; }
.ev-rsvp-cohosting  { background: #dbeafe; color: #1d4ed8; }
.ev-rsvp-coming     { background: #dcfce7; color: #15803d; }
.ev-rsvp-maybe      { background: #fef9c3; color: #a16207; }
.ev-rsvp-not-coming { background: #fee2e2; color: #b91c1c; }
.ev-rsvp-pending    { background: #f3f4f6; color: #6b7280; }

.ev-card-countdown {
    position: absolute; top: .5rem; left: .5rem; z-index: 3;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    color: #fff; font-size: .62rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 20px;
    line-height: 1.4; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Events grid — same columns as .trips-grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
@media (min-width: 1024px) {
    .events-grid:not(.list-view) { grid-template-columns: repeat(4, 1fr); }
}
.events-grid.list-view { display: flex; flex-direction: column; gap: 0.35rem; }
.events-grid.list-view .event-card { flex-direction: row; min-height: 80px; }
.events-grid.list-view .event-card:hover { transform: none; }
.events-grid.list-view .event-card-cover-wrap { width: 80px; flex-shrink: 0; }
.events-grid.list-view .event-card-cover { height: 100%; min-height: 80px; border-radius: var(--radius) 0 0 var(--radius); }
.events-grid.list-view .event-card-cover-body { padding: .3rem .5rem; }
.events-grid.list-view .event-card-cover-title { font-size: .78rem; -webkit-line-clamp: 3; }
.events-grid.list-view .ev-card-countdown { font-size: .58rem; padding: .12rem .3rem; }
.events-grid.list-view .event-card-body { padding: .4rem .65rem; gap: .1rem; }
.events-grid.list-view .event-card-date { font-size: .72rem; }
.events-grid.list-view .event-card-category { font-size: .65rem; padding: .05rem .4rem; }
.events-grid.list-view .event-card-footer { border-top: none; border-left: 1px solid color-mix(in srgb, var(--ev-card-theme,#7c3aed) 30%,#e5e7eb); padding: .4rem .65rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: .2rem; flex-shrink: 0; min-width: 110px; }
.events-grid.list-view .ev-fav-star { width: 22px; height: 22px; top: 4px; right: 4px; }
.events-grid.list-view .ev-fav-star i { font-size: .65rem; }

.trip-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.trip-card h3 a { color: var(--gray-900); }
.trip-card h3 a:hover { color: var(--primary); }

.trip-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.trip-type-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.trip-type-memory { background: #dbeafe; color: #1e40af; }
.trip-type-planned { background: #d1fae5; color: #065f46; }
.trip-type-group { background: #fef3c7; color: #92400e; }

.badge-public { background: linear-gradient(135deg, #bfdbfe, #93c5fd); color: #1e3a5f; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(59,130,246,0.2); height: auto; min-width: auto; }
.badge-public i { font-size: 0.68rem; }

.trip-destination, .trip-dates {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.trip-card-cover-wrap {
    position: relative;
}
.trip-countdown-circle {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.25);
    z-index: 5;
    border: 2px solid #fff;
    line-height: 1;
    animation: countdown-pulse 3s ease-in-out infinite;
}
.trip-countdown-circle .countdown-prefix {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 0px;
}
.trip-countdown-circle .countdown-number {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.trip-countdown-circle .countdown-label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-top: 1px;
}
.trip-countdown-circle.countdown-soon {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.15);
}
.trip-countdown-circle.countdown-near {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
}
@keyframes countdown-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.trip-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.trip-card-fav-mem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    padding: 0.7rem 1rem 0.8rem;
    border-radius: 12px;
}
.fav-mem-title {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.fav-mem-buttons {
    display: flex;
    gap: 0.5rem;
}
.btn-fav {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #ef4444;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.btn-fav:hover { background: linear-gradient(135deg, #fecaca, #fca5a5); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.35); }
.btn-mem {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #3730a3;
    border: 1px solid #818cf8;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.btn-mem:hover { background: linear-gradient(135deg, #c7d2fe, #a5b4fc); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(129,140,248,0.4); }
.time-ampm-prev { display: block; font-size: 0.75rem; font-weight: 600; color: #2563eb; min-height: 1.1rem; margin-top: 0.18rem; letter-spacing: 0.01em; }
.trip-memory-prompt { padding: 0.5rem 1rem 0; display: flex; }
.trip-memory-prompt .btn-mem { width: 100%; font-size: 0.8rem; padding: 0.4rem 0.8rem; }
.trip-card-fav-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    background: rgba(254, 226, 226, 0.95);
    color: #991b1b;
    border: 1px solid #ef4444;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    z-index: 5;
    backdrop-filter: blur(4px);
}
.trip-card-fav-badge i { color: #ef4444; }
.trip-fav-star {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
    color: #9ca3af;
}
.trip-fav-star i {
    font-size: 1.1rem;
    color: #9ca3af;
    transition: color 0.25s, transform 0.25s;
}
.trip-fav-star:hover { background: rgba(0,0,0,0.6); color: #ef4444; }
.trip-fav-star:hover i { color: #ef4444; transform: scale(1.15); }
.trip-fav-star.is-favourite i, .trip-fav-star.is-loved i { color: #fff; }
.trip-fav-star.is-favourite, .trip-fav-star.is-loved { background: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,0.5); color: #fff; }
.trip-love-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(239,68,68,0.88);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    animation: lovePop 0.3s ease;
}
@keyframes lovePop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1);   opacity: 1; }
}
.trip-love-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.trip-love-btn i { font-size: 0.85em; color: #9ca3af; transition: color 0.2s; }
.trip-love-btn:hover { border-color: #ef4444; color: #ef4444; }
.trip-love-btn:hover i { color: #ef4444; }
.trip-love-btn.is-loved { border-color: #ef4444; color: #ef4444; background: rgba(254,226,226,0.5); }
.trip-love-btn.is-loved i { color: #ef4444; }
.trip-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.trip-card-travelers {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    margin-left: auto;
}
.trip-card-photos {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.trip-card-photos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.trip-card-photos-btn:hover { background: #c7d2fe; color: #312e81; transform: scale(1.06); }
.trip-card-days {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.trip-card-shares {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fce4ec;
    color: #c62828;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.trip-days-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.dest-currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0 0.55rem;
    height: 1.5rem;
    border-radius: 5px;
    margin-left: 0.4rem;
    vertical-align: middle;
    border: 1px solid #a7f3d0;
    letter-spacing: 0.02em;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}
.dest-currency-badge i {
    font-size: 0.65rem;
    color: #10b981;
}
button.dest-currency-badge {
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s;
}
button.dest-currency-badge:hover {
    background: #d1fae5;
    box-shadow: 0 0 0 2px #6ee7b7;
}
.dest-sos-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fff1f2;
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.55rem;
    height: 1.5rem;
    border-radius: 5px;
    margin-left: 0.3rem;
    vertical-align: middle;
    border: 1px solid #fecaca;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}
.dest-sos-badge i { font-size: 0.65rem; color: #dc2626; }
.dest-sos-badge:hover {
    background: #ffe4e6;
    box-shadow: 0 0 0 2px #fca5a5;
}

/* ── Currency Converter Popup ───────────────────────── */
.fx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem 0.75rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-bottom: 1px solid #a7f3d0;
}
.fx-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fx-title i { color: #10b981; }
.fx-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.fx-close-btn:hover { background: #d1fae5; color: #065f46; }
.fx-body {
    padding: 1.1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.fx-loading {
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.fx-same-msg {
    font-size: 0.88rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.fx-rate-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
}
.fx-rate-base { font-size: 0.9rem; font-weight: 600; color: #374151; }
.fx-rate-eq   { font-size: 0.85rem; color: #9ca3af; }
.fx-rate-value { font-size: 1rem; font-weight: 700; color: #065f46; }
.fx-rate-value em { font-style: normal; font-size: 0.8rem; color: #6b7280; }
.fx-inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}
.fx-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}
.fx-input-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fx-input {
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.95rem;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
}
.fx-input:focus { border-color: #10b981; box-shadow: 0 0 0 2px #d1fae5; }
.fx-swap-arrow {
    font-size: 0.85rem;
    color: #9ca3af;
    padding-bottom: 0.5rem;
    flex-shrink: 0;
}
.fx-source {
    font-size: 0.72rem;
    color: #9ca3af;
    text-align: center;
    margin: 0;
}
.fx-source a { color: #10b981; text-decoration: none; }
.fx-source a:hover { text-decoration: underline; }

/* ── General Currency Converter (gc) ── */
.gc-selectors {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.85rem 1.1rem 0.7rem;
    border-bottom: 1px solid #f3f4f6;
}
.gc-selectors select {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.32rem 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    min-width: 0;
}
.gc-swap-btn {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
    font-size: 0.82rem;
    transition: background 0.15s;
}
.gc-swap-btn:hover { background: #e5e7eb; }
.gc-rate-info {
    min-height: 1.5rem;
    padding: 0.55rem 1.1rem 0;
    font-size: 0.82rem;
    color: #374151;
}
/* Converter button next to qb-add-btn */
.qb-fx-btn { color: #6366f1; }
.qb-fx-btn:hover { color: #4f46e5; background: #eef2ff; }

/* ── Day Plan ─────────────────────────────────────────────── */
.day-plan-section { margin-top: 0.5rem; }
.day-plan-body { padding: 0.75rem 1rem 1rem; }
.day-plan-day { margin-bottom: 1.25rem; }
.day-plan-day:last-child { margin-bottom: 0; }
.day-plan-date-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: #64748b;
    border-radius: 6px; margin-bottom: 0.6rem;
    font-size: 0.8125rem; color: #e2e8f0;
}
.day-plan-date-header strong { color: #fff; }
.day-plan-count { margin-left: auto; font-size: 0.75rem; color: #cbd5e1; }
.day-plan-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 0.25rem; }
.day-plan-entry {
    display: grid; grid-template-columns: 3.75rem 1.875rem 1fr;
    align-items: start; gap: 0; position: relative; padding: 0.35rem 0;
}
.day-plan-entry:not(:last-child)::after {
    content: ''; position: absolute;
    left: calc(3.75rem + 0.9375rem - 1px); top: 1.6rem; bottom: 0;
    width: 2px; background: var(--border, #e2e8f0);
}
.day-plan-time {
    font-size: 0.7rem; color: var(--text-secondary, #64748b);
    text-align: right; padding-right: 0.4rem; padding-top: 0.25rem;
    font-variant-numeric: tabular-nums; line-height: 1.3;
}
.day-plan-time-none { color: var(--text-muted, #94a3b8); }
.day-plan-dot {
    width: 1.875rem; height: 1.875rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1; margin-top: 0.05rem;
}
.day-plan-dot i { color: #fff; font-size: 0.65rem; }
.day-plan-entry-info { padding-left: 0.5rem; padding-top: 0.1rem; }
.day-plan-entry-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #1e293b); line-height: 1.3; }
.day-plan-entry-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
.day-plan-note { font-size: 0.725rem; color: var(--text-secondary, #64748b); }
.day-plan-date-unscheduled { background: var(--surface-secondary, #f1f5f9); opacity: 0.75; font-style: italic; }
.day-plan-entry-meal { opacity: 0.88; }
.dp-meal-badge { font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 10px; }
.dp-meal-breakfast { background: #fef3c7; color: #92400e; }
.dp-meal-lunch     { background: #d1fae5; color: #065f46; }
.dp-meal-dinner    { background: #ede9fe; color: #4c1d95; }
.dp-stay-ref { font-size: 0.68rem; color: var(--text-secondary, #64748b); }
.dp-meal-date { font-size: 0.68rem; color: var(--text-secondary, #64748b); font-weight: 500; }
.dp-time-end { font-size: 0.78rem; color: var(--text-secondary, #64748b); }
.dest-icon-dayplan { color: #0ea5e9; }
/* ─────────────────────────────────────────────────────────── */

.stops-section { margin-top: 0.5rem; }
.stops-body { padding: 0.75rem 1rem 0.4rem; }
.stops-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.stop-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.stop-card-body {
    flex: 1;
    min-width: 0;
}
.stop-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.stop-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.stop-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.4rem;
}
.stop-card-layout {
    display: flex;
    gap: 0;
}
.stop-thumb-wrap {
    flex-shrink: 0;
    width: 120px;
    align-self: stretch;
    position: relative;
    min-height: 90px;
    overflow: hidden;
}
.stop-thumb-wrap.stop-thumb-empty {
    background-image: url('/assets/images/stop-default.jpg');
    background-size: cover;
    background-position: center;
}
.stop-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 0;
}
.stop-card-info {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
}
.stop-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.25rem;
}
.stop-card-meta i { margin-right: 0.2rem; }
.stop-desc { font-style: italic; }
.stop-added-by { color: #94a3b8; }
.stop-card-body > .transport-section,
.stop-card-body > .food-section,
.stop-card-body > .activity-section {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.stop-edit-form, .stop-add-form {
    margin-top: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-search {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.filter-search input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

/* Pins */
.pins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.pin-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.pin-card:hover { box-shadow: var(--shadow-md); }

.pin-favorite { border-left: 3px solid var(--danger); }

.pin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pin-category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.pin-cat-hotel { background: #ede9fe; color: #5b21b6; }
.pin-cat-restaurant { background: #fef3c7; color: #92400e; }
.pin-cat-cafe { background: #fce7f3; color: #9d174d; }
.pin-cat-bar { background: #fef3c7; color: #78350f; }
.pin-cat-activity { background: #d1fae5; color: #065f46; }
.pin-cat-attraction { background: #dbeafe; color: #1e40af; }
.pin-cat-other { background: var(--gray-100); color: var(--gray-600); }

.pin-actions { display: flex; gap: 0.25rem; }

.pin-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.pin-address { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.25rem; }
.pin-date { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.5rem; }
.pin-notes { font-size: 0.8rem; color: var(--gray-600); margin-top: 0.5rem; padding: 0.5rem; background: var(--gray-50); border-radius: var(--radius-sm); }

.pin-rating {
    color: var(--accent);
    font-size: 0.8rem;
    margin-top: 0.375rem;
}

.pin-rating i { margin-right: 1px; }

/* Photos */
.pin-photos-section { margin-top: 0.75rem; border-top: 1px solid var(--gray-100); padding-top: 0.75rem; }

.photo-upload-form { margin-bottom: 0.5rem; }

.photo-upload-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.file-input {
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
}

.caption-input {
    padding: 0.375rem 0.5rem !important;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    width: 120px;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.photo-item {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}
.photo-clickable:hover {
    opacity: 0.85;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.lightbox-overlay.active {
    display: flex;
}
.lightbox-content {
    position: relative;
    max-width: 92vw;
    max-height: 90vh;
}
.lightbox-body {
    display: flex;
    gap: 0;
    max-height: 85vh;
}
.lightbox-img-wrap {
    flex: 1;
    display: flex;
    position: relative;
    align-items: stretch;
    min-height: 0;
}
.lightbox-content img {
    max-width: 60vw;
    width: auto;
    height: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    padding: 1.5rem 0.75rem 0.5rem;
    font-size: 0.9rem;
    border-radius: 0 0 0 var(--radius);
    pointer-events: none;
}
/* Lightbox photo meta bar (city · place · date) */
.lightbox-meta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    pointer-events: none;
    z-index: 3;
    border-radius: var(--radius) 0 0 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lb-meta-city { font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.lb-meta-city i { font-size: 0.7rem; opacity: 0.85; }
.lb-meta-badge {
    background: rgba(59,130,246,0.85);
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lb-meta-place { opacity: 0.9; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; }
.lb-meta-place i { font-size: 0.7rem; flex-shrink: 0; }
.lb-meta-date { opacity: 0.8; display: flex; align-items: center; gap: 0.3rem; }
.lb-meta-date i { font-size: 0.7rem; }
.lb-meta-sep { opacity: 0.45; padding: 0 0.1rem; }
.lb-meta-uploader { opacity: 0.8; display: flex; align-items: center; gap: 0.3rem; font-style: italic; }
.lb-meta-uploader i { font-size: 0.7rem; }
.lightbox-expand-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    z-index: 10;
}
.lightbox-expand-btn:hover { opacity: 1; background: rgba(0,0,0,0.7); }
.lightbox-action-btns {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.lightbox-delete-btn,
.lightbox-reel-pick-btn,
.lightbox-archive-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.lightbox-delete-btn { background: rgba(180,30,30,0.75); color: #fff; }
.lightbox-delete-btn:hover { opacity: 1; background: rgba(200,20,20,0.95); }
.lightbox-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lightbox-reel-pick-btn { background: rgba(100,100,100,0.75); color: #eee; }
.lightbox-reel-pick-btn:hover { opacity: 1; background: rgba(37,99,235,0.95); color: #fff; }
.lightbox-reel-pick-btn.active { background: #2563eb; color: #fff; opacity: 1; }
.lightbox-reel-pick-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lightbox-archive-btn { background: rgba(100,100,100,0.75); color: #eee; }
.lightbox-archive-btn:hover { opacity: 1; background: rgba(180,70,30,0.9); color: #fff; }
.lightbox-archive-btn.active { background: #b44626; color: #fff; opacity: 1; }
.lightbox-archive-btn.active:disabled { background: #b44626; color: #fff; opacity: 1; cursor: default; pointer-events: none; }
.lightbox-archive-btn:disabled:not(.active) { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.places-filter-ctrl { background: none !important; border: none !important; box-shadow: none !important; }
.places-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 6px;
    background: rgba(255,255,255,0.96);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    backdrop-filter: blur(6px);
    max-width: calc(100vw - 18px);
}
@media (max-width: 700px) {
    .places-filter-bar { gap: 4px; padding: 4px 5px; }
    .pfb-btn { padding: 5px 9px !important; font-size: 0.76rem !important; gap: 0 !important; }
    .pfb-label { display: none; }
    .pfb-sep { height: 14px; }
}
.pfb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1.5px solid transparent;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    background: #f3f4f6;
    color: #9ca3af;
    filter: grayscale(0.5);
    opacity: 0.7;
    white-space: nowrap;
}
.pfb-btn:hover { opacity: 1; }
.pfb-btn.pfb-active { opacity: 1; filter: none; }
.pfb-stay.pfb-active     { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.pfb-food.pfb-active     { background: #fff7ed; color: #f97316; border-color: #fed7aa; }
.pfb-shopping.pfb-active { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }
.pfb-activity.pfb-active { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.pfb-wish.pfb-active     { background: #fffbeb; color: #f59e0b; border-color: #fde68a; }

/* Calendar-day filter button + separator */
.pfb-sep {
    width: 1px; height: 18px;
    background: #e2e8f0;
    align-self: center;
    flex-shrink: 0;
}
.pfb-cal-btn { padding: 5px 9px !important; }
.pfb-cal-btn.pfb-cal-open,
.pfb-cal-btn.pfb-cal-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    opacity: 1 !important;
    filter: none !important;
}
.pfb-cal-btn.pfb-cal-active {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}

/* Date picker panel */
.places-date-bar {
    flex-direction: column;
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
    padding: 5px;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    min-width: 180px;
}
.pdb-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}
.pdb-chip:hover { background: #eff6ff; border-color: #bfdbfe; }
.pdb-chip.pdb-active { background: var(--primary); border-color: var(--primary); }
.pdb-day {
    font-size: 0.65rem; font-weight: 600;
    color: #94a3b8; width: 26px; flex-shrink: 0;
}
.pdb-num {
    font-size: 0.88rem; font-weight: 800;
    color: #1e293b; width: 20px; text-align: right; flex-shrink: 0;
}
.pdb-mon { font-size: 0.72rem; font-weight: 600; color: #64748b; }
.pdb-count {
    font-size: 0.65rem;
    font-weight: 800;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.5;
    flex-shrink: 0;
}
.pdb-chip.pdb-active .pdb-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.pdb-city {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    margin-left: auto;
    padding-left: 4px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pdb-chip.pdb-active .pdb-day { color: rgba(255,255,255,0.65); }
.pdb-chip.pdb-active .pdb-num,
.pdb-chip.pdb-active .pdb-mon { color: #fff; }
.pdb-chip.pdb-active .pdb-city { color: rgba(255,255,255,0.9); }

/* Vertically center the left-side map controls (zoom + destination) */
#places-map .leaflet-top.leaflet-left,
#geography-map .leaflet-top.leaflet-left {
    top: 50% !important;
    transform: translateY(-50%);
    margin-top: 0 !important;
}
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: opacity 0.15s, background 0.15s;
    z-index: 10;
}
.lightbox-nav-btn:hover { background: rgba(0,0,0,0.75); }
.lightbox-prev-btn { left: 10px; }
.lightbox-next-btn { right: 10px; }
.lightbox-photo-counter {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
}
.lightbox-fs-close-btn {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
    z-index: 100;
}
.lightbox-fs-close-btn:hover { opacity: 1; background: rgba(200,0,0,0.75); }
#lightbox-img-wrap.lb-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10001 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    flex: none !important;
}
#lightbox-img-wrap.lb-expanded #lightbox-img {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#lightbox-img-wrap.lb-expanded .lightbox-fs-close-btn {
    display: flex;
    z-index: 10002;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    background: rgba(0,0,0,0.65);
    opacity: 1;
}
#lightbox-img-wrap.lb-expanded .lightbox-nav-btn { z-index: 10002; }
#lightbox-img-wrap.lb-expanded .lightbox-expand-btn { z-index: 10002; display: none; }
#lightbox-img-wrap.lb-expanded .lightbox-photo-counter { z-index: 10002; }
/* Mobile-only overlay elements: hidden on desktop */
.lb-mob-bar    { display: none; }
.lb-mob-cmt-bd { display: none; }
/* ── Mobile: true full-screen lightbox ─────────────────────────────────── */
@media (max-width: 768px) {
    /* Anchor content directly to viewport — no flex-chain math needed */
    .lightbox-content {
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #000;
    }
    .lightbox-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-direction: column;
        position: relative;
    }
    /* img-wrap fills all remaining space */
    .lightbox-img-wrap {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden;
        background: #000;
        position: relative !important;
    }
    /* Photo fills its container absolutely — no reliance on height:100% flex chain */
    #lightbox-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Hide desktop-only controls — replaced by mobile bottom bar */
    .lightbox-expand-btn    { display: none !important; }
    .lightbox-fs-close-btn  { display: none !important; }
    .lightbox-action-btns   { display: none !important; }
    .lightbox-photo-counter { display: none !important; }
    /* Comment panel: slide-up sheet (uses dvh so keyboard doesn't clip it) */
    #lightbox-comments {
        display: flex !important;   /* override inline style="display:none" */
        position: absolute; bottom: 0; left: 0; right: 0;
        width: auto; min-width: 0; height: 62dvh; max-height: 62dvh;
        border-radius: 18px 18px 0 0;
        transform: translateY(104%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
        z-index: 20; box-shadow: 0 -6px 32px rgba(0,0,0,.32);
        flex-direction: column; overflow: hidden; background: #fff;
        align-self: auto;
    }
    #lightbox-comments.mob-open { transform: translateY(0); }
    /* Drag-handle indicator + close button in panel header */
    .lightbox-comments h4 { position: relative; padding-top: 1.1rem; }
    .lightbox-comments h4::before {
        content: ''; display: block; position: absolute;
        top: 6px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; background: #d1d5db; border-radius: 2px;
    }
    .lightbox-mobile-close { display: flex; margin-left: auto; }
    /* Comments list: flex-grow + definite height enables scrolling */
    .lightbox-comments-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
    .lightbox-emoji-bar    { flex-shrink: 0; }
    .lightbox-comment-form { flex-shrink: 0; }
    /* Backdrop (shown when comment panel is open) */
    .lb-mob-cmt-bd { display: none; position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 19; }
    .lb-mob-cmt-bd.mob-open { display: block; }
    /* Mobile bottom bar */
    .lb-mob-bar {
        display: flex; position: absolute; bottom: 0; left: 0; right: 0;
        height: 52px;
        background: linear-gradient(transparent, rgba(0,0,0,.65));
        align-items: center; justify-content: space-between;
        padding: 0 .75rem; z-index: 10;
    }
    .lb-mob-bar-left   { display: flex; align-items: center; gap: .35rem; min-width: 48px; }
    .lb-mob-bar-center { font-size: .8rem; color: #fff; font-weight: 600; opacity: .9; }
    .lb-mob-bar-right  { display: flex; align-items: center; justify-content: flex-end; min-width: 48px; }
    .lb-mob-act-btn {
        background: rgba(0,0,0,.4); border: none; color: #fff;
        width: 30px; height: 30px; border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: .78rem;
    }
    .lb-mob-act-btn.del    { background: rgba(180,30,30,.65); }
    .lb-mob-act-btn.active { background: rgba(37,99,235,.85); }
    .lb-mob-cmt-btn {
        background: none; border: none; color: #fff;
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; cursor: pointer; padding: .2rem .3rem; gap: .1rem;
    }
    .lb-mob-cmt-btn i   { font-size: 1.3rem; line-height: 1; }
    .lb-mob-cmt-cnt { font-size: .62rem; line-height: 1; min-height: .8em; }
    /* Reactions bar: allow horizontal scroll on narrow screens */
    #lightbox-reactions-bar { overflow-x: auto; flex-shrink: 0; padding-bottom: .2rem; }
}
.lightbox-comments {
    width: 360px;
    min-width: 360px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 0 var(--radius) var(--radius) 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow: visible;
}
.lightbox-comments h4 {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lightbox-mobile-close {
    display: none;
    margin-left: auto;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lightbox-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}
.img-comment {
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f0f0f0;
}
.img-comment:last-child { border-bottom: none; }
.img-comment-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 0.2rem;
}
.img-comment-header strong { color: var(--dark); font-size: 0.82rem; }
.img-comment-time { font-size: 0.7rem; color: #999; margin-left: auto; }
.img-comment-del {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.7rem;
}
.img-comment-del:hover { color: var(--danger); }
.img-comment-body { font-size: 0.85rem; color: var(--dark); line-height: 1.4; word-break: break-word; }
.lightbox-comment-form {
    position: relative;
    padding: 0.5rem;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}
.lightbox-comment-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #ddd;
    border-radius: 14px;
    padding: 0.6rem 3rem 0.6rem 0.85rem;
    font-size: 0.85rem;
    outline: none;
    resize: none;
    overflow-y: hidden;
    min-height: 80px;
    line-height: 1.5;
    font-family: inherit;
    transition: border-color .15s;
}
.lightbox-comment-textarea:focus { border-color: var(--primary); }
.lightbox-comment-form button {
    position: absolute;
    right: 0.75rem;
    bottom: 0.85rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 2px 6px rgba(124,58,237,.35);
}
.lightbox-comment-form button:hover { background: var(--primary-dark); }
.lightbox-emoji-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid #eee;
    align-items: center;
    position: relative;
}
.lb-emoji-more {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--primary, #7c3aed);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .12s, transform .12s, box-shadow .12s;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(124,58,237,.55);
}
.lb-emoji-more:hover { opacity: .9; transform: scale(1.1); box-shadow: 0 3px 14px rgba(124,58,237,.7); }
.lb-emoji-more.open  { opacity: .8; transform: scale(.95); }
.lb-emoji-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    padding: .5rem .55rem;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
}
.lb-emoji-popup.open { display: block; }
.lb-ep-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: .3rem 0 .15rem;
}
.lb-ep-label:first-child { margin-top: 0; }
.lb-ep-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: .15rem;
}
.lb-ep-row span {
    font-size: 1.15rem;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
    transition: background .12s, transform .12s;
    line-height: 1;
}
.lb-ep-row span:hover { background: #f0f0f0; transform: scale(1.22); }
.emoji-pick {
    font-size: 1.15rem;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.emoji-pick:hover { background: #f0f0f0; transform: scale(1.25); }
.no-comments { text-align: center; color: #aaa; font-size: 0.82rem; padding: 1.5rem 0; }
.loading-sm { text-align: center; color: #aaa; font-size: 0.82rem; padding: 1rem 0; }
/* ── Photo Emoji Reactions ── */
.lb-reactions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0.5rem 0.75rem 0.35rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    min-height: 36px;
}
.lb-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background .15s, border-color .15s, transform .12s;
    user-select: none;
}
.lb-reaction-btn:hover { background: #eff6ff; border-color: #93c5fd; transform: scale(1.08); }
.lb-reaction-btn.active { background: #dbeafe; border-color: #3b82f6; }
.lb-reaction-btn .lb-react-count { font-size: 0.72rem; font-weight: 700; color: #374151; }
.lb-reaction-btn.active .lb-react-count { color: #1d4ed8; }
.lb-reaction-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 50%;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
    transition: background .15s, border-color .15s;
}
.lb-reaction-add:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.lb-reaction-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 220px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.lb-react-pick {
    font-size: 1.3rem;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 6px;
    transition: background .12s, transform .12s;
}
.lb-react-pick:hover { background: #f0f0f0; transform: scale(1.2); }
@media (max-width: 768px) {
    .lightbox-overlay { align-items: center; }
    .lightbox-content { max-width: 98vw; width: 98vw; max-height: 88vh; display: flex; flex-direction: column; overflow: visible; position: relative; }
    .lightbox-body { flex-direction: column; overflow: hidden; height: 88vh; max-height: 88vh; border-radius: var(--radius); }
    .lightbox-img-wrap { flex: 0 0 42vh; height: 42vh; max-height: 42vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; border-radius: var(--radius) var(--radius) 0 0; }
    .lightbox-content img { max-width: 98vw; max-height: 42vh; width: auto; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
    .lightbox-comments { width: 100%; flex: 1 1 0; min-height: 0; overflow-y: auto; border-radius: 0 0 var(--radius) var(--radius); -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
    .lightbox-comments-list { flex: 1; overflow-y: auto; min-height: 0; max-height: none; }
    .lightbox-emoji-bar { flex-shrink: 0; gap: 1px; padding: 0.2rem 0.4rem; flex-wrap: nowrap; }
    .emoji-pick { font-size: 1rem; padding: 1px 2px; }
    .lightbox-comment-form { flex-shrink: 0; padding: 0.35rem 0.4rem; }
    .lightbox-nav-btn { width: 34px; height: 34px; font-size: 0.85rem; top: 21vh; }
    .lightbox-prev-btn { left: 4px; }
    .lightbox-next-btn { right: 4px; }
    .lightbox-caption { display: none; }
    .lightbox-mobile-close { display: none; }
}
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 15;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close:hover {
    opacity: 1;
    background: rgba(180, 0, 0, 0.75);
}

.photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 0.25rem 0.375rem;
    font-size: 0.65rem;
}

.photo-delete { position: absolute; top: 0; right: 0; }

/* Destination Icons Row */
.dest-icons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.dest-icons-break {
    flex: 0 0 100%;
    height: 0;
    border-top: 1px dashed var(--gray-200);
    margin: 0.1rem 0;
}

/* Weather Forecast */
/* ── Emergency Numbers Modal ─────────────────────────────── */
.em-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.em-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: emModalIn 0.18s ease;
}
@keyframes emModalIn {
    from { transform: scale(0.93); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.em-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #dc2626;
    color: #fff;
    padding: 0.8rem 1rem;
}
.em-modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.em-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.em-modal-close:hover { opacity: 1; }
.em-modal-body {
    padding: 0.85rem 1rem 0.9rem;
}
.em-general {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    margin-bottom: 0.5rem;
}
.em-general-label {
    font-size: 0.75rem;
    font-weight: 600;
    flex: 1;
}
.em-number-general {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.em-number-general:hover { text-decoration: underline; }
.em-grid {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.em-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    min-width: 70px;
    padding: 0.4rem 0.3rem;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.15s;
    border: 1px solid transparent;
}
.em-item:hover { opacity: 0.82; }
.em-item i { font-size: 1rem; }
.em-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.em-num {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.em-police    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.em-ambulance { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.em-fire      { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.em-extra {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.em-extra span {
    font-size: 0.72rem;
    color: var(--gray-500);
}
.em-disclaimer {
    margin-top: 0.45rem;
    font-size: 0.67rem;
    color: var(--gray-400);
    line-height: 1.4;
}
.em-disclaimer i { margin-right: 0.2rem; color: var(--gray-300); }
/* ── End Emergency Numbers Panel ─────────────────────────── */

.weather-forecast {
    margin: 0.4rem 0 0.2rem;
}
.weather-loading, .weather-unavailable {
    font-size: 0.78rem;
    color: var(--gray-400);
    padding: 0.3rem 0;
}
.weather-loading i, .weather-unavailable i {
    margin-right: 0.3rem;
}
.weather-header {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 0.3rem;
}
.weather-header i {
    color: #f59e0b;
    margin-right: 0.25rem;
}
.weather-days {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}
.weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 0.25rem 0.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--radius-sm);
    border: 1px solid #bae6fd;
    gap: 0.1rem;
    flex-shrink: 0;
}
.weather-day-name {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
}
.weather-day-date {
    font-size: 0.55rem;
    color: var(--gray-400);
}
.weather-day-icon {
    font-size: 0.85rem;
    color: #f59e0b;
    margin: 0.05rem 0;
}
.weather-day-icon.fa-cloud-rain,
.weather-day-icon.fa-cloud-showers-heavy {
    color: #3b82f6;
}
.weather-day-icon.fa-snowflake {
    color: #93c5fd;
}
.weather-day-icon.fa-bolt {
    color: #8b5cf6;
}
.weather-day-icon.fa-smog {
    color: #9ca3af;
}
.weather-day-icon.fa-sun {
    color: #f59e0b;
}
.weather-day-icon.fa-cloud-sun {
    color: #fbbf24;
}
.weather-day-temps {
    font-size: 0.65rem;
    display: flex;
    gap: 0.2rem;
}
.weather-hi {
    font-weight: 700;
    color: var(--gray-700);
}
.weather-lo {
    color: var(--gray-400);
}

.item-food, .item-activity { position: relative; }
.food-vote-box {
    flex-basis: 100%;
    order: 4;
    background: #f8fafc;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.food-vote-title {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.food-vote-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.food-vote-btn {
    background: var(--white, #fff);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.55rem;
    color: var(--gray-400);
    font-size: 0.85rem;
    transition: all 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.food-vote-btn:hover { color: var(--primary); border-color: var(--primary); }
.food-vote-btn.voted { color: var(--primary); border-color: var(--primary); background: var(--primary-light, #eff6ff); }
.food-vote-down:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.food-vote-down.voted { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); background: #fef2f2; }
.food-vote-btn span, .food-vote-display span {
    font-size: 0.7rem;
    font-weight: 700;
}
.food-vote-display {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--gray-400);
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white, #fff);
}
/* Destination Icon Buttons (shared) */
.dest-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    text-decoration: none;
}
.dest-icon-btn.no-data { background: var(--gray-100); color: var(--gray-400); }
.dest-icon-btn.no-data:hover { background: var(--gray-200); color: var(--gray-600); }
/* Label toggle button */
.dest-labels-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    margin-right: 0.15rem;
}
.dest-labels-toggle:hover { background: var(--gray-200); color: var(--gray-600); }
.dest-labels-toggle.active { background: var(--primary); color: #fff; }
.dest-icons-row.dest-labels-collapsed .dest-icon-label { display: none !important; }
/* Destination sections dropdown */
.dest-icon-dd {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    min-width: 175px;
    padding: 0.3rem 0;
    overflow: hidden;
}
.dest-dd-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--gray-500, #6b7280);
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.dest-dd-item:hover { background: var(--gray-50, #f9fafb); color: var(--gray-800, #1f2937); }
.dest-dd-item.no-data { opacity: 0.45; }
.dest-dd-item.dest-icon-transport.has-data { color: #0369a1; }
.dest-dd-item.dest-icon-transport.has-data:hover { background: #e0f2fe; }
.dest-dd-item.dest-icon-stay.has-data { color: #e11d48; }
.dest-dd-item.dest-icon-stay.has-data:hover { background: #fff1f2; }
.dest-dd-item.dest-icon-food.has-data { color: #f97316; }
.dest-dd-item.dest-icon-food.has-data:hover { background: #fff7ed; }
.dest-dd-item.dest-icon-activity.has-data { color: #3b82f6; }
.dest-dd-item.dest-icon-activity.has-data:hover { background: #eff6ff; }
.dest-dd-item.dest-icon-stop.has-data { color: #92400e; }
.dest-dd-item.dest-icon-stop.has-data:hover { background: #fef3c7; }
.dest-dd-item.dest-icon-shopping.has-data { color: #7c3aed; }
.dest-dd-item.dest-icon-shopping.has-data:hover { background: #f5f3ff; }
.dest-icon-btn.dest-icon-transport.has-data { background: #e0f2fe; color: #0369a1; }
.dest-icon-btn.dest-icon-transport.has-data:hover,
.dest-icon-btn.dest-icon-transport.has-data.active { background: #0369a1; color: #fff; }
.dest-icon-btn.dest-icon-stay.has-data { background: #fff1f2; color: #e11d48; }
.dest-icon-btn.dest-icon-stay.has-data:hover,
.dest-icon-btn.dest-icon-stay.has-data.active { background: #e11d48; color: #fff; }
.dest-icon-btn.dest-icon-food.has-data { background: #fff7ed; color: #f97316; }
.dest-icon-btn.dest-icon-food.has-data:hover,
.dest-icon-btn.dest-icon-food.has-data.active { background: #f97316; color: #fff; }
.dest-icon-btn.dest-icon-shopping.has-data { background: #f5f3ff; color: #7c3aed; }
.dest-icon-btn.dest-icon-shopping.has-data:hover,
.dest-icon-btn.dest-icon-shopping.has-data.active { background: #7c3aed; color: #fff; }
.dest-icon-btn.dest-icon-activity.has-data { background: #eff6ff; color: #3b82f6; }
.dest-icon-btn.dest-icon-activity.has-data:hover,
.dest-icon-btn.dest-icon-activity.has-data.active { background: #3b82f6; color: #fff; }
.dest-icon-btn.dest-icon-stop.has-data { background: #fef3c7; color: #92400e; }
.dest-icon-btn.dest-icon-stop.has-data:hover,
.dest-icon-btn.dest-icon-stop.has-data.active { background: #f59e0b; color: #fff; }
.dest-icon-btn.dest-icon-photo.has-data { background: #e0e7ff; color: #3730a3; }
.dest-icon-btn.dest-icon-photo.has-data:hover,
.dest-icon-btn.dest-icon-photo.has-data.active { background: #3730a3; color: #fff; }
.dest-icon-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transport Section */
.transport-section {
    margin-top: 0.25rem;
    border-top: 1px solid var(--gray-100);
}
.transport-section:has(> .hidden),
.stay-section:has(> .hidden),
.food-section:has(> .hidden),
.activity-section:has(> .hidden),
.stops-section:has(> .hidden) { display: none; }
.transport-body {
    padding: 0.75rem 0;
}
.transport-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.section-title-inline {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem 0;
    padding: 0.45rem 0.75rem;
    background: var(--primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.section-title-inline i {
    color: #fff;
    font-size: 0.8rem;
}
.transport-card {
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.transport-card-shared {
    border: 1px dashed #93c5fd;
    opacity: 0.9;
}
.transport-card-shared .transport-card-header {
    background: #f0f9ff;
}
.transport-shared-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    color: #60a5fa;
    margin-left: 0.3rem;
    vertical-align: middle;
}
.transport-shared-from-label {
    font-size: 0.68rem;
    color: #60a5fa;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.transport-shared-from-label i { margin-right: 0.2rem; }
.transport-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
    background: #eef6ff;
    border-bottom: 1px solid var(--gray-100);
}
.transport-leg-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
}
.transport-leg-label i { margin-right: 0.3rem; font-size: 0.7rem; }
.transport-card-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.transport-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    color: var(--gray-400);
    font-size: 0.75rem;
    transition: all 0.15s;
}
.transport-btn-icon:hover { background: var(--gray-100); color: var(--gray-600); }
.transport-btn-icon.btn-icon-danger:hover { background: #fee2e2; color: var(--danger); }
.transport-btn-icon.qb-add-btn { padding-left: 0.55rem; padding-right: 0.55rem; }
.transport-details {
    background: #f0f9ff;
    border-radius: 0;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.transport-info-row {
    font-size: 0.85rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.transport-duration {
    display: inline-flex;
    align-items: center;
    background: var(--primary-light, #e8f0fe);
    color: var(--primary, #4285f4);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.3rem;
    white-space: nowrap;
}
.transport-form {
    margin-top: 0.5rem;
}
.transport-form .form-group {
    margin-bottom: 0.6rem;
}
.transport-form label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    display: block;
    color: var(--gray-600);
}
.transport-form select,
.transport-form input[type="text"],
.transport-form input[type="datetime-local"],
.transport-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
}

.move-dest-select {
    background-color: #f0f4ff;
    border-color: var(--primary) !important;
    font-weight: 500;
}
.move-dest-select option[selected] {
    font-weight: 600;
}

/* Stay Section */
.stay-icon-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stay-section {
    margin-top: 0.25rem;
    border-top: 1px solid var(--gray-100);
}
.stay-body {
    padding-bottom: 0.75rem;
}
.stay-details {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.stay-info-row {
    font-size: 0.85rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.stay-type-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--primary);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.stay-map {
    height: 90px;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    border: 1px solid var(--gray-200);
}
@media (min-width: 480px) {
    .stay-map { height: 130px; }
}
.stay-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.stay-form {
    margin-top: 0.5rem;
    width: 100%;
}
.stay-form .form-group {
    margin-bottom: 0.6rem;
}
.stay-form label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    display: block;
    color: var(--gray-600);
}
.stay-form select,
.stay-form input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.stay-address-preview {
    height: 150px;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray-200);
}
.form-actions-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Food & Activity Sections */
.food-section, .activity-section { margin-top: 0.25rem; border-top: 1px solid var(--gray-100); }
.food-body, .activity-body { padding: 0.75rem 0; }

.food-visit-check, .activity-visit-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    cursor: pointer;
    padding: 0 0.3rem;
}
.food-visit-check input[type="checkbox"], .activity-visit-check input[type="checkbox"] { display: none; }
.food-check-mark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
    transition: all 0.2s;
}
.food-visit-check:hover .food-check-mark, .activity-visit-check:hover .food-check-mark { border-color: var(--primary); }
.visit-check-locked { cursor: not-allowed; opacity: 0.5; }
.visit-check-locked:hover .food-check-mark { border-color: var(--gray-300) !important; }
.visit-check-locked:hover .act-check-mark { border-color: #93c5fd !important; }
.food-check-locked { font-size: 0.55rem; color: var(--gray-300); }
.food-visit-check input:checked + .food-check-mark, .activity-visit-check input:checked + .food-check-mark {
    background: #10b981;
    border-color: #10b981;
    color: white;
}
.act-check-mark {
    position: relative;
    width: 30px;
    height: 30px;
    border: 2px solid #93c5fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #3b82f6;
    transition: border-color 0.2s;
    background: #eff6ff;
    flex-shrink: 0;
}
.activity-visit-check:hover .act-check-mark { border-color: #3b82f6; }
.act-visited-badge {
    display: none;
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
    background: #10b981;
    border-radius: 50%;
    border: 1.5px solid #fff;
    align-items: center;
    justify-content: center;
    font-size: 6.5px;
    color: #fff;
    line-height: 1;
}
.activity-visit-check input:checked + .act-check-mark .act-visited-badge { display: flex; }
.item-visited { background: #f0fdf4; border-left-color: #10b981 !important; }
.item-visited strong { color: var(--gray-500); }
.item-added-by { font-size: 0.75rem; color: var(--gray-400); display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.item-added-by i { font-size: 0.7rem; color: #f59e0b; flex-shrink: 0; }
.item-added-by strong { color: var(--gray-300); }
.item-visit-date-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: #e8f5e9; color: #2e7d32; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 10px; white-space: nowrap; }
.item-visit-date-badge i { font-size: 0.7rem; color: #43a047; }
.item-visit-info { font-size: 0.75rem; color: #10b981; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.item-visit-info i { font-size: 0.7rem; flex-shrink: 0; }
.item-visit-info strong { color: #34d399; }
.item-marked-at { color: #999; font-style: italic; font-size: 0.7rem; }
.item-visit-note { font-size: 0.75rem; color: var(--gray-500); font-style: italic; }
.item-visit-note i { font-size: 0.65rem; margin-right: 0.15rem; }

.food-badges-display { margin-top: 0.5rem; }
.food-badge-summary { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.food-badge-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.6rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.food-badge-pill:hover { filter: brightness(0.95); transform: translateY(-1px); }
.food-badge-positive { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.food-badge-negative { background: #fbe9e7; color: #c62828; border: 1px solid #ef9a9a; }
.food-badge-pill i { font-size: 0.68rem; }
.food-badge-count { background: rgba(0,0,0,0.1); padding: 0.05rem 0.35rem; border-radius: 0.75rem; font-size: 0.68rem; font-weight: 700; margin-left: 0.1rem; min-width: 1.1rem; text-align: center; }

.badge-detail-popup { background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); width: 90%; max-width: 380px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.badge-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 1rem; font-weight: 600; }
.badge-detail-header i { margin-right: 0.3rem; }
.badge-detail-count { background: rgba(0,0,0,0.08); padding: 0.1rem 0.45rem; border-radius: 0.75rem; font-size: 0.8rem; font-weight: 700; margin-left: 0.3rem; }
.badge-detail-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--gray-400); padding: 0.2rem; }
.badge-detail-close:hover { color: var(--dark); }
.badge-detail-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.badge-detail-item { padding: 0.65rem 1rem; border-bottom: 1px solid #f3f4f6; }
.badge-detail-item:last-child { border-bottom: none; }
.badge-detail-row { display: flex; align-items: center; gap: 0.4rem; }
.badge-detail-name { font-size: 0.85rem; font-weight: 600; color: var(--dark); display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.badge-detail-name i { font-size: 0.7rem; color: var(--gray-400); }
.badge-detail-time { font-size: 0.72rem; color: var(--gray-400); font-weight: 400; }
.badge-detail-comment { font-size: 0.75rem; font-style: italic; color: var(--gray-500); padding-left: 1.1rem; margin-top: 0.2rem; }
.badge-detail-comment i { font-size: 0.55rem; margin-right: 0.2rem; opacity: 0.5; }
.badge-detail-remove { background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 0.75rem; padding: 0.25rem; flex-shrink: 0; }
.badge-detail-remove:hover { color: var(--danger); }

.badge-score-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; margin-bottom: 0.1rem; }
.badge-score-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.55rem; border-radius: 1rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; border: none; line-height: 1.4; transition: filter 0.15s, transform 0.15s; }
.badge-score-btn i { font-size: 0.8rem; }
.badge-score-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.badge-score-positive { background: #d1fae5; color: #065f46; }
.badge-score-negative { background: #fee2e2; color: #991b1b; }
.btn-badge-add { display: inline-flex; align-items: center; gap: 0.3rem; background: linear-gradient(135deg, #fff8e1, #fff3e0); border: 1px solid #ffcc80; color: #e65100; padding: 0.2rem 0.6rem; border-radius: 1.25rem; font-size: 0.72rem; font-weight: 600; cursor: pointer; margin-top: 0.4rem; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(255,152,0,0.12); width: fit-content; }
.btn-badge-add:hover { background: linear-gradient(135deg, #ffe0b2, #ffcc80); border-color: #ffa726; color: #bf360c; box-shadow: 0 2px 6px rgba(255,152,0,0.2); transform: translateY(-1px); }
.btn-badge-add i { font-size: 0.72rem; color: #ffa000; }
.btn-badge-add:hover i { color: #e65100; }

.badge-picker-popup { background: #f5f5f5; border-radius: 1rem; padding: 1.5rem; max-width: 500px; width: 95%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.badge-picker-popup h3 { margin: 0 0 1rem; font-size: 1.1rem; color: var(--gray-800); }
.badge-picker-section { margin-bottom: 1rem; background: #ffffff; border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.badge-picker-label { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.5rem; padding: 0.3rem 0.6rem; border-radius: 0.4rem; display: inline-block; }
.badge-picker-label-positive { color: #fff; background: #2e7d32; }
.badge-picker-label-negative { color: #fff; background: #c62828; }
.badge-picker-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.badge-pick-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.75rem; border-radius: 1.5rem; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1.5px solid; }
.badge-pick-positive { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.badge-pick-positive:hover, .badge-pick-positive.selected { background: #2e7d32; color: #fff; border-color: #2e7d32; transform: scale(1.05); }
.badge-pick-negative { background: #fbe9e7; color: #c62828; border-color: #ef9a9a; }
.badge-pick-negative:hover, .badge-pick-negative.selected { background: #c62828; color: #fff; border-color: #c62828; transform: scale(1.05); }
.badge-pick-btn i { font-size: 0.72rem; }

.badge-selected-preview { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.badge-preview-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; }
.badge-comment-section { margin-top: 0.8rem; border-top: 1px solid var(--gray-200); padding-top: 0.8rem; }
.badge-comment-section .char-counter { display: block; text-align: right; font-size: 0.7rem; color: var(--gray-400); margin-top: 0.2rem; }

.food-visit-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.food-visit-popup {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.food-visit-popup h3 { margin: 0 0 1rem; font-size: 1rem; }
.food-visit-popup h3 i { color: #10b981; margin-right: 0.4rem; }
.food-visit-popup .form-group { margin-bottom: 0.75rem; }
.food-visit-popup .form-row { display: flex; gap: 0.5rem; }
.food-visit-popup .form-row .form-group { flex: 1; }
.food-visit-popup label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-secondary); }
.food-visit-popup input, .food-visit-popup textarea { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 0.85rem; }
.food-visit-popup textarea { resize: vertical; }
.food-visit-popup .form-actions-inline { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; }
.item-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.item-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    flex-wrap: wrap;
    position: relative;
}
.item-card.item-food { border: 1px solid #fcd34d; }
.item-card.item-activity { border: 1px solid #bfdbfe; }
.item-card.item-stay { border: 1px solid #ddd6fe; }
.item-card-icon { font-size: 0.95rem; margin-top: 0.15rem; flex-shrink: 0; }
.item-food .item-card-icon { color: #b45309; }
.item-activity .item-card-icon { color: #1d4ed8; }
.item-card.item-activity.item-visited { border-color: #6ee7b7 !important; }
.item-card.item-activity.item-visited .item-card-icon { color: #047857; }
.item-card.item-food.item-visited { border-color: #6ee7b7 !important; }
.item-card.item-food.item-visited .item-card-icon { color: #047857; }
.item-card-info { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.item-card-info strong { font-size: 0.88rem; }
.item-cat { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; }
.item-dates { font-size: 0.8rem; color: var(--primary); display: block; margin-top: 2px; }
.item-dates i { font-size: 0.7rem; margin-right: 0.2rem; }
.item-addr { font-size: 0.8rem; color: var(--gray-600); }
.item-addr i { font-size: 0.7rem; margin-right: 0.2rem; }
.item-detail { font-size: 0.8rem; color: var(--gray-600); display: block; margin-top: 2px; }
.item-detail i { font-size: 0.7rem; margin-right: 0.2rem; }
.item-card > .item-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 0.3rem; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.item-card:hover > .item-card-actions { opacity: 1; }
.item-card > .item-card-actions .btn-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0.72rem; background: var(--gray-200); border: none; cursor: pointer; border-radius: 6px; color: var(--gray-600); }
.item-card > .item-card-actions .btn-icon:hover { background: var(--gray-300); }
.stay-time { font-size: 0.75rem; color: var(--gray-500); margin-left: 0.2rem; }
.item-edit-form { width: 100%; padding: 0.75rem; border-top: 1px solid var(--gray-200); background: var(--white, #fff); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.stay-add-btn-wrap { margin-top: 8px; text-align: center; }
.item-stay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: visible;
    position: relative;
}
.stay-card-left {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    position: relative;
}
.stay-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 0.2rem; align-items: center; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.item-stay:hover .stay-card-actions { opacity: 1; }
.stay-card-left:has(.stay-card-actions) { padding-right: 6.2rem; }
/* Uniform size for all stay action buttons */
.stay-card-actions .transport-btn-icon {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.88rem; border-radius: 6px; flex-shrink: 0;
}
.stay-card-actions .qb-add-btn {
    width: auto; min-width: 34px; height: 28px; padding: 0 0.45rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.88rem; border-radius: 6px; flex-shrink: 0;
}
/* Wish button — amber tint */
.stay-card-actions .transport-btn-icon.save-to-wish-btn { background: #fef3c7; border: 1.5px solid #fcd34d; }
.stay-card-actions .transport-btn-icon.save-to-wish-btn:hover { background: #fde68a; border-color: #f59e0b; }
.stay-card-actions .transport-btn-icon.save-to-wish-saved { background: #dcfce7; border: 1.5px solid #4ade80; }
/* Budget button — blue tint */
.stay-card-actions .qb-add-btn { background: var(--primary-light, #eff6ff); color: var(--primary) !important; border: 1.5px solid #bfdbfe; }
.stay-card-actions .qb-add-btn:hover { background: #dbeafe !important; border-color: var(--primary); color: var(--primary) !important; }
/* ⋮ dropdown sizing */
.stay-card-actions .traveler-actions-menu { margin-left: 0; }
.stay-card-actions .traveler-menu-btn { width: 24px; height: 24px; font-size: 0.75rem; }
.stay-card-actions .traveler-menu-dropdown { min-width: 130px; z-index: 200; }
.stay-card-left .item-name-row { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.stay-card-left .item-name-row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }
/* Stay compact card */
.stay-summary-row { display: flex; flex-direction: column; gap: .12rem; }
.stay-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.stay-type-badge { font-size: .72rem; background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: .08rem .35rem; }
.meal-plan-badge { font-size: .72rem; background: #fef3c7; color: #92400e; border-radius: 4px; padding: .08rem .35rem; white-space: nowrap; }
/* ── Stay meal schedule grid ─────────────────────────────── */
.stay-meal-schedule { margin-top: .5rem; }
.smd-label { font-size: .72rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.smd-grid { display: flex; flex-direction: column; gap: .22rem; }
.smd-row { display: flex; align-items: center; gap: .4rem; }
.smd-date-label { font-size: .75rem; color: var(--gray-600); min-width: 72px; flex-shrink: 0; }
.smd-meals { display: flex; gap: .3rem; flex-wrap: nowrap; }
.smd-meal-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; padding: .28rem .38rem; border-radius: 8px; border: 1.5px solid #e5e7eb;
    background: #f9fafb; color: #9ca3af; font-size: .78rem; line-height: 1.1;
    cursor: pointer; transition: all .18s; min-width: 44px; min-height: 36px;
}
.smd-meal-btn:hover { border-color: var(--smd-color, #9ca3af); color: var(--smd-color, #6b7280); background: #f3f4f6; }
.smd-meal-btn[onclick]:not([onclick=""]) { cursor: pointer; }
.smd-meal-btn.smd-has-entry { border-color: var(--smd-color); color: var(--smd-color); background: color-mix(in srgb, var(--smd-color) 8%, white); }
.smd-meal-btn .fas { font-size: .82rem; }
.smd-entry-time { font-size: .65rem; font-weight: 600; margin-top: .06rem; line-height: 1; white-space: nowrap; }
.smd-entry-place { font-size: .6rem; color: var(--gray-500); margin-top: .04rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smd-entry-notes { font-size: .58rem; color: #9ca3af; margin-top: .03rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
/* Meal pills row */
.smd-pills { display: flex; gap: .35rem; flex-wrap: wrap; margin: .35rem 0 .25rem; }
.smd-pills-header { margin: .2rem 0 .1rem; }
.smd-pill {
    display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem;
    border-radius: 20px; border: 1.5px solid var(--smd-color, #d1d5db);
    background: color-mix(in srgb, var(--smd-color, #9ca3af) 9%, white);
    color: var(--smd-color, #6b7280); font-size: .72rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s, box-shadow .15s;
}
.smd-pill:hover { opacity: .85; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.smd-pill .fas { font-size: .68rem; }
.smd-pill-count { font-size: .64rem; font-weight: 700; background: var(--smd-color,#9ca3af); color: #fff; border-radius: 10px; padding: 0 .38rem; line-height: 1.5; }
/* Meal list popup rows */
.smd-list-row { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-bottom: 1px solid #f3f4f6; }
.smd-list-row:last-child { border-bottom: none; }
.smd-edit-btn {
    flex-shrink: 0; background: none; border: 1.5px solid #e5e7eb; border-radius: 6px;
    padding: .22rem .38rem; color: #9ca3af; font-size: .7rem; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s; line-height: 1;
}
.smd-edit-btn:hover { color: var(--primary); border-color: var(--primary); background: #eff6ff; }
.smd-list-day { flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--gray-700); width: 72px; }
.smd-list-info { flex: 1; display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; min-width: 0; }
.smd-li-time { font-size: .74rem; font-weight: 700; color: var(--gray-800); white-space: nowrap; }
.smd-li-arrow { font-weight: 400; color: #d1d5db; }
.smd-li-place { font-size: .72rem; color: var(--gray-600); }
.smd-li-note { font-size: .68rem; color: #9ca3af; font-style: italic; }
.smd-li-empty { font-size: .72rem; color: #d1d5db; }
.smd-list-arrow { font-size: .6rem; color: #d1d5db; flex-shrink: 0; }
.smd-bulk-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .45rem; }
.smd-bulk-btn {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem;
    border-radius: 20px; border: 1.5px solid var(--smd-color, #d1d5db);
    background: color-mix(in srgb, var(--smd-color, #9ca3af) 10%, white);
    color: var(--smd-color, #6b7280); font-size: .78rem; font-weight: 600;
    cursor: pointer; transition: all .16s; white-space: nowrap;
}
.smd-bulk-btn:hover { background: color-mix(in srgb, var(--smd-color, #9ca3af) 18%, white); transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--smd-color, #9ca3af) 30%, transparent); }
.smd-bulk-btn .fas { font-size: .8rem; }
.smd-bulk-all { font-size: .68rem; font-weight: 500; opacity: .75; margin-left: .1rem; }
.stay-dates-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--gray-600); }
.stay-dates-pill .fas { font-size: .7rem; color: var(--gray-400); }
.stay-nights-badge { background: #eff6ff; color: #3b82f6; border-radius: 4px; font-size: .68rem; font-weight: 700; padding: .06rem .3rem; }
/* Tappable summary row — whole row is the hit target */
.stay-summary-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 6px; }
.stay-summary-tappable:active { background: #f8faff; }
/* Expand indicator circle — lives in the name row, visual only */
.stay-summary-meta { flex-wrap: nowrap; }
.stay-expand-btn { display: inline-flex; align-items: center; justify-content: center; background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; border-radius: 50%; width: 18px; height: 18px; flex-shrink: 0; margin-left: .35rem; pointer-events: none; }
/* Allow the name row to be a proper flex line so the circle can push right */
.stay-card-left .item-name-row { display: flex; align-items: center; }
.stay-expand-btn.open { background: #e0e7ff; color: #4f46e5; border-color: #c7d2fe; }
.stay-expand-btn .fa-chevron-down { display: inline-block; transition: transform .22s; font-size: .62rem; }
.stay-expand-btn.open .fa-chevron-down { transform: rotate(180deg); }
.stay-details-body { padding-top: .45rem; border-top: 1px dashed #e5e7eb; margin-top: .3rem; display: flex; flex-direction: column; gap: .1rem; }
/* Food & Drinks compact card — mirrors stay card pattern */
.food-summary-row { display: flex; flex-direction: column; gap: .12rem; }
.food-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.food-cat-badge { font-size: .72rem; background: #fef3c7; color: #92400e; border-radius: 4px; padding: .08rem .35rem; }
.food-summary-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 6px; user-select: none; -webkit-user-select: none; }
.food-summary-tappable:active { background: #fffbeb; }
/* Unvisited food card: needs enough height to fully contain the absolute vote box */
.item-food:not(.item-visited) { min-height: 90px; }
.food-expand-btn { display: inline-flex; align-items: center; justify-content: center; background: #fef3c7; color: #d97706; border: 1px solid #fcd34d; border-radius: 50%; width: 18px; height: 18px; flex-shrink: 0; margin-left: .35rem; pointer-events: none; }
.food-expand-btn.open { background: #fde68a; color: #b45309; border-color: #fbbf24; }
.food-expand-btn .fa-chevron-down { display: inline-block; transition: transform .22s; font-size: .62rem; }
.food-expand-btn.open .fa-chevron-down { transform: rotate(180deg); }
/* Activity compact card — mirrors food card pattern */
.act-summary-row { display: flex; flex-direction: column; gap: .12rem; }
.act-summary-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 6px; user-select: none; -webkit-user-select: none; }
.act-summary-tappable:active { background: #eff6ff; }
.act-expand-btn { background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; }
.act-expand-btn.open { background: #e0e7ff; color: #4f46e5; border-color: #c7d2fe; }
.act-details-body { padding-top: .45rem; border-top: 1px dashed #e5e7eb; margin-top: .3rem; display: flex; flex-direction: column; gap: .1rem; }
.item-activity .item-card-info .item-name-row { display: flex; align-items: center; }
.item-food .item-card-info .item-name-row { display: flex; align-items: center; }
.food-details-body { padding-top: .45rem; border-top: 1px dashed #e5e7eb; margin-top: .3rem; display: flex; flex-direction: column; gap: .1rem; }
/* ⋮ dropdown inside food/activity card action bar */
.item-card-actions .traveler-actions-menu { margin-left: 0; }
.item-card-actions .traveler-menu-btn { width: 24px; height: 24px; font-size: 0.75rem; }
.item-card-actions .traveler-menu-dropdown { min-width: 130px; z-index: 200; }
/* Budget button in food/activity card — rounded rect, blue accent */
.item-card > .item-card-actions .btn-icon.qb-add-btn { width: auto; min-width: 34px; height: 28px; padding: 0 0.45rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; background: var(--primary-light, #eff6ff); color: var(--primary); border: 1.5px solid #bfdbfe; }
.item-card > .item-card-actions .btn-icon.qb-add-btn:hover { background: #dbeafe; border-color: var(--primary); color: var(--primary); }
/* Wish button in food/activity card — subtle green tint; icon color handled by !important rules */
.item-card > .item-card-actions .btn-icon.save-to-wish-btn { background: #fef3c7; border: 1.5px solid #fcd34d; }
.item-card > .item-card-actions .btn-icon.save-to-wish-btn:hover { background: #fde68a; border-color: #f59e0b; }
.item-card > .item-card-actions .btn-icon.save-to-wish-saved { background: #dcfce7; border: 1.5px solid #4ade80; cursor: default; }
/* Map & images always span full card width, below the text info */
.stay-details-extras { width: 100%; display: flex; flex-direction: column; }
.stay-map-thumb {
    width: 100%;
    min-width: 100%;
    height: 130px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-left: none;
    border-top: 1px solid var(--gray-100);
    isolation: isolate;
    z-index: 0;
}
.stay-mini-map {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.stay-map-expand {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.55);
    color: white;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.stay-map-thumb:hover .stay-map-expand { opacity: 1; }
.stay-map-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.stay-map-popup-modal {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}
.stay-map-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.stay-map-popup-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}
.stay-map-popup-header h3 i { color: var(--primary); margin-right: 0.4rem; }
.stay-map-popup-map {
    height: 400px;
    width: 100%;
}
@media (max-width: 480px) {
    .stay-map-popup-map { height: 300px; }
}
.item-notes { font-size: 0.8rem; color: var(--gray-500); font-style: italic; }

/* Stay field locker */
.stay-lockable-label { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.stay-lock-btn { display: inline-flex; align-items: center; gap: 3px; border: 1px solid currentColor; border-radius: 10px; background: none; cursor: pointer; padding: 1px 6px; font-size: 0.68rem; font-weight: 500; line-height: 1.4; transition: opacity 0.15s, background 0.15s; opacity: 0.75; }
.stay-lock-btn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.stay-lock-btn .lock-label { font-size: 0.65rem; }
.stay-field-locked { color: #9ca3af !important; font-style: italic; }
.stay-field-locked i { color: #f59e0b; margin-right: 3px; }
.stay-locked-badge { margin-left: 3px; vertical-align: middle; }

.item-name-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.item-local-name { font-size: 0.85em; color: #888; font-weight: 400; font-style: italic; margin-left: 0.15rem; }
.unesco-activity-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #b8860b, #d4a017); color: #fff; font-size: 0.65rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin-left: 0.25rem; flex-shrink: 0; cursor: help; }
.wonder-activity-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e90ff, #4169e1); color: #fff; font-size: 0.6rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin-left: 0.25rem; flex-shrink: 0; cursor: help; }
.from-wish-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 0.6rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin-left: 0.25rem; flex-shrink: 0; cursor: help; }
.monument-wonder-filter { background: none; border: 1px solid #4169e1; color: #4169e1; border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.75rem; cursor: pointer; margin-left: 0.35rem; transition: all 0.2s; }
.monument-wonder-filter:hover, .monument-wonder-filter.active { background: #4169e1; color: #fff; }
.wonders-header-section { background: linear-gradient(135deg, #1a56db 0%, #4169e1 50%, #6b8cff 100%); padding: 1.25rem 1.5rem 1rem; text-align: center; }
.wonders-score { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; }
.wonders-score span { font-size: 1.1rem; font-weight: 400; opacity: 0.7; }
.wonders-progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; margin: 0.6rem 0 0.5rem; }
.wonders-progress-fill { height: 100%; background: #fff; border-radius: 3px; transition: width 0.4s ease; }
.wonders-progress-label { font-size: 0.8rem; color: rgba(255,255,255,0.85); margin: 0; }
.wonders-list { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0; }
.wonder-card { display: flex; flex-direction: column; border-bottom: 1px solid var(--gray-100); transition: background 0.15s; }
.wonder-card:last-child { border-bottom: none; }
.wonder-card:hover { background: none; }
.wonder-card-main { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1.25rem; }
.wonder-card-num { font-size: 0.65rem; font-weight: 700; color: var(--gray-400); width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wonder-card-visited .wonder-card-num { color: #4169e1; border-color: #bfdbfe; background: #eff6ff; }
.wonder-card-icon { width: 2.2rem; height: 2.2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.wonder-card-visited .wonder-card-icon { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: #4169e1; }
.wonder-card-pending .wonder-card-icon { background: var(--gray-100); color: var(--gray-300); }
.wonder-card-pending { opacity: 0.55; }
.wonder-card-body { flex: 1; min-width: 0; }
.wonder-card-top { display: flex; flex-direction: column; gap: 0.1rem; }
.wonder-card-title { font-weight: 600; font-size: 0.88rem; color: var(--gray-800); }
.wonder-card-location { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--gray-400); }
.wonder-card-location img { width: 16px; height: 12px; border-radius: 1px; }
.wonder-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; font-size: 0.72rem; color: var(--gray-500); }
.wonder-card-date { display: inline-flex; align-items: center; gap: 0.2rem; }
.wonder-card-trip { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--primary); text-decoration: none; }
.wonder-card-trip:hover { text-decoration: underline; }
.wonder-card-status { flex-shrink: 0; font-size: 1.15rem; }
.wonder-card-visited .wonder-card-status { color: #22c55e; }
.wonder-card-pending .wonder-card-status { color: var(--gray-400); }
.wonder-info-btn { background: #eff6ff; border: none; cursor: pointer; color: #4169e1; font-size: 1.05rem; padding: 0.3rem; border-radius: 50%; transition: color 0.2s, background 0.2s; flex-shrink: 0; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; }
.wonder-info-btn:hover { color: #fff; background: #4169e1; }
.wonder-info-btn.active { color: #fff; background: #4169e1; }
.wonder-card-edit-btn { background: #f0f4ff; border: none; cursor: pointer; color: #6b7280; font-size: 0.7rem; padding: 0.2rem; border-radius: 50%; transition: color 0.2s, background 0.2s; flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; }
.wonder-card-edit-btn:hover { color: var(--primary); background: #dbeafe; }
.wonder-card-edit-btn.active { color: #fff; background: var(--primary); }
.wonder-edit-toggle { background: none; border: 1px solid var(--gray-300); cursor: pointer; color: var(--gray-500); font-size: 0.9rem; padding: 0.3rem 0.5rem; border-radius: 6px; transition: all 0.2s; }
.wonder-edit-toggle:hover { color: var(--primary); border-color: var(--primary); }
.wonder-edit-toggle.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.wonder-card-manual { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--gray-500); font-style: italic; }
.wonder-edit-action { padding: 0.5rem 0.75rem 0.5rem 2.5rem; border-top: 1px dashed var(--gray-200); background: #f8faff; }
.wonder-edit-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wonder-edit-form input[type="date"] { padding: 0.3rem 0.5rem; border: 1px solid var(--gray-500); border-radius: 6px; font-size: 0.8rem; font-family: inherit; }
.wonder-edit-form .btn { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }
.wonder-edit-form .btn-success { background: #44a647; background-image: none; color: #fff; border: none; }
.wonder-edit-form .btn-success:hover { background: #357a38; background-image: none; }
.wonder-info-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: wonderFadeIn 0.2s ease; }
.wonder-info-modal { background: #fff; border-radius: 0.75rem; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.25); animation: wonderSlideIn 0.25s ease; }
.wonder-info-modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(0,0,0,0.45); border: none; color: #fff; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s; }
.wonder-info-modal-close:hover { background: rgba(0,0,0,0.7); }
.wonder-info-modal-img { width: 100%; height: 220px; object-fit: cover; object-position: center; border-radius: 0.75rem 0.75rem 0 0; display: block; }
.wonder-info-modal-body { padding: 1.1rem 1.25rem 1.25rem; }
.wonder-info-modal-body h4 { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 700; color: var(--gray-800); }
.wonder-info-modal-location { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.75rem; }
.wonder-info-modal-location img { width: 18px; height: 13px; border-radius: 1px; }
.wonder-info-modal-body p { font-size: 0.85rem; line-height: 1.6; color: var(--gray-600); margin: 0; }
@keyframes wonderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wonderSlideIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (max-width: 600px) {
.wonder-info-modal { max-width: 95%; }
.wonder-info-modal-img { height: 170px; }
.wonder-info-modal-body { padding: 0.85rem 1rem 1rem; }
.wonder-info-modal-body h4 { font-size: 1rem; }
.wonder-info-modal-body p { font-size: 0.8rem; }
}
.item-rating { color: #f59e0b; font-size: 0.85rem; letter-spacing: 0.05em; white-space: nowrap; }
.item-add-form {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    border: 1px dashed var(--gray-200);
}
.item-add-form .form-group { margin-bottom: 0.5rem; }
.item-add-form label { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.2rem; display: block; color: var(--gray-600); }
.item-add-form select,
.item-add-form input[type="text"],
.item-add-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
}
.item-card .item-delete-btn { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0.65rem; color: #e53e3e; background: #fee2e2; border: none; cursor: pointer; border-radius: 50%; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.item-card:hover .item-delete-btn { opacity: 1; }
.item-card .item-delete-btn:hover { color: #fff; background: #e53e3e; }

/* Map */
.map-container {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    position: relative;
    z-index: 0;
}

.map-full { height: 500px; }

.map-legend {
    background: white;
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.map-legend h3 { margin-bottom: 0.75rem; font-size: 1rem; }

.legend-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--gray-50);
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.legend-item:hover { background: var(--primary-light); }

.map-view-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.map-tab {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.map-tab:hover { background: var(--gray-50); }
.map-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.geo-city-marker { background: none !important; border: none !important; }
.geo-marker-pin {
    width: 36px;
    height: 48px;
    background: var(--primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(59,130,246,0.55), 0 2px 5px rgba(0,0,0,0.25);
    border: 2.5px solid #fff;
    transition: transform 0.2s ease;
}
.geo-marker-pin:hover {
    transform: rotate(-45deg) scale(1.1);
}
.geo-marker-pin span {
    transform: rotate(45deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.78rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1;
}
.geo-marker-home {
    background: #10b981;
    box-shadow: 0 3px 10px rgba(16,185,129,0.4), 0 1px 3px rgba(0,0,0,0.2);
}
.geo-marker-home i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.geo-marker-stacked {
    background: var(--primary);
    box-shadow: 0 3px 10px rgba(37,99,235,0.4), 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
}
.geo-marker-stacked.geo-marker-home {
    background: #10b981;
    box-shadow: 0 3px 10px rgba(16,185,129,0.4), 0 1px 3px rgba(0,0,0,0.2);
}
.geo-marker-stacked i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.geo-stack-badge {
    position: absolute;
    bottom: -8px;
    right: -10px;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 6px;
    line-height: 1.1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transform: rotate(45deg);
    white-space: nowrap;
    border: 1.5px solid #fff;
}

.geo-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    flex-basis: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    transition: var(--transition);
}
.geo-legend-item:hover { background: var(--primary-light); }
.geo-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59,130,246,0.35);
}
.geo-transport-icon { background: none !important; border: none !important; }
.geo-transport-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.9);
    border: none;
    transition: transform 0.2s ease;
}
.geo-transport-badge:hover {
    transform: scale(1.15);
}
.geo-route-arrow { background: none !important; border: none !important; }
.map-layover-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.map-layover-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.map-layover-badge {
    font-size: 0.7rem;
    color: #f59e0b;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.map-leg-block:hover {
    background: #f8fafc;
}
.map-leg-block.map-leg-active {
    background: #eff6ff !important;
}

.geo-transit-marker {
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid #94a3b8;
    color: #64748b;
    font-size: 0.6rem;
}
.geo-marker-dv {
    width: 26px;
    height: 26px;
    background: #d97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.65rem;
}
/* Day-visit pin — same teardrop as destination but amber */
.geo-marker-pin-dv {
    background: #d97706;
    box-shadow: 0 4px 14px rgba(217,119,6,0.55), 0 2px 5px rgba(0,0,0,0.25);
}
.geo-marker-pin-dv i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.82rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.geo-legend-transport {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    flex-basis: 100%;
    padding: 0.15rem 0 0.15rem 2rem;
}
.geo-legend-transport-line {
    flex: 1;
    height: 0;
    border-top: 2px dashed;
}

.geo-legend-dates {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.text-red { color: var(--danger); }

/* Itinerary */
.itinerary-timeline { position: relative; }

.itinerary-day {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.day-info { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.day-number {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
}

.day-date { color: var(--gray-500); font-size: 0.875rem; }
.day-title { font-weight: 600; }

.itinerary-items { margin-bottom: 1rem; }

.itinerary-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    transition: var(--transition);
    background: var(--gray-50);
}

.itinerary-item:hover { background: var(--primary-light); }

.item-completed { opacity: 0.5; }
.item-completed h4 { text-decoration: line-through; }

.item-time {
    min-width: 80px;
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
}

.time-separator { color: var(--gray-400); margin: 0 0.125rem; }

.item-content { flex: 1; }

.item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.item-header h4 { font-size: 0.9rem; }

.item-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
}

.item-type-activity { background: #d1fae5; color: #065f46; }
.item-type-reservation { background: #dbeafe; color: #1e40af; }
.item-type-reminder { background: #fef3c7; color: #92400e; }
.item-type-transport { background: #ede9fe; color: #5b21b6; }
.item-type-meal { background: #fce7f3; color: #9d174d; }
.item-type-other { background: var(--gray-100); color: var(--gray-600); }

.item-content p { font-size: 0.8rem; color: var(--gray-600); }
.item-location { color: var(--gray-500) !important; }
.item-actions { display: flex; align-items: center; }

.add-item-form { margin-top: 0.5rem; }

/* Groups */
.members-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }

.member-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.member-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-avatar { font-size: 1.75rem; color: var(--gray-400); }

.member-role {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.role-manager { background: #dbeafe; color: #1e40af; }
.role-member { background: #dcfce7; color: #166534; }

.member-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-actions select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

/* Suggestions & Voting */
.suggestions-list { display: flex; flex-direction: column; gap: 0.75rem; }

.suggestion-card {
    display: flex;
    gap: 1rem;
    background: white;
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.vote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 50px;
}

.vote-btn {
    background: none;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    transition: var(--transition);
    font-size: 0.875rem;
}

.vote-btn:hover { color: var(--primary); border-color: var(--primary); }
.vote-btn.voted { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

.vote-count { font-weight: 700; color: var(--gray-700); font-size: 0.9rem; }

.suggestion-content { flex: 1; }
.suggestion-content h4 { margin-bottom: 0.25rem; }
.suggestion-category {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--gray-100);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--gray-600);
    margin-bottom: 0.375rem;
}
.suggestion-location { font-size: 0.8rem; color: var(--gray-500); }
.suggestion-content small { color: var(--gray-400); }

/* Suggestion Library */
.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.suggestion-lib-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.suggestion-lib-card:hover { box-shadow: var(--shadow-md); }

.suggestion-lib-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.suggestion-cat-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.cat-stay { background: #ede9fe; color: #5b21b6; }
.cat-dining { background: #fef3c7; color: #92400e; }
.cat-attraction { background: #dbeafe; color: #1e40af; }
.cat-outdoor { background: #d1fae5; color: #065f46; }
.cat-culture { background: #fce7f3; color: #9d174d; }
.cat-shopping { background: #fff7ed; color: #9a3412; }
.cat-other { background: var(--gray-100); color: var(--gray-600); }

.suggestion-lib-card h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.suggestion-dest { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 0.375rem; }
.suggestion-rating { color: var(--accent); font-size: 0.8rem; }
.suggestion-tips { font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); padding: 0.5rem; border-radius: var(--radius-sm); margin-top: 0.5rem; }

.suggestion-lib-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.suggestion-lib-footer small { color: var(--gray-400); }

.suggestion-lib-actions { display: flex; gap: 0.5rem; align-items: center; }

.saved-card { border-left: 3px solid var(--primary); }

/* Share */
.share-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-link { display: flex; align-items: center; gap: 0.5rem; flex: 1; }

.share-input {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: var(--gray-50);
    cursor: pointer;
}

/* Search */
.search-filters { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.search-inline-form { display: flex; gap: 0.4rem; flex: 1; min-width: 200px; max-width: 400px; }
.search-inline-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 0.95rem; }
.search-inline-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.search-info { margin-bottom: 1.5rem; color: var(--gray-600); }
.search-section { margin-bottom: 2rem; }
.search-section h2 { margin-bottom: 1rem; }

.search-result-item {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.search-result-item h4 { margin-bottom: 0.25rem; }
.search-result-item p { font-size: 0.8rem; color: var(--gray-500); }

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--gray-400);
}

.empty-state i { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h2 { color: var(--gray-600); margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1.5rem; }

.dashboard-first-time { color: var(--gray-500); }
.dashboard-first-time i { color: var(--primary); }
.dashboard-first-time h2 { color: var(--gray-700); font-size: 1.4rem; }
.dashboard-first-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.dashboard-first-actions .btn-lg {
    min-width: 220px;
    font-size: 0.95rem;
}

/* ── New-user welcome card (shown when dashboard has no trips/events) ─── */
.dash-welcome-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #f97316;
    border-radius: 16px;
    padding: 2.25rem 2rem;
    margin: 1.25rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.dash-welcome-card__dismiss {
    position: absolute;
    top: .75rem;
    right: .85rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s;
}
.dash-welcome-card__dismiss:hover {
    background: #f3f4f6;
    color: #374151;
}
.dash-welcome-card__icon {
    font-size: 4rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.dash-welcome-card__body {
    flex: 1;
    min-width: 0;
}
.dash-welcome-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 .6rem;
    line-height: 1.3;
}
.dash-welcome-card__text {
    font-size: .95rem;
    color: #4b5563;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}
.dash-welcome-card__text strong {
    color: #111827;
    font-weight: 600;
}
.dash-welcome-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
@media (max-width: 600px) {
    .dash-welcome-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 1.25rem;
    }
    .dash-welcome-card__icon { font-size: 2.8rem; }
    .dash-welcome-card__title { font-size: 1.15rem; }
    .dash-welcome-card__actions { flex-direction: column; }
    .dash-welcome-card__actions .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── New-user ad zone (replaces empty state when App Ads are active) ──── */
.nua-zone {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}
.nua-ad {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
/* Banner */
.nua-ad--banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-height: 72px;
}
.nua-banner-img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
/* Strip */
.nua-ad--strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    min-height: 44px;
    flex-wrap: wrap;
}
/* Card & Popup */
.nua-ad--card,
.nua-ad--popup {
    display: flex;
    flex-direction: column;
    max-width: 320px;
    margin: 0 auto;
}
.nua-card-img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
}
/* Fullscreen — fixed overlay that respects top navbar and mobile bottom bar */
.nua-ad--fullscreen {
    position: fixed;
    top: 60px;       /* below the fixed navbar (height: 60px, z-index: 1000) */
    left: 0;
    right: 0;
    bottom: 0;       /* desktop: no bottom bar */
    z-index: 999;    /* below both nav bars (z-index: 1000) */
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow-y: auto;
}
/* On mobile the bottom bar is 56 px tall — lift the ad above it */
@media (max-width: 600px) {
    .nua-ad--fullscreen {
        bottom: 56px;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}
.nua-fs-img {
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    flex-shrink: 0;
}
/* Shared body */
.nua-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    flex: 1;
}
.nua-body--center { align-items: center; text-align: center; }
.nua-headline {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}
.nua-copy {
    font-size: 0.875rem;
    opacity: .88;
    line-height: 1.4;
}
.nua-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}
.nua-cta:hover { opacity: .82; }
/* Dismiss button */
.nua-dismiss {
    position: absolute;
    top: 7px; right: 7px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    z-index: 5;
    transition: background .15s;
}
.nua-dismiss:hover { background: rgba(0,0,0,.45); }
@media (max-width: 480px) {
    .nua-ad--card, .nua-ad--popup { max-width: 100%; }
}

.empty-state-sm {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--gray-400);
    font-size: 0.875rem;
}

/* Sections */
.trip-section { margin-bottom: 2rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }
.flex-grow { flex: 1; }

/* Collapsible Forms */
.collapsible-form { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* Danger Zone */
.danger-zone { border: 1px solid #fca5a5; }
.danger-zone h3 { color: var(--danger); margin-bottom: 0.75rem; }

/* Footer */
.footer {
    background: var(--gray-800);
    color: var(--gray-400);
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    margin-top: auto;
}
.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 0.65rem;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--gray-400);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.footer-social-link:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-mobile-invite { display: inline-flex; align-items: center; margin-left: auto; margin-right: 0.5rem; }
    .mob-nav-plus-wrap { display: inline-flex; }
    .nav-mobile-new-trip { display: inline-flex; margin-right: 0; }
    .nav-mobile-new-event { display: inline-flex; }
    .mob-plus-dd-trigger { display: inline-flex; }
    .nav-mobile-invite:first-of-type ~ .mob-nav-plus-wrap { margin-left: 0; }
    .mob-nav-plus-wrap:not(.nav-mobile-invite ~ .mob-nav-plus-wrap) { margin-left: auto; }

    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 0.75rem;
        box-shadow: var(--shadow-lg);
        border-bottom: 1px solid var(--gray-200);
        gap: 0.15rem;
    }

    .nav-links.active { display: flex; }

    .nav-search { display: none; }

    .nav-divider {
        width: 100%;
        height: 1px;
        margin: 0.35rem 0;
    }

    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { width: 100%; justify-content: flex-start; }
    .nav-notif-toggle { width: 100%; justify-content: center; }
    .nav-user-toggle { justify-content: center; }
    .nav-notif-panel {
        position: fixed !important;
        top: 65px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100vh - 80px) !important;
        border-radius: 12px !important;
        z-index: 2000 !important;
        overflow: hidden !important;
    }
    .nav-notif-list { max-height: calc(100vh - 220px); overflow-y: auto; }
    .nav-dropdown-menu {
        position: static;
        transform: none !important;
        box-shadow: none;
        border: none;
        padding: 0 0 0 1rem;
        opacity: 1;
        visibility: visible;
        display: none;
        min-width: auto;
        background: var(--gray-50);
        border-radius: var(--radius-sm);
        margin-top: 0.25rem;
    }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        transform: none !important;
    }

    .trips-status-tabs {
        gap: 0.3rem;
        padding: 0.3rem;
    }
    .status-tab {
        font-size: 0.78rem;
        padding: 0.55rem 0.5rem;
        gap: 0.3rem;
    }
    .status-tab i { font-size: 0.9rem; }
    .status-tab-count { min-width: 18px; height: 18px; font-size: 0.65rem; }
    .status-tab-label { display: none; }

    .hero h1 { font-size: 1.9rem; }
    .hero p { font-size: 1rem; }
    .hero-inner { flex-direction: column; text-align: center; padding: 3.5rem 1.5rem; gap: 2.5rem; }
    .hero-content { max-width: 100%; text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-visual { flex: none; width: 260px; height: 260px; }
    .hero-globe-wrap { width: 260px; height: 260px; }
    .hero-card-trip  { left: -10px; }
    .hero-card-weather { right: -10px; }
    .hero-card-event   { right: -10px; }

    .auth-split { flex-direction: column; }
    .auth-panel-visual { flex: none; min-height: 0; padding: 1.5rem; }
    .auth-panel-inner { padding: 1.25rem 1rem; gap: 1rem; }
    .apv-globe-wrap { width: 140px; height: 140px; }
    .apv-tagline p { display: none; }
    .apv-stats { display: none; }
    .auth-card { padding: 2rem 1.5rem; }

    .form-row { grid-template-columns: 1fr; }
    .dest-dates-row { grid-template-columns: 1fr 1fr !important; gap: 0.75rem; }

    .trips-grid { grid-template-columns: 1fr; }
    .pins-grid { grid-template-columns: 1fr; }
    .suggestions-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }

    .page-header { flex-direction: row; align-items: center; gap: 0.5rem; }
    .page-header h1 { font-size: 1.25rem; }
    .page-header-back { display: inline-flex; align-items: center; }
    .page-header-back-desktop { display: none; }
    .page-actions { width: 100%; }
    .page-actions .btn-text { display: none; }
    .page-actions .btn { padding: 0.55rem 0.85rem; font-size: 1rem; }
    .page-actions .btn i { font-size: 1.05rem; }

    .dashboard-header { flex-direction: column; gap: 1rem; }

    .map-full { height: 350px; }

    .suggestion-card { flex-direction: column; }
    .vote-section { flex-direction: row; }

    .share-section { flex-direction: column; align-items: stretch; }
    .share-link { flex-direction: column; }

    .photo-upload-row { flex-direction: column; }
    .caption-input { width: 100% !important; }
}

/* Destinations */
.destinations-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.destination-card {
    position: relative;
}

.destination-header {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.dest-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 120px;
}
.dest-thumb {
    width: 100%;
    height: 100%;
    min-height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.dest-thumb-empty {
    background-image: url('/assets/images/default-cover-sm.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dest-thumb-placeholder-icon {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.7);
}
.dest-thumb-edit {
    background: rgba(0,0,0,0.5);
    color: #fff;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0;
    transition: background 0.2s;
    z-index: 1;
}
.dest-thumb-edit:hover { background: rgba(0,0,0,0.7); }
.dest-thumb-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--primary);
    font-size: 1.1rem;
    transition: color 0.2s, background 0.2s;
    position: absolute;
    top: 0;
    left: 0;
}
.dest-thumb-add:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.15);
}
.stop-thumb-add {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--primary);
    font-size: 1.1rem;
    transition: color 0.2s, background 0.2s;
    z-index: 1;
}
.stop-thumb-add:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.15);
}
.stop-thumb-add::before {
    content: '';
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.destination-number {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    z-index: 2;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.12);
}

.stop-number {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    height: 20px;
    min-width: 30px;
    padding: 0 5px;
    border-radius: 10px;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.68rem;
    z-index: 2;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.12);
    letter-spacing: 0.01em;
}

.destination-info {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.dest-view-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.destination-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.destination-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.destination-meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.destination-desc {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-top: 0.35rem;
}

.destination-connector {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 0;
    color: var(--primary);
    font-size: 1.4rem;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.form-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.form-section h3 {
    margin-bottom: 0.25rem;
    color: var(--gray-800);
}

.destination-form-entry {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.destination-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.day-visit-toggle { display: flex; align-items: center; }
.day-visit-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--gray-600); cursor: pointer; font-weight: 500; user-select: none; }
.day-visit-label input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.day-visit-label i { color: var(--primary); font-size: 0.85rem; }
.dayvisit-modal-box { background: #fff; border-radius: 16px; width: 100%; max-width: 500px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; animation: exploreModalIn 0.25s ease-out; }
.dayvisit-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: linear-gradient(135deg, #e8f0fe, #f0f4ff); border-bottom: 1px solid #d0daf0; }
.dayvisit-modal-header h3 { margin: 0; font-size: 1rem; color: #333; display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.dayvisit-modal-header h3 i { color: var(--primary); flex-shrink: 0; }
.dayvisit-modal-body { padding: 1rem 1.25rem; max-height: 60vh; overflow-y: auto; }
.dayvisit-modal-body .form-group { margin-bottom: 0.75rem; }
.dayvisit-modal-body .form-row { display: flex; gap: 0.75rem; }
.dayvisit-modal-body .form-row .form-group { flex: 1; }
.dayvisit-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid #eee; background: #fafafa; }
@media (max-width: 600px) { .dayvisit-modal-box { border-radius: 12px; max-width: 95vw; } .dayvisit-modal-body { max-height: 55vh; padding: 0.75rem 1rem; } }

.destination-entry-number {
    background: var(--primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.insert-stop-btn {
    color: var(--amber-600, #d97706) !important;
    border-color: var(--amber-600, #d97706) !important;
}
.insert-stop-btn:hover {
    background: var(--amber-600, #d97706) !important;
    color: white !important;
}

.destination-entry-title {
    font-weight: 600;
    color: var(--gray-700);
    flex: 1;
}

.destination-form-entry .form-group {
    margin-bottom: 0.5rem;
}

.destination-form-entry .form-group:last-child {
    margin-bottom: 0;
}

.dest-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gray-200);
}

.form-group label.dest-desc-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary) !important;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.form-group label.dest-desc-toggle:hover { color: var(--primary-dark) !important; }
.form-group label.dest-desc-toggle .dest-desc-arrow { font-size: 0.7rem; transition: transform 0.2s; color: var(--primary); }
.dest-desc-body { margin-top: 0.25rem; }
.destination-form-entry .form-row {
    margin-bottom: 0;
}
.dest-dates-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.dest-dates-row .form-group {
    margin-bottom: 0;
}
.dest-dates-row .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    height: 1.25rem;
    line-height: 1.25rem;
}
.dest-dates-row .form-group input {
    width: 100%;
    box-sizing: border-box;
    height: 2.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

#add-destination-btn {
    margin-top: 0.25rem;
}

.city-ac-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
}

.city-ac-item {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.city-ac-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.city-ac-item i {
    color: var(--primary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Enhanced autocomplete item internals */
.city-ac-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.city-ac-flag-ph {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.city-ac-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.city-ac-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.city-ac-sub {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.city-ac-item:hover .city-ac-name { color: var(--primary); }
.city-ac-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.city-ac-badge-db  { background: #dbeafe; color: #1e40af; }
.city-ac-badge-osm { background: #fef3c7; color: #92400e; }
.city-ac-badge-ai  { background: #ede9fe; color: #5b21b6; }
.city-ac-loading {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-top: 1px solid var(--gray-100);
}
.city-ac-ai-btn {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: #5b21b6;
    background: #faf5ff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    border-top: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.city-ac-ai-btn:hover { background: #ede9fe; }
.city-ac-manual {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    border-top: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.city-ac-manual:hover { background: var(--gray-50); color: var(--gray-700); }

/* Address field geocoder autocomplete dropdown */
.addr-geo-dropdown {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.addr-geo-fixed {
    position: fixed;
    z-index: 9999;
}

.addr-geo-item {
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--gray-700);
    line-height: 1.35;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.addr-geo-item:last-child { border-bottom: none; }
.addr-geo-item:hover { background: var(--primary-light); color: var(--primary); }
.addr-geo-item span { flex: 1; min-width: 0; word-break: break-word; }
.addr-geo-icon {
    color: var(--primary);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Nav Badge */
.nav-link-invitations { position: relative; }
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Invite Form */
.invite-inline-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.invite-input {
    flex: 1;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    max-width: 320px;
}

.invite-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.invite-autocomplete-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

.invite-autocomplete-wrapper .invite-inline-form {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .invite-inline-form {
        flex-wrap: wrap;
    }
    .invite-input {
        max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
    }
    #gen-traveller-link-btn {
        white-space: normal !important;
    }
}

.invite-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.invite-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

.invite-dd-item:last-child {
    border-bottom: none;
}

.invite-dd-item:hover {
    background: var(--primary-light);
}

.invite-dd-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.invite-dd-disabled:hover {
    background: transparent;
}

.invite-dd-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.invite-dd-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.invite-dd-nat-name { font-size: 0.72rem; color: var(--gray-500); vertical-align: middle; }

.invite-dd-avatar {
    font-size: 1.3rem;
    color: var(--gray-400);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.invite-dd-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invite-dd-info strong {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-dd-username {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.invite-dd-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.invite-dd-location {
    font-size: 0.78rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.invite-dd-location i {
    margin-right: 0.15rem;
}

.invite-dd-badge {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    background: var(--gray-200);
    color: var(--gray-600);
    white-space: nowrap;
}

.invite-dd-badge-notfriend {
    background: #fff3e0;
    color: #e65100;
    font-size: 0.68rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.invite-dd-badge-notfriend i {
    margin-right: 0.2rem;
}
.invite-dd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    background: var(--primary);
    color: #fff;
    transition: background 0.15s;
    flex-shrink: 0;
}
.invite-dd-action-btn:hover {
    background: var(--primary-dark);
}
.invite-dd-action-both {
    background: #e65100;
}
.invite-dd-action-both:hover {
    background: #bf360c;
}
.invite-dd-badge-email {
    background: var(--primary-light);
    color: var(--primary);
}

.invite-dd-email:hover {
    background: var(--primary-light);
}

.invite-dd-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.invite-dd-empty i {
    margin-right: 0.3rem;
}

.btn-xs {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Country Select Dropdown */
.country-select {
    position: relative;
    width: 100%;
}

.multi-nationality-container {
    width: 100%;
}
.multi-nat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.multi-nat-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    padding: 0.3rem 0.55rem 0.3rem 0.45rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-700);
}
.multi-nat-tag img {
    width: 18px;
    height: 14px;
    border-radius: 2px;
}
.multi-nat-tag-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0 0 0 0.15rem;
    font-size: 0.7rem;
    line-height: 1;
    transition: color 0.15s;
}
.multi-nat-tag-remove:hover {
    color: #ef4444;
}
.multi-nat-add-wrap .country-select-display {
    font-size: 0.85rem;
    padding: 0.45rem 0.65rem;
    color: var(--gray-500);
}
.multi-nat-tags:empty + .multi-nat-add-wrap {
    margin-top: 0;
}

.country-select-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    min-height: 42px;
    transition: border-color 0.2s;
}

.country-select.open .country-select-display,
.country-select-display:hover {
    border-color: var(--primary);
}

.country-select-display::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    color: var(--gray-500);
    transition: transform 0.2s;
}

.country-select.open .country-select-display::after {
    transform: rotate(180deg);
}

.country-select-placeholder {
    color: var(--gray-400);
}

.country-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 4px;
    max-height: 280px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.country-select-dropdown.open {
    display: flex;
}

.country-select-search {
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.country-select-list {
    overflow-y: auto;
    max-height: 230px;
}

.country-select-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.country-select-item:hover {
    background: var(--primary-light);
}

.country-select-item.selected {
    background: var(--primary-light);
    font-weight: 600;
}

.country-flag-img {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.country-select-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.85rem;
}

/* City Autocomplete */
.city-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.city-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
}

.city-autocomplete-item:last-child {
    border-bottom: none;
}

.city-autocomplete-item:hover {
    background: var(--primary-light);
}

.city-ac-name {
    font-weight: 600;
    white-space: nowrap;
}

.city-ac-detail {
    color: var(--gray-500);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatar Upload */
.avatar-upload-section {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 0;
}

.avatar-preview {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--gray-200);
    transition: border-color 0.2s;
}

.avatar-preview:hover {
    border-color: var(--primary);
}

.avatar-preview:hover .avatar-overlay {
    opacity: 1;
}

.avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-preview > .fa-user {
    font-size: 2.5rem;
    color: var(--gray-400);
}

.avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
    pointer-events: none;
}

.avatar-overlay i {
    font-size: 1.1rem;
}

@media (hover: none) {
    .avatar-overlay {
        opacity: 0.7;
    }
}

.avatar-upload-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.avatar-upload-info strong {
    font-size: 1.1rem;
}

.avatar-upload-info span {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.avatar-upload-info .btn {
    margin-top: 0.4rem;
    align-self: flex-start;
}

/* Avatar Lightbox */
.avatar-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: avatarLbFadeIn 0.18s ease;
}
@keyframes avatarLbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.avatar-lightbox-img {
    max-width: min(88vw, 480px);
    max-height: 80vh;
    border-radius: 50%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    object-fit: cover;
    display: block;
}
.avatar-lightbox-close {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2001;
}
.avatar-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Avatar Crop Modal */
.avatar-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.avatar-modal-content {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.avatar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.avatar-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.avatar-crop-area {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.avatar-crop-area canvas {
    border-radius: 50%;
    background: #e0e0e0;
    touch-action: none;
}

.avatar-crop-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.avatar-crop-controls label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    white-space: nowrap;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.avatar-crop-controls input[type="range"] {
    width: 100%;
    height: 6px;
    accent-color: var(--primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right, var(--primary) 0%, var(--gray-300) 0%);
    border-radius: 3px;
    outline: none;
    padding: 10px 0;
    box-sizing: content-box;
}
.avatar-crop-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.avatar-crop-controls input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.avatar-crop-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--gray-300);
}
.avatar-crop-controls input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--gray-300);
}
.avatar-crop-controls input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--primary);
}

.avatar-crop-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.avatar-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Profile Visibility Options */
.visibility-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.visibility-option {
    cursor: pointer;
    margin: 0;
    display: flex;
}

.visibility-option input[type="radio"] {
    display: none;
}

.visibility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.85rem 0.5rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    transition: all 0.2s;
    background: #fff;
    flex: 1;
}

.visibility-card i {
    font-size: 1.3rem;
    color: var(--gray-400);
    transition: color 0.2s;
}

.visibility-card strong {
    font-size: 0.82rem;
}

.visibility-card span {
    font-size: 0.7rem;
    color: var(--gray-500);
    line-height: 1.3;
}

.visibility-option:hover .visibility-card {
    border-color: var(--primary);
    background: var(--primary-light);
}

.visibility-option.active .visibility-card,
.visibility-option input:checked + .visibility-card {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary);
}

.visibility-option.active .visibility-card i,
.visibility-option input:checked + .visibility-card i {
    color: var(--primary);
}

@media (max-width: 600px) {
    .visibility-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Travelers */
.travelers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: stretch;
}

.traveler-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 350px;
    min-height: 72px;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    position: relative;
}

.traveler-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--primary-light);
    transform: translateY(-1px);
}

.traveler-pending {
    opacity: 0.7;
    border-style: dashed;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.traveler-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-top: 2px;
}

.traveler-avatar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), #dbeafe);
    color: var(--primary);
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59,130,246,0.15);
}

.traveler-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.traveler-card .traveler-avatar .fa-crown { color: #f59e0b; font-size: 1.1rem; }

.traveler-flag-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,0.15);
}

.traveler-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.traveler-nat-names { display: block; font-size: 0.72rem; color: var(--gray-400); margin-top: 2px; line-height: 1.3; }

.traveler-info {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.traveler-role-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.traveler-info strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-800);
    line-height: 1.3;
}

.traveler-role, .traveler-status {
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 62px;
    text-align: center;
}

.role-owner { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; font-size: 0.76rem; font-weight: 700; padding: 3px 12px; }
.role-manager { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.role-member { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); color: #4b5563; }
.role-non-traveling { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); color: #4b5563; border: 1px solid #d1d5db; }
.role-tour_leader { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border: 1px solid #fcd34d; }
.status-pending { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

.traveler-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.btn-remove-traveler {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.2s;
}
.btn-remove-traveler:hover {
    background: #fca5a5;
    color: #991b1b;
}

.btn-leave-trip {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.2s;
}
.btn-leave-trip:hover {
    background: #fca5a5;
    color: #991b1b;
}

.traveler-actions-menu {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.traveler-menu-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
    margin-top: 2px;
}
.traveler-menu-btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}
.traveler-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}
.traveler-menu-dropdown.show {
    display: block;
}
.traveler-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.82rem;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s;
}
.traveler-menu-item:hover {
    background: var(--gray-50);
}
.traveler-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.8rem;
}
.traveler-menu-danger {
    color: #dc2626;
}
.traveler-menu-danger i {
    color: #dc2626;
}
.traveler-menu-danger:hover {
    background: #fef2f2;
}
/* Food card: Edit/Remove inside collapsible section */
.food-collapse-actions { display: flex; gap: 0.4rem; padding: 0.5rem 0 0.1rem; margin-top: 0.25rem; border-top: 1px solid var(--border); }
.food-collapse-edit-btn { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; font-size: 0.75rem; }
.food-collapse-edit-btn:hover { background: #dbeafe; border-color: #93c5fd; }
.food-collapse-remove-btn { color: #dc2626; border-color: #fecaca; background: #fef2f2; font-size: 0.75rem; }
.food-collapse-remove-btn:hover { background: #fee2e2; border-color: #f87171; }

.traveler-custom-dates {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--primary);
    background: #eff6ff;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 500;
    border: 1px solid #dbeafe;
}
.traveler-custom-dates i {
    font-size: 0.6rem;
}

/* Traveller availability icon button in section header */
.traveler-avail-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 999px;
    padding: 2px 8px 2px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 0.35rem;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.traveler-avail-btn:hover {
    background: #fde68a;
    border-color: #f59e0b;
}
.traveler-avail-count {
    font-size: 0.68rem;
    font-weight: 700;
}

/* Traveller Availability Modal */
.traveler-avail-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 480px;
    width: 94%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}
.traveler-avail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.traveler-avail-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.traveler-avail-subtitle {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0;
    padding: 0.55rem 1.25rem;
    background: #fafafa;
    border-bottom: 1px solid #f3f4f6;
}
.traveler-avail-list {
    padding: 0.25rem 0;
    max-height: 340px;
    overflow-y: auto;
}
.traveler-avail-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.traveler-avail-row:last-child { border-bottom: none; }
.traveler-avail-icon {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 1.3rem;
    text-align: center;
}
.traveler-avail-info { flex: 1; min-width: 0; }
.traveler-avail-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.traveler-avail-name strong { font-size: 0.88rem; }
.traveler-avail-role-badge {
    font-size: 0.67rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
}
.traveler-avail-role-badge.role-manager { background: #dbeafe; color: #1e40af; }
.traveler-avail-role-badge.role-traveller { background: #f3f4f6; color: #374151; }
.traveler-avail-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.avail-participates-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
}
.avail-absent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
}
.traveler-avail-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.7rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}
.modal-close-x {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: color 0.15s;
}
.modal-close-x:hover { color: var(--gray-700); }

/* Destination partial-presence badge — red circle, top-right corner of the card */
.dest-partial-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #dc2626;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}
.dest-partial-badge:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

.adjust-dates-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-width: 420px;
    width: 92%;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.adjust-dates-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.adjust-dates-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-800);
}
.adjust-dates-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.adjust-dates-modal-close:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}
.adjust-dates-modal-body {
    padding: 1.25rem;
}
.adjust-dates-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.role-dropdown-form { display: inline; }
.role-select {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    appearance: auto;
    outline: none;
}
.role-select-member {
    background: #e5e7eb;
    color: #4b5563;
}
.role-select-manager {
    background: #dbeafe;
    color: #1e40af;
}
.role-select-tour_leader {
    background: #fef3c7;
    color: #92400e;
}

/* Invitations Page */
.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.invitation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: var(--transition);
}

.invitation-card:hover { box-shadow: var(--shadow); }

.invitation-pending { border-left: 4px solid var(--accent); }

.invitation-info { flex: 1; min-width: 0; }
.invitation-info h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.invitation-info h3 a { color: var(--gray-800); }
.invitation-info h3 a:hover { color: var(--primary); }
.invitation-desc { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 0.25rem; }

.invitation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.invitation-meta i { margin-right: 3px; }

.invitation-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    padding: 0 7px;
}
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-invited {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
}
.trip-owner { font-size: 0.85rem; color: var(--gray-500); margin-top: 0.25rem; }

.flex-grow { flex: 1; }

@media (max-width: 768px) {
    .invitation-card { flex-direction: column; align-items: flex-start; }
    .invitation-actions { align-self: flex-end; }
    .traveler-card { max-width: 100%; }
}

/* Airline Autocomplete */
.airline-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
}
.airline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.airline-item:last-child { border-bottom: none; }
.airline-item:hover { background: var(--gray-50); }
.airline-item.airline-empty { color: var(--gray-500); cursor: default; justify-content: center; font-style: italic; }
.airline-name { font-weight: 500; font-size: 0.9rem; }
.airline-codes { font-weight: 400; color: var(--primary); font-size: 0.8rem; background: rgba(99,102,241,0.08); padding: 0.1rem 0.35rem; border-radius: 3px; margin-left: 0.35rem; }
.airline-country { font-size: 0.78rem; color: var(--gray-500); white-space: nowrap; }

/* Airport Autocomplete */
.airport-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
}
.airport-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.airport-item:last-child { border-bottom: none; }
.airport-item:hover { background: var(--gray-50); }
.airport-item.airport-empty { color: var(--gray-500); cursor: default; justify-content: center; font-style: italic; }
.airport-iata { font-weight: 700; color: var(--primary); font-size: 0.85rem; background: rgba(99,102,241,0.08); padding: 0.15rem 0.4rem; border-radius: 3px; min-width: 2.2rem; text-align: center; flex-shrink: 0; }
.airport-name { font-size: 0.88rem; flex: 1; }
.airport-country { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }

/* Train Station Autocomplete */
.station-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}
.station-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    gap: 0.5rem;
}
.station-item:last-child { border-bottom: none; }
.station-item:hover { background: var(--gray-50); }
.station-item.station-empty { color: var(--gray-500); cursor: default; justify-content: center; font-style: italic; gap: 0.35rem; }
.station-icon { color: var(--primary); font-size: 0.85rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
.station-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.station-name { font-size: 0.88rem; font-weight: 500; }
.station-location { font-size: 0.75rem; color: var(--gray-500); }

/* Rental Company Autocomplete */
.rental-company-dropdown,
.location-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}
/* Hotel result highlight in location dropdown */
.loc-item-hotel { background: rgba(251,191,36,0.05); }
.loc-item-hotel:hover { background: rgba(251,191,36,0.12) !important; }
.loc-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 0.08rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    font-weight: 700;
    vertical-align: middle;
}
.loc-badge-db { background: rgba(99,102,241,0.12); color: #4f46e5; }
.loc-item-db { background: rgba(99,102,241,0.03); }
.loc-item-db:hover { background: rgba(99,102,241,0.08) !important; }
.loc-badge-hotel { background: rgba(251,191,36,0.18); color: #b45309; }
.loc-badge-rental { background: rgba(5,150,105,0.12); color: #059669; }
/* Car rental result highlight in location dropdown */
.loc-item-rental { background: rgba(5,150,105,0.04); }
.loc-item-rental:hover { background: rgba(5,150,105,0.1) !important; }
/* "Can't find it?" trigger at bottom of dropdown */
.loc-manual-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: var(--primary);
    border-top: 1px solid var(--gray-200);
    cursor: pointer;
    background: var(--gray-50);
    font-weight: 500;
    transition: background 0.15s;
}
.loc-manual-trigger:hover { background: rgba(37,99,235,0.07); }
/* Manual entry inline form */
.loc-manual-entry {
    padding: 0.75rem;
    background: white;
}
.loc-manual-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.loc-manual-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.2rem;
}
.loc-manual-entry .form-control { font-size: 0.82rem; padding: 0.35rem 0.5rem; }
.loc-manual-back {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 0.78rem;
    cursor: pointer;
    text-align: center;
    padding: 0.3rem;
}
.loc-manual-back:hover { color: var(--gray-700); }

/* Trip Cover Image */
.trip-cover-wrap { margin-bottom: 0; }
.trip-cover-banner {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    position: relative;
    margin-bottom: 1rem;
}
.trip-cover-change-btn {
    background: rgba(0,0,0,0.5);
    color: #fff;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
    padding: 0;
}
.trip-cover-change-btn:hover { background: rgba(0,0,0,0.7); }
.trip-cover-placeholder {
    width: 100%;
    height: 120px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--gray-50);
}
.trip-cover-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    font-family: inherit;
    transition: color 0.2s;
}
.trip-cover-upload-btn:hover { color: var(--primary); }
.trip-cover-upload-btn i { font-size: 1.2rem; }

/* Trip Card Cover (Dashboard) */
.trip-card-cover {
    height: 165px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: -1.25rem -1.25rem 0.75rem -1.25rem;
    position: relative;
    background-color: #e5e7eb;
}
.trip-card-cover-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cover Button Groups */
.cover-btn-group {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.35rem;
}
.dest-thumb-btn-group {
    position: absolute;
    bottom: 0.35rem;
    right: 0.35rem;
    display: flex;
    gap: 0.25rem;
}
.cover-delete-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(220,53,69,0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
    z-index: 2;
    opacity: 0;
}
.trip-cover-banner:hover .cover-delete-btn,
.dest-thumb:hover .cover-delete-btn,
.stop-thumb-wrap:hover .cover-delete-btn { opacity: 1; }
.cover-delete-btn:hover { background: rgba(220,53,69,1); }
.cover-delete-btn-sm {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.55rem;
    top: 0.25rem;
    right: 0.25rem;
}
@media (hover: none), (max-width: 600px) {
    .cover-delete-btn { opacity: 1; }
    .dest-thumb-btn-group { opacity: 1; }
    .item-card > .item-card-actions { opacity: 1; }
    .item-card .item-delete-btn { opacity: 1; }
    .stay-card-actions { opacity: 1; }
    .item-card > .item-card-actions:has(.save-to-wish-btn) .btn-icon:not(.save-to-wish-btn) { opacity: 1; }
    .item-stay .stay-card-actions:has(.save-to-wish-btn) .transport-btn-icon:not(.save-to-wish-btn) { opacity: 1; }
    .visited-city-row .btn-icon-danger { opacity: 1; }
    .btn-icon { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .transport-btn-icon { min-width: 36px; min-height: 36px; }
}

/* Image Positioner Modal */
.img-positioner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.img-positioner-modal {
    background: white;
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
.img-positioner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}
.img-positioner-header h3 {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.img-positioner-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.img-positioner-close:hover { color: var(--gray-700); }
.img-positioner-preview {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--gray-100);
    cursor: grab;
    user-select: none;
}
.img-positioner-preview img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    pointer-events: none;
}
.img-positioner-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.img-positioner-label {
    font-size: 0.85rem;
    color: var(--gray-600);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.img-positioner-slider {
    flex: 1;
    accent-color: var(--primary);
    height: 6px;
}
.img-positioner-val {
    font-size: 0.8rem;
    color: var(--gray-500);
    min-width: 40px;
    text-align: right;
}
.img-positioner-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-400);
    margin: 0;
    padding: 0 1.25rem 0.5rem;
}
.img-positioner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--gray-200);
}

@media (max-width: 600px) {
    .destination-header {
        flex-direction: column;
    }
    .dest-thumb-wrap {
        width: 100%;
        height: 140px;
    }
    .dest-thumb {
        min-height: 140px;
        height: 140px;
    }
    .dest-thumb-empty {
        min-height: 60px;
        height: 60px;
    }
    .dest-thumb-wrap:has(.dest-thumb-empty) {
        height: 60px;
    }
    .dest-thumb-wrap.dest-thumb-wrap-empty {
        height: 60px;
    }
    .destination-number {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 0.7rem;
        top: 0.4rem;
        left: 0.4rem;
    }
    .destination-header {
        position: relative;
    }
    .destination-info {
        padding: 0.75rem 0.85rem;
        position: static;
    }
    .dest-partial-badge {
        top: calc(140px - 2rem - 10px);
        bottom: auto;
        right: 10px;
    }
    .destination-info h3 {
        font-size: 1rem;
        line-height: 1.4;
    }
    .dest-currency-badge {
        display: inline-flex;
        margin-left: 0.25rem;
    }
    .destination-meta {
        gap: 0.5rem;
        margin-top: 0.15rem;
        margin-bottom: 0.15rem;
    }
    .destination-desc {
        font-size: 0.85rem;
        margin-top: 0.25rem;
        line-height: 1.45;
    }
    .dest-icons-row {
        gap: 0.35rem;
        margin-top: 0.5rem;
    }
    .dest-icon-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    .dest-icon-label {
        display: inline;
        max-width: 80px;
    }
    .weather-forecast {
        margin: 0.35rem 0 0.15rem;
    }
    .stop-card {
        flex-direction: column;
    }
    .stop-card-layout {
        flex-direction: column;
    }
    .stop-thumb-wrap {
        width: 100%;
        height: 130px;
        min-height: 130px;
    }
    .stop-card-img {
        height: 130px;
    }
    .stop-card-info {
        padding: 0.75rem 0.85rem;
    }
    .stop-name {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .stop-card-meta {
        gap: 0.3rem 0.6rem;
        margin-top: 0.2rem;
    }
    .stop-icon-buttons {
        margin-top: 0.45rem;
    }
    .stop-card-actions {
        padding-top: 0.5rem;
    }
    .dest-view-actions {
        padding-top: 0.4rem;
    }
    .dest-card-footer {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    .stop-card-body > .transport-section,
    .stop-card-body > .food-section,
    .stop-card-body > .activity-section {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
    .transport-card-header { padding: 0.25rem 0.5rem; }
    .transport-leg-label { font-size: 0.72rem; }
    .food-vote-btn { padding: 0.2rem 0.4rem; font-size: 0.78rem; }
    .food-vote-btn span { font-size: 0.65rem; }
    .trip-card-travelers, .trip-card-photos, .trip-card-days, .trip-card-shares { font-size: 0.7rem; padding: 0.15rem 0.4rem; }
    .share-social-grid { grid-template-columns: repeat(2, 1fr); }
    .img-positioner-overlay { padding: 0; align-items: flex-end; }
    .img-positioner-modal { max-width: 100%; border-radius: var(--radius) var(--radius) 0 0; max-height: 90vh; overflow-y: auto; }
    .img-positioner-preview { height: 220px; }
    .img-positioner-controls { padding: 0.5rem 1rem; }
    .img-positioner-actions { padding: 0.5rem 1rem; }
    .img-positioner-hint { padding: 0 1rem 0.25rem; font-size: 0.75rem; }
}
.trip-card { position: relative; }
.share-off-x { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 4; margin: 0; }
.share-off-x button { background: rgba(0,0,0,0.5); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; padding: 0; line-height: 1; transition: background 0.2s; }
.share-off-x button:hover { background: var(--danger, #dc3545); }
.btn-share-off { color: var(--danger, #dc3545); border-color: var(--danger, #dc3545); font-size: 0.75rem; white-space: nowrap; }
.btn-share-off:hover { background: var(--danger, #dc3545); color: #fff; }
.badge-view-only { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-size: 0.72rem; font-weight: 600; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; margin-left: 0.4rem; line-height: 1.2; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(153,27,27,0.15); height: auto; min-width: auto; }
.badge-group-trip { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #fff; font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 4px !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(52,211,153,0.25); height: auto; min-width: auto; }
.badge-group-trip i { font-size: 0.68rem; }
.badge-shared {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 4px !important;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(220,38,38,0.25);
    height: auto;
    min-width: auto;
}
.badge-shared i { font-size: 0.68rem; }
.trip-shared-message {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.45rem 0 0;
    padding: 0.45rem 0.65rem;
    background: #fff7ed;
    border-left: 3px solid #f97316;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: #7c3503;
    font-style: italic;
    line-height: 1.45;
    word-break: break-word;
    width: 100%;
}
.trip-shared-message i {
    color: #f97316;
    font-size: 0.65rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.badge-view-only i { font-size: 0.68rem; }
.badge-trip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 4px !important;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    height: auto;
    min-width: auto;
    margin-left: 0.4rem;
}
.badge-trip-status i { font-size: 0.68rem; }
.badge-status-current {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    box-shadow: 0 1px 3px rgba(6,95,70,0.15);
}
.badge-status-future {
    background: linear-gradient(135deg, #fdba74, #fb923c);
    color: #fff;
    box-shadow: 0 1px 3px rgba(251,146,60,0.25);
}
.badge-status-memories {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    color: #fff;
    box-shadow: 0 1px 3px rgba(196,181,253,0.25);
}
.trip-card-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    background: none;
    border: 1.5px solid rgba(107,114,128,0.35);
    color: var(--gray-500);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    font-weight: 600;
    line-height: 1;
}
.trip-share-label { font-size: 0.75rem; font-weight: 600; }
.trip-share-count { font-size: 0.65rem; font-weight: 700; }
.trip-card-share-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light, #eff6ff);
}
.trip-card-share-btn.has-shares {
    color: #dc2626;
    border-color: rgba(220,38,38,0.4);
}
.trip-card-share-btn.has-shares:hover {
    color: #b91c1c;
    border-color: #b91c1c;
    background: #fef2f2;
}
.shared-trip-card {
    border-left: 4px solid #dc2626;
}
/* ── Dashboard shared-trip heart toggle button ─────────────────────────── */
/* ── Shared-trip heart pin — mirrors .trip-fav-star but green ─────────── */
.trip-card-shared-pin {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
    color: #9ca3af;
}
.trip-card-shared-pin i {
    font-size: 1.1rem;
    color: #9ca3af;
    transition: color 0.25s, transform 0.25s;
}
.trip-card-shared-pin:hover { background: rgba(0,0,0,0.6); }
.trip-card-shared-pin:hover i { color: #16a34a; transform: scale(1.15); }
.trip-card-shared-pin.pinned { background: #16a34a; box-shadow: 0 2px 8px rgba(22,163,74,0.5); color: #fff; }
.trip-card-shared-pin.pinned i { color: #fff; }
.trip-card-shared-pin.pinned:hover { background: #15803d; }
/* ── "Shared by" name badge on cover ──────────────────────────────────── */
.shared-by-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    backdrop-filter: blur(4px);
    max-width: calc(100% - 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trip-share-message {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}
.trip-shared-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.privacy-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.65rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--primary);
    background: #eef2ff;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.privacy-help-btn:hover {
    background: var(--primary);
    color: #fff;
}
.share-friend-fields {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.fp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* No background here — moved to .fp-backdrop so the overlay itself
     * never intercepts pointer events that belong to sheet children. */
    pointer-events: none;
}
.fp-overlay.hidden { display: none; }
.fp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    pointer-events: auto;
}

.fp-sheet {
    background: #fff;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
.fp-sheet.fp-sheet-open {
    transform: translateY(0);
}

.fp-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
}
.fp-handle span {
    width: 36px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
}

.fp-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem 0.75rem;
}
.fp-sheet-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fp-sheet-header h3 i { color: var(--primary); }
.fp-close-btn {
    background: var(--gray-100, #f0f0f0);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.9rem;
    transition: background 0.15s;
    z-index: 10;
    position: relative;
}
.fp-close-btn:hover { background: var(--gray-200, #e0e0e0); }

.fp-search-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 1rem 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--gray-100, #f5f5f5);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}
.fp-search-bar:focus-within {
    background: #fff;
    border-color: var(--primary);
}
.fp-search-bar i { color: var(--gray-400); font-size: 0.9rem; flex-shrink: 0; }
.fp-search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    background: none;
    min-width: 0;
}

.fp-friend-list {
    overflow-y: auto;
    flex: 1 1 0%;
    min-height: 0;
    padding: 0 0.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.fp-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.12s;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.fp-item:hover { background: #f0f6ff; }
.fp-item:active { background: #e0edff; }
.fp-item-active {
    background: #e8f0fe;
    border: 1.5px solid var(--primary);
}

.fp-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6a9dfc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.fp-item-info { flex: 1; min-width: 0; }
.fp-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-item-user {
    font-size: 0.8rem;
    color: var(--gray-500);
    display: block;
}
.fp-item-check { color: var(--primary); font-size: 1.15rem; flex-shrink: 0; }

.fp-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--gray-400);
}
.fp-empty i { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.fp-empty p { margin: 0; font-size: 0.9rem; }

.fp-bottom-action {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem 1rem;
    background: #fafafa;
    border-radius: 0 0 16px 16px;
}
.fp-bottom-action .form-control {
    width: 100%;
    box-sizing: border-box;
}
.fp-selected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #e8f5e9;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.fp-selected-bar.hidden { display: none; }
.fp-selected-name {
    font-size: 0.9rem;
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fp-selected-name i { font-size: 0.85rem; }
.fp-change-btn {
    background: none;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    color: #2e7d32;
    cursor: pointer;
    transition: background 0.15s;
}
.fp-change-btn:hover { background: #c8e6c9; }
.fp-share-btn {
    width: 100%;
}
.fp-share-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 600px) {
    .fp-overlay {
        align-items: center;
    }
    .fp-sheet {
        max-width: 440px;
        height: 65vh;
        max-height: 65vh;
        border-radius: 16px;
        transform: translateY(30px);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .fp-sheet.fp-sheet-open {
        transform: translateY(0);
        opacity: 1;
    }
    .fp-handle { display: none; }
    .fp-bottom-action { border-radius: 0 0 16px 16px; }
}
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    width: 100%;
    animation: exploreModalIn 0.22s ease-out;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.modal-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; }
.modal-close { background: none; border: none; color: #94a3b8; font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 6px; line-height: 1; }
.modal-close:hover { color: #0f172a; background: #f1f5f9; }
.modal-body { padding: 1rem 1.25rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid #f1f5f9; }
.trip-direction-toggle {
    display: flex;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}
.direction-btn {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: none;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--gray-500);
    transition: background 0.15s, color 0.15s;
}
.direction-btn:first-child {
    border-right: 1px solid var(--gray-200);
}
.direction-btn.active {
    background: var(--primary);
    color: #fff;
}
.direction-btn:hover:not(.active) {
    background: var(--gray-50);
    color: var(--gray-700);
}
.transport-return-section {
    border: 1px solid #dbeafe;
    border-radius: 10px;
    margin-top: 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    overflow: hidden;
    animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; margin-top: 0; }
    to { opacity: 1; max-height: 600px; margin-top: 1rem; }
}
.return-section-header {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(59,130,246,0.08);
    border-bottom: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    gap: 8px;
}
.return-section-body {
    padding: 0.75rem 1rem;
}
.return-section-body .form-row {
    margin-bottom: 0.5rem;
}
.stopover-modal-section {
    margin-top: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
}
.stopover-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
}
.stopover-row {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.stopover-row:last-child {
    border-bottom: none;
}
.stopover-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.stopover-row-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
}
.btn-stopover-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.btn-stopover-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}
.stopover-row .form-row {
    margin-bottom: 0.3rem;
}
.stopover-location-badge {
    display: inline-block;
    background: #dbeafe;
    color: var(--primary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}
.stopover-details-list {
    margin: 0.3rem 0 0.3rem 1.3rem;
    border-left: 2px dashed #93c5fd;
    padding-left: 0.75rem;
}
.stopover-detail-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0.25rem 0;
    font-size: 0.78rem;
}
.transport-legs-list {
    margin: 0.25rem 0;
}
.transport-leg-detail {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
}
.transport-leg-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
}
.transport-leg-route {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}
.transport-leg-times {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    flex-wrap: wrap;
    margin-top: 0.2rem;
    line-height: 1.35;
}
.transport-leg-times > i:first-child {
    color: var(--primary) !important;
    font-size: 0.85rem !important;
}
.transport-leg-times .tz-abbr {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-left: 0.15rem;
    padding: 0.05rem 0.35rem;
    background: var(--gray-100, #f3f4f6);
    border-radius: 0.5rem;
}
@media (max-width: 640px) {
    .transport-leg-times {
        font-size: 1rem;
        gap: 0.35rem;
        flex-wrap: wrap;
        align-items: center;
    }
    .transport-leg-times > i.fa-arrow-right {
        color: var(--primary) !important;
        font-size: 0.75rem !important;
        margin: 0 0.25rem !important;
    }
}

/* Transport modal: error banner + invalid fields */
.tm-error-banner {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.tm-error-banner i {
    color: #dc2626;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.tm-error-banner strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.tm-error-banner ul {
    margin: 0;
    padding-left: 1.1rem;
}
.tm-error-banner ul:empty {
    display: none;
}
.tm-error-banner li {
    margin: 0.1rem 0;
}
.tm-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
    background-color: #fff7f7 !important;
}

/* Transport modal: clearer, finger-friendly time inputs on mobile */
#transport-modal-form input.flatpickr-input,
#transport-modal-form input[type="text"][id^="tm-"] {
    font-weight: 500;
}
@media (max-width: 640px) {
    #transport-modal-form input.flatpickr-input,
    #transport-modal-form input[type="text"] {
        font-size: 16px; /* prevents iOS Safari zoom on focus */
        min-height: 42px;
    }
    #transport-modal-form select.form-control {
        font-size: 16px;
        min-height: 42px;
    }
    /* Stack date/time pairs into single column for easier reading on small screens */
    #transport-modal-form .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
.transport-leg-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
}
.transport-layover-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
    padding: 0.15rem 0;
}
.layover-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.layover-label {
    font-size: 0.72rem;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.stopover-badge {
    display: inline-block;
    background: #dbeafe;
    color: var(--primary);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stopover-detail-location {
    font-weight: 600;
    color: var(--gray-700);
}
.stopover-detail-terminal {
    background: var(--gray-100);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
    color: var(--gray-600);
}
.stopover-detail-times {
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
}
.stopover-layover-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
}
.modal-content {
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}
.shared-with-compact {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
.shared-with-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: #fce4ec;
    color: #c62828;
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.shared-with-btn:hover {
    background: #f8bbd0;
}
.shared-modal {
    max-width: 420px;
    width: 90%;
}
.shared-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.shared-modal .modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #c62828;
}
.shared-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    z-index: 10;
    position: relative;
}
.shared-modal .modal-body {
    padding: 0.75rem 1.25rem 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
}
.shared-list {
    display: flex;
    flex-direction: column;
}
.shared-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.shared-list-item:last-child {
    border-bottom: none;
}
.shared-list-avatar {
    font-size: 1.4rem;
    color: var(--primary);
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}
.shared-list-avatar-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.shared-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.shared-list-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shared-list-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-revoke-form {
    margin: 0;
    flex-shrink: 0;
}
.share-revoke-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 1rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}
.share-revoke-btn:hover {
    color: #ef4444;
}
@media (max-width: 600px) {
    .share-friend-fields { flex-direction: column; align-items: stretch; }
    .share-friend-fields .form-group { flex: none !important; }
}

@media (max-width: 480px) {
    .dashboard-welcome { display: none; }
    .dashboard-header .btn:not(.btn-dash-order) { display: none; }
    .stats-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.65rem;
        padding-bottom: 0.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .stat-card {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 1rem 0.85rem;
        scroll-snap-align: start;
    }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 0.78rem; }
    .stat-total { font-size: 0.85rem; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-search { margin-left: 0; }
    .destination-meta { flex-direction: column; gap: 0.25rem; }
    .trip-cover-banner { height: 160px; }
    .section-title-inline { font-size: 0.75rem; padding: 0.35rem 0.6rem; gap: 0.35rem; }
    .section-title-inline i { font-size: 0.7rem; }
    .transport-details { padding: 0.5rem 0.6rem; }
    .transport-info-row { font-size: 0.8rem; }
    .transport-duration { font-size: 0.7rem; padding: 0.1rem 0.4rem; }
    .dest-icon-label { display: inline; max-width: 65px; font-size: 0.68rem; }
    .dest-icon-btn { padding: 0.25rem 0.5rem; font-size: 0.72rem; }
    .stay-map-thumb { height: 80px; }
    .stay-map-expand { display: flex; opacity: 0.75; }
    .item-card-info strong { font-size: 0.82rem; }
    .item-cat { font-size: 0.7rem; }
    .item-dates, .item-addr, .item-detail { font-size: 0.75rem; }
    .weather-days { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
    .weather-day { min-width: 48px; padding: 0.25rem; scroll-snap-align: start; }
    .weather-day-icon { font-size: 0.75rem; }
    .weather-day-temps { font-size: 0.6rem; }
}

.monument-suggest-btn { color: #b8860b; border-color: #b8860b; }
.monument-suggest-btn:hover { background: #b8860b; color: #fff; }
.monument-panel { margin-top: 0.75rem; background: #fffdf5; border: 1px solid #e8dfc0; border-radius: 12px; overflow: hidden; }
.monument-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, #f5e6c8, #fdf4e3); font-size: 0.92rem; color: #6b5a2e; flex-wrap: wrap; position: relative; }
.monument-header i.fa-landmark { color: #b8860b; }
.monument-count { font-size: 0.88rem; color: #6b5a2e; font-weight: 600; }
.monument-unesco-filter { background: #fff; border: 1.5px solid #b8860b; color: #b8860b; cursor: pointer; font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 12px; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; transition: all 0.2s; margin-left: 0.35rem; }
.monument-unesco-filter:hover { background: #fdf4e3; }
.monument-unesco-filter.active { background: #b8860b; color: #fff; border-color: #b8860b; }
.monument-unesco-badge { color: #b8860b; font-size: 0.75rem; margin-left: 0.25rem; }
.monument-close-btn { background: none; border: none; cursor: pointer; color: #999; font-size: 1rem; padding: 0.25rem; margin-left: 0.5rem; }
.monument-close-btn:hover { color: #333; }
.monument-radius-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: #faf6ee; border-bottom: 1px solid #ece3cc; flex-wrap: wrap; }
.monument-radius-label { font-size: 0.8rem; color: #8a7a4a; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.2rem; }
.monument-radius-btn { background: #fff; border: 1.5px solid #d4c9a8; color: #7a6c3a; cursor: pointer; font-size: 0.78rem; padding: 0.2rem 0.65rem; border-radius: 12px; font-weight: 600; transition: all 0.2s; }
.monument-radius-btn:hover { background: #fdf4e3; border-color: #b8860b; color: #b8860b; }
.monument-radius-btn.active { background: #b8860b; color: #fff; border-color: #b8860b; }
.monument-search-bar { position: relative; padding: 0.5rem 1rem; background: #faf6ee; border-bottom: 1px solid #ece3cc; }
.monument-search-input { width: 100%; padding: 0.4rem 0.75rem 0.4rem 2rem; border: 1.5px solid #d4c9a8; border-radius: 8px; font-size: 0.85rem; background: #fff; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.monument-search-input:focus { border-color: #b8860b; box-shadow: 0 0 0 2px rgba(184,134,11,0.12); }
.monument-search-input::placeholder { color: #b0a47a; }
.monument-search-icon { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); color: #b0a47a; font-size: 0.8rem; pointer-events: none; }
.monument-loading, .monument-empty { padding: 1.5rem; text-align: center; color: #888; font-size: 0.9rem; }
.monument-loading i { margin-right: 0.5rem; color: #b8860b; }
.monument-list { max-height: 400px; overflow-y: auto; }
.monument-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #f0e8d0; transition: background 0.15s; }
.monument-item:last-child { border-bottom: none; }
.monument-item:hover { background: #fdf8ed; }
.monument-info { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.monument-name { font-weight: 600; font-size: 0.9rem; color: #333; }
.monument-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; color: #888; }
.monument-country i, .monument-dist i { margin-right: 0.2rem; }
.monument-cat { padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.monument-cat-cultural { background: #e8d4f0; color: #7b2fa0; }
.monument-cat-natural { background: #d4f0d4; color: #2e7d32; }
.monument-cat-mixed { background: #d4e8f0; color: #1565c0; }
.monument-cat-religious { background: #fef3c7; color: #92400e; }
.monument-cat-monument { background: #fce7f3; color: #9d174d; }
.monument-desc { font-size: 0.8rem; color: #777; line-height: 1.35; margin-top: 0.15rem; }
.monument-website { display: block; font-size: 0.78rem; margin-top: 0.2rem; }
.monument-website i { color: var(--primary); margin-right: 0.2rem; }
.monument-website a { color: var(--primary); text-decoration: none; word-break: break-all; }
.monument-website a:hover { text-decoration: underline; }
.monument-add-btn { flex-shrink: 0; align-self: center; white-space: nowrap; }
.monument-summary { padding: 0.6rem 1rem; font-size: 0.88rem; color: #6b5a2e; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid #ece3cc; background: #faf6ee; }
.explore-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.explore-modal { background: #fffdf5; border-radius: 16px; width: 100%; max-width: 680px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; animation: exploreModalIn 0.25s ease-out; }
@media (max-width: 600px) { .explore-modal { max-height: 80vh; border-radius: 12px; } .explore-modal-overlay { padding: 1rem; padding-top: 3.5rem; align-items: flex-start; } .explore-modal-header { padding: 0.75rem 1rem; } .explore-modal-header h3 { font-size: 0.95rem; } }
@keyframes exploreModalIn { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.explore-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: linear-gradient(135deg, #f5e6c8, #fdf4e3); border-bottom: 1px solid #e8dfc0; }
.explore-modal-header h3 { margin: 0; font-size: 1.05rem; color: #6b5a2e; display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; flex: 1; }
.explore-modal-header h3 span { word-break: break-word; }
.explore-modal-header h3 i { color: #b8860b; flex-shrink: 0; margin-top: 0.15rem; }
.explore-modal-close { background: none; border: none; font-size: 1.5rem; color: #999; cursor: pointer; padding: 0 0.25rem; line-height: 1; flex-shrink: 0; }
.explore-modal-close:hover { color: #333; }
.explore-modal-body { flex: 1; overflow-y: auto; }
.explore-modal-body .monument-list { max-height: none; overflow-y: visible; }
.btn-success { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.monument-visitors { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; background: #e8f5e9; color: #2e7d32; padding: 0.1rem 0.45rem; border-radius: 10px; font-weight: 600; white-space: nowrap; }

.comp-images { margin-top: 0; padding: 0.4rem 0.7rem; border-top: 1px solid #f0f0f0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex-basis: 100%; box-sizing: border-box; }
.comp-images-gallery { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.comp-img-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.12); overflow: hidden; }
.comp-img-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; display: block; }
.comp-img-thumb:hover img { transform: scale(1.05); }
.comp-img-uploader { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0.55rem; color: #fff; background: rgba(0,0,0,0.55); padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; pointer-events: none; }
.comp-img-delete { position: absolute; top: 2px; right: 2px; background: rgba(220,53,69,0.85); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.comp-img-thumb:hover .comp-img-delete { display: flex; }
.comp-img-thumb-actions { position: absolute; bottom: 2px; left: 2px; display: none; flex-direction: row; gap: 2px; z-index: 4; }
.comp-img-thumb:hover .comp-img-thumb-actions,
.dest-thumb:hover .comp-img-thumb-actions,
.stop-thumb-wrap:hover .comp-img-thumb-actions { display: flex; }
.comp-img-thumb-actions:has(.active) { display: flex; }
/* Always show action bar on memories thumbnails the user can archive */
.memories-photo[data-can-archive="1"] .comp-img-thumb-actions { display: flex; }
.comp-img-thumb-actions .comp-img-reel-pick-btn,
.comp-img-thumb-actions .comp-img-archive-btn { position: static; bottom: auto; left: auto; display: flex; z-index: auto; }
.comp-img-reel-pick-btn { position: absolute; bottom: 2px; left: 2px; background: rgba(100,100,100,0.75); color: #eee; border: none; border-radius: 4px; width: 18px; height: 18px; font-size: 9px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1; z-index: 4; transition: background 0.15s, color 0.15s; }
.comp-img-thumb:hover .comp-img-reel-pick-btn,
.dest-thumb:hover .comp-img-reel-pick-btn,
.stop-thumb-wrap:hover .comp-img-reel-pick-btn { display: flex; }
.comp-img-reel-pick-btn.active { display: flex !important; background: #2563eb; color: #fff; }
.comp-img-archive-btn { background: rgba(100,100,100,0.75); color: #eee; border: none; border-radius: 4px; width: 18px; height: 18px; font-size: 9px; cursor: pointer; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background 0.15s, color 0.15s; }
.comp-img-archive-btn.active { background: #b44626; color: #fff; }
.comp-img-archive-btn:disabled { cursor: default; pointer-events: none; background: #b44626; color: #fff; opacity: 1; }
.comp-img-thumb.is-archived { opacity: 0.7; }
.img-archived-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); border-radius: inherit; pointer-events: none; z-index: 3; }
.img-archived-overlay i { color: rgba(255,255,255,0.85); font-size: 1.1rem; }
/* Owner's own archived photo: show photo normally, just a red eye-slash icon centred on it */
.comp-img-thumb.is-archived[data-is-uploader="1"] .img-archived-overlay { background: transparent; }
.comp-img-thumb.is-archived[data-is-uploader="1"] .img-archived-overlay i { color: #ef4444; font-size: 1.6rem; text-shadow: 0 1px 4px rgba(0,0,0,0.65); }
/* Alert label shown at the bottom of the owner's archived photo thumbnail */
.img-archived-owner-msg { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(153,27,27,0.88); color: #fff; font-size: 0.58rem; font-weight: 600; text-align: center; padding: 2px 4px; z-index: 4; border-radius: 0 0 4px 4px; line-height: 1.35; pointer-events: none; }
/* Label for organiser/manager viewing someone else's archived photo */
.img-archived-manager-msg { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(55,65,81,0.88); color: #fff; font-size: 0.58rem; font-weight: 600; text-align: center; padding: 2px 4px; z-index: 4; border-radius: 0 0 4px 4px; line-height: 1.35; pointer-events: none; }
.comp-img-upload-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; border: 1.5px dashed #aaa; border-radius: 8px; font-size: 0.8rem; color: #666; background: #f5f5f5; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.comp-img-upload-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(79,70,229,0.06); }
.comp-upload-badge { display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-size: 0.68rem; font-weight: 700; border-radius: 10px; padding: 0.1rem 0.38rem; margin-left: 0.25rem; min-width: 28px; letter-spacing: 0.01em; }
.comp-img-count { font-size: 0.72rem; opacity: 0.75; }
.comp-img-limit { font-size: 0.75rem; color: #999; display: inline-flex; align-items: center; gap: 0.25rem; }
.comp-img-limit i { color: #4caf50; }
.comp-images-hidden { display: none; }
.comp-sortable .comp-img-thumb { cursor: grab; }
.comp-sortable .comp-img-thumb:active { cursor: grabbing; }
.comp-img-thumb.drag-over { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.comp-img-thumb.dragging { opacity: 0.4; }
/* === Thumbnail icons: hidden on small photos — actions only in full-view lightbox === */
.comp-img-thumb .comp-img-delete,
.comp-img-thumb:hover .comp-img-delete { display: none !important; }
.comp-img-thumb-actions,
.comp-img-thumb:hover .comp-img-thumb-actions,
.dest-thumb:hover .comp-img-thumb-actions,
.stop-thumb-wrap:hover .comp-img-thumb-actions,
.comp-img-thumb-actions:has(.active),
.memories-photo[data-can-archive="1"] .comp-img-thumb-actions { display: none !important; }
.comp-img-reel-pick-btn,
.comp-img-thumb:hover .comp-img-reel-pick-btn,
.dest-thumb:hover .comp-img-reel-pick-btn,
.stop-thumb-wrap:hover .comp-img-reel-pick-btn,
.comp-img-reel-pick-btn.active { display: none !important; }
/* === Reel icon: temporarily hidden in lightbox === */
#lightbox-reel-pick-btn { display: none !important; }

.plan-card { position: relative; overflow: hidden; }
.plan-toggle-wrap { display: flex; justify-content: center; }
.plan-toggle { position: relative; display: inline-flex; background: #f0f0f0; border-radius: 14px; padding: 4px; gap: 0; }
.plan-toggle-slider { position: absolute; top: 4px; bottom: 4px; border-radius: 11px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; pointer-events: none; }
.plan-toggle.on-free .plan-toggle-slider { left: 4px; width: calc(50% - 4px); background: linear-gradient(135deg, #3949ab, #5c6bc0); box-shadow: 0 3px 10px rgba(57,73,171,0.3); }
.plan-toggle.on-premium .plan-toggle-slider { left: 50%; width: calc(50% - 4px); background: linear-gradient(135deg, #f9a825, #f57f17); box-shadow: 0 3px 10px rgba(245,127,23,0.35); }
.plan-toggle-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.6rem; border: none; background: transparent; font-size: 0.95rem; font-weight: 600; cursor: pointer; border-radius: 11px; transition: color 0.3s; white-space: nowrap; }
.plan-toggle.on-free .plan-btn-free { color: #fff; }
.plan-toggle.on-free .plan-btn-premium { color: #999; }
.plan-toggle.on-premium .plan-btn-free { color: #999; }
.plan-toggle.on-premium .plan-btn-premium { color: #fff; }
.plan-toggle-btn:hover { opacity: 0.85; }

.friends-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #e2e4e9;
    padding: 0.4rem;
    border-radius: 12px;
    border: 2px solid #fdba74;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.friends-tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    position: relative;
}
.friends-tab i { font-size: 0.9rem; transition: color 0.2s ease; }
.friends-tab:hover {
    color: var(--gray-700);
    background: white;
    border-color: var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.friends-tab.active {
    color: white;
    background: var(--primary);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}
.friends-tab.active i { color: white; }
.tab-count {
    font-size: 0.7rem;
    background: rgba(0,0,0,0.08);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    color: var(--gray-500);
    font-weight: 600;
}
.friends-tab.active .tab-count {
    background: rgba(255,255,255,0.25);
    color: white;
}
.tab-badge {
    font-size: 0.65rem;
    background: var(--danger);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(239,68,68,0.4);
}
.friends-tab.active .tab-badge {
    background: white;
    color: var(--danger);
    box-shadow: none;
}

.btn-add-friend-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-add-friend-sm:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(79,70,229,0.35);
}
.traveler-friend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--success);
    background: rgba(34,197,94,0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    flex-shrink: 0;
}
.traveler-friend-badge.pending {
    color: var(--warning, #f59e0b);
    background: rgba(245,158,11,0.1);
}

.friends-section { max-width: 100%; }
.friends-sort-bar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.75rem; flex-wrap: wrap; }
.friends-count { font-size: 0.9rem; color: var(--gray-500); font-weight: 500; }
.friend-filters-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.flag-dropdown { position: relative; }
.flag-dropdown-btn { font-family: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.6rem; border: 1px solid var(--gray-200); border-radius: 8px; background: white; color: var(--gray-600); cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: border-color 0.15s, box-shadow 0.15s; }
.flag-dropdown-btn:hover { border-color: var(--primary); }
.flag-dropdown.has-value .flag-dropdown-btn { border-color: var(--primary); color: var(--gray-800); background: #eef2ff; }
.flag-dropdown-btn i.fa-chevron-down { font-size: 0.55rem; color: var(--gray-400); transition: transform 0.15s; }
.flag-dropdown.open .flag-dropdown-btn i.fa-chevron-down { transform: rotate(180deg); }
.flag-dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; max-height: 240px; overflow-y: auto; background: white; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 100; padding: 0.3rem; }
#dd-label .flag-dropdown-menu { left: auto; right: 0; }
.flag-dropdown.open .flag-dropdown-menu { display: block; }
.flag-dropdown-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.8rem; color: var(--gray-700); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background 0.1s; }
.flag-dropdown-item:hover { background: #f0f4ff; color: var(--primary); }
.flag-dd-img { width: 20px; height: 15px; border-radius: 2px; vertical-align: middle; flex-shrink: 0; }
.flag-dd-label { display: flex; align-items: center; gap: 0.35rem; }
.flag-dd-label img { width: 18px; height: 13px; border-radius: 2px; }

.friends-list-view {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: none;
    border: none;
    overflow: visible;
}
.friend-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-bottom: none;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.15s ease;
}
.friend-row:last-child { border-bottom: none; }
.friend-row:hover { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer; }
.friend-row-top { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; padding: 0.6rem 0.85rem; }
.friend-row-avatar { position: relative; flex-shrink: 0; }
.friend-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.friend-row-fav { flex-shrink: 0; }
.friend-row-details { display: none; }
.friend-row-mobile-link { display: block; position: absolute; inset: 0; z-index: 1; }
.friend-travel-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    z-index: 2;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary);
    background: #eef2ff;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 11px;
}
.friend-travel-corner i { font-size: 0.6rem; }
.page-header-count { display: inline; font-weight: 400; font-size: 0.85em; color: var(--gray-400); }
.friend-filter-select {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 2rem 0.35rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: white;
    color: var(--gray-600);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.friend-row-flags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.friend-row-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.friend-detail-desktop { display: contents; }

.together-list { display: flex; flex-direction: column; gap: 0.5rem; }
.together-card {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.together-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.together-card-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    color: inherit;
}
.together-card-avatar { flex-shrink: 0; }
.together-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.together-card-name-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}
.together-card-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.together-card-username {
    font-size: 0.78rem;
    color: var(--gray-400);
}
.together-card-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}
.together-card-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
.together-card-trips {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.6rem 0.85rem;
    border-left: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    min-width: 60px;
}
.together-card-trips:hover { background: #eef2ff; }
.together-card-trips i { font-size: 1rem; color: var(--primary); }
.together-card-trip-count { font-size: 1.1rem; font-weight: 700; color: var(--primary); line-height: 1; }
.together-card-trip-label { font-size: 0.65rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.03em; }

.shared-card-counts {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.75rem 0 0;
    flex-shrink: 0;
}
.shared-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.shared-pill:hover { opacity: 0.8; }
.shared-pill-sent {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #3730a3;
    border: 1px solid #a5b4fc;
}
.shared-pill-received {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.friend-row-name-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.friend-nationality-flag { vertical-align: middle; border-radius: 2px; box-shadow: 0 0 1px rgba(0,0,0,0.2); font-size: 0.78rem; color: var(--gray-500); white-space: nowrap; }
.friend-nationality-flag img { vertical-align: middle; border-radius: 2px; }
.friend-label-badge { display: inline-flex; align-items: center; gap: 0.25rem; background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; letter-spacing: 0.02em; width: fit-content; vertical-align: middle; }
.friend-label-badge--green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
.friend-label-trigger { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; position: relative; z-index: 2; vertical-align: middle; }
.friend-label-trigger:hover .friend-label-badge { filter: brightness(0.93); }
.friend-label-trigger .fa-chevron-down { opacity: 0.7; font-size: 0.65em; }
.friend-add-label-btn { display: inline-flex; align-items: center; gap: 0.2rem; background: none; border: 1px dashed #a5b4fc; color: #6366f1; font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.4rem; border-radius: 4px; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: all 0.15s; position: relative; z-index: 2; vertical-align: middle; }
.friend-add-label-btn:hover { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
.friend-label-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.friend-label-filter { background: #f3f4f6; border: 1px solid var(--gray-200); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 500; color: var(--gray-500); cursor: pointer; transition: all 0.15s; font-family: inherit; }
.friend-label-filter:hover { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.friend-label-filter.active { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border-color: #a5b4fc; font-weight: 600; }
.friend-flag-clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; border-radius: 2px; }
.friend-flag-clickable:hover { transform: scale(1.3); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.friend-nationality-active-filter { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.nat-active-pill { display: inline-flex; align-items: center; gap: 0.35rem; background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border: 1px solid #a5b4fc; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.nat-active-clear { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 0.75rem; padding: 0.15rem 0.3rem; border-radius: 50%; transition: all 0.15s; }
.nat-active-clear:hover { background: #fee2e2; color: #ef4444; }
.nat-filter-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.trips-shared-badge { border: none; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.72rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-family: inherit; transition: all 0.15s; }
.trips-shared-sent { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border: 1px solid #a5b4fc; }
.trips-shared-sent:hover { background: linear-gradient(135deg, #c7d2fe, #a5b4fc); border-color: #818cf8; }
.trips-shared-received { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; border: 1px solid #6ee7b7; }
.trips-shared-received:hover { background: linear-gradient(135deg, #a7f3d0, #6ee7b7); border-color: #34d399; }
.friend-label-picker { position: relative; display: inline-flex; }
.friend-label-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 999; justify-content: center; align-items: center; }
.friend-label-overlay.active { display: flex; }
.friend-label-dropdown { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 1000; padding: 0.3rem 0; min-width: 220px; max-width: 90vw; }
.friend-label-dropdown-title { font-size: 0.7rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0.75rem 0.25rem; border-bottom: 1px solid #f3f4f6; }
.friend-label-option { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--gray-600); transition: background 0.1s; font-family: inherit; }
.friend-label-option:hover { background: #f0f4ff; color: var(--primary); }
.friend-label-option.active { background: #e0e7ff; color: #3730a3; font-weight: 600; }
.friend-label-remove { color: #ef4444; font-size: 0.75rem; border-top: 1px solid #f3f4f6; margin-top: 0.15rem; padding-top: 0.45rem; }
.friend-label-remove:hover { background: #fef2f2; color: #dc2626; }
.friend-travel-badge { font-size: 1.1rem; color: var(--primary); opacity: 0.7; display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.friend-travel-badge:hover { opacity: 1; }
.trips-together-count { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border: 1px solid #a5b4fc; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-family: inherit; transition: all 0.15s; }
.trips-together-count:hover { background: linear-gradient(135deg, #c7d2fe, #a5b4fc); border-color: #818cf8; }
.shared-trips-popup { min-width: 280px; max-width: 90vw; padding: 0.5rem 0; }
.shared-trip-link { text-decoration: none; cursor: pointer; border-radius: 4px; }
.shared-trip-link:hover { background: #eef2ff; }
.shared-trip-link .shared-trip-name { color: var(--primary); }
.shared-trips-title { font-size: 0.8rem; font-weight: 700; color: var(--primary); background: #fff; padding: 0.25rem 0.75rem 0.3rem; border-bottom: 1px solid #f3f4f6; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.1rem; }
.shared-trip-item { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.75rem; gap: 0.5rem; }
.shared-trip-item:hover { background: #f9fafb; }
.shared-trip-name { font-size: 0.85rem; font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.shared-trip-dates { font-size: 0.75rem; color: var(--gray-400); white-space: nowrap; }
.shared-trips-loading { padding: 0.75rem; text-align: center; color: var(--gray-400); }
.shared-trips-empty { padding: 0.75rem; text-align: center; color: var(--gray-400); font-size: 0.8rem; }
.friend-online-label { font-size: 0.7rem; font-weight: 600; color: #22c55e; background: rgba(34,197,94,0.1); padding: 0.1rem 0.45rem; border-radius: 8px; }
.friend-lastseen-label { font-size: 0.68rem; color: var(--gray-400); }
.friend-row-actions { position: absolute; bottom: 0.4rem; right: 0.5rem; z-index: 2; display: flex; align-items: center; gap: 0.35rem; }
.friend-row-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5e7eb;
    background: white; color: var(--gray-400); font-size: 0.65rem;
    cursor: pointer; transition: all 0.15s ease; text-decoration: none;
}
.friend-row-btn:hover { background: var(--gray-100); color: var(--primary); border-color: var(--primary); }
.friend-row-btn-danger:hover { color: var(--danger); border-color: var(--danger); background: #fef2f2; }
.friend-row-btn-block:hover  { color: #f97316; border-color: #f97316; background: #fff7ed; }

.friend-avatar-link { position: relative; flex-shrink: 0; }
.friend-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.friend-avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #6366f1); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; font-weight: 700; }
.friend-avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.friend-avatar-sm.friend-avatar-placeholder { width: 32px; height: 32px; font-size: 0.8rem; }
.friend-avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.friend-avatar-lg.friend-avatar-placeholder { width: 80px; height: 80px; font-size: 2rem; }

.friend-status-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.friend-status-dot.online { background: #22c55e; }
.friend-status-dot.offline { background: #94a3b8; }
.friend-status-dot-lg { position: absolute; bottom: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; }
.friend-status-dot-lg.online { background: #22c55e; }
.friend-status-dot-lg.offline { background: #94a3b8; }

.friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.friend-name { font-weight: 600; color: var(--dark); text-decoration: none; font-size: 0.95rem; }
.friend-name:hover { color: var(--primary); }
.friend-username { font-size: 0.8rem; color: var(--gray-400); }
.friend-location { font-size: 0.78rem; color: var(--gray-500); }
.friend-location i { font-size: 0.7rem; }
.friend-mutual { font-size: 0.78rem; color: var(--primary); }
.friend-mutual i { font-size: 0.7rem; }
.friend-online-text { font-size: 0.8rem; color: #22c55e; }
.friend-offline-text { font-size: 0.8rem; color: var(--gray-400); }
.friend-activity { font-size: 0.78rem; color: var(--gray-500); padding: 0.4rem 0 0.2rem 0; border-top: 1px solid #f3f4f6; margin-top: 0.6rem; }
.friend-activity i { color: var(--primary); margin-right: 0.25rem; font-size: 0.7rem; }

.friend-actions { flex-shrink: 0; display: flex; gap: 0.3rem; }
.friend-fav-btn { color: #d1d5db; font-size: 1.1rem; transition: color 0.2s; }
.friend-fav-btn.is-fav { color: #f59e0b; }
.friend-fav-btn:hover { color: #f59e0b; }

.friend-card-footer { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid #f3f4f6; }
.btn-danger-outline { color: var(--danger) !important; border-color: var(--danger) !important; }
.btn-danger-outline:hover { background: var(--danger) !important; color: #fff !important; }
.btn-block-outline { color: #f97316 !important; border-color: #f97316 !important; }
.btn-block-outline:hover { background: #f97316 !important; color: #fff !important; }

.req-search-inline { margin-bottom: 1.25rem; }
.friends-search-bar-compact {
    display: flex; align-items: center; gap: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 0.1rem 0.15rem 0.1rem 0.85rem; max-width: 500px; flex: 1;
}
.friends-search-bar-compact .fsbc-icon-btn {
    background: none; border: none; padding: 0.25rem 0.2rem; cursor: pointer;
    color: var(--gray-400); font-size: 0.85rem; flex-shrink: 0;
    display: flex; align-items: center; line-height: 1;
}
.friends-search-bar-compact .fsbc-icon-btn:hover { color: var(--primary); }
.friends-search-bar-compact .fsbc-close-btn {
    background: none; border: none; padding: 0.25rem 0.5rem; cursor: pointer;
    color: var(--gray-400); font-size: 0.75rem; flex-shrink: 0;
    display: none; align-items: center; line-height: 1;
}
.friends-search-bar-compact .fsbc-close-btn:hover { color: var(--dark); }
.friends-search-bar-compact input {
    flex: 1; border: none; outline: none; padding: 0.5rem 0.5rem;
    font-size: 0.85rem; background: transparent; min-width: 0;
}
.friends-search-bar-compact .fsbc-search-btn {
    padding: 0.4rem 0.9rem; background: var(--primary); color: #fff;
    border: none; border-radius: 16px; cursor: pointer; font-size: 0.8rem; font-weight: 500;
    white-space: nowrap; transition: background 0.15s;
}
.friends-search-bar-compact .fsbc-search-btn:hover { background: var(--primary-dark); }

/* Mobile: collapsed = icon only, expanded = full-width */
@media (max-width: 600px) {
    .friends-search-bar-compact {
        flex: 0 0 auto;
        width: 38px; height: 38px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        transition: width 0.22s ease, border-radius 0.22s ease, flex 0.22s ease;
    }
    .friends-search-bar-compact input,
    .friends-search-bar-compact .fsbc-close-btn,
    .friends-search-bar-compact .fsbc-search-btn { display: none !important; }
    .friends-search-bar-compact .fsbc-icon-btn { display: flex; }

    .friends-search-bar-compact.fsbc-expanded {
        flex: 1 1 auto;
        width: auto; height: auto;
        border-radius: 20px;
        padding: 0.1rem 0.15rem 0.1rem 0.75rem;
        justify-content: flex-start;
    }
    .friends-search-bar-compact.fsbc-expanded input { display: block !important; }
    .friends-search-bar-compact.fsbc-expanded .fsbc-close-btn { display: flex !important; }
    .friends-search-bar-compact.fsbc-expanded .fsbc-search-btn { display: inline-flex !important; }
    .friends-search-bar-compact.fsbc-expanded .fsbc-icon-btn { display: none; }
}

.req-section { margin-bottom: 1rem; }
.req-section-header {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.3rem 0; margin-bottom: 0.25rem;
}
.req-count { font-size: 0.7rem; background: #e5e7eb; color: var(--gray-500); padding: 0.05rem 0.4rem; border-radius: 8px; font-weight: 500; }

/* Friend Invite Link Banner */
.friend-invite-banner { margin: 0.75rem 0 1rem; display: flex; justify-content: flex-end; }
.btn-friend-invite {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 1rem;
    background: var(--primary, #2563eb); color: #fff;
    border: none; border-radius: 0.45rem;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.18s, transform 0.12s;
}
.btn-friend-invite:hover { background: var(--primary-dark, #1d4ed8); transform: translateY(-1px); }

.req-compact-list {
    background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden;
}
.req-row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.req-row:last-child { border-bottom: none; }
.req-row:hover { background: #f9fafb; }
.req-avatar-link { flex-shrink: 0; }
.req-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.req-avatar-ph {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; font-weight: 700;
}
.req-info { flex: 1; min-width: 0; }
.req-name { font-weight: 600; color: var(--dark); text-decoration: none; font-size: 0.85rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-name:hover { color: var(--primary); }
.req-meta { font-size: 0.72rem; color: var(--gray-400); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-btns { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.req-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e5e7eb;
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.75rem; transition: all 0.15s;
}
.req-btn-accept { color: #22c55e; border-color: #bbf7d0; }
.req-btn-accept:hover { background: #22c55e; color: #fff; border-color: #22c55e; }
.req-btn-decline { color: var(--gray-400); }
.req-btn-decline:hover { background: #fee2e2; color: var(--danger); border-color: var(--danger); }
.req-btn-add { color: var(--primary); border-color: #c7d2fe; }
.req-btn-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.req-btn-block { color: #f97316; border-color: #fed7aa; }
.req-btn-block:hover { background: #f97316; color: #fff; border-color: #f97316; }
.req-pending-badge { font-size: 0.65rem; background: #fef3c7; color: #b45309; padding: 0.15rem 0.45rem; border-radius: 8px; font-weight: 600; }

.request-list { display: flex; flex-direction: column; gap: 0.5rem; }
.request-card { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 0.75rem 1rem; transition: box-shadow 0.2s; }
.request-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.request-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.request-time { font-size: 0.75rem; color: var(--gray-400); }
.request-time i { font-size: 0.65rem; }
.request-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.badge-pending { background: #fef3c7; color: #b45309; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.badge-friend { background: #dcfce7; color: #166534; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.badge-info { background: #dbeafe; color: #1e40af; padding: 0.2rem 0.6rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.badge-lg { font-size: 0.85rem; padding: 0.35rem 0.8rem; }

.section-title { font-size: 1.05rem; color: var(--dark); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.section-title i { color: var(--primary); }
.section-count { font-size: 0.75rem; background: #e5e7eb; padding: 0.1rem 0.45rem; border-radius: 10px; color: var(--gray-500); font-weight: 500; }

.friends-search-box { max-width: 600px; }
.friends-search-bar { display: flex; gap: 0; margin-bottom: 1rem; }
.friends-search-bar input { flex: 1; padding: 0.65rem 1rem; border: 2px solid #e5e7eb; border-radius: var(--radius) 0 0 var(--radius); font-size: 0.95rem; outline: none; transition: border-color 0.2s; }
.friends-search-bar input:focus { border-color: var(--primary); }
.friends-search-bar button { padding: 0.65rem 1.25rem; background: var(--primary); color: #fff; border: none; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; font-size: 1rem; }
.friends-search-bar button:hover { background: var(--primary-dark); }
.friend-search-results { min-height: 40px; }

.inline-form { display: inline; }

.groups-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.create-group-form { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.create-group-form .form-row { display: flex; gap: 0.5rem; align-items: flex-end; }

.groups-list { display: flex; flex-direction: column; gap: 0.75rem; }
.group-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden; }
.group-card-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: #f9fafb; border-bottom: 1px solid #f3f4f6; }
.group-card-title { display: flex; align-items: center; gap: 0.5rem; }
.group-card-title i { color: var(--primary); }
.group-member-count { font-size: 0.75rem; color: var(--gray-400); }
.group-card-actions { display: flex; gap: 0.4rem; align-items: center; }
.group-add-member { padding: 0.75rem 1rem; background: #fafbfc; border-bottom: 1px solid #f3f4f6; }
.group-members-list { padding: 0.5rem 1rem; }
.group-member-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.group-member-name { flex: 1; font-size: 0.85rem; color: var(--dark); }
.btn-icon-sm { font-size: 0.7rem; padding: 0.2rem; }

.friend-profile-wrap { max-width: 700px; margin: 0 auto; position: relative; }
.profile-back-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--gray-200);
    background: #fff;
    color: var(--gray-500);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.profile-back-btn:hover {
    background: var(--gray-100);
    color: var(--dark);
    border-color: var(--gray-300);
}
.friend-profile-header { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; background: #fff; border-radius: var(--radius); border: 1px solid #e5e7eb; margin-bottom: 1.5rem; flex-wrap: wrap; }
.friend-profile-avatar { position: relative; flex-shrink: 0; }
.friend-profile-info { flex: 1; min-width: 200px; }
.friend-profile-info h1 { font-size: 1.5rem; margin: 0; }
.friend-username-lg { font-size: 0.9rem; color: var(--gray-400); }
.friend-profile-bio { font-size: 0.9rem; color: var(--gray-600); margin-top: 0.5rem; }
.friend-profile-restricted { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.6rem 1rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--gray-500); font-size: 0.85rem; }
.friend-profile-restricted i { font-size: 0.8rem; color: var(--gray-400); }
.friend-profile-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.82rem; color: var(--gray-500); }
.friend-profile-meta i { color: var(--primary); margin-right: 0.2rem; }
.friend-profile-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.friend-profile-actions .fas, .friend-profile-actions .far, .friend-profile-actions .fab { font-size: 0.85rem; }
.friend-profile-label-row { width: 100%; padding-top: 0.75rem; margin-top: 0.25rem; border-top: 1px solid #f3f4f6; display: flex; align-items: center; gap: 0.5rem; font-family: inherit; font-size: 0.82rem; }
.friend-profile-label-row .badge,
.friend-profile-label-row .btn,
.friend-profile-label-row .friend-label-badge,
.friend-profile-label-row .friend-add-label-btn { font-size: 0.82rem; font-family: inherit; }
.friend-profile-label-row .fas,
.friend-profile-label-row .far,
.friend-profile-label-row .fab { font-size: 0.82rem; }

.friend-profile-section { background: #fff; border-radius: var(--radius); border: 1px solid #e5e7eb; padding: 1.25rem; margin-bottom: 1rem; }
.friend-profile-section--trips { background: #f0f2f5; }
.friend-profile-section--trips .profile-trips-tabs { border: 1.5px solid #ff6b35; }
.friend-profile-section h3 { font-size: 1rem; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.friend-profile-section h3 i { color: var(--primary); }

.mutual-friends-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mutual-friend-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; background: #f3f4f6; border-radius: 20px; text-decoration: none; color: var(--dark); font-size: 0.82rem; transition: background 0.2s; }
.mutual-friend-chip:hover { background: #e5e7eb; }

.profile-trips-list { display: flex; flex-direction: column; gap: 0.4rem; }
.profile-trip-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; background: #f9fafb; border-radius: var(--radius); font-size: 0.85rem; flex-wrap: nowrap; }
.profile-trip-item > i { color: var(--primary); flex-shrink: 0; }
.pti-private-badge { background: #fef2f2; color: #dc2626; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.pti-access-sent { color: var(--success, #16a34a); font-size: .8rem; font-weight: 600; }
/* Private trip card (always-visible inline button layout) */
.pti-private-card { background: #f9fafb; border-radius: var(--radius); border: 1px dashed #e5e7eb; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pti-private-card__info { display: flex; align-items: center; gap: 0.4rem; font-size: .85rem; flex-wrap: nowrap; min-width: 0; }
.pti-private-card__lock { color: var(--gray-400, #9ca3af); flex-shrink: 0; font-size: .8rem; }
.pti-private-card__title { color: var(--gray-500, #6b7280); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pti-private-card__date { color: var(--gray-400, #9ca3af); font-size: .78rem; white-space: nowrap; flex-shrink: 0; }
.pti-private-card__actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.trip-item-title { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
a.profile-trip-link { text-decoration: none; color: inherit; transition: background 0.15s; }
a.profile-trip-link:hover { background: #eef2ff; }
.profile-trips-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; background: var(--gray-50); padding: 0.35rem; border-radius: 10px; border: 1px solid var(--gray-100); }
.profile-trips-tab { font-family: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--gray-500); cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.profile-trips-tab:hover { color: var(--gray-700); background: white; border-color: var(--gray-200); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.profile-trips-tab.active { color: white; background: linear-gradient(135deg, var(--primary), #6366f1); border-color: transparent; font-weight: 600; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.profile-trips-tab.active i { color: white; }
.trip-date-sm { display: inline; font-size: 0.78rem; color: var(--gray-400); }

@media (max-width: 600px) {
    .friends-list-view {
        gap: 0.5rem;
    }
    .friend-row {
        flex-direction: column;
        align-items: stretch;
    }
    .friend-row-fav { display: none; }
    .friend-online-label { display: none; }
    .friend-lastseen-label { display: none; }
    .friend-row-top {
        padding: 0.7rem 0.75rem;
    }
    .friend-row-actions { display: none; }
    .friend-avatar { width: 44px; height: 44px; }
    .friend-avatar-placeholder { width: 44px; height: 44px; font-size: 1rem; }
    .page-header-count { display: inline; font-weight: 400; font-size: 0.85em; color: var(--gray-400); }
    .tab-count-desktop { display: none; }
    .friends-count { display: none; }
    .together-card-meta { display: none; }
    .together-card-link { gap: 0.6rem; padding: 0.6rem 0.7rem; }
    .together-card-name { font-size: 0.88rem; }
    .together-card-trips { padding: 0.5rem 0.7rem; min-width: 55px; }
    .together-card-trips i { font-size: 0.9rem; }
    .together-card-trip-count { font-size: 1rem; }
    .friend-label-filters { display: none; }
    .friend-filter-dropdown-wrap { display: block; margin-left: auto; }
    .friends-sort-bar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.35rem; margin-top: 0; }
    .friend-profile-header { flex-direction: column; align-items: center; text-align: center; }
    .friend-profile-actions { justify-content: center; }
    .request-card { flex-direction: column; text-align: center; }
    .request-actions { justify-content: center; }
    .friends-tabs { gap: 0.25rem; padding: 0.25rem; }
    .friends-tab {
        padding: 0.5rem 0.3rem;
        font-size: 0.68rem;
        flex: 1;
        justify-content: center;
        min-width: 0;
        gap: 0.15rem;
        flex-direction: column;
        align-items: center;
    }
    .friends-tab i { font-size: 1rem; }
}
.plan-toggle-btn i { font-size: 0.95rem; }
.share-social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.share-social-btn { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.65rem 0.4rem; border-radius: 10px; border: 1px solid var(--gray-200); background: #fff; cursor: pointer; text-decoration: none; font-size: 0.72rem; font-weight: 600; font-family: inherit; transition: all 0.15s; color: #fff; }
.share-social-btn i { font-size: 1.2rem; }
.share-social-btn span { font-size: 0.68rem; }
.share-social-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.share-whatsapp { background: #25D366; border-color: #25D366; }
.share-facebook { background: #1877F2; border-color: #1877F2; }
.share-linkedin { background: #0A66C2; border-color: #0A66C2; }
.share-pinterest { background: #E60023; border-color: #E60023; }
.share-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #dc2743; }
.share-email { background: #6b7280; border-color: #6b7280; }
.share-friend-app { background: var(--primary); border-color: var(--primary); flex-direction: row; gap: 0.5rem; justify-content: center; padding: 0.55rem 1rem; border-radius: 8px; }
.share-friend-app span { font-size: 0.78rem; }

.date-overlap-warning { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 0.6rem 0.85rem; margin: 0.35rem 0 0.15rem 0; color: #991b1b; font-size: 0.85rem; line-height: 1.45; display: flex; align-items: flex-start; gap: 0.45rem; }
.date-overlap-warning i { color: #ef4444; margin-top: 0.15rem; flex-shrink: 0; }

.flatpickr-day.booked-date {
    position: relative;
    background: transparent !important;
    border-color: transparent !important;
    color: #fca5a5 !important;
    pointer-events: none;
    opacity: 1 !important;
}
.flatpickr-day.booked-date::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    color: #ef4444;
    font-weight: 700;
    pointer-events: none;
}
.flatpickr-day.flatpickr-disabled:not(.booked-date),
.flatpickr-day.before-min-date:not(.booked-date) {
    position: relative;
    color: #d1d5db !important;
    pointer-events: none;
}
.flatpickr-day.flatpickr-disabled:not(.booked-date)::after,
.flatpickr-day.before-min-date:not(.booked-date)::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 700;
    pointer-events: none;
}
.flatpickr-input { background: #fff; }
.flatpickr-calendar { font-family: inherit; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 10px; border: 1px solid var(--gray-200); }
.flatpickr-calendar .flatpickr-month { border-radius: 10px 10px 0 0; }
.flatpickr-day.selected { background: var(--primary) !important; border-color: var(--primary) !important; }
.flatpickr-day.today { border-color: var(--primary) !important; }

.item-not-present { opacity: 0.45; position: relative; }
.item-not-present::after { content: 'Not present'; position: absolute; top: 6px; right: 8px; background: #94a3b8; color: #fff; font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.02em; pointer-events: none; z-index: 2; }
.dest-not-present { position: relative; }
.dest-not-present::after { content: '\f05e'; font-family: 'Font Awesome 5 Free', sans-serif; font-weight: 900; position: absolute; top: 12px; right: 12px; color: #dc2626; font-size: 1.1rem; z-index: 10; pointer-events: none; }
.dest-not-present::before { content: attr(data-not-here); position: absolute; top: 36px; right: 8px; background: #1e293b; color: #fff; font-size: 0.7rem; font-weight: 500; padding: 3px 8px; border-radius: 5px; white-space: nowrap; z-index: 11; pointer-events: none; opacity: 0; transition: opacity 0.15s; font-family: inherit; }
.dest-not-present:hover::before { opacity: 1; }
.dest-not-present .stay-section,
.dest-not-present .food-section,
.dest-not-present .activity-section { opacity: 0.4; }
.item-opted-out { background: #fef2f2 !important; border-left: 3px solid #ef4444 !important; }
.opt-out-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.6rem; margin-top: 0.1rem; border-top: 1px solid var(--gray-200); font-size: 0.8rem; gap: 0.5rem; width: 100%; flex-basis: 100%; }
.opt-out-left { position: relative; display: flex; align-items: center; }
.opt-out-going-btn { background: none; border: 1px solid var(--gray-200); border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.8rem; cursor: pointer; color: var(--gray-600); display: flex; align-items: center; gap: 0.35rem; font-weight: 500; transition: all 0.2s ease; }
.opt-out-going-btn:hover { border-color: var(--primary); color: var(--primary); background: #eff6ff; }
.opt-out-chevron { font-size: 0.6rem; margin-left: 0.15rem; transition: transform 0.2s; }
.opt-out-going-btn.open .opt-out-chevron { transform: rotate(180deg); }
.traveler-status-popup { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 220px; max-width: 300px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.13); padding: 0.5rem 0; margin-top: 0.3rem; }
.traveler-status-popup.hidden { display: none; }
.traveler-status-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.traveler-status-item + .traveler-status-item { border-top: 1px solid var(--gray-100); }
.traveler-status-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--gray-200); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; color: #fff; }
.traveler-status-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.traveler-status-name { flex: 1; font-weight: 500; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traveler-status-badge { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 10px; white-space: nowrap; }
.traveler-status-badge.going { background: #dcfce7; color: #166534; }
.traveler-status-badge.opted-out { background: #fef2f2; color: #991b1b; }
.mgr-opt-btn { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; padding: 0.18rem 0.5rem; border-radius: 10px; border: 1px solid var(--gray-300); background: none; cursor: pointer; color: var(--gray-600); transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0; }
.mgr-opt-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.mgr-opt-btn.is-out { border-color: #f97316; color: #c2410c; background: #fff7ed; }
.mgr-opt-btn.is-out:hover { border-color: #22c55e; color: #166534; background: #dcfce7; }
.mgr-opt-btn:disabled { opacity: 0.5; cursor: default; }
.btn-opt-out { background: none; border: 1px solid var(--gray-300); border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.75rem; cursor: pointer; color: var(--gray-600); display: flex; align-items: center; gap: 0.3rem; transition: all 0.2s ease; }
.btn-opt-out:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.btn-opt-out.opted-out { border-color: #22c55e; color: #22c55e; background: #f0fdf4; }
.btn-opt-out.opted-out:hover { border-color: #16a34a; color: #16a34a; background: #dcfce7; }
.stop-opted-out { opacity: 0.6; background: #fef2f2 !important; border-left: 3px solid #ef4444 !important; }
.stop-opted-out .stop-card-img { filter: grayscale(60%); }
.stop-opt-out-row { border-top: 1px solid var(--gray-200); margin-top: 0.4rem; padding: 0.4rem 0.6rem; justify-content: flex-start; gap: 1rem; }
.stat-detail-badge-stop { font-size: 0.65rem; font-weight: 600; background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; border-radius: 6px; padding: 0.1rem 0.4rem; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) {
    .opt-out-row { flex-wrap: wrap; gap: 0.4rem; font-size: 0.75rem; padding: 0.4rem 0.5rem; }
    .opt-out-going-btn { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
    .btn-opt-out { font-size: 0.7rem; padding: 0.25rem 0.5rem; white-space: nowrap; }
    .traveler-status-popup { min-width: 200px; }
    .item-card > .item-card-actions { position: static; opacity: 1; flex-basis: 100%; justify-content: flex-end; padding-top: 0.2rem; margin-top: 0; gap: 0.4rem; }
    .item-card > .item-card-actions .btn-icon { width: 30px; height: 30px; font-size: 0.65rem; }
    .item-food:not(.item-visited) > .item-card-info,
    .item-activity:not(.item-visited) > .item-card-info { padding-right: 0; }
    /* Card actions (★ 💰) pinned to top-right corner on mobile for food, activity, and stay */
    .item-food > .item-card-actions,
    .item-activity > .item-card-actions,
    .item-stay > .item-card-actions { position: absolute; top: 0.4rem; right: 0.4rem; flex-direction: row; flex-basis: auto; width: auto; padding: 0; margin: 0; gap: 0.25rem; opacity: 1; display: flex; }
    .item-food > .item-card-actions .btn-icon,
    .item-activity > .item-card-actions .btn-icon,
    .item-stay > .item-card-actions .btn-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; font-size: 0.6rem; }
    .item-food > .item-card-actions .btn-icon.qb-add-btn,
    .item-activity > .item-card-actions .btn-icon.qb-add-btn,
    .item-stay > .item-card-actions .btn-icon.qb-add-btn { width: auto; min-width: 28px; height: 22px; min-height: 22px; padding: 0 0.3rem; font-size: 0.6rem; }
    /* Pad summary rows right so name doesn't overlap the top-right buttons */
    .item-food .food-summary-row,
    .item-activity .act-summary-row,
    .item-stay .stay-summary-row { padding-right: 3.2rem; }
    .food-vote-title { font-size: 0.65rem; }
}

.visited-cities-subtitle { font-size: 0.85rem; color: var(--gray-500); margin: -0.25rem 0 1rem; }
.visited-city-add-form { background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.visited-city-add-form .form-row { gap: 0.75rem; }
.visited-city-add-form .btn { white-space: nowrap; }
.optional-label { font-size: 0.75rem; color: var(--gray-400); font-weight: 400; }

.visited-city-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-bottom: 0.4rem; background: var(--white, #fff); transition: background 0.15s; }
.visited-city-row:hover { background: var(--gray-50, #f9fafb); }
.visited-city-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.visited-city-flag { vertical-align: middle; border-radius: 2px; }
.visited-city-name { font-size: 0.9rem; }
.visited-city-reason-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.visited-city-reason-badge i { font-size: 0.55rem; }
.city-visit-count { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--primary); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 0.05rem 0.45rem; flex-shrink: 0; }
.city-visit-count--expand { cursor: pointer; border: 1px solid var(--gray-300); background: var(--gray-100); color: var(--gray-700); border-radius: 10px; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; transition: background 0.15s, color 0.15s; }
.city-visit-count--expand:hover, .city-visit-count--expand.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.visited-city-group { cursor: default; }
.city-visit-popup { position: fixed; z-index: 10000; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: 0 6px 24px rgba(0,0,0,0.14); min-width: 220px; max-width: 300px; }
.city-visit-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--gray-100); font-weight: 600; font-size: 0.85rem; color: var(--gray-800); gap: 0.5rem; }
.city-visit-popup-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-visit-popup-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--gray-400); padding: 0; line-height: 1; flex-shrink: 0; }
.city-visit-popup-close:hover { color: var(--gray-700); }
.city-visit-popup-body { padding: 0.35rem 0; max-height: 260px; overflow-y: auto; }
.cvp-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; font-size: 0.82rem; flex-wrap: wrap; }
.cvp-row + .cvp-row { border-top: 1px solid var(--gray-100); }
.cvp-row .btn-icon-danger { margin-left: auto; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.cvp-row:hover .btn-icon-danger { opacity: 1; }
.reason-live { background: #dbeafe; color: #1d4ed8; }
.reason-study { background: #fef3c7; color: #92400e; }
.reason-work { background: #e0e7ff; color: #4338ca; }
.reason-vacation { background: #d1fae5; color: #065f46; }
.reason-born { background: #fce7f3; color: #9d174d; }
.reason-visited { background: #e0f2fe; color: #0369a1; }
.reason-other { background: #f3f4f6; color: #4b5563; }
.reason-leisure { background: #d1fae5; color: #065f46; }
.reason-business { background: #e0e7ff; color: #4338ca; }
.visited-city-date { font-size: 0.8rem; color: var(--gray-500); }
.visited-cities-empty { font-size: 0.85rem; color: var(--gray-500); text-align: center; padding: 1.5rem; }
.visited-city-row .btn-icon-danger { opacity: 0; transition: opacity 0.15s; }
.visited-city-row:hover .btn-icon-danger { opacity: 1; }
.visited-city-trip-link { font-size: 0.75rem; color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: middle; }
.visited-city-trip-link:hover { text-decoration: underline; }
.visited-city-trip-link i { margin-right: 0.2rem; }

.profile-tabs { display: flex; gap: 0.35rem; margin-top: 1rem; margin-bottom: 1rem; background: #e8ecf0; border-radius: 10px; padding: 4px; position: sticky; top: 0; z-index: 50; border: 1.5px solid #ff6b35; }
.profile-tab { flex: 1; padding: 0.55rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--gray-500); border-radius: 8px; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.profile-tab:hover { color: var(--gray-700); background: rgba(255,255,255,0.5); }
.profile-tab.active { color: #fff; background: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08); }
.profile-tab i { font-size: 0.82rem; }
.profile-tab-panel { }

.trip-purpose-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.trip-purpose-option { flex: 1; cursor: pointer; }
.trip-purpose-option input[type="radio"] { display: none; }
.trip-purpose-card { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border: 2px solid var(--gray-200); border-radius: 8px; text-align: center; transition: all 0.2s; background: #fff; }
.trip-purpose-card i { font-size: 0.9rem; }
.trip-purpose-card strong { font-size: 0.88rem; }
.trip-purpose-option:hover .trip-purpose-card { border-color: var(--gray-400); }
.trip-purpose-option.active .trip-purpose-card,
.trip-purpose-option input[type="radio"]:checked ~ .trip-purpose-card { border-color: var(--primary); background: var(--primary-light, #eef2ff); color: var(--primary); }


.city-autocomplete-hint { padding: 0.6rem 0.75rem; font-size: 0.82rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.4rem; }

.stat-detail-city-visited { cursor: default; }
.city-marker-manual { color: #2563eb !important; }
.city-marker-trip { color: #dc2626 !important; }

.wishes-tabs { display: flex; gap: 0.35rem; background: var(--gray-100); border-radius: 10px; padding: 4px; margin-bottom: 1.5rem; }
.wishes-tab { flex: 1; padding: 0.55rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--gray-500); border-radius: 8px; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.wishes-tab:hover { color: var(--gray-700); background: rgba(255,255,255,0.5); }
.wishes-tab.active { color: #f59e0b; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.wishes-tab i { font-size: 0.82rem; }
.wishes-tab-count { font-size: 0.75rem; color: var(--gray-400); font-weight: 400; }

/* Main tabs (To Do / Completed) */
.wishes-main-tabs { display: flex; gap: 0.5rem; background: #e2e4e9; border-radius: 12px; padding: 4px; margin-bottom: 0.75rem; border: 2px solid #fdba74; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wishes-main-tab { flex: 1; padding: 0.65rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.92rem; font-weight: 700; color: var(--gray-500); border-radius: 9px; transition: all 0.22s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; }
.wishes-main-tab:hover { color: var(--gray-700); background: rgba(255,255,255,0.5); }
.wishes-main-tab.active { color: #fff; background: var(--primary); box-shadow: 0 2px 6px rgba(37,99,235,0.3); }
.wishes-main-tab[data-main="completed"].active { color: #fff; background: var(--primary); }
.wishes-main-tab i { font-size: 0.9rem; }
.wishes-main-count { font-size: 0.78rem; color: var(--gray-400); font-weight: 400; }

/* Sub tabs (Stay / Food / Shopping / Activities) */
.wish-tabs-add-row { display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--gray-200); }
.wish-tabs-add-row .wishes-sub-tabs { flex: 1; border-bottom: none; margin-bottom: 0; }
.wish-tabs-add-row .wish-add-btns { flex-shrink: 0; padding-bottom: 4px; }
.wishes-sub-tabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--gray-200); padding-bottom: 0; }
.wishes-sub-tab { flex: 1; padding: 0.5rem 0.75rem; border: none; background: none; cursor: pointer; font-size: 0.83rem; font-weight: 600; color: var(--gray-500); border-radius: 0; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.4rem; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; }
.wishes-sub-tab:hover { color: var(--gray-700); }
.wishes-sub-tab.active { color: #fff; background: #f59e0b; border-bottom-color: #f59e0b; border-radius: 8px 8px 0 0; }
.wishes-sub-tab i { font-size: 0.8rem; }
.wishes-sub-count { font-size: 0.72rem; color: var(--gray-400); font-weight: 400; }
.wishes-sub-tab.active .wishes-sub-count { color: rgba(255,255,255,0.85); }

/* Panel display */
.wish-panel { display: none; }

/* Wishes filter bar */
.wishes-filter-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.wish-filter-row { display: flex; gap: 0.6rem; align-items: center; flex: 1; }
.wish-filter-select-wrap { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; }
.wish-filter-label { font-size: 0.8rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }
.wish-filter-select { font-size: 0.8rem; padding: 0.3rem 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; flex: 1; min-width: 0; }
.wish-filter-clear-add { display: flex; align-items: center; gap: 0.5rem; }
.wish-filter-clear-btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; border: 1px solid var(--gray-300); border-radius: 6px; background: var(--gray-100); cursor: pointer; color: var(--gray-600); white-space: nowrap; }
.wish-filter-clear-btn:hover { background: var(--gray-200); }
.wish-add-btns { display: flex; gap: 0.4rem; }

.wish-add-section { margin-bottom: 1rem; }
.wish-form { margin-top: 0.75rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 1rem; width: 100%; box-sizing: border-box; }
.wishes-empty { text-align: center; color: var(--gray-500); padding: 2rem 1rem; font-size: 0.9rem; }
.wishes-empty i { margin-right: 0.3rem; }

.wish-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wish-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; transition: box-shadow 0.15s; }
.wish-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
@keyframes wishCardHighlight { 0%,100%{box-shadow:none;border-color:var(--gray-200)} 15%{box-shadow:0 0 0 3px #fbbf2466;border-color:#f59e0b} 60%{box-shadow:0 0 0 3px #fbbf2444;border-color:#f59e0b} }
.wish-card-highlight { animation: wishCardHighlight 2.2s ease-out forwards; }
/* Trip-origin icon (saved from a trip) */
.wish-trip-origin-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 6px; color: #3b82f6; font-size: 0.82rem; line-height: 1; text-decoration: none; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.wish-trip-origin-btn:hover { background: #dbeafe; color: #1d4ed8; text-decoration: none; }
/* Trip-origin popup */
.wish-trip-backdrop { position: fixed; inset: 0; z-index: 9998; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: rgba(0,0,0,0.18); }
.wish-trip-popup { position: absolute; z-index: 9999; background: #fff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.13); min-width: 200px; overflow: hidden; }
.wish-trip-popup-header { background: #eff6ff; color: #1d4ed8; font-size: 0.78rem; font-weight: 600; padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid #dbeafe; }
.wish-trip-popup-title { padding: 0.55rem 0.75rem 0.3rem; font-size: 0.88rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.wish-trip-popup-dates { padding: 0.15rem 0.75rem 0.3rem; font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 0.35rem; }
.wish-trip-popup-dates i { color: #94a3b8; font-size: 0.75rem; flex-shrink: 0; }
.wish-trip-popup-role { padding: 0.15rem 0.75rem 0.55rem; font-size: 0.78rem; color: #475569; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.wish-trip-popup-role i { font-size: 0.72rem; flex-shrink: 0; }
.wish-trip-popup-role i.fa-crown { color: #f59e0b; }
.wish-trip-popup-role i.fa-user-shield { color: #6366f1; }
.wish-trip-popup-role i.fa-user { color: #0ea5e9; }
.wish-trip-popup-role i.fa-eye { color: #94a3b8; }
.wish-trip-popup-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0 0.75rem 0.65rem; padding: 0.45rem 0.75rem; background: #2563eb; color: #fff; border-radius: 7px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s; }
.wish-trip-popup-btn:hover { background: #1d4ed8; color: #fff; text-decoration: none; }
/* Note peek button */
.wish-note-peek-btn { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 6px; color: #0ea5e9; font-size: 0.82rem; line-height: 1; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.wish-note-peek-btn:hover { background: #e0f2fe; color: #0284c7; }
/* Note peek popup */
.wish-note-popup { position: absolute; z-index: 9999; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 0.82rem; color: #78350f; line-height: 1.45; box-shadow: 0 4px 14px rgba(0,0,0,0.12); white-space: pre-wrap; word-break: break-word; pointer-events: none; min-width: 160px; max-width: min(380px, calc(100vw - 16px)); }
.wish-card-summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; transition: background 0.1s; }
.wish-card-summary:hover { background: var(--gray-50); }
.wish-card-icon { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #fef3c7, #fde68a); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.wish-card-summary-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wish-card-summary-name { font-weight: 600; font-size: 0.92rem; color: var(--gray-800); }
.wish-card-summary-city { font-size: 0.8rem; color: var(--gray-500); }
.wish-card-summary-city i { font-size: 0.72rem; margin-right: 0.1rem; }
.wish-card-chevron { flex-shrink: 0; color: var(--gray-400); font-size: 0.7rem; transition: transform 0.2s; }
.wish-card-expanded .wish-card-chevron { transform: rotate(180deg); }
.wish-card-details { border-top: 1px solid var(--gray-100); }
.wish-card-details-inner { padding: 0.6rem 1rem 0.4rem 3.25rem; }
.wish-card-detail { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.2rem; }
.wish-card-detail i { font-size: 0.72rem; margin-right: 0.2rem; width: 0.9rem; text-align: center; }
.wish-card-detail a { color: var(--primary); text-decoration: none; }
.wish-card-detail a:hover { text-decoration: underline; }
.wish-badge { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 4px; font-weight: 600; }
.wish-rating { color: #f59e0b; font-size: 0.8rem; letter-spacing: -1px; }
.wish-reason-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.wish-reason-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1.5px solid #d1d5db; background: #f9fafb; color: #374151; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1.3; user-select: none; font-family: inherit; }
.wish-reason-pill:hover { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.wish-reason-pill.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; font-weight: 600; }
.wish-card-summary-reasons { display: flex; flex-wrap: wrap; gap: 0.3rem; flex-basis: 100%; margin-top: 0.15rem; }
.wish-reasons-trigger-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.wish-reasons-trigger-btn { align-self: flex-start; }
.wish-reasons-summary { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; }
.wish-reasons-none { font-size: 0.78rem; color: #9ca3af; font-style: italic; }

/* Badge group: aligns wish/currency/SOS badges on a shared flex axis */
.dest-badge-group { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; margin-left: 0.4rem; }
.dest-badge-group .dest-wish-star,
.dest-badge-group .dest-currency-badge,
.dest-badge-group .dest-sos-badge { margin-left: 0; vertical-align: unset; }
.dest-wish-star { display: inline-flex; align-items: center; gap: 0.25rem; background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; font-size: 0.72rem; font-weight: 600; padding: 0 0.55rem; height: 1.5rem; border-radius: 5px; margin-left: 0.4rem; vertical-align: middle; border: 1px solid #f59e0b; line-height: 1; box-sizing: border-box; white-space: nowrap; }
.dest-wish-star i { font-size: 0.65rem; color: #f59e0b; }
.dest-wish-star-btn { cursor: pointer; transition: all 0.15s; }
.dest-wish-star-btn:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.dest-wish-star-btn:hover i { color: #fff; }
.section-title-explore-btn.btn-outline { margin-left: auto; background: #fff; border-color: #fff; color: var(--primary); font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; text-transform: none; letter-spacing: 0; }
.section-title-explore-btn.btn-outline:hover { background: #e0e7ff; border-color: #e0e7ff; color: var(--primary-dark); }
.section-title-explore-btn.btn-outline i { color: var(--primary); font-size: 0.65rem; }
.section-title-inline .dest-wish-star-btn { margin-left: auto; background: #fff; border-color: #fff; color: #b45309; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); }
.section-title-inline .section-title-explore-btn + .dest-wish-star-btn { margin-left: 0.35rem; }
.section-title-inline .dest-wish-star-btn:hover { background: #fef3c7; border-color: #fef3c7; color: #92400e; }
.section-title-inline .dest-wish-star-btn i { color: #f59e0b; font-size: 0.65rem; }
.section-title-inline .dest-wish-star-btn:hover i { color: #d97706; }

.save-to-wish-btn { color: #f59e0b !important; transition: all 0.15s; opacity: 1 !important; }
.save-to-wish-btn:hover { color: #d97706 !important; }
.save-to-wish-saved { color: #f43f5e !important; cursor: pointer !important; }
.save-to-wish-saved:hover { color: #e11d48 !important; background: #fff1f2 !important; border-color: #fda4af !important; }
.item-card > .item-card-actions:has(.save-to-wish-btn),
.item-stay .stay-card-actions:has(.save-to-wish-btn) { opacity: 1; }
.item-card > .item-card-actions:has(.save-to-wish-btn) .btn-icon:not(.save-to-wish-btn):not(.qb-add-btn):not(.food-edit-direct-btn):not(.food-remove-direct-btn) { opacity: 0; transition: opacity 0.15s; }
.item-card:hover > .item-card-actions:has(.save-to-wish-btn) .btn-icon:not(.save-to-wish-btn):not(.qb-add-btn):not(.food-edit-direct-btn):not(.food-remove-direct-btn) { opacity: 1; }
.item-stay .stay-card-actions:has(.save-to-wish-btn) .transport-btn-icon:not(.save-to-wish-btn):not(.qb-add-btn) { opacity: 0; transition: opacity 0.15s; }
.item-stay:hover .stay-card-actions:has(.save-to-wish-btn) .transport-btn-icon:not(.save-to-wish-btn):not(.qb-add-btn) { opacity: 1; }

.wish-card-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; padding: 0.4rem 1rem 0.6rem 3.25rem; }
.wish-card-action-form { display: inline; }
.wish-action-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 500; border-radius: 6px; cursor: pointer; border: 1.5px solid; line-height: 1; transition: all 0.15s; }
.wish-action-edit { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.wish-action-edit:hover { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.wish-action-delete { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.wish-action-delete:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.wish-action-map { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.wish-action-map:hover { background: #ffedd5; border-color: #fb923c; color: #9a3412; }
.wish-action-refresh { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; padding: 0.3rem 0.5rem; }
.wish-action-refresh:hover { background: #dcfce7; border-color: #86efac; color: #166534; }
.wish-action-refresh:disabled { opacity: 0.5; cursor: default; }
.wish-map-icon-btn { color: #f97316 !important; }
.wish-map-icon-btn:hover { background: #fff7ed !important; color: #ea6c0a !important; }
.wish-map-modal-box { max-width: 640px; width: 95vw; padding: 0; border-radius: 14px; overflow: hidden; }
.wish-geo-status { font-size: 0.72rem; font-weight: 600; margin-left: 0.35rem; vertical-align: middle; }
.wish-repin-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #f8fafc; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: all 0.15s; }
.wish-repin-btn:hover { background: #eff6ff; border-color: #3b82f6; color: #2563eb; }

/* ── Place-search name-field autocomplete ── */
.wish-place-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14); max-height: 280px; overflow-y: auto;
    margin-top: 3px;
}
.wish-place-item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem;
    cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.12s;
}
.wish-place-item:last-child { border-bottom: none; }
.wish-place-item:hover { background: #f0f9ff; }
.wish-place-loading { cursor: default; }
.wish-place-icon { width: 22px; text-align: center; color: #f97316; font-size: 0.85rem; flex-shrink: 0; }
.wish-place-text { min-width: 0; flex: 1; }
.wish-place-name { display: block; font-size: 0.83rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-place-sub { display: block; font-size: 0.72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-place-confirmed-inline {
    font-size: 0.78rem; animation: fadeIn 0.2s ease;
}

/* ── PSI (Place Search Input) shared dropdown — used on wishes page too ── */
.psi-drop {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 9100;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.13); max-height: 260px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.psi-drop-fixed {
    position: absolute; top: auto; left: auto; right: auto; z-index: 99999;
}
.psi-item {
    padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background .1s;
}
.psi-item:last-child { border-bottom: none; }
.psi-item:hover, .psi-item-active { background: #eff6ff; }
.psi-item-loading { cursor: default; pointer-events: none; display: flex; align-items: center; gap: 0; }
.psi-item-loading:hover { background: none; }
.psi-manual-trigger {
    display: flex; align-items: center; gap: 6px;
    position: sticky; bottom: 0; background: #fff;
    border-top: 1px dashed #e5e7eb !important; border-bottom: none !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,.06);
}
.psi-manual-trigger:hover { background: #eff6ff; }
.psi-item-main {
    font-size: .85rem; font-weight: 600; color: #111827;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.psi-item-sub { font-size: .72rem; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psi-badge { font-size: .64rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; }
.psi-badge-db  { background: #dbeafe; color: #1e40af; }
.psi-badge-osm { background: #dcfce7; color: #166534; }
.psi-badge-ai  { background: #ede9fe; color: #6d28d9; }

/* ── Add-wish form mini-map preview ── */
.wish-add-map-preview {
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    position: relative;
}
.wish-add-map-preview .leaflet-container {
    height: 100%;
    border-radius: 10px;
}

/* ── WAM Universal Search Bar ───────────────────────────────────────────── */
.wam-search-bar-wrap { margin-bottom: .85rem; }
.wam-search-bar {
    display: flex; align-items: center; gap: .45rem;
    background: #f8fafc; border: 2px solid #e2e8f0;
    border-radius: 28px; padding: 0 .6rem 0 1.1rem;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.wam-search-bar:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    background: #fff;
}
.wam-search-icon { color: #94a3b8; font-size: .95rem; flex-shrink: 0; }
.wam-search-bar input {
    flex: 1; border: none; outline: none;
    font-size: .95rem; padding: .75rem 0;
    background: transparent; color: #1e293b; min-width: 0;
}
.wam-search-bar input::placeholder { color: #94a3b8; }
.wam-search-clear {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: .3rem; border-radius: 50%; line-height: 1;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; transition: color .15s, background .15s;
}
.wam-search-clear:hover { color: #475569; background: #f1f5f9; }

/* ── Unified Add Wish Modal (WAM) ──────────────────────────────────────── */
.wam-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9800; padding: 1rem;
}
.wam-box {
    background: #fff; border-radius: 18px;
    box-shadow: 0 16px 60px rgba(0,0,0,.22);
    width: 100%; max-width: 530px;
    max-height: 92vh; overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}
.wam-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.wam-title {
    font-size: 1.08rem; font-weight: 700; color: #1e293b; margin: 0;
}
.wam-close-btn {
    width: 32px; height: 32px; border: none; background: #f1f5f9;
    border-radius: 8px; cursor: pointer; font-size: 1.2rem; color: #64748b;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    transition: background .15s;
}
.wam-close-btn:hover { background: #e2e8f0; color: #334155; }
.wam-cat-label {
    font-size: .83rem; color: #64748b; margin: 0 0 .75rem;
}
.wam-cat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
    margin-bottom: .25rem;
}
.wam-cat-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 1.1rem .75rem;
    border: 2px solid #e2e8f0; border-radius: 14px;
    background: #f8fafc; cursor: pointer; transition: all .18s;
    font-size: .82rem; font-weight: 700; color: #334155;
    text-align: center; letter-spacing: .02em; line-height: 1.25;
}
.wam-cat-card:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.wam-cat-card i { font-size: 1.45rem; color: #f59e0b; transition: color .18s; }
.wam-cat-card:hover i { color: #2563eb; }
.wam-cat-tag {
    display: flex; align-items: center; gap: .5rem;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
    padding: .38rem .75rem; margin-bottom: 1rem;
    font-size: .82rem; font-weight: 600; color: #166534;
}
.wam-cat-tag i { font-size: .9rem; color: #16a34a; }
.wam-change-btn {
    margin-left: auto; font-size: .75rem; color: #2563eb;
    background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: underline; white-space: nowrap; font-weight: 500;
}
.wam-change-btn:hover { color: #1d4ed8; }
/* Scrollbar styling inside box */
.wam-box::-webkit-scrollbar { width: 4px; }
.wam-box::-webkit-scrollbar-track { background: transparent; }
.wam-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ── Map modal place-search dropdown ── */
.wish-map-search-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14); max-height: 240px; overflow-y: auto;
    margin-top: 3px;
}
.wish-map-search-item {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem;
    cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.12s;
}
.wish-map-search-item:last-child { border-bottom: none; }
.wish-map-search-item:hover { background: #f0f9ff; }
.btn-icon-wish { background: none; border: 1.5px solid #22c55e; color: #22c55e; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all 0.15s; }
.btn-icon-wish:hover { background: #22c55e; color: #fff; }

/* ── Wish Edit Modal ─────────────────────────────────────────────── */
.wish-edit-modal-box {
    background: #fff; border-radius: 18px;
    box-shadow: 0 16px 60px rgba(0,0,0,.22);
    width: 100%; max-width: 560px;
    max-height: 92vh; overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}
.wish-edit-modal-box::-webkit-scrollbar { width: 4px; }
.wish-edit-modal-box::-webkit-scrollbar-track { background: transparent; }
.wish-edit-modal-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.wish-edit-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid #f1f5f9;
}
#wish-edit-modal-body .wish-edit-form {
    padding: 0; border-top: none;
}
#wish-edit-modal-body .form-actions-inline {
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
    justify-content: flex-end;
}
@media (max-width: 600px) {
    #wish-edit-overlay { align-items: flex-end; padding: 0; }
    .wish-edit-modal-box {
        border-radius: 20px 20px 0 0;
        max-height: 90vh;
        max-width: 100%;
        padding: 1.25rem 1rem 1.5rem;
    }
}
/* ── end Wish Edit Modal ─────────────────────────────────────────── */
.wish-edit-form { padding: 0.75rem 0.75rem 0.5rem; border-top: 1px solid var(--gray-100); }
.wish-form .form-row,
.wish-edit-form .form-row {
    display: flex;
    gap: 0.5rem;
}
@media (max-width: 600px) {
    .wish-form .form-row,
    .wish-edit-form .form-row {
        flex-direction: column;
    }
}
.wish-edit-form .form-group { margin-bottom: 0.4rem; }
.wish-edit-form label { font-size: 0.75rem; }
.wish-edit-form input, .wish-edit-form select, .wish-edit-form textarea { font-size: 0.82rem; padding: 0.35rem 0.5rem; }
.wish-notes-auto { width: 100%; min-height: 34px; line-height: 1.4; font-family: inherit; overflow: hidden; resize: none; }

.wish-status-badge { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.wish-status-badge i { font-size: 0.62rem; }
.wish-status-planned { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; text-decoration: none; }
a.wish-status-planned:hover { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; }
.wish-status-completed { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
.wish-card-completed { background: #f0fdf4; border-color: #bbf7d0; }
.wish-card-icon-completed { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #22c55e; }
.wish-completed-date { font-size: 0.72rem; color: #22c55e; font-weight: 500; }
.wish-badge-cat { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; }

.wishes-completed-empty { text-align: center; padding: 3rem 1rem; color: var(--gray-500); }
.wishes-completed-empty-icon { font-size: 2.5rem; color: #d4d4d8; margin-bottom: 0.75rem; }
.wishes-completed-empty p { font-size: 0.95rem; margin: 0.3rem 0; }
.wishes-completed-empty-hint { font-size: 0.82rem; color: var(--gray-400); }
.wishes-completed-empty-hint i { color: #22c55e; }

.wishes-tab-completed.active { color: #22c55e; }

.completed-cat-pill { padding: 0.3rem 0.65rem; border: 1.5px solid var(--gray-300); border-radius: 999px; background: #fff; color: var(--gray-500); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; }
.completed-cat-pill:hover { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.completed-cat-pill.active { background: #22c55e; border-color: #22c55e; color: #fff; }

.wish-revisit-btn { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--gray-300); background: #fff; color: var(--gray-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: all 0.15s; flex-shrink: 0; }
.wish-revisit-btn:hover { border-color: var(--gray-400); color: var(--gray-600); }
.wish-revisit-btn:disabled { opacity: 0.5; cursor: wait; }
.wish-revisit-yes.active { background: #dcfce7; border-color: #22c55e; color: #16a34a; }
.wish-revisit-yes:hover { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.wish-revisit-no.active  { background: #fee2e2; border-color: #ef4444; color: #dc2626; }
.wish-revisit-no:hover   { border-color: #ef4444; color: #dc2626; background: #fef2f2; }

.wish-revisit-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; padding: 0 0.5rem; height: 26px; box-sizing: border-box; border-radius: 5px; flex-shrink: 0; white-space: nowrap; }
.wish-revisit-badge i { font-size: 0.65rem; line-height: 1; }
.wish-revisit-badge-yes  { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }
.wish-revisit-badge-no   { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.wish-revisit-badge-none { display: none; }

.wish-visit-count-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; border-radius: 5px; padding: 0 0.5rem; height: 26px; box-sizing: border-box; white-space: nowrap; }
.wish-privacy-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 700; color: #6b7280; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 5px; padding: 0.12rem 0.4rem; white-space: nowrap; flex-shrink: 0; }
.wish-privacy-pill { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 700; border-radius: 5px; padding: 0 0.5rem; height: 26px; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; cursor: pointer; border: 1px solid; transition: all 0.15s; }
.wish-privacy-pill-public { color: #16a34a; background: #dcfce7; border-color: #86efac; }
.wish-privacy-pill-public:hover { background: #bbf7d0; border-color: #4ade80; }
.wish-privacy-pill-private { color: #dc2626; background: #fee2e2; border-color: #fca5a5; }
.wish-privacy-pill-private:hover { background: #fecaca; border-color: #f87171; }
.wish-privacy-btn { color: var(--gray-400); }
.wish-privacy-btn.active { color: #d97706; border-color: #fbbf24; background: #fffbeb; }
.wish-privacy-btn.active:hover { background: #fef3c7; }
.wish-visit-history { border-top: 1px solid var(--gray-100); padding: 0.5rem 1rem 0.6rem 1rem; }
.wish-visit-history-label { font-size: 0.72rem; font-weight: 700; color: #059669; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.3rem; }
.wish-visit-history-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.18rem 0; }
.wish-visit-history-num { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #d1fae5; color: #059669; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wish-visit-history-date { font-size: 0.8rem; color: var(--gray-700); }
.wish-visit-history-count { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; border-radius: 5px; padding: 0.15rem 0.5rem; margin-left: 0.25rem; white-space: nowrap; }
@media (max-width: 640px) { .wish-visit-label { display: none; } }

.wish-suggest-btn { color: #f59e0b; border-color: #f59e0b; }
.wish-suggest-btn:hover { background: #f59e0b; color: #fff; }
.wish-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; max-height: 80vh; animation: wishModalSlideIn 0.2s ease; }
@keyframes wishModalSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.wish-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--gray-100); }
.wish-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gray-800); display: flex; align-items: center; gap: 0.4rem; }
.wish-modal-close { background: none; border: none; font-size: 1.4rem; color: var(--gray-400); cursor: pointer; padding: 0.2rem 0.4rem; line-height: 1; border-radius: 6px; transition: all 0.15s; }
.wish-modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
.wish-modal-body { flex: 1; overflow-y: auto; padding: 0.75rem 1.25rem; }
.wish-modal-body::-webkit-scrollbar { width: 5px; }
.wish-modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.wish-modal-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0.75rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s; user-select: none; }
.wish-modal-item:hover { background: #fef3c7; border-color: #fbbf24; }
.wish-modal-item.selected { background: #ecfdf5; border-color: #6ee7b7; }
.wish-modal-item.already-added { opacity: 0.5; cursor: default; background: var(--gray-50); border-color: var(--gray-200); }
.wish-modal-item input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; width: 16px; height: 16px; accent-color: #10b981; cursor: pointer; }
.wish-modal-item-icon { color: #f59e0b; font-size: 0.9rem; flex-shrink: 0; margin-top: 0.1rem; }
.wish-modal-item-info { flex: 1; min-width: 0; }
.wish-modal-item-name { font-weight: 600; font-size: 0.88rem; color: var(--gray-800); }
.wish-modal-item-meta { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.15rem; }
.wish-modal-item-badge { font-size: 0.65rem; background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; border-radius: 4px; padding: 0.05rem 0.3rem; margin-left: 0.3rem; font-weight: 600; }
.wish-modal-visit-count { font-size: 0.65rem; background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; border-radius: 4px; padding: 0.05rem 0.3rem; margin-left: 0.3rem; font-weight: 700; white-space: nowrap; }
.wish-modal-section-label { font-size: 0.72rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0 0.4rem; margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.35rem; }
.wish-modal-section-return { color: #16a34a; margin-top: 0.5rem; }
.wish-modal-returning { background: #f0fdf4; border-color: #bbf7d0; }
.wish-modal-returning:hover { background: #dcfce7; border-color: #86efac; }
.wish-modal-returning .wish-modal-item-icon { color: #16a34a; }
.wish-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-top: 1px solid var(--gray-100); }
.wish-modal-selected-count { font-size: 0.8rem; color: var(--gray-500); font-weight: 500; }
.wish-modal-empty { text-align: center; padding: 2rem 1rem; color: var(--gray-500); font-size: 0.88rem; }
.wish-modal-empty i { font-size: 1.5rem; color: #fbbf24; margin-bottom: 0.5rem; display: block; }
.wish-modal-loading { text-align: center; padding: 2rem; color: #92400e; font-size: 0.85rem; }
/* Overview mode — hide selection controls */
.wish-modal-overview .wish-modal-selected-count { display: none; }
.wish-modal-overview #wish-modal-add-btn { display: none; }
/* Wish overview groups */
.wish-overview-group { margin-bottom: 0.5rem; }
.wish-overview-group-header { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0 0.35rem; border-bottom: 2px solid var(--gray-300); margin-bottom: 0.25rem; }
.wish-overview-group-header i { color: #f59e0b; }
.wish-overview-count { margin-left: auto; background: #fef3c7; color: #92400e; border-radius: 10px; font-size: 0.65rem; font-weight: 700; padding: 0.05rem 0.45rem; }
.wish-overview-item { padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--gray-200); }
.wish-overview-item:last-child { border-bottom: none; }
.wish-overview-item-name { font-size: 0.88rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.wish-overview-item-meta { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.1rem; }
.wish-overview-badge-again { font-size: 0.6rem; background: #e0f2fe; color: #0369a1; border-radius: 4px; padding: 0.05rem 0.3rem; font-weight: 700; }
@media (max-width: 600px) {
    .wish-modal { max-width: 100%; max-height: 85vh; border-radius: 14px 14px 0 0; margin-top: auto; }
    #wish-modal-overlay { align-items: flex-end; }
    .wish-modal-footer { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
}

.city-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; max-height: 200px; overflow-y: auto; }
.city-autocomplete-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.85rem; transition: background 0.1s; }
.city-autocomplete-item:hover { background: var(--gray-50); }

@media (max-width: 600px) {
    /* Wish page container — room for sticky bottom nav */
    .wishes-page-container { padding-bottom: 80px !important; }

    /* Page header */
    .wishes-page-container .page-header h1 { font-size: 1.2rem; }
    #wishes-header-count { font-size: 0.75rem; }

    /* Filter bar — selects row */
    .wishes-filter-bar { flex-direction: column; align-items: stretch; gap: 0.45rem; }
    .wish-filter-row { width: 100%; }
    .wish-filter-select { font-size: 0.84rem; padding: 0.38rem 0.5rem; }
    /* Tabs + add button row */
    .wish-tabs-add-row { gap: 0.3rem; }
    .wish-add-btns { display: flex; gap: 0.4rem; flex-shrink: 0; }
    .wish-add-btn { flex: 0 1 auto; }
    .wish-add-btn-label { display: none; }

    /* Tabs */
    .wishes-tabs { flex-wrap: nowrap; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; }
    .wishes-tabs::-webkit-scrollbar { display: none; }
    .wishes-tab-label { display: none; }
    .wishes-tab { padding: 0.5rem 0.7rem; gap: 0.3rem; flex-shrink: 0; flex: 1; min-width: 0; font-size: 0.8rem; }
    .wishes-main-tab { font-size: 0.85rem; padding: 0.55rem 0.75rem; }
    .wishes-main-tab-label { display: none; }
    .wishes-sub-tab { font-size: 0.78rem; padding: 0.45rem 0.5rem; }
    .wishes-sub-tab-label { display: none; }

    /* Wish cards */
    .wish-card-summary { gap: 0.5rem; padding: 0.6rem 0.75rem; flex-wrap: wrap; }
    .wish-card-summary .wish-status-completed {
        order: 10;
        flex-basis: 100%;
        margin-left: calc(30px + 0.5rem);
        margin-top: -0.1rem;
        margin-bottom: 0.1rem;
    }
    .wish-card-summary-text { flex-direction: column; align-items: flex-start; gap: 0.05rem; }
    .wish-card-summary-name { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .wish-card-summary-city { font-size: 0.76rem; }
    .wish-card-summary-reasons { flex-basis: auto; width: 100%; margin-top: 0.2rem; }
    .wish-card-summary-reasons .wish-reason-pill { font-size: 0.68rem; padding: 0.14rem 0.45rem; }
    .wish-card-icon { width: 30px; height: 30px; font-size: 0.78rem; flex-shrink: 0; border-radius: 7px; }

    /* Privacy pill — icon only on mobile */
    .wish-privacy-pill-text { display: none; }

    /* Card detail / action sections — reduce left indent */
    .wish-card-details-inner { padding: 0.5rem 0.75rem 0.35rem 0.75rem; }
    .wish-card-actions { padding: 0.3rem 0.75rem 0.5rem 0.75rem; gap: 0.4rem; flex-wrap: wrap; }
    .btn-icon-wish { width: 34px; height: 34px; font-size: 0.8rem; }

    /* Visit history */
    .wish-visit-history { padding: 0.4rem 0.75rem 0.5rem; }
    .wish-visit-history-date { font-size: 0.76rem; }

    /* Status badges */
    .wish-status-badge { font-size: 0.65rem; padding: 0.08rem 0.35rem; }
    .wish-revisit-badge,
    .wish-visit-count-badge,
    .wish-privacy-pill { font-size: 0.65rem; padding: 0 0.38rem; height: 22px; }
    .wish-revisit-badge i { font-size: 0.58rem; line-height: 1; }
    .wish-revisit-badge-text { display: none; }

    /* Completed section */
    .completed-cat-pill { font-size: 0.73rem; padding: 0.25rem 0.5rem; }

    /* Other items */
    .visited-city-add-form .form-row { flex-direction: column; }
    .visited-city-row .btn-icon-danger { opacity: 1; }
    .item-card > .item-card-actions { opacity: 1; }
    .stay-card-actions { opacity: 1; }
    .item-card .item-delete-btn { opacity: 1; }
    .item-card > .item-card-actions:has(.save-to-wish-btn) .btn-icon:not(.save-to-wish-btn) { opacity: 1; }
    .item-stay .stay-card-actions:has(.save-to-wish-btn) .transport-btn-icon:not(.save-to-wish-btn) { opacity: 1; }
    .btn-icon { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .transport-btn-icon { min-width: 36px; min-height: 36px; }

    /* Stay card: move wish + budget below dates; ⋮ pushed to far right */
    .item-stay .stay-card-left { flex-wrap: wrap; padding-right: 0.7rem; }
    .item-stay .stay-card-actions {
        position: static !important;
        opacity: 1 !important;
        order: 10;
        width: 100%;
        padding: 0.15rem 0 0.4rem 2.2rem;
        gap: 0.5rem;
        align-items: center;
    }
    .item-stay .stay-card-actions .traveler-actions-menu { margin-left: auto; }
    .item-stay .stay-card-actions .transport-btn-icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .item-stay .stay-card-actions .qb-add-btn { width: auto; min-width: 38px; height: 32px; padding: 0 0.45rem; font-size: 0.85rem; }
}

.mobile-bottom-bar {
    display: none;
}

@media (max-width: 600px) {
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        align-items: stretch;
        min-height: 56px;
        box-sizing: border-box;
        padding: 0;
        /* iOS 11.0 legacy prefix first, then standard */
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* flex: 1 0 0% forces all five items to equal width regardless
           of content size — more reliable than flex:1 across Safari/Firefox */
        flex: 1 0 0%;
        min-width: 0;
        padding: 8px 4px 6px;
        font-size: 10px;
        color: var(--gray-400);
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }
    .mobile-bottom-item i {
        font-size: 20px;
        line-height: 1;
        margin-bottom: 3px;
    }
    .mobile-bottom-item span {
        font-weight: 500;
        line-height: 1;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .mobile-bottom-item:active {
        color: var(--primary);
    }
    .mobile-bottom-active {
        color: var(--primary);
    }
    .mobile-bottom-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(6px);
        background: var(--danger, #dc3545);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        min-width: 15px;
        height: 15px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        box-sizing: border-box;
        line-height: 1;
        pointer-events: none;
    }
    .main-content {
        padding-bottom: 70px;
    }
    .footer {
        padding-bottom: 70px;
    }
}

@media (max-width: 600px) and (pointer: fine) {
    .mobile-bottom-item:hover {
        color: var(--primary);
    }
}

/* ── Create New Trip Modal ── */
.ctm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ctm-box {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: ctmIn 0.22s cubic-bezier(0.32,0.72,0,1);
}
@keyframes ctmIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}
.ctm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    flex-shrink: 0;
}
.ctm-header i { color: var(--primary); margin-right: .4rem; }
.ctm-close {
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ctm-close:hover { background: var(--gray-200); }
.ctm-help-btn {
    background: #f97316;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.ctm-help-btn i { color: #fff !important; line-height: 1; display: block; }
.ctm-help-btn:hover { background: #ea6b00; }
.ctm-help-panel {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    padding: .7rem 1.25rem;
    font-size: .82rem;
    color: #9a3412;
    line-height: 1.55;
}
.ctm-help-panel i { color: #f97316; margin-right: .35rem; }
.ctm-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.ctm-body .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.ctm-body .form-group select,
.ctm-body .form-group textarea,
.ctm-body .flatpickr-input:not([type="hidden"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.875rem;
    line-height: 1.375;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-sm);
    background: #fff;
    color: inherit;
    min-height: 2.625rem;
    height: auto;
}
.ctm-body .form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.ctm-body .form-group select:focus,
.ctm-body .form-group textarea:focus,
.ctm-body .flatpickr-input:not([type="hidden"]):focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.ctm-error-bar {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.ctm-purpose-sel { grid-template-columns: repeat(3, 1fr); }
.ctm-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--gray-100);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .ctm-purpose-sel { grid-template-columns: repeat(2, 1fr); }
    .ctm-footer { flex-direction: column-reverse; }
    .ctm-footer .btn { width: 100%; justify-content: center; }
}
/* ── CTM To-date wrapper with day counter ── */
.ctm-to-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctm-to-wrap .flatpickr-input:not([type="hidden"]),
.ctm-to-wrap input[type="text"] {
    flex: 1;
    width: auto !important;
    min-width: 0;
}
.ctm-dur-badge {
    flex-shrink: 0;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
/* ── CTM field validation states ── */
.ctm-inp-required { border-color: #ef4444 !important; box-shadow: none !important; }
.ctm-inp-required:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.ctm-inp-valid    { border-color: #22c55e !important; box-shadow: none !important; }
.ctm-inp-valid:focus   { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.15) !important; }
.ctm-req-star     { color: #ef4444; }
/* ── CTM multi-destination ── */
.ctm-dest-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.ctm-dest-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
}
.ctm-dest-label i {
    color: var(--primary);
    font-size: 0.8rem;
}
.ctm-dest-remove {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.ctm-dest-remove:hover { background: #fecaca; color: #dc2626; }
.ctm-add-dest-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary);
    background: transparent;
    border: 1px dashed var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    justify-content: center;
}
.ctm-add-dest-btn:hover { background: var(--primary-light); }
.ctm-add-dest-btn i { font-size: 0.75rem; }

/* ── Mobile Profile Overlay (bottom sheet) ── */
.nav-prof-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.45);
    align-items: flex-end;
    justify-content: center;
}
.nav-prof-sheet {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 0 0 env(safe-area-inset-bottom,0) 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
    max-height: 90vh;
    overflow-y: auto;
}
.nav-prof-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--gray-300);
    margin: 0.7rem auto 0.2rem;
}
.nav-prof-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem 0.85rem;
    border-bottom: 1px solid var(--gray-100);
}
.nav-prof-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-prof-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.nav-prof-name {
    flex: 1;
    min-width: 0;
}
.nav-prof-name strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-prof-name span {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-prof-close {
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.nav-prof-close:active { background: var(--gray-200); }
.nav-prof-items {
    padding: 0.4rem 0 0.5rem;
}
.nav-prof-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    color: var(--gray-800);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}
.nav-prof-item:hover,
.nav-prof-item:active {
    background: var(--gray-50);
    color: var(--primary);
}
.nav-prof-item i {
    width: 1.2em;
    text-align: center;
    color: var(--gray-500);
    font-size: 1rem;
}
.nav-prof-item:hover i { color: var(--primary); }
.nav-prof-item-mgmt { color: #2563eb; font-weight: 600; }
.nav-prof-item-mgmt i { color: #2563eb; }
.nav-prof-item-danger { color: var(--error); }
.nav-prof-item-danger i { color: var(--error); }
.nav-prof-item-danger:hover { background: #fef2f2; color: var(--error); }
.nav-prof-lang-row { cursor: default; }
.nav-prof-lang-row:hover { background: transparent; color: var(--gray-800); }
.nav-prof-divider {
    height: 1px;
    background: var(--gray-100);
    margin: 0.3rem 0;
}

/* ── Mobile Search Overlay ── */
.mob-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: #fff;
    flex-direction: column;
    overscroll-behavior: contain;
}
.mob-search-overlay.open {
    display: flex;
    animation: mobSearchIn 0.18s ease;
}
@keyframes mobSearchIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mob-search-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
    flex-shrink: 0;
}
.mob-search-back {
    background: none;
    border: none;
    color: var(--gray-600);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem -0.25rem -0.5rem -0.5rem;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.mob-search-back:active { background: var(--gray-100); }
.mob-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    border-radius: 999px;
    padding: 0 0.75rem;
    border: 1.5px solid transparent;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}
.mob-search-input-wrap:focus-within {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.mob-search-icon {
    color: var(--gray-400);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.mob-search-input {
    flex: 1;
    border: none;
    background: none;
    padding: 0.6rem 0;
    font-size: 1rem;
    outline: none;
    min-width: 0;
    color: #111827;
    -webkit-appearance: none;
}
.mob-search-input::-webkit-search-cancel-button { display: none; }
.mob-search-input::placeholder { color: var(--gray-400); }
.mob-search-clear {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.3rem;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-200);
    -webkit-tap-highlight-color: transparent;
}
.mob-search-clear.hidden { display: none; }
.mob-search-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-search-results .nsd-section {
    padding: 8px 16px 4px;
    font-size: 0.67rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
}
.mob-search-results .nsd-section:first-child { border-top: none; margin-top: 0; }
.mob-search-results .nsd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: none;
    color: #111827;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
    min-height: 52px;
}
.mob-search-results .nsd-item:active { background: #f8fafc; }
.mob-search-results .nsd-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.mob-search-results .nsd-item-name { font-size: 0.9rem; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-search-results .nsd-item-sub  { font-size: 0.75rem; color: #6b7280; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-search-results .nsd-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
}
.mob-search-results .nsd-footer:active { background: #f0f6ff; }
.mob-search-results .nsd-empty {
    padding: 3rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 2;
}
.mob-search-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--gray-400);
}
.mob-search-hint i { font-size: 2rem; opacity: 0.4; margin-bottom: 0.25rem; }
.mob-search-hint p { font-size: 0.85rem; line-height: 1.5; margin: 0; }

.edit-item-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    /* Use small viewport height so it never overflows behind browser chrome */
    max-height: 85vh;
    max-height: 85svh;
    box-sizing: border-box;
    animation: wishModalSlideIn 0.2s ease;
}
.edit-item-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
}
.edit-item-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gray-800); display: flex; align-items: center; gap: 0.4rem; }
.edit-item-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem;
    min-height: 0; /* required for flex children to scroll in Safari */
}
/* Form inside modal must participate in flex so body scrolls and footer stays fixed */
.edit-item-modal > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.edit-item-modal-body::-webkit-scrollbar { width: 5px; }
.edit-item-modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.edit-item-modal-body .form-group { margin-bottom: 0.75rem; }
.edit-item-modal-body .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-600); margin-bottom: 0.25rem; }
.edit-item-modal-body .form-group input,
.edit-item-modal-body .form-group select,
.edit-item-modal-body .form-group textarea { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 0.88rem; transition: border-color 0.15s; box-sizing: border-box; }
.edit-item-modal-body .form-group input:focus,
.edit-item-modal-body .form-group select:focus,
.edit-item-modal-body .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.edit-item-modal-body .form-row { display: flex; gap: 0.75rem; }
.edit-item-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--gray-100);
    flex-shrink: 0;
    /* Respect iOS home indicator */
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Slide-up animation used by the edit popup bottom sheet on mobile */
@-webkit-keyframes eipSlideUp {
    from { -webkit-transform: translateY(100%); transform: translateY(100%); }
    to   { -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes eipSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Mobile: bottom-sheet edit popup ──────────────────────────────── */
@media (max-width: 600px) {
    /* Overlay anchors to the bottom, no side padding */
    .food-visit-popup-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        /* Ensure overlay covers the FULL visual viewport even when keyboard is open */
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    }

    /* Bottom sheet: slides up from bottom, fills full width */
    .edit-item-modal {
        max-width: 100% !important;
        width: 100% !important;
        /* Rounded only at the top */
        border-radius: 18px 18px 0 0 !important;
        /* Never taller than the small viewport height, leaves room for keyboard */
        max-height: 88vh !important;
        max-height: 88svh !important;
        align-self: flex-end;
        box-sizing: border-box !important;
        /* Slide-up animation on mobile */
        animation: eipSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Drag handle visual cue */
    .edit-item-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--gray-200);
        border-radius: 2px;
    }
    .edit-item-modal-header {
        position: relative;
        padding-top: 1.4rem !important;
    }

    /* Stack form rows vertically on narrow screens */
    .edit-item-modal-body .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Bigger touch targets for inputs */
    .edit-item-modal-body .form-group input,
    .edit-item-modal-body .form-group select,
    .edit-item-modal-body .form-group textarea {
        font-size: 1rem !important;       /* prevents iOS auto-zoom on focus */
        padding: 0.6rem 0.75rem !important;
        min-height: 42px !important;
    }

    /* Footer buttons: full width, stacked */
    .edit-item-modal-footer {
        flex-direction: row !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
    .edit-item-modal-footer .btn {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 44px !important;
    }
}
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; padding: 1rem 0; }
.media-grid-item { border-radius: 10px; overflow: hidden; background: var(--gray-50); border: 1px solid var(--gray-100); transition: transform 0.15s, box-shadow 0.15s; }
.media-grid-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.media-grid-item a, .media-grid-img-wrap { display: block; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.media-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.media-grid-item:hover img { transform: scale(1.05); }
.media-grid-info { padding: 0.5rem 0.65rem; }
.media-grid-name { display: block; font-weight: 600; font-size: 0.82rem; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-grid-meta { display: block; font-size: 0.72rem; color: var(--gray-500); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-grid-meta i { margin-right: 0.2rem; }
.media-grid-caption { display: block; font-size: 0.72rem; color: var(--gray-400); font-style: italic; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-grid-date { display: block; font-size: 0.68rem; color: var(--gray-400); margin-top: 0.15rem; }
.profile-tab .tab-short { display: none; }

.media-submenu { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.media-sub-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: 999px; border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-600); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.media-sub-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff7f2; }
.media-sub-btn.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.media-sub-btn.active:hover { background: var(--primary-dark, #e55a1e); border-color: var(--primary-dark, #e55a1e); }
.media-sub-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--danger, #dc2626); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; margin-left: 0.1rem; }
.media-sub-btn.active .media-sub-badge { background: rgba(255,255,255,0.3); color: #fff; }
.media-overview-card { background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); border-radius: 12px; border: 1px solid var(--gray-100); padding: 1.5rem; margin-bottom: 1rem; }
.media-overview-header { display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.media-overview-plan { display: inline-flex; align-items: center; gap: 0.5rem; background: white; padding: 0.4rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; color: var(--gray-700); border: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.media-overview-plan i { color: var(--primary); }
.media-overview-gauges { display: flex; justify-content: center; gap: 3rem; }
.media-gauge { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.media-gauge-ring { position: relative; width: 100px; height: 100px; }
.media-gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.media-gauge-bg { fill: none; stroke: var(--gray-200); stroke-width: 5; }
.media-gauge-fill { fill: none; stroke: var(--ring-color, var(--primary)); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.media-gauge-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.media-gauge-num { font-size: 1.4rem; font-weight: 700; color: var(--gray-800); line-height: 1; }
.media-gauge-sep { font-size: 0.72rem; color: var(--gray-400); font-weight: 500; }
.media-gauge-label { font-size: 0.82rem; font-weight: 600; color: var(--gray-600); display: flex; align-items: center; gap: 0.3rem; }
.media-gauge-label i { font-size: 0.75rem; }
.media-upgrade-hint { margin-top: 1.25rem; text-align: center; font-size: 0.8rem; color: var(--gray-500); background: white; padding: 0.6rem 1rem; border-radius: 8px; border: 1px dashed var(--gray-200); }
.media-upgrade-hint i { color: var(--primary); margin-right: 0.25rem; }
.media-trip-group { margin-bottom: 0.35rem; }
.media-trip-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0.4rem; transition: background 0.12s; border-radius: 6px; }
.media-trip-header:hover { background: var(--gray-50, #f9fafb); }
.media-trip-header-open { background: var(--gray-50, #f9fafb); }
.media-trip-header-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.media-trip-title-row { display: flex; align-items: center; gap: 0.5rem; flex-basis: 100%; min-width: 0; }
.media-trip-meta-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; flex-basis: 100%; min-width: 0; }
.media-trip-title-text { font-weight: 600; font-size: 0.95rem; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.media-trip-dates { font-size: 0.8rem; color: var(--gray-500); display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.media-trip-dates i { font-size: 0.72rem; }
.media-trip-count { font-size: 0.78rem; color: var(--gray-400); background: var(--gray-100, #f3f4f6); border-radius: 10px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.media-trip-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.media-trip-chevron { color: var(--gray-400); font-size: 0.8rem; flex-shrink: 0; transition: color 0.15s; }
.media-trip-chevron i { transition: transform 0.2s; }
.media-trip-header:hover .media-trip-chevron { color: var(--gray-600); }
.media-trip-select-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.18rem 0.55rem; font-size: 0.72rem; font-weight: 600; border-radius: 10px; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-600); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; line-height: 1.4; }
.media-trip-select-btn:hover { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-800); }
.media-trip-select-btn .cancel-icon,
.media-trip-select-btn .cancel-label { display: none; }
#tab-media.media-selecting .media-trip-select-btn { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-700); }
#tab-media.media-selecting .media-trip-select-btn .select-icon,
#tab-media.media-selecting .media-trip-select-btn .select-label { display: none; }
#tab-media.media-selecting .media-trip-select-btn .cancel-icon,
#tab-media.media-selecting .media-trip-select-btn .cancel-label { display: inline; }
.media-grid-item { position: relative; }
.media-grid-select { position: absolute; top: 6px; left: 6px; z-index: 2; }
.media-grid-select input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.media-grid-item.selected { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 10px; }
.media-action-bar { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--gray-800); color: white; padding: 0.75rem 1.5rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 0.8rem; box-shadow: 0 4px 20px rgba(0,0,0,0.25); z-index: 999; }
.media-action-info { font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.media-action-buttons { display: flex; gap: 0.6rem; }
.media-action-buttons .btn { font-size: 0.85rem; padding: 0.45rem 1rem; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; font-weight: 500; }
.media-action-buttons .btn:not(.btn-danger):not(.media-act-cancel) { background: rgba(255,255,255,0.15); color: white; }
.media-action-buttons .btn:not(.btn-danger):not(.media-act-cancel):hover { background: rgba(255,255,255,0.25); }
.media-action-buttons .btn-danger { background: var(--danger); color: white; }
.media-action-buttons .btn-danger:hover { background: #dc2626; }
.media-act-cancel { background: rgba(255,255,255,0.08); color: var(--gray-300); }
.media-act-cancel:hover { background: rgba(255,255,255,0.18); color: white; }

.media-block-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1100; align-items: center; justify-content: center; padding: 1rem; }
.media-block-popup { background: white; border-radius: 16px; width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden; }
.media-block-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-100); }
.media-block-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.5rem; }
.media-block-header h3 i { color: var(--gray-400); }
.media-block-close { background: none; border: none; font-size: 1.5rem; color: var(--gray-400); cursor: pointer; padding: 0; line-height: 1; }
.media-block-close:hover { color: var(--gray-700); }
.media-block-desc { padding: 0.75rem 1.25rem 0; margin: 0; font-size: 0.82rem; color: var(--gray-500); }
.media-block-list { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; }
.media-block-loading, .media-block-empty { text-align: center; padding: 2rem; color: var(--gray-400); font-size: 0.9rem; }
.media-block-user { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.5rem; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.media-block-user:hover { background: var(--gray-50); }
.media-block-user.already-blocked { background: #fef2f2; }
.media-block-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.media-block-avatar-placeholder { background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.media-block-user-info { flex: 1; min-width: 0; }
.media-block-name { display: block; font-size: 0.85rem; font-weight: 500; color: var(--gray-800); }
.media-block-username { display: block; font-size: 0.75rem; color: var(--gray-400); }
.media-block-badge { font-size: 0.65rem; background: #fee2e2; color: #dc2626; padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.media-block-cb { accent-color: var(--danger); width: 18px; height: 18px; flex-shrink: 0; }
.media-block-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--gray-100); }

.media-hidden-badge { position: absolute; top: 6px; right: 6px; background: rgba(220, 38, 38, 0.85); color: white; font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 6px; display: flex; align-items: center; gap: 0.25rem; pointer-events: none; z-index: 2; backdrop-filter: blur(4px); }
.media-hidden-badge i { font-size: 0.6rem; }
.media-grid-img-wrap { position: relative; }
.media-has-blocks .media-grid-img-wrap img { opacity: 0.85; }
.media-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 10000; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.media-lightbox-overlay img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); user-select: none; }
.media-lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; z-index: 2; line-height: 1; opacity: 0.7; transition: opacity 0.15s; }
.media-lightbox-close:hover { opacity: 1; }
.media-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; font-size: 1.3rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: opacity 0.15s, background 0.15s; z-index: 2; }
.media-lightbox-nav:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.media-lightbox-prev { left: 1rem; }
.media-lightbox-next { right: 1rem; }
.media-lightbox-caption { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-top: 0.75rem; text-align: center; max-width: 80vw; }

@media (max-width: 600px) {
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; }
    .profile-tab .tab-full { display: none; }
    .profile-tab .tab-short { display: none; }
    .profile-tab { padding: 0.6rem; font-size: 1rem; }
    .profile-tab i { font-size: 1rem; }
    .media-action-bar { bottom: 4.5rem; min-width: auto; left: 0.75rem; right: 0.75rem; transform: none; padding: 0.6rem 1rem; gap: 0.5rem; }
    .media-action-info { font-size: 0.82rem; }
    .media-action-buttons { gap: 0.5rem; }
    .media-action-buttons .btn { font-size: 0.78rem; padding: 0.4rem 0.8rem; gap: 0.25rem; border-radius: 7px; }
    .media-lightbox-nav { width: 36px; height: 36px; font-size: 1rem; }
    .media-lightbox-prev { left: 0.5rem; }
    .media-lightbox-next { right: 0.5rem; }
    .media-overview-gauges { gap: 2rem; }
    .media-gauge-ring { width: 85px; height: 85px; }
    .media-gauge-num { font-size: 1.2rem; }
    .media-overview-card { padding: 1rem; }
}

.intermediate-stop-popup-box { max-width: 460px; max-height: 90vh; overflow-y: auto; margin: 0.5rem; }
.intermediate-stop-content { padding: 0.8rem 1rem 1rem; }
.intermediate-stop-content p { margin: 0 0 0.5rem; color: var(--gray-700); font-size: 0.88rem; line-height: 1.4; }
.intermediate-stop-content .form-group { margin-bottom: 0.6rem; }
.intermediate-stop-content .form-group label { font-size: 0.82rem; margin-bottom: 0.2rem; }
.intermediate-stop-content .form-group input,
.intermediate-stop-content .form-group select,
.intermediate-stop-content .form-group textarea { font-size: 0.88rem; padding: 0.4rem 0.6rem; }
.intermediate-stop-content .dest-dates-row { gap: 0.5rem; }
.is-example-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
}
.is-example-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.is-example-route {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--gray-800);
    flex-wrap: wrap;
}
.is-example-route i { color: var(--gray-400); font-size: 0.7rem; }
.is-note {
    font-size: 0.78rem !important;
    color: var(--gray-500) !important;
    background: #eff6ff;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.8rem !important;
}
.is-note i { color: var(--primary); margin-right: 0.2rem; }
.is-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.3rem;
}
@media (max-width: 500px) {
    .intermediate-stop-popup-box { max-height: 95vh; margin: 0.25rem; }
    .intermediate-stop-popup-box .stat-popup-header h3 { font-size: 0.9rem; }
    .intermediate-stop-content { padding: 0.6rem 0.75rem 0.75rem; }
    .intermediate-stop-content .form-group { margin-bottom: 0.45rem; }
    .intermediate-stop-content .form-group label { font-size: 0.78rem; }
    .intermediate-stop-content .dest-dates-row { gap: 0.4rem; }
    .is-example-box { padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; }
    .is-example-route { font-size: 0.8rem; }
    .is-note { font-size: 0.75rem !important; padding: 0.3rem 0.5rem; margin-bottom: 0.5rem !important; }
    .is-actions .btn { font-size: 0.82rem; padding: 0.4rem 0.8rem; }
}

/* ── Destination Section Flyout ──────────────────────────────────── */
.dest-flyout {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.dest-flyout-hidden { display: none !important; }
.dest-flyout.dest-flyout-open { pointer-events: all; }

.dest-flyout-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.28s ease;
    cursor: pointer;
}
.dest-flyout.dest-flyout-open .dest-flyout-backdrop { opacity: 1; }

.dest-flyout-panel {
    position: relative;
    width: min(500px, 100vw);
    height: 100dvh;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
    box-shadow: -4px 0 32px rgba(0,0,0,0.14);
    overflow: hidden;
}
.dest-flyout.dest-flyout-open .dest-flyout-panel { transform: translateX(0); }

.dest-flyout-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--gray-50,#f9fafb);
    border-bottom: 1px solid var(--gray-100,#f3f4f6);
    flex-shrink: 0;
    min-height: 48px;
}
.dest-flyout-dest-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-900,#111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dest-flyout-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400,#9ca3af);
    font-size: 1rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.dest-flyout-close:hover { background: var(--gray-200,#e5e7eb); color: var(--gray-700,#374151); }

.dest-flyout-tabs {
    display: flex;
    overflow-x: auto;
    padding: 0.5rem 0.6rem;
    gap: 0.35rem;
    background: var(--gray-50,#f9fafb);
    border-bottom: 1px solid var(--gray-200,#e5e7eb);
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dest-flyout-tabs::-webkit-scrollbar { display: none; }

.flyout-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.8rem;
    border: none;
    background: var(--gray-200,#e5e7eb);
    cursor: pointer;
    font-size: 0.79rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--gray-500,#6b7280);
    border-radius: 999px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
}
.flyout-tab-btn:hover { background: var(--gray-300,#d1d5db); color: var(--gray-800,#1f2937); }
.flyout-tab-btn.no-data { opacity: 0.45; }
.flyout-tab-btn.dest-icon-transport.has-data { background: #e0f2fe; color: #0369a1; }
.flyout-tab-btn.dest-icon-transport.has-data.active { background: #0369a1; color: #fff; font-weight: 600; }
.flyout-tab-btn.dest-icon-stay.has-data { background: #fff1f2; color: #e11d48; }
.flyout-tab-btn.dest-icon-stay.has-data.active { background: #e11d48; color: #fff; font-weight: 600; }
.flyout-tab-btn.dest-icon-food.has-data { background: #fff7ed; color: #f97316; }
.flyout-tab-btn.dest-icon-food.has-data.active { background: #f97316; color: #fff; font-weight: 600; }
.flyout-tab-btn.dest-icon-activity.has-data { background: #eff6ff; color: #3b82f6; }
.flyout-tab-btn.dest-icon-activity.has-data.active { background: #3b82f6; color: #fff; font-weight: 600; }
.flyout-tab-btn.dest-icon-stop.has-data { background: #fef3c7; color: #92400e; }
.flyout-tab-btn.dest-icon-stop.has-data.active { background: #f59e0b; color: #fff; font-weight: 600; }

.dest-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem 2rem;
    overscroll-behavior: contain;
}
body.flyout-open { overflow: hidden; }

@media (max-width: 600px) {
    .dest-flyout-panel { width: 100vw; }
    .dest-flyout-tabs { padding: 0.4rem 0.5rem; gap: 0.25rem; }
    .flyout-tab-btn { padding: 0.3rem 0.6rem; font-size: 0.74rem; }
    .dest-flyout-body { padding: 0.5rem 0.6rem 1.5rem; }
}

/* ── Trip Memories Carousel ─────────────────────────────────── */
.trip-memories-section {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.trip-memories-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(90deg, #fffbeb 0%, #fff 100%);
}
.trip-memories-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.trip-memories-title i { color: #f59e0b; }
.trip-memories-hint {
    font-size: 0.72rem;
    color: var(--gray-400);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.memories-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.1rem;
}
.memories-header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.memories-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 8px;
    padding: 2px;
}
.mem-view-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.78rem;
    transition: background 0.15s, color 0.15s;
}
.mem-view-btn:hover { background: var(--gray-200); color: var(--gray-700); }
.mem-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
/* ── Grid view ── */
.memories-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
    padding: 0.75rem 1rem;
}
.memories-grid-view .memories-photo {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.memories-grid-view .memories-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.memories-grid-view .memories-photo:hover img { transform: scale(1.05); }
/* ── Timeline view ── */
.memories-timeline-view {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mem-timeline-group {}
.mem-timeline-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mem-timeline-date i { color: #f59e0b; font-size: 0.7rem; }
.mem-timeline-date .mem-timeline-count {
    font-weight: 400;
    color: var(--gray-400);
    font-size: 0.72rem;
}
.mem-timeline-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    cursor: grab;
    user-select: none;
}
.mem-timeline-strip.is-dragging { cursor: grabbing; }
.mem-timeline-strip::-webkit-scrollbar { height: 3px; }
.mem-timeline-strip::-webkit-scrollbar-track { background: transparent; }
.mem-timeline-strip::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.mem-timeline-strip .memories-photo {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.mem-timeline-strip .memories-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.mem-timeline-strip .memories-photo:hover img { transform: scale(1.05); }
.mem-timeline-undated .mem-timeline-date { color: var(--gray-400); font-weight: 400; font-style: italic; }
/* ── Destination view ── */
.memories-destination-view {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* ── Uploader view ── */
.memories-uploader-view {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.mem-uploader-group {}
.mem-uploader-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}
.mem-uploader-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.mem-uploader-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
}
.mem-dest-group {}
.mem-dest-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.mem-dest-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}
.mem-dest-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.mem-dest-city {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mem-dest-country {
    font-size: 0.72rem;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mem-dest-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.mem-dest-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    cursor: grab;
    user-select: none;
}
.mem-dest-strip.is-dragging { cursor: grabbing; }
.mem-dest-strip::-webkit-scrollbar { height: 3px; }
.mem-dest-strip::-webkit-scrollbar-track { background: transparent; }
.mem-dest-strip::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.mem-dest-strip .memories-photo {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.mem-dest-strip .memories-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.mem-dest-strip .memories-photo:hover img { transform: scale(1.05); }
/* ── Per-section strip/grid toggle button ── */
.mem-dest-view-btn {
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.72rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mem-dest-view-btn:hover { background: var(--gray-100); color: var(--primary); border-color: var(--primary); }
/* When a strip is in grid mode */
.mem-dest-strip.mem-dest-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 4px;
    overflow-x: visible;
    cursor: default;
    padding-bottom: 0;
    user-select: auto;
}
.mem-dest-strip.mem-dest-grid.is-dragging { cursor: default; }
.mem-dest-strip.mem-dest-grid .memories-photo {
    width: 100%;
    height: 90px;
    flex-shrink: unset;
}
/* ── Day Visit sub-section inside destination view ── */
.mem-dayvisit-group {
    margin-top: 0.6rem;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-light, #bfdbfe);
}
.mem-dayvisit-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}
.mem-dayvisit-icon {
    color: var(--primary);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.mem-dayvisit-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
}
.mem-dayvisit-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--primary);
    background: #eff6ff;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
/* Type sections within a destination */
.mem-type-section {
    margin-top: 0.55rem;
}
.mem-type-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 0.35rem;
}
.mem-type-icon {
    font-size: 0.72rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--gray-500);
}
.mem-type-section:nth-child(1) .mem-type-icon { color: #6366f1; }
.mem-type-section:nth-child(2) .mem-type-icon { color: #0ea5e9; }
.mem-type-section:nth-child(3) .mem-type-icon { color: #f59e0b; }
.mem-type-section:nth-child(4) .mem-type-icon { color: #22c55e; }
.mem-type-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-700);
    flex: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.mem-type-count {
    font-size: 0.65rem;
    color: var(--gray-500);
    margin-left: auto;
}
@media (max-width: 600px) {
    .trip-memories-hint { display: none; }
    .memories-grid-view { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}
.trip-memories-carousel {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-200) transparent;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}
.trip-memories-carousel.is-dragging {
    cursor: grabbing;
}
.trip-memories-carousel::-webkit-scrollbar { height: 4px; }
.trip-memories-carousel::-webkit-scrollbar-track { background: transparent; }
.trip-memories-carousel::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.memories-photo {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border: 2px solid #fff;
    outline: 1px solid var(--gray-100);
}
.memories-photo:hover { transform: scale(1.07) translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
.memories-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memories-date-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    padding: 6px 2px 3px;
    letter-spacing: 0.03em;
    pointer-events: none;
    border-radius: 0 0 10px 10px;
}

/* ── Collage Modal ──────────────────────────────────────────── */
.trip-collage-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.trip-collage-modal.hidden { display: none; }
.trip-collage-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(2px);
}
.trip-collage-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.trip-collage-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: rgba(15,15,26,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.trip-collage-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip-collage-title i { color: #fbbf24; flex-shrink: 0; }
.trip-collage-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.trip-collage-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 7px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.trip-collage-btn:hover { background: rgba(255,255,255,0.24); }
.trip-collage-close-btn { padding: 0.35rem 0.6rem; }
.trip-collage-canvas-wrap {
    position: relative;
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.75rem;
    background: #0f0f1a;
    min-height: 180px;
}
#trip-collage-canvas { max-width: 100%; border-radius: 6px; display: block; }
.collage-loading-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .memories-photo { width: 90px; height: 90px; }
    .trip-memories-hint { display: none; }
    .trip-collage-content { max-height: 95vh; }
    .trip-collage-title { font-size: 0.8rem; }
}

/* ── Dashboard Trip Photo Carousel Modal ─────────────────────── */
.tc-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tc-modal.hidden { display: none; }
.tc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(3px);
}
.tc-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    max-height: 92vh;
    background: #111827;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 72px rgba(0,0,0,0.65);
}
.tc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.tc-title {
    color: #f0f0f0;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-title i { color: #fbbf24; flex-shrink: 0; }
.tc-header-controls { display: flex; gap: 0.35rem; flex-shrink: 0; }
.tc-ctrl {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e0e0e0;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.tc-ctrl:hover { background: rgba(255,255,255,0.2); color: #fff; }
.tc-speed-btn { min-width: 40px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.tc-speed-btn:hover { background: rgba(251,191,36,0.15); color: #fde68a; border-color: rgba(251,191,36,0.55); }
.tc-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    background: #0d1117;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}
.tc-arrow {
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ccc;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.tc-arrow:hover { background: rgba(255,255,255,0.2); color: #fff; }
.tc-photo-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    overflow: hidden;
}
.tc-photo {
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    transition: opacity 0.4s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.tc-photo-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    margin-top: 0.3rem;
    text-align: center;
}
.tc-photo-location {
    font-size: 0.72rem;
    color: #4ade80;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.tc-photo-location i { margin-right: 0.28em; }
.tc-photo-date {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.02em;
}
.tc-photo-date i { margin-right: 0.28em; color: rgba(255,255,255,0.3); }
.tc-photo-component {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f0f0f0;
}
.tc-photo-component i { margin-right: 0.28em; color: #fbbf24; }
.tc-caption {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin: 0;
    font-style: italic;
    min-height: 1em;
}
.tc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.65rem;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    gap: 0.5rem;
}
.tc-dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 80%;
}
.tc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.tc-dot.tc-dot-active { background: #fbbf24; transform: scale(1.35); }
.tc-counter {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    flex-shrink: 0;
}
.tc-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.88rem;
    background: #0d1117;
    z-index: 5;
}

@media (max-width: 600px) {
    .tc-box { max-height: 96vh; border-radius: 12px; }
    .tc-stage { min-height: 220px; padding: 0.5rem 0; }
    .tc-arrow { width: 34px; height: 34px; font-size: 0.85rem; }
    .tc-photo { max-height: 52vh; }
}

/* ── Language switcher buttons (nav dropdown) ──────────────── */
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    background: transparent;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px 2px 5px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.lang-btn-flag {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    display: block;
}
.lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.lang-btn-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.lang-btn-active:hover {
    background: var(--primary-dark, #1d4ed8);
    border-color: var(--primary-dark, #1d4ed8);
    color: #fff;
}

/* ── Map page: Shared Memory Reel card ───────────────────────────────── */
.mr-map-reel-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #0d0d2b, #1a1040);
    border-radius: 12px;
    padding: .75rem 1rem;
    margin: .5rem 0 .75rem;
    flex-wrap: wrap;
}
.mr-map-reel-left { min-width: 0; }
.mr-map-reel-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a5b4fc;
    margin-bottom: .2rem;
}
.mr-map-reel-title {
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.mr-map-reel-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.mr-map-play-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.mr-map-play-btn:hover { opacity: .9; }
.mr-map-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: .55rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: all .15s;
}
.mr-map-edit-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* Reel lightbox modal */
.mr-map-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mr-map-modal-inner {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    aspect-ratio: 16/9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}
.mr-map-modal-inner.mr-modal-916 { aspect-ratio: 9/16; max-width: 420px; }
.mr-map-modal-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 10;
    background: rgba(0,0,0,.6);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.mr-map-modal-close:hover { background: rgba(0,0,0,.85); }

/* ── Edit Trip — Cross-Browser Mobile Fixes ─────────────────────── */

/* 1. Prevent iOS Safari auto-zoom: font-size must be ≥ 16px on focus.
      This is the single most impactful mobile-browser fix. */
@media (max-width: 768px) {
    .form-group input,
    .form-group select,
    .form-group textarea,
    .flatpickr-input {
        font-size: 1rem !important;
    }

    /* 2. Normalise all text inputs across iOS/Android/Samsung */
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .form-group textarea,
    .flatpickr-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        border-radius: var(--radius-sm);
    }

    /* 3. Normalise <select> and add custom dropdown arrow */
    .form-group select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2.25rem;
        cursor: pointer;
    }

    /* 4. Apple HIG minimum touch target: 44px */
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .form-group select {
        min-height: 44px;
    }

    /* 5. Destination entry header: wrap safely on narrow screens */
    .destination-entry-header {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    /* 6. Destination card: tighter padding on mobile */
    .destination-form-entry {
        padding: 0.75rem;
    }

    /* 7. Footer buttons: stretch to fill row evenly */
    .dest-card-footer {
        flex-wrap: wrap;
    }
    .dest-card-footer .btn {
        flex: 1 1 auto;
        min-height: 40px;
        justify-content: center;
        text-align: center;
    }

    /* 8. Save Changes button — full width on mobile */
    #edit-trip-form .form-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    #edit-trip-form .form-actions .btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }

    /* 9. Danger zone button — full width */
    .danger-zone form .btn-danger {
        width: 100%;
        min-height: 44px;
    }

    /* 10. Card padding reduction */
    .card {
        padding: 1rem;
    }

    /* 11. Intermediate stop popup — full width with scroll */
    .intermediate-stop-popup-box {
        width: calc(100vw - 2rem);
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }
    .intermediate-stop-content .form-group input,
    .intermediate-stop-content .form-group select {
        font-size: 1rem !important;
        min-height: 44px;
    }

    /* 12. Flatpickr calendar: keep inside viewport */
    .flatpickr-calendar {
        max-width: calc(100vw - 2rem) !important;
        font-size: 0.875rem;
    }

    /* 13. Add Destination button — full width */
    #add-destination-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* 14. Trip purpose grid: 3 cols → 2 cols on narrow screens */
@media (max-width: 520px) {
    .trip-purpose-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    .trip-purpose-card {
        flex-direction: column;
        padding: 0.55rem 0.4rem;
        gap: 0.2rem;
    }
    .trip-purpose-card i { font-size: 1rem; }
    .trip-purpose-card strong { font-size: 0.78rem; }
}

/* 15. Extra-small screens (e.g., iPhone SE 375px) */
@media (max-width: 400px) {
    .container { padding: 0 0.5rem; }
    .page-header h1 { font-size: 1.1rem; }
    .destination-form-entry { padding: 0.6rem; }
    .card { padding: 0.75rem; }
    .dest-dates-row { gap: 0.5rem; }
}

/* ── Notifications Page ──────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 0.5rem; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    position: relative;
    transition: background 0.15s;
}
.notif-item:not(.notif-read) { border-left: 3px solid var(--primary); background: var(--orange-50, #fff7ed); }
.notif-item.notif-read { opacity: 0.8; }

.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 0.92rem; color: var(--gray-800); margin-bottom: 0.2rem; }
.notif-msg { font-size: 0.85rem; color: var(--gray-600); line-height: 1.4; margin-bottom: 0.4rem; }

.notif-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
}
.notif-time { color: var(--gray-400); }
.notif-trip-link,
.notif-action-link {
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}
.notif-access-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}
.notif-trip-link:hover,
.notif-action-link:hover { text-decoration: underline; }

.notif-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Nav Notification Dropdown ──────────────────────────────── */
.nav-bell-red { color: #ef4444 !important; }
.nav-badge-red { background: #ef4444 !important; }
.nav-mobile-bell-red { color: #ef4444; }
.nav-notif-dropdown { position: relative; }
.nav-notif-toggle { background: none; border: none; cursor: pointer; }
.nav-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 1200;
    overflow: hidden;
}
.nav-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50, #f9fafb);
}
.nav-notif-header-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-notif-mark-all {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.nav-notif-mark-all:hover { background: var(--gray-100); }
.nav-notif-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    font-size: 1.1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.nav-notif-close:hover { background: var(--gray-200); color: var(--gray-800); }
.nav-notif-list { max-height: 420px; overflow-y: auto; }
.nav-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
    position: relative;
}
.nav-notif-item:hover { background: var(--gray-50, #f9fafb); }
.nav-notif-item.is-unread { background: #fff7ed; border-left: 3px solid #ef4444; }
.nav-notif-item.is-unread:hover { background: #fff3e0; }
.nav-notif-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-notif-content { flex: 1; min-width: 0; }
.nav-notif-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}
.nav-notif-preview {
    font-size: 0.78rem;
    color: var(--gray-600);
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}
.nav-notif-trip {
    font-size: 0.74rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
}
.nav-notif-time { font-size: 0.72rem; color: var(--gray-400); }
.nav-notif-dot {
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.nav-notif-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50, #f9fafb);
    text-align: center;
}
.nav-notif-see-all {
    font-size: 0.82rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.nav-notif-see-all:hover { text-decoration: underline; }
.nav-notif-loading,
.nav-notif-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    color: var(--gray-400);
    font-size: 0.85rem;
}

/* ── Profile Media – Archived by Others Section ─────────────── */
.media-archived-section { margin-top: 1.5rem; }
.media-archived-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0.25rem 0 1rem;
    line-height: 1.5;
}

.media-archived-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.media-archived-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid var(--danger);
}

.media-archived-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.media-archived-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-archived-thumb .media-archived-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 1.2rem;
}

.media-archived-info { flex: 1; min-width: 0; }
.media-archived-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    margin-bottom: 0.65rem;
}
.media-archived-trip a {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.media-archived-trip a:hover { text-decoration: underline; }
.media-archived-by,
.media-archived-comp {
    font-size: 0.8rem;
    color: var(--gray-500);
}
.media-archived-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Badge for self-archived photos in the media grid */
.media-archived-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    z-index: 2;
}
.media-is-archived .media-grid-img-wrap img { opacity: 0.7; }

@media (max-width: 520px) {
    .media-archived-item { flex-direction: column; }
    .media-archived-thumb { width: 100%; height: 140px; }
    .notif-item { padding: 0.75rem; }
}

/* ── SVG Icon Replacement (fa-svg-icons.js) ─────────────────────────────
 * v2: JS reads each <i>'s computed font-size and sets it as inline px on
 * the SVG, so icons are always the right size regardless of CSS cascade.
 * height/width are intentionally NOT set here — the JS inline style wins.
 * ─────────────────────────────────────────────────────────────────── */
svg.fa-svg-icon {
    display: inline-block;
    overflow: visible;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;   /* don't squash inside flex containers */
}
/* Spinner animation */
@keyframes fa-svg-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
svg.fa-svg-spin {
    animation: fa-svg-spin 2s linear infinite;
    transform-origin: center;
}
/* ── Content Protection ─────────────────────────────────────────────────
 * Hides all content when the page is sent to a printer or saved as PDF.
 * Also used as a fallback for "Print Screen → Print" workflows.
 * ─────────────────────────────────────────────────────────────────── */
@media print {
    html, body { display: none !important; }
}

/* ── Photo Notification Bell Overlay ──────────────────────────────────── */
.photo-notif-bell {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    pointer-events: none;
    animation: notif-bell-pulse 1.8s ease-in-out infinite;
    isolation: isolate;
}
@keyframes notif-bell-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

/* Required destination date validation marker */
.dest-date-input.is-invalid,
.flatpickr-input.is-invalid {
    border: 2px solid #dc2626 !important;
    background-color: #fef2f2 !important;
}
.dest-date-input.is-invalid:focus,
.flatpickr-input.is-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Recycle Bin — /trips/bin
   ══════════════════════════════════════════════════════════════ */

/* Bin icon button in My Trips header */
.page-header-actions { display: flex; align-items: center; gap: 0.6rem; }
.trips-bin-btn { position: relative; color: var(--gray-500); border-color: var(--gray-300); padding: 0.45rem 0.75rem; }
.trips-bin-btn:hover { color: var(--danger); border-color: var(--danger); background: #fef2f2; }
.trips-bin-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--danger); color: #fff;
    font-size: 0.62rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; line-height: 1; border: 2px solid #fff;
}

/* Page sub-heading */
.page-header-sub { font-size: 0.82rem; color: var(--gray-500); margin: 0.1rem 0 0; }
.page-header-back-group { display: flex; align-items: center; gap: 0.75rem; }

/* Bin empty state */
.bin-empty-state { text-align: center; padding: 4rem 1rem; }
.bin-empty-state h2 { font-size: 1.25rem; color: var(--gray-600); margin-bottom: 0.4rem; }
.bin-empty-state p { color: var(--gray-500); font-size: 0.9rem; }

/* Bin trip list */
.bin-trip-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.5rem; }

/* Bin trip card */
.bin-trip-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s;
}
.bin-trip-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.09); }

.bin-urgency-urgent { border-left: 4px solid #dc2626; }
.bin-urgency-warning { border-left: 4px solid #f59e0b; }
.bin-urgency-normal  { border-left: 4px solid var(--gray-200); }

.bin-trip-cover {
    width: 80px; height: 70px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--gray-100);
    flex-shrink: 0;
}

.bin-trip-info { flex: 1; min-width: 0; }
.bin-trip-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); margin: 0 0 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bin-trip-dates, .bin-trip-deleted-on { font-size: 0.78rem; color: var(--gray-500); margin: 0 0 0.15rem; }
.bin-trip-dates i, .bin-trip-deleted-on i { margin-right: 0.3rem; }

.bin-trip-expiry { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.73rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 20px; margin-top: 0.25rem; }
.bin-expiry-urgent  { background: #fef2f2; color: #b91c1c; }
.bin-expiry-warning { background: #fffbeb; color: #92400e; }
.bin-expiry-normal  { background: #f0fdf4; color: #166534; }

.bin-trip-actions { display: flex; flex-direction: row; gap: 0.45rem; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.bin-restore-btn { white-space: nowrap; }
.bin-purge-btn   { white-space: nowrap; background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.bin-purge-btn:hover { background: var(--danger); color: #fff; }

@media (max-width: 600px) {
    .bin-trip-card { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; }
    .bin-trip-cover { width: 60px; height: 52px; }
    .bin-trip-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .bin-btn-label { display: none; }
    .page-header-actions { gap: 0.4rem; }
}

/* ── Mobile notification backdrop ──────────────────────────── */
.nav-notif-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1999;
}
@media (max-width: 768px) {
    .nav-notif-backdrop.active { display: block; }
}

/* ── Photo Likes (gallery lightbox + grid badge) ────────────────── */
.galp-like-bar {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem .8rem .45rem;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    background: #fafafa;
}
.galp-like-btn {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .26rem .52rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: .88rem;
    font-family: inherit;
    transition: background .14s, border-color .14s, transform .1s;
    line-height: 1;
}
.galp-like-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: scale(1.1);
}
.galp-like-btn.active {
    background: #fff0f0;
    border-color: #f87171;
}
.galp-like-cnt {
    font-size: .7rem;
    font-weight: 700;
    color: #374151;
    min-width: .55rem;
}
.galp-like-btn.active .galp-like-cnt {
    color: #dc2626;
}
.galp-item-like-badge {
    position: absolute;
    bottom: .4rem;
    right: .4rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 20px;
    padding: .13rem .38rem;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .2rem;
    pointer-events: none;
    z-index: 2;
}
.galp-item-like-badge.active i { color: #ef4444 !important; }
.galp-lb-like-cnt { font-size: .75rem; font-weight: 700; min-width: .8em; }

/* ── Prevent iOS/Android input zoom (triggers when font-size < 16px) ── */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea {
        font-size: max(16px, 1em) !important;
    }
}