/* ==========================================================================
   Women Worrld — design tokens layered over Bootstrap 5.3
   --------------------------------------------------------------------------
   One stylesheet for the public site, the staff panel and the member portal so
   a status pill, a currency figure and a card mean the same thing everywhere.
   ========================================================================== */

:root {
  /* Brand ----------------------------------------------------------------
     Sampled directly from the Women Worrld logo, not invented. The magenta
     is 41% of the mark's ink; the WORRLD blocks supply the secondaries.

     The --ww-plum-* names are kept as the primary tokens because the whole
     stylesheet and every module's views already reference them — renaming
     would touch hundreds of call sites for no visual gain. The VALUES are
     the brand's.                                                          */
  --ww-plum:        #E6007E;   /* brand magenta — "women" wordmark          */
  --ww-plum-dark:   #B00062;
  --ww-plum-soft:   #FDE9F3;
  --ww-gold:        #E8912A;   /* WORRLD orange block                       */
  --ww-gold-soft:   #FDF0E0;
  --ww-rose:        #F5559F;

  /* The full WORRLD block set, for charts and multi-series data */
  --ww-cyan:        #00A0D0;
  --ww-green:       #3E9B3E;
  --ww-navy:        #203090;
  --ww-orange:      #E85A2A;
  --ww-brown:       #8A5A18;

  /* Division accents — taken straight from the logo so the site and the
     signage agree. Aerobics green, Institute navy, Parlour magenta (§18) */
  --ww-fitness:     #3E9B3E;
  --ww-fitness-soft:#E9F5E9;
  --ww-academy:     #203090;
  --ww-academy-soft:#E7EAF6;
  --ww-beauty:      #E6007E;
  --ww-beauty-soft: #FDE9F3;

  /* Neutrals, biased very slightly toward the magenta so greys read as chosen */
  --ww-ink:         #241820;
  --ww-ink-2:       #5C4C56;
  --ww-ink-3:       #8A7B84;
  --ww-line:        #EBE0E7;
  --ww-line-2:      #D6C6D0;
  --ww-surface:     #FFFFFF;
  --ww-surface-2:   #FAF5F8;
  --ww-ground:      #FDFAFC;

  /* Semantic — separate from the brand accent */
  --ww-ok:          #2F6B39;
  --ww-ok-soft:     #E4F0E6;
  --ww-warn:        #96601A;
  --ww-warn-soft:   #FBF0DE;
  --ww-danger:      #9E3327;
  --ww-danger-soft: #FAE8E5;
  --ww-info:        #275F7E;
  --ww-info-soft:   #E4EFF5;

  --ww-radius:      10px;
  --ww-radius-sm:   6px;
  --ww-shadow:      0 1px 2px rgba(36,28,39,.05), 0 10px 30px -22px rgba(36,28,39,.45);
  --ww-shadow-lg:   0 2px 4px rgba(36,28,39,.05), 0 24px 48px -28px rgba(36,28,39,.35);

  /* Bootstrap overrides */
  --bs-primary:       #E6007E;
  --bs-primary-rgb:   230, 0, 126;
  --bs-body-color:    #241820;
  --bs-body-bg:       #FDFAFC;
  --bs-border-color:  #EBE0E7;
  --bs-link-color:    #C10069;
  --bs-link-hover-color: #B00062;
  --bs-border-radius: 10px;
  --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--bs-font-sans-serif);
  background: var(--ww-ground);
  color: var(--ww-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }

/* The public site gets a display serif; the staff panel stays on one face so
   dense tables remain legible. */
