/* ==========================================================
   Pinkbird Studio — styles
   ----------------------------------------------------------
   Mobile-first: the base styles below target a phone screen.
   The brand colours live in the :root block so they are easy
   to adjust in one place.
   ========================================================== */

:root {
  --pink: #E26D9A;
  --pink-dark: #C9527F;
  --coral: #F4A2A8;
  --bg: #FFF7F3;
  --card: #FFFFFF;
  --text: #3F3138;
  --muted: #927E86;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(201, 82, 127, 0.10);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   Header — sticky horizontal nav, ClassPass-style.
   Mobile-first: at base widths we show only the brand and a
   hamburger; nav links and auth live in a slide-out drawer.
   Desktop styles kick in at the .header-inner @media block below.
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  /* One continuous pink line under the whole header — replaces
     the per-link underlines so the accent stays aligned no matter
     how labels wrap. */
  border-bottom: 1.5px solid #F3C9D8;
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Brand block — text logo with small "Phuket" sub-label. */
.brand-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pink-dark);
  letter-spacing: 0.6px;
}
.tagline {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Main horizontal nav — hidden on mobile (drawer takes over). */
.header-nav {
  display: none;
  align-items: center;
  gap: 6px;
  flex: 1;
  margin-left: 12px;
}
.nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;             /* keep "How it works" on one line  */
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover {
  color: var(--pink-dark);
  background: rgba(252, 228, 236, 0.55);
}
/* Admin nav link — same shape as other nav links but tinted pink
   to flag it as an elevated/role-only menu item. */
.nav-link-admin {
  color: var(--pink-dark);
  font-weight: 700;
}
.drawer-link-admin {
  color: var(--pink-dark);
  font-weight: 700;
}

/* Right-hand cluster: sign-in / user chip / CTA. */
.header-right {
  display: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Sign-in cluster — Google button + "or use email" fallback link,
   stacked vertically so the email link sits beneath the Google
   button without crowding it. */
.signin-cluster {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gsi-wrap {
  display: inline-flex;
  align-items: center;
}
.gsi-wrap iframe {
  border-radius: 999px;
}
.signin-email-link {
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.signin-email-link:hover {
  color: var(--pink-dark);
  text-decoration: underline;
}

/* Signed-in user chip — avatar + first name + tiny sign-out × */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  background: #fff;
  border: 1.5px solid #F3C9D8;
  border-radius: 999px;
}
.user-chip-pic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: #FBF1F4;
}
.user-chip-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pink-dark);
  white-space: nowrap;
}
.user-chip-out {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.user-chip-out:hover {
  background: #FCE4EC;
  color: var(--pink-dark);
}

/* "Log in" pill — single entry point that opens the Welcome-back
   modal. Outlined style so it doesn't compete with the pink CTA. */
.login-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pink-dark);
  background: #fff;
  border: 1.5px solid #F3C9D8;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.login-btn:hover {
  background: #FCE4EC;
  border-color: var(--pink);
}
.drawer-login-btn {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 1rem;
}

/* Bright pink CTA button. Rectangular with softly rounded corners
   (matches the modal Confirm buttons). Auto-hidden by JS when there
   is no active free-trial package. */
.trial-cta {
  display: inline-flex;
  align-items: center;
  background: var(--pink);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  white-space: nowrap;             /* keep "Claim free trial" on one line */
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(226, 109, 154, 0.25);
}
.trial-cta:hover {
  background: var(--pink-dark);
}
.trial-cta:active {
  transform: scale(0.97);
}

/* Hamburger button — only visible on mobile. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.nav-toggle:hover { background: rgba(252, 228, 236, 0.5); }
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--pink-dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- mobile slide-out drawer ---------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.open {
  visibility: visible;
  pointer-events: auto;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(63, 49, 56, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mobile-drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(82vw, 320px);
  height: 100%;
  background: #fff;
  padding: 24px 22px 28px;
  box-shadow: -8px 0 24px rgba(63, 49, 56, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.mobile-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-close:hover {
  background: #FCE4EC;
  color: var(--pink-dark);
}
.drawer-nav {
  display: flex;
  flex-direction: column;
}
.drawer-link {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 14px 6px;
  border-bottom: 1px solid rgba(226, 109, 154, 0.08);
  transition: color 0.15s ease;
}
.drawer-link:hover { color: var(--pink-dark); }
.drawer-divider {
  height: 1px;
  background: rgba(226, 109, 154, 0.12);
  margin: 4px 0;
}
.drawer-auth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
}
.drawer-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 14px 18px;
  font-size: 1rem;
}

/* ---------- desktop layout: ≥760px ---------- */
@media (min-width: 760px) {
  .header-inner {
    padding: 14px 28px;
    gap: 24px;
  }
  .brand {
    font-size: 1.3rem;
  }
  .header-nav   { display: flex; }
  .header-right { display: flex; }
  .nav-toggle   { display: none; }
  .mobile-drawer { display: none; }
}

/* Hide the small "or use email" link on narrow screens of the
   desktop layout so the right cluster stays tidy. The drawer
   still has the email option for mobile. */
@media (min-width: 760px) and (max-width: 880px) {
  .signin-email-link { display: none; }
}

