/**
 * Cart / Checkout Center.
 *
 * Follows the .luna design system in global.css: canonical tokens (--space scale,
 * --radius, --body-text, --heading, --accent, --surface, --border*), fields
 * (.field-input / .field-select), buttons (.button), icon buttons (.icon-button),
 * utilities (.stack / .flex-between). Only cart-specific layout lives here; dark
 * mode flips via the token overrides. No raw px for spacing/type.
 */

.luna .cart {
    /* Manual-row column widths — named once, shared by the header and every row
       so the two grids resolve to identical tracks. Fixed (not auto/content) so
       an empty header cell still lines up with a filled row cell. */
    --col-num: var(--space-xl);   /* the #1 marker */
    --col-qty: 4.5rem;                    /* fits the "Qty" header + a number */
    --col-price: 7.5rem;                  /* fits "Unit Price ¥" / "Maximum Bid ¥" */
    --col-actions: calc(var(--field-height) * 3 + var(--space-xs) * 2); /* 3 icon buttons */
    display: block;
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-lg) var(--space) var(--space-3xl);
}

/* h1 uses the global .luna h1 scale; only the cart's bottom rhythm differs. */
.luna .cart h1 {
    margin: 0 0 var(--space);
}

/* tabs */
.luna .cart__tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

/* Scope with .cart to beat the global button background without !important. */
.luna .cart .cart__tab {
    position: relative;
    padding: var(--space-sm) var(--space);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--body-text);
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    transition: color .2s ease;
}

.luna .cart__tab:hover,
.luna .cart__tab:focus-visible {
    color: var(--cyan);
}

.luna .cart__tab:focus-visible {
    text-decoration: underline;
    text-underline-offset: var(--space-xs);
}

.luna .cart__tab.is-on {
    color: var(--heading);
}

.luna .cart__tab.is-on::after {
    content: '';
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: -1px;
    height: 3px;
    border-radius: var(--radius-sm);
    background: var(--gradient-button);
}

.luna .cart__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-xs);
    padding: 1px var(--space-xs);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, .06);
    color: var(--body-text);
}

[data-theme="dark"] .luna .cart__count {
    background: var(--tint-strong);
}

.luna .cart__tab.is-on .cart__count {
    background: var(--accent);
    color: var(--on-accent);
}

/* cards */
.luna .cart__card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space);
    margin-bottom: var(--space);
}

.luna .cart__card[hidden],
.luna .cart__t-row[hidden] {
    display: none;
}

.luna .cart__card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--body-text);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 var(--space-sm);
}

.luna .cart__tracking-number,
.luna .cart__meta,
.luna .cart__forwarding-status,
.luna .cart__forwarding-guide > p,
.luna .cart__item-name-examples li,
.luna .cart__store-modes label,
.luna .cart__t-row {
    color: var(--body-text);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.luna .cart__card-title--sentence {
    text-transform: none;
    letter-spacing: 0;
}

.luna .cart__tracking-number {
    margin: 0 0 var(--space-2xs);
    text-align: left;
}

.luna .cart__meta {
    margin: 0 0 var(--space-sm);
}

.luna .cart__forwarding-status {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--status-info-faint);
    text-align: left;
}

.luna .cart__empty {
    text-align: center;
    padding: var(--space-lg) 0;
    margin: 0;
}

.luna .cart__forwarding-guide > p {
    margin: 0 0 var(--space-sm);
    line-height: 1.6;
}

.luna .cart__item-name-examples {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space);
    margin-top: var(--space);
    padding-top: var(--space);
    border-top: 1px solid var(--border-soft);
}

