/* ============================================================
   ENVIBE PORTAL — JONAS — VERSION 3.1.13 — TOOLBAR TITLE

   Design language: Premium sport & leisure SaaS
   - Deep navy #0d1b2a as the anchor
   - Envibe pink #0685be as the hero accent
   - Lime green #f7941d for all CTAs and positive states
   - DM Sans throughout
   - Micro-animations on every interactive element
   - Glass-morphism on header
   - Editorial tile grid
   - Premium form inputs

   Reskin per demo: change --ev-blue + --ev-orange in :root only
   ============================================================ */



/* ============================================================
   GOOGLE FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand — change these two for per-client reskin */
  --ev-blue:          #0685be;
  --ev-blue-dark:     #056691;
  --ev-blue-light:    #e6f4fb;
  --ev-blue-glow:     rgba(6, 133, 190, 0.15);
  --ev-orange:         #f7941d;
  --ev-orange-dark:    #de7f0a;
  --ev-orange-light:   #fef3e2;
  --ev-orange-glow:    rgba(247, 148, 29, 0.2);

  /* Base palette */
  --ev-navy:          #0c3b57;
  --ev-navy-90:       rgba(12, 59, 87, 0.9);
  --ev-navy-mid:      #14486b;
  --ev-navy-light:    #1d5680;
  --ev-white:         #ffffff;
  --ev-off-white:     #f4f6f8;
  --ev-surface:       #ffffff;
  --ev-surface-2:     #f8fafb;
  --ev-border:        #e2e8ef;
  --ev-border-mid:    #cbd5e1;
  --ev-text:          #404042;
  --ev-muted:         #64748b;
  --ev-faint:         #94a3b8;

  /* Typography */
  --ev-font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --ev-radius-sm:     6px;
  --ev-radius:        10px;
  --ev-radius-lg:     16px;
  --ev-radius-xl:     20px;

  /* Shadows */
  --ev-shadow-xs:     0 1px 3px rgba(12,59,87,0.06);
  --ev-shadow-sm:     0 2px 8px rgba(12,59,87,0.08);
  --ev-shadow-md:     0 4px 16px rgba(12,59,87,0.10);
  --ev-shadow-lg:     0 8px 32px rgba(12,59,87,0.14);
  --ev-shadow-pink:   0 4px 20px rgba(6,133,190,0.25);
  --ev-shadow-green:  0 4px 20px rgba(247,148,29,0.35);

  /* Transitions */
  --ev-transition:    all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ev-transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Override Envibe's own brand vars */
  --color-brand:       var(--ev-orange);
  --color-brand-light: var(--ev-orange);
  --color-brand-dark:  var(--ev-orange-dark);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body,
input, button, select, textarea,
p, span, li, td, th, div, a, h1, h2, h3, h4, h5, label {
  font-family: var(--ev-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--ev-off-white) !important;
  background-color: var(--ev-off-white) !important;
  color: var(--ev-text) !important;
}
a {
  color: var(--ev-blue) !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
a:hover { color: var(--ev-blue-dark) !important; text-decoration: none !important; }

/* ============================================================
   HEADER BANNER - swimmer photo + wave edge, white fade left, plateless logo
   Markup (HTML Body Content):
     <div id="clientheader">
       <a href="/" id="clientLogoLink" ...></a>
       <span class="header-strap">Swim - Gym - Courts - Community</span>
       <svg class="header-wave" ...>(wave path)</svg>
     </div>
   ============================================================ */
#clientheader {
  background-image: url('/File/Custom/aquatic-header.jpg') !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
  min-height: 150px !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
}
/* Concept E: white fade from the left - the logo's light zone.
   Adjust the 34%/62% stops to widen or narrow the white area */
#clientheader:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 34%, rgba(255,255,255,0) 62%) !important;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 34%, rgba(255,255,255,0) 62%) !important;
  z-index: 1 !important;
}

/* Wave edge blending into the white menu bar below */
#clientheader .header-wave {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: -1px !important;
  width: 100% !important;
  height: 34px !important;
  display: block !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
/* Right-side strapline */
#clientheader .header-strap {
  position: absolute !important;
  right: 44px !important;
  top: 50% !important;
  -webkit-transform: translateY(-70%) !important;
  transform: translateY(-70%) !important;
  z-index: 2 !important;
  color: rgba(255,255,255,0.94) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 1px 6px rgba(4,20,32,0.5) !important;
  white-space: nowrap !important;
}
/* Logo on its white plate, sized for the slim band */
#clientLogoLink {
  background-image: url('/File/Custom/Jonas-Leisure-640x240-transparent.png') !important;
  -webkit-background-size: contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 220px !important;
  height: 82px !important;
  display: inline-block !important;
  margin: 32px 0 0 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   PAGE STRUCTURE
   ============================================================ */
section.full-page {
  background: var(--ev-off-white) !important;
  background-color: var(--ev-off-white) !important;
}
header.page-header {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border-bottom: 1px solid var(--ev-border) !important;
  -webkit-box-shadow: var(--ev-shadow-sm) !important;
  box-shadow: var(--ev-shadow-sm) !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}


/* ============================================================
   NAV — UX BEST PRACTICE
   Standard SaaS pattern: sticky white bar, Menu left, account right
   No overlays, no floating, no position tricks
   Works identically on desktop, tablet, mobile
   ============================================================ */

/* 1. Header bar — sticky at top, white, subtle shadow */
header.page-header {
  display: block !important;
  visibility: visible !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 300 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8ef !important;
  -webkit-box-shadow: 0 1px 6px rgba(12,59,87,0.08) !important;
  box-shadow: 0 1px 6px rgba(12,59,87,0.08) !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2. Nav element — fills header */
nav.left-edge.top-edge.right-edge {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ev-border) !important;
}

/* 3. Full-width container inside nav */
nav.left-edge.top-edge.right-edge > div.full-width {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 28px !important;
  margin: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  min-height: 52px !important;
}

/* 4. Nav list — flex row, space between */
ul.spread.main-navigation {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  min-height: 52px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 0 !important;
  position: static !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

/* 5. Each li — auto size, centred vertically */
ul.spread.main-navigation > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  -webkit-flex-grow: 0 !important;
  flex-grow: 0 !important;
  position: relative !important;
}

/* Account/login item always stays right - matched by position AND
   by contents, so a hidden extra li (ticker slot) can't centre it */
ul.spread.main-navigation > li:last-child,
ul.spread.main-navigation > li:has(.login-form),
ul.spread.main-navigation > li:has(input[name="Username"]),
ul.spread.main-navigation > li:has(a[href*="Login" i]),
ul.spread.main-navigation > li:has(a[href*="Account" i]) {
  margin-left: auto !important;
}
ul.spread.main-navigation > li:has(input[name="Username"]) ~ li,
ul.spread.main-navigation > li:has(a[href*="Login" i]) ~ li {
  margin-left: 0 !important;
}
ul.spread.main-navigation > li:empty { display: none !important; }

