/**
 * Itinerary Editor Styles - Phase 1.2
 *
 * Single horizontal row layout with inline date labels
 *
 * @version 1.2.1
 * @date 2025-12-01
 */

/* =========================================================================
   ITINERARY CONTAINER
   ========================================================================= */

.itinerary-editor-container {
    margin-bottom: 24px;
}

/* =========================================================================
   ITINERARY HEADER - Inline title + menu button (compact, no rounded corners)
   ========================================================================= */

.itinerary-header-row.editor-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 16px;
    margin: 0;
    border-radius: 0 !important;
    color: white;
    width: 100%;
    box-sizing: border-box;
}

.itinerary-header-row.editor-header .header-title {
    font-size: var(--font-size-base); /* 14px */
    font-weight: 600;
    flex: 1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.itinerary-header-row.editor-header .header-menu-btn {
    background: color-mix(in srgb, var(--v-surface-high) 20%, transparent);
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}

.itinerary-header-row.editor-header .header-menu-btn:hover {
    background: color-mix(in srgb, var(--v-surface-high) 30%, transparent);
}

.itinerary-header-row.editor-header .header-menu-btn .material-icons {
    color: white;
    font-size: var(--font-size-xl); /* 18px */
}

/* Header city links - clickable city names in the header */
.header-city-link {
    text-decoration: none;
    border-bottom: none;
    outline: none;
}

.header-city-link:hover {
    text-decoration: underline;
}

/* =========================================================================
   ITINERARY CARDS ROW - Single horizontal row for entire itinerary
   ========================================================================= */

.itinerary-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden; /* Prevent y-scrollbar from affecting layout */
    scrollbar-gutter: stable; /* Reserve scrollbar space to prevent layout shift */
    padding: 20px 12px 12px 12px;
    margin-left: 5px;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    background: var(--v-surface);
    /* No border or border-radius per user request */
}

.itinerary-cards-row::-webkit-scrollbar {
    height: 8px;
}

.itinerary-cards-row::-webkit-scrollbar-track {
    background: var(--v-surface-lowest);
    border-radius: 4px;
}

.itinerary-cards-row::-webkit-scrollbar-thumb {
    background: var(--v-surface-lowest);
    border-radius: 4px;
}

.itinerary-cards-row::-webkit-scrollbar-thumb:hover {
    background: var(--v-surface-lowest);
}

/* =========================================================================
   CITY BLOCK - Wrapper for days in the same city
   ========================================================================= */

.city-block-wrapper {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 0;
    padding: 28px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    border: 1px dashed var(--v-ink-muted);
    border-left: 3px solid transparent; /* Will be set by JS with city color */
    margin-right: 8px;
    position: relative;
    overflow: visible; /* Allow date labels to show above */
    transition: all 0.2s ease;
}

.city-block-wrapper:hover {
    border-color: rgba(231, 76, 60, 0.3);
    border-left-color: transparent; /* Keep left border for city color */
    background: rgba(0, 0, 0, 0.03);
}

.city-block-wrapper.sortable-ghost {
    opacity: 0.4;
    background: rgba(255, 152, 0, 0.1);
    border: 2px dashed var(--v-warning);
}

.city-block-wrapper.sortable-chosen {
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2);
}

.city-block-header {
    position: absolute;
    top: -15px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--v-surface-high);
    padding: 2px 8px 2px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs); /* 12px */
    font-weight: 500;
    color: var(--v-ink);
    border: none;
    z-index: 1;
    user-select: none;
}

.city-block-header .drag-handle {
    font-size: var(--font-size-lg); /* 16px */
    color: var(--v-ink-subtle);
    cursor: grab;
    margin-right: 2px;
}

.city-block-header .drag-handle:active {
    cursor: grabbing;
}

.city-block-header .city-name {
    font-weight: 600;
    color: var(--v-ink);
}

.city-block-header .day-count {
    color: var(--v-ink-muted);
    font-weight: 400;
}

.city-block-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    margin-left: 4px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.city-block-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.city-block-menu-btn .material-icons {
    font-size: var(--font-size-xl); /* 18px */
    color: var(--v-ink-muted);
}

.city-block-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    flex-shrink: 0;
}

.city-block-separator::before {
    content: '';
    width: 2px;
    height: 40px;
    /* background removed per user request */
    border-radius: 1px;
}

/* City Block Menu Dropdown */
.city-block-menu {
    position: fixed;
    background: var(--v-surface-high);
    border-radius: 8px;
    box-shadow: var(--v-lift);
    min-width: 160px;
    z-index: 1000;
    padding: 8px 0;
    animation: fadeInScale 0.15s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.city-block-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: var(--font-size-base); /* 14px */
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.city-block-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.city-block-menu-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.city-block-menu-item .material-icons {
    font-size: var(--font-size-xl); /* 18px */
    color: var(--v-ink-muted);
}

.city-block-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* =========================================================================
   CITY REORDER MODAL
   ========================================================================= */

.city-reorder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.city-reorder-overlay.visible {
    opacity: 1;
}

.city-reorder-overlay.closing {
    opacity: 0;
}

.city-reorder-modal {
    background: var(--v-surface-high);
    border-radius: 16px;
    box-shadow: var(--v-lift);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.city-reorder-overlay.visible .city-reorder-modal {
    transform: scale(1);
}

.city-reorder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v-hairline);
}

.city-reorder-header h3 {
    margin: 0;
    font-size: var(--font-size-xl); /* 18px */
    font-weight: 600;
    color: var(--color-text-primary);
}

.city-reorder-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.city-reorder-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.city-reorder-close .material-icons {
    font-size: var(--font-size-2xl); /* 20px */
    color: var(--v-ink-muted);
}

.city-reorder-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.city-reorder-hint {
    margin: 0 0 16px 0;
    font-size: var(--font-size-sm); /* 13px */
    color: var(--v-ink-muted);
}

.city-reorder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.city-reorder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--v-surface-low);
    border-radius: 8px;
    cursor: grab;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.city-reorder-item:hover {
    background: var(--v-surface-low);
}

.city-reorder-item.city-reorder-ghost {
    opacity: 0.4;
    background: rgba(255, 152, 0, 0.2);
}

.city-reorder-item.city-reorder-chosen {
    background: var(--v-surface-high);
    box-shadow: var(--v-lift);
}

.city-reorder-item.city-reorder-dragging {
    cursor: grabbing;
}

.city-reorder-drag {
    font-size: var(--font-size-2xl); /* 20px */
    color: var(--v-ink-subtle);
}