.site-body h1, .site-body h2, .site-body .display-serif {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.015em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.text-muted-2 { color: var(--ww-ink-3) !important; }

/* Wherever digits line up in a column */
.tabular, td.amount, .stat-value, .table td.text-end { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ww-ink-3);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn { font-weight: 600; border-radius: var(--ww-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--ww-plum); --bs-btn-border-color: var(--ww-plum);
  --bs-btn-hover-bg: var(--ww-plum-dark); --bs-btn-hover-border-color: var(--ww-plum-dark);
  --bs-btn-active-bg: var(--ww-plum-dark); --bs-btn-active-border-color: var(--ww-plum-dark);
  --bs-btn-disabled-bg: var(--ww-plum); --bs-btn-disabled-border-color: var(--ww-plum);
}
.btn-outline-primary {
  --bs-btn-color: var(--ww-plum); --bs-btn-border-color: var(--ww-line-2);
  --bs-btn-hover-bg: var(--ww-plum); --bs-btn-hover-border-color: var(--ww-plum);
  --bs-btn-active-bg: var(--ww-plum-dark); --bs-btn-active-border-color: var(--ww-plum-dark);
}
.btn-gold {
  background: var(--ww-gold); border-color: var(--ww-gold); color: #fff; font-weight: 700;
}
.btn-gold:hover { background: #A87724; border-color: #A87724; color: #fff; }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; font-weight: 700; }
.btn-whatsapp:hover { background: #1EB456; border-color: #1EB456; color: #fff; }

/* ==========================================================================
   Cards, panels, tables
   ========================================================================== */

.card {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius);
  box-shadow: var(--ww-shadow);
  background: var(--ww-surface);
}
.card-header {
  background: var(--ww-surface);
  border-bottom: 1px solid var(--ww-line);
  font-weight: 700;
  padding: .9rem 1.15rem;
}
.card-body { padding: 1.15rem; }

.table { --bs-table-border-color: var(--ww-line); margin-bottom: 0; }
.table > thead th {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ww-ink-3); font-weight: 700; white-space: nowrap;
  background: var(--ww-surface-2); border-bottom: 1px solid var(--ww-line-2);
  padding: .7rem .9rem;
}
.table > tbody td { padding: .8rem .9rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--ww-plum-soft); }

/* Any table wide enough to overflow scrolls inside its own box, never the page */
.table-wrap { overflow-x: auto; border-radius: var(--ww-radius); }

.empty-state { padding: 3rem 1rem; text-align: center; color: var(--ww-ink-3); }
.empty-state .bi { font-size: 2.4rem; opacity: .35; display: block; margin-bottom: .6rem; }

/* ==========================================================================
   Status pills — one vocabulary across every screen
   ========================================================================== */

.badge { font-weight: 700; font-size: 10.5px; letter-spacing: .04em; padding: .35em .65em; border-radius: 4px; }
.badge.text-bg-success   { background: var(--ww-ok-soft)     !important; color: var(--ww-ok)     !important; }
.badge.text-bg-warning   { background: var(--ww-warn-soft)   !important; color: var(--ww-warn)   !important; }
.badge.text-bg-danger    { background: var(--ww-danger-soft) !important; color: var(--ww-danger) !important; }
.badge.text-bg-info      { background: var(--ww-info-soft)   !important; color: var(--ww-info)   !important; }
.badge.text-bg-secondary { background: var(--ww-surface-2)   !important; color: var(--ww-ink-2)  !important; }

.division-fitness { color: var(--ww-fitness); background: var(--ww-fitness-soft); }
.division-academy { color: var(--ww-academy); background: var(--ww-academy-soft); }
.division-beauty  { color: var(--ww-beauty);  background: var(--ww-beauty-soft); }
.division-pill { font-size: 10.5px; font-weight: 700; padding: .25em .6em; border-radius: 4px;
                 text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   Stat tiles (dashboard)
   ========================================================================== */

.stat {
  background: var(--ww-surface); border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius); padding: 1.05rem 1.15rem; height: 100%;
  box-shadow: var(--ww-shadow); position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ww-plum);
}
.stat.stat-ok::before     { background: var(--ww-ok); }
.stat.stat-warn::before   { background: var(--ww-warn); }
.stat.stat-danger::before { background: var(--ww-danger); }
.stat.stat-info::before   { background: var(--ww-info); }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ww-ink-3); }
.stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin: .3rem 0 .1rem; letter-spacing: -.02em; }
.stat-sub   { font-size: 12.5px; color: var(--ww-ink-3); }

/* ==========================================================================
   Admin shell
   ========================================================================== */

.admin-body { background: var(--ww-ground); }

