/* ==========================================================================
   Commerce — enrollment box + purchasable training cards
   Loaded only on program / short_program / training singles and the training
   archive (see SafetyCore\Commerce\Commerce::enqueue).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Enrollment box
   Sits inside .pr-hero__actions and .pr-cta__actions, both of which are
   horizontal flex rows — so the box itself is a column that keeps the price
   above the button without disturbing the sibling ghost buttons.
   -------------------------------------------------------------------------- */
.sa-enroll {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  align-items: flex-start;
}

.sa-enroll__price {
  font-size: var(--fs-24, 1.5rem);
  font-weight: 700;
  line-height: var(--lh-tight, 1.2);
  color: var(--text, #0A0A0B);
}

/* WooCommerce wraps struck-through originals in <del> and the live price in
   <ins>; normalise both so a sale reads clearly. */
.sa-enroll__price del {
  font-size: var(--fs-16, 1rem);
  font-weight: 500;
  color: var(--text-faint, #9CA0AB);
  margin-inline-end: var(--sp-2, 8px);
}

.sa-enroll__price ins {
  text-decoration: none;
  color: var(--accent, #E11932);
}

.sa-enroll__note,
.sa-enroll__seats {
  margin: 0;
  font-size: var(--fs-13, 0.8125rem);
  line-height: var(--lh-snug, 1.35);
  color: var(--text-muted, #5B5F69);
}

.sa-enroll__seats {
  font-weight: 600;
}

.sa-enroll__form {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
}

.sa-enroll__qty {
  inline-size: 4.5rem;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  font: inherit;
  font-size: var(--fs-15, 0.9375rem);
  color: var(--text, #0A0A0B);
  background: var(--bg, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  text-align: center;
}

.sa-enroll__qty:focus-visible {
  outline: 2px solid var(--accent, #E11932);
  outline-offset: 2px;
}

/* On the dark CTA band the bordered input needs to hold its own. */
.pr-cta .sa-enroll__price,
.pr-cta .sa-enroll__seats,
.pr-cta .sa-enroll__note {
  color: var(--white, #fff);
}

.pr-cta .sa-enroll__price ins {
  color: var(--white, #fff);
}

.pr-cta .sa-enroll__qty {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white, #fff);
}

/* --------------------------------------------------------------------------
   Training card price
   The card's link/lede/layout rules live in trainings.css, which is enqueued
   for this archive regardless of WooCommerce — the <a> wrapper is rendered
   unconditionally, so its styles must be too. Only the price is commerce-only.
   -------------------------------------------------------------------------- */
.tr-card__price {
  margin-block-start: auto;
  font-size: var(--fs-16, 1rem);
  font-weight: 700;
  color: var(--text, #0A0A0B);
}

.tr-card__price del {
  font-size: var(--fs-13, 0.8125rem);
  font-weight: 500;
  color: var(--text-faint, #9CA0AB);
  margin-inline-end: var(--sp-1, 4px);
}

.tr-card__price ins {
  text-decoration: none;
  color: var(--accent, #E11932);
}

/* --------------------------------------------------------------------------
   Training agenda table — reuses .pr-table, narrows the numeric column
   -------------------------------------------------------------------------- */
.tr-agenda td:nth-child(3),
.tr-agenda th:nth-child(3) {
  inline-size: 6rem;
  text-align: center;
}

@media (max-width: 640px) {
  .sa-enroll {
    inline-size: 100%;
  }

  .sa-enroll__form {
    inline-size: 100%;
  }

  .sa-enroll__form .btn {
    flex: 1 1 auto;
  }
}