/* ===== basket-mode.css ===== */
/* Fullscreen map mode with sidebars */

/* Container: fills viewport below topbar */
.basket-mode {
    position: fixed;
    top: 75px;
    /* Below fixed topbar */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: #f5f5f5;
    --mobile-tabbar-height: 68px;
    --basket-safe-top: env(safe-area-inset-top, 0px);
    --basket-safe-right: env(safe-area-inset-right, 0px);
    --basket-safe-bottom: env(safe-area-inset-bottom, 0px);
    --basket-safe-left: env(safe-area-inset-left, 0px);
}

.basket-mode .spots-v1-global-exit {
    position: absolute;
    top: 12px;
    right: max(16px, var(--basket-safe-right));
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    cursor: pointer;
}

.basket-mode .spots-v1-global-exit svg {
    width: 17px;
    height: 17px;
}

/* plan.html uses viewport-fit=cover so the shared navigation also needs to
   respect notches before basket mode is entered. The more specific selector
   keeps the server-injected topnav's shorthand padding from overriding it. */
.pgle-topnav {
    padding-top: var(--basket-safe-top, env(safe-area-inset-top, 0px));
}

body .pgle-topnav .pgle-topnav-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* 바스켓 모드(전체화면 지도)에서는 페이지 하단 푸터(파란 배경 + 흰색 'Pglemaps'
   로고)가 상단 topnav 아래로 살짝 비쳐 보이는 현상이 있어 숨긴다.
   body.basket-active 는 enterBasketMode 에서 토글됨(map-shell.js 에서 해제). */
body.basket-active .footer-section {
    display: none !important;
}

/* Fullscreen Map */
.basket-mode-map {
    position: absolute;
    top: 0;
    left: 280px;
    /* Space for left sidebar */
    right: 300px;
    /* Space for right sidebar */
    bottom: 0;
    z-index: 1;
}

/* Mapbox adds `mapboxgl-map` on the same container and sets position:relative.
   Keep basket-mode map pinned to full viewport area. */
.basket-mode .basket-mode-map.mapboxgl-map {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ===== Left Sidebar: Search ===== */
.search-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    /* Widened from 280px */
    height: 100%;
    background: rgba(224, 238, 255, 0.78);
    color: #173b63;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Changed from hidden to show toggle button */
    transition: transform 0.3s ease;
}

.search-sidebar.collapsed {
    transform: translateX(-360px);
}

.sidebar-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}

.sidebar-header-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
}

.mobile-search-panel-toggle {
    display: none;
    margin-left: 8px;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 30px;
    min-height: 0;          /* base.css 의 button{min-height:44px} 무력화 → 컴팩트 */
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Day target dropdown (inline compact, between title and close button) */
.basket-day-target-dropdown {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.basket-day-target-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    min-height: 0;          /* base.css 의 button{min-height:44px} 무력화 → 컴팩트 */
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.28);
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    max-width: 110px;
    line-height: 1;
}

.basket-day-target-trigger:hover {
    background: #f6f8fe;
}

.basket-day-target-day {
    overflow: hidden;
    text-overflow: ellipsis;
}

.basket-day-target-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
    color: #3b5bdb;
}

.basket-day-target-dropdown.open .basket-day-target-chevron {
    transform: rotate(180deg);
}

.basket-day-target-options {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 160px;
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.26s ease, opacity 0.18s ease;
    z-index: 9999;
}

.basket-day-target-options.is-open,
.basket-day-target-dropdown.open .basket-day-target-options {
    opacity: 1;
    pointer-events: auto;
}

.basket-day-target-options-inner {
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.basket-day-target-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s;
}

.basket-day-target-option:hover {
    background: #f6f7fb;
}

.basket-day-target-option-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    background: #f4f4f6;
    color: #9aa0a6;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.basket-day-target-option.is-selected .basket-day-target-option-badge {
    background: #E6F1FB;
    color: #185FA5;
}

.basket-day-target-option-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #111;
}

.sidebar-icon {
    font-size: 18px;
}

/* Category Chips */
.category-chips {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: rgba(255, 255, 255, 0.68);
    color: #1e3a8a;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.cat-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.cat-chip:hover {
    background: #dbeafe;
}

.cat-chip.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* Basket 카테고리 칩 — 여러 줄로 감싸지 않고 옆으로 쓸어넘기는 한 줄 가로 스크롤.
   ID 선택자라 base(flex-wrap)·데스크톱 그리드(.spots-v1-form) 규칙을 모두 덮어씀. */
#categoryChips {
    display: flex;                  /* 데스크톱 그리드(display:grid) 규칙을 덮어씀 */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding-top: 8px;               /* 세로 사이즈 축소 */
    padding-bottom: 8px;
    gap: 6px;                       /* 칩 간격 축소 → 다음 칩 peek 여유 확보 */
    /* 오른쪽 가장자리를 살짝 페이드 → "옆에 카테고리가 더 있다"는 스와이프 힌트.
       스크롤해도 항상 우측 끝에서 다음 칩이 부드럽게 잘려 보인다. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
#categoryChips::-webkit-scrollbar { display: none; }   /* Chrome/Safari/Edge */
#categoryChips .cat-chip {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    min-height: 0;                  /* 데스크톱 min-height:34px 해제 */
    padding: 5px 8px;               /* 가로 패딩 축소 → 영어 라벨에서도 다음 칩(Skin/Beauty)이 살짝 보이게 */
    font-size: 12px;
    line-height: 1.25;
}

/* The rail wrapper becomes a real three-column control only on desktop.
   `display: contents` keeps the existing native touch rail and flex order
   unchanged on tablets and phones. */
.category-rail-shell {
    display: contents;
}

.category-rail-control {
    display: none;
}

/* '숙소 근처' 섹션 라벨 옆 인라인 카테고리 제목(요청: 같은 글씨 크기·한 줄).
   폰트 크기/색/굵기는 부모(.spots-v1-section-label)에서 상속 → '숙소 근처'와 동일. */
.spots-v1-form .spots-v1-section-label .section-label-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spots-v1-form .spots-v1-section-label .section-label-title:empty { display: none; }

/* Sub-filters */
.sub-filters {
    display: flex;
    gap: 6px;
    padding: 0 16px 12px;
    flex-wrap: wrap;
}

.sub-chip {
    padding: 6px 10px;
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.sub-chip:hover {
    background: rgba(255, 255, 255, 0.25);
}

.sub-chip.active {
    background: #3b82f6;
    color: #fff;
}

/* Search Input */
.search-input-wrap {
    padding: 0 16px 12px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.search-input-wrap input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    color: #0f172a;
}

@media (max-width: 1023px) {
    .basket-mode {
        top: calc(75px + var(--basket-safe-top));
        bottom: auto;
        height: calc(100vh - 75px - var(--basket-safe-top));
        height: calc(100dvh - 75px - var(--basket-safe-top));
    }

    .basket-mode .search-input-wrap input,
    .basket-mode input[type="text"],
    .basket-mode input[type="search"],
    .basket-mode textarea {
        font-size: 16px !important;
    }
}

.search-input-wrap input::placeholder {
    color: #888;
}

/* Results List */
.search-results-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 calc(var(--basket-results-bottom-gap, 0px) + env(safe-area-inset-bottom, 0px)) 0;
    transition: padding-bottom 0.2s ease;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 상하 패딩 최소화 — 하단을 더 좁혀 구분선을 위로 붙이고, 모바일 3개+ 노출. */
    padding: 5px 14px 4px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
    cursor: pointer;
    transition: background 0.1s;
    gap: 10px;
    /* Gap between thumb and text */
    max-width: 100%;
    overflow-x: hidden;
}

/* New Result Thumb */
.result-thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.move-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 8px;
    /* Tiny */
    color: #bbb;
    /* Subtle gray */
    padding: 0;
    line-height: 1;
    /* Reset line-height */
    /* Condensed height */
    transform: scaleX(1.1);
    /* Flattened appearance removed vertical scale to manage height directly */
    margin: 0;
    width: 12px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4285F4;
    /* Signature Blue */
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s, background-color 0.2s;
}