/* ---------- in-page "How it works" section ---------- */
.how-it-works {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(226, 109, 154, 0.10);
  scroll-margin-top: 80px;
}
.hiw-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}
.hiw-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.hiw-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hiw-steps h3 {
  font-size: 1rem;
  color: var(--pink-dark);
  margin-bottom: 4px;
}
.hiw-steps p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- layout ---------- */
.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.section-title {
  font-size: 1.25rem;
  color: var(--pink-dark);
  margin-bottom: 16px;
}

/* ---------- week label + day tabs (the weekly timetable) ---------- */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.week-nav .week-label {
  flex: 1;
  margin: 0;
}
.week-nav-btn {
  background: #fff;
  border: 1.5px solid #F3C9D8;
  color: var(--pink-dark);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.week-nav-btn:hover { background: #FCE4EC; }

/* Small "Today" pill that appears in the week-nav when viewing a
   non-current week. Tapping it resets to the current week. */
.today-btn {
  background: var(--pink);
  color: #fff;
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.today-btn:hover { background: var(--pink-dark); border-color: var(--pink-dark); }
.week-label {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.export-button {
  display: block;
  margin: 18px auto 0;
  background: #fff;
  color: var(--pink-dark);
  border: 1.5px solid #F3C9D8;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.export-button:hover { background: #FCE4EC; }
.day-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.day-tab {
  flex: 1 0 auto;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.day-tab-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.day-tab-date {
  font-size: 1.05rem;
  font-weight: 700;
}
.day-tab.today {
  border-color: var(--pink);
  position: relative;
}
/* Small pink dot under any "today" tab so it's instantly findable
   even when the user has tapped a different day's tab. */
.day-tab.today::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.day-tab.today.active::after { background: #fff; }
.day-tab.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

/* ---------- timetable: shared pieces ---------- */
.band-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--pink-dark);
  white-space: nowrap;
}
/* a class entry = an info box with a Book button below it */
.class-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chip-info {
  flex: 0 0 auto;
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  padding: 8px 10px;
}
.chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chip-time { font-size: 0.75rem; font-weight: 700; color: var(--pink-dark); }
.chip-name { font-size: 0.88rem; color: var(--text); margin-top: 2px; }
.chip-meta { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }

/* Coloured availability dot (green / amber / red). */
.chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.chip-dot-high   { background: #A8D5BA; }   /* soft sage    — plenty of spots */
.chip-dot-medium { background: #ECC097; }   /* warm apricot — filling up      */

/* "Full" badge — replaces the dot when the class is fully booked. */
.chip-status-full {
  background: #ECB9C7;
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Booked state: leave the class card alone (same pink as other
   chips) — only the Book button turns green so it reads as
   "you've got this one" without recoloring the tile. */

/* "Booked ✓" button — solid sage. Now tappable: opens the cancel
   confirmation modal so the customer can drop the booking right from
   the timetable without going to My bookings. */
.chip-book-booked {
  background: #8FCEA8 !important;
  border-color: #6FBA8C !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  opacity: 1;
}
.chip-book-booked:hover { background: #7EBE98 !important; }

/* "Booked" badge — small sage pill in the top-right when the
   signed-in user already has this class. Just the pill — the chip
   card stays its normal white/pink. */
.chip-status-booked {
  background: #C9E7D4;
  color: #2D6F4A;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

/* "Past" badge — replaces the dot when the class has already started. */
.chip-status-past {
  background: #E5E1E3;
  color: #8C8389;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Past class chip — visible but dimmed, no button. */
.chip-past .chip-info {
  background: #F4F1F2;
  border-color: #E2DBDE;
  cursor: default;
}
.chip-past .chip-time,
.chip-past .chip-name,
.chip-past .chip-meta {
  color: #9B9398;
}

/* "Join waitlist" button — softer styling than the regular Book button. */
.chip-book-full {
  background: #F8EBEE;
  border-color: #ECC9D2;
  color: #B3527A;
}
.chip-book-full:hover { background: #F2DDE3; }


.chip-book {
  flex: 0 0 auto;
  border: 1.5px solid #F3C9D8;
  background: #FCE4EC;
  color: var(--pink-dark);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chip-book:hover { background: #F8D3E0; }
.cell-empty { color: #D9C9CF; font-size: 0.8rem; text-align: center; }
.placeholder { color: var(--muted); font-style: italic; }

/* ---------- loading indicators ---------- */
/* Small inline spinner — pink ring with a transparent gap. Used
   inside views while their data is loading. */
.pb-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid #F3C9D8;
  border-top-color: var(--pink);
  animation: pb-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
.pb-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
@keyframes pb-spin {
  to { transform: rotate(360deg); }
}

/* Centered loading block — spinner + a short message. Drop into any
   section while it's fetching data. */
.pb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 0.92rem;
  font-style: normal;
}

/* Thin top progress bar — pulses across the screen while any fetch
   is in flight. Anchored to the very top of the viewport above the
   sticky header so it's always visible. */
.pb-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}
.pb-progress-bar.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--pink) 30%,
    var(--pink-dark) 50%,
    var(--pink) 70%,
    transparent 100%);
  animation: pb-progress-slide 1.2s linear infinite;
}
@keyframes pb-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- day view (phone screens) ---------- */
.day-bands { display: flex; flex-direction: column; gap: 16px; }
.band-row { display: flex; gap: 10px; align-items: flex-start; }
.band-row .band-label { flex: 0 0 72px; padding-top: 9px; }
.band-classes { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.band-classes .cell-empty { text-align: left; padding: 9px 0; }

/* ---------- grid view (wide screens) ---------- */
.grid-view { display: none; }
.timetable-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 6px;
}
.grid-day-head {
  text-align: center;
  padding: 8px 4px;
  background: #FCE4EC;
  border-radius: 10px;
}
.gd-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--pink-dark);
}
.gd-date { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.grid-day-head.today {
  background: var(--pink);
}
.grid-day-head.today .gd-name,
.grid-day-head.today .gd-date { color: #fff; }
.grid-band-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FCE4EC;
  border-radius: 10px;
  padding: 6px 4px;
}
.grid-cell {
  background: #FBF1F4;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 70px;
}
.grid-cell .chip-meta { display: none; }
.grid-cell .cell-empty { margin: auto; }

/* ---------- responsive: switch to the grid on wider screens ---------- */
@media (min-width: 760px) {
  .container { max-width: 940px; }
  .grid-view { display: block; }
  .day-view { display: none; }
}

/* ---------- booking form ---------- */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.booking-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.booking-form input {
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}
.booking-form input:focus {
  outline: none;
  border-color: var(--pink);
}
.selected-class {
  background: #FCE4EC;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.sc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sc-name { font-size: 1.05rem; font-weight: 700; color: var(--pink-dark); }
.sc-detail { font-size: 0.9rem; color: var(--muted); margin-top: 3px; }

/* Pink pill that shows "X / Y" — booked vs capacity. */
.count-pill {
  display: inline-block;
  background: #FCE4EC;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Inside the salmon selected-class block, give the pill a white
   background so it pops out against the pink panel. */
.selected-class .count-pill {
  background: #fff;
}
.booking-error {
  background: #FBE3E0;
  color: #B3261E;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

/* ---------- buttons ---------- */
.submit-button {
  background: var(--pink);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 4px;
}
.submit-button:active { background: var(--pink-dark); }
.submit-button:disabled { opacity: 0.6; cursor: default; }
.back-button {
  background: none;
  border: none;
  color: var(--pink-dark);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 8px;
}

/* ---------- confirmation ---------- */
.confirmation-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px;
  text-align: center;
}
.confirmation-card h2 {
  color: var(--pink-dark);
  margin-bottom: 12px;
}

/* ---------- footer ---------- */
.site-footer {
  text-align: center;
  padding: 24px 20px 32px;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-admin { margin-top: 6px; }
.footer-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.75rem;
  opacity: 0.7;
}
.footer-link:hover { opacity: 1; color: var(--pink-dark); }

/* ---------- admin view ---------- */
/* Top-level admin tabs: Classes / Packages / Customers.
   Bigger and more prominent than the inner Calendar/List toggle —
   these are the major sections of the admin app. */
.admin-tabs {
  display: flex;
  gap: 4px;
  background: #FBF1F4;
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.admin-tab {
  flex: 1;
  position: relative;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.admin-tab:hover { color: var(--pink-dark); }
.admin-tab-active {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(201, 82, 127, 0.18);
}
.admin-tab-active:hover { color: #fff; }
.admin-tab-badge {
  background: #fff;
  color: var(--pink-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.admin-tab:not(.admin-tab-active) .admin-tab-badge {
  background: var(--pink);
  color: #fff;
}
.admin-panel { display: block; }
.admin-panel.hidden { display: none !important; }

/* View toggle (Calendar / List) — reuses the .ac-pill chip style. */
.admin-view-toggle {
  display: flex;
  gap: 6px;
  background: #FBF1F4;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
}

/* Calendar / List toggle inside the Classes tab.
   Overrides the shared .ac-pill styling so it doesn't look like a
   second copy of the top-level admin tabs above it. White "inset"
   pill (iOS-style segmented control), no bright pink. */
.admin-view-toggle {
  padding: 3px;
  border-radius: 10px;
  margin-bottom: 12px;
  max-width: 280px;     /* don't stretch full-width — it's a small control */
}
.admin-view-toggle .ac-pill span {
  padding: 6px 8px;
  font-size: 0.8rem;
  color: var(--muted);
  border-radius: 7px;
}
.admin-view-toggle .ac-pill input:checked + span {
  background: #fff;
  color: var(--pink-dark);
  box-shadow: 0 1px 3px rgba(201, 82, 127, 0.18);
}

/* At-a-glance stats strip above the Calendar/List content. */
.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.stat-tile {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--pink-dark);
  line-height: 1;
  letter-spacing: -0.5px;
}
.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
/* Waitlist tile leans into the dusty-rose so it ties to the waitlist colour
   used everywhere else. */
.stat-tile-wait .stat-num { color: #B3527A; }

@media (min-width: 760px) {
  .stat-num { font-size: 2rem; }
}

/* Admin Calendar — wide-screen 7-day grid (default), hidden on mobile. */
.admin-grid {
  display: none;
}
@media (min-width: 760px) {
  .admin-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 12px;
  }
  .admin-day-view { display: none; }
}
.admin-grid-head {
  text-align: center;
  padding: 8px 4px;
  background: #FCE4EC;
  border-radius: 10px;
}
.admin-grid-head .agh-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--pink-dark);
}
.admin-grid-head .agh-date {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}
.admin-grid-head.today {
  background: var(--pink);
}
.admin-grid-head.today .agh-name,
.admin-grid-head.today .agh-date { color: #fff; }
.admin-grid-cell {
  background: #FBF1F4;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
}
.admin-grid-cell .cell-empty { margin: auto; }

/* Mobile day-view: day tabs + a vertical list of tiles. */
.admin-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* The "tile" itself — used in both the grid cells and the mobile list.
   It's a <button> so the whole thing is keyboard-accessible. */
.admin-tile {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.admin-tile:hover {
  border-color: var(--pink);
  box-shadow: 0 4px 14px rgba(201, 82, 127, 0.12);
  transform: translateY(-1px);
}
.admin-tile .at-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-tile .at-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink-dark);
}
.admin-tile .at-name {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
}
.admin-tile .at-instructor {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}
/* The BIG booking count — the headline number of this view. */
.admin-tile .at-count {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pink-dark);
  line-height: 1.1;
  margin-top: 4px;
  letter-spacing: -0.5px;
}
.admin-tile .at-cap {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}
.admin-tile-full {
  background: #FFF5F7;
  border-color: #F3D7E0;
}
.admin-tile-full .at-count { color: #B3527A; }

/* Small "+ N waiting" line under the big count when there's a waitlist. */
.admin-tile .at-waitlist {
  font-size: 0.72rem;
  font-weight: 600;
  color: #B3527A;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* In mobile day-list, make the count even bigger since there's more room. */
.admin-day-list .admin-tile .at-count {
  font-size: 2.4rem;
}

/* Weekly summary panel (instructor breakdown + total) below calendar. */
.admin-summary {
  margin-top: 18px;
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.admin-summary-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 12px;
}
.admin-summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-summary-list li,
.admin-summary-total {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
}
.as-name { color: var(--text); font-weight: 600; }
.as-count {
  background: #FBF1F4;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}
.as-bookings {
  background: #FFF;
  border: 1.5px solid #F3C9D8;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}
.admin-summary-total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #EBD9E0;
  font-weight: 700;
  color: var(--pink-dark);
  font-size: 0.95rem;
}
.admin-summary-total .as-name { color: var(--pink-dark); }

/* Small, right-aligned "+ Add a class" button — secondary action,
   shouldn't compete with the top-level admin tabs above it. */
.add-class-btn {
  display: block;
  margin-left: auto;
  margin-bottom: 12px;
  background: #fff;
  color: var(--pink-dark);
  border: 1.5px solid #F3C9D8;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.add-class-btn:hover { background: #FCE4EC; }

/* Add-a-class modal — wider than waitlist so the form breathes. */
.add-class-card { max-width: 460px; }
.add-class-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.add-class-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.add-class-form input,
.add-class-form select {
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.add-class-form input:focus,
.add-class-form select:focus {
  outline: none;
  border-color: var(--pink);
}

/* Side-by-side rows (Time + Duration, Capacity + Price). */
.ac-row {
  display: flex;
  gap: 10px;
}
.ac-row label { flex: 1; min-width: 0; }

/* Class-type toggle (radio buttons styled as pill chips). */
.ac-opt {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}
.ac-help {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: 8px;
}
.ac-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac-type-label {
  font-size: 0.85rem;
  color: var(--muted);
}
.ac-toggle {
  display: flex;
  gap: 6px;
  background: #FBF1F4;
  padding: 4px;
  border-radius: 12px;
}
.ac-pill {
  flex: 1;
  cursor: pointer;
  position: relative;
}
.ac-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ac-pill span {
  display: block;
  text-align: center;
  padding: 9px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: 9px;
  transition: background 0.15s ease, color 0.15s ease;
}
.ac-pill input:checked + span {
  background: var(--pink);
  color: #fff;
}

.ac-success {
  text-align: center;
  padding: 14px 0 0;
}
.ac-success p {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 12px;
}

.admin-day-header {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #F3D7E0;
}
.admin-day-header:first-child { margin-top: 8px; }

.admin-class {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.admin-class-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #EBD9E0;
  margin-bottom: 10px;
}
.admin-class-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pink-dark);
}
.admin-class-meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
}
.admin-count {
  background: #FCE4EC;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Dot + count grouped together on the right side of the list card. */
.admin-class-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.admin-attendees { display: flex; flex-direction: column; gap: 6px; }
.admin-attendee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
  background: #FBF5F7;
}
.aa-main { flex: 1; min-width: 0; }
.aa-cancel {
  background: #fff;
  border: 1.5px solid #ECC9D2;
  color: #B3527A;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.aa-cancel:hover { background: #FBEDF1; }
.aa-cancel:disabled { opacity: 0.6; cursor: default; }
.aa-name {
  font-weight: 600;
  color: var(--text);
}
.aa-contact {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.aa-contact a {
  color: var(--pink-dark);
  text-decoration: none;
}
.aa-contact a:hover { text-decoration: underline; }
.admin-empty {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

.admin-class-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #EBD9E0;
}
.ac-edit-btn,
.ac-delete-btn {
  background: #fff;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ac-edit-btn {
  border: 1.5px solid #F3C9D8;
  color: var(--pink-dark);
}
.ac-edit-btn:hover { background: #FCE4EC; }
.ac-delete-btn {
  border: 1.5px solid #ECC9D2;
  color: #B3527A;
}
.ac-delete-btn:hover { background: #FBEDF1; }
.ac-edit-btn:disabled,
.ac-delete-btn:disabled { opacity: 0.6; cursor: default; }

.admin-waitlist {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #EBD9E0;
}
.admin-waitlist-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #B3527A;
  margin-bottom: 6px;
}
.admin-waitlist-row {
  background: #FBEEF2;
}

/* ---------- "My bookings" view ---------- */
.mb-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.mb-card {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
}
.mb-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.mb-class-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pink-dark);
}
.mb-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.mb-meta {
  font-size: 0.85rem;
  color: var(--muted);
}
.mb-ref {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.mb-cancel {
  align-self: flex-start;
  background: #fff;
  border: 1.5px solid #ECC9D2;
  color: #B3527A;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s ease;
}
.mb-cancel:hover { background: #FBEDF1; }
.mb-cancel:disabled { opacity: 0.6; cursor: default; }
.mb-card-cancelled {
  background: #F6ECEF;
  border-style: dashed;
}
.mb-cancelled {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
}
.mb-empty {
  text-align: center;
  padding: 28px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mb-empty p {
  color: var(--text);
  font-size: 0.95rem;
}
.mb-empty-sub {
  color: var(--muted) !important;
  font-size: 0.85rem !important;
  margin-top: 6px;
}

/* ---------- class details modal (admin) ---------- */
.details-card { max-width: 460px; }
.cd-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}
.cd-wait-pill {
  background: #FBEEF2;
  color: #B3527A;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.cd-section-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin: 14px 0 8px;
}
.cd-section-head-wait { color: #B3527A; }
.cd-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #EBD9E0;
}

/* ---------- waitlist popup ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(63, 49, 56, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: fadeIn 0.18s ease;
}
.modal-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(201, 82, 127, 0.28);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 380px;
  position: relative;
  animation: popIn 0.22s ease;
}
.modal-card h2 {
  color: var(--pink-dark);
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.modal-subtle {
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 10px;
}
.modal-body {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--pink-dark); }

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.waitlist-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.waitlist-form input {
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}
.waitlist-form input:focus {
  outline: none;
  border-color: var(--pink);
}
.waitlist-success {
  text-align: center;
  padding: 8px 0 0;
}
.waitlist-success p {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 14px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================
   PHASE 2 — Package shop, payment screen, pending payments
   ========================================================== */

/* ---------- Free-trial banner (top of timetable) ----------
   Whole-tile button — feels like a card you can tap, not an
   ad you'd scroll past. Soft gradient + green pill picks up
   the same "free / try" green used on the shop card so the
   visual language stays consistent. */
.free-trial-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "badge cta"
    "head  cta"
    "sub   cta";
  gap: 4px 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  /* Same gradient as the free-trial payment card — so the visual
     thread of "this is the free track" stays consistent from
     homepage banner → claim screen. */
  background: linear-gradient(135deg, #F4F9F1 0%, #DCEFE2 100%);
  border: none;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(108, 176, 136, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.free-trial-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(108, 176, 136, 0.24);
}
.ftb-badge {
  grid-area: badge;
  display: inline-block;
  background: #FFFFFF;
  color: #2D6F4A;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  justify-self: start;
}
.ftb-headline {
  grid-area: head;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2D6F4A;
  line-height: 1.25;
}
.ftb-sub {
  grid-area: sub;
  font-size: 0.85rem;
  color: #5C7B65;
  line-height: 1.3;
}
.ftb-cta {
  grid-area: cta;
  background: #6BB088;          /* same green as the shop's "Try free →" button */
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  white-space: nowrap;
  align-self: center;
  transition: background 0.15s ease;
}
.free-trial-banner:hover .ftb-cta { background: #549973; }

/* Photo-background variant — used when the package has a
   banner_image_url set. Background image + dark overlay come from
   inline style in JS; here we flip the foreground to white/pink
   so it reads against the photo. */
.free-trial-banner-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 130px;
  box-shadow: 0 4px 14px rgba(63, 49, 56, 0.18);
}
.free-trial-banner-photo .ftb-badge {
  background: rgba(255, 255, 255, 0.92);
  color: var(--pink-dark);
}
.free-trial-banner-photo .ftb-headline {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.free-trial-banner-photo .ftb-sub {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.free-trial-banner-photo .ftb-cta {
  background: var(--pink);
  color: #fff;
}
.free-trial-banner-photo:hover .ftb-cta { background: var(--pink-dark); }


/* ---------- shop ---------- */
.shop-blurb {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.shop-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px) {
  .shop-cards { grid-template-columns: 1fr 1fr; }
}
.shop-card {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
  position: relative;
}
.shop-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pink-dark);
}
.shop-card-classes {
  font-size: 1.95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.shop-card-classes-sub {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.shop-card-unlimited {
  display: inline-block;
  background: #FCE4EC;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.shop-card-validity {
  font-size: 0.82rem;
  color: var(--muted);
}
.shop-card-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pink-dark);
  margin-top: 4px;
  letter-spacing: -0.3px;
}
.shop-card-buy {
  margin-top: 10px;
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.shop-card-buy:hover { background: var(--pink-dark); }

/* Free-trial card variant — visually distinct so it reads as a
   "first one's on us" offer rather than another paid option. */
.shop-card-free {
  background: linear-gradient(155deg, #FFF7F3 0%, #FCE4EC 100%);
  border-color: #ECC9D2;
  position: relative;
}
.shop-card-free-badge {
  display: inline-block;
  background: #DCEFE2;
  color: #2D6F4A;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.shop-card-price-free {
  color: #2D6F4A;
  font-size: 1.6rem;
}
.shop-card-buy-free {
  background: #6BB088;
  color: #fff;
}
.shop-card-buy-free:hover { background: #549973; }

/* Free-trial intro block inside the payment screen (replaces the
   PromptPay card when the chosen package is ฿0). */
.pay-free-card {
  background: linear-gradient(155deg, #F4F9F1 0%, #DCEFE2 100%);
  border: 1.5px solid #BFE0CA;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.pay-free-card .pay-section-head { color: #2D6F4A; }
.pay-free-blurb {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
}
.shop-empty {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  box-shadow: var(--shadow);
}

/* ---------- payment screen ---------- */
.pay-card {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.pay-section-head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 12px;
}
.pay-promptpay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
}
.pay-promptpay .pp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.pay-promptpay .pp-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.pay-promptpay .pp-amount {
  color: var(--pink-dark);
  font-size: 1.4rem;
  letter-spacing: -0.3px;
}
/* Payment-method toggle: two pills above the payment details.
   Customer picks PromptPay QR or Bank transfer. */
.pay-method-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  background: #FBF1F4;
  padding: 4px;
  border-radius: 999px;
  align-self: stretch;
}
.pay-method-pill {
  flex: 1;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pay-method-pill:hover { color: var(--pink-dark); }
.pay-method-pill-active {
  background: #fff;
  color: var(--pink-dark);
  box-shadow: 0 1px 4px rgba(201, 82, 127, 0.10);
}

/* Panels wrapping the per-method details — same flex layout as the
   parent .pay-promptpay so the rows align nicely. */
.pay-method-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mono-spaced account number so the digit groups are easy to read. */
.pp-value-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.5px;
}

.pay-promptpay .pp-qr {
  margin-top: 10px;
  max-width: 200px;
  border-radius: 10px;
  border: 1.5px solid #EBD9E0;
  align-self: flex-start;
}
/* Wrapper that qrcode.js renders the live QR canvas into. */
.pay-promptpay .pp-qr-wrap {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1.5px solid #EBD9E0;
  border-radius: 12px;
  align-self: flex-start;
  display: inline-block;
}
.pay-promptpay .pp-qr-wrap canvas,
.pay-promptpay .pp-qr-wrap img {
  display: block;
  border-radius: 6px;
}
.pay-promptpay .pp-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

.pay-form { margin-top: 0; }
.pay-upload-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.pay-upload-label input[type="file"] {
  padding: 10px 12px;
  border: 1.5px dashed #ECC9D2;
  border-radius: 10px;
  background: #FBF1F4;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.pay-slip-preview {
  text-align: center;
  padding: 8px;
  background: #FBF1F4;
  border-radius: 10px;
  border: 1.5px solid #EBD9E0;
}
.pay-slip-preview img {
  max-width: 100%;
  max-height: 280px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.pay-success {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  text-align: center;
}
.pay-success h3 {
  color: var(--pink-dark);
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.pay-success p {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

/* ---------- admin: pending payments ---------- */
.admin-pending {
  background: #FFF5F7;
  border: 1.5px solid #F3D7E0;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.admin-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 12px;
}
.admin-pending-count {
  background: var(--pink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.admin-pending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pending-card {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
}
.pending-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #FBF1F4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pending-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.pending-thumb-empty {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  padding: 6px;
}
.pending-info { display: flex; flex-direction: column; gap: 2px; }
.pending-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}
.pending-package {
  font-size: 0.85rem;
  color: var(--pink-dark);
  font-weight: 600;
}
.pending-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.pending-meta a {
  color: var(--pink-dark);
  text-decoration: none;
}
.pending-meta a:hover { text-decoration: underline; }
.pending-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.pending-actions button {
  flex: 1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1.5px solid transparent;
  font-family: inherit;
}
.pending-confirm {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.pending-confirm:hover { background: var(--pink-dark); border-color: var(--pink-dark); }
.pending-reject {
  background: #fff;
  border-color: #ECC9D2;
  color: #B3527A;
}
.pending-reject:hover { background: #FBEDF1; }
.pending-confirm:disabled,
.pending-reject:disabled { opacity: 0.6; cursor: default; }

/* ---------- Admin: Customers dashboard (top of Customers tab) ---------- */
.customer-summary {
  margin-bottom: 14px;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.cs-stat {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cs-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--pink-dark);
  line-height: 1;
  letter-spacing: -0.5px;
}
.cs-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
}
.cs-stat-warm .cs-stat-num   { color: var(--pink); }
.cs-stat-expiring .cs-stat-num { color: #B3527A; }

@media (min-width: 760px) {
  .cs-stat-num { font-size: 2.1rem; }
}

.cs-section {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.cs-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 10px;
}
.cs-section-count {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.cs-list { display: flex; flex-direction: column; gap: 6px; }
.cs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #FBF5F7;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  border: none;
  font-family: inherit;
  width: 100%;
  color: inherit;
}
.cs-row:hover { background: #F8E9EE; }
.cs-row-main { min-width: 0; }
.cs-row-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-row-meta {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-row-right {
  text-align: right;
  flex-shrink: 0;
}
.cs-row-pill {
  display: inline-block;
  background: #fff;
  color: var(--pink-dark);
  border: 1.5px solid #F3C9D8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cs-row-pill-warn {
  background: #FBE3E0;
  color: #B3261E;
  border-color: #F2C3BC;
}
.cs-row-pill-grace {
  background: #FFF1DA;
  color: #8A5A1A;
  border-color: #ECCDA1;
}
.cs-empty {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}
.cs-show-more {
  background: none;
  border: none;
  color: var(--pink-dark);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0;
  font-family: inherit;
}
.cs-show-more:hover { text-decoration: underline; }

/* ---------- "My Package" widget on My Bookings page ---------- */
.mb-package-widget {
  margin-top: 18px;
  margin-bottom: 4px;
}
.mp-card {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
  position: relative;
}
.mp-card.mp-grace {
  border-color: #ECC9D2;
  background: #FFF5F7;
}
.mp-card.mp-pending {
  border-style: dashed;
  background: #FBF5F7;
}
.mp-card.mp-empty {
  text-align: center;
  padding: 22px 20px;
}
.mp-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
}
.mp-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.mp-stats {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-top: 4px;
}
.mp-classes-big {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pink-dark);
  line-height: 1;
  letter-spacing: -0.5px;
}
.mp-classes-sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.mp-unlimited-pill {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  align-self: flex-start;
}
.mp-expiry {
  font-size: 0.88rem;
  color: var(--muted);
}
.mp-expiry strong { color: var(--text); }
.mp-grace-warning {
  background: #FBE3E0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #B3261E;
  margin-top: 4px;
}
.mp-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.mp-buy-another {
  background: #fff;
  border: 1.5px solid #F3C9D8;
  color: var(--pink-dark);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mp-buy-another:hover { background: #FCE4EC; }
.mp-empty-cta {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}
.mp-empty-cta:hover { background: var(--pink-dark); }
.mp-empty-text {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- Admin: Customer lookup ---------- */
.admin-lookup {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.admin-lookup-head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 10px;
}
.admin-lookup-form {
  display: flex;
  gap: 8px;
}
.admin-lookup-form input {
  flex: 1;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1.5px solid #EBD9E0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.admin-lookup-form input:focus {
  outline: none;
  border-color: var(--pink);
}
.admin-lookup-form button {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}
.admin-lookup-form button:hover { background: var(--pink-dark); }
.admin-lookup-form button:disabled { opacity: 0.6; cursor: default; }

.admin-lookup-results { margin-top: 14px; }
.al-empty {
  font-size: 0.88rem;
  color: var(--muted);
  font-style: italic;
  padding: 6px 0;
}
.al-customer-head {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.al-customer-contact {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.al-customer-contact a { color: var(--pink-dark); text-decoration: none; }
.al-customer-contact a:hover { text-decoration: underline; }
.al-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.al-stat {
  background: #FBF1F4;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.al-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--pink-dark);
  line-height: 1;
  letter-spacing: -0.5px;
}
.al-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.al-section-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin: 14px 0 8px;
}
.al-pkg-list,
.al-booking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.al-pkg-row,
.al-booking-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #FBF5F7;
  border-radius: 8px;
  font-size: 0.85rem;
}
.al-pkg-name {
  font-weight: 600;
  color: var(--text);
}
.al-pkg-meta,
.al-booking-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.al-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.al-status-active   { background: #DCEFE2; color: #2D6F4A; }
.al-status-grace    { background: #FBE3E0; color: #B3261E; }
.al-status-pending  { background: #FFF1DA; color: #8A5A1A; }
.al-status-expired  { background: #ECE5E8; color: #756168; }
.al-status-refunded { background: #ECE5E8; color: #756168; }
.al-status-confirmed { background: #DCEFE2; color: #2D6F4A; }
.al-status-cancelled { background: #ECE5E8; color: #756168; }
.al-booking-class {
  font-weight: 600;
  color: var(--text);
}
.al-show-more {
  background: none;
  border: none;
  color: var(--pink-dark);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0;
}
.al-show-more:hover { text-decoration: underline; }

/* ---------- Admin: Packages summary strip ----------
   4 stat tiles sitting above the package list. Wraps to 2x2 on
   narrow screens (phones). */
.pkg-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.pkg-stat {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkg-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.pkg-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pink-dark);
}
@media (min-width: 560px) {
  .pkg-summary { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Per-package metric tags (small chips on each row) ---------- */
.pkg-row-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pkg-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: #FBF1F4;
  padding: 4px 9px;
  border-radius: 999px;
}
.pkg-metric strong {
  color: var(--pink-dark);
  font-weight: 700;
}
.pkg-metric-rev { background: #E9F3EC; }
.pkg-metric-rev strong { color: #2D6F4A; }

/* ---------- Admin: Packages management ---------- */
.admin-packages {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.admin-packages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pink-dark);
  margin-bottom: 12px;
}
.admin-add-package-btn {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-transform: none;
  transition: background 0.15s ease;
}
.admin-add-package-btn:hover { background: var(--pink-dark); }
.admin-packages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pkg-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #FBF5F7;
  border-radius: 10px;
}
.pkg-row.pkg-row-inactive {
  background: #F4F1F2;
  opacity: 0.75;
}
.pkg-row-main { min-width: 0; }
.pkg-row-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}
.pkg-row-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.pkg-row-price {
  display: inline-block;
  background: #fff;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin-right: 6px;
}
.pkg-row-status {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}
.pkg-row-status.active   { background: #DCEFE2; color: #2D6F4A; }
.pkg-row-status.inactive { background: #ECE5E8; color: #756168; }
.pkg-row-actions {
  display: flex;
  gap: 6px;
}
.pkg-edit-btn {
  background: #fff;
  border: 1.5px solid #F3C9D8;
  color: var(--pink-dark);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}
.pkg-edit-btn:hover { background: #FCE4EC; }

/* Package modal: extra rows */
.pkg-active-label {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  padding: 6px 0;
}
.pkg-active-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
  cursor: pointer;
}
.pkg-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.pkg-actions-row .submit-button {
  flex: 1;
  margin-top: 0;
}
.pkg-delete-btn {
  background: #fff;
  border: 1.5px solid #ECC9D2;
  color: #B3527A;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.pkg-delete-btn:hover { background: #FBEDF1; }

/* "no-package" gate inside the notice modal */
.notice-shop-cta {
  display: inline-block;
  margin-top: 10px;
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.notice-shop-cta:hover { background: var(--pink-dark); }


/* ---------- skeleton loading shapes ----------
   Used in place of "Loading classes…" text while the timetable
   first loads. Subtle pulse to signal that something IS happening
   without occupying the full attention of "spinner staring". */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
.skel {
  background: #FBF1F4;
  border-radius: 10px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skel-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skel-chip { height: 76px; }


/* ---------- Identity card (signed-in users skip name/email inputs) ---------- */
.identity-card {
  background: #FBF1F4;
  border: 1px solid #F3C9D8;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.identity-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.92rem;
}
.identity-label {
  flex: 0 0 56px;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
/* Read-only values sit in a softer grey so they read as "info,
   not input" — blends with the pink card instead of looking like
   editable black text. */
.identity-value {
  color: #7A6A72;
  font-weight: 500;
  word-break: break-word;
}

/* Inline error message shown under a form when validation fails. */
.field-error {
  color: #C13F5A;
  font-size: 0.82rem;
  margin-top: 4px;
}

/* ---------- Profile view ---------- */
.profile-blurb {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.55;
}
.profile-warning {
  font-size: 0.82rem;
  background: #FFF4E5;
  border: 1px solid #F5CA8C;
  color: #8A5A14;
  padding: 10px 12px;
  border-radius: 12px;
  margin-top: -4px;
  line-height: 1.5;
}
.profile-success {
  font-size: 0.9rem;
  color: #2D6F4A;
  font-weight: 600;
  text-align: center;
}

/* Sign-out section on the Profile page — separated from the form
   above by extra spacing + a divider so it doesn't read as a
   destructive Save button. */
.profile-signout-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EBD9E0;
  display: flex;
  justify-content: center;
}
.signout-btn {
  background: #fff;
  color: var(--muted);
  border: 1.5px solid #EBD9E0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.signout-btn:hover {
  background: #FBF1F4;
  color: var(--pink-dark);
  border-color: var(--pink);
}

/* Sign out link inside the mobile drawer — sits below the user chip. */
.drawer-signout {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  margin-top: 4px;
}
.drawer-signout:hover {
  color: var(--pink-dark);
  text-decoration: underline;
}

/* Visible "Sign out" text link in the desktop header, sitting next
   to the user chip. Same soft grey treatment as the drawer copy. */
.header-signout {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.header-signout:hover {
  color: var(--pink-dark);
  text-decoration: underline;
}

/* Thin pink accent line under each drawer nav item, matching the
   desktop header treatment. The existing 1px solid border-bottom
   gets restyled in pink. */
.drawer-link {
  border-bottom: 1.5px solid #F3C9D8;
}
.drawer-link:hover {
  border-bottom-color: var(--pink);
}

/* ---------- Admin: Customize panel (site-level settings) ---------- */
.customize-section {
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.customize-section + .customize-section {
  margin-top: 16px;
}
.customize-section-head {
  font-size: 1rem;
  color: var(--pink-dark);
  margin-bottom: 8px;
}
.customize-blurb {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.customize-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.customize-label input {
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid #EBD9E0;
  border-radius: 10px;
  font-family: inherit;
}
.customize-label input:focus {
  outline: none;
  border-color: var(--pink);
}
.customize-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- "Welcome back" login modal ---------- */
.login-card {
  text-align: left;
  padding: 28px 24px 24px;
  max-width: 420px;
}
.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 22px;
  color: var(--text);
}
.login-gsi {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 18px 0;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #EBD9E0;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.login-input {
  font-size: 1rem;
  padding: 12px 14px;
  border: 1.5px solid #EBD9E0;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.login-input:focus {
  outline: none;
  border-color: var(--pink);
}
.login-submit {
  background: var(--pink);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  transition: background 0.15s ease;
}
.login-submit:hover { background: var(--pink-dark); }
.login-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-helper {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}
.login-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #EBD9E0;
  text-align: center;
}
.login-admin-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink-dark);
  text-decoration: none;
  cursor: pointer;
}
.login-admin-link:hover {
  color: var(--pink);
  text-decoration: underline;
}

/* ---------- Admin gate (Google sign-in + password fallback) ---------- */
.admin-gate {
  max-width: 420px;
  margin: 0 auto;
  background: var(--card);
  border: 1.5px solid #EBD9E0;
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
}
.admin-gate-intro {
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.admin-gsi {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.admin-gate .login-divider {
  margin: 14px 0;
}


/* ---------- utility ---------- */
.hidden { display: none !important; }