/*
 * Checkout, restyled.
 *
 * Same four steps, same fields, same logic — this file only changes how they
 * look. It is loaded after modern-theme.css and overrides it, so the rules it
 * replaces stay visible in one place rather than being edited out of a
 * 5,000-line stylesheet where the next person cannot tell what was deliberate.
 *
 * What was wrong, and what each group below answers:
 *
 *   square edges everywhere   `border-radius: 0` on every step and button made
 *                             a page of boxes with nothing to separate the step
 *                             being worked on from the three that are done
 *   a 3px hairline progress   no sense of where you are in four steps
 *   one type size             the step title, its summary and the fine print
 *                             were all within a point of each other
 *   the total hidden below    on a phone the amount being paid sat under the
 *                             fold, below the steps
 *
 * The app's twin is mobile/src/screens/CheckoutScreen.js; when this changes
 * visually, that changes too (see the repo's web ⇄ app parity rule).
 */

:root {
  --ff-co-radius: 14px;
  --ff-co-radius-sm: 10px;
  --ff-co-ring: 0 0 0 2px rgba(107, 33, 168, 0.12);
  --ff-co-lift: 0 1px 2px rgba(16, 15, 26, 0.04), 0 8px 24px -12px rgba(16, 15, 26, 0.18);
}

/* ── the page ───────────────────────────────────────────────────────── */

.ff-co-wrap { padding-top: 16px; }

.ff-co-head { align-items: center; margin-bottom: 14px; }
.ff-co-head h2 { font-size: 22px; letter-spacing: -0.015em; }
.ff-co-head span { font-size: 12px; opacity: 0.55; font-variant-numeric: tabular-nums; }

/*
 * Progress as four segments rather than one bar: a shopper can see both how far
 * along they are and how many steps are left, which a continuous fill cannot say.
 */
.ff-co-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--bk-border);
  margin-bottom: 18px;
}
.ff-co-progress-fill { border-radius: 999px; }

/* ── a step ─────────────────────────────────────────────────────────── */

