/* Courtside Wellness — shared styles */

:root {
  --pink: #F28FC0;
  --pink-dark: #E06AA8;
  --pink-soft: #FBE4EF;
  --cream: #F5F1EA;
  --cream-dark: #EDE6D8;
  --ink: #2B2622;
  --ink-soft: #6B655F;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(43, 38, 34, 0.08);
  --shadow-pop: 0 18px 40px rgba(224, 106, 168, 0.2);
  --gradient-pink: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
  --gradient-card: linear-gradient(160deg, #FFFFFF 0%, var(--pink-soft) 220%);
  --max-width: 1120px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, .brand {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 234, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cream-dark);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 24px;
  /* Wider than the site's normal --max-width (1120px) on purpose — with 8
     nav items (once the Admin link is showing) plus the logo and CTA
     button, 1120px isn't enough room and everything crowds together
     regardless of how wide the browser window itself is, since max-width
     is what actually caps this row's content, not the viewport. */
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}

.brand img { height: 52px; width: auto; }

.brand span { color: var(--pink-dark); }

.nav-links {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--pink-dark);
}

.nav-cta {
  background: var(--gradient-pink);
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }

/* Set by js/script.js's BOOKINGS_OPEN flag while bookings aren't live yet. */
.btn-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.btn-disabled:hover { transform: none; box-shadow: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 100px 24px 80px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--pink-soft) 0%, var(--cream) 65%);
}

.hero-logo {
  height: 150px;
  width: auto;
  margin: 0 auto 24px;
}

@media (max-width: 600px) {
  .hero-logo { height: 110px; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-dark);
  background: linear-gradient(135deg, var(--pink-soft) 0%, #F6D3E6 100%);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero p.lead {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 32px;
}

.btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap; /* buttons are meant to be one line, e.g. admin-table action buttons like "Grant Membership" wrapping mid-word looked broken */
}

.btn-primary {
  background: var(--gradient-pink);
  color: var(--white);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.btn-outline:hover { background: var(--ink); color: var(--white); }

.hero-meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Two-column hero (used on open-day.html) — event details on the left,
   the RSVP form right beside it in a .booking-card, so the form is visible
   without scrolling instead of sitting in its own section further down. */
.hero-split {
  padding: 80px 24px 70px;
  background: radial-gradient(circle at 50% 0%, var(--pink-soft) 0%, var(--cream) 65%);
}

.hero-split-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}

.hero-split-content h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin: 16px 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
}

.hero-split-content .lead {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
  text-align: left;
}

.hero-split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hero-split-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
}

.hero-split-list li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-pink);
  color: var(--white);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.hero-split-form.booking-card { margin-top: 0; }

@media (max-width: 860px) {
  .hero-split-inner { grid-template-columns: 1fr; }
  .hero-split-content { text-align: center; }
  .hero-split-content h1,
  .hero-split-content .lead,
  .hero-split-content > p { text-align: center; }
  .hero-split-list { justify-items: center; }
}

/* ---------- Sections ---------- */

section { padding: 70px 24px; }

/* Alternate white/cream bands down the page for rhythm, without touching
   every page's markup — .hero always sits first so it keeps its own
   gradient wash instead of this rule. */
section:not(.hero):nth-of-type(even) { background: var(--white); }

/* White and cream are close enough in tone that a colour change alone can
   read as "no gap" on pages where sections sit tight against each other
   (padding-top: 0). A hairline seam makes every section boundary visible
   regardless of which two colours happen to be adjacent. */
section:not(.hero) { border-top: 1px solid rgba(43, 38, 34, 0.06); }

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 10px;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0 0 20px;
  font-weight: 700;
}

.lead-text {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 640px;
}