/* 6. Strip ALL box styling from every wrapper inside li - including
   phx-popup and any nesting depth - so Envibe's own white pill
   never shows around the trigger chip. The dropdown panel
   (.h-100.z-150 / .ddmenu) is excluded so it keeps its card look. */
ul.spread.main-navigation > li > div,
ul.spread.main-navigation > li > div.vue-root,
ul.spread.main-navigation > li > div.vue-root > div,
ul.spread.main-navigation phx-popup,
ul.spread.main-navigation > li div:not(.h-100):not(.z-150):not(.ddmenu):not([class*="login-form"]) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  width: auto !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  position: relative !important;
}

/* 7. The actual trigger button — a.w-100 */
ul.spread.main-navigation div.h-100.z-150 > a.w-100,
ul.spread.main-navigation div.h-100.z-150 > button.w-100 {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: #f4f6f8 !important;
  background-color: #f4f6f8 !important;
  color: #404042 !important;
  -webkit-text-fill-color: #404042 !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  -webkit-transition: background 0.15s ease, color 0.15s ease !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
ul.spread.main-navigation div.h-100.z-150 > a.w-100:hover,
ul.spread.main-navigation div.h-100.z-150 > button.w-100:hover {
  background: #e6f4fb !important;
  background-color: #e6f4fb !important;
  color: #0685be !important;
  -webkit-text-fill-color: #0685be !important;
}

/* ============================================================
   TICKER - the Web Header Item renders as <li><h4>...</h4></li>
   INSIDE ul.spread.main-navigation (verified from live source).
   Give it its own full-width strip row above the Menu/Log In row.
   ============================================================ */
/* The ticker li is the MIDDLE item (Menu, ticker, Log In) - target
   it positionally; :not(:last-child) protects the Log In li when no
   ticker is configured and the list only has two items. :has() kept
   as a secondary match. */
ul.spread.main-navigation > li:not(:first-child):not(:last-child),
ul.spread.main-navigation > li:has(h4) {
  -webkit-flex: 1 1 100% !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-order: -1 !important;
  order: -1 !important;
  display: block !important;
  margin: 0 0 10px !important;
  overflow: visible !important;
}
ul.spread.main-navigation li h4 {
  display: block !important;
  width: 100% !important;
  background: var(--ev-navy-mid) !important;
  background-color: var(--ev-navy-mid) !important;
  color: rgba(255,255,255,0.94) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-left: 3px solid var(--ev-orange) !important;
  border-radius: 8px !important;
  text-align: center !important;
}
ul.spread.main-navigation li h4 a,
ul.spread.main-navigation li h4 a b {
  color: var(--ev-orange) !important;
  -webkit-text-fill-color: var(--ev-orange) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
ul.spread.main-navigation li h4 a:hover,
ul.spread.main-navigation li h4 a:hover b {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---- ALERT tier for web header items ----
   Use for urgent notices (closures, disruptions). In the Web Header
   Item content, wrap the notice like:
   <div class="header-alert"><strong>Pool closure notice</strong>
   The pool will be closed on Sunday, 26 July 2026.</div>
   Promo items stay as plain <h4> and keep the petrol strip. */
ul.spread.main-navigation .header-alert {
  display: block !important;
  width: 100% !important;
  background: #fef3c7 !important;
  background-color: #fef3c7 !important;
  color: #7a3d0e !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-left: 3px solid #f59e0b !important;
  border-radius: 8px !important;
  text-align: center !important;
}
ul.spread.main-navigation .header-alert strong,
ul.spread.main-navigation .header-alert b {
  color: #92400e !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.8rem !important;
  margin-right: 8px !important;
}
ul.spread.main-navigation .header-alert a {
  color: #92400e !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Hide duplicate Log In */
a.if-no-js {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================
   NAV TRIGGERS & DROPDOWN PANELS
   Verified hydrated DOM:
     li > div.vue-root > div.h-100.z-150 > a.w-100        (the BUTTON)
                                         > .ddmenu         (menu panel, when open)
                                         > form.login-form (login panel, when open)
   div.h-100.z-150 WRAPS the trigger - it must stay neutral and
   in-flow. Panels float from it when Vue renders them.
   ============================================================ */
ul.spread.main-navigation > li div.vue-root {
  position: relative !important;
}
ul.spread.main-navigation > li div.vue-root > div.h-100.z-150 {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

/* ---- Floating panels (only exist while open) ---- */
ul.spread.main-navigation div.h-100.z-150 > .ddmenu,
ul.spread.main-navigation div.h-100.z-150 > form.login-form {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 6px; /* small inset so the panel doesn't hug the page edge */
  z-index: 9999 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 12px !important;
  -webkit-box-shadow: 0 8px 24px rgba(12,59,87,0.18) !important;
  box-shadow: 0 8px 24px rgba(12,59,87,0.18) !important;
  padding: 6px !important;
  min-width: 230px !important;
  width: -webkit-max-content !important;
  width: max-content !important;
  max-width: min(92vw, 360px) !important;
  height: auto !important;
  min-height: unset !important;
  -webkit-transform: none !important;
  transform: none !important;
}
/* Account/login panel opens right-aligned */
ul.spread.main-navigation > li:last-child div.h-100.z-150 > .ddmenu,
ul.spread.main-navigation > li:last-child div.h-100.z-150 > form.login-form {
  right: 0 !important;
  left: auto !important;
}

/* Menu items inside the dropdown */
ul.spread.main-navigation .ddmenu-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
ul.spread.main-navigation .ddmenu-items > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul.spread.main-navigation .ddmenu-items a {
  display: block !important;
  width: 100% !important;
  color: var(--ev-text) !important;
  -webkit-text-fill-color: var(--ev-text) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  -webkit-transition: background 0.12s ease, color 0.12s ease !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
ul.spread.main-navigation .ddmenu-items a:hover {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
  -webkit-text-fill-color: var(--ev-blue) !important;
}

/* Login panel internals - the inner .ddmenu fieldset must NOT
   render as a second card */
ul.spread.main-navigation form.login-form .ddmenu,
ul.spread.main-navigation form.login-form .login-form__fieldset {
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 10px !important;
  min-width: 0 !important;
  width: auto !important;
}
ul.spread.main-navigation .login-form__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
ul.spread.main-navigation .login-form__list > li {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
ul.spread.main-navigation .login-form__list label {
  font-size: 0.7rem !important;
  margin-bottom: 5px !important;
}
ul.spread.main-navigation .login-form input.text-box {
  width: 100% !important;
  min-width: 240px !important;
}
/* Remember Me: checkbox and label inline */
ul.spread.main-navigation .login-form__list input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}
ul.spread.main-navigation .login-form__list input[type="checkbox"] + label {
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
ul.spread.main-navigation .login-form__list li.centre {
  text-align: center !important;
  font-size: 0.8rem !important;
  margin-bottom: 4px !important;
}

/* Affirmative buttons (login submit etc.) - Jonas orange CTA */
button.btn--affirmative,
ul.spread.main-navigation form.login-form button.w-100 {
  display: block !important;
  width: 100% !important;
  background: var(--ev-orange) !important;
  background-color: var(--ev-orange) !important;
  border: none !important;
  border-radius: var(--ev-radius) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 11px 18px !important;
  -webkit-box-shadow: var(--ev-shadow-green) !important;
  box-shadow: var(--ev-shadow-green) !important;
  cursor: pointer !important;
  text-align: center !important;
}
button.btn--affirmative:hover,
ul.spread.main-navigation form.login-form button.w-100:hover {
  background: var(--ev-orange-dark) !important;
  background-color: var(--ev-orange-dark) !important;
}

/* Log Out / plain buttons inside dropdown panels (logged-in state) */
ul.spread.main-navigation div.h-100.z-150 > .ddmenu button:not(.btn--affirmative) {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ev-text) !important;
  -webkit-text-fill-color: var(--ev-text) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  text-align: left !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
ul.spread.main-navigation div.h-100.z-150 > .ddmenu button:not(.btn--affirmative):hover {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
  -webkit-text-fill-color: var(--ev-blue) !important;
}

/* ============================================================
   RESPONSIVE (NAV)
   ============================================================ */
@media screen and (max-width: 768px) {
  nav.left-edge.top-edge.right-edge > div.full-width {
    padding: 0 16px !important;
    min-height: 48px !important;
  }
  ul.spread.main-navigation div.h-100.z-150 > .ddmenu,
  ul.spread.main-navigation div.h-100.z-150 > form.login-form {
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }
  ul.spread.main-navigation > li:first-child div.h-100.z-150 > .ddmenu {
    left: 0 !important;
    right: auto !important;
  }
  ul.spread.main-navigation > li:last-child div.h-100.z-150 > .ddmenu,
  ul.spread.main-navigation > li:last-child div.h-100.z-150 > form.login-form {
    right: 0 !important;
    left: auto !important;
  }
  ul.spread.main-navigation { min-height: 48px !important; }
  ul.spread.main-navigation div.h-100.z-150 > a.w-100,
  ul.spread.main-navigation div.h-100.z-150 > button.w-100 {
    height: 34px !important;
    font-size: 0.84rem !important;
    padding: 0 12px !important;
    max-width: 150px !important;
  }
}
@media screen and (max-width: 480px) {
  nav.left-edge.top-edge.right-edge > div.full-width {
    padding: 0 14px !important;
    min-height: 44px !important;
  }
  ul.spread.main-navigation { min-height: 44px !important; }
  ul.spread.main-navigation div.h-100.z-150 > a.w-100,
  ul.spread.main-navigation div.h-100.z-150 > button.w-100 {
    height: 32px !important;
    font-size: 0.8rem !important;
    padding: 0 10px !important;
    max-width: 120px !important;
    gap: 4px !important;
  }
  ul.spread.main-navigation > li:last-child div.h-100.z-150 > form.login-form,
  ul.spread.main-navigation > li:last-child div.h-100.z-150 > .ddmenu {
    right: 0 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
  }
  ul.spread.main-navigation .login-form input.text-box {
    min-width: 0 !important;
  }
}


/* ============================================================
   TICKER / WEB HEADER ITEM
   The ticker is li:nth-child(2) in ul.spread.main-navigation
   ============================================================ */
div.page-heading-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 14px 0 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
div.page-heading-wrapper > center {
  background: transparent !important;
  background-color: transparent !important;
  display: block !important;
}
div.page-heading-wrapper > center > h4,
div.page-heading-wrapper h4,
h4[style*="9BC3F2"] {
  background: var(--ev-navy-mid) !important;
  background-color: var(--ev-navy-mid) !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
  border-radius: 0 !important;
  border-left: 3px solid var(--ev-blue) !important;
  display: block !important;
  width: 100% !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   PAGE HEADING / BREADCRUMB AREA — transparent, no navy band
   ============================================================ */
section.left-edge.right-edge.page-heading,
section.right-edge.left-edge.page-heading,
section.page-heading.left-edge,
section.page-heading.right-edge,
section.page-heading,
.page-heading,
div.page-heading-wrapper > center > section,
div.page-heading-wrapper > center > section.left-edge.right-edge.page-heading {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding-top: 20px !important;
  padding-bottom: 4px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
nav[aria-label="Breadcrumb"],
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="Breadcrumb"] ul {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  font-size: 0.82rem !important;
  text-align: center !important;
}
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="Breadcrumb"] ul {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  width: 100% !important;
}
nav[aria-label="Breadcrumb"] a {
  color: var(--ev-blue) !important;
  font-weight: 600 !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
nav[aria-label="Breadcrumb"] a:hover { color: var(--ev-blue-dark) !important; }
nav[aria-label="Breadcrumb"] li,
nav[aria-label="Breadcrumb"] span { color: var(--ev-muted) !important; }

/* ============================================================
   PAGE TITLES
   ============================================================ */
/* Page title - lifted UP into the white menu bar, centred between
   the Menu button (left) and Log In (right). The title's own row
   collapses, tightening the header.
   FINE-TUNING: if the title sits slightly too high or low in the
   bar on your portal, nudge the top value below (currently -48px)
   by a few pixels either way. */
h1.full-width,
section.page-heading h1,
section.left-edge.right-edge.page-heading h1 {
  position: absolute !important;
  top: -48px !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--ev-navy) !important;
  -webkit-text-fill-color: var(--ev-navy) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 46vw !important;
  width: auto !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
/* No underline bar in toolbar mode */
h1.full-width:after,
section.page-heading h1:after {
  display: none !important;
}
/* The wrapper is the positioning anchor for the lifted title */
div.page-heading-wrapper { position: relative !important; }

h2 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ev-navy) !important;
}
h3 { font-size: 1rem !important; font-weight: 700 !important; color: var(--ev-navy) !important; }

/* ============================================================
   HOME MENU TILES — Premium editorial cards
   ============================================================ */
ul.main-menu {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.main-menu > li {
  list-style: none !important;
  -webkit-flex: 1 1 280px !important;
  flex: 1 1 280px !important;
  max-width: calc(33.333% - 10px) !important;
  min-width: 260px !important;
}
a.main-menu__link {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  border-radius: var(--ev-radius-lg) !important;
  border: none !important;
  -webkit-box-shadow: var(--ev-shadow-md) !important;
  box-shadow: var(--ev-shadow-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  -webkit-transition: var(--ev-transition-bounce) !important;
  transition: var(--ev-transition-bounce) !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}
a.main-menu__link:hover {
  -webkit-transform: translateY(-6px) scale(1.02) !important;
  transform: translateY(-6px) scale(1.02) !important;
  -webkit-box-shadow: var(--ev-shadow-lg) !important;
  box-shadow: var(--ev-shadow-lg) !important;
  text-decoration: none !important;
}
/* Image — full bleed */
p.main-menu__icon {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important; padding: 0 !important;
  width: 100% !important; height: 100% !important;
  overflow: hidden !important; display: block !important;
}
p.main-menu__icon img {
  display: block !important;
  width: 100% !important; height: 100% !important;
  -o-object-fit: cover !important; object-fit: cover !important;
  -o-object-position: center !important; object-position: center !important;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
a.main-menu__link:hover p.main-menu__icon img {
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
}
/* Gradient overlay */
a.main-menu__link > div {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: -webkit-linear-gradient(bottom,
    rgba(12,59,87,0.97) 0%,
    rgba(12,59,87,0.75) 35%,
    rgba(12,59,87,0.2) 65%,
    transparent 100%) !important;
  background: linear-gradient(to top,
    rgba(12,59,87,0.97) 0%,
    rgba(12,59,87,0.75) 35%,
    rgba(12,59,87,0.2) 65%,
    transparent 100%) !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
  padding: 0 20px 22px !important;
  gap: 6px !important;
}
/* Animated pink-to-green bar on hover */
a.main-menu__link > div:before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: -webkit-linear-gradient(left, var(--ev-blue), var(--ev-orange)) !important;
  background: linear-gradient(to right, var(--ev-blue), var(--ev-orange)) !important;
  -webkit-transform: scaleX(0) !important;
  transform: scaleX(0) !important;
  -webkit-transform-origin: left !important;
  transform-origin: left !important;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
a.main-menu__link:hover > div:before {
  -webkit-transform: scaleX(1) !important;
  transform: scaleX(1) !important;
}
/* Tile heading */
p.main-menu__heading,
a.main-menu__link p.main-menu__heading,
ul.main-menu a p.main-menu__heading {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Tile body */
p.main-menu__body,
a.main-menu__link p.main-menu__body,
ul.main-menu a p.main-menu__body {
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Staggered entrance animation */
@-webkit-keyframes ev-tile-in {
  from { opacity: 0; -webkit-transform: translateY(20px) scale(0.98); transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes ev-tile-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
ul.main-menu > li:nth-child(1) a { -webkit-animation: ev-tile-in 0.5s 0.05s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.05s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(2) a { -webkit-animation: ev-tile-in 0.5s 0.12s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.12s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(3) a { -webkit-animation: ev-tile-in 0.5s 0.19s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.19s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(4) a { -webkit-animation: ev-tile-in 0.5s 0.26s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.26s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(5) a { -webkit-animation: ev-tile-in 0.5s 0.33s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.33s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(6) a { -webkit-animation: ev-tile-in 0.5s 0.40s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.40s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(7) a { -webkit-animation: ev-tile-in 0.5s 0.47s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.47s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(8) a { -webkit-animation: ev-tile-in 0.5s 0.54s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.54s cubic-bezier(0.4,0,0.2,1) both; }
ul.main-menu > li:nth-child(9) a { -webkit-animation: ev-tile-in 0.5s 0.61s cubic-bezier(0.4,0,0.2,1) both; animation: ev-tile-in 0.5s 0.61s cubic-bezier(0.4,0,0.2,1) both; }

/* ============================================================
   AM/PM TIMEPICKER
   ============================================================ */
label.timepicker__btn {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 2px solid var(--ev-border-mid) !important;
  color: var(--ev-text) !important;
  border-radius: var(--ev-radius) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 10px 28px !important;
  cursor: pointer !important;
  display: inline-block !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
  -webkit-tap-highlight-color: transparent !important;
  letter-spacing: 0.02em !important;
}
label.timepicker__btn:hover {
  background: var(--ev-orange-light) !important;
  background-color: var(--ev-orange-light) !important;
  border-color: var(--ev-orange) !important;
  color: var(--ev-orange-dark) !important;
}
label.timepicker__btn--active,
label.timepicker__btn--active:hover {
  background: var(--ev-orange) !important;
  background-color: var(--ev-orange) !important;
  border-color: var(--ev-orange) !important;
  color: var(--ev-white) !important;
  -webkit-box-shadow: var(--ev-shadow-green) !important;
  box-shadow: var(--ev-shadow-green) !important;
}
ul.timepicker__list {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  list-style: none !important;
  margin-top: 12px !important;
}
ul.timepicker__list > li { list-style: none !important; }

/* ============================================================
   BUTTONS — premium treatment
   ============================================================ */
button, .btn, input[type="submit"], input[type="button"] {
  font-family: var(--ev-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ev-radius) !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Primary CTA — green with glow */
.btn-primary, button.btn-primary, a.btn-primary,
input[type="submit"], input[type="button"] {
  background: var(--ev-orange) !important;
  background-color: var(--ev-orange) !important;
  border-color: var(--ev-orange) !important;
  color: var(--ev-white) !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  font-size: 0.9rem !important;
  -webkit-box-shadow: var(--ev-shadow-green) !important;
  box-shadow: var(--ev-shadow-green) !important;
  border-radius: var(--ev-radius) !important;
}
.btn-primary:hover, button.btn-primary:hover, input[type="submit"]:hover {
  background: var(--ev-orange-dark) !important;
  background-color: var(--ev-orange-dark) !important;
  border-color: var(--ev-orange-dark) !important;
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
  -webkit-box-shadow: 0 6px 24px rgba(247,148,29,0.45) !important;
  box-shadow: 0 6px 24px rgba(247,148,29,0.45) !important;
}
.btn-default, button.btn-default {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  color: var(--ev-text) !important;
  font-weight: 600 !important;
}
.btn-default:hover {
  border-color: var(--ev-navy) !important;
  color: var(--ev-navy) !important;
  -webkit-transform: translateY(-1px) !important;
  transform: translateY(-1px) !important;
}
.btn-danger, button.btn-danger {
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  border-color: var(--ev-navy) !important;
  color: var(--ev-white) !important;
  font-weight: 700 !important;
}
button[class*="cancel"], a[class*="cancel"] {
  background: transparent !important;
  border: 1px solid var(--ev-border) !important;
  color: var(--ev-muted) !important;
}

/* Dashboard primary actions — pink */
main#main .btn-primary,
main#main a.btn-primary,
main#main button.btn-primary {
  background: var(--ev-blue) !important;
  background-color: var(--ev-blue) !important;
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: var(--ev-shadow-pink) !important;
  box-shadow: var(--ev-shadow-pink) !important;
}
main#main .btn-primary:hover,
main#main a.btn-primary:hover {
  background: var(--ev-blue-dark) !important;
  background-color: var(--ev-blue-dark) !important;
  border-color: var(--ev-blue-dark) !important;
}

/* ============================================================
   FORMS — premium inputs
   ============================================================ */
label {
  font-weight: 600 !important;
  font-size: 0.73rem !important;
  color: var(--ev-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 7px !important;
  display: block !important;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], textarea {
  border: 1.5px solid var(--ev-border-mid) !important;
  border-radius: var(--ev-radius) !important;
  padding: 11px 14px !important;
  font-size: 0.9rem !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  color: var(--ev-text) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
  outline: none !important;
}
select {
  border: 1.5px solid var(--ev-border-mid) !important;
  border-radius: var(--ev-radius) !important;
  padding: 11px 14px !important;
  background: var(--ev-white) !important;
  color: var(--ev-text) !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
.input-group-btn > .btn {
  background: var(--ev-off-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  color: var(--ev-navy) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
.input-group-btn > .btn:hover {
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  color: var(--ev-white) !important;
  border-color: var(--ev-navy) !important;
}

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel, .card, .well {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-lg) !important;
  -webkit-box-shadow: var(--ev-shadow-xs) !important;
  box-shadow: var(--ev-shadow-xs) !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
.panel:hover, .card:hover {
  -webkit-box-shadow: var(--ev-shadow-sm) !important;
  box-shadow: var(--ev-shadow-sm) !important;
}
.panel-heading, .card-header {
  background: var(--ev-surface-2) !important;
  background-color: var(--ev-surface-2) !important;
  border-bottom: 1px solid var(--ev-border) !important;
  font-weight: 700 !important;
  font-size: 0.73rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ev-muted) !important;
  border-radius: var(--ev-radius-lg) var(--ev-radius-lg) 0 0 !important;
  padding: 13px 18px !important;
}

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--ev-border) !important;
  gap: 2px !important;
  display: -webkit-flex !important;
  display: flex !important;
}
.nav-tabs > li > a {
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: var(--ev-muted) !important;
  border-radius: var(--ev-radius-sm) var(--ev-radius-sm) 0 0 !important;
  border: 1px solid transparent !important;
  padding: 10px 16px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  background: var(--ev-blue) !important;
  background-color: var(--ev-blue) !important;
  color: var(--ev-white) !important;
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: var(--ev-shadow-pink) !important;
  box-shadow: var(--ev-shadow-pink) !important;
}
.nav-tabs > li > a:hover {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
}

/* ============================================================
   SELECTION CARDS (membership, courses, locations)
   ============================================================ */
label.list-button,
a.list-button {
  display: block !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-lg) !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
  -webkit-transition: var(--ev-transition-bounce) !important;
  transition: var(--ev-transition-bounce) !important;
  margin-bottom: 10px !important;
  -webkit-box-shadow: var(--ev-shadow-xs) !important;
  box-shadow: var(--ev-shadow-xs) !important;
}
label.list-button:hover,
a.list-button:hover {
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: var(--ev-shadow-pink) !important;
  box-shadow: var(--ev-shadow-pink) !important;
  -webkit-transform: translateY(-3px) !important;
  transform: translateY(-3px) !important;
}
span.list-button__heading {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ev-navy) !important;
  display: block !important;
  margin-bottom: 5px !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
span.list-button__description {
  font-size: 0.82rem !important;
  color: var(--ev-muted) !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  white-space: normal !important;
  display: block !important;
}

/* ---- Drilldown selectors (verified: Course enrol page) ----
   fieldset.bt > legend + ol.h-stack > li > input.sr-only + label.list-button
   with .list-button__content / __icon / __heading inside      */
fieldset.bt {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  min-width: 0 !important;
}
fieldset.bt > legend {
  font-family: var(--ev-font) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--ev-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  width: auto !important;
}
ol.h-stack, ul.h-stack {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.h-stack > li {
  list-style: none !important;
  -webkit-flex: 1 1 280px !important;
  flex: 1 1 280px !important;
  max-width: 420px !important;
  margin: 0 !important;
}
.h-stack > li label.list-button,
.h-stack > li a.list-button {
  margin-bottom: 0 !important;
  height: 100% !important;
}
/* Anchor variant must not inherit global link colour */
a.list-button, a.list-button:hover { text-decoration: none !important; }
a.list-button .list-button__heading { color: var(--ev-navy) !important; }
a.list-button:hover .list-button__heading { color: var(--ev-blue) !important; }
span.list-button__content {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 14px !important;
  text-transform: none !important;
}
span.list-button__icon {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
  font-size: 1.05rem !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
/* Selected state - the radio before the label is checked */
input:checked + label.list-button {
  border-color: var(--ev-blue) !important;
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  -webkit-box-shadow: 0 0 0 3px var(--ev-blue-glow), var(--ev-shadow-sm) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-glow), var(--ev-shadow-sm) !important;
}
input:checked + label.list-button span.list-button__icon {
  background: var(--ev-blue) !important;
  background-color: var(--ev-blue) !important;
  color: #ffffff !important;
}
input:checked + label.list-button span.list-button__heading {
  color: var(--ev-blue) !important;
}
/* Keyboard focus ring for accessibility */
input:focus-visible + label.list-button {
  outline: 3px solid var(--ev-blue-glow) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   MEMBERSHIP INFO BANNER
   ============================================================ */
div.page-heading-wrapper h4[style],
h4[style*="9BC3F2"] {
  background-color: var(--ev-navy-mid) !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 14px 24px !important;
  border-left: 4px solid var(--ev-blue) !important;
  border-radius: 0 !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   DASHBOARD SECTIONS
   ============================================================ */
main#main h2 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ev-navy) !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 15px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ev-border) !important;
  letter-spacing: -0.01em !important;
}
main#main h2 > i,
main#main h2 svg {
  color: var(--ev-orange) !important;
  font-size: 1.15rem !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
}
main#main [class*="rounded-full"],
main#main button[class*="rounded-full"],
main#main a[class*="rounded-full"] {
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  border: none !important;
  color: var(--ev-white) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  cursor: pointer !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
main#main [class*="rounded-full"] i,
main#main [class*="rounded-full"] svg,
main#main [class*="rounded-full"] * {
  color: var(--ev-white) !important;
  fill: var(--ev-white) !important;
}
main#main [class*="rounded-full"]:hover {
  background: var(--ev-blue) !important;
  background-color: var(--ev-blue) !important;
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
  -webkit-box-shadow: var(--ev-shadow-pink) !important;
  box-shadow: var(--ev-shadow-pink) !important;
}
main#main p:not(.main-menu__heading):not(.main-menu__body):not(.main-menu__icon):not([class*="timetable"]),
main#main li:not([class*="main-menu"]):not([class*="timetable"]),
main#main td:not([class*="timetable"]) {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--ev-text) !important;
}
main#main strong, main#main b { font-weight: 700 !important; color: var(--ev-navy) !important; }
main#main small, main#main .text-muted { color: var(--ev-muted) !important; font-size: 0.78rem !important; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  background: var(--ev-border) !important;
  background-color: var(--ev-border) !important;
  border-radius: 20px !important;
  height: 8px !important;
  margin: 8px 0 28px !important;
  overflow: visible !important;
}
.progress-bar {
  background: -webkit-linear-gradient(left, var(--ev-blue), var(--ev-orange)) !important;
  background: linear-gradient(to right, var(--ev-blue), var(--ev-orange)) !important;
  border-radius: 20px !important;
  min-width: 24px !important;
  position: relative !important;
  -webkit-transition: width 0.8s cubic-bezier(0.4,0,0.2,1) !important;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1) !important;
}
.progress-bar:after {
  content: attr(aria-valuenow) '%';
  position: absolute;
  right: 0; top: -22px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ev-blue);
  font-family: var(--ev-font);
}

/* ============================================================
   STATUS LABELS & BADGES
   ============================================================ */
.label {
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
}
.label-default { background: #f1f5f9 !important; color: var(--ev-muted) !important; border: 1px solid var(--ev-border) !important; }
.label-success  { background: var(--ev-orange-light) !important; color: var(--ev-orange-dark) !important; }
.label-warning  { background: #fef3c7 !important; color: #92400e !important; }
.label-danger   { background: #fee2e2 !important; color: #991b1b !important; }
.label-info     { background: var(--ev-blue-light) !important; color: var(--ev-blue-dark) !important; }

/* ============================================================
   CART / TABLE
   ============================================================ */
.table thead th {
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  padding: 13px 20px !important;
}
.table tbody td {
  padding: 13px 20px !important;
  border-color: var(--ev-border) !important;
  font-size: 0.9rem !important;
  color: var(--ev-text) !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
.table tbody tr:hover td {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
}
.table tfoot td {
  font-weight: 700 !important;
  background: var(--ev-off-white) !important;
  background-color: var(--ev-off-white) !important;
  border-top: 2px solid var(--ev-border-mid) !important;
  color: var(--ev-navy) !important;
  font-size: 1rem !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.page-footer,
footer.left-edge.bottom-edge.right-edge.page-footer {
  background: var(--ev-navy) !important;
  background-color: var(--ev-navy) !important;
  color: rgba(255,255,255,0.6) !important;
  padding: 24px 40px !important;
  font-size: 0.82rem !important;
  border-top: 3px solid var(--ev-blue) !important;
}
footer.page-footer a {
  color: rgba(255,255,255,0.8) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
footer.page-footer a:hover { color: var(--ev-white) !important; }

/* ============================================================
   PAGE ENTRY ANIMATION
   ============================================================ */
@-webkit-keyframes ev-page-in {
  from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes ev-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
main#main {
  -webkit-animation: ev-page-in 0.45s cubic-bezier(0.4,0,0.2,1) both !important;
  animation: ev-page-in 0.45s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* ============================================================
   SCROLLBAR — premium thin style (Chrome/Safari)
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ev-border-mid); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ev-blue); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 768px) {
  ul.main-menu > li { max-width: calc(50% - 8px) !important; min-width: 0 !important; -webkit-flex: 1 1 calc(50% - 8px) !important; flex: 1 1 calc(50% - 8px) !important; }
  a.main-menu__link { height: 210px !important; }
  #clientheader { min-height: 112px !important; }
  #clientheader .header-strap { display: none !important; }
  #clientLogoLink { width: 156px !important; height: 58px !important; padding: 0 !important; margin: 27px 0 0 16px !important; }
  #clientheader:before {
    background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 44%, rgba(255,255,255,0) 78%) !important;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 44%, rgba(255,255,255,0) 78%) !important;
  }
  h1.full-width, section.page-heading h1 { font-size: 1.05rem !important; top: -44px !important; max-width: 38vw !important; }
}
@media screen and (max-width: 480px) {
  ul.main-menu > li { max-width: 100% !important; -webkit-flex: 1 1 100% !important; flex: 1 1 100% !important; }
  a.main-menu__link { height: 200px !important; }
}


/* ============================================================
   BOOKINGS PAGE (verified salesdemo DOM, July 2026)
   Filter grid, conditions card, steppers, datepicker, calendar,
   time-slot chips with availability badges, page-action chips.
   All scoped to main#main - nav rules are untouched.
   ============================================================ */

/* ---- Centred content column ----
   Take ownership of page-level layout: flatten Envibe's page grid
   and centre MAIN itself as a width-capped column. Adjust the
   max-width below to taste (800-1000px works well). */
section.full-page {
  display: block !important;
}
main#main.main-content--wide {
  max-width: none !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
main#main {
  display: block !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 8px 24px 48px !important;
  float: none !important;
}
/* Form/content pages (.stack wrapper) get a tighter reading width,
   centred inside the main column; home tiles keep the full width.
   Adjust 680px to taste (620-760 works well). */
main#main > div.stack {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* The narrow reading cap applies to FORMS only (booking form etc.)
   so wide components like the Courses timetable keep full width */
main#main form {
  display: block !important;
  width: 100% !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
main#main > ul.main-menu {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Prevent wide grids forcing the column open */
main#main .timepicker,
main#main ul.filter-container {
  min-width: 0 !important;
}

/* ---- Page actions (My Bookings / Timetable chips) ---- */
main#main ol.page-actions {
  display: -webkit-flex !important;
  display: flex !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
main#main a.page-actions__btn-nav {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 12px !important;
  padding: 11px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--ev-navy) !important;
  -webkit-text-fill-color: var(--ev-navy) !important;
  text-decoration: none !important;
  -webkit-box-shadow: var(--ev-shadow-xs) !important;
  box-shadow: var(--ev-shadow-xs) !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
main#main a.page-actions__btn-nav:hover {
  border-color: var(--ev-blue) !important;
  color: var(--ev-blue) !important;
  -webkit-text-fill-color: var(--ev-blue) !important;
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
}
main#main .page-actions__btn-nav-icon {
  color: var(--ev-blue) !important;
  font-size: 1.15rem !important;
}

/* ---- Vertical rhythm ---- */
main#main div.stack > ul.stack { gap: 20px !important; }

/* ---- Filter grid ---- */
main#main ul.filter-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
main#main li.filter-container__item {
  list-style: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}
main#main li.filter-container__item.filter-container__item--s {
  max-width: 220px !important;
}
/* An item that carries Conditions spans the full row */
main#main li.filter-container__item:has(h2) {
  grid-column: 1 / -1 !important;
}

/* ---- Select comboboxes ---- */
main#main .filter .select {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  border-radius: 10px !important;
  padding-right: 10px !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
main#main .filter .select:focus-within {
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
}
main#main .filter .select input {
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 11px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
main#main .filter .select input:focus {
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}
main#main .filter .select i {
  color: var(--ev-muted) !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
}
/* Options list when a filter is open */
main#main .filter [role="listbox"],
main#main .filter .h-100.z-150 > ul {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 10px !important;
  -webkit-box-shadow: var(--ev-shadow-md) !important;
  box-shadow: var(--ev-shadow-md) !important;
  padding: 4px !important;
  z-index: 500 !important;
}
main#main .filter [role="option"],
main#main .filter .h-100.z-150 > ul > li {
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
}
main#main .filter [role="option"]:hover,
main#main .filter .h-100.z-150 > ul > li:hover {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
}

/* ---- Conditions card ---- */
main#main .filter-container__item > h2 {
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ev-navy) !important;
  border: none !important;
  padding: 0 !important;
  margin: 16px 0 8px !important;
  display: block !important;
}
main#main .filter-container__item > h2 ~ p {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  border-left: 3px solid var(--ev-blue) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  color: var(--ev-text) !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
}