.city-reorder-name {
    flex: 1;
    font-size: var(--font-size-md); /* 15px */
    font-weight: 500;
    color: var(--color-text-primary);
}

.city-reorder-days {
    font-size: var(--font-size-sm); /* 13px */
    color: var(--v-ink-muted);
}

.city-reorder-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--v-hairline);
}

.city-reorder-cancel {
    padding: 10px 20px;
    background: none;
    border: 1px solid var(--v-hairline);
    border-radius: 8px;
    font-size: var(--font-size-base); /* 14px */
    font-weight: 500;
    color: var(--v-ink-muted);
    cursor: pointer;
    transition: background 0.2s ease;
}

.city-reorder-cancel:hover {
    background: var(--v-surface-low);
}

.city-reorder-apply {
    padding: 10px 20px;
    background: var(--v-warning);
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-base); /* 14px */
    font-weight: 500;
    color: var(--v-warning-on);
    cursor: pointer;
    transition: background 0.2s ease;
}

.city-reorder-apply:hover {
    background: var(--v-warning);
    color: var(--v-accent-on);
}

/* =========================================================================
   ROUTE REFRESH INDICATOR
   ========================================================================= */

.route-refresh-indicator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #424242;
    color: white;
    border-radius: 8px;
    box-shadow: var(--v-lift);
    z-index: 10000;
    font-size: var(--font-size-base); /* 14px */
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.route-refresh-indicator.success {
    background: var(--v-positive);
    color: var(--v-accent-on);
}

.route-refresh-indicator.error {
    background: var(--v-danger);
    color: var(--v-accent-on);
}

.route-refresh-indicator .material-icons {
    font-size: var(--font-size-2xl); /* 20px */
}

.route-refresh-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--v-surface-high);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Auto-save indicator */
.auto-save-indicator {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #424242;
    color: white;
    border-radius: 8px;
    font-size: var(--font-size-sm); /* 13px */
    font-weight: 500;
    box-shadow: var(--v-lift);
    z-index: 100000 !important;
    animation: slideUp 0.2s ease-out;
}

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

.auto-save-indicator.success {
    background: var(--v-positive);
    color: var(--v-accent-on);
}

.auto-save-indicator.error {
    background: var(--v-danger);
    color: var(--v-accent-on);
}

.auto-save-indicator .material-icons {
    font-size: var(--font-size-xl); /* 18px */
}

.auto-save-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--v-surface-high);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =========================================================================
   DATE LABEL - Inline date separator (e.g., "12/20/2025")
   Styled similar to city-block-header with drag handle and menu button
   ========================================================================= */

.date-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-shrink: 0;
    position: absolute;
    top: -12px;
    left: 4px;
    z-index: 10;
    background: var(--v-surface-high);
    border-radius: 12px;
    border: 1px solid rgb(231, 76, 60);
    user-select: none;
}

/* Day drag handle - styled like city block drag handle */
.day-drag-handle {
    font-size: var(--font-size-lg); /* 16px */
    color: var(--v-ink-subtle);
    cursor: grab;
    margin-right: 2px;
}

.day-drag-handle:active {
    cursor: grabbing;
}

/* Day block menu button - styled like city block menu button */
.day-block-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    margin-left: 4px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.day-block-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.day-block-menu-btn .material-icons {
    font-size: var(--font-size-xl); /* 18px */
    color: var(--v-ink-muted);
}

.date-label-text {
    font-size: var(--font-size-xs); /* 12px */
    font-weight: 600;
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* =========================================================================
   DATE BLOCK - Container wrapping date label + cards for a single date
   ========================================================================= */

.date-block {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* No background - transparent */
    border-radius: 6px;
    padding: 12px 10px 10px 10px;
    margin-right: 8px;
    /* Medium grey outline container */
    border: 1.5px solid var(--v-hairline);
    transition: border-color 0.2s ease;
    position: relative;
    overflow: visible; /* Allow date labels to show above */
}

.date-block:hover {
    border-color: var(--v-ink-muted);
}

.date-block:last-child {
    margin-right: 0;
}

/* Subtle visual separator between day blocks */
.date-block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 20%;
    height: 60%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--v-surface-lowest), transparent);
    border-radius: 1px;
}

/* =========================================================================
   DATE CARDS CONTAINER - Cards for a single date
   ========================================================================= */

.date-cards-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    min-height: 200px;
    flex-shrink: 0;
    margin-top: 16px;
    align-items: flex-start; /* Cards shrink to content instead of stretching to tallest */
}

/* =========================================================================
   DRAG AND DROP STATES
   ========================================================================= */

.date-cards-container.drop-zone-active {
    background: rgba(33, 150, 243, 0.05);
    border-radius: 4px;
}

.date-cards-container.drop-zone-hover {
    background: rgba(33, 150, 243, 0.1);
    outline: 2px dashed var(--v-accent);
    outline-offset: -2px;
}

.card.dragging {
    opacity: 0.5;
    transform: rotate(2deg) scale(1.02);
    box-shadow: var(--v-lift) !important;
    z-index: 1000;
    border: 2px solid var(--v-accent);
}

.card[draggable="true"] {
    cursor: grab;
}

.card[draggable="true"]:active {
    cursor: grabbing;
}

/* =========================================================================
   CARD OVERRIDES FOR EDITOR
   Cards use existing .card styles from map.html
   These are additions/overrides for editor context
   ========================================================================= */

.itinerary-editor-container .card {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    position: relative;
}

.date-cards-container .card {
    flex-shrink: 0;
}

/* =========================================================================
   CARD MENU BUTTON - 3-dot menu on cards
   ========================================================================= */

.card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: color-mix(in srgb, var(--v-surface-high) 90%, transparent);
    border: none;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 10;
    box-shadow: var(--v-lift);
}

.card-menu-btn:hover {
    background: var(--v-surface-high);
    box-shadow: var(--v-lift);
}

.card-menu-btn .material-icons {
    font-size: var(--font-size-xl); /* 18px */
    color: var(--v-ink-muted);
}

/* =========================================================================
   TRAVEL CARDS - Special styling
   ========================================================================= */

.travel-card {
    border-left: 4px solid var(--v-accent);
}

/* Travel card body — single-slot: stacked, multi-slot: side-by-side columns */
.travel-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.travel-card.travel-multi-slot .travel-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
    align-items: start;
}

.travel-card-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* In multi-slot travel cards, map fills space above meal stop to align with photo+timeline column */
.travel-card.travel-multi-slot .travel-card-col:last-child .travel-mini-map-container {
    flex: 1;
    min-height: 100px;
}