/* ---------- Stats strip ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.stats.stats-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 420px;
  margin-top: 0;
}

.stats.stats-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
  margin-top: 0;
}

@media (max-width: 600px) {
  .stats.stats-3 { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
}

.stat-card {
  background: var(--gradient-card);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

.stat-card .stat-number {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--pink-dark);
}

.stat-card .stat-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ---------- Cards / features ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.feature-card {
  background: var(--gradient-card);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-pink);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

.feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.feature-card p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.95rem;
}

.badge-soon {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pink-dark);
  background: var(--pink-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* ---------- Price / list block ---------- */

.price-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.price-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-pink);
}

.price-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-panel li {
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.98rem;
}

.price-panel li:last-child { border-bottom: none; }

.price-panel li strong { color: var(--ink); }

.price-tag {
  text-align: center;
  background: linear-gradient(160deg, var(--pink-soft) 0%, var(--cream) 100%);
  border-radius: var(--radius);
  padding: 32px 20px;
}

.price-tag .amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--pink-dark);
}

.price-tag .unit {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.notice {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--pink-soft);
  border-left: 3px solid var(--pink);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Slim strip pinned above the header, on every page, so a time-sensitive
   notice (e.g. Open Day) is visible the instant the page loads, no
   scrolling past the hero required. */
.announce-bar {
  background: var(--gradient-pink);
  text-align: center;
  padding: 10px 16px;
}

.announce-bar a {
  color: var(--white);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
}

.announce-bar a:hover { text-decoration: underline; }

.announce-bar .arrow { font-weight: 700; }

/* Higher-visibility callout than .notice — used for time-sensitive offers
   (e.g. the Open Day membership promo) where a plain pink-soft box would
   blend in too much with the rest of the page. */
.promo-banner {
  background: var(--gradient-pink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 22px 26px;
  text-align: center;
  box-shadow: var(--shadow-pop);
}

.promo-banner .promo-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.promo-banner p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.95;
}

.promo-banner a {
  display: inline-block;
  margin-top: 12px;
  background: var(--white);
  color: var(--pink-dark) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
}

/* Compact single-line email capture (e.g. coming-soon.html's "Notify Me"),
   distinct from .form-grid which stacks labelled fields vertically. */
.notify-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.notify-form input {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--cream-dark);
  font-size: 0.95rem;
  font-family: inherit;
}

.notify-form input:focus {
  outline: none;
  border-color: var(--pink);
}

/* ---------- Hours table ---------- */

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hours-table td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.95rem;
}

.hours-table tr:last-child td { border-bottom: none; }

.hours-table td:first-child { font-weight: 600; }

.hours-table td:last-child { text-align: right; color: var(--ink-soft); }

/* ---------- Contact block ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px;
  align-items: start;
}

.info-block {
  background: var(--gradient-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.info-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-pink);
}

.info-block h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.info-block p { margin: 0; color: var(--ink-soft); }

.map-embed {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

/* ---------- Message Us modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 38, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 32px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-pink);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
}

.modal-close:hover { color: var(--ink); }

.modal-box textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--cream-dark);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 100px;
}

.modal-box textarea:focus { outline: none; border-color: var(--pink); }

/* ---------- Booking widget ---------- */

.booking-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  margin-top: 36px;
  position: relative;
  overflow: hidden;
}

.booking-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-pink);
}

.booking-steps {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.booking-steps .step {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream);
}

.booking-steps .step.active {
  background: var(--gradient-pink);
  color: var(--white);
  font-weight: 600;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}

.date-option {
  border: 1.5px solid var(--cream-dark);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.date-option:hover { border-color: var(--pink); }

.date-option.selected {
  border-color: var(--pink);
  background: var(--pink-soft);
}

.date-option .dow {
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.date-option .dnum {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2px 0;
}

.date-option .spots {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.date-option .spots.low { color: var(--pink-dark); font-weight: 600; }
.date-option .spots.full { color: #B3261E; font-weight: 600; }

.capacity-status {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--cream);
  font-size: 0.9rem;
}

.capacity-status.info { background: var(--pink-soft); color: var(--pink-dark); font-weight: 600; }

.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  max-width: 460px;
}

.form-grid label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}

.form-grid input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--cream-dark);
  font-size: 0.95rem;
  font-family: inherit;
}