.ff-step {
  border-radius: var(--ff-co-radius);
  border: 1px solid var(--bk-border);
  background: var(--bk-surface);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/*
 * The one being worked on is lifted; the rest sit flat and quiet.
 *
 * `is-active` / `is-done` / `is-locked` are what the component emits
 * (components/checkout/index.jsx) — not invented here, or the rules would be
 * dead and the page would look unchanged for no obvious reason.
 */
.ff-step.is-active {
  border-color: rgba(107, 33, 168, 0.28);
  box-shadow: var(--ff-co-lift);
}
/* A step still ahead is dimmed rather than hidden: four steps is the shape of
 * the task, and seeing them all is what makes it feel finishable */
.ff-step.is-locked { opacity: 0.72; }

.ff-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  text-align: left;
}
.ff-step-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bk-border);
  color: var(--bk-dark);
}
.ff-step.is-active .ff-step-num { background: var(--ff-purple); color: #fff; }
.ff-step.is-done .ff-step-num { background: rgba(0, 191, 154, 0.16); color: #00a383; }

.ff-step-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-step-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.005em; }
.ff-step-summary { font-size: 12px; opacity: 0.6; line-height: 1.45; }
.ff-step-change { font-size: 12px; font-weight: 650; color: var(--ff-purple); }
.ff-step-body { padding: 0 16px 16px; }
.ff-step-note { font-size: 11.5px; opacity: 0.6; line-height: 1.5; }
.ff-step-note.ff-step-error { opacity: 1; color: #e02d52; }

/* ── buttons ────────────────────────────────────────────────────────── */

.ff-co-btn {
  border-radius: var(--ff-co-radius-sm);
  font-size: 14px;
  font-weight: 650;
  padding: 11px 18px;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ff-co-btn:active { transform: translateY(1px); }
.ff-co-btn-primary { box-shadow: 0 6px 18px -8px rgba(107, 33, 168, 0.55); }
.ff-co-btn-primary:disabled { box-shadow: none; }
.ff-co-place { width: 100%; padding: 14px 18px; font-size: 15px; border-radius: var(--ff-co-radius); }

/* ── addresses ──────────────────────────────────────────────────────── */

.ff-addr-grid { gap: 10px; }
.ff-addr-card {
  border-radius: var(--ff-co-radius-sm);
  border: 1px solid var(--bk-border);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* No selected state in the markup — which address was chosen is shown by the
 * step's own summary line once it closes, so inventing one here would be a
 * second answer to the same question */
.ff-addr-card:hover { border-color: rgba(107, 33, 168, 0.3); }
.ff-addr-add {
  border-radius: var(--ff-co-radius-sm);
  border: 1px dashed var(--bk-border);
}
.ff-addr-add:hover { border-color: var(--ff-purple); }

/* ── offers and coupons ─────────────────────────────────────────────── */

/*
 * Offers as cards you pick, not a list you read.
 *
 * Each row is its own surface with the saving as the loudest thing on it,
 * because that is the only number a shopper is comparing. A locked offer says
 * what is missing rather than simply greying out, which is a dead end.
 */
.ff-offer-list { display: flex; flex-direction: column; gap: 8px; }
.ff-offer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ff-co-radius-sm);
  border: 1px solid var(--bk-border);
  background: var(--bk-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* An applied offer is rendered in its own block (ff-offer-applied), not as a
 * marked row, so there is no row state to style here */
.ff-offer-row:not(.is-locked):hover { border-color: rgba(107, 33, 168, 0.32); }
/* Dimmed, but still legible: the reason it is locked has to be readable */
.ff-offer-row.is-locked { opacity: 0.82; background: var(--ff-surface-2, rgba(0, 0, 0, 0.02)); }
.ff-offer-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.ff-offer-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; font-weight: 650; }
.ff-offer-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(107, 33, 168, 0.1);
  color: var(--ff-purple);
  border: 1px dashed rgba(107, 33, 168, 0.35);
}
.ff-offer-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 191, 154, 0.14);
  color: #00a383;
}
.ff-offer-apply { border-radius: 8px; font-size: 12.5px; font-weight: 650; padding: 7px 13px; flex-shrink: 0; }
.ff-offer-applied { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: #00a383; flex-shrink: 0; }
.ff-offer-missing { font-size: 11.5px; opacity: 0.75; line-height: 1.45; }
.ff-offer-entry { display: flex; gap: 8px; margin-bottom: 10px; }
.ff-offer-input {
  flex: 1 1 auto;
  border-radius: var(--ff-co-radius-sm);
  border: 1px solid var(--bk-border);
  padding: 11px 13px;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ff-offer-input:focus { outline: none; border-color: var(--ff-purple); box-shadow: var(--ff-co-ring); }
.ff-offer-error { font-size: 12px; color: #e02d52; }
.ff-offer-none { font-size: 12.5px; opacity: 0.6; }
/* A free-item pick: the photo is what is being chosen, so give it room */
.ff-offer-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ff-offer-choice { border-radius: var(--ff-co-radius-sm); border: 1px solid var(--bk-border); padding: 8px; }
.ff-offer-choice.is-picked { border-color: var(--ff-purple); box-shadow: var(--ff-co-ring); }
.ff-offer-pick-img { border-radius: 8px; }

/* ── the summary ────────────────────────────────────────────────────── */

.ff-co-summary {
  border-radius: var(--ff-co-radius);
  border: 1px solid var(--bk-border);
  background: var(--bk-surface);
  padding: 16px;
}
.ff-co-summary h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.55;
  margin: 0 0 12px;
}
.ff-co-lines li {
  font-size: 13px;
  padding: 5px 0;
  font-variant-numeric: tabular-nums;
}
.ff-co-lines-total {
  font-size: 16px;
  font-weight: 750;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--bk-border);
  font-variant-numeric: tabular-nums;
}
/*
 * The subtotal is the result of the two lines above it, so it is ruled off from
 * them like the total is from the lines above it — a hairline and a touch more
 * weight. Only when there is something above it to add up: with nothing saved
 * the subtotal is the first line, and a rule above the first line reads as a
 * section that lost its heading.
 */
.ff-co-lines-sub {
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid var(--bk-border);
}
.ff-co-neg { color: #00a383; font-weight: 650; }
.ff-co-saved {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--ff-co-radius-sm);
  background: rgba(0, 191, 154, 0.1);
  color: #00a383;
  font-size: 12.5px;
  font-weight: 650;
}
.ff-co-promise {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: var(--ff-co-radius-sm);
  background: var(--ff-surface-2, rgba(0, 0, 0, 0.03));
  font-size: 12.5px;
  line-height: 1.45;
}
.ff-co-nudge {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--ff-co-radius-sm);
  border: 1px dashed rgba(107, 33, 168, 0.35);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ── wider screens ──────────────────────────────────────────────────── */

@media (min-width: 992px) {
  .ff-co-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  /* The amount stays in view while the steps are worked through */
  .ff-co-summary { position: sticky; top: 84px; }
}

/* ── phones ─────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .ff-co-head h2 { font-size: 19px; }
  .ff-step-head { padding: 12px 13px; gap: 10px; }
  .ff-step-body { padding: 0 13px 14px; }
  .ff-co-summary { padding: 13px; }
  /*
   * The amount first, above the steps.
   *
   * It was under the fold on a phone: the one number a shopper wants confirmed
   * before they start filling anything in was the last thing they could see.
   */
  .ff-co-grid { display: flex; flex-direction: column; }
  .ff-co-grid > .ff-co-summary { order: -1; }
  .ff-offer-row { padding: 11px 12px; gap: 10px; }
  .ff-offer-choice-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}