/* Full-width description below media row, multi-column on merged cards */
.travel-card .segment-description {
    column-gap: 16px;
    line-height: 1.5;
}

.travel-card.travel-multi-slot .segment-description {
    margin-top: 4px;
}

/* Mini map container for travel cards */
.travel-mini-map-container {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--v-surface-low);
    margin: 4px 0;
}

/* Per-segment and single card timeline */
.segment-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
    position: relative;
}

/* Vertical connecting line between start and end dots */
.segment-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--v-surface-lowest);
}

/* Timeline stops, dots, legs */
.timeline-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    position: relative;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v-surface-lowest);
    flex-shrink: 0;
    margin-left: 3px;
    z-index: 1;
}

.timeline-stop.start .timeline-dot {
    background: var(--v-positive);
    color: var(--v-accent-on);
}

.timeline-stop.end .timeline-dot {
    background: var(--v-danger);
    color: var(--v-accent-on);
}

/* Via stops: no dot, indented with a dash */
.timeline-stop.via {
    padding-left: 22px;
}

.timeline-stop.via::before {
    content: '\2013';
    color: var(--v-ink-subtle);
    font-size: var(--v-text-label);
    flex-shrink: 0;
}

.timeline-label {
    font-size: var(--v-text-label);
    font-weight: 500;
    color: var(--v-ink);
}

.timeline-stop.via .timeline-label {
    font-weight: 400;
    color: var(--v-ink-muted);
    font-size: var(--v-text-label);
    font-style: italic;
}

.timeline-leg {
    display: flex;
    align-items: center;
    padding: 2px 0 2px 4px;
    border-left: 2px solid var(--v-hairline);
    margin-left: 7px;
}

.timeline-leg .material-icons {
    font-size: var(--v-text-body);
    color: var(--v-ink-subtle);
}

.timeline-leg-duration {
    font-size: var(--v-text-label);
    color: var(--v-ink-subtle);
    margin-left: 4px;
    white-space: nowrap;
}

/* Travel meal stop card (within travel card) */
.travel-meal-stop {
    margin: 4px 0 0;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--v-warning) 14%, transparent);
    border: 1px solid #FFE082;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.travel-meal-stop:hover {
    background: color-mix(in srgb, var(--v-warning) 16%, transparent);
}
.travel-meal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.travel-meal-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.travel-meal-name {
    font-weight: 600;
    font-size: var(--v-text-label);
    color: var(--v-ink);
    margin-bottom: 2px;
    line-height: 1.3;
}
.travel-meal-desc {
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    line-height: 1.3;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.travel-meal-replace-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    padding: 5px 10px;
    background: var(--v-warning);
    color: var(--v-warning-on);
    border: none;
    border-radius: 4px;
    font-size: var(--v-text-label);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.travel-meal-replace-btn:hover {
    background: var(--v-warning);
    color: var(--v-accent-on);
}

/* Meal stop waypoint in timeline */
.timeline-stop.meal {
    padding-left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.timeline-stop.meal::before {
    content: none;
}

/* Per-segment description */
.segment-description {
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    line-height: 1.4;
    text-align: left;
}

/* Isolated travel cards - subtle indicator when moved away from destination */
/* Note: Pink/red warning colors removed per user request */
.travel-card.travel-isolated {
    border-left: 4px solid var(--v-ink-muted);
    /* No special background, shadow, or animation - keeps card neutral */
}

/* =========================================================================
   LEGACY DATE BLOCKS - For backwards compatibility
   ========================================================================= */

.date-block-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-left: 4px solid #4A90D9;
    background: var(--v-surface-high);
    border-radius: 0 8px 8px 0;
    box-shadow: var(--v-lift);
}

.date-block-date {
    font-size: var(--font-size-lg); /* 16px */
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.date-block-city {
    font-size: var(--font-size-base); /* 14px */
    color: var(--v-ink-muted);
    margin-right: 12px;
}

.date-block-menu-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.date-block-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.date-block-menu-btn .material-icons {
    font-size: var(--font-size-2xl); /* 20px */
    color: var(--v-ink-muted);
}

/* Date block cards row - horizontal scrolling */
.date-block-cards {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
    min-height: 200px;
}

.date-block-cards::-webkit-scrollbar {
    height: 8px;
}

.date-block-cards::-webkit-scrollbar-track {
    background: var(--v-surface-lowest);
    border-radius: 4px;
}

.date-block-cards::-webkit-scrollbar-thumb {
    background: var(--v-surface-lowest);
    border-radius: 4px;
}

.date-block-cards::-webkit-scrollbar-thumb:hover {
    background: var(--v-surface-lowest);
}

.date-block-cards.drop-zone-active {
    background: rgba(33, 150, 243, 0.05);
    border: 2px dashed #90caf9;
    border-radius: 8px;
}

.date-block-cards.drop-zone-hover {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--v-accent);
}

.date-block-cards .card {
    flex-shrink: 0;
}

/* =========================================================================
   DROPDOWN MENU
   ========================================================================= */

.dropdown-menu {
    background: var(--v-surface-high);
    border-radius: 8px;
    box-shadow: var(--v-lift);
    min-width: 180px;
    padding: 6px 0;
    z-index: 100000; /* Always on top - higher than modals (20000) */
}

.dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--font-size-base); /* 14px */
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.dropdown-menu-item:hover {
    background: var(--v-surface-low);
}

.dropdown-menu-item.disabled {
    color: var(--v-ink-subtle);
    cursor: not-allowed;
}

.dropdown-menu-item.disabled:hover {
    background: transparent;
}

.dropdown-menu-item .material-icons {
    color: var(--v-ink-muted);
    font-size: var(--font-size-xl); /* 18px */
}

.dropdown-menu-item.disabled .material-icons {
    color: var(--v-ink-subtle);
}

.dropdown-menu-divider {
    height: 1px;
    background: var(--v-surface-lowest);
    margin: 6px 0;
}

/* =========================================================================
   MENU BUTTON (SHARED)
   ========================================================================= */

.menu-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.menu-btn .material-icons {
    font-size: var(--font-size-2xl); /* 20px */
    color: var(--v-ink-muted);
}

