/* ==========================================================================
   Aöra — Club Aöra points (inc/club.php)
   Loaded only on the cart, the checkout and Mi cuenta. Everything else comes
   from base.css (.field .label .select .btn .link-more) / aora.css (.otable,
   .block-title in .aora-cuenta) / woo.css (the summary column).
   ========================================================================== */

/* The box in the cart summary and the checkout summary */
.club-box {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-1);
  min-width: 0;
}
.aora-pago .club-box { margin: var(--s-4) 0; }
.club-box-h {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; color: var(--c-ink);
}
.club-box-h svg { flex: none; color: var(--c-gold-deep); }
.club-box-t { margin: 0; line-height: 1.5; }
.club-box-t strong { color: var(--c-ink); font-weight: 700; }
.club-box .muted { color: var(--text-2); }
.club-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.club-form .field { flex: 1 1 180px; min-width: 0; }
.club-form .select { font-size: var(--fs-sm); }
.club-form .btn { flex: none; }

/* Mi cuenta > Club Aöra */
.club-stats {
  display: grid; gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .club-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.club-stat {
  padding: var(--s-4) var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.club-stat-n {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  line-height: var(--lh-tight); color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.club-stat-l { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--text-2); }
.club-how { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-5); margin: 0; font-size: var(--fs-sm); }
.club-how li { list-style: disc; }
.club-table .num { text-align: right; }
.aora-cuenta .otable.club-table th.num,
.aora-cuenta .otable.club-table td.num { text-align: right; }
.club-plus { color: var(--c-stock); }
.club-minus { color: var(--c-ink); }
.club-note { display: block; font-size: var(--fs-xs); color: var(--text-2); }

/* Dashboard line and the line under an order */
.club-dash,
.club-orderline {
  padding: var(--s-3) var(--s-4);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.club-orderline { margin-top: var(--s-4); }

/* Phone: one block per movement instead of a sideways-scrolling table */
.club-table .cl-lbl { display: none; }
@media (max-width: 639px) {
  .aora-cuenta .otable.club-table { min-width: 0; width: 100%; }
  .club-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .club-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4);
    align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
  }
  .aora-cuenta .otable.club-table td { display: block; padding: 0; border: 0; }
  .club-table .cl-date { grid-column: 1; grid-row: 1; font-size: var(--fs-xs); color: var(--text-2); }
  .club-table .cl-pts { grid-column: 2; grid-row: 1; }
  .club-table .cl-type { grid-column: 1; grid-row: 2; }
  .club-table .cl-bal { grid-column: 2; grid-row: 2; font-size: var(--fs-xs); color: var(--text-2); font-weight: 400; }
  .club-table .cl-order { grid-column: 1 / -1; grid-row: 3; font-size: var(--fs-xs); }
  .club-table .cl-order:has(> span[aria-hidden]) { display: none; }
  .club-table .cl-lbl { display: inline; }
}