:root {
  --fl-primary: #D4AC7C;
  --fl-primary-dark: #B98A56;
  --fl-primary-soft: #F4E9DC;
  --fl-secondary: #2D2622;
  --fl-dark: #171717;
  --fl-light: #FBF8F4;
  --fl-muted: #6D6864;
  --fl-border: #E9E1D8;
  --fl-header-dark: #171412;
  --fl-header-dark-soft: #211D1A;
  --fl-topbar-dark: #2A2522;
}

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

/* --------------------------------------------------------------------------
   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: 800; }
.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.6rem, 6vw, 5.4rem); line-height: .98; font-weight: 900; text-transform: uppercase; }
.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:900; text-transform:uppercase; }
.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; }
.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 { 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 { 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;
  }
}