.admin-sidebar {
  width: 248px; position: fixed; inset: 0 auto 0 0; z-index: 1040;
  background: #241620; color: #EFE0EA; overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-sidebar .brand {
  padding: 1.1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: .6rem;
}
.admin-sidebar .brand-mark {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ww-plum), var(--ww-rose));
  color: #fff; font-weight: 800; font-size: 14px; flex: none;
}
.admin-sidebar .brand-name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: #fff; }
.admin-sidebar .brand-sub  { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #A08F99; }

.admin-sidebar .nav-group {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #877581; padding: 1.1rem 1.15rem .35rem;
}
.admin-sidebar .nav-link {
  color: #CDBCC6; padding: .5rem 1.15rem; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: .65rem; border-left: 2px solid transparent;
}
.admin-sidebar .nav-link .bi { font-size: 15px; opacity: .8; width: 18px; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.admin-sidebar .nav-link.active {
  background: rgba(184,88,132,.16); color: #fff; border-left-color: var(--ww-rose);
}
.admin-sidebar .nav-link .count {
  margin-left: auto; background: var(--ww-rose); color: #fff; font-size: 10.5px;
  font-weight: 700; padding: .1rem .4rem; border-radius: 20px;
}

.admin-main { margin-left: 248px; min-height: 100vh; }

.admin-topbar {
  background: var(--ww-surface); border-bottom: 1px solid var(--ww-line);
  padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1030;
}
.admin-content { padding: 1.5rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; margin: 0; }
.page-head .sub { color: var(--ww-ink-3); font-size: 14px; margin-top: .15rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .admin-sidebar.open { transform: none; }
  .admin-main { margin-left: 0; }
}

/* ==========================================================================
   Public site
   ========================================================================== */

.site-header {
  background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ww-line); position: sticky; top: 0; z-index: 1030;
}
.site-header .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--ww-plum); }
.site-header .nav-link { font-weight: 600; font-size: 14.5px; color: var(--ww-ink-2); }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--ww-plum); }

.hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(230,0,126,.16), transparent 60%),
    linear-gradient(180deg, var(--ww-plum-soft) 0%, var(--ww-ground) 100%);
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
.hero .lead { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--ww-ink-2); max-width: 54ch; }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }

.course-card { transition: transform .16s ease, box-shadow .16s ease; height: 100%; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--ww-shadow-lg); }
.course-card .thumb {
  aspect-ratio: 16/10; object-fit: cover; width: 100%;
  border-radius: var(--ww-radius) var(--ww-radius) 0 0; background: var(--ww-surface-2);
}
.price { font-size: 1.25rem; font-weight: 800; color: var(--ww-plum); }
.price small { font-size: .8rem; font-weight: 500; color: var(--ww-ink-3); text-decoration: line-through; }

