/* ASHU cart, checkout and order confirmation (Phase 4).
   Logical properties only → mirrors automatically in RTL. Tokens from tokens.css. */

.icon-flip { transform: rotate(180deg); }
[dir=rtl] .icon-flip.icon-dir { transform: none; }

/* ── Page frame ───────────────────────────────────────────────────── */
.cartpage, .checkout, .osuccess { padding-block: var(--space-5) var(--space-8); }
.cartpage__title, .checkout__title { font-size: var(--fs-xl); margin-block: var(--space-2) var(--space-5); }
.cart-grid, .checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); }
  .checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6); }
}

/* ── Empty cart ───────────────────────────────────────────────────── */
.cart-empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-block: var(--space-8); max-inline-size: 560px; margin-inline: auto; }
.cart-empty__icon { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary-strong); }
.cart-empty__icon .icon { inline-size: 32px; block-size: 32px; }
.cart-empty__title { font-size: var(--fs-lg); margin: 0; }
.cart-empty p { margin: 0 0 var(--space-3); }

/* ── Cart lines ───────────────────────────────────────────────────── */
.cart-count { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.cart-lines { display: grid; gap: var(--space-3); }
.cline {
  display: grid; gap: var(--space-2) var(--space-4); align-items: center;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas: "media info total" "media qty remove";
  padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.cline__media { grid-area: media; align-self: start; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); aspect-ratio: 3 / 4; }
.cline__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cline__info { grid-area: info; min-inline-size: 0; }
.cline__name { font-size: 1rem; line-height: 1.35; margin: 0 0 2px; }
.cline__name a { color: var(--color-text); text-decoration: none; }
.cline__name a:hover { color: var(--color-primary-strong); text-decoration: underline; }
.cline__variant { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.cline__sku { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.cline__unit { margin: var(--space-1) 0 0; font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.cline__unit .price__now { font-size: var(--fs-sm); }
.cline__qty { grid-area: qty; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.cline__update { order: 2; }
.cline__update[hidden] { display: none; }
.cline__max { order: 3; }
.cline__max { font-size: var(--fs-xs); }
.cline__total { grid-area: total; justify-self: end; align-self: start; margin: 0; font-weight: var(--fw-bold); color: var(--color-navy); white-space: nowrap; }
.cline__remove { grid-area: remove; justify-self: end; margin: 0; }
.cline__remove .btn { gap: 6px; padding-inline: 10px; }
.cline.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 599.98px) {
  .cline { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "media info" "media total" "qty remove"; padding: var(--space-3); }
  .cline__total { justify-self: start; align-self: end; }
  .cline__remove-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.cart-continue { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); font-weight: var(--fw-semibold); color: var(--color-primary-strong); }

/* ── Summary card (cart + checkout) ───────────────────────────────── */
.csum__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .csum, .checkout__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-4)); } }
.csum__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.csum__title { font-size: var(--fs-md); margin: 0; }
.csum__edit { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-strong); }
.csum__rows { display: grid; gap: var(--space-2); margin: 0; }
.csum__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .95rem; }
.csum__row dt { color: var(--color-text-muted); }
.csum__row dd { margin: 0; font-weight: var(--fw-semibold); text-align: end; white-space: nowrap; }
.csum__row--discount dd { color: var(--color-success); }
.csum__row--total { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); margin-block-start: var(--space-1); font-size: var(--fs-md); }
.csum__row--total dt { color: var(--color-text); font-weight: var(--fw-bold); }
.csum__row--total dd { color: var(--color-navy); font-weight: var(--fw-heavy); }
.csum__row--note { font-size: var(--fs-sm); }
.csum__row--note dd { font-weight: var(--fw-medium); color: var(--color-text-muted); }
.csum__vatno { margin: 0; font-size: var(--fs-xs); color: var(--color-text-subtle); }
.csum__note { margin: 0; font-size: var(--fs-sm); }
.csum__warn { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.csum__warn[hidden] { display: none; }

/* coupon */
.coupon { display: grid; gap: 6px; margin: 0; padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border); }
.coupon label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.coupon__row { display: flex; gap: var(--space-2); }
.coupon__row input { flex: 1; min-inline-size: 0; text-transform: uppercase; }
.coupon--active { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.coupon__applied { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-success); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* ── Checkout ─────────────────────────────────────────────────────── */
.checkout__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-5); }
.checkout__head .checkout__title { margin: 0; }
.checkout__secure { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-success); }
.checkout__alerts:focus { outline: none; }
.checkout__main { display: grid; gap: var(--space-4); min-inline-size: 0; }
.co-sec { margin: 0; min-inline-size: 0; }
.co-sec__title { float: inline-start; inline-size: 100%; display: flex; align-items: center; gap: var(--space-3); padding: 0; margin-block-end: var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-navy); }
.co-sec__title + * { clear: both; }
.co-sec__num { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: var(--fs-sm); flex: none; }
.co-sec__account { margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.co-sec__account a { font-weight: var(--fw-semibold); color: var(--color-primary-strong); }
.field__error { margin: 0; color: var(--color-error); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field [aria-invalid=true] { border-color: var(--color-error) !important; }
.is-readonly { background: var(--color-surface-2) !important; color: var(--color-text-muted); }
.co-city { display: flex; gap: var(--space-2); }
.co-city select { flex: 1; min-inline-size: 0; }
html.js [data-city-other][data-collapsed] { display: none; }

.paylist { display: grid; gap: var(--space-2); }
.payopt { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.payopt:hover { border-color: var(--color-primary); }
.payopt:has(input:checked) { border-color: var(--color-primary-strong); background: var(--color-primary-tint); }
.payopt input { inline-size: 20px; block-size: 20px; accent-color: var(--color-primary-strong); flex: none; }
.payopt__name { flex: 1; font-weight: var(--fw-semibold); }
.payopt__group { font-size: var(--fs-sm); }
.payopt--test { border-style: dashed; }

.co-place:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.co-place.is-busy { opacity: .8; cursor: progress; }

/* order summary lines (checkout + confirmation) */
.osum__lines { display: grid; gap: var(--space-3); }
.osum__line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.osum__media { position: relative; display: block; border-radius: var(--radius-xs); background: var(--color-surface-2); aspect-ratio: 3 / 4; }
.osum__media img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius-xs); }
.osum__qty { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; display: grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 5px; border-radius: var(--radius-pill); background: var(--color-navy); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.osum__info { display: grid; gap: 1px; min-inline-size: 0; }
.osum__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.35; }
.osum__variant, .osum__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.osum__total { font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; }
.osum__ship { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); }

