/* IXXO Cart 8 storefront: the cart, checkout, pay, thank-you and sign-in pages (Phase 10a Task 12).
   Tokens only (the theme's colours, radius and fonts): the checkout pages are locked, so no
   preset stylesheet reaches them and they look the same in every theme. Logical properties
   only: the shop may read right to left. */

.sf-co{ display: grid; gap: 24px; padding-block: 32px 0; }
.sf-co-title{ margin-block-end: 4px; }
.sf-co-lead{ font-size: 17px; overflow-wrap: anywhere; }
.sf-co-hint{ color: var(--muted); font-size: 14px; }
.sf-co-link{ background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: 14px; }
.sf-co-link:hover{ color: var(--accent); }
.sf-co-amount, .sf-co-row > :last-child{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Notices: the services' refusals and the page's own answers. */
.sf-co-notice{ padding: 12px 16px; border-radius: var(--r); background: var(--tile); border-inline-start: 4px solid var(--line); }
.sf-co-notice-error, .sf-co-notice-warning{ border-inline-start-color: var(--danger); }
.sf-co-notice-success{ border-inline-start-color: var(--accent); }

/* Forms. */
.sf-co-form{ display: grid; gap: 16px; justify-items: start; }
.sf-co-field{ display: grid; gap: 6px; inline-size: 100%; max-inline-size: 480px; }
.sf-co-field label{ font-weight: 600; font-size: 14px; }
.sf-co-input{ inline-size: 100%; min-block-size: 44px; padding-inline: 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); }
.sf-co-input::placeholder{ color: var(--placeholder); }
.sf-co-input:focus{ border-color: var(--ink); outline: none; }
.sf-co-input[aria-invalid="true"]{ border-color: var(--danger); }
.sf-co-error{ color: var(--danger); font-size: 14px; }
.sf-co-choices{ display: grid; gap: 8px; inline-size: 100%; margin: 0; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); }
.sf-co-choices legend{ padding-inline: 6px; font-weight: 600; }
.sf-co-choice{ display: flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; }
.sf-co-terms-link{ margin-block: -4px 0; margin-inline-start: 30px; font-size: 0.875rem; }
.sf-co-choice .sf-co-amount{ margin-inline-start: auto; }
.sf-co-choice input{ inline-size: 18px; block-size: 18px; accent-color: var(--accent); flex: none; }
.sf-co-address{ display: grid; gap: 12px; inline-size: 100%; margin: 0; padding: 0; border: 0; }
.sf-co-address legend{ font-family: var(--font-heading); font-weight: 700; font-size: 17px; margin-block-end: 8px; }

/* The steps: the open one as a form, the saved ones summed up, the later ones waiting. */
.sf-co-steps{ list-style: none; display: grid; gap: 16px; }
.sf-co-step{ display: grid; gap: 12px; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); }
.sf-co-step-open{ border-color: var(--ink); }
.sf-co-step-waiting{ color: var(--muted); }
.sf-co-step-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-co-step-title{ font-size: 19px; }
.sf-co-step-number{ display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; margin-inline-end: 6px; border-radius: 50%; background: var(--tile); font-family: var(--font-mono); font-size: 14px; }
.sf-co-step-open .sf-co-step-number{ background: var(--ink); color: var(--on-ink); }
.sf-co-step-summary{ color: var(--muted); font-size: 14px; }

/* Rows of label and amount: the cart summary, the review and the totals. */
.sf-co-row{ display: flex; justify-content: space-between; gap: 16px; padding-block: 6px; }
.sf-co-total{ border-block-start: 1.5px solid var(--line); margin-block-start: 6px; padding-block-start: 12px; font-weight: 700; font-size: 17px; }
.sf-co-totals{ margin: 0; }
.sf-co-totals dd{ margin: 0; }
.sf-co-review{ display: grid; gap: 14px; }
.sf-co-review-lines, .sf-co-review-parts, .sf-co-change-list{ list-style: none; }
.sf-co-change-list{ display: grid; gap: 6px; padding-inline-start: 0; }

/* The confirm-changes dialog, open in the page flow (no script needed). */
.sf-co-dialog{ position: static; display: grid; gap: 12px; inline-size: 100%; margin: 0; padding: 20px; border: 1.5px solid var(--danger); border-radius: var(--r); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

/* The cart. */
.sf-co-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.sf-co-lines{ display: grid; gap: 24px; }
.sf-co-summary{ display: grid; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--tile); position: sticky; inset-block-start: 24px; }
.sf-co-group-title{ font-size: 17px; margin-block-end: 8px; }
.sf-co-group-sub{ color: var(--muted); }
.sf-cart-lines{ list-style: none; display: grid; }
.sf-cart-line{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "img main qty total" "img main remove remove"; gap: 6px 16px; align-items: center; padding-block: 16px; border-block-end: 1px solid var(--line); }
.sf-cart-line-img{ grid-area: img; inline-size: 64px; block-size: 64px; object-fit: cover; border-radius: var(--r); background: var(--tile); }
.sf-cart-line-main{ grid-area: main; display: grid; gap: 4px; }
.sf-cart-line-options{ color: var(--muted); font-size: 14px; }
.sf-cart-suggest{ margin-block-start: 32px; }
.sf-cart-line-title{ font-weight: 600; }
.sf-cart-line-unit{ color: var(--muted); font-size: 14px; }
.sf-cart-qty{ grid-area: qty; display: flex; gap: 8px; align-items: center; }
.sf-cart-qty-input{ inline-size: 76px; }
.sf-cart-line-total{ grid-area: total; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; min-inline-size: 90px; }
.sf-cart-remove{ grid-area: remove; justify-self: end; }

/* The pay page. */
.sf-pay-part-paid{ border-color: var(--line); }
.sf-pay-card{ display: grid; gap: 12px; }
.sf-pay-card-form{ min-block-size: 0; }
.sf-pay-instructions{ padding: 12px 16px; border-radius: var(--r); background: var(--tile); white-space: pre-line; }

/* The sign-in pages: one narrow column. */
.sf-auth{ max-inline-size: 560px; }

@media (max-width: 900px){
	.sf-co-layout{ grid-template-columns: minmax(0, 1fr); }
	.sf-co-summary{ position: static; }
}

@media (max-width: 560px){
	.sf-cart-line{ grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "img main main" "qty qty total" "remove remove remove"; }
	.sf-co-step{ padding: 16px; }
}