/* ============================================================
   FitRoom Experience — the phase-4c shopfront.
   Pricing plus the checkout confirm/return/cancelled screens: the pages a
   visitor sees between the homepage and Stripe. Separate from sections.css
   deliberately — that file is the phase-1 one-pager's own sections (hero,
   services, schedule, about, contact) and legal; this one belongs to 4c,
   the same way admin.css is its own file rather than more of sections.css.
   ============================================================ */

/* ---- Pricing --------------------------------------------------------------
 * Task 12: PlanRepository::allPublic()'s first real caller. Same shape as
 * sections.css's .services/.service-card (surface section, base cards,
 * radius-l, border-thin) rather than a new vocabulary for one more card grid.
 *
 * Mobile-first with NO display:none anywhere. Constraint 31 is written about
 * .admin-table, but the lesson generalises: a breakpoint that hides content
 * shows NOTHING on a phone with every DOM assertion still green — 4b hit that
 * in three consecutive tasks. This grid has one implicit column below 640px
 * because no grid-template-columns is set until then, so a phone gets a plain
 * stacked list rather than a rule actively suppressing anything.
 */
.pricing { background: var(--surface); }

/* The same ground as a PANEL, where no full-width section exists to paint it.
   «Τιμοκατάλογος» sits inside the account container on the body's --base, and a
   --base card on a --base page is 1.00:1 — only its hairline border says where
   it is. Padding and radius make the panel read as one object. It sets no text
   colour, so it stays out of a11y_test's sweep; the cards inside declare their
   own, exactly as they do on the public page. */
.pricing--panel {
  padding: var(--space-s);
  border-radius: var(--radius-l);
}

.pricing__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}

.pricing__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--base);
  border: var(--border-thin);
  border-radius: var(--radius-l);
  padding: var(--space-m);
}

.pricing__price { font-size: var(--step-3); margin: 0; }

.pricing__was {
  display: block;
  font-size: var(--step-0);
  color: var(--muted);
  text-decoration: line-through;
}

.pricing__facts { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; color: var(--muted); }

.pricing__desc { margin: 0; color: var(--muted); }

/*
 * STRIPE_MODE='off' is the shipping default, and the list is still worth
 * having without card payments — she can read the prices and telephone.
 */
.pricing__contact { margin: 0; color: var(--muted); }

/* Pushes the button to the card's foot so a row of cards with different
   amounts of text still lines its buttons up. */
.pricing__card .btn { margin-top: auto; }

/* ---- Prices are for members (landing AX, 2026-09-10) ----
   A visitor reads every package with «Συνδέσου για να δεις την τιμή» where the
   price was, and one banner above the list.

   COLOUR AND BACKGROUND ARE DECLARED TOGETHER IN BOTH RULES THAT CARRY TEXT, on
   purpose. a11y_test's sweep resolves only a rule that sets both as
   var(--token) — the gap that let 3c ship a 1.42:1 badge. The link is the one
   worth watching: --ember-text on --base measures 4.54:1, AA by four
   hundredths, so a token nudged by a shade would fail it and the sweep is what
   would say so. */
.pricing__gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-block-end: var(--space-m);
  padding: var(--space-m);
  color: var(--ink);
  background: var(--base);
  border: var(--border-thin);
  border-radius: var(--radius-l);
}
/* Grows to push the buttons right on a wide screen and wraps above them on a
   phone, rather than squeezing either. */
.pricing__gate-lede { margin: 0; flex: 1 1 16rem; font-weight: 600; }
.pricing__gate-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.pricing__locked { margin: 0; }
.pricing__locked-link {
  display: inline-flex;
  align-items: center;
  /* The 44px floor base.css declares for every interactive target — this link
     is the only thing on the card a visitor can press. */
  min-height: var(--tap-min);
  font-weight: 600;
  color: var(--ember-text);
  background: var(--base);
}

/* The signup prompt under the list. A RULE, not a panel: it has to separate the
   invitation from the plans without competing with the cards for weight, and it
   is also the whole page when no plan is visible_public — which is the state a
   fresh clone starts in. Deliberately sets no background, so the pair stays out
   of a11y_test's colour sweep; --muted on the section's --surface is 5.05:1,
   measured with that suite's own helper. Wraps on a narrow screen rather than
   squeezing the button. */
.pricing__signup {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.pricing__signup-lede { margin: 0; color: var(--muted); }

@media (min-width: 640px) {
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}

/* ---- Checkout -------------------------------------------------------------
 * Task 14: confirm, return and cancelled. A single narrow column on every
 * width — this is a payment screen, and there is nothing to put beside the
 * number she is about to be charged. No display:none and no breakpoint at all,
 * for the reason the pricing block above records.
 *
 * Tokens are the real ones. The plan's own CSS named --space-6, --space-4,
 * --radius-lg and --radius-md, none of which exist in tokens.css; a var() that
 * resolves to nothing fails silently and leaves an unpadded, unrounded box.
 */
.checkout {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-m);
}

.checkout__summary {
  padding: var(--space-m);
  background: var(--surface);
  border: var(--border-thin);
  border-radius: var(--radius-l);
  margin-bottom: var(--space-m);
}

.checkout__label { margin: 0 0 var(--space-s); font-weight: 600; }

.checkout__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  margin: 0;
  font-size: var(--step-2);
}

.checkout__starts { margin: var(--space-s) 0 0; color: var(--muted); }

.checkout__notice {
  padding: var(--space-s);
  border-radius: var(--radius-m);
  margin-bottom: var(--space-m);
}

/*
 * Colour AND text. WCAG 1.4.1 — never a visual treatment alone, which is the
 * rule the account statement's struck-through void rows already follow. This
 * pair sets color and background in one rule with both as var(), so it IS
 * under a11y_test's sweep: --ink on --sand, not a decorative choice.
 */
.checkout__notice--warn {
  background: var(--sand);
  color: var(--ink);
}