/* ================================================================================================
   COURSES.CSS - the scheduled-course pages: /courses, /courses/{slug}, the cart and checkout
   course lines, and the My courses pages. Loaded after store.css, on the same token ramp
   (--brand, --green, --gold, --ink ramp, --line, --radius-card, --ease). Page-specific only.

   Read: trust-first enrolment pages for phone visitors in Kuwait, in the store's own clinical
   utility language (navy, green action, gold warning, pill buttons, 14px cards).
   VARIANCE 3, MOTION 2, DENSITY 4.
   Interaction thesis: nothing moves on entry. The only motion is the 160ms press and hover
   feedback the store already uses, plus the sticky mobile bar appearing. Under reduced motion
   even that is instant.

   Written with logical properties (inline/block, start/end) so it mirrors correctly in RTL.
   Without JavaScript: the seat stepper is a plain number field, the sticky bar stays hidden.
   ================================================================================================ */

.crs {
  --crs-ok-ink: color-mix(in oklch, var(--green) 100%, black 48%);
  --crs-ok-tint: color-mix(in oklch, var(--green) 11%, white 89%);
  --crs-warn-ink: color-mix(in oklch, var(--gold) 100%, black 64%);
  --crs-warn-tint: color-mix(in oklch, var(--gold) 20%, white 80%);
  --crs-gap: clamp(18px, 3vw, 32px);
}

.c-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.crs-actions, .empty-state .crs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 16px; }
.empty-state .crs-actions .btn { margin-block-start: 0; }
.crs-empty p { max-width: 54ch; margin-inline: auto; font-size: 0.95rem; color: var(--ink-soft); }
.crs-empty h3 { font-size: 1.1rem; }

.crs-note { margin-block-start: 26px; font-size: 0.92rem; color: var(--ink-soft); }
.crs-note a, .crs-maplink, .crs-account-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Listing --------------------------------------------------------------------------------- */
.crs-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 20px; }
.crs-filter .chip { min-height: 44px; font-size: 0.9rem; }

.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.crs-grid > li { display: flex; }

.crs-card { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: border-color 160ms ease, box-shadow 200ms var(--ease); }
.crs-card:focus-within { border-color: var(--brand); outline: 3px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) {
  .crs-card:hover { border-color: var(--brand); box-shadow: 0 16px 28px -20px rgba(25, 79, 144, 0.45); }
}
.crs-card-cover { aspect-ratio: 16 / 9; background: var(--brand-tint); }
.crs-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.crs-card-cover-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--brand); }
.crs-card-cover-ph svg { width: 44px; height: 44px; }
.crs-card--full .crs-card-cover img, .crs-card--started .crs-card-cover img, .crs-card--closed .crs-card-cover img { filter: grayscale(0.5); }

.crs-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.crs-card-cat { font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); }
.crs-card-title { font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.crs-card-title a::after { content: ""; position: absolute; inset: 0; }
.crs-card-title a:focus-visible { outline: none; }

.crs-facts { display: grid; gap: 7px; list-style: none; padding: 0; margin: 0; }
.crs-facts li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; line-height: 1.4; color: var(--ink); }
.crs-facts svg { flex: none; width: 17px; height: 17px; margin-block-start: 2px; color: var(--brand); }

.crs-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-start: auto; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.crs-price { font-variant-numeric: tabular-nums; color: var(--brand); line-height: 1.2; }
.crs-price b { font-size: 1.25rem; font-weight: 800; }
.crs-price span { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }

.crs-state { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: 999px; font-size: 0.84rem; font-weight: 800; line-height: 1.2; background: var(--brand-tint); color: var(--brand-deep); }
.crs-state--open { background: var(--crs-ok-tint); color: var(--crs-ok-ink); }
.crs-state--low { background: var(--crs-warn-tint); color: var(--crs-warn-ink); }
.crs-state--full, .crs-state--closed, .crs-state--started { background: var(--surface); color: var(--ink-soft); }
.crs-state--waitlist, .crs-state--soon { background: var(--brand-tint); color: var(--brand-deep); }