.luna .cart__item-name-examples h3 {
    margin: 0 0 var(--space-xs);
    color: var(--body-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

.luna .cart__item-name-examples ul {
    margin: 0;
    line-height: 1.6;
}

/* panels */
.luna .cart__panel {
    display: none;
}

.luna .cart__panel.is-on {
    display: block;
}

/* × carries .icon-button for its box so image / comment / remove read as one
   1-1-1 group. Only the glyph size and the destructive hover differ here. */
.luna .cart__remove {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.luna .cart__remove:hover {
    color: var(--status-danger);
    border-color: var(--status-danger);
    background: rgba(224, 85, 78, .1);
}

.luna .cart__row-num {
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    font-size: var(--font-size-sm);
    min-width: var(--space-lg);
}

.luna .cart__cmt-line {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 0 var(--space-sm) var(--space-xl);
}

.luna .cart__cmt-line.is-open {
    display: flex;
}

/* image line — opens under the row like the comment line */
.luna .cart__img-line {
    display: none;
    padding: 0 0 var(--space-sm) var(--space-xl);
}

.luna .cart__img-line.is-open {
    display: block;
}

/* dropzone — click or drag an image; shows the preview when filled */
.luna .cart__dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--space-3xl);
    padding: var(--space-sm);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.luna .cart__dropzone:hover,
.luna .cart__dropzone:focus-visible,
.luna .cart__dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--tint);
    outline: none;
}

/* the real file input is hidden; the whole zone is the control */
.luna .cart__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.luna .cart__dropzone-prompt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--body-text);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.luna .cart__dropzone-prompt > svg {
    width: var(--space-lg);
    height: var(--space-lg);
    color: var(--body-text);
    margin-bottom: var(--space-2xs);
}

.luna .cart__dropzone-hint {
    font-size: var(--font-size-xs);
    color: var(--body-text);
    opacity: .8;
}

.luna .cart__dropzone-preview {
    display: none;
    flex-shrink: 0;
}

.luna .cart__dropzone-preview img {
    display: block;
    width: var(--space-3xl);
    height: var(--space-3xl);
    object-fit: cover;
    border-radius: var(--radius-md);
}

.luna .cart__dropzone-clear {
    display: none;
    margin-left: auto;
    width: var(--space-lg);
    height: var(--space-lg);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--body-text);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
}

.luna .cart__dropzone-clear:hover {
    color: var(--status-danger);
    background: rgba(224, 85, 78, .1);
}

/* filled state: show the thumbnail + clear, hide the icon/prompt column heading */
.luna .cart__dropzone.is-filled .cart__dropzone-preview,
.luna .cart__dropzone.is-filled .cart__dropzone-clear {
    display: block;
}

.luna .cart__dropzone.is-filled .cart__dropzone-prompt > svg {
    display: none;
}

/* comment input fills the row instead of sitting as a small box */
.luna .cart__cmt-line .field-input {
    flex: 1;
    min-width: 0;
}

.luna .cart__field-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--body-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* MANUAL: aligned column form */
/* # · Item · URL · Qty · Price · actions. Number/marker/action columns use the
   named --col-* widths (defined on .cart) so the header and rows share tracks. */
.luna .cart__manual-head,
.luna .cart__manual-row {
    display: grid;
    grid-template-columns: var(--col-num) minmax(0, 1.5fr) minmax(0, 1.1fr) var(--col-qty) var(--col-price) var(--col-actions);
    gap: var(--space-xs);
    align-items: center;
}

.luna .cart__manual-head--auction,
.luna .cart__manual-row--auction {
    grid-template-columns: var(--col-num) minmax(0, 1.5fr) minmax(0, 1.1fr) var(--col-price) var(--col-actions);
}

.luna .cart__store-modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    margin-bottom: var(--space);
}

.luna .cart__store-fields label,
.luna .cart__featured-fields label {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--body-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.luna .cart__field-caption {
    display: inline-flex;
    align-items: baseline;
}

.luna .cart__store-modes label {
    flex-direction: row;
    align-items: center;
}

.luna .cart__store-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space);
    padding: var(--space-sm) 0 var(--space) var(--space-xl);
}

.luna .cart__store-fields[hidden] { display: none; }

/* Booth header: three fields plus the remove button, above the booth's item rows. */
.luna .cart__featured-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--space);
    padding: var(--space-sm) 0 var(--space);
}

.luna .cart__booth + .cart__booth {
    margin-top: var(--space);
    border-top: 1px solid var(--border-soft);
}