/* ---- Group size stepper ---- */
main#main span.number-picker {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
}
main#main .number-picker__button {
  width: 40px !important;
  min-height: 42px !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  color: var(--ev-blue) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
main#main .number-picker__button--minus { border-radius: 10px 0 0 10px !important; border-right: none !important; }
main#main .number-picker__button--plus  { border-radius: 0 10px 10px 0 !important; border-left: none !important; }
main#main .number-picker__button:hover:not([disabled]) {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
}
main#main .number-picker__button[disabled] { color: var(--ev-faint) !important; cursor: not-allowed !important; }
main#main input.number-picker__input {
  width: 64px !important;
  text-align: center !important;
  border-radius: 0 !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  padding: 9px 6px !important;
}

/* ---- Date field ---- */
main#main .datepicker__input-container {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  border-radius: 10px !important;
  padding: 2px 10px !important;
  color: var(--ev-muted) !important;
}
main#main .datepicker__input-container:focus-within {
  border-color: var(--ev-blue) !important;
  -webkit-box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
}
main#main input.datepicker__input {
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 3.4em !important;
  text-align: center !important;
  padding: 9px 2px !important;
}
main#main input.datepicker__input:focus { outline: none !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
main#main input.datepicker__input--s { width: 2.5em !important; }
main#main .datepicker__btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
  font-size: 1rem !important;
  margin-left: 8px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