.move-btn:hover {
    color: #3367d6;
    /* Darker Blue */
    background-color: rgba(66, 133, 244, 0.1);
    border-radius: 2px;
    opacity: 1;
}


.result-item:hover {
    background: rgba(37, 99, 235, 0.08);
}

.result-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.result-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: #0f172a;
    text-align: left;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.food-result-name-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    column-gap: 6px;
}

.food-result-name-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.result-desc {
    font-size: 12px;
    color: rgba(15, 23, 42, 0.72);
    margin-bottom: 3px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.result-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.result-tag {
    font-size: 10px;
    background: rgba(37, 99, 235, 0.14);
    color: #1e3a8a;
    padding: 2px 6px;
    border-radius: 4px;
}

.result-action-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 34px;
    flex-shrink: 0;
}

.suggest-add-btn.result-action-stack {
    padding-right: 10px;
}

.result-add-btn {
    background: none;
    border: 1px solid rgba(37, 99, 235, 0.45);
    color: #1d4ed8;
    width: 26px;
    height: 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}

.result-add-btn:hover {
    background: rgba(37, 99, 235, 0.12);
}

.result-info-btn {
    border: 1px solid rgba(37, 99, 235, 0.45);
    background: none;
    color: #1d4ed8;
    border-radius: 4px;
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1;
    width: 26px;
    height: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.result-info-btn:hover {
    background: rgba(37, 99, 235, 0.12);
}

/* Floating Complete Button */
.floating-complete-btn {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #4285F4;
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s, bottom 0.3s ease;
}

.floating-complete-btn:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
}

.floating-complete-btn:active {
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 1023px) {
    .floating-complete-btn.drawer-expanded {
        bottom: calc(
            var(--mobile-tabbar-height, 0px)
            + env(safe-area-inset-bottom, 0px)
            + var(--drawer-offset, 0px)
            + 12px
        );
    }
}

/* ===== Right Sidebar: Basket Panel ===== */
.basket-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    overflow: visible;
}

.basket-panel.collapsed {
    transform: translateX(300px);
}

.basket-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.basket-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}

.basket-icon {
    font-size: 18px;
}

.badge {
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.basket-panel-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* Sidebar Toggle Buttons */
/* Sidebar Toggle Buttons */
.sidebar-toggle-btn {
    position: absolute;
    top: 50%;
    width: 24px;
    /* Slightly wider */
    height: 60px;
    /* Taller */
    background-color: #4285F4;
    /* Signature Blue */
    border: 1px solid #1a73e8;
    border-radius: 0 8px 8px 0;
    /* More rounded */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Ensure it's above everything */
    font-size: 14px;
    /* Larger arrow */
    color: #fff;
    /* White arrow */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%);
    transition: left 0.3s ease, right 0.3s ease, background 0.2s;
    /* No top/transform transition */
}

.sidebar-toggle-btn:hover {
    background-color: #3367d6;
    /* Darker blue on hover */
}

.sidebar-toggle-btn:active {
    transform: translateY(-50%);
    /* Prevent global button:active jump */
}

/* Left Toggle */
.sidebar-toggle-btn.left-toggle {
    right: -20px;
    /* Stick out from the sidebar */
}

/* Right Toggle */
.sidebar-toggle-btn.right-toggle {
    left: -20px;
    /* Stick out from the sidebar */
    border-radius: 4px 0 0 4px;
    /* Flip radius */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Collapsed Toggle Button Position fix (optional, if we want them to stay visible) */
/* Actually, since they are children of the sidebar, they move with it. 
   So when left sidebar moves -280px, the button at right:-20px moves to -300px + screen left? 
   No, wait.
   Left Sidebar: 
     - Expanded: left:0. Button at right:-20px. Visible at x=280.
     - Collapsed: translateX(-280px). Visible part (at x=280) moves to x=0. 
       So the button will be exactly at the left edge of screen. Perfect.
   
   Right Sidebar:
     - Expanded: right:0. Button at left:-20px. Visible at screenRight-300.
     - Collapsed: translateX(300px). Button moves to screenRight.
       So key is to visualize properly.
       
   Let's verify logic:
   - Left Sidebar width 280. Button right -20.
   - Collapsed: translate X -280. 
   - Button new pos: 280 (container width) + (-20) (button offset) - 280 (translation) = -20??
   - Wait. relative to viewport?
   - Sidebar is `left: 0`.
   - Button is `absolute` inside `relative` sidebar? No, sidebar is `absolute`.
   - Inside sidebar: `right: -20px` means it is at x=300 (relative to sidebar left).
   - Sidebar moves -280px.
   - Button moves to x=20 relative to viewport left.
   - Wait, 280 width. Right edge is 280. `right: -20px` means x=300.
   - Translate -280 -> Button x = 20. Visible.
   
   Right Sidebar:
   - Width 300. `left: -20px` means x=-20 relative to sidebar left (which is at viewportRight-300).
   - Global x = (W-300) - 20 = W-320.
   - Collapsed: translate X 300.
   - Global x = W-320 + 300 = W-20. Visible.
   
   Actually, `left-toggle` arrow should point Left when expanded (to collapse) and Right when collapsed (to expand).
   Need to toggle arrow text in JS or use classes.
*/

/* Adjust Map when Sidebars collapsed */
.basket-mode-map {
    transition: left 0.3s ease, right 0.3s ease;
}

/* We need JS to add classes to BODY or Container to adjust map? 
   Or we can use sibling selectors if map is sibling.
   HTML structure: map, left sidebar, right sidebar.
   Map is BEFORE sidebars. Sibling selector won't work for Map affecting by Sidebar classes if Sidebar is after.
   
   Actually, `basket-mode-map` has `left: 280px` and `right: 300px`.
   When sidebars collapse, we should change these to 0.
   But we can't detect sidebar class change in CSS for a previous sibling.
   
   Solution: Add classes to the `basket-mode` container or handle map resize in JS.
   Adding classes to container is cleaner.
   `.basket-mode.left-collapsed .basket-mode-map { left: 0; }`
   `.basket-mode.right-collapsed .basket-mode-map { right: 0; }`
*/

/* ===== Bottom Drawer (Mobile) ===== */
.basket-drawer {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.drawer-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    /* Increased from 14px 20px */
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.drawer-toggle .chevron {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 24px;
    /* Increased from 10px default */
    color: #4285F4;
    /* Highlight color */
}

.basket-drawer.expanded .drawer-toggle .chevron {
    transform: rotate(180deg);
}

.drawer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.basket-drawer.expanded .drawer-content {
    max-height: 45.5vh;
    overflow-y: auto;
    padding: 12px 16px;
}

.mobile-basket-tabbar,
.mobile-day-picker-overlay,
.mobile-day-picker-sheet {
    display: none;
}

.mobile-basket-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    z-index: 140;
    display: none;
    align-items: stretch;
    gap: 12px;
}

.mobile-basket-tab {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 18px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-basket-tab.is-active {
    background: #eef2ff;
    color: #1d4ed8;
}

.mobile-basket-tab-icon {
    font-size: 18px;
    line-height: 1;
}

.mobile-basket-tab-label {
    font-size: 11px;
    line-height: 1.2;
}

.mobile-basket-badge-wrap {
    position: relative;
    display: inline-flex;
}

.mobile-basket-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-day-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 159;
}

.mobile-day-picker-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 36px rgba(15, 23, 42, 0.18);
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 160;
}

.mobile-day-picker-overlay.is-open,
.mobile-day-picker-sheet.is-open {
    display: block;
}

.mobile-day-picker-handle {
    width: 52px;
    height: 5px;
    border-radius: 999px;
    background: #dbe4f5;
    margin: 2px auto 14px;
}

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

.mobile-day-picker-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.mobile-day-picker-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
}