/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator {
    width: 4px;
    min-height: 200px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--v-accent) 78%, white) 0%, var(--v-accent) 50%, color-mix(in srgb, var(--v-accent) 78%, white) 100%);
    border-radius: 2px;
    margin: 0 6px;
    flex-shrink: 0;
    animation: drop-indicator-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.6), 0 0 24px rgba(33, 150, 243, 0.3);
}
@keyframes drop-indicator-pulse {
    0%, 100% {
        opacity: 1;
        transform: scaleY(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleY(1.02);
    }
}

/* Cards that have a drop indicator before them */
.card.drop-before {
    margin-left: 4px;
}

/* Cards that have a drop indicator after them */
.card.drop-after {
    margin-right: 4px;
}

/* =========================================================================
   CARD SHIFT ANIMATION
   ========================================================================= */

.card.shifting {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease-out,
                opacity 0.3s ease-out;
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
    opacity: 0.9;
}

/* SortableJS ghost class - appears at drop location */
.card.sortable-ghost {
    opacity: 0.4;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
}

/* SortableJS chosen class - the item being dragged */
.card.sortable-chosen {
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.4) !important;
}

/* =========================================================================
   PINNED CARDS - Phase 1.3
   ========================================================================= */

.card.pinned {
    border-left: 4px solid var(--v-warning);
    background: linear-gradient(135deg, color-mix(in srgb, var(--v-warning) 14%, transparent) 0%, var(--v-surface-high) 100%);
}

.card.pinned::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent var(--v-warning) transparent transparent;
}

/* Prevent image dragging inside all cards */
.card img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.pin-indicator {
    color: var(--v-warning);
    font-size: var(--font-size-base); /* 14px */
    margin-left: 4px;
}

/* =========================================================================
   CARD INDICATORS - Phase 1.3
   Container for notes and pin icons next to 3-dot menu
   ========================================================================= */

/* Indicator container - positioned absolutely next to the 3-dot menu button */
.card-indicators {
    position: absolute;
    top: 8px;
    right: 44px;  /* To the left of .card-menu-btn which is at right: 8px */
    display: inline-flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    background: color-mix(in srgb, var(--v-surface-high) 90%, transparent);
    border-radius: 4px;
    padding: 2px;
}

/* Notes indicator icon - green */
.notes-indicator-icon {
    font-size: var(--font-size-xl) !important; /* 18px */
    color: var(--v-positive);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.notes-indicator-icon:hover {
    background: rgba(76, 175, 80, 0.1);
}

/* Pin indicator icon - amber/orange */
.pin-indicator-icon {
    font-size: var(--font-size-xl) !important; /* 18px */
    color: var(--v-warning);
    cursor: default;
    padding: 4px;
    border-radius: 4px;
    transform: rotate(45deg);
}

/* Travel-isolated indicator icon - red (matching isolated card border) */
.travel-isolated-icon {
    font-size: var(--font-size-xl) !important; /* 18px */
    color: var(--v-danger);
    cursor: default;
    padding: 4px;
    border-radius: 4px;
}

.travel-isolated-icon:hover {
    background: rgba(244, 67, 54, 0.1);
}

/* Card with notes gets subtle green accent, light green background, and corner triangle */
.card.has-notes {
    border-left: 3px solid var(--v-positive);
    background: linear-gradient(135deg, color-mix(in srgb, var(--v-positive) 14%, transparent) 0%, var(--v-surface-high) 100%);
}

.card.has-notes::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent var(--v-positive) transparent transparent;
}

/* Legacy notes indicator badge (for backward compatibility) */
.notes-indicator-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 8px;
    background: color-mix(in srgb, var(--v-positive) 14%, transparent);
    border-radius: 4px;
    font-size: var(--font-size-xs); /* 12px */
    color: var(--v-positive);
    cursor: pointer;
}

.notes-indicator-badge:hover {
    background: color-mix(in srgb, var(--v-positive) 22%, transparent);
}

.notes-indicator-badge .material-icons {
    color: var(--v-positive);
}

.notes-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   NOTES MODAL - Phase 1.3
   ========================================================================= */

.notes-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Must be higher than info-drawer-handle (10002) and drawer-handle (998) */
    z-index: 20000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.notes-modal-overlay.visible {
    opacity: 1;
}

.notes-modal {
    background: var(--v-surface-high);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--v-lift);
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
}

.notes-modal-overlay.visible .notes-modal {
    transform: scale(1);
}

.notes-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v-hairline);
    background: var(--v-surface);
}

.notes-modal-title {
    margin: 0;
    font-size: var(--font-size-xl); /* 18px */
    font-weight: 600;
    color: var(--color-text-primary);
}

.notes-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.notes-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.notes-modal-close .material-icons {
    font-size: var(--font-size-4xl); /* 24px */
    color: var(--v-ink-muted);
}

.notes-modal-body {
    padding: 20px;
}

.notes-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid var(--v-hairline);
    border-radius: 8px;
    font-size: var(--font-size-base); /* 14px */
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--v-positive);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.notes-textarea::placeholder {
    color: var(--v-ink-subtle);
}

.notes-modal-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: var(--font-size-xs); /* 12px */
    color: var(--v-ink-muted);
}

.notes-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--v-hairline);
    background: var(--v-surface);
}

.notes-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: var(--font-size-base); /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.notes-btn-cancel {
    background: var(--v-surface-high);
    border: 1px solid var(--v-hairline);
    color: var(--v-ink-muted);
}

.notes-btn-cancel:hover {
    background: var(--v-surface-low);
    border-color: var(--v-hairline);
}

.notes-btn-save {
    background: var(--v-positive);
    border: none;
    color: var(--v-positive-on);
}

.notes-btn-save:hover {
    background: var(--v-positive);
    color: var(--v-accent-on);
}

/* Notes Toggle Section */
.notes-toggle-section {
    margin-top: 16px;
    padding: 12px;
    background: var(--v-surface-low);
    border-radius: 8px;
}

.notes-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.notes-toggle-row:first-child {
    padding-top: 0;
}

.notes-toggle-row:last-child {
    padding-bottom: 0;
}

.notes-toggle-row.disabled {
    opacity: 0.5;
}

.notes-toggle-row.disabled .toggle-label {
    color: var(--v-ink-subtle);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--v-surface-lowest);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--v-surface-high);
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--v-positive);
    color: var(--v-accent-on);
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

input:disabled + .toggle-slider {
    cursor: not-allowed;
    background-color: var(--v-surface-lowest);
}