main#main .datepicker__btn:hover {
  background: var(--ev-blue) !important;
  background-color: var(--ev-blue) !important;
  color: #ffffff !important;
}

/* ---- Calendar dialog ---- */
.dp-calendar {
  font-family: var(--ev-font) !important;
  border-radius: 14px !important;
}
.dp-calendar__day { color: var(--ev-muted) !important; font-weight: 700 !important; font-size: 0.72rem !important; }
button.dp-calendar__day-btn {
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  color: var(--ev-text) !important;
}
button.dp-calendar__day-btn:hover:not([disabled]) {
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
}
button.dp-calendar__day-btn--selected,
button.dp-calendar__day-btn--selected:hover {
  background: var(--ev-orange) !important;
  background-color: var(--ev-orange) !important;
  color: #ffffff !important;
}
button.dp-calendar__day-btn--disabled {
  color: var(--ev-faint) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}
.dp-calendar__corner--selected { display: none !important; }
button.dp-calendar__header-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ev-navy) !important;
  font-weight: 800 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
button.dp-calendar-btn, button.dialog__close-button {
  background: var(--ev-off-white) !important;
  background-color: var(--ev-off-white) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ev-navy) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
button.dp-calendar-btn--disabled { color: var(--ev-faint) !important; }
.dp-calendar__legend-key--unavailable { background: var(--ev-border-mid) !important; border-radius: 3px !important; }