.mobile-day-picker-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-day-picker-option {
    border: 1px solid #dbe4ff;
    background: #f8faff;
    color: #1d4ed8;
    border-radius: 14px;
    padding: 14px 10px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.mobile-day-picker-option.is-current {
    background: #e0e7ff;
    border-color: #c7d2fe;
}

/* ===== Exit Button ===== */
.exit-basket-btn {
    display: none !important;
    /* User requested to remove this */
    position: absolute;
    top: 16px;
    left: 380px;
    /* Moved right to avoid sidebar overlap (360px + gap) */
    /* After left sidebar */
    z-index: 20;
    background: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.exit-basket-btn:hover {
    background: #f5f5f5;
}

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 1023px) {
    .basket-mode-map {
        right: 0;
        /* No right sidebar */
    }

    .basket-panel {
        display: none;
        /* Use drawer instead */
    }

    .basket-drawer {
        display: block;
    }
}

/* Compact basket layout: tablets and phones */
@media (max-width: 1023px) {
    .basket-mode .map-route-label-overlay {
        display: none !important;
    }

    .basket-mode-map {
        left: 0;
        right: 0;
        z-index: 1;
    }

    .exit-basket-btn {
        left: 16px;
        top: 16px;
        /* Fixed to top-left */
        bottom: auto;
        z-index: 60;
        /* Higher than sidebar (50) */
    }

    .mobile-basket-tabbar {
        display: flex;
    }

    /* Search sidebar becomes bottom sheet — height matched to .basket-drawer
       so the 장소 찾기 sheet and 여행 바스켓 sheet are visually identical
       regardless of selected country. */
    .search-sidebar {
        position: fixed;
        top: 100px;
        left: max(12px, var(--basket-safe-left));
        right: max(12px, var(--basket-safe-right));
        /* The floating panel owns the safe-area offset. Its footer must not add
           the same inset again or short iPhone viewports lose it twice. */
        bottom: max(12px, var(--basket-safe-bottom));
        width: auto;
        height: auto;
        max-height: none;
        border-radius: 24px;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.18);
        background: rgba(248, 250, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 135;
        overflow: hidden;
        transform: translateY(calc(100% + 24px));
        transition: transform 0.28s ease;
    }

    .search-sidebar.collapsed {
        transform: translateY(calc(100vh - 150px));
        transform: translateY(calc(100dvh - 150px));
    }

    /* 장소 보기 패널이 열린 상태 — 상단 topnav (피글맵 로고/언어/로그인)
       를 가리고 패널 top 을 더 위로 끌어올린다. */
    body.pgle-basket-panel-search-open .pgle-topnav {
        display: none !important;
    }
    body.pgle-basket-panel-search-open .search-sidebar {
        top: max(20px, var(--basket-safe-top));
    }

    .basket-mode.mobile-panel-search .search-sidebar {
        transform: translateY(0);
    }

    .search-sidebar .sidebar-attribution,
    .search-sidebar .sidebar-toggle-btn.left-toggle,
    .basket-drawer .drawer-toggle {
        display: none !important;
    }

    .search-sidebar .sidebar-header-row {
        padding: 18px 18px 10px;
    }

    .search-sidebar .mobile-search-panel-toggle {
        display: inline-flex;
    }

    .search-sidebar .category-chips {
        padding: 10px 18px 12px;
        gap: 8px;
    }

    .search-sidebar .search-input-wrap {
        padding: 0 18px 12px;
    }

    .search-sidebar .search-results-list {
        padding: 0 0 12px;
    }

    /* Force Map to stay full width on mobile, ignoring JS inline styles */
    .basket-mode-map {
        left: 0 !important;
        right: 0 !important;
        width: 100%;
    }

    .basket-drawer {
        display: block;
        left: 12px;
        right: 12px;
        bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 10px);
        /* Use vh as a fallback, dvh on supported browsers so the iOS Safari URL
           bar doesn't push the drawer's top edge above the visible viewport
           (which would hide the 접기/Close header behind the topbar). */
        max-height: calc(100vh - 100px - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 100px - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
        transform: translateY(calc(100% + 24px));
        transition: transform 0.28s ease;
        z-index: 130;
        background: transparent;
        box-shadow: none;
        border-radius: 24px;
        overflow: hidden;
    }

    .basket-drawer.expanded {
        transform: translateY(0);
    }

    .drawer-content,
    .basket-drawer.expanded .drawer-content {
        display: block;
        max-height: calc(100vh - 100px - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 100px - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
        min-height: 0;
        overflow-y: auto;
        padding: 0 0 24px;
        background: #f8f9fc;
        border-radius: 24px;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.18);
    }

    .basket-drawer.basket-collapsed .drawer-content {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
    }

    .basket-mode.mobile-panel-search .basket-drawer,
    .basket-mode.mobile-panels-hidden .basket-drawer {
        transform: translateY(calc(100% + 24px));
    }

    .basket-mode.mobile-panel-search .drawer-content,
    .basket-mode.mobile-panels-hidden .drawer-content {
        pointer-events: none;
    }

    .floating-complete-btn {
        left: 16px;
        right: 16px;
        width: auto;
        transform: none;
        justify-content: center;
        bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px);
        z-index: 145;
    }

    .floating-complete-btn:hover,
    .floating-complete-btn:active {
        transform: none;
    }

    .basket-mode.mobile-panel-search .floating-complete-btn,
    .basket-mode.mobile-panels-hidden .floating-complete-btn {
        display: none !important;
    }
}

.mobile-basket-shell {
    padding-bottom: 6px;
}

.mobile-basket-header {
    padding: 16px 16px 12px;
    background: #fff;
    border-bottom: 8px solid #f0f2f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.mobile-basket-header-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.mobile-basket-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: #1a1a2e;
}

.mobile-basket-count {
    background: #3b5bdb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.mobile-basket-sub {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.mobile-basket-collapse-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-basket-collapse-icon {
    transition: transform 0.2s ease;
}

.mobile-basket-shell.collapsed .mobile-basket-collapse-icon {
    transform: rotate(180deg);
}

.mobile-basket-body {
    display: block;
}

.mobile-basket-shell.collapsed .mobile-basket-body {
    display: none;
}

.mobile-basket-shell.collapsed .mobile-basket-header {
    border-bottom: none;
}

.mobile-basket-banner {
    margin: 12px 16px;
    padding: 12px 14px;
    background: #eef1ff;
    border-radius: 12px;
    border-left: 3px solid #3b5bdb;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #3b5bdb;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.mobile-basket-banner-icon {
    font-size: 16px;
    line-height: 1;
}

.mobile-section-label {
    padding: 8px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-section-count {
    font-size: 11px;
    color: #3b5bdb;
    background: #eef1ff;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.mobile-day-section {
    margin-bottom: 4px;
}

.mobile-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}

.mobile-day-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-day-label {
    font-size: 14px;
    font-weight: 900;
    color: #3b5bdb;
}

.mobile-day-date {
    font-size: 11px;
    color: #aaa;
}

.mobile-day-count {
    font-size: 11px;
    color: #888;
    background: #f0f4ff;
    padding: 2px 8px;
    border-radius: 999px;
}

.mobile-stay-card,
.mobile-place-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}

.mobile-stay-card {
    background: #f8f9ff;
}

.mobile-card-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eef1ff;
    object-fit: cover;
    flex-shrink: 0;
}

.mobile-card-thumb.fallback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.mobile-card-info {
    flex: 1;
    min-width: 0;
}

.mobile-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-card-subtitle {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.mobile-card-tag {
    display: inline-block;
    font-size: 10px;
    background: #f0f4ff;
    color: #3b5bdb;
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 3px;
}

.mobile-card-tag.is-stay {
    background: #fff0f0;
    color: #e03131;
}

/* Departure stay selector (multi-stay mode) */
.mobile-stay-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e8edf8;
    background: #f4f6ff;
}

.mobile-stay-selector-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
    letter-spacing: -0.1px;
}

