/* Full-screen season ticket picker.
 *
 * Chrome is hidden by body.pbo-season-screen in the child theme; this file
 * owns the panel itself. It uses the same LV tokens as checkout and the
 * member centre, declared here with the same values so the picker looks
 * right even on a page that does not load myaccount.css.
 *
 * The panel is position: fixed rather than stretched with min-height. An
 * earlier attempt elsewhere in this project to control full-screen height
 * through #main-container's min-height collapsed the page instead.
 */

.pbo-pick {
    --lv-bg: #ffffff;
    --lv-bg-alt: #f7f7f7;
    --lv-text: #1a1a1a;
    --lv-text-light: #666666;
    --lv-text-muted: #999999;
    --lv-accent: #f26522;
    --lv-accent-hover: #e05a1c;
    --lv-border: #e5e5e5;
    --lv-border-dark: #cccccc;
    --lv-radius: 4px;
    --lv-transition: 0.2s ease;
    --pbo-wood: #c9a06a;
    --pbo-wood-edge: #8b6914;
    --pbo-sold: #c0392b;
    --pbo-sold-edge: #96271b;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--lv-bg);
    color: var(--lv-text);
    font-size: 16px;
}

/* Same reason .pbo-box needs this: .pbo-seats { display: grid } and
   .pbo-pick__back { display: inline-flex } both beat the UA [hidden]
   rule, so 返回全場 would run JS and leave the seat grid on screen. */
.pbo-pick [hidden] {
    display: none !important;
}

/* ---------- closed / login panel ---------- */

.pbo-pick--message {
    align-items: stretch;
}

.pbo-pick--message .pbo-pick__bar {
    justify-content: flex-start;
}

.pbo-pick--message .pbo-pick__panel {
    margin: auto;
}

.pbo-pick__panel {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.pbo-pick__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--lv-accent);
    display: inline-block;
}

.pbo-pick__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pbo-pick__lead,
.pbo-pick__notice {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--lv-text-light);
    margin: 0 0 28px;
}

/* ---------- top bar ---------- */

.pbo-pick__bar {
    flex: 0 0 auto;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    border-bottom: 1px solid var(--lv-border);
    background: var(--lv-bg);
    flex-wrap: nowrap;
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.05);
    z-index: 2;
}

.pbo-pick__bar-main,
.pbo-pick__bar-side {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    min-width: 0;
}

.pbo-pick__logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 140px;
    object-fit: contain;
    flex: 0 0 auto;
}

.pbo-pick__season {
    font-size: 0.9375rem;
    letter-spacing: 0.5px;
    color: var(--lv-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pbo-pick__step {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--lv-text);
    white-space: nowrap;
}

.pbo-pick__hint {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 24px;
    font-size: 0.875rem;
    color: var(--lv-text-light);
    background: var(--lv-bg-alt);
}

.pbo-pick__games {
    flex: 0 0 auto;
    padding: 10px 24px;
    border-bottom: 1px solid var(--lv-border);
    background: var(--lv-bg);
}

.pbo-pick__games-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pbo-pick__games-label {
    font-size: 0.8125rem;
    color: var(--lv-text-muted);
    white-space: nowrap;
}

.pbo-pick__games-preview {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    flex: 1 1 auto;
    min-width: 0;
}

.pbo-pick__games-preview li,
.pbo-pick__games-full li {
    font-size: 0.875rem;
    color: var(--lv-text);
    font-variant-numeric: tabular-nums;
}

.pbo-pick__games-full {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--lv-border);
    display: grid;
    gap: 6px;
}

.pbo-pick__games-full li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pbo-pick__games-full li.is-done {
    color: var(--lv-text-muted);
}

.pbo-pick__games .pbo-pick__exit {
    padding: 9px 14px;
    min-height: 36px;
}

/* ---------- buttons: outlined, same shape as cart and checkout ---------- */

.pbo-pick__btn,
.pbo-pick__back,
.pbo-pick__exit,
.pbo-pick__drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--lv-text);
    border-radius: var(--lv-radius);
    background: var(--lv-text);
    color: var(--lv-bg);
    transition: background var(--lv-transition), color var(--lv-transition), border-color var(--lv-transition);
}