.toggle-label {
    font-size: var(--font-size-base) !important; /* 14px */
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    line-height: 1.4;
    transform-origin: right;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 768px) {
    .itinerary-header-row.editor-header {
        padding: 6px 12px;
    }

    .itinerary-header-row.editor-header .header-title {
        font-size: var(--font-size-sm); /* 13px */
    }

    .date-label-text {
        font-size: var(--font-size-xs); /* 12px */
    }

    .itinerary-editor-container .card {
        min-width: 260px;
        max-width: 260px;
    }

    .travel-card.travel-isolated::before {
        font-size: var(--font-size-xs); /* 12px */
    }

    .date-block {
        padding: 12px;
    }

    .date-block-header {
        flex-wrap: wrap;
    }

    .date-block-date {
        font-size: var(--font-size-base); /* 14px */
        width: 100%;
        margin-bottom: 4px;
    }

    .date-block-city {
        font-size: var(--font-size-xs); /* 12px */
    }

    /* Notes modal responsive */
    .notes-modal {
        width: 95%;
        margin: 10px;
    }

    .notes-modal-header,
    .notes-modal-footer {
        padding: 12px 16px;
    }

    .notes-modal-body {
        padding: 16px;
    }

    .notes-modal-title {
        font-size: var(--font-size-lg); /* 16px */
    }

    .notes-btn {
        padding: 8px 16px;
        font-size: var(--font-size-sm); /* 13px */
    }
}

/* =========================================================================
   STICKY SCROLL ANIMATIONS - Date Labels & City Headers
   ========================================================================= */

/* City block header - smooth transform animation */
.city-block-header {
    will-change: transform;
    transition: transform 0.05s linear;
}

/* Date label - smooth transform animation */
.date-label {
    will-change: transform;
    transition: transform 0.05s linear;
}

/* =========================================================================
   ITINERARY COLLAPSE/EXPAND
   ========================================================================= */

/* Collapse toggle button in header */
.collapse-toggle-btn {
    background: none;
    border: none;
    padding: 2px;
    margin-right: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.collapse-toggle-btn:hover {
    background: color-mix(in srgb, var(--v-surface-high) 20%, transparent);
}

.collapse-toggle-btn .collapse-icon {
    color: white;
    font-size: var(--font-size-2xl); /* 20px */
    transition: transform 0.3s ease;
}

/* Rotate caret when collapsed - 180 degrees to point up (indicating expandable) */
.itinerary-editor-container.collapsed .collapse-toggle-btn .collapse-icon {
    transform: rotate(180deg);
}

/* Collapse animation for cards row - preserve horizontal scroll */
.itinerary-editor-container .itinerary-cards-row {
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.3s ease-out;
    /* Allow date labels to overflow vertically while maintaining horizontal scroll */
    overflow-y: visible;
}

/* Collapsed state */
.itinerary-editor-container.collapsed .itinerary-cards-row {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden !important; /* Hide all overflow when collapsed */
}

/* Keep header visible when collapsed */
.itinerary-editor-container.collapsed .itinerary-header-row {
    margin-bottom: 0;
}

/* Visual indicator on header when collapsed */
.itinerary-editor-container.collapsed .itinerary-header-row.editor-header {
    border-radius: 4px;
}

/* =========================================================================
   VENUE REPLACEMENT MODAL
   ========================================================================= */

.venue-replace-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.venue-replace-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.venue-replace-modal .modal-content {
    position: relative;
    background: var(--v-surface-high);
    border-radius: 12px;
    box-shadow: var(--v-lift);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
}

.venue-replace-modal .modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--v-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.venue-replace-modal .modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl); /* 18px */
}

.venue-replace-modal .modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-4xl); /* 24px */
    cursor: pointer;
    color: var(--v-ink-subtle);
    padding: 0;
    line-height: 1;
}

.venue-replace-modal .modal-close:hover {
    color: var(--v-ink);
}

/* =========================================================================
   FREE TIME / NOTE CARD STYLING
   ========================================================================= */

.slot-card.free-time,
.card.free-time,
.card.note-card {
    background: var(--v-surface);
    border: 1px dashed var(--v-hairline);
}

.slot-card.free-time .card-type,
.card.free-time .card-type,
.card.note-card .card-type {
    /* Keep default styling - no special background */
}

.card.free-time .popup-marker-badge,
.card.note-card .popup-marker-badge {
    display: none !important;
}

.slot-card.free-time .card-title,
.card.free-time .card-title,
.card.note-card .card-title,
.card.free-time h3,
.card.note-card h3 {
    color: var(--v-ink);
}

/* Editable title styling for note cards */
.card.note-card .card-title[contenteditable="true"],
.card.note-card h3[contenteditable="true"],
.card.free-time .card-title[contenteditable="true"],
.card.free-time h3[contenteditable="true"] {
    cursor: text;
    border-bottom: 1px dashed var(--v-hairline);
    padding-bottom: 2px;
    min-width: 60px;
    display: inline-block;
}

.card.note-card .card-title[contenteditable="true"]:focus,
.card.note-card h3[contenteditable="true"]:focus,
.card.free-time .card-title[contenteditable="true"]:focus,
.card.free-time h3[contenteditable="true"]:focus {
    outline: none;
    border-bottom: 2px solid var(--v-ink-muted);
    background: rgba(0, 0, 0, 0.05);
}

/* =========================================================================
   TOAST MESSAGE
   ========================================================================= */

.toast-message {
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* =========================================================================
   EDITOR MODAL (Generic Modal Style)
   ========================================================================= */

.editor-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.editor-modal-overlay.visible {
    opacity: 1;
}

.editor-modal {
    background: var(--v-surface-high);
    border-radius: 16px;
    box-shadow: var(--v-lift);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.editor-modal-overlay.visible .editor-modal {
    transform: scale(1);
}

.editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v-hairline);
}

.editor-modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl); /* 18px */
    font-weight: 600;
    color: var(--color-text-primary);
}

.editor-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.editor-modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.editor-modal-close .material-icons {
    font-size: var(--font-size-2xl); /* 20px */
    color: var(--v-ink-muted);
}

.editor-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.editor-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--v-hairline);
}

.editor-modal-cancel {
    padding: 10px 20px;
    background: var(--v-surface-low);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-base); /* 14px */
    font-weight: 500;
    color: var(--v-ink-muted);
    transition: background 0.2s ease;
}

.editor-modal-cancel:hover {
    background: var(--v-surface-lowest);
}

.editor-modal-submit {
    padding: 10px 20px;
    background: var(--v-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-base); /* 14px */
    font-weight: 500;
    color: var(--v-accent-on);
    transition: background 0.2s ease, opacity 0.2s ease;
}

.editor-modal-submit:hover {
    background: var(--v-accent);
    color: var(--v-accent-on);
}

.editor-modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Editor Modal Form Elements */
.editor-modal-form-group {
    margin-bottom: 16px;
}

.editor-modal-label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--color-text-primary);
    font-size: var(--font-size-base); /* 14px */
}