/* ---- Fine print under the date ---- */
main#main p.f-3xs {
  font-size: 0.74rem !important;
  color: var(--ev-muted) !important;
  margin: 3px 0 0 !important;
  line-height: 1.5 !important;
}

/* ---- Width harmony: selects fill the content column ---- */
main#main .filter,
main#main .filter.filter--l {
  width: 100% !important;
  max-width: none !important;
}

/* ---- Timepicker layout repairs ---- */
main#main .timepicker__outer,
main#main .timepicker__container {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
main#main .timepicker__btn-container {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
}
main#main ul.timepicker__list {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  padding: 10px 0 0 !important;
  margin: 8px 0 0 !important;
  list-style: none !important;
}
main#main li.timepicker__list-item {
  width: auto !important;
  min-width: 0 !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ---- Time slots ---- */
main#main .timepicker {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 18px !important;
}
main#main .timepicker__outer { min-width: 0 !important; }
main#main li.timepicker__list-item {
  position: relative !important;
  list-style: none !important;
}
main#main label.timepicker__time {
  display: inline-block !important;
  white-space: nowrap !important;
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1.5px solid var(--ev-border-mid) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--ev-navy) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  -webkit-transition: var(--ev-transition) !important;
  transition: var(--ev-transition) !important;
}
main#main label.timepicker__time:hover {
  border-color: var(--ev-blue) !important;
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
}
main#main label.timepicker__time:has(input:checked) {
  border-color: var(--ev-blue) !important;
  background: var(--ev-blue-light) !important;
  background-color: var(--ev-blue-light) !important;
  color: var(--ev-blue) !important;
  -webkit-box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-glow) !important;
}
/* Availability badge on the chip corner */
main#main .timepicker__spaces {
  position: absolute !important;
  top: -8px !important;
  right: -6px !important;
  z-index: 2 !important;
  background: var(--ev-orange) !important;
  background-color: var(--ev-orange) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
  pointer-events: none !important;
}
main#main .timepicker__spaces:after { content: " left"; }


