/* Workstream-owned stylesheet (checkout). Linked once from layouts/app.blade.php by Foundation.
   Builds on the tokens and clay components in app.css; logical properties only (RTL). */

/* ---------- Form: unavailable state, product badges ---------- */

.products-state.is-unavailable { background: var(--amber-tint); color: var(--amber); }
.products-state.is-unavailable .icon { color: var(--amber); }
.products-state.is-unavailable p { display: grid; gap: 4px; }
.products-state.is-unavailable strong { color: var(--ink); font-weight: 700; }

.product-badge {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lilac);
    color: #3B2A9E;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
}
.product-title { overflow-wrap: anywhere; }

.products-note { display: flex; align-items: flex-start; gap: 8px; color: #3B2A9E; font-size: var(--text-sm); font-weight: 500; }
.products-note .icon { margin-top: 2px; color: var(--lilac-strong); }

/* ---------- Custom airtime amount ---------- */

.custom-amount { display: grid; gap: 8px; margin-top: 4px; }
.custom-amount-label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.custom-amount-input {
    display: flex;
    align-items: center;
    min-height: 52px;
    border: var(--border) solid var(--line);
    border-radius: var(--r-md);
    background: var(--field);
    box-shadow: inset 0 3px 6px rgba(16, 64, 150, .07);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.custom-amount-input:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 5px rgba(22, 119, 242, .16); }
.custom-amount-input input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: 700 var(--text-lg)/1 var(--font-num);
    font-variant-numeric: tabular-nums;
}
.custom-amount-input input:focus { outline: none; box-shadow: none; }
.custom-amount-input input::placeholder { color: #A3B1C7; font-weight: 700; }
.custom-amount-unit {
    margin: 6px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: var(--clay-sm);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}
.custom-amount.is-set .custom-amount-input { border-color: var(--blue); background: var(--blue-tint); box-shadow: var(--clay-pressed); }
.custom-amount.has-error .custom-amount-input { border-color: var(--red); background: #FFF8F6; }
.custom-amount.has-error .field-msg { color: var(--red); font-weight: 700; }

/* ---------- Promo code disclosure ---------- */

.promo {
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--clay-sm), 0 0 0 1px var(--line);
}
.promo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 16px;
    color: var(--blue-deep);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    border-radius: var(--r-md);
    -webkit-tap-highlight-color: transparent;
}
.promo-toggle::-webkit-details-marker { display: none; }
.promo-toggle > span { flex: 1; }
.promo-toggle > .icon:first-child { color: var(--lilac-strong); }
.promo-toggle > .icon:last-child { transition: transform .2s var(--bounce); color: var(--ink-2); }
.promo[open] .promo-toggle > .icon:last-child { transform: rotate(180deg); }
.promo-body { display: grid; gap: 8px; padding: 0 12px 12px; }
.promo-row { display: flex; gap: 8px; align-items: stretch; }
.promo-input.input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    font-size: var(--text-base);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.promo-input.input::placeholder { text-transform: none; letter-spacing: 0; color: #A3B1C7; }
.promo-input[readonly] { background: var(--green-tint); border-color: #9ED9BF; color: var(--green); }
.promo-row .button { flex: none; min-height: 48px; }
.promo-msg:empty { display: none; }
.promo.has-error .promo-msg { color: var(--red); font-weight: 700; }
.promo.has-error .promo-input { border-color: var(--red); background: #FFF8F6; }
.promo.is-applied .promo-toggle { color: var(--green); }

/* ---------- Summary discount row + wallet option ---------- */

.summary-discount dt, .summary-discount dd { color: var(--green) !important; }

.wallet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    border: var(--border) solid #fff;
    border-radius: var(--r-md);
    background: var(--mint);
    box-shadow: var(--clay-sm);
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
}
.wallet-option input { position: absolute; opacity: 0; pointer-events: none; }
.wallet-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: #fff;
    color: transparent;
    box-shadow: inset 0 2px 4px rgba(16, 64, 150, .14);
}
.wallet-option:has(input:checked) { border-color: var(--mint-strong); box-shadow: var(--clay-pressed); }
.wallet-option:has(input:checked) .wallet-check { background: var(--mint-strong); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.wallet-option:has(input:focus-visible) { box-shadow: var(--focus); }
.wallet-text { display: grid; gap: 2px; min-width: 0; }
.wallet-text strong { color: var(--ink); font-weight: 700; line-height: 1.3; }
.wallet-text small { color: #1F5E48; font-size: var(--text-sm); font-weight: 500; }

.button-primary[aria-disabled="true"] { background: #9CC0F2; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }

/* ---------- Status pills (real order statuses) ---------- */

.status-pending { background: var(--amber-tint); color: var(--amber); }
.status-paid, .status-delivering, .status-processing { background: var(--blue-tint); color: var(--blue-deep); }
.status-delivered { background: var(--green-tint); color: var(--green); }
.status-canceled, .status-failed { background: var(--red-tint); color: var(--red); }
.status-refunded { background: var(--lilac); color: #3B2A9E; }
.status-unknown { background: var(--blue-tint); color: var(--blue-deep); }

/* ---------- Order page ---------- */

.order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.order-subtitle { margin-bottom: 8px; font: 600 var(--text-lg)/1.25 var(--font-display); }
[dir="rtl"] .order-subtitle { font-weight: 700; }

.notice-good { background: var(--green-tint); color: var(--green); }

.order-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--r-md);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    box-shadow: inset 0 -4px 0 rgba(16, 64, 150, .06);
}
.order-notice-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--clay-sm);
}
.order-notice p { padding-top: 6px; }
.order-notice-busy { background: var(--sky); color: #1A4890; }
.order-notice-busy .order-notice-icon { color: var(--blue); }
.order-notice-good { background: var(--green-tint); color: #0B5C40; }
.order-notice-good .order-notice-icon { color: var(--green); }
.order-notice-bad { background: var(--red-tint); color: var(--red); }
.order-notice-bad .order-notice-icon { color: var(--red); }
.order-notice-neutral { background: var(--lilac); color: #3B2A9E; }
.order-notice-neutral .order-notice-icon { color: var(--lilac-strong); }
[data-order-live] .order-notice-busy .order-notice-icon .icon { animation: gr-spin-slow 2.4s linear infinite; }
@keyframes gr-spin-slow { to { transform: rotate(360deg); } }

/* Timeline: vertical on phones, a row of steps from 560px. */
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--ink-2);
    font-size: var(--text-base);
    font-weight: 500;
}
.timeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 13px;
    top: 34px;
    width: 3px;
    height: calc(100% - 24px);
    border-radius: 3px;
    background: var(--line);
}
.timeline-step.is-done:not(:last-child)::after { background: var(--mint-strong); }
.timeline-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: none;
    width: 29px; height: 29px;
    border-radius: 50%;
    background: var(--field);
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(16, 64, 150, .12);
}
.timeline-step.is-done { color: var(--ink); }
.timeline-step.is-done .timeline-dot { background: var(--mint-strong); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); }
.timeline-step.is-current { color: var(--blue-deep); font-weight: 700; }
.timeline-step.is-current .timeline-dot { background: #fff; box-shadow: 0 0 0 4px var(--blue-line), inset 0 0 0 7px var(--blue); }
.timeline-step.is-bad { color: var(--red); font-weight: 700; }
.timeline-step.is-bad .timeline-dot { background: var(--coral-strong); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); }
@media (prefers-reduced-motion: no-preference) {
    [data-order-live] .timeline-step.is-current .timeline-dot { animation: gr-pulse 1.6s ease-in-out infinite; }
    @keyframes gr-pulse { 50% { box-shadow: 0 0 0 7px rgba(201, 222, 252, .6), inset 0 0 0 7px var(--blue); } }
}
@media (min-width: 560px) {
    .timeline { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    .timeline-step { flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: var(--text-sm); }
    .timeline-step:not(:last-child)::after {
        inset-inline-start: calc(50% + 20px);
        top: 13px;
        width: calc(100% - 32px);
        height: 3px;
    }
}

.receipt-list { margin-top: 0; padding: 4px 16px 16px; border-radius: var(--r-lg); background: var(--field); box-shadow: inset 0 3px 8px rgba(16, 64, 150, .06); }
.receipt-list > div + div { border-top: 1px dashed var(--line); }
.receipt-list .summary-total { border-top: 0 !important; }
.receipt-sub { display: block; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.receipt-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-sm); }