.editor-modal-label-hint {
    font-weight: 400;
    color: var(--v-ink-muted);
    font-size: var(--font-size-xs); /* 12px */
    margin-left: 4px;
}

.editor-modal-input,
.editor-modal-select,
.editor-modal-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--v-hairline);
    border-radius: 8px;
    font-size: var(--font-size-base); /* 14px */
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--v-surface-high);
}

.editor-modal-input:focus,
.editor-modal-select:focus,
.editor-modal-textarea:focus {
    outline: none;
    border-color: var(--v-accent);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.editor-modal-input::placeholder,
.editor-modal-textarea::placeholder {
    color: var(--v-ink-subtle);
}

.editor-modal-select {
    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 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.editor-modal-textarea {
    resize: vertical;
    min-height: 80px;
}

.editor-modal-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--font-size-sm); /* 13px */
}

.editor-modal-status.status-info {
    background: color-mix(in srgb, var(--v-accent) 12%, transparent);
    color: var(--v-accent);
    border-left: 3px solid var(--v-accent);
}

.editor-modal-status.status-error {
    background: color-mix(in srgb, var(--v-danger) 12%, transparent);
    color: var(--v-danger);
    border-left: 3px solid var(--v-danger);
}

.editor-modal-status.status-success {
    background: color-mix(in srgb, var(--v-positive) 14%, transparent);
    color: var(--v-positive);
    border-left: 3px solid var(--v-positive);
}

.editor-modal-description {
    color: var(--v-ink-muted);
    font-size: var(--font-size-base); /* 14px */
    margin-bottom: 20px;
    line-height: 1.5;
}

/* =========================================================================
   VENUE CARD - Remove blue focus/click outline
   ========================================================================= */

.card:focus,
.card:active,
.card:focus-visible,
.slot-card:focus,
.slot-card:active,
.slot-card:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove outline from clickable elements inside cards */
.card *:focus,
.slot-card *:focus {
    outline: none;
}

/* =========================================================================
   CLEARED VENUE STYLING
   ========================================================================= */

.card.cleared-venue,
.slot-card.cleared-venue {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--v-surface-low);
    border: 2px dashed var(--v-hairline);
}

.clear-venue-replace-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    margin: 20px auto;
    background: var(--v-positive);
    color: var(--v-positive-on);
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.clear-venue-replace-btn:hover {
    background: var(--v-positive);
    color: var(--v-accent-on);
}

.clear-venue-replace-btn .material-icons {
    font-size: var(--v-text-title);
}

/* =========================================================================
   SEARCH RESULT CARDS - Vertical layout matching established .card pattern
   FIX 2026-01-01: Match itinerary venue card design system
   ========================================================================= */

.search-results-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px 12px 4px;
    -webkit-overflow-scrolling: touch;
}

.search-result-card {
    background: var(--v-surface-high);
    border-radius: 8px;
    box-shadow: var(--v-lift);
    transition: all 0.2s;
    border: 2px solid transparent;
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
}

.search-result-card:hover {
    box-shadow: var(--v-lift);
    transform: translateY(-2px);
    border-color: var(--v-accent);
}

.search-result-card.selected {
    border-color: var(--v-positive);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.search-result-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Photo section - top of card */
.search-result-photo {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--v-surface-low);
    position: relative;
}

.search-result-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-photo .photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--v-surface-low) 0%, var(--v-surface-low) 100%);
}

.search-result-photo .photo-placeholder .material-icons {
    font-size: var(--v-text-display);
    color: #5C6BC0;
    opacity: 0.6;
}

/* Content section - below photo */
.search-result-content {
    padding: 12px;
}

.search-result-category {
    font-size: var(--font-size-xs, 13px);
    font-weight: 500;
    color: var(--v-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.search-result-name {
    font-size: var(--font-size-base, 14px);
    font-weight: 600;
    color: var(--v-ink);
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: var(--font-size-sm, 13px);
}

.search-result-rating .material-icons {
    font-size: var(--v-text-body);
    color: var(--v-warning);
}

.search-result-rating-value {
    font-weight: 600;
    color: var(--v-ink);
}

.search-result-rating-count {
    color: var(--v-ink-muted);
    font-size: var(--font-size-xs, 13px);
}

.search-result-description {
    font-size: var(--font-size-sm, 13px);
    color: var(--v-ink-muted);
    line-height: 1.4;
    margin: 0;
    /* FIX 2026-01-02: Make description scrollable instead of clamped */
    max-height: 80px;
    overflow-y: auto;
    padding-right: 4px; /* Space for scrollbar */
}

/* Custom scrollbar for description */
.search-result-description::-webkit-scrollbar {
    width: 4px;
}

.search-result-description::-webkit-scrollbar-track {
    background: var(--v-surface-low);
    border-radius: 2px;
}

.search-result-description::-webkit-scrollbar-thumb {
    background: var(--v-surface-lowest);
    border-radius: 2px;
}

.search-result-description::-webkit-scrollbar-thumb:hover {
    background: var(--v-surface-lowest);
}

/* =========================================================================
   VENUE FEEDBACK BUTTONS - Like/Dislike/Save buttons on venue cards
   Part of Persona System Phase 6: Feedback UI Integration
   ========================================================================= */

.venue-feedback-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
    padding: 0 4px;
}

.feedback-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--v-surface-low);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.feedback-btn:hover {
    transform: scale(1.1);
}

.feedback-btn .material-icons {
    font-size: var(--v-text-title);
    color: var(--v-ink-muted);
    transition: color 0.2s ease;
}

/* Dislike button - red on hover/active */
.feedback-btn.feedback-dislike:hover,
.feedback-btn.feedback-dislike.active {
    background: color-mix(in srgb, var(--v-danger) 12%, transparent);
}

.feedback-btn.feedback-dislike:hover .material-icons,
.feedback-btn.feedback-dislike.active .material-icons {
    color: var(--v-danger);
}

/* Like button - blue on hover/active */
.feedback-btn.feedback-like:hover,
.feedback-btn.feedback-like.active {
    background: color-mix(in srgb, var(--v-accent) 12%, transparent);
}

.feedback-btn.feedback-like:hover .material-icons,
.feedback-btn.feedback-like.active .material-icons {
    color: var(--v-accent);
}

/* Super-like/Save button - gold/amber on hover/active */
.feedback-btn.feedback-superlike:hover,
.feedback-btn.feedback-superlike.active {
    background: color-mix(in srgb, var(--v-warning) 14%, transparent);
}