/* ============================================================
   TIME SLOT CHIPS - maximum-specificity repairs (v3.0.5)
   Written against the exact verified DOM chain to beat any
   width/height constraints in Envibe's base stylesheet.
   ============================================================ */
main#main .timepicker .timepicker__container ul.timepicker__list {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 12px 0 4px !important;
  margin: 6px 0 0 !important;
}
main#main .timepicker .timepicker__container ul.timepicker__list > li.timepicker__list-item {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  position: relative !important;
}
main#main .timepicker .timepicker__container ul.timepicker__list > li.timepicker__list-item > label.timepicker__time {
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: -webkit-max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}
main#main .timepicker .timepicker__container ul.timepicker__list > li.timepicker__list-item > .timepicker__spaces {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}


/* ============================================================
   BENTO LAYOUT - booking form sections as cards (v3.1)
   Each form row (ul.stack > li) becomes a white card on the
   page background. Filters stack vertically at full card width,
   so Conditions always stretches the full width too.
   ============================================================ */
main#main {
  background: transparent !important;
  background-color: transparent !important;
}
main#main form ul.stack {
  gap: 14px !important;
}
main#main form ul.stack > li {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  list-style: none !important;
  -webkit-box-shadow: var(--ev-shadow-xs) !important;
  box-shadow: var(--ev-shadow-xs) !important;
}
/* Filters stack vertically, every field and the Conditions card
   at full width - no more half-width column */