.form-grid input:focus {
  outline: none;
  border-color: var(--pink);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.95rem;
}

.summary-row.total {
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: none;
  padding-top: 16px;
}

.booking-hidden { display: none !important; }

.form-error {
  color: #B3261E;
  font-size: 0.85rem;
  margin-top: -8px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(160deg, #2B2622 0%, #3A2230 100%);
  color: var(--cream);
  padding: 50px 24px 30px;
  margin-top: 40px;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
}

.footer-grid h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 234, 0.6);
  margin: 0 0 14px;
}

.footer-grid p, .footer-grid a {
  color: rgba(245, 241, 234, 0.85);
  font-size: 0.92rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 241, 234, 0.15);
  font-size: 0.82rem;
  color: rgba(245, 241, 234, 0.5);
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .price-panel { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .booking-card { padding: 24px; }
}

/* The nav has seven links plus the logo/wordmark and "Book a Class" button
   (eight links once "Admin" appears for admin accounts), too much to fit on
   one line on anything but a wide desktop screen, so the hamburger menu
   takes over well before things get cramped or wrap badly. */
@media (max-width: 1600px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 1px solid var(--cream-dark);
    z-index: 60;
  }

  .nav-cta.open {
    display: inline-block;
    margin: 0 24px 20px;
  }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
}

/* On phones, the brand wordmark (icon + full "Courtside Wellness" text at
   1.3rem, non-shrinking/nowrap by design further up) gets wide enough that
   it leaves the .nav-toggle hamburger button without room next to it — the
   flex row doesn't wrap, so the toggle gets pushed past the right edge of
   the viewport and becomes invisible/unreachable instead of just crowding
   things. Below 480px, shrink the nav's own padding/gap and the wordmark
   itself so the icon + toggle reliably both fit down to a 320px-wide phone. */
@media (max-width: 480px) {
  .nav { padding: 14px 16px; gap: 10px; }
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand img { height: 36px; }
}

/* ---------- Admin dashboard ---------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.admin-table-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  overflow-x: auto;
  margin-bottom: 40px;
  border-top: 5px solid var(--pink-dark);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--cream-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cream-dark);
  vertical-align: middle;
}

.admin-table td .btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  margin-right: 6px;
}

.admin-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.admin-status-pending_payment { background: #FFF4E5; color: #8A5A00; }
.admin-status-confirmed { background: #E7F5EC; color: #1E6B3E; }
.admin-status-cancelled { background: #FCE8E6; color: #B3261E; }

/* Tags a staff/admin account in the Members table, so it's clear why a
   familiar name is mixed in with paying customers. */
.admin-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pink-soft);
  color: var(--pink-dark);
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.admin-tab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--cream-dark);
  background: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.admin-tab:hover { border-color: var(--pink); }

.admin-tab.active {
  background: var(--gradient-pink);
  border-color: transparent;
  color: var(--white) !important;
}

.admin-search {
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--cream-dark);
  font-size: 0.9rem;
  font-family: inherit;
  margin-bottom: 20px;
}

.admin-search:focus {
  outline: none;
  border-color: var(--pink);
}

/* ---------- Class type selector (booking step 1) ---------- */

.class-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}

.class-type-option {
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.class-type-option:hover { border-color: var(--pink); }

.class-type-option.selected {
  border-color: var(--pink);
  background: var(--pink-soft);
}

.class-type-option h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.class-type-option .amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--pink-dark);
  margin-bottom: 6px;
}

.class-type-option p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Day/time chips — broken out of the description paragraph so the
   timetable is scannable at a glance instead of one dense run-on sentence. */
.schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.schedule-chip {
  display: inline-block;
  background: var(--pink-soft);
  color: var(--pink-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}