/*
 * Online store - checkout, payment and order pages (checkout.css).
 * Built on base.css tokens; mobile first.
 */

/* ---------- Checkout layout ---------- */
.sf-co { padding-bottom: 48px; }
.sf-co__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 8px; }
.sf-co__head h1 { margin: 0; }
.sf-co__secure { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--sf-success); background: var(--sf-success-bg); padding: 5px 10px; border-radius: 999px; }
.sf-co__login { color: var(--sf-text-2); font-size: .92rem; margin: 0 0 12px; }
.sf-co__grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
.sf-co__aside { order: -1; }
@media (min-width: 900px) {
    .sf-co__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
    .sf-co__aside { order: 0; position: sticky; top: calc(var(--sf-header-h) + 16px); }
}

/* ---------- Steps ---------- */
.sf-co-step { background: #fff; border: 1px solid var(--sf-border); border-radius: 24px; padding: 20px 16px 8px; margin-bottom: 16px; box-shadow: var(--sf-shadow-xs); }
@media (min-width: 640px) { .sf-co-step { padding: 26px 28px 10px; } }
.sf .sf-co-step__title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; letter-spacing: -.02em; margin: 0 0 18px; }
.sf-co-step__num {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 11px 11px 11px 4px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--sf-brand) 80%, #fff), var(--sf-brand-dark)); color: #fff; font-size: .88rem; font-weight: 800; flex: 0 0 auto;
    box-shadow: 0 8px 16px -10px var(--sf-brand);
}
.sf-co-sub { font-size: .95rem; margin: 14px 0 12px; }
.sf-co-check { margin: 4px 0 14px; }
.sf-co-billing { border-top: 1px dashed var(--sf-border); padding-top: 4px; }
.sf-co-coupon { display: flex; gap: 8px; }
.sf-co-coupon .sf-input { text-transform: uppercase; }
.sf-co-coupon .sf-btn { flex: 0 0 auto; }
.sf-co-ok { color: var(--sf-success); font-weight: 600; }

/* ---------- Radio cards ---------- */
.sf-co-options, .sf-co-saved { display: grid; gap: 10px; margin-bottom: 14px; }
.sf-co-option {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer;
    border: 1.5px solid var(--sf-border); border-radius: 14px; background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sf-co-option:hover { border-color: var(--sf-brand-line); }
.sf-co-option input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sf-brand); flex: 0 0 auto; }
.sf-co-option:has(input:checked) { border-color: var(--sf-brand); background: var(--sf-brand-soft); box-shadow: var(--sf-ring); }
.sf-co-option:has(input:focus-visible) { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-co-option__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--sf-border); color: var(--sf-brand); flex: 0 0 auto; }
.sf-co-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sf-co-option__body strong { font-size: .95rem; }
.sf-co-option__price { font-weight: 700; white-space: nowrap; }
.sf-co-option--compact { padding: 12px 14px; }

/* ---------- Summary ---------- */
.sf-co-summary { position: relative; background: #fff; border: 1px solid var(--sf-border); border-radius: 24px; overflow: hidden; box-shadow: var(--sf-shadow-sm); }
.sf-co-summary::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--sf-brand), var(--sf-accent)); z-index: 1; }
.sf-co-summary__toggle {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 18px 14px; cursor: pointer; font-weight: 800; background: var(--sf-cream);
}
.sf-co-summary__toggle::-webkit-details-marker { display: none; }
.sf-co-summary__toggle > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-co-summary__toggle::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; transition: transform .2s; }
.sf-co-summary[open] .sf-co-summary__toggle::after { transform: rotate(-135deg); }
@media (min-width: 900px) {
    .sf-co-summary__toggle { pointer-events: none; }
    .sf-co-summary__toggle::after, .sf-co-summary__toggle strong { display: none; }
}
.sf-co-summary__body { padding: 6px 16px 16px; transition: opacity .2s; }
.sf-co-summary__body.is-loading { opacity: .55; pointer-events: none; }

.sf-co-lines { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.sf-co-line { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sf-border); }
.sf-co-line:last-child { border-bottom: 0; }
.sf-co-line__img { position: relative; width: 56px; height: 56px; border-radius: 14px; background: var(--sf-cream); border: 1px solid var(--sf-border); display: grid; place-items: center; flex: 0 0 auto; }
.sf-co-line__img img { width: 54px; height: 54px; object-fit: cover; border-radius: 13px; }
.sf-co-line__img .sf-ic { color: var(--sf-text-3); }
.sf-co-line__qty {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--sf-ink); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
}
.sf-co-line__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.sf-co-line__name { font-weight: 600; line-height: 1.3; }
.sf-co-line__meta { color: var(--sf-text-2); font-size: .82rem; }
.sf-co-line__error { color: var(--sf-danger); font-size: .8rem; font-weight: 600; }
.sf-co-line__price { text-align: right; font-weight: 700; font-size: .92rem; white-space: nowrap; display: flex; flex-direction: column; }
.sf-co-line__price .sf-price--old { font-weight: 500; font-size: .78rem; color: var(--sf-text-3); }
.sf-co-line.has-error .sf-co-line__img { outline: 2px solid var(--sf-danger); }