main#main ul.filter-container {
  display: block !important;
}
main#main li.filter-container__item {
  width: 100% !important;
  max-width: none !important;
}
main#main li.filter-container__item + li.filter-container__item {
  margin-top: 16px !important;
}
main#main li.filter-container__item.filter-container__item--s {
  max-width: none !important;
}
/* Intro text sits directly on the page background, aligned with the form */
main#main > div.stack > p,
main#main > div.stack > ol.page-actions {
  width: 100% !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
main#main > div.stack > p {
  color: var(--ev-text) !important;
  padding: 0 4px !important;
}
/* Check Price gets breathing room after the cards */
main#main form div.spread {
  margin-top: 16px !important;
}


/* ============================================================
   TIMETABLE SHIELD (v3.1.2)
   The Courses timetable positions session cards with measured
   pixel geometry. Restore Envibe-native metrics inside it so
   nothing we set globally can shift card placement.
   ============================================================ */
main#main [class*="timetable"] p:not([class*="filter"]):not([class*="dialog"]),
main#main [class*="timetable"] li:not([class*="filter"]):not([class*="dialog"]),
main#main [class*="timetable"] div:not([class*="filter"]):not([class*="dialog"]),
main#main [class*="timetable"] span:not([class*="filter"]):not([class*="dialog"]),
main#main [class*="timetable"] td:not([class*="filter"]):not([class*="dialog"]) {
  font-size: revert !important;
  line-height: revert !important;
  padding: revert !important;
  margin: revert !important;
}
main#main [class*="timetable"] ul:not([class*="filter"]):not([class*="dialog"]),
main#main [class*="timetable"] ol:not([class*="filter"]):not([class*="dialog"]) {
  gap: revert !important;
  display: revert !important;
  padding: revert !important;
  margin: revert !important;
}
/* Safe, colour-only branding (no geometry) */
main#main .timetable__content-title {
  color: var(--ev-navy) !important;
  font-family: var(--ev-font) !important;
}


