@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&display=swap");

/*
 * Proxima Nova is a commercial font.
 * These @font-face rules intentionally reference local project files only.
 * Add your own licensed WOFF2 files at:
 * public/theme/fonts/proxima-nova/
 */
@font-face {
  font-family: "Proxima Nova";
  src:
    local("Proxima Nova Regular"),
    local("ProximaNova-Regular"),
    url("../fonts/proxima-nova/ProximaNova-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    local("Proxima Nova Semibold"),
    local("ProximaNova-Semibold"),
    url("../fonts/proxima-nova/ProximaNova-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    local("Proxima Nova Bold"),
    local("ProximaNova-Bold"),
    url("../fonts/proxima-nova/ProximaNova-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    local("Proxima Nova Regular Italic"),
    local("ProximaNova-RegularIt"),
    url("../fonts/proxima-nova/ProximaNova-RegularIt.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}


:root {
  --fl-primary: #8B6E61;
  --fl-primary-dark: #6F554B;
  --fl-primary-soft: #F2ECE8;
  --fl-secondary: #4A4542;
  --fl-dark: #342F2D;
  --fl-light: #FCFAF8;
  --fl-muted: #6F6965;
  --fl-border: #E6DEDA;
  --fl-header-dark: #FFFFFF;
  --fl-header-dark-soft: #F8F4F1;
  --fl-topbar-dark: #F2ECE8;
  --fl-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --fl-font-body: "Proxima Nova", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { color: var(--fl-muted); background: #fff; font-family: var(--fl-font-body); }
a { text-decoration: none; }


/* --------------------------------------------------------------------------
   Fitness Lab typography system

   Public-facing marketing pages use Playfair Display for editorial headings,
   matching the refined serif direction used in the Fitness Lab social brand.
   Proxima Nova is the functional typeface for body copy, navigation, buttons,
   forms, prices, schedules and the authenticated Admin / Trainer / Trainee portal.
   -------------------------------------------------------------------------- */
.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site h5,
.public-site h6,
.public-site .section-heading {
  font-family: var(--fl-font-display);
  font-weight: 600;
  letter-spacing: -.025em;
}

/* Navigation and high-action UI should stay crisp and highly legible. */
.public-site .site-header,
.public-site .site-topbar,
.public-site .section-kicker,
.public-site .btn,
.public-site button,
.public-site input,
.public-site select,
.public-site textarea,
.public-site label,
.public-site table,
.public-site .seat-pill,
.public-site .price-value,
.public-site .schedule-card .date,
.public-site .schedule-card .time,
.public-site .hero-badge,
.public-site .pagination {
  font-family: var(--fl-font-body);
}

/* Editorial utility for individual words/phrases when a page needs the same
   expressive italic treatment seen in Fitness Lab social artwork. */
.brand-editorial,
.brand-italic {
  font-family: var(--fl-font-display) !important;
}
.brand-italic { font-style: italic; font-weight: 400 !important; }

/* Keep authentication / operational UI firmly in Proxima Nova. */
.portal-auth-body,
.dashboard-body,
.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6,
.dashboard-body .section-heading {
  font-family: var(--fl-font-body);
}


/* --------------------------------------------------------------------------
   Proxima Nova functional UI enforcement

   The original HTML theme declares Poppins directly on a few controls.
   These scoped rules ensure the public functional UI and authenticated
   portal use Proxima Nova while public editorial headings remain Playfair.
   -------------------------------------------------------------------------- */
.public-site,
.public-site p,
.public-site li,
.public-site a,
.public-site .nav-link,
.public-site .dropdown-item,
.public-site .btn,
.public-site .btn-primary,
.public-site .btn-secondary,
.public-site .btn-white,
.public-site .btn-white1,
.public-site button,
.public-site input,
.public-site select,
.public-site textarea,
.public-site label,
.public-site .form-control,
.public-site .form-select,
.public-site table,
.public-site th,
.public-site td,
.public-site .price-value,
.public-site .seat-pill,
.public-site .pagination,
.portal-auth-body,
.portal-auth-body p,
.portal-auth-body li,
.portal-auth-body a,
.portal-auth-body .btn,
.portal-auth-body button,
.portal-auth-body input,
.portal-auth-body select,
.portal-auth-body textarea,
.portal-auth-body label,
.portal-auth-body .form-control,
.portal-auth-body .form-select,
.dashboard-body,
.dashboard-body p,
.dashboard-body li,
.dashboard-body a,
.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6,
.dashboard-body .section-heading,
.dashboard-body .nav-link,
.dashboard-body .dropdown-item,
.dashboard-body .btn,
.dashboard-body .btn-primary,
.dashboard-body .btn-secondary,
.dashboard-body button,
.dashboard-body input,
.dashboard-body select,
.dashboard-body textarea,
.dashboard-body label,
.dashboard-body .form-control,
.dashboard-body .form-select,
.dashboard-body table,
.dashboard-body th,
.dashboard-body td,
.dashboard-body .pagination {
  font-family: var(--fl-font-body);
}

/* --------------------------------------------------------------------------
   Fitness Lab premium dark header
   Keeps the supplied white + gold logo fully visible and visually connects
   the top bar, navigation and dark hero into one branded composition.
   -------------------------------------------------------------------------- */
.site-topbar {
  background: var(--fl-topbar-dark);
  color: rgba(255,255,255,.92);
  font-size: .86rem;
  border-bottom: 1px solid rgba(212,172,124,.12);
}
.site-topbar a {
  color: rgba(255,255,255,.92);
  transition: color .2s ease;
}
.site-topbar a:hover { color: var(--fl-primary); }
.site-topbar i { color: var(--fl-primary); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(23,20,18,.985);
  border-bottom: 1px solid rgba(212,172,124,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .navbar { background: transparent; }
.site-logo {
  width: min(275px, 60vw);
  height: 66px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.site-header .navbar .nav-link {
  position: relative;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .86rem;
  letter-spacing: .025em;
  transition: color .2s ease;
}
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus,
.site-header .navbar .nav-link.active {
  color: var(--fl-primary);
}

@media (min-width: 992px) {
  .site-header .navbar .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .28rem;
    height: 2px;
    background: var(--fl-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
  }
  .site-header .navbar .nav-link:not(.dropdown-toggle):hover::after,
  .site-header .navbar .nav-link:not(.dropdown-toggle):focus::after,
  .site-header .navbar .nav-link:not(.dropdown-toggle).active::after {
    transform: scaleX(1);
  }
  .site-header .navbar .dropdown-toggle::after {
    position: static;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    background: none;
    transform: none;
  }
}

.site-header .dropdown-menu {
  /* Keep the dropdown physically connected to its trigger. A positive
     margin here creates a dead hover gap and makes the menu close while
     the pointer is travelling from the nav link to the submenu. */
  margin-top: 0;
  padding: .55rem;
  background: var(--fl-header-dark-soft);
  border: 1px solid rgba(212,172,124,.18) !important;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25) !important;
}

/* Desktop dropdown interaction.
   Public navigation expands at lg (992px); authenticated navigation expands
   at xl (1200px). Keep hover behavior aligned with those Bootstrap breakpoints
   so collapsed/mobile menus continue to use Bootstrap's click behavior. */
@media (min-width: 992px) {
  .site-header .navbar-expand-lg .nav-item.dropdown {
    position: relative;
  }

  .site-header .navbar-expand-lg .nav-item.dropdown > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .site-header .navbar-expand-lg .nav-item.dropdown:hover > .dropdown-menu,
  .site-header .navbar-expand-lg .nav-item.dropdown:focus-within > .dropdown-menu,
  .site-header .navbar-expand-lg .nav-item.dropdown > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (min-width: 1200px) {
  .site-header .navbar-expand-xl .nav-item.dropdown {
    position: relative;
  }

  .site-header .navbar-expand-xl .nav-item.dropdown > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .site-header .navbar-expand-xl .nav-item.dropdown:hover > .dropdown-menu,
  .site-header .navbar-expand-xl .nav-item.dropdown:focus-within > .dropdown-menu,
  .site-header .navbar-expand-xl .nav-item.dropdown > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}
.site-header .dropdown-item {
  color: rgba(255,255,255,.88);
  border-radius: 8px;
  padding: .7rem .9rem;
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus,
.site-header .dropdown-item.active {
  color: var(--fl-primary);
  background: rgba(212,172,124,.10);
}

.site-header .navbar-toggler {
  border-color: rgba(212,172,124,.55);
  padding: .45rem .6rem;
  box-shadow: none;
}
.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(212,172,124,.16);
}
.site-header .btn-fl {
  background: var(--fl-primary) !important;
  color: var(--fl-header-dark) !important;
  border-color: var(--fl-primary) !important;
  box-shadow: 0 8px 22px rgba(212,172,124,.12);
}
.site-header .btn-fl:hover,
.site-header .btn-fl:focus {
  background: transparent !important;
  color: var(--fl-primary) !important;
  border-color: var(--fl-primary) !important;
}

.btn-fl, .btn-primary { background: var(--fl-primary) !important; color: var(--fl-secondary) !important; border: 1px solid var(--fl-primary) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.btn-fl:hover, .btn-primary:hover { background: var(--fl-primary-dark) !important; border-color: var(--fl-primary-dark) !important; color: #fff !important; }
.btn-dark-fl { background: var(--fl-secondary); color: #fff; border: 1px solid var(--fl-secondary); font-weight: 800; text-transform: uppercase; }
.btn-dark-fl:hover { background: #161311; color: #fff; }
.text-brand { color: var(--fl-primary-dark) !important; }
.bg-brand-soft { background: var(--fl-primary-soft); }
.section-kicker { color: var(--fl-primary-dark); font-size: .83rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.section-heading { color: var(--fl-secondary); font-weight: 600; }
.hero-fl { min-height: 700px; background-position: center; background-size: cover; position: relative; display: flex; align-items: center; }
.hero-fl::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,16,.88) 0%, rgba(20,18,16,.64) 48%, rgba(20,18,16,.18) 100%); }
.hero-fl .container { position: relative; z-index: 2; }
.hero-copy { max-width: 760px; }
.hero-copy h1 { color: #fff; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .98; font-weight: 700; text-transform: none; letter-spacing: -.04em; }
.hero-copy p { color: rgba(255,255,255,.88); max-width: 660px; font-size: 1.08rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; backdrop-filter: blur(4px); }
.page-hero { padding: 120px 0 90px; position: relative; background-position: center; background-size: cover; }
.page-hero::before { content: ''; position:absolute; inset:0; background:rgba(23,23,23,.72); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:#fff; font-weight:700; text-transform:none; letter-spacing:-.035em; }
.page-hero p { color:rgba(255,255,255,.82); max-width:720px; }
.card-fl { height: 100%; border: 1px solid var(--fl-border); border-radius: 18px; overflow: hidden; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.card-fl:hover { transform: translateY(-6px); box-shadow: 0 18px 45px rgba(39,31,26,.10); }
.card-fl img { width: 100%; height: 260px; object-fit: cover; }
.card-fl .card-body { padding: 1.5rem; }
.card-fl h3, .card-fl h4 { color: var(--fl-secondary); }
.class-program-card img { height: 310px; }
.card-fl img.course-graphic-image,
.detail-image.course-graphic-image {
  object-fit: contain;
  background: #fff;
}
.class-program-placeholder {
  height: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: #f2ece8;
  color: #8b6e61;
}
.class-program-placeholder i { font-size: 2.5rem; }
.class-program-placeholder span { font-size: .9rem; }
.info-strip { background: var(--fl-secondary); color:#fff; border-radius:18px; padding:1.6rem; }
.info-strip strong { color: var(--fl-primary); }
.schedule-card { border: 1px solid var(--fl-border); border-radius: 16px; padding: 1.2rem; background:#fff; height:100%; }
.schedule-card .date { color:var(--fl-primary-dark); font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; }
.schedule-card .time { color:var(--fl-secondary); font-size:1.35rem; font-weight:900; }
.seat-pill { display:inline-block; border-radius:999px; padding:.35rem .65rem; background:var(--fl-primary-soft); color:var(--fl-secondary); font-size:.78rem; font-weight:800; }
.price-card { border: 1px solid var(--fl-border); border-radius: 20px; overflow:hidden; height:100%; background:#fff; }
.price-card.featured { border:2px solid var(--fl-primary); box-shadow:0 18px 48px rgba(66,50,38,.12); }
.price-card .price-head { background:var(--fl-secondary); color:#fff; padding:1.5rem; }
.price-card.featured .price-head { background:var(--fl-primary); color:var(--fl-secondary); }
.price-card .price-value { font-size:1.55rem; font-weight:900; }
.price-card ul { padding-left:1.15rem; }
.consultation-panel { background: linear-gradient(135deg, var(--fl-secondary), #171513); border-radius: 24px; overflow:hidden; color:#fff; }
.consultation-panel label { color:#fff; font-weight:700; }
.consultation-panel .form-control, .consultation-panel .form-select { background:#fff; border:0; min-height:52px; }
.form-control, .form-select { border-color:var(--fl-border); border-radius:10px; min-height:48px; }
.form-control:focus, .form-select:focus { border-color:var(--fl-primary); box-shadow:0 0 0 .2rem rgba(212,172,124,.18); }
.validation-summary { border-left:4px solid #b42318; background:#fff4f2; color:#7a271a; padding:1rem 1.2rem; border-radius:10px; }
.alert-success { border-color:#b7dfc6; background:#eefbf2; color:#1d6d3a; }
.detail-image { width:100%; min-height:420px; max-height:600px; object-fit:cover; border-radius:20px; }
.signature-list .signature-item { padding:1.25rem 0; border-bottom:1px solid var(--fl-border); }
.signature-list .signature-item:last-child { border-bottom:0; }
.signature-number { width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--fl-primary); color:var(--fl-secondary); font-weight:900; flex:0 0 auto; }
.blog-body-content h2, .blog-body-content h3, .blog-body-content h4 { color:var(--fl-secondary); margin-top:2rem; }
.blog-body-content p { line-height:1.85; }
.blog-body-content blockquote { border-left:4px solid var(--fl-primary); padding:1rem 1.3rem; background:var(--fl-primary-soft); color:var(--fl-secondary); font-size:1.1rem; font-weight:700; }
.footer-fl { background: linear-gradient(180deg, #24201d, #121110); color:rgba(255,255,255,.75); }
.footer-fl h4 { color:#fff; }
.footer-fl a { color:rgba(255,255,255,.75); }
.footer-fl a:hover { color:var(--fl-primary); }
.footer-logo { width:240px; max-width:100%; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:1045; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#25D366; color:#fff; font-size:1.55rem; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.product-image { width:100%; height:280px; object-fit:contain; background:#faf8f5; padding:1.4rem; }
.ceo-cert { border:1px solid var(--fl-border); border-radius:14px; padding:1rem; height:100%; background:#fff; }
.ceo-cert .date { color:var(--fl-primary-dark); font-size:.85rem; font-weight:800; }
.table-fl th { background:var(--fl-secondary); color:#fff; border-color:var(--fl-secondary); }
.table-fl td { vertical-align:middle; }

@media (max-width: 991.98px) {
  .site-topbar { display:none; }
  .site-header .navbar { padding-top: .7rem !important; padding-bottom: .7rem !important; }
  .site-logo { height:54px; width:225px; max-width:65vw; }
  .site-header .navbar-collapse {
    margin-top: .8rem;
    padding: .8rem 0 1rem;
    border-top: 1px solid rgba(212,172,124,.14);
  }
  .site-header .navbar .nav-link { padding:.75rem .2rem; }
  .site-header .dropdown-menu {
    margin-top: 0;
    margin-bottom: .45rem;
    background: rgba(255,255,255,.035);
    border: 0 !important;
    box-shadow: none !important;
  }
  .site-header .btn-fl { width: 100%; text-align: center; }
  .hero-fl { min-height:620px; }
  .class-program-card img, .class-program-card .class-program-placeholder { height:250px; }
}

@media (max-width: 575.98px) {
  .hero-fl { min-height:580px; }
  .hero-copy h1 { font-size:2.5rem; }
  .page-hero { padding:85px 0 65px; }
  .card-fl img, .class-program-card img, .class-program-card .class-program-placeholder { height:230px; }
}

/* --------------------------------------------------------------------------
   Authenticated Fitness Lab portal / admin area
   -------------------------------------------------------------------------- */
.dashboard-body { background: #f7f4ef; }
.dashboard-main { min-height: 65vh; }
.auth-section { background: linear-gradient(135deg, #f7f4ef 0%, #fff 55%, #f4e9dc 100%); min-height: 66vh; display: flex; align-items: center; }
.admin-page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.admin-card { background:#fff; border:1px solid var(--fl-border); border-radius:18px; box-shadow:0 12px 34px rgba(43,34,28,.06); overflow:hidden; }
.admin-card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--fl-border); background:#fbf8f4; }
.admin-metric { background:#fff; border:1px solid var(--fl-border); border-radius:16px; padding:1.1rem 1.2rem; box-shadow:0 8px 24px rgba(43,34,28,.05); height:100%; }
.admin-metric span { display:block; color:var(--fl-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.admin-metric strong { display:block; color:var(--fl-secondary); font-size:1.75rem; line-height:1.1; margin-top:.45rem; }
.admin-filter { display:flex; gap:.75rem; max-width:620px; margin-bottom:1.25rem; }
.admin-filter .form-control, .admin-filter .form-select { min-width:190px; }
.admin-thumb { width:120px; height:80px; object-fit:cover; border-radius:10px; border:1px solid var(--fl-border); }
.admin-card .table > :not(caption) > * > * { padding:.9rem 1rem; }
.admin-card .table thead th { white-space:nowrap; color:var(--fl-secondary); background:#fbf8f4; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.safe-editor-toolbar { display:flex; flex-wrap:wrap; gap:.4rem; }
.safe-editor-toolbar button { border:1px solid var(--fl-border); background:#fff; color:var(--fl-secondary); border-radius:7px; padding:.35rem .65rem; font-weight:700; font-size:.8rem; }
.safe-editor-toolbar button:hover { border-color:var(--fl-primary); background:var(--fl-primary-soft); }
.dashboard-main .form-label { color:var(--fl-secondary); font-weight:700; }
.dashboard-main .pagination { margin-bottom:0; }
.dashboard-main .page-link { color:var(--fl-secondary); border-color:var(--fl-border); }
.dashboard-main .page-item.active .page-link { background:var(--fl-primary); border-color:var(--fl-primary); color:var(--fl-secondary); }

@media (max-width: 991.98px) {
  .admin-page-head { align-items:flex-start; flex-direction:column; }
  .admin-filter { max-width:none; flex-direction:column; }
  .admin-filter .form-control, .admin-filter .form-select { width:100%; }
}

/* --------------------------------------------------------------------------
   Responsive navigation colour isolation

   The source theme's plugin.css contains generic mobile rules such as:
       .nav-link:hover { background-color: #e91e63; }
   and the original theme gives dropdown anchors a light background.

   Fitness Lab uses Bootstrap navigation rather than the template's original
   SlickNav menu. These scoped rules intentionally isolate our site header from
   those legacy theme selectors without modifying vendor/template CSS.
   -------------------------------------------------------------------------- */
.site-header .navbar .nav-link,
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus,
.site-header .navbar .nav-link:active,
.site-header .navbar .nav-link.show,
.site-header .navbar .nav-link.active {
  background-color: transparent !important;
}

.site-header .dropdown-menu > li > .dropdown-item {
  background-color: transparent !important;
  color: rgba(255,255,255,.88) !important;
  border: 0 !important;
}

.site-header .dropdown-menu > li > .dropdown-item:hover,
.site-header .dropdown-menu > li > .dropdown-item:focus,
.site-header .dropdown-menu > li > .dropdown-item:active,
.site-header .dropdown-menu > li > .dropdown-item.active {
  background-color: rgba(212,172,124,.12) !important;
  color: var(--fl-primary) !important;
}

/* Public navigation collapses below Bootstrap's lg breakpoint. */
@media (max-width: 991.98px) {
  .site-header .navbar-expand-lg .navbar-nav {
    align-items: stretch !important;
    gap: .2rem;
  }

  .site-header .navbar-expand-lg .nav-item {
    width: 100%;
  }

  .site-header .navbar-expand-lg .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: .8rem .75rem !important;
    border-radius: 8px;
    color: rgba(255,255,255,.92) !important;
    background-color: transparent !important;
  }

  .site-header .navbar-expand-lg .navbar-nav .nav-link:hover,
  .site-header .navbar-expand-lg .navbar-nav .nav-link:focus,
  .site-header .navbar-expand-lg .navbar-nav .nav-link.show,
  .site-header .navbar-expand-lg .navbar-nav .nav-link.active {
    color: var(--fl-primary) !important;
    background-color: rgba(212,172,124,.09) !important;
  }

  .site-header .navbar-expand-lg .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: .15rem 0 .4rem !important;
    padding: .2rem 0 .25rem .8rem !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(212,172,124,.24) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item {
    display: block;
    width: 100%;
    margin: .05rem 0;
    padding: .7rem .8rem !important;
    border-radius: 7px !important;
    background-color: transparent !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .9rem;
    font-weight: 600;
    text-transform: none !important;
  }

  .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item:hover,
  .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item:focus,
  .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item:active,
  .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item.active {
    background-color: rgba(212,172,124,.10) !important;
    color: var(--fl-primary) !important;
  }
}

/* Authenticated portal navigation uses navbar-expand-xl, so keep the same
   mobile/tablet behaviour until that menu expands at 1200px. */
@media (max-width: 1199.98px) {
  .site-header .navbar-expand-xl .navbar-nav {
    align-items: stretch !important;
    gap: .2rem;
  }

  .site-header .navbar-expand-xl .nav-item {
    width: 100%;
  }

  .site-header .navbar-expand-xl .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: .8rem .75rem !important;
    border-radius: 8px;
    color: rgba(255,255,255,.92) !important;
    background-color: transparent !important;
  }

  .site-header .navbar-expand-xl .navbar-nav .nav-link:hover,
  .site-header .navbar-expand-xl .navbar-nav .nav-link:focus,
  .site-header .navbar-expand-xl .navbar-nav .nav-link.show,
  .site-header .navbar-expand-xl .navbar-nav .nav-link.active {
    color: var(--fl-primary) !important;
    background-color: rgba(212,172,124,.09) !important;
  }

  .site-header .navbar-expand-xl .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: .15rem 0 .4rem !important;
    padding: .2rem 0 .25rem .8rem !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(212,172,124,.24) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item {
    display: block;
    width: 100%;
    margin: .05rem 0;
    padding: .7rem .8rem !important;
    border-radius: 7px !important;
    background-color: transparent !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .9rem;
    font-weight: 600;
    text-transform: none !important;
  }

  .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item:hover,
  .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item:focus,
  .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item:active,
  .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item.active {
    background-color: rgba(212,172,124,.10) !important;
    color: var(--fl-primary) !important;
  }
}


/* ==========================================================================
   Fitness Lab light visual system — September 2026
   --------------------------------------------------------------------------
   Client-approved direction:
   - light header/navigation/footer
   - new circular Fitness Lab logo
   - warm brown/stone palette sampled from the new logo
   - responsive two-slide homepage banner
   - existing CMS, routes and operational modules remain unchanged
   ========================================================================== */

.light-theme {
  background: #fff;
  color: var(--fl-muted);
}

/* Header / top bar -------------------------------------------------------- */
.light-theme .site-topbar {
  background: #f3efec;
  color: #625c58;
  border-bottom: 1px solid var(--fl-border);
}
.light-theme .site-topbar a { color: #625c58; }
.light-theme .site-topbar a:hover { color: var(--fl-primary-dark); }
.light-theme .site-topbar i { color: var(--fl-primary); }

.light-theme .site-header {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--fl-border);
  box-shadow: 0 8px 26px rgba(75,61,54,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.light-theme .site-header .navbar { background: transparent; }
.light-theme .site-header .navbar,
.light-theme .site-header .navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.light-theme .site-logo {
  width: 72px;
  height: 72px;
  max-width: 72px;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
}

.light-theme .site-header .navbar .nav-link,
.light-theme .site-header .navbar .nav-link:hover,
.light-theme .site-header .navbar .nav-link:focus,
.light-theme .site-header .navbar .nav-link:active,
.light-theme .site-header .navbar .nav-link.show,
.light-theme .site-header .navbar .nav-link.active {
  background-color: transparent !important;
  color: var(--fl-secondary) !important;
}
.light-theme .site-header .navbar .nav-link:hover,
.light-theme .site-header .navbar .nav-link:focus,
.light-theme .site-header .navbar .nav-link.show,
.light-theme .site-header .navbar .nav-link.active {
  color: var(--fl-primary-dark) !important;
}

.light-theme .site-header .dropdown-menu {
  background: #fff;
  border: 1px solid var(--fl-border) !important;
  box-shadow: 0 18px 40px rgba(75,61,54,.12) !important;
}
.light-theme .site-header .dropdown-menu > li > .dropdown-item {
  color: #625c58 !important;
  background: transparent !important;
}
.light-theme .site-header .dropdown-menu > li > .dropdown-item:hover,
.light-theme .site-header .dropdown-menu > li > .dropdown-item:focus,
.light-theme .site-header .dropdown-menu > li > .dropdown-item:active,
.light-theme .site-header .dropdown-menu > li > .dropdown-item.active {
  color: var(--fl-primary-dark) !important;
  background: var(--fl-primary-soft) !important;
}

.light-theme .site-header .navbar-toggler {
  border-color: #cdbeb5;
  background: #fff;
}
.light-theme .site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(139,110,97,.15);
}

/* Buttons ---------------------------------------------------------------- */
.btn-fl,
.btn-primary {
  background: var(--fl-primary) !important;
  color: #fff !important;
  border-color: var(--fl-primary) !important;
}
.btn-fl:hover,
.btn-primary:hover,
.btn-fl:focus,
.btn-primary:focus {
  background: var(--fl-primary-dark) !important;
  border-color: var(--fl-primary-dark) !important;
  color: #fff !important;
}
.btn-dark-fl {
  background: var(--fl-secondary);
  color: #fff;
  border-color: var(--fl-secondary);
}
.btn-dark-fl:hover,
.btn-dark-fl:focus {
  background: var(--fl-primary-dark);
  border-color: var(--fl-primary-dark);
  color: #fff;
}
.btn-outline-fl {
  background: rgba(255,255,255,.82);
  color: var(--fl-secondary);
  border: 1px solid #bca9a0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.btn-outline-fl:hover,
.btn-outline-fl:focus {
  background: #fff;
  color: var(--fl-primary-dark);
  border-color: var(--fl-primary);
}

/* Light page hero treatment ---------------------------------------------- */
.light-theme .page-hero {
  background-color: #f3efec;
}
.light-theme .page-hero::before {
  background: linear-gradient(90deg, rgba(252,250,248,.96) 0%, rgba(252,250,248,.88) 48%, rgba(252,250,248,.58) 100%);
}
.light-theme .page-hero h1 { color: var(--fl-secondary); }
.light-theme .page-hero p { color: #665f5b; }
.light-theme .page-hero .section-kicker { color: var(--fl-primary-dark); }
.light-theme.classes-page .page-hero::before,
.light-theme.courses-page .page-hero::before,
.light-theme.banner-contrast-page .page-hero::before {
  background: rgba(250,247,245,.85);
}
.light-theme.classes-page .page-hero h1,
.light-theme.courses-page .page-hero h1,
.light-theme.banner-contrast-page .page-hero h1 { color: #443d38; }
.light-theme.classes-page .page-hero p,
.light-theme.courses-page .page-hero p,
.light-theme.banner-contrast-page .page-hero p { color: #514943; }
.light-theme.classes-page .page-hero .section-kicker,
.light-theme.courses-page .page-hero .section-kicker,
.light-theme.banner-contrast-page .page-hero .section-kicker {
  color: #715547 !important;
}

/* Previously-dark public content panels become warm-light ---------------- */
.light-theme .info-strip {
  background: #f7f2ef;
  color: var(--fl-secondary);
  border: 1px solid var(--fl-border);
}
.light-theme .info-strip strong { color: var(--fl-primary-dark); }

.light-theme .price-card .price-head {
  background: #f3efec;
  color: var(--fl-secondary);
  border-bottom: 1px solid var(--fl-border);
}
.light-theme .price-card.featured .price-head {
  background: var(--fl-primary-soft);
  color: var(--fl-secondary);
}

.light-theme .consultation-panel {
  background: linear-gradient(135deg, #f4efec, #fff);
  border: 1px solid var(--fl-border);
  color: var(--fl-secondary);
  box-shadow: 0 16px 42px rgba(75,61,54,.08);
}
.light-theme .consultation-panel label { color: var(--fl-secondary); }
.light-theme .consultation-panel .white { color: var(--fl-secondary) !important; }
.light-theme .consultation-panel p { color: var(--fl-muted); }
.light-theme .consultation-panel .form-control,
.light-theme .consultation-panel .form-select {
  border: 1px solid #ddd2cc;
  background: #fff;
}
.light-theme .consultation-panel .section-kicker {
  color: var(--fl-primary-dark) !important;
}

.light-theme .table-fl th {
  background: #f3efec;
  color: var(--fl-secondary);
  border-color: var(--fl-border);
}

/* Footer ----------------------------------------------------------------- */
.light-theme .footer-fl {
  background: #f4efec;
  color: #675f5b;
  border-top: 1px solid var(--fl-border);
}
.light-theme .footer-fl h4 { color: var(--fl-secondary); }
.light-theme .footer-fl a { color: #675f5b; }
.light-theme .footer-fl a:hover { color: var(--fl-primary-dark); }
.light-theme .footer-fl .border-secondary { border-color: #cfc2bb !important; }
.light-theme .footer-logo {
  width: 132px;
  max-width: 100%;
  border-radius: 50%;
}

/* Alternate homepage section backgrounds; override Bootstrap background utilities. */
.home-page main > section.py-7 {
  background-color: var(--fl-light) !important;
}
.home-page main > section.py-7:nth-of-type(odd) {
  background-color: var(--fl-primary-soft) !important;
}

/* Homepage slider -------------------------------------------------------- */
.home-banner {
  position: relative;
  overflow: hidden;
  background: #faf7f5;
  border-bottom: 1px solid var(--fl-border);
}
/* Keep both slides in one grid cell so the tallest content sets a stable height. */
.home-banner .carousel-inner {
  display: grid;
}
.home-banner .carousel-inner::after {
  display: none;
}
.home-banner .carousel-item {
  display: block;
  grid-area: 1 / 1;
  float: none;
  margin-right: 0;
  visibility: hidden;
  background: #faf7f5;
}
.home-banner .carousel-item.active,
.home-banner .carousel-item-next,
.home-banner .carousel-item-prev {
  visibility: visible;
}
.home-banner-slide {
  position: relative;
  height: 100%;
  min-height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.home-banner-container {
  position: relative;
  z-index: 3;
  width: 100%;
}
.home-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,253,251,.94) 0%, rgba(255,253,251,.88) 40%, rgba(255,253,251,.32) 72%, rgba(255,253,251,.14) 100%);
  z-index: 1;
}
.home-banner-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
  padding: 72px 0 88px;
}
.home-banner-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 26px rgba(75,61,54,.08);
}
.home-banner-kicker {
  color: var(--fl-primary-dark);
  font-family: var(--fl-font-body);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.home-banner h1,
.home-banner h2 {
  color: var(--fl-secondary);
  font-family: var(--fl-font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  margin-bottom: 1.2rem;
  max-width: 720px;
}
.home-banner-copy > p {
  color: #655e59;
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 650px;
  margin-bottom: 1.8rem;
}

.home-banner-slide--menopause {
  background: linear-gradient(135deg, #fbf7f4 0%, #f4ede8 100%);
}
.home-banner-slide--courses .home-banner-media,
.home-banner-slide--menopause .home-banner-media {
  object-position: center 43%;
}
.home-banner-author {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.78);
  border: 1px solid #ded3cd;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(75,61,54,.06);
}
.home-banner-author > img {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(75,61,54,.10);
}
.home-banner-author strong,
.home-banner-author span,
.home-banner-author small {
  display: block;
}
.home-banner-author strong {
  color: var(--fl-secondary);
  font-size: 1rem;
}
.home-banner-author span {
  color: var(--fl-primary-dark);
  font-size: .88rem;
  font-weight: 700;
}
.home-banner-author small {
  color: #756d68;
  margin-top: .12rem;
}
.home-banner-books-preview {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  max-width: 420px;
  padding: .65rem .8rem;
  background: rgba(255,255,255,.72);
  border: 1px solid #ded3cd;
  border-radius: 14px;
}
.home-banner-books-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--fl-border);
}
.home-banner-books-preview span {
  color: #6f6762;
  font-size: .9rem;
  font-weight: 700;
}

.home-banner-indicators {
  margin-bottom: 1.4rem;
  z-index: 6;
}
.home-banner-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #a8958b;
  opacity: .42;
}
.home-banner-indicators .active {
  opacity: 1;
  background: var(--fl-primary);
}
.home-banner-control {
  width: 7%;
  opacity: 1;
  z-index: 5;
}
.home-banner-control-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--fl-secondary);
  background: rgba(255,255,255,.88);
  border: 1px solid #ded3cd;
  box-shadow: 0 8px 22px rgba(75,61,54,.08);
  font-size: 1.4rem;
}
.home-banner-control:hover .home-banner-control-icon {
  color: #fff;
  background: var(--fl-primary);
  border-color: var(--fl-primary);
}

/* Mobile / tablet light navigation -------------------------------------- */
@media (max-width: 1199.98px) {
  .light-theme .site-header .navbar-expand-xl .navbar-nav .nav-link {
    color: var(--fl-secondary) !important;
  }
  .light-theme .site-header .navbar-expand-xl .navbar-nav .nav-link:hover,
  .light-theme .site-header .navbar-expand-xl .navbar-nav .nav-link:focus,
  .light-theme .site-header .navbar-expand-xl .navbar-nav .nav-link.show,
  .light-theme .site-header .navbar-expand-xl .navbar-nav .nav-link.active {
    color: var(--fl-primary-dark) !important;
    background: var(--fl-primary-soft) !important;
  }
  .light-theme .site-header .navbar-expand-xl .dropdown-menu {
    border-left-color: #d7cac3 !important;
  }
  .light-theme .site-header .navbar-expand-xl .dropdown-menu > li > .dropdown-item {
    color: #6f6762 !important;
  }
}
@media (max-width: 991.98px) {
  .light-theme .site-logo {
    width: 58px;
    height: 58px;
    max-width: 58px;
  }
  .light-theme .site-header .navbar-collapse {
    border-top: 1px solid var(--fl-border);
  }
  .light-theme .site-header .navbar-expand-lg .navbar-nav .nav-link {
    color: var(--fl-secondary) !important;
  }
  .light-theme .site-header .navbar-expand-lg .navbar-nav .nav-link:hover,
  .light-theme .site-header .navbar-expand-lg .navbar-nav .nav-link:focus,
  .light-theme .site-header .navbar-expand-lg .navbar-nav .nav-link.show,
  .light-theme .site-header .navbar-expand-lg .navbar-nav .nav-link.active {
    color: var(--fl-primary-dark) !important;
    background: var(--fl-primary-soft) !important;
  }
  .light-theme .site-header .navbar-expand-lg .dropdown-menu {
    border-left-color: #d7cac3 !important;
  }
  .light-theme .site-header .navbar-expand-lg .dropdown-menu > li > .dropdown-item {
    color: #6f6762 !important;
  }

  .home-banner-slide {
    min-height: 590px;
  }
  .home-banner-copy {
    max-width: 600px;
    padding: 58px 0 78px;
  }
  .home-banner-slide--courses .home-banner-shade {
    background: rgba(255,253,251,.88);
  }
  .home-banner h1,
  .home-banner h2 {
    font-size: clamp(2.55rem, 7vw, 4rem);
  }
  .home-banner-shade {
    background: rgba(255,253,251,.88);
  }
  .home-banner-control {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .light-theme .site-logo {
    width: 54px;
    height: 54px;
    max-width: 54px;
  }
  .home-banner-slide {
    min-height: 620px;
  }
  .home-banner-copy {
    padding: 44px 0 78px;
  }
  .home-banner-logo {
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
  }
  .home-banner h1,
  .home-banner h2 {
    font-size: 2.45rem;
  }
  .home-banner-copy > p {
    font-size: 1rem;
    line-height: 1.65;
  }
  .home-banner-shade {
    background: rgba(255,253,251,.88);
  }
  .home-banner-author {
    align-items: flex-start;
  }
  .home-banner-author > img {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
  .home-banner-indicators {
    margin-bottom: .85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner .carousel-item {
    transition: none;
  }
}

/* ==========================================================================
   Light-theme logo v2 + homepage banner spacing correction
   ========================================================================== */

/*
 * The base HTML theme applies vertical padding to generic <section> elements.
 * The homepage carousel is itself a <section>, so that inherited padding
 * created the large blank bands above and below the banner.
 */
.light-theme .home-banner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.light-theme .home-banner > .carousel,
.light-theme .home-banner .carousel-inner,
.light-theme .home-banner .carousel-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* The new approved logo is square, so keep it visibly large but inside header height. */
.light-theme .site-logo {
  width: 76px;
  height: 76px;
  max-width: 76px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

/* Logo used inside the homepage slides. */
.light-theme .home-banner-logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .light-theme .site-logo {
    width: 62px;
    height: 62px;
    max-width: 62px;
  }

  .light-theme .home-banner-logo {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 575.98px) {
  .light-theme .site-logo {
    width: 56px;
    height: 56px;
    max-width: 56px;
  }

  .light-theme .home-banner-logo {
    width: 78px;
    height: 78px;
  }
}