.pbo-pick__btn:hover:not(:disabled) {
    background: var(--lv-accent);
    border-color: var(--lv-accent);
    color: var(--lv-bg);
}

.pbo-pick__btn:disabled,
.pbo-pick__btn.is-loading {
    opacity: 0.5;
    cursor: default;
}

.pbo-pick__btn[data-pbo-go] {
    padding: 14px 40px;
    font-size: 1rem;
}

.pbo-pick__btn .ct-button-loader {
    display: none;
    width: 13px;
    height: 13px;
    margin-right: 10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pbo-spin 0.6s linear infinite;
}

.pbo-pick__btn.is-loading .ct-button-loader {
    display: inline-block;
}

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

.pbo-pick__back,
.pbo-pick__exit,
.pbo-pick__btn--ghost,
.pbo-pick__drop {
    background: var(--lv-bg);
    color: var(--lv-text);
    border-color: var(--lv-border-dark);
}

.pbo-pick__back:hover,
.pbo-pick__exit:hover,
.pbo-pick__btn--ghost:hover,
.pbo-pick__drop:hover {
    border-color: var(--lv-text);
    color: var(--lv-accent);
}

.pbo-pick__drop {
    padding: 9px 14px;
    font-size: 0.8125rem;
    min-height: 36px;
    line-height: 1;
}

.pbo-pick__drop--zone {
    border-color: var(--lv-accent);
    color: var(--lv-accent);
}

.pbo-pick__drop--zone:hover {
    background: #fff7f2;
    border-color: var(--lv-accent);
    color: var(--lv-accent-hover);
}

.pbo-pick__drop--danger {
    border-color: var(--pbo-sold);
    color: var(--pbo-sold);
}

.pbo-pick__drop--danger:hover {
    background: #fff5f5;
    border-color: var(--pbo-sold-edge);
    color: var(--pbo-sold-edge);
}

/* ---------- stage ---------- */

.pbo-pick__stage {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
}

.pbo-pick__boot {
    display: none;
}

.pbo-pick.is-booting .pbo-pick__overview,
.pbo-pick.is-booting [data-pbo-detail] {
    visibility: hidden;
}

.pbo-pick.is-booting .pbo-pick__boot {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 6;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--lv-bg);
    color: var(--lv-text-light);
    font-size: 0.875rem;
}

.pbo-pick__boot .ct-button-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--lv-border);
    border-top-color: var(--lv-accent);
    border-radius: 50%;
    animation: pbo-spin 0.6s linear infinite;
}

.pbo-pick[data-pbo-view="overview"] .pbo-pick__stage {
    overflow: hidden;
    display: flex;
    min-height: 0;
    padding: 0;
}

.pbo-pick__overview {
    --pbo-nav-w: 300px;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "nav map";
    gap: 0;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    transition: grid-template-columns var(--lv-transition);
}

.pbo-pick__map-bar {
    display: none;
}

.pbo-pick__nav-wrap {
    grid-area: nav;
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--lv-border);
    padding: 18px 20px 8px;
}

.pbo-pick__nav-toggle {
    position: absolute;
    top: 50%;
    left: var(--pbo-nav-w);
    z-index: 3;
    width: 28px;
    min-width: 28px;
    min-height: 36px;
    padding: 6px 0;
    transform: translate(-50%, -50%);
    transition: left var(--lv-transition);
}

.pbo-pick__nav-arrow {
    display: inline-block;
    transition: transform var(--lv-transition);
}

.pbo-pick.is-nav-closed {
    --pbo-nav-w: 0px;
}

.pbo-pick.is-nav-closed .pbo-pick__overview {
    grid-template-columns: 0 minmax(0, 1fr);
}

.pbo-pick.is-nav-closed .pbo-pick__nav-wrap {
    padding-left: 0;
    padding-right: 0;
    border-right-width: 0;
}

.pbo-pick.is-nav-closed .pbo-pick__nav-toggle {
    left: 14px;
    transform: translate(0, -50%);
}