/* ============================================================
   MOBILE NAV REPAIRS (v3.1.3)
   1. Dropdown panels clamp fully on-screen (Menu was clipping
      off the left edge on phones)
   2. Centred page title shrinks and leaves room for the Menu
      and Log In chips so nothing overlaps
   ============================================================ */
@media (max-width: 640px) {

  /* --- 1. Menu dropdown: pin inside the viewport --- */
  ul.spread.main-navigation .ddmenu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    margin: 6px 0 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 400 !important;
  }

  /* --- Login panel: same treatment, anchored right --- */
  ul.spread.main-navigation form.login-form,
  ul.spread.main-navigation form.login-form .ddmenu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    margin: 6px 0 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 400 !important;
  }

  /* --- 2. Nav row: chips hard against the edges --- */
  ul.spread.main-navigation > li:first-child {
    margin-right: auto !important;
  }
  ul.spread.main-navigation > li:last-child {
    margin-left: auto !important;
  }

  /* --- Title: smaller, centred, capped so it never reaches
         the chips. Adjust 170px if your chips change width --- */
  header.page-header .page-heading h1.full-width {
    font-size: 1rem !important;
    max-width: calc(100vw - 190px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    right: auto !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}


/* ============================================================
   MOBILE TIMETABLE (v3.1.5)
   Seven day-columns cannot fit a phone screen. Give timetable
   pages a horizontal scroll with columns held at readable width.
   Adjust the 880px min-width to taste.
   ============================================================ */
@media (max-width: 900px) {
  /* Hard-contain the scroll inside main: the page itself must
     never grow wider than the phone screen */
  main#main.main-content--wide {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  main#main.main-content--wide div.vue-root {
    min-width: 880px !important;
    width: 880px !important;
  }
  /* Touch gestures must stay free: the grid swipes inside main,
     the browser keeps normal pan and pinch-zoom everywhere */
  main#main.main-content--wide,
  main#main.main-content--wide div.vue-root {
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}


/* ============================================================
   LOGIN PANEL ANCHORING (v3.1.8)
   The Log In trigger sits at the far right of the nav, so its
   panel must hang leftward from the right edge - anchored left
   it runs off-screen (the cut-off login form bug).
   ============================================================ */
ul.spread.main-navigation > li:last-child div.vue-root,
ul.spread.main-navigation > li:last-child .h-100.z-150 {
  position: relative !important;
}
ul.spread.main-navigation > li:last-child form.login-form {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  -webkit-box-shadow: var(--ev-shadow-md) !important;
  box-shadow: var(--ev-shadow-md) !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  margin-top: 6px !important;
  transform: none !important;
  -webkit-transform: none !important;
  width: -webkit-max-content !important;
  width: max-content !important;
  max-width: min(380px, calc(100vw - 16px)) !important;
  z-index: 300 !important;
}
ul.spread.main-navigation > li:last-child form.login-form .ddmenu {
  position: static !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ============================================================
   MENU PANEL CORNERS (v3.1.10)
   Round the Menu dropdown card to the site-wide 14px radius;
   clip inner wrappers so no square white corners poke out.
   ============================================================ */
ul.spread.main-navigation li:first-child .ddmenu {
  border-radius: 14px !important;
  overflow: hidden !important;
}
ul.spread.main-navigation li:first-child .ddmenu > *,
ul.spread.main-navigation li:first-child .ddmenu ul.ddmenu-items {
  border-radius: inherit !important;
}


/* ============================================================
   CHECKBOX LABELS (v3.1.11)
   Labels following a checkbox or radio sit inline beside the
   box, not stacked underneath it (Remember Me, consents, etc.)
   ============================================================ */
input[type="checkbox"] + label,
input[type="radio"]:not(.sr-only) + label {
  display: inline-block !important;
  margin: 0 0 0 8px !important;
  vertical-align: middle !important;
}
input[type="checkbox"],
input[type="radio"]:not(.sr-only) {
  vertical-align: middle !important;
  margin: 0 !important;
}


/* ============================================================
   TIMETABLE FILTER POPUP (v3.1.12)
   The filter panel is exempted from the timetable shield above
   and dressed as a proper site card with breathing room.
   ============================================================ */
dialog.dialog {
  background: var(--ev-white) !important;
  background-color: var(--ev-white) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  -webkit-box-shadow: var(--ev-shadow-md) !important;
  box-shadow: var(--ev-shadow-md) !important;
  overflow: visible !important;
  /* Anchor near the Filter button (top right). Adjust to taste */
  position: fixed !important;
  top: 120px !important;
  right: 32px !important;
  left: auto !important;
  margin: 0 !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
}
dialog.dialog::backdrop {
  background: rgba(4, 20, 32, 0.25) !important;
}
dialog.dialog .dialog__box {
  padding: 16px 18px !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  gap: 12px !important;
}
dialog.dialog .dialog__header {
  margin: 0 0 4px !important;
  font-weight: 700 !important;
  color: var(--ev-navy) !important;
}
main#main [class*="timetable"] [class*="filter"] select,
main#main [class*="timetable"] [class*="filter"] .select,
main#main [class*="timetable"] [class*="filter"] input {
  margin: 6px 0 !important;
}