.mobile-stay-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-stay-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1.5px solid #c7d7f8;
    background: #fff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.mobile-stay-chip.active {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.mobile-place-index {
    width: 22px;
    height: 22px;
    background: #3b5bdb;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-place-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-day-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0f4ff;
    border: 1.5px solid #dde4ff;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #3b5bdb;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-place-delete {
    width: 30px;
    height: 30px;
    background: #fff0f0;
    color: #e03131;
    border: 1px solid #ffc9c9;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    flex-shrink: 0;
}

.mobile-place-delete svg,
.delete-spot svg {
    display: block;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
    flex-shrink: 0;
}

.delete-spot {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    flex-shrink: 0;
}

.mobile-basket-bottom-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.mobile-basket-add-place {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: none;
    border-bottom: 8px solid #f0f2f8;
    cursor: pointer;
    text-align: left;
}

.mobile-basket-bottom-row > .mobile-basket-add-place {
    border-right: 1px solid #d1d5db;
}

.mobile-basket-departure-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: none;
    border-bottom: 8px solid #f0f2f8;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.mobile-basket-departure-icon {
    border-color: #ffc9c9 !important;
    color: #e03131 !important;
    font-size: 16px !important;
}

.mobile-basket-departure-label {
    color: #e03131 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.mobile-basket-add-place-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1.5px dashed #c5d0ff;
    color: #3b5bdb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.mobile-basket-add-place-label {
    font-size: 13px;
    font-weight: 600;
    color: #3b5bdb;
}

.mobile-basket-empty {
    padding: 28px 20px 18px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.mobile-view-route-btn {
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Sidebar Cards ===== */
.sidebar-day-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.2s;
}

.sidebar-day-card.targeting-day {
    border: 2px solid #facc15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.28);
}

.sidebar-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fdfdfd;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: background 0.2s;
}

.sidebar-day-card.expanded .sidebar-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-label {
    font-weight: 700;
    color: #333;
    font-size: 14px;
}

.date-label {
    font-size: 13px;
    color: #888;
}

.chevron {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

.sidebar-day-card.expanded .chevron {
    transform: rotate(180deg);
}

.sidebar-card-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s;
}

.sidebar-day-card.expanded .sidebar-card-body {
    max-height: 1000px;
    /* Arbitrary large height */
    opacity: 1;
    padding: 12px;
}

/* Stay Info */
.sidebar-stay-info {
    margin-bottom: 12px;
    padding: 10px;
    background: #f0f7ff;
    border-radius: 6px;
    border: 1px dashed #cfe0f5;
}

.stay-badge {
    display: inline-block;
    background: #4285F4;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 4px;
}

.stay-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
}

.stay-addr {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spots List */
.sidebar-spots-list {
    margin-bottom: 12px;
}

.list-header {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-spot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    min-height: 28px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-spot-item:last-child {
    border-bottom: none;
}

.spot-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.spot-idx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: #f0f0f0;
    color: #666;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
}

.spot-name {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-spot {
    /* Styles handled inline mainly, but reset hered */
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.delete-spot:hover {
    color: #ff4d4f;
    background: #fff1f0;
}

.empty-spots {
    padding: 10px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

/* Actions */
.sidebar-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    flex: 1;
    padding: 8px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
    border: 1px solid #e0e0e0;
}

.add-schedule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.2;
    padding: 5px 10px;
    min-height: 28px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
}

.add-schedule-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
}

.add-limit-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.2;
    padding: 5px 10px;
    min-height: 28px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #c2410c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    flex-shrink: 0;
}

.sidebar-day-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.sidebar-day-top-row>.add-schedule-btn,
.sidebar-day-top-row>.add-limit-label {
    margin-left: auto;
}

.sidebar-day-meta-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-day-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-day-title {
    font-weight: 700;
    color: #4285F4;
    line-height: 1.2;
}

.day-date-sub-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.35;
    padding-top: 1px;
    white-space: nowrap;
}

.optimized-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 9999px;
    background: #34A853;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.view-route-btn {
    background: #e6f7ff;
    color: #0088cc;
    border: 1px solid #bae7ff;
}

.view-route-btn:hover {
    background: #bae7ff;
    color: #0060aa;
}

/* Sidebar Attribution */
.sidebar-attribution {
    font-size: 10px;
    color: #475569;
    text-align: center;
    padding: 12px 16px;
    margin-top: auto;
    line-height: 1.5;
    border-top: 1px solid rgba(37, 99, 235, 0.16);
    background: rgba(255, 255, 255, 0.48);
}

/* ===== Spots v1 form shell ===== */
.spots-v1-form {
    --spots-v1-left-width: 440px;
    --spots-v1-border: #e5e7eb;
    --spots-v1-muted: #6b7280;
    --spots-v1-ink: #111827;
    --spots-v1-blue: #2563eb;
}

.basket-mode.spots-v1-form .basket-mode-map {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* Mobile (<1024px): the spots-v1 redesign was styled desktop-only (every rule
   below lives in the min-width:1024px block), so on phones the panel handle had
   no sizing and its inline <svg> chevron rendered at the replaced-element
   default (~300x150px) as a huge black arrow covering the map. Style the handle
   compactly so the map area is no longer obscured. */
@media (max-width: 1023px) {
    .spots-v1-form .spots-v1-panel-handle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: 100%;
        padding: 8px 0 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        color: #2563eb;
    }
    .spots-v1-form .spots-v1-panel-handle-bar {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d1d5db;
    }
    .spots-v1-form .spots-v1-panel-handle-text {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 800;
    }
    .spots-v1-form .spots-v1-panel-handle-text svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
}