.site-footer { background: #241620; color: #B7ABBA; padding: 3rem 0 1.5rem; }
.site-footer .footer-heading { color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #B7ABBA; font-size: 14px; }
.site-footer a:hover { color: #fff; }

.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1050;
  width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 22px rgba(37,211,102,.4);
}
.whatsapp-float:hover { color: #fff; text-decoration: none; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label { font-weight: 600; font-size: 13px; margin-bottom: .3rem; color: var(--ww-ink-2); }
.form-control, .form-select {
  border-color: var(--ww-line-2); border-radius: var(--ww-radius-sm); padding: .5rem .75rem; font-size: 14.5px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ww-plum); box-shadow: 0 0 0 .2rem rgba(230,0,126,.12);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ww-danger); }
.invalid-feedback { font-size: 12.5px; }
.form-text { font-size: 12.5px; color: var(--ww-ink-3); }

.required::after { content: " *"; color: var(--ww-danger); font-weight: 700; }

/* ==========================================================================
   Payment / QR
   ========================================================================== */

.qr-panel {
  background: var(--ww-surface); border: 1px solid var(--ww-line); border-radius: var(--ww-radius);
  padding: 1.5rem; text-align: center;
}
.qr-panel img, .qr-panel svg { max-width: 240px; width: 100%; height: auto; }
.qr-vpa {
  font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 600;
  background: var(--ww-surface-2); padding: .5rem .8rem; border-radius: var(--ww-radius-sm);
  display: inline-block; user-select: all;
}
/* The rule that must never be softened (§9) */
.verify-notice {
  background: var(--ww-warn-soft); border-left: 3px solid var(--ww-warn);
  padding: .85rem 1rem; border-radius: var(--ww-radius-sm); font-size: 13.5px; color: var(--ww-ink-2);
}

/* ==========================================================================
   Portal
   ========================================================================== */

.portal-nav .nav-link {
  font-weight: 600; font-size: 14px; color: var(--ww-ink-2);
  border-radius: var(--ww-radius-sm); padding: .55rem .8rem;
  display: flex; align-items: center; gap: .6rem;
}
.portal-nav .nav-link:hover { background: var(--ww-surface-2); text-decoration: none; }
.portal-nav .nav-link.active { background: var(--ww-plum); color: #fff; }

.progress { height: 8px; background: var(--ww-surface-2); border-radius: 20px; }
.progress-bar { background: var(--ww-plum); border-radius: 20px; }

/* ==========================================================================
   Print — receipts and certificates
   ========================================================================== */

@media print {
  .admin-sidebar, .admin-topbar, .site-header, .site-footer,
  .no-print, .whatsapp-float, .btn { display: none !important; }
  .admin-main { margin-left: 0; }
  body { background: #fff; font-size: 12px; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Public website — page furniture   (appended by the site module, §6)
   --------------------------------------------------------------------------
   Everything below layers on the tokens declared at the top of this file.
   Nothing above this comment is modified.
   ========================================================================== */

/* --- section rhythm ------------------------------------------------------ */

.section-tint { background: var(--ww-surface-2); }

.page-hero {
  background:
    radial-gradient(900px 380px at 88% -20%, rgba(230,0,126,.14), transparent 62%),
    linear-gradient(180deg, var(--ww-plum-soft) 0%, var(--ww-ground) 100%);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--ww-line);
}
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .6rem; }
.page-hero .lead { color: var(--ww-ink-2); max-width: 62ch; font-size: clamp(.98rem, 1.6vw, 1.1rem); }
.page-hero.hero-fitness {
  background:
    radial-gradient(900px 380px at 88% -20%, rgba(42,101,96,.16), transparent 62%),
    linear-gradient(180deg, var(--ww-fitness-soft) 0%, var(--ww-ground) 100%);
}
.page-hero.hero-beauty {
  background:
    radial-gradient(900px 380px at 88% -20%, rgba(230,0,126,.2), transparent 62%),
    linear-gradient(180deg, var(--ww-beauty-soft) 0%, var(--ww-ground) 100%);
}

.breadcrumb-line { font-size: 13px; color: var(--ww-ink-3); display: flex; align-items: center; gap: .4rem; }
.breadcrumb-line a { color: var(--ww-ink-2); font-weight: 600; }
.breadcrumb-line .bi { font-size: 11px; }

/* --- hero side panel ----------------------------------------------------- */

.hero-panel {
  background: var(--ww-surface); border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius); padding: 1.25rem; box-shadow: var(--ww-shadow-lg);
}
.hero-panel .eyebrow { margin-bottom: .75rem; }
.hero-panel-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem; border-radius: var(--ww-radius-sm);
  background: transparent; margin-bottom: .35rem;
}
a.hero-panel-row:hover { background: var(--ww-surface-2); text-decoration: none; }
.hero-panel-row .icon {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 17px;
  background: currentColor;
}
.hero-panel-row .icon .bi { color: #fff; }
.hero-panel-row .t { display: block; font-weight: 700; font-size: 14px; color: var(--ww-ink); }
.hero-panel-row .d { display: block; font-size: 12.5px; color: var(--ww-ink-3); }
.hero-panel-row .bi-arrow-right { color: var(--ww-ink-3); font-size: 14px; }

.trust-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.trust-row li { font-size: 13.5px; color: var(--ww-ink-2); font-weight: 600; }
.trust-row .bi { color: var(--ww-plum); margin-right: .35rem; }

/* --- stat strip ---------------------------------------------------------- */

.stat-strip { padding: 1.5rem 0; background: var(--ww-surface); border-block: 1px solid var(--ww-line); }
.stat-strip .stat { box-shadow: none; }

/* --- division cards ------------------------------------------------------ */

.division-card { border-top: 3px solid var(--ww-plum); }
.division-card.division-accent-fitness { border-top-color: var(--ww-fitness); }
.division-card.division-accent-academy { border-top-color: var(--ww-academy); }
.division-card.division-accent-beauty  { border-top-color: var(--ww-beauty); }

.icon-badge {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: inline-grid; place-items: center; font-size: 19px;
  background: var(--ww-plum-soft); color: var(--ww-plum);
}
.division-accent-fitness .icon-badge { background: var(--ww-fitness-soft); color: var(--ww-fitness); }
.division-accent-beauty  .icon-badge { background: var(--ww-beauty-soft);  color: var(--ww-beauty); }

.link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.link-list a { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; }
.link-list .bi { font-size: 18px; margin-right: .15rem; }

/* --- meta rows and fact rows --------------------------------------------- */

.meta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.meta-list li { display: inline-flex; align-items: center; gap: .35rem; }
.meta-list .bi { color: var(--ww-ink-3); }

.fact-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.75rem; }
.fact-row .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
               text-transform: uppercase; color: var(--ww-ink-3); }