/* ── Order confirmation ───────────────────────────────────────────── */
.osuccess__hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--space-3); margin-block-end: var(--space-5); }
.osuccess__icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); }
.osuccess__icon .icon { inline-size: 32px; block-size: 32px; }
.osuccess__title { font-size: var(--fs-xl); margin: 0; }
.osuccess__lead { margin: 0; font-size: var(--fs-md); color: var(--color-text-muted); }
.osuccess__test { margin: 0; }
.osuccess__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); inline-size: 100%; max-inline-size: 860px; margin: var(--space-2) 0; }
.osuccess__facts > div { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.osuccess__facts dt { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.osuccess__facts dd { margin: 4px 0 0; font-weight: var(--fw-bold); color: var(--color-navy); overflow-wrap: anywhere; }
.osuccess__number { font-size: var(--fs-base); white-space: nowrap; }
.osuccess__hero > p.muted { margin: 0; max-inline-size: 60ch; }
.osuccess__link { display: grid; gap: 6px; inline-size: 100%; max-inline-size: 640px; text-align: start; }
.osuccess__link label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.osuccess__link input { font-size: var(--fs-sm); }
.osuccess__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) { .osuccess__grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.osuccess__items { display: grid; gap: var(--space-4); }
.osuccess__side { display: grid; gap: var(--space-4); }
.osuccess__h2 { font-size: var(--fs-base); margin: 0 0 var(--space-2); color: var(--color-navy); }
.osuccess__side .osuccess__h2:not(:first-child) { margin-block-start: var(--space-4); }
.osuccess__addr { margin: 0; font-style: normal; line-height: 1.6; overflow-wrap: anywhere; }

/* ── Phase 5: payment states, timeline, simulator ─────────────────── */
.osuccess__icon--cancel { background: var(--color-error-bg); color: var(--color-error); }
.osuccess__pay { display: grid; justify-items: center; gap: var(--space-3); inline-size: 100%; max-inline-size: 640px; }
.osuccess__pay .alert { margin: 0; inline-size: 100%; }
.otimeline { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.otimeline__item { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--space-3); }
.otimeline__dot { grid-row: span 2; inline-size: 12px; block-size: 12px; margin-block-start: 5px; border-radius: 50%; background: var(--color-primary-strong); box-shadow: 0 0 0 4px var(--color-primary-tint); }
.otimeline__item:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 5px; inset-block: 22px -10px; inline-size: 2px; background: var(--color-border); }
.otimeline__status { font-weight: var(--fw-semibold); }
.otimeline__time { font-size: var(--fs-sm); color: var(--color-text-muted); }
.sbx { padding-block: var(--space-7) var(--space-8); }
.sbx__card { max-inline-size: 520px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); text-align: center; justify-items: center; }
.sbx__badge { margin: 0; font-size: var(--fs-sm); color: var(--color-warning); font-weight: var(--fw-semibold); }
.sbx__title { font-size: var(--fs-lg); margin: 0; }
.sbx__card > p.muted { margin: 0; }
.sbx__facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sbx__actions { display: grid; gap: var(--space-2); inline-size: 100%; }
.sbx__wrong { font-size: var(--fs-sm); }
.track__intro { text-align: center; margin: 0 0 var(--space-4); }