@media (min-width: 1024px) {
    .basket-mode.spots-v1-form .basket-mode-map {
        left: var(--spots-v1-left-width) !important;
        right: 0 !important;
    }

    .spots-v1-form .search-sidebar,
    .spots-v1-form .search-sidebar.collapsed {
        width: var(--spots-v1-left-width);
        height: 100%;
        transform: none;
        background: #fff;
        color: var(--spots-v1-ink);
        border-right: 1px solid #f3f4f6;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
    }

    .spots-v1-form .sidebar-toggle-btn.left-toggle,
    .spots-v1-form .sidebar-toggle-btn.right-toggle,
    .spots-v1-form .floating-complete-btn {
        display: none !important;
    }

    .spots-v1-form .spots-v1-panel-handle {
        display: none;
    }

    .spots-v1-form .spots-v1-city-tabs {
        display: flex;
        gap: 8px;
        padding: 14px 16px 10px;
        overflow-x: auto;
        border-bottom: 1px solid #f3f4f6;
        scrollbar-width: none;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-city-tabs::-webkit-scrollbar {
        display: none;
    }

    .spots-v1-form .city-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: max-content;
        border: 1px solid var(--spots-v1-border);
        background: #fff;
        color: #4b5563;
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        cursor: default;
    }

    .spots-v1-form .city-tab.active,
    .spots-v1-form .city-tab.completed {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }

    .spots-v1-form .city-tab .check {
        display: none;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        background: #22c55e;
        color: #fff;
    }

    .spots-v1-form .city-tab.completed .check {
        display: inline-flex;
    }

    .spots-v1-form .city-tab .check svg {
        width: 9px;
        height: 9px;
    }

    .spots-v1-form .spots-v1-panel-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 16px;
        border-bottom: 1px solid #f3f4f6;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-panel-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        height: 32px;
        min-height: 0;          /* base.css button{min-height:44px} 무력화 → 컴팩트 */
        border: 1px solid var(--spots-v1-border);
        border-radius: 8px;
        background: #fff;
        color: #6b7280;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .spots-v1-form .spots-v1-panel-tab svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-panel-tab.active {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .spots-v1-form .spots-v1-count {
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
    }

    .spots-v1-form .spots-v1-panel-content {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .spots-v1-form .spots-v1-panel-section {
        display: none;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }

    .spots-v1-form .spots-v1-panel-section.active {
        display: flex;
    }

    .spots-v1-form .spots-v1-panel-section[hidden] {
        display: none !important;
    }

    .spots-v1-form .spots-v1-add-target {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 16px 6px;
        padding: 6px 12px;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-add-target > svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .spots-v1-form .basket-day-target-dropdown {
        margin-left: 0;
    }

    .spots-v1-form .basket-day-target-trigger {
        height: 26px;
        max-width: 128px;
        border-color: #bfdbfe;
        background: #fff;
        color: #1d4ed8;
    }

    .spots-v1-form .category-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 4px 16px 12px;
        overflow: visible;
        align-items: stretch;
        scrollbar-width: none;
        flex-shrink: 0;
    }

    .spots-v1-form .category-chips::-webkit-scrollbar {
        display: none;
    }

    .spots-v1-form .category-rail-shell {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        padding: 4px 12px 12px;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .spots-v1-form .category-rail-shell #categoryChips {
        display: flex;
        min-width: 0;
        width: 100%;
        gap: 8px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: auto;
        scroll-padding-inline: 0;
        overscroll-behavior-x: none;
        touch-action: pan-x;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .spots-v1-form .category-rail-shell #categoryChips .cat-chip {
        flex: 0 0 auto;
        width: auto;
        min-height: 30px;
        padding: 6px 9px;
        white-space: nowrap;
    }

    .spots-v1-form .category-rail-control {
        position: absolute;
        top: calc(50% - 4px);
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 0;
        padding: 0;
        border: 1px solid #d8e0ec;
        border-radius: 999px;
        background: #fff;
        color: #1d4ed8;
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.9),
            0 2px 8px rgba(15, 23, 42, 0.12);
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease,
                    color 0.15s ease, opacity 0.15s ease;
    }

    .spots-v1-form .category-rail-control-prev {
        left: 12px;
    }

    .spots-v1-form .category-rail-control-next {
        right: 12px;
    }

    .spots-v1-form .category-rail-control:hover:not(:disabled) {
        border-color: #93b4f8;
        background: #eff6ff;
        color: #1e40af;
    }

    .spots-v1-form .category-rail-control:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.24);
        outline-offset: 2px;
    }

    .spots-v1-form .category-rail-control:disabled {
        opacity: 0.28;
        cursor: default;
        box-shadow: none;
    }

    .spots-v1-form .category-rail-control[hidden] {
        display: none !important;
    }

    .spots-v1-form .category-rail-control svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .spots-v1-form .cat-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        width: 100%;
        min-height: 34px;
        height: auto;
        padding: 7px 8px;
        border-radius: 8px;
        border: 1px solid var(--spots-v1-border);
        background: #fff;
        color: #4b5563;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .spots-v1-form .cat-chip svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .spots-v1-form .cat-chip.active {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .spots-v1-form .spots-v1-search-input-wrap {
        position: relative;
        padding: 0 16px;          /* 하단 여백은 margin 으로 → 아이콘(top:50%)이 input 중앙에 정렬 */
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-search-input-wrap .search-input-icon {
        position: absolute;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #9ca3af;
        pointer-events: none;
    }

    .spots-v1-form .spots-v1-search-input-wrap input {
        height: 32px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #f9fafb;
        color: #111827;
        padding: 0 14px 0 38px;
        font-size: 14px;
    }

    .spots-v1-form .spots-v1-search-input-wrap input:focus {
        border-color: #2563eb;
        background: #fff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .spots-v1-form .spots-v1-section-label {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px 10px;
        color: #6b7280;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        flex-shrink: 0;
        border-bottom: 1px solid #e5e7eb;   /* 스팟 목록과의 경계선 */
    }

    .spots-v1-form .spots-v1-section-label .section-label-provider {
        margin-left: auto;
        font-size: 9px;
        font-weight: 600;
        color: #9ca3af;
        text-transform: none;
        letter-spacing: 0;
    }

    .spots-v1-form .spots-v1-section-label svg {
        width: 13px;
        height: 13px;
    }

    .spots-v1-form .search-results-list {
        flex: 1;
        min-height: 0;
        padding-bottom: 12px;
        background: #fff;
    }

    .spots-v1-form .result-item {
        margin: 0 12px 10px;
        padding: 10px;
        border: 1px solid #eef2f7;
        border-left: 4px solid #f97316;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .spots-v1-form .result-item:hover {
        background: #f9fafb;
        border-color: #dbeafe;
    }

    .spots-v1-form .result-thumb {
        width: 64px;
        height: 64px;
        border-radius: 8px;
    }

    .spots-v1-form .result-name {
        color: #111827;
        font-size: 13px;
        font-weight: 900;
    }

    .spots-v1-form .result-desc {
        color: #6b7280;
        font-size: 11px;
    }

    .spots-v1-form .result-tag {
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 800;
    }

    .spots-v1-form .result-add-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .spots-v1-form .result-info-btn {
        width: 30px;
        height: 22px;
        border-radius: 8px;
        border-color: #e5e7eb;
        background: #fff;
        color: #4b5563;
    }

    .spots-v1-form .sidebar-attribution {
        color: #9ca3af;
        background: #fff;
        border-top: 1px solid #f3f4f6;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-basket-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #f3f4f6;
        flex-shrink: 0;
    }

    .spots-v1-form .basket-header-text {
        color: #111827;
        font-size: 16px;
        font-weight: 900;
    }

    .spots-v1-form .basket-header-meta {
        margin-top: 2px;
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
    }

    .spots-v1-form .basket-panel {
        position: static;
        width: 100%;
        height: auto;
        flex: 1;
        min-height: 0;
        background: #fff;
        box-shadow: none;
        transform: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .spots-v1-form .basket-panel.collapsed {
        transform: none;
    }

    .spots-v1-form .basket-panel-header {
        display: none;
    }

    .spots-v1-form .basket-panel-items {
        flex: 1;
        min-height: 0;
        padding: 12px;
        overflow-y: auto;
        background: #f9fafb;
    }

    .spots-v1-form .sidebar-day-card {
        border: 1px solid #e5e7eb !important;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .spots-v1-form .sidebar-day-card.targeting-day {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .spots-v1-form .sidebar-day-header {
        background: #fff !important;
    }

    .spots-v1-form .sidebar-day-title {
        color: #111827;
    }

    .spots-v1-form .add-schedule-btn,
    .spots-v1-form .view-route-btn,
    .spots-v1-form .optimize-route-btn {
        border-radius: 8px !important;
        font-weight: 900 !important;
    }

    .spots-v1-form .panel-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        padding: 12px 16px;
        border-top: 1px solid #f3f4f6;
        background: #fff;
        flex-shrink: 0;
    }

    .spots-v1-form .panel-footer button {
        min-width: 0;
        height: 44px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
    }

    .spots-v1-form .panel-footer svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-save-draft {
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
    }

    .spots-v1-form .spots-v1-build-route {
        border: 1px solid #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .spots-v1-form .spots-v1-build-route:disabled {
        border-color: #d1d5db;
        background: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
    }
}

