/* ChargeMap.css — v6.x.5
   充電地圖:fullscreen map + filter tab + 浮動 search + bottom-sheet popup
   tokens 從 v6x5.css 來 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--type-display);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom));
}

/* ==========================================================
   Map area (fills viewport above bottom-tab)
   ========================================================== */
#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--tab-height) + env(safe-area-inset-bottom));
    width: 100%;
    height: auto;
    background: #e8e9eb;
}

/* ==========================================================
   Bottom-bar (filter tabs + search)
   ========================================================== */
.bottom-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(var(--tab-height) + 12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    box-shadow: 0 10px 28px rgba(20, 30, 22, 0.15);
    padding: 10px 12px 12px;
    z-index: 10;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.bottom-bar.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.charge-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: var(--bg);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin-bottom: 10px;
}

.option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

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

.option svg {
    width: 14px;
    height: 14px;
}

.option:hover { color: var(--brand); }

.option.is_active {
    background: var(--brand);
    color: white;
    box-shadow: 0 2px 8px rgba(31, 157, 62, 0.32);
}

.option.is_active svg { color: white; }

.search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: var(--bg);
    border-radius: var(--radius-pill);
}

.search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    padding: 8px 4px;
    outline: none;
    -webkit-appearance: none;
}

.search-bar input::placeholder { color: var(--ink-soft); }

.search-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card);
    border: 0;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.12s var(--ease-out);
}

.search-button:hover { background: var(--line); }

.search-button svg { width: 16px; height: 16px; }

/* ==========================================================
   v6.x.5e — 最高功率 / 每度電費 chip row
   從 Home sheet 篩選帶 URL params (?maxKw=7&maxPrice=6) → JS init 套 is_active
   ========================================================== */
.filter_chip_row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter_chip_row::-webkit-scrollbar { display: none; }

.filter_chip_label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    margin-right: 2px;
    text-transform: uppercase;
}

.filter_chip {
    flex: 0 0 auto;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-mid);
    cursor: pointer;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
    white-space: nowrap;
}

.filter_chip:active { background: var(--line); }

.filter_chip.is_active {
    background: var(--brand-tint);
    color: var(--brand-deep);
    border-color: var(--brand);
}

.filter_chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ==========================================================
   Bottom-sheet info popup
   ========================================================== */
#info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--tab-height) + 12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -10px 32px rgba(20, 30, 22, 0.18);
    z-index: 20;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.36s var(--ease-out), opacity 0.28s var(--ease-out);
    padding: 0;
    border: 1px solid var(--line-soft);
    border-bottom: 0;
}

#info.visible {
    transform: translateY(0);
    opacity: 1;
}

#info::-webkit-scrollbar { width: 4px; }
#info::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}

#info .info_handle {
    width: 44px;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 8px auto;
    display: block;
}

#info .info_close {
    position: sticky;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 0;
    color: var(--ink-mid);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 12px;
    margin-top: -36px;
    z-index: 2;
}

#info .info_close:hover { background: var(--line); }

/* ==========================================================
   Station info content (v6.x.5)
   ========================================================== */
.MapStationInfo {
    padding: 8px 20px 28px;
    color: var(--ink);
}

.info_head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 0 16px;
    border-bottom: 1px solid var(--line-soft);
}

.info_pin {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-tint);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info_pin svg { width: 22px; height: 22px; }

.info_title_block {
    flex: 1;
    min-width: 0;
}

.info_title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.info_address {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 4px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.info_pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.info_pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--card-soft);
    color: var(--ink-mid);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.info_pill.pill_charge {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.info_pill.pill_alert {
    background: #fff4dc;
    color: #8a5a00;
}

.info_pill svg { width: 12px; height: 12px; }

/* Quick stats card */
.stat_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.stat_chip {
    background: var(--card-soft);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    text-align: center;
}

.stat_chip .k {
    font-size: 10px;
    color: var(--ink-soft);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stat_chip .v {
    font-family: var(--type-mono);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-deep);
    margin-top: 2px;
    letter-spacing: -0.02em;
}

.stat_chip .v.muted { color: var(--ink-soft); }

.stat_chip .u {
    font-size: 10px;
    color: var(--ink-soft);
    margin-left: 2px;
    font-weight: 600;
}

/* Action buttons row */
.info_actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.btn_action {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    transition: transform 0.1s var(--ease-out), background-color 0.12s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.btn_action:active { transform: scale(0.98); }

.btn_navigate {
    background: var(--brand);
    color: white;
    box-shadow: 0 4px 14px rgba(31, 157, 62, 0.3);
}

.btn_navigate:hover { background: var(--brand-deep); }

.btn_navigate svg { width: 16px; height: 16px; }

.btn_scan_here {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.btn_scan_here:hover { background: var(--brand); color: white; }

.btn_scan_here svg { width: 16px; height: 16px; }

/* Pile cards section */
.pile_section {
    margin-top: 16px;
}

.pile_section_title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.pile_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pile_card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.pile_card .pile_img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pile_card .pile_img img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.pile_card .pile_info {
    flex: 1;
    min-width: 0;
}

.pile_card .pile_id {
    font-family: var(--type-mono);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    word-break: break-all;
}

.pile_card .pile_meta {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

.pile_card .pile_price {
    font-family: var(--type-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-deep);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pile_status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pile_status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status_available { background: var(--brand-tint); color: var(--brand-deep); }
.status_charging { background: #fff4dc; color: #8a5a00; }
.status_faulted { background: #fff0ec; color: #b53a20; }
.status_maintenance { background: #ecedf0; color: #595d65; }
.status_unknown { background: var(--card-soft); color: var(--ink-soft); }

/* Description */
.info_description {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--card-soft);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.info_description.empty { display: none; }

/* Footer link */
.info_footer {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--card-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-soft);
}

.info_link {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    word-break: break-all;
}

.info_link:hover { text-decoration: underline; }

.info_refresh {
    background: transparent;
    border: 0;
    color: var(--brand);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}

.info_refresh svg {
    width: 12px;
    height: 12px;
}

.info_refresh.is_spinning svg {
    animation: spin 1s linear infinite;
}

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

/* Loading skeleton */
.info_skeleton {
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info_skeleton .bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--card-soft) 25%, var(--line) 50%, var(--card-soft) 75%);
    background-size: 200% 100%;
    animation: skelShine 1.4s ease-in-out infinite;
}

.info_skeleton .bar:nth-child(2) { width: 65%; }
.info_skeleton .bar:nth-child(3) { width: 50%; height: 12px; }
.info_skeleton .bar:nth-child(4) { width: 80%; }
.info_skeleton .bar:nth-child(5) { width: 60%; height: 28px; border-radius: 12px; }

@keyframes skelShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty / error state */
.info_message {
    padding: 36px 20px;
    text-align: center;
    color: var(--ink-soft);
}

.info_message svg {
    width: 36px;
    height: 36px;
    color: var(--ink-soft);
    opacity: 0.5;
    margin-bottom: 10px;
}

.info_message .title {
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .bottom-bar,
    #info,
    .info_refresh,
    .info_skeleton .bar,
    .scan_dot {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 360px) {
    .info_pin { width: 40px; height: 40px; }
    .info_title { font-size: 16px; }
    .stat_chip .v { font-size: 16px; }
    .pile_card { padding: 10px 12px; }
}