.fact-row .v { display: block; font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }

.tick-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.tick-list li { display: flex; gap: .55rem; align-items: flex-start; }
.tick-list .bi { color: var(--ww-plum); margin-top: .18rem; flex: none; }

/* --- media placeholders (a fresh install has no uploads) ------------------ */

.media-placeholder {
  display: grid; place-items: center; color: #fff; font-size: 2rem;
  background: linear-gradient(135deg, var(--ww-plum), var(--ww-rose));
}
.media-placeholder.media-fitness { background: linear-gradient(135deg, var(--ww-fitness), #3E8A83); }
.media-placeholder.media-beauty  { background: linear-gradient(135deg, var(--ww-beauty), #D479A0); }

/* --- filters and chips --------------------------------------------------- */

.filter-bar {
  background: var(--ww-surface); border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius); padding: 1rem; box-shadow: var(--ww-shadow);
}

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 100px; font-size: 13.5px; font-weight: 600;
  background: var(--ww-surface); border: 1px solid var(--ww-line-2); color: var(--ww-ink-2);
}
.chip:hover { border-color: var(--ww-plum); color: var(--ww-plum); text-decoration: none; }
.chip.is-active { background: var(--ww-plum); border-color: var(--ww-plum); color: #fff; }
.chip .n { font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }

/* --- batches ------------------------------------------------------------- */

.batch-card, .batch-row { transition: box-shadow .16s ease; }
.batch-card:hover, .batch-row:hover { box-shadow: var(--ww-shadow-lg); }

.seats-bar {
  display: block; height: 5px; width: 100%; border-radius: 20px;
  background: var(--ww-surface-2); overflow: hidden;
}
.seats-bar > span { display: block; height: 100%; background: var(--ww-plum); border-radius: 20px; }

/* --- course detail ------------------------------------------------------- */

.course-hero-image {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--ww-radius); box-shadow: var(--ww-shadow-lg);
}

.module-list { list-style: none; padding: 0; margin: 0; }
.module-list li { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--ww-line); }
.module-list li:last-child { border-bottom: 0; }
.module-list .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--ww-plum-soft); color: var(--ww-plum);
}

.sticky-side { position: sticky; top: 88px; }
.fee-card { border-top: 3px solid var(--ww-gold); }
.fee-price { font-size: 1.9rem; line-height: 1.1; }
.fee-lines { list-style: none; padding: 0; margin: 0; }
.fee-lines li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px dashed var(--ww-line);
}
.fee-lines li:last-child { border-bottom: 0; }

/* --- plans --------------------------------------------------------------- */

.plan-card { position: relative; transition: transform .16s ease, box-shadow .16s ease; }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--ww-shadow-lg); }
.plan-card.is-featured { border-color: var(--ww-plum); box-shadow: 0 0 0 1px var(--ww-plum), var(--ww-shadow); }
.plan-card.is-trial { border-color: var(--ww-gold); }
.plan-flag {
  position: absolute; top: -1px; right: 1rem;
  background: var(--ww-plum); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem;
  border-radius: 0 0 5px 5px;
}
.trial-card { border-left: 3px solid var(--ww-gold); background: var(--ww-gold-soft); }

/* --- steps and Q&A ------------------------------------------------------- */

.step-card { position: relative; }
.step-number {
  position: absolute; top: .9rem; right: 1rem;
  font-family: "Playfair Display", Georgia, serif; font-size: 2.4rem;
  line-height: 1; font-weight: 700; color: var(--ww-line);
}

.qa-list dt { font-weight: 700; font-size: 14px; margin-top: .9rem; }
.qa-list dt:first-child { margin-top: 0; }
.qa-list dd { font-size: 13.5px; color: var(--ww-ink-2); margin: .2rem 0 0; }