.pbo-pick.is-nav-closed .pbo-pick__nav-arrow {
    transform: rotate(180deg);
}

.pbo-pick__nav {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px 2px 28px;
    direction: rtl;
    scrollbar-gutter: stable;
}

.pbo-pick__nav-group {
    direction: ltr;
    margin: 0 0 20px;
}

.pbo-pick__nav-wrap.has-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 36px;
    background: linear-gradient(transparent, var(--lv-bg));
    pointer-events: none;
}

.pbo-pick__nav-more {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 0 0;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-align: center;
    color: var(--lv-text-muted);
}

.pbo-pick__nav-more::after {
    content: " ↓";
}

.pbo-pick__map {
    grid-area: map;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
}

.pbo-pick__map-head,
.pbo-pick__map-hint {
    display: none;
}

.pbo-pick__map-port {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-bg-alt);
}

.pbo-pick__overview .pbo-bowl {
    width: 100%;
    min-width: 880px;
    height: auto;
    display: block;
}

.pbo-pick__nav-group:last-child {
    margin-bottom: 0;
}

.pbo-pick__nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lv-text);
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-bg);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 6px 16px rgba(26, 26, 26, 0.04);
}

.pbo-pick__nav-title::-webkit-details-marker {
    display: none;
}

.pbo-pick__nav-title::after {
    content: "+";
    font-size: 0.875rem;
    line-height: 1;
}

.pbo-pick__nav-group[open] > .pbo-pick__nav-title {
    margin-bottom: 10px;
}

.pbo-pick__nav-group[open] > .pbo-pick__nav-title::after {
    content: "−";
}

.pbo-pick__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pbo-pick__nav-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name price"
        "name remain";
    align-items: center;
    column-gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    background: var(--lv-bg);
    color: var(--lv-text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 8px 20px rgba(26, 26, 26, 0.05);
}

.pbo-pick__nav-item:hover,
.pbo-pick__nav-item.is-hot {
    border-color: var(--lv-text);
    box-shadow: 0 2px 6px rgba(26, 26, 26, 0.08), 0 12px 28px rgba(26, 26, 26, 0.08);
}

.pbo-pick__nav-item.is-soldout .pbo-pick__nav-price {
    color: var(--pbo-sold);
}

.pbo-pick__nav-item.is-soldout .pbo-pick__nav-go,
.pbo-pick__nav-item.is-closed .pbo-pick__nav-go {
    display: none;
}

.pbo-pick__nav-item.is-closed {
    opacity: 0.55;
    cursor: default;
}

.pbo-pick__nav-item.is-closed .pbo-pick__nav-price {
    color: var(--lv-text-muted);
}

.pbo-pick__nav-name {
    grid-area: name;
    font-size: 1rem;
    font-weight: 700;
}

.pbo-pick__nav-price {
    grid-area: price;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lv-accent);
    font-variant-numeric: tabular-nums;
}

.pbo-pick__nav-left {
    grid-area: remain;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lv-text-light);
    font-variant-numeric: tabular-nums;
}

.pbo-pick__nav-go {
    display: none;
}

.pbo-pick .pbo-locator {
    border-color: var(--lv-border);
    border-radius: var(--lv-radius);
}

.pbo-pick .pbo-seats__grid {
    user-select: none;
    touch-action: none;
}

.pbo-pick__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    margin: 0;
    padding: 14px 24px;
    font-size: 0.875rem;
    color: var(--lv-text-light);
}

.pbo-pick__legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pbo-pick__chip {
    width: 18px;
    height: 18px;
    border: 1px solid var(--lv-text);
    border-radius: var(--lv-radius);
    background: var(--lv-bg);
}

.pbo-pick__chip--low {
    background: var(--lv-bg);
    border: 2px solid var(--lv-accent);
}

.pbo-pick__chip--mine {
    background: var(--lv-accent);
    border-color: var(--lv-accent);
}

.pbo-pick__chip--held {
    background: #d6d3d1;
    border-color: #a8a29e;
}

