/**
 * Checkout page shell (order, top-up and shipment payment) and the shipping
 * checkout step contents.
 */

/* =============================================================================
   CHECKOUT ACCORDION WORKFLOW
   ============================================================================= */

.luna .checkout {
    max-width: var(--width-content);
    margin: 0 auto;
    padding: var(--space-xl) var(--space) var(--space-3xl);
}
.luna .checkout__topbar {
    margin-bottom: var(--space-lg);
}
.luna .checkout__head {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.luna .checkout__title {
    margin: 0;
}

.luna .checkout__address-bar-picker {
    width: auto;
    max-width: 20ch;
    white-space: nowrap;
}
.luna .checkout__address-bar-picker:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.luna .checkout__address {
    line-height: 1.65;
    font-size: var(--font-size-sm);
    color: var(--body-text);
}
.luna .checkout__address strong {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2xs);
}

.luna .checkout__carrier { margin-bottom: var(--space); }
.luna .checkout__carrier:last-child { margin-bottom: 0; }
.luna .checkout__carrier-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.luna .checkout__carrier-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.luna .checkout__carrier-logo { height: var(--space-lg); width: auto; object-fit: contain; }
.luna .checkout__carrier-logo--tall { height: var(--space-3xl); }

.luna .checkout__ddp {
    color: var(--cyan);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    margin-top: var(--space-2xs);
    align-self: flex-end;
}
.luna .checkout__ddp svg { width: 1em; height: 1em; flex-shrink: 0; }
/* Prepay chips (e.g. DDP + IOSS) share one right-aligned row. */
.luna .checkout__ddp-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
    align-self: flex-end;
}
.luna .checkout__ddp-row .checkout__ddp { margin-top: 0; }
/* Import-fee total shown next to the prepay chip on step-3 rate rows. */
.luna .checkout__ddp-amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--body-text);
    align-self: center;
}

/* is-selected is toggled by checkout-shipping-workflow.js. */
.luna .checkout__option {
    display: flex;
    align-items: center;
    gap: var(--space);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    margin-bottom: var(--space-xs);
}
.luna .checkout__option:last-child { margin-bottom: 0; }
.luna .checkout__option:not(.is-static, .is-disabled):hover { border-color: var(--accent); }
.luna .checkout__option.is-selected {
    border-color: var(--accent);
    background: var(--tint);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}
.luna .checkout__option.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.luna .checkout__option.is-static { cursor: default; }

.luna .checkout__rate { padding: var(--space-sm) var(--space); }
.luna .checkout__rate:not(.is-disabled):hover { background: var(--tint); }
.luna .checkout__rate-main { flex: 1; min-width: 0; }
.luna .checkout__rate-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.luna .checkout__rate-delivery {
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--body-text);
    line-height: 1.35;
}
/* Column for price + unavailable note + DDP chip. The 40% cap keeps the long
   "¥3,000 (≈ $18.73)" string from starving the name column on phones — it
   wraps after the JPY amount instead. Never binds on desktop widths. */
.luna .checkout__rate-pricing {
    flex-shrink: 0;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.luna .checkout__rate-price {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.luna .checkout__rate-price.is-na { font-size: var(--font-size-sm); color: var(--body-text); font-weight: var(--font-weight-semibold); }
.luna .checkout__rate-note {
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    color: var(--body-text);
    line-height: 1.35;
}

.luna .checkout__svc { padding: var(--space); }
/* Open fee details grows the row tall: pin checkbox and price to the title line
   so the total cannot land between breakdown rows. */
.luna .checkout__svc:has(.fee-breakdown[open]) { align-items: flex-start; }
.luna .checkout__deminimis-tip { cursor: help; color: var(--accent); text-decoration: underline dotted; }
.luna .checkout__svc--stack {
    display: grid;
    gap: var(--space-xs);
    align-items: stretch;
}
.luna .checkout__svc-row .checkout__svc-title {
    display: block;
    font-size: var(--font-size-sm);
}
.luna .checkout__svc-main { flex: 1; min-width: 0; }
.luna .checkout__svc-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.luna .checkout__svc-desc { font-size: var(--font-size-xs); color: var(--body-text); margin-top: var(--space-2xs); line-height: 1.4; }
/* fee-breakdown rules live in payment-block.css (checkout bundle). */
.luna .checkout__svc-price {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--cyan);
    font-variant-numeric: tabular-nums;
    transition: opacity var(--transition-fast);
}
.luna .checkout__svc:not(.is-static, .is-selected) .checkout__svc-price { opacity: var(--opacity-disabled); }

@media (max-width: 600px) {
    .luna .checkout {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    .luna .checkout .stepper {
        --slash-width: var(--space-2xs);
        --slash-height: calc(var(--space) * 1.125);
    }
    .luna .checkout .stepper__slashes { padding-left: var(--space-xs); }
    .luna .checkout .stepper__bar { padding: var(--space-sm); gap: var(--space-sm); flex-wrap: wrap; }
    /* The injected address picker would starve the step title on phones;
       order:1 sends it past the slashes onto its own full-width row. */
    .luna .checkout__address-bar-picker { order: 1; flex: 1 1 100%; min-width: 0; max-width: none; }
    .luna .checkout__rate-price { font-size: var(--font-size-sm); }
}

@media (max-width: 480px) {
    .luna .checkout__rate { flex-wrap: wrap; }
    .luna .checkout__rate-pricing { flex: 1 1 100%; max-width: none; }
}

/* =============================================================================
   SHIPPING WORKFLOW BITS
   Emitted by assets/js/checkout-shipping-workflow.js.
   ============================================================================= */
.luna .checkout__rate-chip {
    white-space: nowrap;
}

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

.luna .checkout__spinner {
    width: var(--space-xl);
    height: var(--space-xl);
    border: var(--space-2xs) solid var(--border-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: checkout-spin 1s linear infinite;
}

/* meta strip + items heading (workflow-injected).
   Carries its own card chrome — basic-container's child-stack layout would
   override the flex row and stack the cells vertically. */
.luna .checkout__meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 var(--space);
    padding: var(--space);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.luna .checkout__meta-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.luna .checkout__meta-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.luna .checkout__items-head {
    margin-bottom: var(--space-2xs);
}

/* step-panel loading placeholder (template) */
.luna .checkout__panel-loading {
    text-align: center;
    padding: var(--space) 0;
}

/* inline loading note in the step title */
.luna .checkout__loading-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--cyan);
    margin-left: var(--space-xs);
}

.luna .checkout__loading-text[hidden] {
    display: none;
}

.luna .stack > .checkout-item-indent {
    margin-left: var(--space-xs);
}

.luna .table-scroll.checkout-items-table {
    margin-top: var(--space);
}

.luna .stack.checkout-items-stack {
    gap: var(--space-xs);
    margin-bottom: var(--space);
}

.luna .text-center.checkout-panel-pad {
    padding: var(--space) 0;
}

.luna .stack.text-center.checkout-panel-pad--center {
    align-items: center;
}