.luna [data-cart-order-section="manual"].is-featured > .cart__manual-head,
.luna [data-cart-order-section="manual"].is-featured > .cart__actions { display: none; }

.luna .cart__manual-head { padding: 0 0 var(--space-xs); }

.luna .cart__manual-head > span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--body-text);
    line-height: 1.5;
    text-align: left;
}

.luna .cart__manual-row {
    padding: var(--space-sm) 0;
}

.luna .cart__manual-row .field-input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.luna .cart__row-field {
    display: contents;
}

.luna .cart__mobile-label {
    display: none;
}

.luna [data-forwarding-items] .cart__manual-head,
.luna [data-forwarding-item] {
    /* no # column; actions here are only comment + remove (2 buttons) */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) var(--col-qty) var(--col-price) calc(var(--field-height) * 2 + var(--space-xs));
}

.luna .cart__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space);
    margin-top: var(--space-sm);
}

.luna .cart__account,
.luna .cart__verify {
    margin-top: var(--space-sm);
}

.luna .cart__manual-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: flex-start;
}

/* Selects need room for the caret + a dark colour-scheme so the native dropdown
   matches. Geometry itself comes from the canonical .field-select. */
[data-theme="dark"] .luna .cart select.field-select {
    color-scheme: dark;
}

[data-theme="dark"] .luna .cart select.field-select option,
[data-theme="dark"] .luna .cart select.field-select optgroup {
    background-color: var(--background);
    color: var(--heading);
}

/* Width modifiers for the compact cart fields. */
.luna .cart__input--sm { max-width: 12ch; }
.luna .cart__input--md { max-width: 24ch; }

.luna .cart__add-line {
    margin: 0;
    padding: var(--space-sm) var(--space);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--body-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    width: auto;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.luna .cart__add-line:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

/* order-level options */
.luna .cart__opt-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.luna .cart__opt-inline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.luna .cart__opt-field {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-lg);
    flex-wrap: wrap;
}

.luna .cart__opt-field.is-open { display: flex; }

.luna .cart__opt-inline .cart__opt-field {
    flex: 1;
    min-width: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.luna .cart__opt-field--ts.is-open {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.luna .cart__ts-radios {
    display: flex;
    gap: var(--space);
}

/* totals — layout via .flex-between; only spacing/typography here.
   Override the utility's default gap (var(--space)) which is too wide for a row. */
.luna .cart__t-row {
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
}

.luna .cart__ship-note {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--tint);
    border: 1px solid rgba(var(--accent-rgb), .3);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--body-text);
}

/* The shared checkout block is already inside a cart card. */
.luna .cart [data-cart-payment] > .basic-container,
.luna .cart [data-forwarding-payment] > .basic-container {
    margin: 0;
    padding: var(--space) 0 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* PayPal iframe needs a fixed light-ish plate in both themes for its own button
   chrome — a deliberate special, not the themed surface. */
.luna .cart #paypal-button-section,
.luna .cart #paypal-button-checkout {
    width: 100%;
    max-width: var(--width-narrow);
    margin-inline: auto;
}

.luna .cart #paypal-button-checkout {
    display: block;
    background-color: var(--background);
}

[data-theme="dark"] .luna .cart #paypal-button-checkout {
    background-color: #2a2a2a;
}

/* mobile */
@media (max-width: 640px) {
    .luna .cart { padding: var(--space) var(--space-sm) var(--space-2xl); }

    .luna .cart__card {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
        margin-bottom: var(--space-lg);
    }

    .luna .cart__total-card {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        padding: var(--space);
    }

    .luna .cart__manual-head { display: none; }

    .luna .cart__manual-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .luna .cart__row-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .luna .cart__mobile-label {
        display: inline-flex;
        align-items: baseline;
        color: var(--body-text);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
    }

    .luna .cart__store-fields,
    .luna .cart__featured-fields {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .luna .cart__manual-actions { justify-content: space-between; }

    .luna .cart__add-line {
        max-width: 100%;
    }

    .luna .cart__actions {
        flex-wrap: wrap;
    }
}