@media (max-width: 1023px) {
    /* Mockup-match (mobile): show the Spots/Basket pill tabs + bottom footer like
       UI_Update/piggle_spots_v1.html; hide the legacy bottom tabbar + floating
       save button. The drag handle (spotsV1PanelHandle) opens/closes the sheet. */
    .spots-v1-form .spots-v1-city-tabs,
    .spots-v1-form .mobile-basket-tabbar,
    .spots-v1-form .basket-drawer,
    .spots-v1-form .save-itinerary-float,
    .spots-v1-form .floating-complete-btn {
        display: none !important;
    }

    /* Panel fills the sheet; only the active section (Spots OR Basket) shows. */
    .spots-v1-form .spots-v1-panel-content {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }
    .spots-v1-form .spots-v1-panel-section {
        display: none;
    }
    .spots-v1-form .spots-v1-panel-section.active {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    /* Spots / Basket pill tabs (top of sheet). */
    .spots-v1-form .spots-v1-panel-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 16px;
        border-bottom: 1px solid #f3f4f6;
        flex-shrink: 0;
    }
    .spots-v1-form .spots-v1-panel-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        height: 32px;
        min-height: 0;          /* base.css button{min-height:44px} 무력화 → 컴팩트 */
        border: 1px solid var(--spots-v1-border);
        border-radius: 999px;
        background: #fff;
        color: #6b7280;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
    }
    .spots-v1-form .spots-v1-panel-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
    .spots-v1-form .spots-v1-panel-tab.active {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }
    .spots-v1-form .spots-v1-count {
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
    }

    /* Footer: Save / Build (bottom of sheet). */
    .spots-v1-form .spots-v1-panel-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        padding: 12px 16px;
        border-top: 1px solid #f3f4f6;
        background: #fff;
        flex-shrink: 0;
    }
    .spots-v1-form .spots-v1-panel-footer.is-empty {
        display: none;
    }
    .spots-v1-form .spots-v1-panel-footer button {
        min-width: 0;
        height: 46px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }
    .spots-v1-form .spots-v1-panel-footer svg { width: 16px; height: 16px; flex-shrink: 0; }
    .spots-v1-form .spots-v1-save-draft { border: 1px solid #d1d5db; background: #fff; color: #374151; }
    .spots-v1-form .spots-v1-save-draft:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
    .spots-v1-form .spots-v1-build-route { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
    .spots-v1-form .spots-v1-build-route:disabled { border-color: #d1d5db; background: #e5e7eb; color: #9ca3af; }

    /* Basket section (shown when the Basket pill is active). */
    .spots-v1-form .spots-v1-basket-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #f3f4f6;
        flex-shrink: 0;
    }
    .spots-v1-form .basket-header-text { color: #111827; font-size: 15px; font-weight: 900; }
    .spots-v1-form .basket-header-meta { margin-top: 2px; color: #6b7280; font-size: 12px; font-weight: 700; }
    .spots-v1-form #basketPanel,
    .spots-v1-form .basket-panel {
        position: static;
        width: 100%;
        height: auto;
        flex: 1;
        min-height: 0;
        background: #fff;
        box-shadow: none;
        transform: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .spots-v1-form .basket-panel-header { display: none; }
    .spots-v1-form .basket-panel-items {
        flex: 1;
        min-height: 0;
        padding: 12px;
        overflow-y: auto;
        background: #f9fafb;
    }

    .spots-v1-form .spots-v1-add-target {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px 6px;
        color: #1d4ed8;
        font-size: 13px;
        font-weight: 800;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-add-target > svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .spots-v1-form .basket-day-target-dropdown {
        margin-left: 0;
    }

    .spots-v1-form .category-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .spots-v1-form .cat-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .spots-v1-form .cat-chip svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .spots-v1-form .spots-v1-search-input-wrap {
        position: relative;
        padding: 0 18px;          /* 하단 여백은 margin 으로 → 아이콘이 input 중앙 정렬 */
        margin-bottom: 8px;
    }

    .spots-v1-form .spots-v1-search-input-wrap .search-input-icon {
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #9ca3af;
        pointer-events: none;
    }

    .spots-v1-form .spots-v1-search-input-wrap input {
        padding: 6px 14px 6px 38px;
    }

    .spots-v1-form .spots-v1-section-label {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px 10px;
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        border-bottom: 1px solid #e5e7eb;   /* 스팟 목록과의 경계선 */
    }

    .spots-v1-form .spots-v1-section-label .section-label-provider {
        margin-left: auto;
        font-size: 9px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: none;
        letter-spacing: 0;
    }

    .spots-v1-form .spots-v1-section-label svg {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 360px) {
    .spots-v1-form .category-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spots-v1-form .spots-v1-panel-footer button {
        padding-inline: 8px;
        gap: 5px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }
}

/* ===== Mobile dense basket discovery =====
   The production map remains the single #basketModeMap root. On compact
   layouts JS measures #mobileBasketMapViewport and writes the four custom
   properties below on #basketModeContainer; this avoids moving a live WebGL
   canvas or creating a second map instance. */
.mobile-basket-origin,
.mobile-basket-map-viewport,
.mobile-basket-summary-bar {
    display: none;
}

.mobile-basket-list-toolbar {
    display: contents;
}

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

@media (min-width: 1024px) {
    /* The mobile-first DOM puts categories first. Preserve the established
       desktop order, where the add-target row precedes the category rail. */
    .spots-v1-form #sectionSearch .spots-v1-add-target {
        order: -1;
    }
}

@media (max-width: 1023px) {
    .basket-mode.spots-v1-form {
        --mobile-basket-map-top: 0px;
        --mobile-basket-map-left: 0px;
        --mobile-basket-map-width: 100%;
        --mobile-basket-map-height: 176px;
        --mobile-basket-summary-height: 66px;
        background: #fff;
    }

    /* The add-target Day picker is a floating sheet above the fixed basket
       summary dock. JS replaces this fallback with the dock's rendered top
       edge, so long translations and safe-area insets cannot cover Day 3/4. */
    .basket-mode.spots-v1-form #basketDayTargetOverlay {
        z-index: 170;
    }

    .basket-mode.spots-v1-form #basketDayTargetSheet {
        --basket-day-target-bottom-offset: calc(
            var(--mobile-basket-summary-height)
            + max(8px, var(--basket-safe-bottom))
            + 12px
        );
        bottom: var(--basket-day-target-bottom-offset);
        max-height: calc(
            100dvh
            - var(--basket-day-target-bottom-offset)
            - max(16px, var(--basket-safe-top))
        );
        padding-bottom: 18px;
        overflow: hidden;
        border-radius: 24px;
        z-index: 171;
    }

    .basket-mode.spots-v1-form #basketDayTargetSheet.is-open {
        display: flex;
        flex-direction: column;
    }

    .basket-mode.spots-v1-form #basketDayTargetOptionsInner {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 2px 2px 4px;
        scroll-padding-block: 8px;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Inline values are intentionally not used for these dimensions. The JS
       coordinator updates the variables after every viewport/panel change,
       while this rule wins over the legacy top/bottom !important contract. */
    .basket-mode.spots-v1-form .basket-mode-map,
    .basket-mode.spots-v1-form .basket-mode-map.mapboxgl-map {
        top: var(--mobile-basket-map-top) !important;
        left: var(--mobile-basket-map-left) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--mobile-basket-map-width) !important;
        height: var(--mobile-basket-map-height) !important;
        min-height: 0;
        z-index: 1;
    }

    /* The dense discovery screen is a transparent interaction shell over the
       one real map. Opaque content blocks frame a 176px pointer-through window. */
    .basket-mode.spots-v1-form #searchSidebar,
    body.pgle-basket-panel-search-open .basket-mode.spots-v1-form #searchSidebar {
        top: max(0px, var(--basket-safe-top));
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
    }

    .basket-mode.spots-v1-form.mobile-panel-search #searchSidebar {
        transform: translateY(0);
    }

    .basket-mode.spots-v1-form #searchSidebar > *,
    .basket-mode.spots-v1-form #searchSidebar .spots-v1-panel-content,
    .basket-mode.spots-v1-form #sectionSearch {
        pointer-events: none;
    }

    .basket-mode.spots-v1-form #sectionSearch > :not(.mobile-basket-map-viewport),
    .basket-mode.spots-v1-form #searchSidebar button,
    .basket-mode.spots-v1-form #searchSidebar input,
    .basket-mode.spots-v1-form #sectionBasket,
    .basket-mode.spots-v1-form #searchSidebar > .spots-v1-panel-footer {
        pointer-events: auto;
    }

    .basket-mode.spots-v1-form .spots-v1-panel-handle,
    .basket-mode.spots-v1-form[data-spots-v1-panel="search"] .spots-v1-panel-tabs,
    .basket-mode.spots-v1-form[data-spots-v1-panel="search"] #searchSidebar > .spots-v1-panel-footer {
        display: none !important;
    }

    .basket-mode.spots-v1-form[data-spots-v1-panel="basket"] #searchSidebar {
        background: #fff;
        pointer-events: auto;
    }

    /* The body-scoped transparent discovery-shell selector above has higher
       specificity than the basic basket selector. Repeat the basket state at
       equal-or-higher specificity so View basket cannot expose a map strip
       behind the itinerary header/cards. The canvas remains alive for an
       instant return to Spots, but is not painted or interactive here. */
    body.pgle-basket-panel-search-open
        .basket-mode.spots-v1-form[data-spots-v1-panel="basket"]
        #searchSidebar {
        background: #fff;
    }

    .basket-mode.spots-v1-form[data-spots-v1-panel="basket"] .basket-mode-map {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .basket-mode.spots-v1-form[data-spots-v1-panel="basket"] .spots-v1-panel-tabs {
        display: grid;
    }

    .basket-mode.spots-v1-form[data-spots-v1-panel="basket"] .mobile-basket-summary-bar {
        display: none;
    }

    .basket-mode.spots-v1-form .spots-v1-panel-content,
    .basket-mode.spots-v1-form .spots-v1-panel-section.active {
        min-height: 0;
        overflow: hidden;
    }

    /* 1. Category rail */
    .basket-mode.spots-v1-form .category-rail-shell {
        position: relative;
        z-index: 4;
        display: block;
        order: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        overflow: hidden;
        background: #fff;
        pointer-events: auto;
    }

    .basket-mode.spots-v1-form #categoryChips {
        display: flex;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 12px 9px;
        overflow-x: auto;
        overflow-y: hidden;
        background: #fff;
        border-bottom: 1px solid #eef1f5;
        scroll-padding-inline: 0;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
        -webkit-mask-image: none;
                mask-image: none;
        pointer-events: auto;
    }

    .basket-mode.spots-v1-form .category-rail-control {
        position: absolute;
        top: 50%;
        z-index: 5;
        display: inline-flex;
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(202, 213, 229, 0.96);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        color: #2459d6;
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.76),
            0 3px 10px rgba(15, 23, 42, 0.16);
        transform: translateY(-50%);
        cursor: pointer;
        touch-action: manipulation;
        transition:
            border-color 0.15s ease,
            background 0.15s ease,
            color 0.15s ease,
            box-shadow 0.15s ease,
            opacity 0.15s ease;
    }

    .basket-mode.spots-v1-form .category-rail-control-prev {
        left: 4px;
    }

    .basket-mode.spots-v1-form .category-rail-control-next {
        right: 4px;
    }

    .basket-mode.spots-v1-form .category-rail-control svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .basket-mode.spots-v1-form .category-rail-control:hover:not(:disabled),
    .basket-mode.spots-v1-form .category-rail-control:active:not(:disabled) {
        border-color: #9db7ef;
        background: #eff5ff;
        color: #1746b4;
    }

    .basket-mode.spots-v1-form .category-rail-control:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.25);
        outline-offset: 2px;
    }

    .basket-mode.spots-v1-form .category-rail-control:disabled {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .basket-mode.spots-v1-form .category-rail-control[hidden] {
        display: none !important;
    }

    .basket-mode.spots-v1-form #categoryChips .cat-chip {
        flex: 0 0 auto;
        width: auto;
        min-height: 34px;
        padding: 7px 11px;
        border: 1px solid #dfe5ee;
        border-radius: 999px;
        background: #fff;
        color: #4b5563;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .basket-mode.spots-v1-form #categoryChips .cat-chip.active {
        border-color: #3568e8;
        background: #3568e8;
        color: #fff;
    }

    .mobile-basket-origin-label {
        flex: 0 0 auto;
        color: #7b8494;
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-basket-origin-pin {
        display: inline-flex;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: #e44747;
    }

    .mobile-basket-origin-pin svg {
        width: 100%;
        height: 100%;
    }

    .mobile-basket-origin-text {
        min-width: 0;
        overflow: hidden;
        color: #111827;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 2. Measured window for the single root map. The former standalone
       departure row is gone, so the unchanged 176px map moves upward. */
    .basket-mode.spots-v1-form .mobile-basket-map-viewport {
        position: relative;
        display: block;
        order: 2;
        flex: 0 0 176px;
        width: 100%;
        height: 176px;
        min-height: 176px;
        overflow: hidden;
        border-bottom: 1px solid #dfe5ee;
        background: transparent;
        pointer-events: none;
        isolation: isolate;
    }

    .mobile-basket-map-overlay {
        position: absolute;
        right: 8px;
        bottom: 8px;
        left: auto;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        pointer-events: none;
    }

    .mobile-basket-map-toggle {
        display: inline-flex;
        min-width: 76px;
        min-height: 36px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0 11px;
        border: 1px solid rgba(218, 225, 235, 0.96);
        border-color: rgba(213, 222, 235, 0.98);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.96);
        color: #2563eb;
        font-size: 12px;
        font-weight: 900;
        box-shadow: 0 5px 15px rgba(25, 40, 70, 0.12);
        cursor: pointer;
        pointer-events: auto;
    }

    /* Keep the required Mapbox mark visible without letting it dominate the
       short mobile map. Scaling its own corner preserves map attribution and
       leaves the bottom-right map action completely independent. */
    .basket-mode.spots-v1-form .basket-mode-map .mapboxgl-ctrl-bottom-left {
        transform: scale(.5);
        transform-origin: left bottom;
    }

    /* Keep 44px touch targets for zoom. The compass is unnecessary in the
       short preview and is hidden there only; it remains available after the
       user expands the map. */
    .basket-mode.spots-v1-form:not(.mobile-map-expanded)
    .basket-mode-map .mapboxgl-ctrl-compass {
        display: none;
    }

    .basket-mode.spots-v1-form:not(.mobile-map-expanded)
    .basket-mode-map :is(.mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    /* 3. Departure context + existing Day selector */
    .basket-mode.spots-v1-form .mobile-basket-list-toolbar {
        display: flex;
        order: 3;
        flex: 0 0 auto;
        min-height: 50px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid #e5eaf1;
        background: #fff;
        pointer-events: auto;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-basket-origin {
        display: flex;
        min-width: 0;
        min-height: 34px;
        flex: 1 1 auto;
        align-items: center;
        gap: 5px;
        padding: 0 9px;
        overflow: hidden;
        border: 1px solid #dbe4f0;
        border-radius: 12px;
        background: #f8fafc;
        color: #1f2937;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-basket-origin-label {
        font-size: 10px;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-basket-origin-pin {
        width: 14px;
        height: 14px;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-basket-origin-text {
        font-size: 12px;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .spots-v1-add-target {
        display: flex;
        min-width: 0;
        flex: 0 1 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: #596273;
        font-size: 11px;
        font-weight: 800;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .spots-v1-add-target > svg,
    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-search-panel-toggle {
        display: none;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .basket-day-target-dropdown {
        margin-left: 0;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .basket-day-target-trigger {
        height: 34px;
        max-width: 118px;
        padding: 0 10px;
        border-color: #dbe4f0;
        background: #f8fafc;
        color: #244a9b;
        font-size: 12px;
        font-weight: 900;
    }

    /* Search remains fully functional but is visually part of the result region,
       so it does not interrupt the required category/origin/map/toolbar order. */
    .basket-mode.spots-v1-form .spots-v1-search-input-wrap {
        order: 4;
        flex: 0 0 auto;
        margin: 0;
        padding: 7px 12px 6px;
        border-bottom: 1px solid #eef1f5;
        background: #fff;
        pointer-events: auto;
    }

    .basket-mode.spots-v1-form .spots-v1-search-input-wrap .search-input-icon {
        left: 24px;
    }

    .basket-mode.spots-v1-form .spots-v1-search-input-wrap input {
        height: 36px;
        min-height: 36px;
        padding: 0 12px 0 36px;
        border: 1px solid #dfe5ee;
        border-radius: 12px;
        background: #f8fafc;
        color: #1f2937;
        box-shadow: none;
        line-height: 36px;
    }

    .basket-mode.spots-v1-form .spots-v1-section-label {
        order: 5;
        flex: 0 0 auto;
        min-height: 24px;
        padding: 3px 12px 5px;
        border-bottom: 1px solid #eef1f5;
        background: #fff;
        pointer-events: auto;
    }

    /* 4. Denser result cards: iPhone 14 Pro can show more nearby places
       without changing the map height or shrinking the primary add target. */
    .basket-mode.spots-v1-form #basketSearchResults {
        order: 6;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 12px calc(var(--mobile-basket-summary-height) + 24px + var(--basket-safe-bottom));
        background: #fff;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        scroll-padding-bottom: calc(var(--mobile-basket-summary-height) + 24px + var(--basket-safe-bottom));
    }

    .basket-mode.spots-v1-form #basketProviderAttribution {
        order: 7;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) 44px;
        min-height: 66px;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 6px 0;
        overflow: visible;
        border-bottom: 1px solid #e5eaf1;
        background: #fff;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-item.is-selected,
    .basket-mode.spots-v1-form #basketSearchResults .result-item.selected {
        margin: 0 -12px;
        padding-right: 12px;
        padding-left: 12px;
        background: #f7faff;
        box-shadow: inset 3px 0 0 #3568e8;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-thumb {
        width: 52px;
        height: 52px;
        border-radius: 11px;
        background: #edf1f6;
        object-fit: cover;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-info {
        min-width: 0;
        align-self: center;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-name,
    .basket-mode.spots-v1-form #basketSearchResults .basket-result-name {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 5px;
        margin: 0;
        overflow: hidden;
        color: #111827;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .basket-mode.spots-v1-form #basketSearchResults .food-result-name-text,
    .basket-mode.spots-v1-form #basketSearchResults .basket-result-name-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-desc,
    .basket-mode.spots-v1-form #basketSearchResults .basket-result-meta {
        margin: 2px 0 0;
        overflow: hidden;
        color: #6b7280;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .basket-mode.spots-v1-form #basketSearchResults .basket-result-proximity,
    .basket-mode.spots-v1-form #basketSearchResults .result-walk,
    .basket-mode.spots-v1-form #basketSearchResults .result-distance {
        margin-top: 3px;
        overflow: hidden;
        color: #344155;
        font-size: 11px;
        font-weight: 850;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .basket-mode.spots-v1-form #basketSearchResults .basket-result-proximity strong,
    .basket-mode.spots-v1-form #basketSearchResults .result-walk strong,
    .basket-mode.spots-v1-form #basketSearchResults .result-distance strong {
        color: #2563eb;
    }

    .basket-mode.spots-v1-form #basketSearchResults .basket-result-open-status.is-open {
        color: #158451;
    }

    .basket-mode.spots-v1-form #basketSearchResults .basket-result-open-status.is-closed {
        color: #c2410c;
    }

    .basket-mode.spots-v1-form #basketSearchResults .basket-result-open-status.is-unknown {
        color: #8992a1;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-tags,
    .basket-mode.spots-v1-form #basketSearchResults .result-meta-row {
        margin-top: 4px;
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-action-stack {
        width: 44px;
        min-width: 44px;
        align-self: center;
        gap: 0;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-add-btn {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border: 1px solid #d9e1ec;
        border-radius: 12px;
        background: #fff;
        color: #3568e8;
        font-size: 25px;
        font-weight: 400;
        line-height: 1;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-add-btn.is-added,
    .basket-mode.spots-v1-form #basketSearchResults .result-add-btn[aria-pressed="true"] {
        border-color: #3568e8;
        background: #3568e8;
        color: #fff;
        font-size: 17px;
        font-weight: 900;
    }

    .basket-mode.spots-v1-form #basketSearchResults .result-info-btn {
        display: none;
    }

    /* 6. Fixed basket summary dock */
    .basket-mode.spots-v1-form[data-spots-v1-panel="search"] .mobile-basket-summary-bar,
    .basket-mode.spots-v1-form.mobile-map-expanded .mobile-basket-summary-bar {
        position: absolute;
        right: max(10px, var(--basket-safe-right));
        bottom: max(8px, var(--basket-safe-bottom));
        left: max(10px, var(--basket-safe-left));
        z-index: 165;
        display: flex;
        min-width: 0;
        min-height: var(--mobile-basket-summary-height);
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: #17233c;
        color: #fff;
        box-shadow: 0 12px 28px rgba(16, 27, 48, 0.32);
    }

    .mobile-basket-summary-icon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #263653;
        color: #8db4ff;
    }

    .mobile-basket-summary-icon svg {
        width: 22px;
        height: 22px;
    }

    .mobile-basket-summary-copy {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        line-height: 1.2;
    }

    .mobile-basket-summary-copy strong,
    .mobile-basket-summary-copy > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-basket-summary-copy strong {
        color: #fff;
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-basket-summary-copy > span {
        margin-top: 2px;
        color: #cbd3df;
        font-size: 10px;
        font-weight: 600;
    }

    .mobile-basket-view-btn {
        min-width: 104px;
        min-height: 42px;
        flex: 0 0 auto;
        padding: 0 12px;
        border: 0;
        border-radius: 12px;
        background: #3568e8;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.15;
        cursor: pointer;
    }

    /* Expanded map keeps the single root canvas and hides only the list shell.
       The normal mobile container starts below the 75px top navigation. Move
       the container itself to the viewport origin while expanded so the map
       cannot inherit an empty strip above it. */
    .basket-mode.spots-v1-form.mobile-map-expanded {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded .basket-mode-map,
    .basket-mode.spots-v1-form.mobile-map-expanded .basket-mode-map.mapboxgl-map {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded #searchSidebar {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        overflow: visible;
        background: transparent;
        pointer-events: none;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded .spots-v1-panel-content,
    .basket-mode.spots-v1-form.mobile-map-expanded #sectionSearch.active {
        position: absolute;
        inset: 0;
        display: block;
        overflow: visible;
        pointer-events: none;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded #sectionSearch > :not(#mobileBasketMapViewport),
    .basket-mode.spots-v1-form.mobile-map-expanded #searchSidebar > :not(.spots-v1-panel-content) {
        display: none !important;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded #mobileBasketMapViewport {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        pointer-events: none;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded .mobile-basket-map-overlay {
        position: absolute;
        right: 12px;
        bottom: calc(var(--mobile-basket-summary-height) + max(16px, var(--basket-safe-bottom)) + 48px);
        left: 12px;
    }

    .basket-mode.spots-v1-form.mobile-map-expanded .basket-mode-map .mapboxgl-ctrl-bottom-left,
    .basket-mode.spots-v1-form.mobile-map-expanded .basket-mode-map .mapboxgl-ctrl-bottom-right {
        bottom: calc(var(--mobile-basket-summary-height) + max(16px, var(--basket-safe-bottom))) !important;
    }

    .basket-mode.spots-v1-form :is(
        .cat-chip,
        .mobile-basket-map-toggle,
        .basket-day-target-trigger,
        .result-add-btn,
        .mobile-basket-view-btn
    ):focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.38);
        outline-offset: 2px;
    }
}

@media (max-width: 360px) {
    .basket-mode.spots-v1-form .mobile-basket-list-toolbar {
        gap: 5px;
        padding-inline: 9px;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar .mobile-basket-origin {
        padding-inline: 7px;
    }

    .basket-mode.spots-v1-form .mobile-basket-list-toolbar #addTargetText {
        display: none;
    }

    .mobile-basket-summary-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .mobile-basket-summary-copy > span {
        display: none;
    }

    .mobile-basket-view-btn {
        min-width: 94px;
        padding-inline: 9px;
        font-size: 11px;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .basket-mode.spots-v1-form #searchSidebar,
    .basket-mode.spots-v1-form .basket-mode-map,
    .basket-mode.spots-v1-form .mobile-basket-map-toggle,
    .basket-mode.spots-v1-form #basketSearchResults .result-item {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}