.feedback-btn.feedback-superlike:hover .material-icons,
.feedback-btn.feedback-superlike.active .material-icons {
    color: var(--v-warning);
}

/* Pulse animation when feedback is submitted */
@keyframes feedback-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.feedback-btn.active {
    animation: feedback-pulse 0.3s ease-out;
}

/* =========================================================================
   WEATHER CHART CARD
   Uses .card class for 280px sizing, these are weather-specific overrides
   ========================================================================= */

.weather-chart-card {
    padding: 12px;
    cursor: default;
}

.weather-chart-card .card-subtitle {
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    margin-bottom: 6px;
}

.weather-description {
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    line-height: 1.4;
    margin: 8px 0;
}

.slot-card .card-header {
    padding: 6px 8px 2px;
}

.slot-card .card-title {
    margin: 0;
    font-size: var(--v-text-label);
    line-height: 1.3;
}

.card-description {
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    line-height: 1.4;
    margin: 4px 0;
}

.weather-chart-container {
    position: relative;
    width: 100%;
    height: 180px;
}

.weather-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Toggle buttons row */
.weather-chart-toggles {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.weather-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid var(--v-hairline);
    border-radius: 10px;
    background: var(--v-surface-high);
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.weather-toggle-btn:hover {
    border-color: var(--v-hairline);
    background: var(--v-surface);
}

.weather-toggle-btn.active {
    background: color-mix(in srgb, var(--v-accent) 12%, transparent);
    border-color: var(--v-accent);
    color: var(--v-accent);
}

.weather-toggle-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Card header: card-type left, unit toggle right */
.weather-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Unit toggle — subtle text style, top-right of card */
.weather-unit-toggle {
    display: flex;
}

.weather-unit-btn {
    padding: 0;
    border: none;
    background: none;
    font-size: var(--v-text-label);
    color: var(--v-ink-subtle);
    cursor: pointer;
    transition: color 0.2s;
    letter-spacing: 0.3px;
}

.weather-unit-btn:hover {
    color: var(--v-ink-muted);
}

.weather-unit-btn.imperial {
    color: var(--v-warning);
}

/* Symbol key for combined weather chart */
.weather-chart-key {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 4px 0 6px;
    font-size: var(--v-text-label);
    color: var(--v-ink-muted);
}

.weather-key-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.weather-key-line {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--v-ink);
    flex-shrink: 0;
}

.weather-key-muted {
    border-top-color: rgba(66, 66, 66, 0.4);
}

/* Mobile responsive — matches 768px card breakpoint (260px cards) */
@media (max-width: 768px) {
    .weather-chart-card {
        padding: 10px;
    }

    .weather-chart-container {
        height: 160px;
    }

    .weather-toggle-btn {
        font-size: var(--v-text-label);
        padding: 2px 5px;
    }

    .weather-unit-btn {
        font-size: var(--v-text-label);
    }

    .weather-chart-key {
        gap: 8px;
        font-size: var(--v-text-label);
    }

    .weather-key-line {
        width: 12px;
    }
}

/* =========================================================================
   SUMMARY CARD - Trip overview as first card in scroll row
   ========================================================================= */

.summary-card {
    min-width: 420px;
    max-width: 420px;
    flex-shrink: 0;
    background: var(--v-surface-high);
    border-radius: 8px;
    box-shadow: var(--v-lift);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: flex-start;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-lg, 16px);
    font-weight: 600;
    color: var(--color-text-primary, var(--v-ink));
}

.summary-card-header .material-icons {
    font-size: var(--v-text-title);
    color: var(--v-warning);
}

.summary-card-description {
    font-size: var(--font-size-sm, 13px);
    color: var(--v-ink-muted);
    line-height: 1.5;
}

/* Stats grid - 2x2 */
.summary-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.summary-stat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--v-surface);
    border-radius: 6px;
}

.summary-stat .material-icons {
    font-size: var(--v-text-title);
    color: var(--v-ink-muted);
    margin-top: 1px;
}

.summary-stat-value {
    display: block;
    font-size: var(--font-size-base, 14px);
    font-weight: 600;
    color: var(--color-text-primary, var(--v-ink));
}

.summary-stat-label {
    display: block;
    font-size: var(--font-size-xs, 13px);
    color: var(--v-ink-muted);
}

.summary-stat-sub {
    display: block;
    font-size: var(--v-text-label);
    color: var(--v-ink-subtle);
    line-height: 1.3;
    margin-top: 2px;
}

/* Cost section */
.summary-cost-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-cost-title {
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    color: var(--v-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cost table */
.summary-cost-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-cost-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm, 13px);
}

.summary-cost-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.summary-cost-label {
    flex: 1;
    color: var(--v-ink-muted);
}

.summary-cost-amount {
    font-weight: 600;
    color: var(--color-text-primary, var(--v-ink));
}

/* Pie chart row: chart + legend side by side */
.summary-pie-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.summary-pie-canvas {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* Legend beside pie chart */
.summary-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.summary-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm, 13px);
}

.summary-pie-legend-label {
    flex: 1;
    color: var(--v-ink-muted);
}

.summary-pie-legend-pct {
    font-weight: 600;
    color: var(--v-ink);
    font-size: var(--v-text-label);
}

/* Budget comparison line */
.summary-budget-line {
    font-size: var(--font-size-sm, 13px);
    color: var(--v-ink);
    padding-top: 4px;
    border-top: 1px solid var(--v-hairline);
}

.summary-budget-under {
    color: var(--v-positive);
    font-weight: 500;
}

.summary-budget-over {
    color: var(--v-danger);
    font-weight: 500;
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .summary-card {
        min-width: 320px;
        max-width: 320px;
        padding: 16px;
        gap: 12px;
    }

    .summary-stats-grid {
        gap: 8px;
    }

    .summary-stat {
        padding: 6px;
    }

    .summary-pie-canvas {
        width: 100px;
        height: 100px;
    }

    .summary-pie-row {
        gap: 12px;
    }
}


/* =========================================================================
   CARD/BLOCK SELECTION SYSTEM
   ========================================================================= */