.pbo-pick__chip--sold {
    background: var(--pbo-sold);
    border-color: var(--pbo-sold-edge);
}

.pbo-pick__chip--sold-dark {
    background: #57534e;
    border-color: #44403c;
}

.pbo-pick__chip--price {
    background: var(--pbo-sec, var(--lv-bg));
    border-color: var(--lv-border-dark);
}

.pbo-pick__chip--closed,
.pbo-pick__chip--blocked {
    background: repeating-linear-gradient(45deg, #fff 0 4px, #e11d48 4px 7px);
    border-color: var(--lv-border-dark);
}

.pbo-pick .pbo-bowl__guide {
    display: none;
}

.pbo-pick .pbo-wedge__left {
    font-size: 16px;
    font-weight: 600;
    fill: var(--lv-text-light);
    stroke: #fff;
    stroke-width: 4px;
    paint-order: stroke;
}

.pbo-pick .pbo-wedge.is-open polygon {
    fill: color-mix(in srgb, var(--pbo-sec, #f26522) 22%, #ffffff);
    stroke: var(--pbo-sec, var(--lv-text));
}

.pbo-pick .pbo-wedge.is-open:hover polygon,
.pbo-pick .pbo-wedge.is-open:focus polygon,
.pbo-pick .pbo-wedge.is-low:hover polygon,
.pbo-pick .pbo-wedge.is-low:focus polygon {
    fill: color-mix(in srgb, var(--pbo-sec, #f26522) 36%, #ffffff);
    stroke: var(--pbo-sec, var(--lv-accent));
    stroke-width: 3;
}

.pbo-pick .pbo-wedge.is-low polygon {
    fill: color-mix(in srgb, var(--pbo-sec, #f26522) 22%, #ffffff);
    stroke: var(--pbo-sec, var(--lv-accent));
    stroke-width: 2;
}

.pbo-pick .pbo-bowl__court--wood .pbo-bowl__court-floor {
    fill: var(--pbo-wood);
    stroke: var(--pbo-wood-edge);
    stroke-width: 2;
}

.pbo-pick .pbo-bowl__court-lines,
.pbo-pick .pbo-bowl__court-crest {
    pointer-events: none;
}

.pbo-pick .pbo-bowl__court-lines g {
    stroke: var(--pbo-wood-edge);
}

.pbo-pick .pbo-locator__court rect {
    fill: var(--pbo-wood);
    stroke: var(--pbo-wood-edge);
}

.pbo-pick .pbo-locator__court text {
    fill: var(--pbo-wood-edge);
    font-size: 36px;
}

.pbo-pick .pbo-locator__sec {
    fill: color-mix(in srgb, var(--pbo-sec, #d6d3d1) 28%, #ffffff);
    stroke: var(--pbo-sec, #44403c);
}

.pbo-pick .pbo-locator__sec.is-on {
    fill: var(--pbo-sec, var(--lv-accent));
    stroke: var(--pbo-sec, var(--lv-accent));
}

.pbo-pick .pbo-wedge.is-soldout polygon {
    fill: var(--pbo-sold);
    stroke: var(--pbo-sold-edge);
}

.pbo-pick .pbo-wedge.is-soldout .pbo-wedge__code,
.pbo-pick .pbo-wedge.is-soldout .pbo-wedge__left {
    fill: #ffffff;
    stroke: var(--pbo-sold);
}

.pbo-pick .pbo-wedge.is-closed polygon {
    fill: url(#pbo-hatch);
    stroke: var(--lv-border-dark);
}

.pbo-pick .pbo-wedge--bench,
.pbo-pick .pbo-wedge--bench.is-closed,
.pbo-pick .pbo-wedge--bench.is-soldout {
    cursor: default;
    pointer-events: none;
}

.pbo-pick .pbo-wedge--bench polygon,
.pbo-pick .pbo-wedge--bench.is-closed polygon,
.pbo-pick .pbo-wedge--bench.is-soldout polygon {
    fill: var(--pbo-sec, #64748b);
    fill-opacity: 0.9;
    stroke: #334155;
}

.pbo-pick .pbo-wedge.is-closed .pbo-wedge__code,
.pbo-pick .pbo-wedge.is-closed .pbo-wedge__left {
    fill: var(--lv-text-muted);
    stroke: #f5f5f4;
}

.pbo-pick .pbo-wedge.is-hot polygon {
    fill: #fff7f2;
    stroke: var(--lv-accent);
    stroke-width: 3;
}

.pbo-pick .pbo-wedge.is-hot.is-soldout polygon {
    fill: var(--pbo-sold);
    stroke: var(--pbo-sold-edge);
}

.pbo-pick .pbo-seats__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.pbo-pick .pbo-seats__head-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.pbo-pick .pbo-seats__head-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.pbo-pick .pbo-seats__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.pbo-pick__price {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lv-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pbo-pick .pbo-seats__rail {
    border-color: #9ab6d6;
    background: #eef4fb;
    color: #1f4c80;
    border-radius: var(--lv-radius);
}

.pbo-pick .pbo-seat {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.pbo-pick .pbo-seats__block {
    gap: 4px;
}

.pbo-pick .pbo-seats--aisle-left .pbo-seats__block--left,
.pbo-pick .pbo-seats--center .pbo-seats__block--left {
    width: calc(13 * 28px + 12 * 4px);
}

.pbo-pick .pbo-seats--aisle-left .pbo-seats__block--right {
    width: calc(12 * 28px + 11 * 4px);
}

.pbo-pick .pbo-seats--aisle-right .pbo-seats__block--left {
    width: calc(12 * 28px + 11 * 4px);
}

.pbo-pick .pbo-seats--aisle-right .pbo-seats__block--right,
.pbo-pick .pbo-seats--center .pbo-seats__block--right {
    width: calc(13 * 28px + 12 * 4px);
}

.pbo-pick .pbo-seats--orange .pbo-seats__block--left,
.pbo-pick .pbo-seats--orange .pbo-seats__block--right {
    width: calc(4 * 28px + 3 * 4px);
}

.pbo-pick__seat-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--lv-text-light);
}

.pbo-pick__seat-legend--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pbo-pick .pbo-seats__head-row .pbo-pick__seat-legend-title {
    margin: 0;
}

.pbo-pick__seat-legend-title {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lv-text-muted);
    white-space: nowrap;
}

.pbo-pick__seat-legend span,
.pbo-pick__seat-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pbo-pick__seat-legend .pbo-pick__chip {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.pbo-pick__seat-legend--row .pbo-pick__chip {
    width: 16px;
    height: 16px;
}

.pbo-pick__mini {
    margin-top: 16px;
}

.pbo-pick__mini-title {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lv-text-muted);
    margin: 0 0 8px;
}

.pbo-pick__mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pbo-pick__mini-list li {
    padding: 8px 10px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    font-size: 0.8125rem;
}

.pbo-pick__mini-empty,
.pbo-pick__mini-more {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--lv-text-muted);
}

.pbo-pick__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--lv-text);
    font-size: 0.8125rem;
}

.pbo-pick__check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.pbo-pick__check span::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: var(--lv-radius);
    border: 1.5px solid var(--lv-border);
    background: var(--lv-bg);
    box-sizing: border-box;
}

.pbo-pick__check input:checked + span::before {
    background-color: var(--lv-accent);
    border-color: var(--lv-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
}

.pbo-pick__seat-tools,
.pbo-pick__locator-head {
    display: none;
}

.pbo-pick.is-only-available .pbo-pick-seat:not(.is-available):not(.is-mine) {
    visibility: hidden;
}

/* ---------- seats ---------- */

.pbo-pick-seat {
    border-color: var(--lv-border-dark);
    color: var(--lv-text);
    user-select: none;
    touch-action: none;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.08);
    transition: box-shadow var(--lv-transition), transform var(--lv-transition), background var(--lv-transition);
}

.pbo-pick-seat.is-loading {
    background: var(--lv-bg-alt);
    border-color: var(--lv-border);
    color: var(--lv-text-muted);
}

.pbo-pick-seat.is-available {
    background: var(--lv-bg);
    border-color: var(--lv-text);
}

.pbo-pick-seat.is-available:hover {
    border-width: 2px;
    border-color: var(--lv-accent);
}

.pbo-pick-seat:focus-visible {
    outline: 2px solid var(--lv-accent);
    outline-offset: 2px;
}

.pbo-pick-seat.is-mine {
    background: var(--lv-accent);
    border-color: var(--lv-accent);
    color: var(--lv-bg);
}

.pbo-pick-seat.is-held {
    background: #d6d3d1;
    border-color: #a8a29e;
    color: #57534e;
    cursor: default;
}

.pbo-pick-seat.is-sold {
    background: #57534e;
    border-color: #44403c;
    color: #fafaf9;
    cursor: default;
}

.pbo-pick-seat.is-closed,
.pbo-pick-seat.is-blocked {
    visibility: hidden;
    pointer-events: none;
}

/* ---------- basket ---------- */

.pbo-pick__basket {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    border-top: 1px solid var(--lv-border);
    background: var(--lv-bg);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.pbo-pick__basket-seats {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pbo-pick__basket-label {
    font-size: 0.9375rem;
    color: var(--lv-text-muted);
}

.pbo-pick__basket-count {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pbo-pick__basket-toggle {
    padding: 4px 6px;
    border: 0;
    background: none;
    font-size: 0.9375rem;
    color: var(--lv-text-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pbo-pick__basket-toggle:hover {
    color: var(--lv-accent);
}

.pbo-pick__basket-sum {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

.pbo-pick__timer,
.pbo-pick__total {
    font-size: 0.9375rem;
    color: var(--lv-text-light);
    font-variant-numeric: tabular-nums;
}

.pbo-pick__timer.is-urgent strong {
    color: var(--lv-accent);
}

.pbo-pick__total strong {
    font-size: 1.5rem;
    color: var(--lv-text);
}

.pbo-pick__toast {
    position: fixed;
    left: 50%;
    bottom: 140px;
    transform: translateX(-50%);
    margin: 0;
    padding: 12px 20px;
    max-width: min(90vw, 480px);
    font-size: 0.875rem;
    background: var(--lv-text);
    color: var(--lv-bg);
    border-radius: var(--lv-radius);
    z-index: 4;
}

.pbo-pick__sheet {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 24px 96px;
}

.pbo-pick__sheet-back {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(26, 26, 26, 0.45);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--lv-transition);
}

.pbo-pick.is-sheet-open .pbo-pick__sheet-back {
    opacity: 1;
}

.pbo-pick__sheet-card {
    position: relative;
    width: min(460px, 100%);
    max-height: min(620px, 80vh);
    display: flex;
    flex-direction: column;
    background: var(--lv-bg);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    box-shadow: 0 16px 48px rgba(26, 26, 26, 0.18);
    transform: translateX(28px);
    opacity: 0;
    transition: transform var(--lv-transition), opacity var(--lv-transition);
}

.pbo-pick.is-sheet-open .pbo-pick__sheet-card {
    transform: none;
    opacity: 1;
}

.pbo-pick__sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lv-border);
}

.pbo-pick__sheet-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pbo-pick__sheet-brand .pbo-pick__logo {
    width: 36px;
    height: 36px;
}

.pbo-pick__sheet-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
}

.pbo-pick__sheet-count {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--lv-text-light);
}

.pbo-pick__sheet-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pbo-pick__sheet-body {
    overflow: auto;
    padding: 12px 18px 18px;
}

.pbo-pick__sheet-foot {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--lv-border);
}

.pbo-pick__sheet-foot .pbo-pick__btn {
    flex: 1 1 auto;
    padding: 14px;
}

.pbo-pick__sheet-empty {
    margin: 24px 0;
    text-align: center;
    color: var(--lv-text-light);
}

.pbo-pick__sheet-sec {
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--lv-border);
}

.pbo-pick__sheet-sec:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.pbo-pick__sheet-sec-head,
.pbo-pick__sheet-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pbo-pick__sheet-sec-head h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.pbo-pick__sheet-sec-head p {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--lv-text-light);
}

.pbo-pick__sheet-row {
    margin-top: 12px;
}

.pbo-pick__sheet-row-head {
    font-size: 0.9375rem;
    color: var(--lv-text);
    margin-bottom: 8px;
}

.pbo-pick__sheet-row ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pbo-pick__sheet-row li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    font-size: 0.875rem;
}

@media (min-width: 801px) {
    .pbo-pick.is-sheet-open .pbo-pick__sheet {
        z-index: 20;
        padding: 0;
        align-items: stretch;
        justify-content: flex-end;
    }

    .pbo-pick.is-sheet-open .pbo-pick__sheet-card {
        width: 360px;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border-width: 0 0 0 1px;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
    }
}

/* ---------- mobile ---------- */

@media (max-width: 800px) {
    .pbo-pick__bar {
        height: 56px;
        padding: 0 12px;
        gap: 8px;
    }

    .pbo-pick__bar-main,
    .pbo-pick__bar-side {
        gap: 8px;
    }

    .pbo-pick__logo {
        width: auto;
        height: 28px;
        max-width: 110px;
    }

    .pbo-pick__nav-toggle,
    .pbo-pick.is-nav-closed .pbo-pick__nav-toggle {
        display: none !important;
    }

    .pbo-pick.is-nav-closed {
        --pbo-nav-w: 100%;
    }

    .pbo-pick.is-nav-closed .pbo-pick__overview {
        grid-template-columns: 1fr;
        grid-template-areas:
            "bar"
            "nav";
    }

    .pbo-pick.is-nav-closed .pbo-pick__nav-wrap {
        padding: 14px 12px 8px;
        border-right-width: 0;
    }

    .pbo-pick__season {
        font-size: 0.75rem;
    }

    .pbo-pick__season-word {
        display: none;
    }

    .pbo-pick[data-pbo-view="detail"] .pbo-pick__season {
        display: none;
    }

    .pbo-pick__step {
        font-size: 0.9375rem;
    }

    .pbo-pick__back,
    .pbo-pick__exit,
    .pbo-pick__map-bar .pbo-pick__exit,
    .pbo-pick__map-head .pbo-pick__exit {
        padding: 9px 12px;
        font-size: 0.8125rem;
        min-height: 44px;
    }

    .pbo-pick__hint {
        padding: 9px 12px;
        font-size: 0.75rem;
        line-height: 1.65;
    }

    .pbo-pick__games {
        padding: 8px 12px;
    }

    .pbo-pick__games-preview li,
    .pbo-pick__games-full li {
        font-size: 0.8125rem;
    }

    .pbo-pick__stage {
        padding: 0;
    }

    .pbo-pick__overview {
        grid-template-columns: 1fr;
        grid-template-areas:
            "bar"
            "nav";
        align-content: start;
        align-items: start;
    }

    .pbo-pick__map-bar {
        grid-area: bar;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--lv-border);
        font-size: 0.8125rem;
        color: var(--lv-text-light);
    }

    .pbo-pick__nav-wrap {
        border-right: 0;
        padding: 14px 12px 8px;
    }

    .pbo-pick__nav-item {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "name price remain go";
        min-height: 62px;
        padding: 12px 14px;
    }

    .pbo-pick__nav-name {
        font-size: 1.0625rem;
    }

    .pbo-pick__nav-price {
        text-align: left;
        padding-left: 12px;
        font-size: 0.9375rem;
    }

    .pbo-pick__nav-left {
        font-size: 1rem;
    }

    .pbo-pick__nav-go {
        display: inline;
        font-size: 0.9375rem;
        color: var(--lv-border-dark);
        padding-left: 10px;
    }

    .pbo-pick__map {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5;
        padding: 0;
        background: var(--lv-bg);
    }

    .pbo-pick.is-map-open .pbo-pick__map {
        display: flex;
    }

    .pbo-pick__map-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--lv-border);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .pbo-pick__map-hint {
        display: block;
        margin: 0;
        padding: 9px 12px;
        font-size: 0.75rem;
        line-height: 1.65;
        color: var(--lv-text-light);
        background: var(--lv-bg-alt);
        border-bottom: 1px solid var(--lv-border);
    }

    .pbo-pick__overview .pbo-bowl {
        min-width: 820px;
    }

    .pbo-pick__legend {
        gap: 14px;
        padding: 10px;
        font-size: 0.75rem;
    }

    .pbo-pick__legend .pbo-pick__chip {
        width: 14px;
        height: 14px;
    }

    .pbo-pick .pbo-seats__preview {
        display: none;
    }

    .pbo-pick.is-locator-open .pbo-seats__preview {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 8;
        margin: 0;
        padding: 0;
        max-width: none;
        background: var(--lv-bg);
        box-shadow: 0 -8px 32px rgba(26, 26, 26, 0.12);
    }

    .pbo-pick__locator-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--lv-border);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .pbo-pick.is-locator-open .pbo-seats__preview .pbo-locator,
    .pbo-pick.is-locator-open .pbo-pick__mini {
        padding: 12px;
    }

    .pbo-pick__seat-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 12px 12px 0;
    }

    .pbo-pick .pbo-seats__grid {
        touch-action: pan-x pan-y;
    }

    .pbo-pick-seat {
        touch-action: manipulation;
    }

    .pbo-pick .pbo-seats__title {
        font-size: 1.125rem;
    }

    .pbo-pick__price {
        font-size: 0.875rem;
    }

    .pbo-pick .pbo-seat {
        width: 30px;
        height: 30px;
    }

    .pbo-pick .pbo-seats--aisle-left .pbo-seats__block--left,
    .pbo-pick .pbo-seats--center .pbo-seats__block--left {
        width: calc(13 * 30px + 12 * 4px);
    }

    .pbo-pick .pbo-seats--aisle-left .pbo-seats__block--right {
        width: calc(12 * 30px + 11 * 4px);
    }

    .pbo-pick .pbo-seats--aisle-right .pbo-seats__block--left {
        width: calc(12 * 30px + 11 * 4px);
    }

    .pbo-pick .pbo-seats--aisle-right .pbo-seats__block--right,
    .pbo-pick .pbo-seats--center .pbo-seats__block--right {
        width: calc(13 * 30px + 12 * 4px);
    }

    .pbo-pick .pbo-seats--orange .pbo-seats__block--left,
    .pbo-pick .pbo-seats--orange .pbo-seats__block--right {
        width: calc(4 * 30px + 3 * 4px);
    }

    .pbo-pick[data-pbo-view="detail"] .pbo-pick__stage {
        padding: 0 0 8px 12px;
    }

    .pbo-pick .pbo-seats__top {
        padding: 14px 12px 10px 0;
    }

    .pbo-pick .pbo-seats__rail {
        margin-right: 12px;
    }

    .pbo-pick__basket {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .pbo-pick__basket-seats {
        justify-content: space-between;
    }

    .pbo-pick__basket-count {
        font-size: 1.125rem;
    }

    .pbo-pick__basket-toggle {
        min-height: 44px;
        margin-left: auto;
        font-size: 0.8125rem;
    }

    .pbo-pick__sheet {
        padding: 0;
        align-items: stretch;
        justify-content: flex-end;
    }

    .pbo-pick__sheet-card {
        width: 100%;
        max-height: none;
        height: calc(100% - 180px);
        margin-top: 180px;
        border-radius: var(--lv-radius) var(--lv-radius) 0 0;
        box-shadow: none;
    }

    .pbo-pick__sheet-head {
        padding: 14px 12px;
    }

    .pbo-pick__sheet-body {
        padding: 8px 12px 12px;
    }

    .pbo-pick__sheet-foot {
        display: flex;
    }

    .pbo-pick__basket-sum {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: 8px 12px;
    }

    .pbo-pick__basket-sum .pbo-pick__btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        padding: 15px;
    }

    .pbo-pick__timer,
    .pbo-pick__total {
        font-size: 0.8125rem;
    }

    .pbo-pick__total strong {
        font-size: 1.25rem;
    }

    .pbo-pick__toast {
        bottom: 180px;
    }
}