.sf-co-totals { margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--sf-border); }
.sf-co-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .92rem; }
.sf-co-totals dt { color: var(--sf-text-2); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sf-co-totals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.sf-co-totals .is-saving dd { color: var(--sf-success); }
.sf-co-totals__grand { border-top: 1px solid var(--sf-border); margin-top: 8px; padding-top: 12px !important; font-size: 1.1rem !important; }
.sf-co-totals__grand dt, .sf-co-totals__grand dd { color: var(--sf-ink) !important; font-weight: 800; }
.sf-co-totals__grand dd { font-size: 1.25rem; color: var(--sf-brand-deep) !important; letter-spacing: -.02em; }
.sf-co-savings { margin: 8px 0 0; font-size: .82rem; font-weight: 600; color: var(--sf-success); background: var(--sf-success-bg); border-radius: 8px; padding: 6px 10px; }
.sf-co-summary-errors { margin: 12px 0 0; }

.sf-co-place { margin-top: 14px; }
.sf-co-place .sf-btn { gap: 8px; }
.sf-co-terms { margin: 10px 2px 12px; line-height: 1.45; }
.sf-co-trust { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 8px; background: var(--sf-brand-soft); border: 1px solid var(--sf-brand-line); border-radius: 16px; font-size: .84rem; color: var(--sf-text-2); }
.sf-co-trust li { display: flex; align-items: center; gap: 8px; }
.sf-co-trust .sf-ic { color: var(--sf-brand); }

/* Sticky place-order bar on phones */
@media (max-width: 899px) {
    .sf-page-checkout .sf-co-place {
        position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--sf-border);
    }
    .sf-page-checkout .sf-co__aside { display: contents; }
    .sf-page-checkout .sf-co-summary { order: -1; }
    .sf-page-checkout .sf-co-place { order: 2; }
    .sf-page-checkout .sf-co-terms { margin-bottom: 0; }
    .sf-page-checkout .sf-co-trust { display: none; }
}

/* ---------- Order page ---------- */
.sf-order { padding-bottom: 48px; }
.sf-order__hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 36px 18px 32px; margin: 8px 0 20px; border-radius: 28px; background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--sf-accent) 14%, transparent), transparent 70%), linear-gradient(135deg, #fff, var(--sf-brand-soft)); border: 1px solid var(--sf-brand-line); }
.sf-order__hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--sf-brand) 16%, transparent) 1.2px, transparent 1.6px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%); }
.sf-order__hero-icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--sf-brand); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--sf-brand) 12%, transparent), 0 0 0 20px color-mix(in srgb, var(--sf-brand) 6%, transparent); animation: sf-pop .5s var(--sf-spring); }
.sf-order__hero-icon .sf-ic { width: 28px; height: 28px; }
.sf-order__hero h1 { margin-bottom: 6px; }
.sf-order__hero p { color: var(--sf-text-2); margin: 0 auto; max-width: 560px; }
.sf-order__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 16px; }
.sf-order__head h1, .sf-order__head h2 { margin: 0; }
.sf-order__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-order__grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sf-order__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } }
.sf-order .sf-card { margin-bottom: 16px; }
.sf-order__meta { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .sf-order__meta { grid-template-columns: 1fr 1fr; } }
.sf-order__meta dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-text-3); font-weight: 700; margin-bottom: 4px; }
.sf-order__meta dd { margin: 0; font-size: .92rem; line-height: 1.5; }
.sf-order__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sf-order__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Progress */
.sf-progress { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.sf-progress li { position: relative; text-align: center; font-size: .76rem; font-weight: 600; color: var(--sf-text-3); padding-top: 34px; }
.sf-progress li::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 2px solid var(--sf-border-strong); z-index: 1;
}
.sf-progress li::after { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--sf-border-strong); }
.sf-progress li:first-child::after { display: none; }
.sf-progress li.is-done { color: var(--sf-text); }
.sf-progress li.is-done::before { background: var(--sf-brand); border-color: var(--sf-brand); box-shadow: inset 0 0 0 5px var(--sf-brand); }
.sf-progress li.is-done::after { background: var(--sf-brand); }
.sf-progress li.is-current::before { border-color: var(--sf-brand); box-shadow: var(--sf-ring); }
.sf-progress li.is-current { color: var(--sf-text); }