.order-actions { display: grid; gap: 12px; }
.order-actions .button .icon { margin-inline-end: 8px; }
.order-link { justify-self: center; font-weight: 700; }
.order-help { color: var(--ink-2); font-size: var(--text-sm); text-align: center; }
.order-help a { font-weight: 700; overflow-wrap: anywhere; }
.order-fineprint { margin-top: -8px; color: #6B7A93; font-size: var(--text-xs); text-align: center; }

/* ---------- Stripe return pages (checkout/success, checkout/cancel) ---------- */

.checkout-result { display: grid; justify-items: center; gap: 12px; text-align: center; }
.checkout-result .page-lead { max-width: 46ch; }
.checkout-result-icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 10px 18px -8px rgba(16, 64, 150, .45), inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .25);
}
.checkout-result-icon.is-good { background: var(--mint-strong); }
.checkout-result-icon.is-neutral { background: var(--coral-strong); }
.checkout-result-ref { display: grid; gap: 2px; padding: 12px 20px; border-radius: var(--r-md); background: var(--sky); }
.checkout-result-ref span { color: #3E5578; font-size: var(--text-sm); font-weight: 700; }
.checkout-result-ref strong { font: 700 var(--text-xl)/1.2 var(--font-num); letter-spacing: .04em; color: var(--blue-deep); }
.checkout-result-actions { display: grid; gap: 12px; width: 100%; max-width: 360px; margin-top: 8px; }

/* ---------- Compact form: less scrolling on phones ---------- */
.topup-form { gap: 16px; padding-block: 16px 12px; }
.topup-title { font-size: var(--text-xl); }
.field { gap: 4px; }
.field-label { font-size: var(--text-sm); }

.input, .phone-input { min-height: 52px; }
.phone-input input { height: 46px; font-size: var(--text-lg); }

/* Service switch: always one row, icon beside the text, hint hidden on phones. */
.segmented { gap: 8px; }
.segment { flex-direction: row; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; }
.segment > .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.segment strong { font-size: var(--text-sm); }
.segment small { display: none; }
@media (min-width: 480px) { .segment small { display: block; font-size: var(--text-xs); } }

/* Amounts: three compact tiles per row. */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product { min-height: 64px; padding: 8px 10px; gap: 2px; align-content: center; justify-items: start; }
.product-title { font-size: var(--text-base); }
.product-detail { font-size: var(--text-xs); line-height: 1.25; }
.product-price { margin-top: 2px; padding: 3px 8px; font-size: var(--text-sm); }
.product-check { top: 6px; inset-inline-end: 6px; width: 18px; height: 18px; }
.skeleton { min-height: 64px; }
.products { min-height: 64px; }
@media (max-width: 359px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Data bundles carry more text: two per row on phones. */
.product-grid:has(.product-detail) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Other amount: label and box on one line. */
.custom-amount { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px; margin-top: 0; }
.custom-amount-label { white-space: nowrap; }
.custom-amount-input { min-height: 46px; }
.custom-amount .field-msg { grid-column: 1 / -1; font-size: var(--text-xs); }

.summary { padding: 12px 16px; }
.summary-list > div { padding-block: 4px; }
.review-note { display: none; }

/* ---------- Polish ---------- */
/* No empty slot: a lone last tile in a row of three stretches to fill the row. */
.product-grid:not(:has(.product-detail)) .product:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.product-grid:not(:has(.product-detail)) .product:last-child:nth-child(3n + 2) { grid-column: span 2; }
/* One focus ring on the custom amount box, not a ring on top of a ring. */
.custom-amount-input input:focus-visible { box-shadow: none; }
.custom-amount-input:focus-within { box-shadow: 0 0 0 4px rgba(22, 119, 242, .16); }

/* Nothing to choose yet: hide the amount section and the empty summary until
   a number is entered and the operator is known. They appear on their own. */
.topup-form [data-field="product"]:has([data-state="idle"]:not([hidden])),
.topup-form [data-summary]:has([data-summary-empty]:not([hidden])) { display: none; }