/* --- beauty price list --------------------------------------------------- */

.service-list { list-style: none; padding: 0; margin: 0; }
.service-list > li {
  display: grid; gap: .35rem 1rem; align-items: center;
  grid-template-columns: 1fr auto auto auto;
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--ww-line);
}
.service-list > li:last-child { border-bottom: 0; }
.service-list > li:hover { background: var(--ww-surface-2); }
.service-list .s-duration { white-space: nowrap; }
.service-list .s-duration .bi { margin-right: .25rem; }
.service-list .s-price { text-align: right; min-width: 110px; }
.service-list .s-action { display: flex; gap: .4rem; }

@media (max-width: 767.98px) {
  .service-list > li { grid-template-columns: 1fr auto; }
  .service-list .s-main { grid-column: 1 / -1; }
  .service-list .s-action { grid-column: 1 / -1; }
}

/* --- events -------------------------------------------------------------- */

.event-card .date-chip {
  width: 56px; flex: none; text-align: center; border-radius: var(--ww-radius-sm);
  background: var(--ww-plum-soft); color: var(--ww-plum); padding: .4rem 0;
}
.event-card .date-chip .d { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1; }
.event-card .date-chip .m { display: block; font-size: 11px; font-weight: 700;
                            letter-spacing: .1em; text-transform: uppercase; }

.past-list { list-style: none; padding: 0; margin: 0; }
.past-list li {
  display: grid; grid-template-columns: 110px 1fr auto; gap: .25rem 1rem;
  align-items: baseline; padding: .75rem 1.15rem; border-bottom: 1px solid var(--ww-line);
  opacity: .82;
}
.past-list li:last-child { border-bottom: 0; }
.past-list .p-date { font-size: 12.5px; color: var(--ww-ink-3); font-variant-numeric: tabular-nums; }
.past-list .p-title { font-weight: 600; }
@media (max-width: 575.98px) {
  .past-list li { grid-template-columns: 1fr; }
}

/* --- trainers and testimonials ------------------------------------------- */

.trainer-avatar {
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--ww-surface-2);
}
.trainer-avatar.is-initials {
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: linear-gradient(135deg, var(--ww-plum), var(--ww-rose)); color: #fff;
}
.avatar-sm { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.avatar-sm.is-initials {
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: var(--ww-plum-soft); color: var(--ww-plum);
}

.testimonial-card blockquote {
  font-size: 14.5px; color: var(--ww-ink-2); margin: 0;
  padding-left: 1.1rem; border-left: 2px solid var(--ww-line);
}
.rating-stars { color: var(--ww-gold); font-size: 13px; letter-spacing: .06em; }

/* --- gallery ------------------------------------------------------------- */

.gallery-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.gallery-tile {
  position: relative; padding: 0; border: 0; background: var(--ww-surface-2);
  border-radius: var(--ww-radius); overflow: hidden; aspect-ratio: 1/1; display: block;
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile .g-overlay {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end;
  justify-content: space-between; gap: .5rem; padding: 1.75rem .7rem .6rem;
  background: linear-gradient(180deg, transparent, rgba(36,28,39,.78));
  color: #fff; font-size: 12.5px; text-align: left; opacity: 0; transition: opacity .16s ease;
}
.gallery-tile:hover .g-overlay, .gallery-tile:focus-visible .g-overlay { opacity: 1; }
.gallery-tile:focus-visible { outline: 2px solid var(--ww-plum); outline-offset: 2px; }
.gallery-tile .g-caption { line-height: 1.3; }

/* --- contact ------------------------------------------------------------- */

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--ww-line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list > li > .bi { color: var(--ww-plum); font-size: 17px; margin-top: .1rem; }
.contact-list .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--ww-ink-3); }
.contact-list .v { display: block; font-size: 14.5px; }

.map-frame { width: 100%; height: 300px; border: 0; display: block; }

/* The honeypot. Taken out of the layout and out of the accessibility tree, but
   not display:none — some bots skip hidden inputs, and this one must look real
   enough to be filled in. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- verification result ------------------------------------------------- */