/* Timeline */
.sf-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--sf-border); }
.sf-timeline li { position: relative; padding: 0 0 16px 12px; }
.sf-timeline li:last-child { padding-bottom: 0; }
.sf-timeline li::before { content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--sf-brand); }
.sf-timeline li:first-child::before { background: var(--sf-brand); }
.sf-timeline__title { font-weight: 600; font-size: .92rem; }
.sf-timeline__note { color: var(--sf-text-2); font-size: .88rem; margin-top: 2px; white-space: pre-line; }
.sf-timeline__time { color: var(--sf-text-3); font-size: .78rem; margin-top: 2px; }

/* Items table */
.sf-order-items { list-style: none; margin: 0; padding: 0; }
.sf-order-items .sf-co-line__body { font-size: .92rem; }
.sf-order-items__unit { color: var(--sf-text-2); font-size: .82rem; }

/* ---------- Track ---------- */
.sf-track { max-width: 480px; margin: 24px auto 56px; }
.sf-track .sf-card { padding: 24px; }
.sf-track__icon { width: 56px; height: 56px; border-radius: 18px 18px 18px 6px; background: var(--sf-brand-soft); color: var(--sf-brand); box-shadow: inset 0 0 0 1px var(--sf-brand-line); display: grid; place-items: center; margin-bottom: 14px; }
.sf-track .sf-card { border-radius: 26px; box-shadow: var(--sf-shadow-sm); }

/* ---------- Account orders ---------- */
.sf-orders-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-orders-list__item a {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 18px; border: 1px solid var(--sf-border);
    border-radius: 18px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sf-orders-list__item a:hover { border-color: var(--sf-brand-line); box-shadow: var(--sf-shadow-sm); transform: translateY(-1px); color: inherit; }
.sf-orders-list__no { font-weight: 700; }
.sf-orders-list__total { font-weight: 700; text-align: right; }
.sf-orders-list__meta { color: var(--sf-text-2); font-size: .85rem; }
.sf-orders-list__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Payment page ---------- */
.sf-pay { max-width: 520px; margin: 32px auto 64px; text-align: center; }
.sf-pay .sf-card { padding: 30px 26px; border-radius: 26px; box-shadow: var(--sf-shadow-sm); }
.sf-pay__amount { font-size: 1.8rem; font-weight: 800; margin: 6px 0 18px; }

/* ---------- Status badges ---------- */
.sf-status--pending, .sf-pay--pending, .sf-pay--unpaid { background: var(--sf-warning-bg); color: var(--sf-warning); }
.sf-status--confirmed, .sf-status--processing, .sf-status--ready { background: var(--sf-info-bg); color: #1d4ed8; }
.sf-status--shipped { background: #f5f3ff; color: #6d28d9; }
.sf-status--delivered, .sf-pay--paid { background: var(--sf-success-bg); color: var(--sf-success); }
.sf-status--cancelled, .sf-pay--failed { background: var(--sf-danger-bg); color: var(--sf-danger); }
.sf-pay--refunded, .sf-pay--partially_refunded { background: var(--sf-bg-muted); color: var(--sf-text-2); }

/* ---------- Print ---------- */
@media print {
    .sf-header, .sf-footer, .sf-catnav, .sf-announce, .sf-crumbs, .sf-order__actions, .sf-toasts, .sf-drawer, .sf-account__nav, .sf-no-print { display: none !important; }
    .sf-order__grid { grid-template-columns: 1fr 1fr !important; }
    .sf-card { border-color: #ccc !important; break-inside: avoid; }
    body.sf { font-size: 12px; }
}

/* ---------- Responsive pass ---------- */
/* Phone summary bar: the total never breaks between the currency sign and the amount */
.sf-co-summary__toggle strong { white-space: nowrap; }
/* Account order list: the order number may wrap, the badges move under it on small phones */
.sf-orders-list__item a { grid-template-columns: minmax(0, 1fr) auto; }
.sf-orders-list__no { overflow-wrap: anywhere; }
@media (max-width: 479px) {
    .sf-orders-list__badges { grid-column: 1 / -1; justify-content: flex-start; }
    .sf-order__hero { padding: 28px 14px 24px; }
    .sf-progress li { font-size: .68rem; }
}
/* Long product and option names wrap instead of pushing the card wider */
.sf-co-option__body strong, .sf-co-line__name { overflow-wrap: anywhere; }