/* Selected card styles (both legacy .card and .slot-card) */
.card.selected,
.slot-card.selected {
    outline: 3px solid var(--v-accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(25, 118, 210, 0.2) !important;
}

/* Title highlight for selected cards */
.card.selected h3,
.slot-card.selected h3,
.card.selected .card-title,
.slot-card.selected .card-title {
    color: var(--v-accent) !important;
}

/* Selectable card hover states */
.card.selectable,
.slot-card.selectable {
    cursor: pointer;
}

.card.selectable:hover,
.slot-card.selectable:hover {
    outline: 2px dashed #90caf9;
    outline-offset: 2px;
}

/* Container selection states (day/city blocks) */
.selectable-container {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.selectable-container:hover {
    background: rgba(25, 118, 210, 0.04);
    box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.15);
    border-radius: 8px;
}

.date-block.container-selected {
    background: rgba(25, 118, 210, 0.06);
    box-shadow: inset 0 0 0 2px var(--v-accent);
    border-radius: 8px;
}

.date-block.container-selected .date-label {
    color: var(--v-accent);
    font-weight: 600;
}

.city-block-wrapper.container-selected {
    background: rgba(25, 118, 210, 0.04);
    box-shadow: inset 0 0 0 2px var(--v-accent);
    border-radius: 8px;
}

.city-block-wrapper.container-selected .city-block-header h2 {
    color: var(--v-accent);
}

/* Selection toolbar */
.selection-toolbar {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--v-lift);
    z-index: 1000;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.selection-toolbar .selection-count {
    font-weight: 500;
    white-space: nowrap;
}

.selection-toolbar button {
    background: color-mix(in srgb, var(--v-surface-high) 10%, transparent);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--v-text-label);
}

.selection-toolbar button:hover {
    background: color-mix(in srgb, var(--v-surface-high) 20%, transparent);
}

.selection-toolbar button .material-icons {
    font-size: var(--v-text-title);
}

.selection-toolbar .divider {
    width: 1px;
    height: 24px;
    background: color-mix(in srgb, var(--v-surface-high) 30%, transparent);
}

.selection-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.selection-toolbar button:disabled:hover {
    background: color-mix(in srgb, var(--v-surface-high) 10%, transparent);
}

/* Submenu back button */
.dropdown-menu-back {
    color: var(--v-ink-muted);
    font-weight: 500;
}

.dropdown-menu-back:hover {
    background: var(--v-surface-low);
}





/* ==== #29: ink paired with the accent bands above (pair-accent-bands.js) ==== */

/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator h1:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator h1 strong:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator h2:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator h2 strong:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator h3:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator p:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator strong:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-outline:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-outline .material-icons:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .hero-content:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *),
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .cta-content:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *) {
    color: var(--v-accent-on);
}
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-outline:not([class*="card"] *):not([class*="panel"] *):not([class*="modal"] *) {
    border-color: var(--v-accent-on);
}
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-primary,
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-primary * {
    color: var(--v-accent);
}
/* =========================================================================
   DROP INDICATOR - Visual line showing where card will be inserted
   ========================================================================= */

.drop-indicator .btn-primary {
    background: var(--v-accent-on);
    border-color: var(--v-accent-on);
}
/* ==== end accent-band pairing ==== */

/* -----------------------------------------------------------------------------
   MAP PINS

   One silhouette for every pin on the map, so venues, lodging and suggested
   stops read as one family instead of three people's guesses.

   It lives HERE, not in ayten.css, because itineraries.html is the only page
   that draws these pins and it is one of the two pages that does NOT link
   ayten.css. The marker rules already sitting in ayten.css
   (.activity-marker-primary and friends, including the --marker-shadow-*
   filters) have therefore never applied to this map -- which is also why the
   shadow below is spelled out here rather than inherited.

   The fill and the number come from the destination and are set inline by the
   icon factories; that pairing is the entire point of the pin and nothing here
   may override it. Everything that is NOT identity lives here: size, shape,
   ring, shadow, type and interaction.

   The ring is a box-shadow, not a border. A border eats interior space -- the
   old 20px pin with a 2px border had 16px of room for a label that reaches two
   digits, and clipped everything from 10 up -- and the design system prohibits
   1px rules anyway. A ring is genuinely needed here and only here: a pin sits
   on photographic map tiles, not on a tonal surface, so there is no surface
   ladder to separate it from.
   ----------------------------------------------------------------------------- */

:root {
    /* Reads on street, satellite and terrain tiles alike. Not themed: the
       basemap does not follow the page theme. */
    --v-map-pin-ring: rgba(255, 255, 255, 0.95);
    --v-map-pin-shadow: 0 2px 6px rgba(11, 18, 32, 0.38);
}

.v-map-pin {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--v-map-pin-ring), var(--v-map-pin-shadow);
    font-family: var(--v-font-body, 'Manrope', system-ui, sans-serif);
    font-size: var(--v-text-label);
    font-weight: 600;
    line-height: 1;
    /* 1 and 11 sit on the same axis instead of drifting. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.leaflet-marker-icon:hover .v-map-pin {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--v-map-pin-ring), 0 4px 12px rgba(11, 18, 32, 0.45);
}

/* Lodging is a different KIND of place, not another stop, and the silhouette
   says so on its own -- no legend required. */
.v-map-pin--lodging {
    border-radius: 8px;
}

.v-map-pin--lodging .material-icons {
    font-size: var(--v-text-body);
    line-height: 1;
}

/* Width and height are set inline: this pin is sized by its caller. */
.v-map-pin--special {
    width: auto;
    height: auto;
}

/* A suggested stop along the way, not a stop in the plan. Same family, one
   step down in the hierarchy, and a thinner ring so 12px does not read as a
   mostly-white dot. */
.v-map-pin--stop {
    box-shadow: 0 0 0 1.5px var(--v-map-pin-ring), var(--v-map-pin-shadow);
}

/* A meal stop on a driving leg. Belongs to the journey rather than to a
   destination, so it carries the warning tone instead of a destination colour
   and stays out of the numbered scheme. */
.v-map-pin--meal {
    background: var(--v-warning);
    color: var(--v-warning-on);
}

.v-map-pin--meal .material-icons {
    font-size: var(--v-text-body);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .v-map-pin,
    .leaflet-marker-icon:hover .v-map-pin {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------
   An en-route lunch is a stop on the drive, not a destination.

   It sits between the travel card and the lodging, and it carries the
   travel card's marks so the eye reads it as part of the journey: the
   same accent edge, a route glyph, and how far off the road it is. It
   keeps its photograph, because unlike a leg of driving it is a real
   place with a real picture.
   --------------------------------------------------------------- */
.card.enroute-meal-card {
    border-left: 4px solid var(--v-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--v-accent) 8%, transparent) 0%,
        transparent 120px);
}

.card.enroute-meal-card .enroute-meal-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 2px;
    font-family: var(--v-font-display, inherit);
    font-size: var(--v-text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--v-accent);
}

.card.enroute-meal-card .enroute-meal-tag .material-icons {
    font-size: 15px;
}