.verify-input {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.verify-result { border-width: 2px; }
.verify-result .verify-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.verify-result .verify-head .bi { font-size: 2rem; line-height: 1; flex: none; }
.verify-result.is-valid   { border-color: var(--ww-ok);     background: var(--ww-ok-soft); }
.verify-result.is-valid   .verify-head .bi { color: var(--ww-ok); }
.verify-result.is-revoked { border-color: var(--ww-danger); background: var(--ww-danger-soft); }
.verify-result.is-revoked .verify-head .bi { color: var(--ww-danger); }
.verify-result.is-unknown { border-color: var(--ww-warn);   background: var(--ww-warn-soft); }
.verify-result.is-unknown .verify-head .bi { color: var(--ww-warn); }

.verify-facts {
  display: grid; gap: .85rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 1.1rem; padding: 1rem 0; border-block: 1px solid rgba(36,28,39,.12);
}
.verify-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--ww-ink-3); }
.verify-facts dd { margin: .15rem 0 0; font-weight: 600; }

/* --- prose (owner-authored page bodies) ---------------------------------- */

.prose { font-size: 15.5px; line-height: 1.75; color: var(--ww-ink-2); max-width: 72ch; }
.prose h2, .prose h3, .prose h4 { color: var(--ww-ink); margin: 2rem 0 .6rem; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.15rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem 1.1rem; }
.prose li { margin-bottom: .35rem; }
.prose blockquote {
  border-left: 3px solid var(--ww-line-2); padding-left: 1rem;
  margin: 1.25rem 0; color: var(--ww-ink-3);
}
.prose table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--ww-line); padding: .5rem .7rem; text-align: left; }

/* --- CTA band ------------------------------------------------------------ */

.cta-band { background: var(--ww-plum); color: #F3E6EC; }
.cta-band .cta-inner {
  display: grid; gap: 1.75rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.cta-band h2 { color: #fff; margin: .35rem 0 .5rem; }
.cta-band .eyebrow { color: rgba(255,255,255,.6); }
.cta-band p { color: rgba(255,255,255,.82); max-width: 46ch; font-size: 14.5px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.cta-band .btn-outline-primary {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.4);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--ww-plum); --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--ww-plum);
}
.cta-band .btn-primary {
  --bs-btn-bg: #fff; --bs-btn-color: var(--ww-plum); --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--ww-plum-soft); --bs-btn-hover-color: var(--ww-plum-dark);
  --bs-btn-hover-border-color: var(--ww-plum-soft);
}
@media (max-width: 991.98px) {
  .cta-band .cta-inner { grid-template-columns: 1fr; }
}

/* --- grouped listings ---------------------------------------------------- */

.course-group + .course-group, .service-group + .service-group { margin-top: 2.5rem; }

/* ---------------------------------------------------------- brand mark ---
   The sidebar shows the figure glyph cropped from the logo rather than a
   text monogram, so the staff panel and the shopfront sign agree.          */
.admin-sidebar .brand-mark-img {
  width: 32px; height: 32px; flex: none; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 2px;
}

/* ==========================================================================
   Homepage hero visual
   --------------------------------------------------------------------------
   Holds either an imported photograph or the brand artwork. A fixed aspect
   ratio means the page does not reflow when a real photo replaces the SVG.
   ========================================================================== */

.hero-visual {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ww-plum-soft);
  box-shadow: var(--ww-shadow-lg);
  aspect-ratio: 5 / 4;
  position: relative;
}
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* The SVG artwork is a composition, not a photo — show all of it. */
.hero-visual img[src$=".svg"] { object-fit: contain; padding: 6px; }

@media (max-width: 991.98px) {
  .hero-visual { aspect-ratio: 16 / 10; margin-bottom: 1rem; }
}

/* Division cards carry their own artwork band. */
.division-card .division-art {
  display: block; width: 100%; height: 92px; object-fit: cover;
  border-radius: var(--ww-radius) var(--ww-radius) 0 0;
  background: var(--ww-surface-2);
}

/* ==========================================================================
   COLOUR LAYER — the WORRLD blocks
   --------------------------------------------------------------------------
   The logo spells WORRLD in six coloured tiles. That multicolour is the most
   recognisable thing about the brand, so it becomes a repeating device here
   rather than the site being magenta-and-grey. Used as a rule under the
   header, above the footer, and as an accent on cards and section heads.
   ========================================================================== */