/* ---- Course page ------------------------------------------------------------------------------ */
.crs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--crs-gap); align-items: start; }
@media (min-width: 900px) {
  .crs-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .crs-buy { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: 96px; }
  .crs-main { grid-column: 1; grid-row: 1; }
}

.crs-buy { display: grid; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 1px 0 rgba(25, 79, 144, 0.04), 0 18px 34px -28px rgba(25, 79, 144, 0.35); scroll-margin-block-start: 100px; }
.crs-buy-price { font-variant-numeric: tabular-nums; color: var(--brand); line-height: 1.1; }
.crs-buy-price b { font-size: clamp(2rem, 8vw, 2.4rem); font-weight: 800; letter-spacing: -0.01em; }
.crs-buy-price span { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.crs-buy-note { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.crs-buy-note--lead { color: var(--ink); font-size: 0.95rem; }

.crs-meter-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.crs-meter-bar span { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.crs-meter--low .crs-meter-bar span { background: var(--gold); }
.crs-meter--full .crs-meter-bar span, .crs-meter--waitlist .crs-meter-bar span, .crs-meter--closed .crs-meter-bar span, .crs-meter--started .crs-meter-bar span { background: var(--ink-faint); }
.crs-meter-text { margin-block-start: 7px; font-size: 0.92rem; color: var(--ink-soft); }
.crs-meter-text b { color: var(--ink); font-weight: 800; }
.crs-meter--soon .crs-meter-bar { display: none; }

.crs-form { display: grid; gap: 12px; }
.crs-seatpick { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crs-seatpick label { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.c-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.c-stepper button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: #fff; color: var(--brand); font-size: 1.2rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.c-stepper button[hidden] { display: none; }
.c-stepper button:hover:not(:disabled) { background: var(--brand-tint); }
.c-stepper button:active:not(:disabled) { transform: scale(0.94); }
.c-stepper button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.c-stepper input { width: 52px; height: 44px; border: 0; border-inline: 1.5px solid var(--line); text-align: center; font: inherit; font-size: 1rem; font-weight: 800; color: var(--ink); background: #fff; -moz-appearance: textfield; appearance: textfield; }
.c-stepper input::-webkit-outer-spin-button, .c-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-stepper button:focus-visible, .c-stepper input:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.crs-total { font-size: 0.95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.crs-total b { color: var(--ink); font-size: 1.05rem; }

.crs-cta { min-height: 48px; font-size: 0.95rem; touch-action: manipulation; }
.crs-waitlist .field label { font-size: 0.9rem; }
.crs-waitlist .field input { font-size: 1rem; }

.crs-mine { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: var(--crs-ok-tint); color: var(--crs-ok-ink); font-size: 0.92rem; line-height: 1.45; }
.crs-mine b { font-size: 1rem; }

.crs-main { display: grid; gap: clamp(22px, 3vw, 32px); min-width: 0; }
.crs-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--brand-tint); }

.crs-block { padding: 0; }
.crs-block h2 { font-size: 1.15rem; font-weight: 800; color: var(--brand); margin-block-end: 12px; }
.crs-block p { font-size: 1rem; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.crs-block p + p { margin-block-start: 10px; }
.crs-prose p { max-width: 68ch; }

.crs-facts-grid { display: grid; gap: 16px; margin: 0; }
.crs-facts-grid > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
@media (min-width: 560px) {
  .crs-facts-grid > div { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}
.crs-facts-grid dt { font-size: 0.9rem; font-weight: 800; color: var(--ink-soft); }
.crs-facts-grid dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }

.crs-sessions { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.crs-sessions li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.crs-session-day { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 2px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); font-size: 0.82rem; font-weight: 800; }
.crs-session-when { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.crs-session-when b { font-weight: 800; }
.crs-session-when span { color: var(--ink-soft); font-size: 0.95rem; }
.crs-session-note { font-style: normal; }
.crs-duration { margin-block-start: 10px; font-size: 0.92rem; color: var(--ink-soft); }

.crs-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.crs-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 68ch; }
.crs-list .tick { flex: none; width: 22px; height: 22px; margin-block-start: 1px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.crs-list .tick svg { width: 13px; height: 13px; }
.crs-list--plain li { padding-inline-start: 18px; position: relative; }
.crs-list--plain li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 0.7em; width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }

.crs-trainer { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.crs-trainer img, .crs-trainer-ph { flex: none; width: 72px; height: 72px; border-radius: 999px; object-fit: cover; background: var(--brand-tint); }
.crs-trainer-ph { display: grid; place-items: center; color: var(--brand); font-size: 1.6rem; font-weight: 800; }
.crs-trainer-name { font-size: 1.05rem; font-weight: 800; }
.crs-trainer-bio { margin-block-start: 4px; font-size: 0.95rem; color: var(--ink-soft); }

.crs-policy { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.crs-video { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.crs-video .btn { margin-block-start: 14px; }

/* ---- Sticky enrol bar (phones, only with JavaScript) --------------------------------------------- */
.crs-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 84px max(10px, env(safe-area-inset-bottom)) 16px; background: rgba(255, 255, 255, 0.97); border-block-start: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(25, 79, 144, 0.5); }
.crs-sticky[hidden] { display: none; }
.crs-sticky-price { font-variant-numeric: tabular-nums; color: var(--brand); line-height: 1.15; }
.crs-sticky-price b { font-size: 1.15rem; font-weight: 800; }
.crs-sticky-price span { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.crs-sticky .btn { min-height: 46px; touch-action: manipulation; }
@media (min-width: 900px) { .crs-sticky { display: none; } }

/* ---- Cart and checkout lines ---------------------------------------------------------------------- */
.seat-select { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; }
.cart-course-problem { margin-block-start: 6px; font-size: 0.88rem; font-weight: 700; color: var(--danger); line-height: 1.4; }
.cart-course-problem a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.crs-seatrow + .crs-seatrow { margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.crs-seatrow-title { margin-block-end: 8px; font-size: 1rem; font-weight: 800; color: var(--ink); }

/* ---- My courses --------------------------------------------------------------------------------------- */
.crs-account-h { margin: 0 0 -6px; font-size: 1.05rem; font-weight: 800; color: var(--brand); }
.crs-account-h:not(:first-child) { margin-block-start: 14px; }
.crs-enrolments { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.crs-enrolment { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.crs-enrolment-main { display: grid; gap: 9px; min-width: 0; flex: 1 1 260px; }
.crs-enrolment-main h3 { font-size: 1.05rem; font-weight: 800; }
.crs-enrolment-main h3 a { color: var(--ink); }
.crs-enrolment-main h3 a:hover { color: var(--brand); text-decoration: underline; }
.crs-enrolment-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.crs-detail .sub { font-size: 0.95rem; color: var(--ink-soft); }
.crs-detail .btn { min-height: 46px; }
.crs-cancel { margin-block-start: 14px; }
.crs-cancel > summary { list-style: none; width: fit-content; cursor: pointer; }
.crs-cancel > summary::-webkit-details-marker { display: none; }
.crs-cancel-panel { display: grid; gap: 12px; margin-block-start: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.crs-cancel-panel p { font-size: 0.95rem; line-height: 1.5; max-width: 62ch; }

@media (max-width: 559px) {
  .crs-buy { padding: 16px; }
  .crs-trainer { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .crs-card, .c-stepper button, .btn { transition: none; }
}

.status-chip.st-good { color: color-mix(in oklch, var(--green) 100%, black 48%); }

@media (max-width: 560px) {
  .cart-line-course { grid-template-columns: 56px minmax(0, 1fr); }
  .cart-line-course .cart-thumb { width: 56px; height: 56px; }
  .cart-line-course .cart-line-right { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; justify-items: stretch; }
  .cart-line-course .cart-line-actions { justify-content: flex-end; }
  .cart-line-course .cart-info h4 { font-size: 1rem; }
  .cart-line-course .cart-info .variant, .cart-line-course .cart-info .unit { font-size: 0.86rem; }
}