/* Live regression fixes for listing media and checkout contrast. Loaded from the body theme include so it wins over older head styles. */

/* Desktop listing gallery: keep the thumbnail rail vertical and give every
   thumbnail its own fixed-size slot beside the main image. An older management
   stylesheet turned this rail into a horizontal flex scroller while it still
   occupied the narrow desktop grid column, which produced the tall dark strip
   and tiny/squeezed thumbnail shown on staging. */
@media (min-width: 851px) {
    .app-route-detail .app-product-media {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, auto) !important;
        align-items: start !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .app-route-detail .app-main-image {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .app-route-detail .app-thumbnail-row {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-content: initial !important;
        gap: 8px !important;
        width: 96px !important;
        max-width: 96px !important;
        max-height: 720px !important;
        margin: 0 !important;
        padding: 0 3px 0 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scroll-snap-type: y proximity;
    }

    .app-route-detail .app-thumbnail-row > button {
        position: relative !important;
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        height: 92px !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 4px !important;
        overflow: hidden !important;
        border: 2px solid transparent !important;
        border-radius: 14px !important;
        background: var(--fx-panel-2, #f3f5f7) !important;
        box-shadow: none !important;
        scroll-snap-align: start;
        cursor: pointer;
    }

    .app-route-detail .app-thumbnail-row > button:hover {
        border-color: var(--fx-line-strong, #7a8594) !important;
    }

    .app-route-detail .app-thumbnail-row > button.is-active {
        border-color: var(--fx-text, #161616) !important;
        box-shadow: 0 0 0 1px var(--fx-text, #161616) !important;
    }

    .app-route-detail .app-thumbnail-row > button > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        object-fit: contain !important;
    }
}

/* The image counter belongs to the image canvas, never the product-summary column. */
.app-route-detail .app-product-media,
.app-route-detail .app-main-image {
    position: relative !important;
}

.app-route-detail .app-image-counter {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 8 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 48px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #ffffff !important;
    background: rgba(7, 9, 13, .78) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

/* Checkout uses dark panels in dark mode. Never leave light-theme ink on those panels. */
html[data-theme="dark"] body .checkout-card,
html[data-theme="dark"] body .order-summary-card {
    color: var(--fx-text, #f5f8fc) !important;
    border-color: var(--fx-line, rgba(161, 183, 214, .18)) !important;
    background: var(--fx-panel, #101620) !important;
}

html[data-theme="dark"] body :is(.checkout-card, .order-summary-card) :is(
    h1, h2, h3, strong, label, legend, dt, dd, span, p
) {
    color: var(--fx-text, #f5f8fc) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body :is(.checkout-card, .order-summary-card) :is(
    .checkout-section-title p,
    small,
    .helptext,
    .summary-lines dt,
    .provider-pending p,
    .provider-ready p,
    .order-state p
) {
    color: var(--fx-muted, #9ba8ba) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body .order-summary-card .eyebrow,
html[data-theme="dark"] body :is(.checkout-card, .order-summary-card) .text-link {
    color: var(--fx-blue, #65a0ff) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body .order-summary-card :is(.summary-protection, .summary-delivery),
html[data-theme="dark"] body .checkout-card :is(.provider-pending, .provider-ready, .order-state) {
    color: var(--fx-text, #f5f8fc) !important;
    border-color: var(--fx-line, rgba(161, 183, 214, .18)) !important;
    background: var(--fx-panel-2, #151d29) !important;
}

html[data-theme="dark"] body .order-summary-card :is(.summary-protection, .summary-delivery) :is(strong, p, span, small) {
    color: var(--fx-text-soft, #c5cfdd) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body .order-summary-card :is(.summary-protection, .summary-delivery) strong {
    color: var(--fx-text, #f5f8fc) !important;
}

/* Keep checkout entry fields intentionally white for maximum readability on iOS. */
html[data-theme="dark"] body .checkout-card :is(
    input:not([type="checkbox"]):not([type="radio"]), select, textarea
) {
    border-color: #8b93a1 !important;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body .checkout-card :is(input, textarea)::placeholder {
    color: #667085 !important;
    -webkit-text-fill-color: #667085 !important;
}

/* The pale reservation timer had pale text in dark mode. */
html[data-theme="dark"] body .reservation-clock,
html[data-theme="dark"] body .reservation-clock :is(span, strong) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Checkout delivery radios should use the same contained stacked layout as listing delivery. */
html[data-theme="dark"] body .order-summary-card .buy-now-form fieldset,
html[data-theme="dark"] body .order-summary-card .buy-now-form label {
    color: var(--fx-text, #f5f8fc) !important;
    border-color: var(--fx-line-strong, rgba(161, 183, 214, .32)) !important;
    background: var(--fx-panel, #101620) !important;
}

html[data-theme="dark"] body .order-summary-card .buy-now-form label :is(span, strong, small) {
    color: var(--fx-text, #f5f8fc) !important;
    -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 850px) {
    /* Phone/tablet keeps the familiar horizontal swipeable strip below the main image. */
    .app-route-detail .app-product-media {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app-route-detail .app-main-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .app-route-detail .app-thumbnail-row {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 10px 0 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .app-route-detail .app-thumbnail-row::-webkit-scrollbar {
        display: none;
    }

    .app-route-detail .app-thumbnail-row > button {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
    }

    .app-route-detail .app-image-counter {
        top: 10px !important;
        right: 10px !important;
        min-width: 44px;
        min-height: 32px;
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}