/**
 * Membership pricing grid — [courseglade_plans].
 *
 * A quiet comparison grid: name, price, what it covers, then the features
 * under a hairline. Cards stretch to equal height and pin their buttons to the
 * bottom, so three plans read as one set rather than three boxes.
 *
 * Tokens only, and no font-family: the plugin inherits the theme's typography
 * on the frontend, so hierarchy here is built from size, weight and spacing.
 */

.courseglade-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin: 2rem 0;
}

.courseglade-plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-lg);
  background: var(--courseglade-surface-lowest);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.courseglade-plans__card:hover {
  transform: translateY(-3px);
  border-color: var(--courseglade-gray-300);
  box-shadow: var(--courseglade-shadow);
}

.courseglade-plans__card.is-current {
  border-color: var(--courseglade-primary);
  box-shadow: 0 0 0 1px var(--courseglade-primary);
}

.courseglade-plans__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.75rem 1.5rem;
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.courseglade-plans__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--courseglade-on-surface);
}

.courseglade-plans__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 0 0.25rem;
}

.courseglade-plans__amount {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--courseglade-on-surface);
}

.courseglade-plans__cadence {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
}

/* What the plan reaches. A pill boxed a sentence that is often long enough to
   wrap, which made a two-line label out of a one-line fact. */
.courseglade-plans__scope {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--courseglade-on-surface);
}

.courseglade-plans__trial {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-success-text);
}

.courseglade-plans__desc {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--courseglade-on-surface-muted);
}

/* ── Features ────────────────────────────────────────────────────────────── */

/* A hairline between what the plan is and what it includes: above it the card
   describes itself, below it the rows are meant to be compared across cards. */
.courseglade-plans__features {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--courseglade-border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.courseglade-plans__features li {
  position: relative;
  padding-left: 1.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--courseglade-on-surface);
}

/* Markers are drawn in CSS: no icon font, no SVG per row. */
.courseglade-plans__features li.is-check::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.28rem;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--courseglade-success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.courseglade-plans__features li.is-cross::before,
.courseglade-plans__features li.is-cross::after {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.6rem;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--courseglade-danger);
}

.courseglade-plans__features li.is-cross::before {
  transform: rotate(45deg);
}

.courseglade-plans__features li.is-cross::after {
  transform: rotate(-45deg);
}

.courseglade-plans__features li.is-dash::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.65rem;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--courseglade-gray-500);
}

/* `none` keeps the indent, so text still lines up with its neighbours. */
.courseglade-plans__features li.is-cross,
.courseglade-plans__features li.is-dash,
.courseglade-plans__features li.is-none {
  color: var(--courseglade-on-surface-muted);
}

/* ── Call to action ──────────────────────────────────────────────────────── */

.courseglade-plans__held {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-primary);
}

/* auto pins the button to the bottom, so CTAs line up across cards whatever
   the description and feature counts are. The margin is the minimum gap when
   a card is tall enough that auto resolves to zero. */
.courseglade-plans__cta {
  margin-top: auto;
  justify-content: center;
  text-align: center;
}

.courseglade-plans__desc + .courseglade-plans__cta,
.courseglade-plans__scope + .courseglade-plans__cta,
.courseglade-plans__trial + .courseglade-plans__cta {
  margin-top: 1.5rem;
}

.courseglade-plans__empty {
  padding: 2rem;
  border: 1px dashed var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  text-align: center;
  color: var(--courseglade-on-surface-muted);
}

@media (prefers-reduced-motion: reduce) {
  .courseglade-plans__card,
  .courseglade-plans__card:hover {
    transform: none;
    transition: none;
  }
}

/* ── Dashboard: your memberships ─────────────────────────────────────────── */

/* One card per membership, stacked rather than gridded: each carries a state,
   a price, four facts and an action, and two of those side by side is a pair
   of dense columns nobody reads across. */
.courseglade-sub {
  margin-bottom: 16px;
  padding: 20px 24px;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-lg);
  background: var(--courseglade-surface-lowest);
  box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-sub__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.courseglade-sub__naming {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.courseglade-sub__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.courseglade-sub__title b {
  font-size: 1rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

.courseglade-sub__covers {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

/* The amount large and the cadence small against it, reading as one price. */
.courseglade-sub__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}

.courseglade-sub__price b {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--courseglade-on-surface);
}

.courseglade-sub__price span {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

/* A membership on its way out has one thing to say, and it is not a fact in a
   grid: how long is left. */
.courseglade-sub__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--courseglade-radius);
  background: var(--courseglade-warning-surface);
  border: 1px solid var(--courseglade-warning-border);
}

.courseglade-sub__notice-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--courseglade-warning);
}

.courseglade-sub__notice p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-sub__notice b {
  color: var(--courseglade-on-surface);
}

.courseglade-sub__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--courseglade-border);
  border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-sub__facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.courseglade-sub__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-sub__facts b {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface);
}

.courseglade-sub__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Cancelling is the exception on this card, so it is the shared quiet button
   rather than the filled primary beside it: neutral until it is reached for,
   destructive once it is. The variant lives in base.css — a second
   implementation here would drift from the Delete beside a review. */

.courseglade-sub__note {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

/* The card holds the table rather than framing it: the header band and the
   rows run to the card's own edges, and only the title and the footer are
   inset. A table floating inside padding reads as a second box. */
.courseglade-sub-history {
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-lg);
  background: var(--courseglade-surface-lowest);
  box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-sub-history__title {
  margin: 0;
  padding: 18px 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

/* The sub-line here is the card that was charged, not an order reference —
   it is read, not skimmed past, so it carries more weight than the muted
   default the other ledgers use. */
.courseglade-sub-history .courseglade-earnings-table__sale span {
  font-size: 0.75rem;
  color: var(--courseglade-on-surface-secondary);
}

/* The last row closes on the footer's border, or on the card's own. */
.courseglade-sub-history table tbody tr:last-child td {
  border-bottom: 0;
}

.courseglade-sub-history__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--courseglade-border);
  background: var(--courseglade-surface);
}

.courseglade-sub-history__range {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-sub-history__foot .courseglade-earnings-pagination {
  margin: 0;
}

@media (max-width: 768px) {
  .courseglade-sub__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.courseglade-dialog {
  width: min(420px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-lg);
  background: var(--courseglade-surface-lowest);
  color: var(--courseglade-on-surface);
  box-shadow: var(--courseglade-shadow-lg);
}

.courseglade-dialog::backdrop {
  background: rgba(26, 28, 30, 0.45);
}

.courseglade-dialog__form {
  margin: 0;
  padding: 1.75rem;
}

.courseglade-dialog__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

.courseglade-dialog__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--courseglade-on-surface-muted);
}

/* The safe option sits first and quieter; the destructive one is named for
   what it does rather than "OK". */
.courseglade-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

@media (max-width: 380px) {
  .courseglade-dialog__actions {
    flex-direction: column-reverse;
  }

  .courseglade-dialog__actions .courseglade-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Course page: subscribe to this course ───────────────────────────────── */

.courseglade-course-sidebar__plans {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* A quiet heading, not a section title: it sits under a Buy button and must
   not compete with it. */
.courseglade-course-sidebar__plans-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--courseglade-on-surface-muted);
}

/* Name left, price right, so a stack of tiers compares down the right edge. */
.courseglade-course-sidebar__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

.courseglade-course-sidebar__plan-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courseglade-course-sidebar__plan-price {
  flex-shrink: 0;
  font-weight: 700;
}

.courseglade-course-sidebar__plan-trial {
  margin: -0.125rem 0 0.25rem;
  font-size: 0.75rem;
  color: var(--courseglade-success-text);
}