.brand-stripe {
  height: 4px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    var(--ww-cyan)   0 16.66%,
    var(--ww-green)  16.66% 33.33%,
    var(--ww-plum)   33.33% 50%,
    var(--ww-navy)   50% 66.66%,
    var(--ww-brown)  66.66% 83.33%,
    var(--ww-orange) 83.33% 100%
  );
}
.brand-stripe-tall { height: 6px; }

/* Section heads get a short block rule in the division's own colour. */
.section-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 3px; border-radius: 2px;
  margin-right: .6rem; vertical-align: middle;
  background: var(--ww-plum);
}
.section-head.is-fitness .eyebrow::before { background: var(--ww-fitness); }
.section-head.is-academy .eyebrow::before { background: var(--ww-academy); }
.section-head.is-beauty  .eyebrow::before { background: var(--ww-beauty); }

/* Alternating section grounds so the page has rhythm instead of one flat field. */
.section-tint      { background: var(--ww-surface-2); }
.section-tint-warm { background: linear-gradient(180deg, var(--ww-gold-soft), var(--ww-ground)); }
.section-tint-cool { background: linear-gradient(180deg, #E9F5F9, var(--ww-ground)); }

/* Division cards carry their colour properly — a tinted head, a coloured rule,
   and a matching pill — rather than one accent for all three. */
.division-card { overflow: hidden; border-top: 3px solid var(--ww-plum); }
.division-accent-fitness { border-top-color: var(--ww-fitness); }
.division-accent-academy { border-top-color: var(--ww-academy); }
.division-accent-beauty  { border-top-color: var(--ww-beauty); }
.division-accent-fitness .card-body { background: linear-gradient(180deg, var(--ww-fitness-soft) 0, transparent 88px); }
.division-accent-academy .card-body { background: linear-gradient(180deg, var(--ww-academy-soft) 0, transparent 88px); }
.division-accent-beauty  .card-body { background: linear-gradient(180deg, var(--ww-beauty-soft)  0, transparent 88px); }

/* Stat tiles cycle the block colours so a KPI row reads as a set, not a wall. */
.stat-strip .stat-col:nth-child(6n+1) .stat::before,
.stat:nth-of-type(6n+1)::before { background: var(--ww-cyan); }
.stat-strip .stat-col:nth-child(6n+2) .stat::before { background: var(--ww-green); }
.stat-strip .stat-col:nth-child(6n+3) .stat::before { background: var(--ww-plum); }
.stat-strip .stat-col:nth-child(6n+4) .stat::before { background: var(--ww-navy); }
.stat-strip .stat-col:nth-child(6n+5) .stat::before { background: var(--ww-orange); }
.stat-strip .stat-col:nth-child(6n+6) .stat::before { background: var(--ww-brown); }

/* Hero gets colour behind it rather than a flat tint. */
.hero {
  background:
    radial-gradient(760px 420px at 88% -8%,  rgba(230,0,126,.16), transparent 62%),
    radial-gradient(620px 380px at 4% 106%,  rgba(0,160,208,.14), transparent 60%),
    radial-gradient(520px 320px at 52% 100%, rgba(62,155,62,.10), transparent 62%),
    linear-gradient(180deg, #FFF6FB 0%, var(--ww-ground) 100%);
  position: relative;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(to right,
    var(--ww-cyan) 0 16.66%, var(--ww-green) 16.66% 33.33%, var(--ww-plum) 33.33% 50%,
    var(--ww-navy) 50% 66.66%, var(--ww-brown) 66.66% 83.33%, var(--ww-orange) 83.33% 100%);
  opacity: .9;
}

/* Photo cards: a colour wash on hover keeps the grid lively. */
.gallery-item { position: relative; overflow: hidden; border-radius: var(--ww-radius); }
.gallery-item img { transition: transform .28s ease; display: block; width: 100%; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(to right, var(--ww-plum), var(--ww-orange));
  opacity: 0; transition: opacity .2s ease;
}
.gallery-item:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item img { transition: none; }
  .gallery-item:hover img { transform: none; }
}

/* Footer credit line — quieter than the copyright, but the link still reads
   as a link rather than dissolving into the dark ground. */
.site-footer .credit { color: #8E8189; }
.site-footer .credit a { color: #C9BCC6; font-weight: 600; }
.site-footer .credit a:hover { color: #fff; text-decoration: underline; }