:root {
  --fh-dark: #1a1a1a;
  --fh-dark-accent: rgba(26, 26, 26, 0.95);
  --fh-orange: #C9902A;
  --fh-orange-hover: #a87520;
  --brand-navy: #1a1a1a;
  --faq-red: #e63946;
  --fh-gold: #C9902A;
  --fh-gold-light: #FFF3DC;
  --fh-card-radius: 16px;
  /* NidoFit reskin tokens (header/footer) */
  --nf-ink: #070d1d;
  --nf-muted: #536071;
  --nf-gold: #b66b09;
  --nf-gold-2: #f5a11a;
  --nf-line: #ede7dd;
  --nf-cream: #f8f5f0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Inner-page headings: match home page typography ─────────── */
.list-hero-title,
.gym-banner-title,
.tr-banner-title,
.job-detail-title,
.hero-title,
.fh-page-hero h1,
.about-hero h1,
.faq-hero h1,
.faq-hero h2,
.legal-hero h1,
.contact-hero-section h1,
.contact-hero-section h2 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Inner page: warm cream theme (matches home) ─────────────── */
.fh-page-hero,
.fh-search-header,
.fh-search-header.bg-navy,
.fh-trainer-header,
.fh-trainer-header.bg-navy,
.fh-shop-header,
.fh-shop-header.bg-navy,
header.fh-search-header,
.fh-detail-hero,
.about-hero,
.faq-hero,
[class*="page-hero"] {
  background: linear-gradient(135deg, #fdf8f2 0%, #f5ede0 40%, #f0ece4 100%) !important;
  border-bottom: 1px solid #e8dece;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
/* Subtle gold blob top-right on all inner heroes */
.fh-page-hero::before,
.fh-search-header::before,
.fh-detail-hero::before,
.about-hero::before,
.faq-hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,144,42,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Force light text to dark on cream backgrounds */
.fh-page-hero .text-white,
.fh-search-header .text-white,
.fh-trainer-header .text-white,
.fh-shop-header .text-white,
.fh-detail-hero .text-white,
.about-hero .text-white,
.faq-hero .text-white,
header.fh-search-header .text-white {
  color: #0f172a !important;
}
.fh-page-hero .text-white-50,
.fh-search-header .text-white-50,
.fh-trainer-header .text-white-50,
.fh-shop-header .text-white-50,
.fh-detail-hero .text-white-50,
.about-hero .text-white-50,
.faq-hero .text-white-50,
header.fh-search-header .text-white-50 {
  color: #64748b !important;
}

/* Search inputs: light style on cream bg */
.fh-page-hero .fh-input-dark,
.fh-search-header .fh-input-dark,
.fh-detail-hero .fh-input-dark,
.faq-hero .fh-input-dark,
.faq-hero .form-control {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.fh-page-hero .fh-input-dark::placeholder,
.fh-search-header .fh-input-dark::placeholder,
.faq-hero .form-control::placeholder {
  color: #94a3b8 !important;
}
.fh-page-hero .fh-input-dark option,
.fh-search-header .fh-input-dark option { background: #fff; color: #0f172a; }

/* Search row container: cream card instead of dark glass */
.fh-page-hero .bg-white.bg-opacity-10,
.fh-search-header .bg-white.bg-opacity-10,
.fh-page-hero [style*="rgba(255,255,255,.08)"],
.fh-search-header [style*="rgba(255,255,255,.08)"],
.fh-page-hero [style*="rgba(255, 255, 255, 0.08)"],
.fh-search-header [style*="rgba(255, 255, 255, 0.08)"] {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,144,42,.15) !important;
}

/* Auth visual panel — warm cream */
.auth-visual .text-white { color: #0f172a !important; }
.auth-visual .text-white-50 { color: #64748b !important; }
.auth-visual .text-white strong { color: #0f172a !important; }
.auth-visual .border-white { border-color: #e8dece !important; }

/* Danger/red → orange rebrand on about/faq */
.about-hero .badge.bg-danger,
.faq-hero .badge.bg-danger { background: rgba(201,144,42,.15) !important; color: #C9902A !important; }
.about-hero .text-danger,
.faq-hero .text-danger,
section .text-danger { color: #C9902A !important; }

/* Profile / detail headers */
.fh-profile-header .text-white,
.fh-profile-header h1,
.fh-profile-header h2,
.fh-profile-header h3 { color: #0f172a !important; }
.fh-profile-header .text-white-50,
.fh-profile-header .text-secondary { color: #64748b !important; }

/* Normalise Bootstrap bg-dark → site navy (not Bootstrap default #212529) */
.card .bg-dark:not([class*="text-"]),
.sticky-sidebar .bg-dark { background-color: #0f172a !important; }

/* Plans page toggle */
.active-type-btn { background: #C9902A !important; color: #fff !important; }

body {
  padding-top: 104px;
  /* Offset for floating sticky header */
}

@media (max-width: 768px) {
  body { padding-top: 84px; }
}

/* ── Header: floating rounded glass pill (NidoFit reskin) ─────── */
.fh-header {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: none;
  padding: 8px 24px 0;
  transition: padding .3s ease;
}

@media (max-width: 768px) {
  .fh-header { padding: 12px 12px 0; }
}

.fh-header .container {
  max-width: 1328px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow:
    0 16px 36px rgba(14, 16, 23, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow .3s ease, background .3s ease;
}

@media (max-width: 768px) {
  .fh-header .container {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 14px;
  }
}

.fh-header.scrolled .container {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(14, 16, 23, 0.12);
}

.fh-nav-link {
  color: var(--nf-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 1.1rem 1rem;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
}

.fh-nav-link:hover {
  color: var(--nf-ink);
  background-color: transparent;
}

.fh-nav-link.active {
  color: var(--fh-orange);
  font-weight: 700;
}

/* Mobile nav drawer sits on a dark background — keep links legible */
#mobileMenu .fh-nav-link {
  color: rgba(255, 255, 255, 0.85);
}
#mobileMenu .fh-nav-link:hover,
#mobileMenu .fh-nav-link.active {
  color: var(--fh-orange);
}

/* ── Mobile nav drawer — compact, icon-led, professional density ── */
.fh-mobile-drawer .offcanvas-header {
  padding: 14px 18px;
}

.fh-mobile-drawer .offcanvas-title {
  font-size: 1.05rem;
}

.fh-mobile-drawer .offcanvas-body {
  padding: 10px 12px 20px;
}

.fh-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fh-mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.fh-mobile-nav-link i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  transition: color .15s;
}

.fh-mobile-nav-link:hover,
.fh-mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fh-orange);
}

.fh-mobile-nav-link:hover i,
.fh-mobile-nav-link.active i {
  color: var(--fh-orange);
}

.fh-mobile-nav-lock {
  font-size: 9px !important;
  opacity: .55;
  width: auto !important;
  margin-left: 2px;
}

.fh-mobile-nav-loc {
  color: var(--nf-gold-2);
  font-weight: 700;
}

.fh-mobile-nav-loc i {
  color: var(--nf-gold-2);
}

.fh-mobile-nav-label {
  display: block;
  padding: 12px 10px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.fh-mobile-nav-divider {
  margin: 6px 0;
  border-color: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.fh-mobile-nav-account {
  font-size: 14px;
  font-weight: 700;
}

/* ── Mobile bottom tab bar ── */
.fh-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fh-bb-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 7px;
  color: #8b93a0;
  text-decoration: none;
  transition: color .15s;
}

.fh-bb-item i {
  font-size: 19px;
  line-height: 1;
}

.fh-bb-item span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.fh-bb-item.active {
  color: var(--fh-orange);
}

@media (min-width: 992px) {
  .fh-bottom-bar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: 60px;
  }
}

.fh-nav-link.active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 12px;
  left: 1rem;
  right: 1rem;
  height: 3px;
  background: var(--nf-gold-2);
  border-radius: 99px;
}

.fh-icon-btn {
  color: #1a1a1a;
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.fh-icon-btn:hover {
  color: var(--fh-orange);
  background-color: rgba(201, 144, 42, 0.06);
}

/* ── Polished navbar (gym11-style circular icon buttons, location pill,
      account dropdown). Layered on top of the existing .fh-header. ── */
.nav-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--nf-ink);
  transition: all .15s;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}
.nav-icon-btn:hover { background: rgba(0, 0, 0, .04); color: var(--fh-orange); }
.nav-icon-btn i { font-size: 17px; }
.nav-icon-btn .badge-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nf-gold-2);
  border: 2px solid #fff;
}

.nav-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--nf-ink);
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: 99px;
  padding: 8px 16px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
}

@media (max-width: 991.98px) {
  .nav-loc-btn {
    font-size: 12px;
    padding: 6px 9px;
    gap: 4px;
  }

  .nav-loc-btn span {
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .fh-logo-text {
    font-size: 1.15rem !important;
  }
}
.nav-loc-btn:hover { border-color: var(--nf-gold-2); background: #fff8ee; color: var(--fh-orange); }

/* Account trigger pill (avatar + first name + chevron) */
.nav-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border: none;
  border-radius: 30px;
  padding: 4px 12px 4px 4px;
  transition: .15s;
  cursor: pointer;
}
.nav-account-btn:hover { background: #fdf8ee; }
.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(201, 144, 42, .3);
  flex-shrink: 0;
}
.nav-avatar-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fh-orange), #e8a935);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-account-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Polished dropdown menus in the navbar (More + Account) */
.nav-menu {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .13);
  padding: 8px;
  min-width: 220px;
  /* Must stay above the hero's guy/card images (boosted to 1040/1041 at
     scroll-top so the guy peeks in front of the header) or the dropdown
     opens up behind them instead of over them. */
  z-index: 1050;
}
.nav-menu .dropdown-item {
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: .15s;
}
.nav-menu .dropdown-item:hover {
  background: #fdf8ee;
  color: var(--fh-orange);
}
.nav-menu .dropdown-item i { width: 18px; color: var(--fh-orange); font-size: 15px; }
.nav-menu .dropdown-item.text-danger i { color: #ef4444; }
.nav-menu .dropdown-item.text-danger:hover { background: #fff5f5; color: #ef4444; }
.nav-menu .dropdown-divider { margin: 6px 8px; border-color: #f0ede6; }
.nav-menu .dropdown-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #bbb;
  padding: 6px 14px 4px;
}
.nav-account-head {
  padding: 8px 14px 10px;
  border-bottom: 1px solid #f0ede6;
  margin-bottom: 4px;
}
.nav-account-head .n {
  font-weight: 700;
  font-size: 14px;
  color: #111;
}
.nav-account-head .r {
  font-size: 11px;
  color: #aaa;
  text-transform: capitalize;
}

/* Guest login / join buttons */
.nav-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border: 1px solid #e2e8f0;
  color: #1a1a1a;
  background: #fff;
  text-decoration: none;
  transition: .15s;
}
.nav-btn-login:hover { border-color: var(--nf-gold-2); color: var(--fh-orange); }
.nav-btn-join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #e5992a, var(--nf-gold));
  text-decoration: none;
  transition: .15s;
}
.nav-btn-join:hover { filter: brightness(1.05); color: #fff; }

/* Footer Styles — light cream theme (NidoFit reskin) */
.fh-footer {
  background: linear-gradient(180deg, #f8f5ef 0%, #fbfaf7 60%, #ffffff 100%);
  color: var(--nf-muted);
  border-top: 1px solid var(--nf-line);
}

.fh-footer h3,
.fh-footer h4,
.fh-footer h5,
.fh-footer h6 {
  color: var(--nf-ink);
}

.fh-footer-link {
  color: var(--nf-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}

.fh-footer-link:hover {
  color: var(--fh-orange);
  transform: translateX(2px);
}

.fh-social-btn {
  width: 36px;
  height: 36px;
  background-color: var(--nf-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, transform 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}

.fh-social-btn:hover {
  background-color: var(--nf-gold-2);
  color: #fff;
  transform: translateY(-2px);
}

.fh-footer .border-bottom,
.fh-footer .border-top {
  border-color: var(--nf-line) !important;
}

.fh-footer .text-secondary {
  color: var(--nf-muted) !important;
}

.fh-footer .text-white {
  color: var(--nf-ink) !important;
}

/* Input Group */
.fh-subscribe-input {
  background-color: #fff;
  border: 1px solid var(--nf-line);
  color: var(--nf-ink);
}

.fh-subscribe-input::placeholder,
.white-placeholder::placeholder {
  color: #94a3b8;
}

.fh-subscribe-input:focus {
  background-color: #fff;
  border-color: var(--nf-gold-2);
  box-shadow: 0 0 0 3px rgba(245, 161, 26, 0.12);
  color: var(--nf-ink);
}

.btn-orange {
  background-color: var(--fh-orange);
  color: #fff;
  border: none;
}

.btn-orange:hover {
  background-color: var(--fh-orange-hover);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   NidoFit reference HERO — pixel-matched port of
   C:\Users\Win11\Downloads\final\index.html (.hero section).
   Classes are "nf-" prefixed so they never collide with
   Bootstrap's own .btn-primary/.btn-secondary or any other
   site-wide selector.
═══════════════════════════════════════════════════════════ */
.nf-hero {
  position: relative;
  z-index: auto;
  width: 100vw;
  min-height: 0;
  aspect-ratio: 1024 / 379;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  overflow: visible;
  border-radius: 0;
   margin-top: -10px;
}

.nf-hero-row {
  --bs-gutter-x: 0;
}

.nf-hero-copy {
  position: relative;
  z-index: 3;
  margin-left: max(24px, calc((100vw - 1300px) / 2));
  padding: 42px 0 22px 12px;
  max-width: 530px;
  height: 100%;
}

.nf-eyebrow {
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 14px 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nf-ink);
  background: rgba(255, 247, 236, 0.95);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(157, 96, 26, 0.08);
}

.nf-eyebrow span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-gold-2);
  background: #fff1d9;
  border-radius: 50%;
  flex-shrink: 0;
}

.nf-eyebrow svg {
  width: 13px;
  height: 13px;
}

.nf-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(54px, 6.4vw, 78px);
  line-height: 0.94;
  font-weight: 900;
  color: var(--nf-ink);
  letter-spacing: 0;
  margin: 0;
}

.nf-hero h1 span {
  display: block;
  color: #b16e16;
}

.nf-hero-lede {
  width: min(100%, 460px);
  margin: 18px 0 22px;
  color: #304057;
  font-size: 18px;
  line-height: 1.65;
}

/* Mobile-only hero visual: the guy photo bleeds in from the right edge,
   behind the text, fading out toward the left via a mask so it blends
   into the page background instead of sitting in its own boxed panel —
   the same idea as the desktop collage (.nf-hero-art), just scaled and
   masked to work at mobile widths where that absolute-positioned
   collage (tuned for wide viewports) is hidden. */
.nf-hero-mobile-media {
  position: absolute;
  top: -8px;
  right: -16px;
  width: 62%;
  height: 360px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}

.nf-hero-mobile-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.nf-hero-mobile-card {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 56%;
  max-width: 190px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
}

.nf-hero-mobile-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Keep the actual copy above the bleeding photo, and narrow the
   headline/lede so they don't run into it. */
@media (max-width: 1200px) {
  .nf-eyebrow,
  .nf-hero-copy h1,
  .nf-hero-lede,
  .nf-hero-buttons,
  .nf-hero-stats {
    position: relative;
    z-index: 1;
  }

  .nf-hero-copy h1,
  .nf-hero-lede {
    max-width: 76%;
  }
}

@media (max-width: 480px) {
  .nf-hero-mobile-media {
    height: 320px;
  }

  .nf-hero-copy h1,
  .nf-hero-lede {
    max-width: 70%;
  }
   .nf-hero-copy h1 {
    font-size: 34px;
  }

  .nf-hero-lede {
    font-size: 14px;
  }

  .nf-btn-primary,
  .nf-btn-secondary {
    max-width: 200px
  }

  .nf-hero {
     min-height: auto !important;
  }
}

.nf-hero-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nf-btn-primary,
.nf-btn-secondary,
.nf-btn-blue {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(182, 107, 9, 0.18);
  text-decoration: none;
  transition: all .2s ease;
}

.nf-btn-primary:hover,
.nf-btn-secondary:hover,
.nf-btn-blue:hover {
  transform: translateY(-2px);
}

.nf-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #e89a22, #ad6508);
}

.nf-btn-primary:hover {
  box-shadow: 0 14px 28px rgba(182, 107, 9, 0.26);
  filter: brightness(1.03);
  color: #fff;
}

.nf-btn-secondary {
  color: var(--nf-ink);
  background: #fff;
  border: 1px solid #e7ded2;
  box-shadow: 0 8px 20px rgba(15, 13, 11, 0.04);
}

.nf-btn-secondary:hover {
  border-color: var(--nf-gold-2);
  color: var(--nf-gold);
  box-shadow: 0 12px 24px rgba(182, 107, 9, 0.12);
}

.nf-btn-primary svg,
.nf-btn-secondary svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
  flex-shrink: 0;
}

.nf-hero-stats {
  position: static;
  width: 392px;
  max-width: 100%;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  align-items: center;
  gap: 0;
  padding: 6px 0;
  background: transparent;
  border-radius: 0;
}

.nf-hero-stats div {
  display: grid;
  grid-template-columns: 28px max-content;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 94px;
  padding: 0 10px 0 0;
  border-right: 1px solid #eee5d9;
}

.nf-hero-stats div + div {
  padding-left: 10px;
}

.nf-hero-stats div:last-child {
  border-right: none;
  padding-right: 0;
}

.nf-hero-stats span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b86e10;
  background: rgba(255, 247, 237, 0.95);
  border: 1px solid #f0ddc2;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(181, 105, 11, 0.08);
}

.nf-hero-stats svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.nf-hero-stats strong {
  color: var(--nf-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.nf-hero-stats small {
  margin-top: 3px;
  color: #526071;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.05;
}

.nf-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -60px;
  z-index: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.98) 18%,
      rgba(255, 255, 255, 0.82) 34%,
      rgba(255, 255, 255, 0.44) 48%,
      rgba(255, 255, 255, 0.12) 63%,
      rgba(255, 255, 255, 0) 78%
    ),
    linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.32) 12%,
      rgba(255, 255, 255, 0.1) 24%,
      rgba(255, 255, 255, 0) 38%
    ),
    radial-gradient(
      ellipse at 8% 45%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.9) 28%,
      rgba(255, 255, 255, 0) 62%
    ),
    url("../img/nido-assets/gym-curve-bg.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.nf-hero-guy-foreground {
  position: absolute;
  z-index: 320;
  right: calc((100vw - 1300px) / 2 + -110px);
  top: -45px;
  height: 103%;
  width: auto;
  pointer-events: none;
}

/* At the very top of the page, let the guy break in front of the
   floating header; past a 50px scroll he sinks back behind it. */
.nf-hero-guy-foreground.nf-hero-guy-on-top {
  z-index: 1040;
}

/* The premium card must always stay above the guy, even while he's
   boosted in front of the header. */
.nf-hero-guy-foreground.nf-hero-guy-on-top ~ .nf-hero-card-foreground {
  z-index: 1041;
}

.nf-hero-card-foreground {
  position: absolute;
  z-index: 330;
  right: calc((100vw - 1300px) / 2 + 30px);
  top: 180px;
  width: clamp(260px, 21vw, 315px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 24px rgba(7, 10, 16, 0.18));
}

.nf-hero-phone-foreground {
  position: absolute;
  z-index: 112;
  left: max(400px, calc((100vw - 1300px) / 2 + 540px));
  /* top: -5px;
  height: calc(35% + 325px); */
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 22px 20px rgba(7, 10, 16, 0.22));
  bottom: 10px;
}

@media (max-width: 1200px) {
  .nf-hero-copy {
    padding-top: 42px;
  }

  .nf-hero-guy-foreground,
  .nf-hero-card-foreground,
  .nf-hero-phone-foreground,
  .nf-hero-image {
    display: none;
  }

  .nf-hero {
    aspect-ratio: auto;
    min-height: 560px;
    background: #fdf8f2;
  }
}

@media (max-width: 768px) {
  .nf-hero {
    min-height: 620px;
  }

  .nf-hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nf-hero-buttons .nf-btn-primary,
  .nf-hero-buttons .nf-btn-secondary {
    min-height: 42px;
    padding: 0 18px;
    font-size: 12.5px;
    width: auto;
  }

  .nf-hero-buttons svg {
    width: 14px;
    height: 14px;
  }

  .nf-hero-stats {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .nf-hero-stats::-webkit-scrollbar {
    display: none;
  }

  .nf-hero-stats div {
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   NidoFit reference PASSPORT SECTION — pixel-matched port of
   C:\Users\Win11\Downloads\final\index.html (.passport-panel).
   "nf-" prefixed to avoid colliding with Bootstrap's own
   .small utility / anything else site-wide.
═══════════════════════════════════════════════════════════ */
.nf-passport-panel {
  position: relative;
  z-index: 20;
  padding: 22px 38px 26px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--nf-line);
  border-radius: 16px;
  /* Ambient shadow plus a tight, darker contact shadow along the base —
     reads as a card with a little physical thickness/edge, not a flat
     panel glued onto the hero background. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(35, 29, 22, 0.06),
    0 20px 48px rgba(35, 29, 22, 0.1);
}

@media (max-width: 768px) {
  .nf-passport-panel {
    padding: 20px 18px 22px;
  }
}

/* Desktop only: the guy-lifting image falls a bit short of the hero's
   bottom edge, leaving a bare gap before this section — pull it up to
   close that gap. Matches the breakpoint where the hero collage shows. */
@media (min-width: 1201px) {
  .nf-passport-section {
    margin-top: -30px;
    position: relative;
    z-index: 21;
  }
}

.nf-passport-heading h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 850;
  color: var(--nf-ink);
  margin: 0;
}

.nf-passport-heading p {
  color: var(--nf-muted);
  font-size: 14px;
  margin: 4px 0 0;
}

.nf-passport-grid {
  margin-top: 20px;
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

/* Card is a named-area grid so the DOM order (header, visual, cta,
   features) can be reused as-is while the visual position/order of each
   block differs between mobile (stacked: title → image → button →
   benefits) and desktop (2-column, image spanning the right side). */
.nf-passport-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "visual"
    "cta"
    "features";
  min-height: 270px;
  padding: 28px 28px 22px;
  gap: 20px;
  overflow: hidden;
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nf-passport-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(24, 22, 18, 0.12);
}

.nf-domestic-card {
  background: linear-gradient(120deg, #fff6e8 0%, #fffaf2 46%, #f5ead9 100%);
  border: 1px solid #f1dfc5;
}

.nf-international-card {
  background: linear-gradient(120deg, #eef7ff 0%, #f8fbff 46%, #e6f0fb 100%);
  border: 1px solid #dbeaf8;
}

@media (min-width: 768px) {
  .nf-passport-card {
    grid-template-columns: 47.5% 52.5%;
    grid-template-areas:
      "header   visual"
      "features visual"
      "cta      visual";
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }
}

.nf-pp-header {
  grid-area: header;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  column-gap: 14px;
}

.nf-pp-visual {
  grid-area: visual;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-pp-cta {
  grid-area: cta;
}

.nf-pp-features {
  grid-area: features;
}

.nf-passport-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(13, 20, 34, 0.08);
}

.nf-passport-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 2;
}

.nf-gold-icon {
  background: linear-gradient(135deg, #dfa445, #bf750d);
}

.nf-blue-icon {
  background: linear-gradient(135deg, #2d83cc, #104d8d);
}

.nf-pp-header h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 850;
  color: var(--nf-ink);
  margin: 0;
}

.nf-pp-header p {
  margin-top: 6px;
  color: #37465a;
  font-size: 11px;
  font-weight: 650;
}

.nf-pp-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  color: #233048;
  font-size: 14px;
  font-weight: 600;
}

.nf-pp-features li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nf-pp-features li::before {
  content: "\f00c";
  font: var(--fa-font-solid);
  color: var(--nf-gold-2);
  font-size: 12px;
}

.nf-international-card .nf-pp-features li::before {
  content: "\f192";
  color: #1d65a7;
  font-size: 10px;
}

.nf-btn-blue {
  color: #fff;
  background: linear-gradient(135deg, #175fa7, #0a3269);
  box-shadow: 0 10px 22px rgba(12, 54, 111, 0.16);
}

.nf-btn-blue:hover {
  box-shadow: 0 14px 28px rgba(12, 54, 111, 0.24);
  filter: brightness(1.03);
  color: #fff;
}

.nf-btn-blue svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
  flex-shrink: 0;
}

.nf-btn-small {
  width: fit-content;
  min-height: 44px;
  padding-inline: 22px;
  font-size: 13px;
}

.nf-pass-visual {
  position: relative;
  min-width: 0;
  min-height: clamp(150px, 16vw, 210px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-pass-visual::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 2%;
  bottom: 16px;
  height: 34px;
  background: rgba(22, 18, 13, 0.34);
  border-radius: 50%;
  filter: blur(16px);
  transform: rotate(-3deg);
  animation: nfPassShadowFloat 4.8s ease-in-out infinite;
}

.nf-international-card .nf-pass-visual::after {
  background: rgba(10, 29, 61, 0.32);
}

.nf-pass-visual img {
  position: relative;
  z-index: 1;
  width: clamp(190px, 22vw, 300px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: rotate(-7deg) translateY(4px);
  filter: drop-shadow(0 24px 18px rgba(26, 22, 18, 0.28));
  animation: nfPassFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

.nf-international-card .nf-pass-visual img {
  width: clamp(200px, 23vw, 320px);
  transform: rotate(-8deg) translateY(4px);
  animation-name: nfPassFloatAlt;
  animation-delay: -1.2s;
}

@keyframes nfPassFloat {
  0%, 100% { transform: rotate(-7deg) translateY(4px); }
  50% { transform: rotate(-5deg) translateY(-12px); }
}

@keyframes nfPassFloatAlt {
  0%, 100% { transform: rotate(-8deg) translateY(4px); }
  50% { transform: rotate(-10deg) translateY(-12px); }
}

@keyframes nfPassShadowFloat {
  0%, 100% { opacity: 0.9; transform: rotate(-3deg) scale(1); }
  50% { opacity: 0.52; transform: rotate(-3deg) scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .nf-pass-visual img,
  .nf-pass-visual::after {
    animation: none;
  }
}

@media (max-width: 768px) {
  .nf-passport-card {
    padding: 24px;
  }

  .nf-pass-visual {
    margin: 0 auto;
    width: min(100%, 340px);
    max-width: 340px;
    min-height: 170px;
  }

  .nf-pass-visual img,
  .nf-international-card .nf-pass-visual img {
    width: min(82vw, 280px);
  }
}

@media (max-width: 480px) {
  .nf-pass-visual {
    min-height: 145px;
  }

  .nf-pass-visual img,
  .nf-international-card .nf-pass-visual img {
    width: min(76vw, 240px);
  }

  .nf-pass-visual::after {
    left: 12%;
    right: 10%;
    bottom: 12px;
    height: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   NidoFit reference FEATURE STRIP + FEATURED GYMS / HOW IT
   WORKS split-row — pixel-matched port of
   C:\Users\Win11\Downloads\final\index.html
   (.feature-strip, .split-row, .gym-panel, .steps-panel).
   "nf-" prefixed — .gym-card/.tag/.panel/.arrow/.mini all
   collide with either Bootstrap or this project's own
   site-wide gym-listing classes, so everything here is scoped.
═══════════════════════════════════════════════════════════ */
.nf-feature-strip {
  margin: 24px 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--nf-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(23, 23, 23, 0.05);
}

.nf-feature-strip-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--nf-ink);
  margin: 0 0 18px;
}

.nf-feature-strip-row {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 22px;
}

.nf-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}

.nf-feature-icon-wrapper {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--nf-gold);
  background: #FFF3DC;
  border: 1px solid rgba(229, 153, 42, 0.25);
}

.nf-feature-icon {
  width: 22px;
  height: 22px;
}

.nf-feature-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nf-feature-strip strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--nf-ink);
  line-height: 1.25;
}

.nf-feature-strip small {
  display: block;
  color: var(--nf-muted);
  font-size: 11px;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .nf-feature-strip-title {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .nf-feature-icon-wrapper {
    width: 44px;
    height: 44px;
  }

  .nf-feature-icon {
    width: 19px;
    height: 19px;
  }

  .nf-feature-strip strong {
    font-size: 11.5px;
  }

  .nf-feature-strip small {
    font-size: 10px;
  }
}

/* ── shared "panel" card look ── */
.nf-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--nf-line);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(35, 29, 22, 0.08);
}

.nf-split-row {
  margin-bottom: 24px;
}

.nf-split-row-inner {
  --bs-gutter-x: 0;
  --bs-gutter-y: 24px;
  column-gap: 24px;
}

@media (min-width: 1200px) {
  .nf-gym-panel-col {
    flex: 1.7 1.7 0%;
    max-width: 100%;
  }

  .nf-steps-panel-col {
    flex: 1 1 0%;
    max-width: 100%;
  }
}

.nf-gym-panel {
  padding: 30px;
  overflow-x: hidden;
}

.nf-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.nf-section-top h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--nf-ink);
  margin: 0;
}

.nf-section-top p {
  color: var(--nf-muted);
  font-size: 14px;
  margin-top: 2px;
}

.nf-section-top a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--nf-gold);
  text-decoration: none;
}

.nf-section-top a:hover {
  color: var(--nf-ink);
}

.nf-gym-slider {
  position: relative;
  width: 100%;
}

.nf-gym-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow: hidden;
  transition: transform 0.45s ease;
  padding: 5px 0;
}

.nf-gym-track > .nf-gym-card {
  flex: 0 0 calc((100% - 42px) / 4);
}

.nf-slider-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#nf-gym-slide-2:checked ~ .nf-gym-slider .nf-gym-track,
#nf-product-slide-2:checked ~ .nf-gym-slider .nf-gym-track {
  transform: translateX(calc(-1 * (25% + 3.5px)));
}

.nf-gym-card-foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nf-gym-card-cart-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  color: #fff;
  background: var(--nf-gold);
  cursor: pointer;
  transition: filter .15s;
}

.nf-gym-card-cart-btn:hover {
  filter: brightness(1.08);
}

.nf-gym-card-cart-btn i {
  font-size: 12px;
}

.nf-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-ink);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  border: 1px solid var(--nf-line);
}

.nf-arrow:hover {
  background: #fff8ee;
  border-color: var(--nf-gold-2);
  color: var(--nf-gold);
  transform: translateY(-50%) scale(1.05);
}

.nf-arrow svg {
  width: 18px;
  height: 18px;
}

.nf-arrow.prev {
  left: -22px;
}

.nf-arrow.next {
  right: -22px;
}

.nf-gym-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 23, 23, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
}

.nf-gym-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 12, 10, 0.06);
  border-color: rgba(229, 153, 42, 0.4);
}

.nf-gym-card img {
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
  display: block;
}

.nf-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 4px 10px;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nf-tag.purple { background: #565ee6; }
.nf-tag.orange { background: #f38016; }
.nf-tag.green { background: #22b17d; }

.nf-gym-card h3 {
  font-family: inherit;
  margin: 12px 14px 4px;
  font-size: 15px;
  font-weight: 750;
  color: var(--nf-ink);
}

.nf-gym-card p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 14px 12px;
  color: var(--nf-muted);
  font-size: 12px;
}

.nf-gym-card .nf-location-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.nf-gym-card-foot {
  padding: 10px 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f6f2eb;
  font-size: 11px;
}

.nf-rating-star {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--nf-gold-2);
  font-weight: 750;
}

.nf-rating-star svg {
  width: 12px;
  height: 12px;
  fill: var(--nf-gold-2);
}

.nf-gym-card strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--nf-ink);
}

/* How It Works steps panel */
.nf-steps-panel {
  padding: 30px;
}

.nf-mini {
  color: var(--nf-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.nf-steps-panel h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--nf-ink);
  margin: 0;
}

.nf-steps-panel h2 span {
  color: var(--nf-gold);
}

.nf-steps {
  position: relative;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.nf-steps::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30px;
  border-top: 3px dotted rgba(182, 107, 9, 0.25);
  z-index: 1;
}

.nf-step-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.nf-step-badge-wrapper {
  margin-bottom: 12px;
}

.nf-step-badge {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-gold);
  background: #FFF3DC;
  border: 1px solid rgba(182, 107, 9, 0.25);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(182, 107, 9, 0.05);
}

.nf-step-badge svg {
  width: 26px;
  height: 26px;
}

.nf-step-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--nf-gold);
  background: #fff;
  border: 1px solid var(--nf-line);
  padding: 2px 6px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.nf-step-title {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: var(--nf-ink);
  margin-bottom: 4px;
}

.nf-step-desc {
  display: block;
  color: var(--nf-muted);
  font-size: 10px;
  line-height: 1.4;
  padding: 0 6px;
}

@media (max-width: 768px) {
  .nf-gym-slider {
    /* Outer bound: guarantees the vertical stack below can never
       leak into page-level horizontal scroll no matter what. */
    overflow-x: hidden;
    max-width: 100%;
  }

  .nf-gym-track {
    flex-direction: column;
    overflow-x: hidden;
    padding: 4px 0;
    max-width: 100%;
    transform: none !important;
    transition: none !important;
  }

  .nf-gym-track > .nf-gym-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .nf-arrow {
    display: none;
  }

  .nf-steps {
    flex-direction: column;
    gap: 24px;
  }

  .nf-steps::before {
    display: none;
  }

  .nf-step-item {
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }

  .nf-step-badge-wrapper {
    margin-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   NidoFit reference COACHES / TRAINERS — pixel-matched port of
   C:\Users\Win11\Downloads\final\index.html (.people-row,
   .people-panel, .person-card). "nf-" prefixed — .trainer-card
   family is this project's own site-wide trainer-listing class.
═══════════════════════════════════════════════════════════ */
.nf-people-row-inner {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 24px;
}

.nf-people-panel {
  padding: 30px;
}

.nf-people-grid {
  --bs-gutter-x: 15px;
  --bs-gutter-y: 15px;
}

.nf-person-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 23, 23, 0.05);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  /* every card is the same height: text is clamped, the button sits at the bottom */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nf-person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 12, 10, 0.06);
  border-color: rgba(229, 153, 42, 0.3);
}

.nf-person-card img {
  width: 100%;
  aspect-ratio: 1.05;
  object-fit: cover;
  display: block;
}

.nf-person-card-initials {
  width: 100%;
  aspect-ratio: 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--nf-gold), #e8a935);
}

.nf-person-card h3 {
  font-family: inherit;
  margin: 12px 8px 2px;
  font-size: 14px;
  font-weight: 750;
  color: var(--nf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-person-card p {
  color: var(--nf-muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 0 8px 8px;
  height: 2.7em;               /* always two lines of space, so short and long text give the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nf-person-card .nf-rating-star {
  display: flex;
  justify-content: center;
  font-size: 11px;
  margin-bottom: 12px;
  margin-top: auto;
}

.nf-person-card .nf-rating-star svg {
  width: 11px;
  height: 11px;
}

.nf-person-card-btn {
  display: block;
  margin: 0 12px 14px;
  height: 34px;
  line-height: 32px;
  border: 1px solid var(--nf-line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nf-muted);
  background: #fff;
  transition: all 0.2s ease;
}

.nf-person-card:hover .nf-person-card-btn {
  border-color: var(--nf-gold-2);
  background: #fff8ee;
  color: var(--nf-gold);
}

@media (max-width: 768px) {
  .nf-people-panel {
    overflow-x: hidden;
  }

  .nf-people-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    max-width: 100%;
  }

  .nf-people-grid > .col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   NidoFit reference APP DOWNLOAD BANNER — pixel-matched port
   of C:\Users\Win11\Downloads\final\index.html (.app-banner).
═══════════════════════════════════════════════════════════ */
.nf-app-banner {
  min-height: 158px;
  margin: 14px 0 18px;
  padding: 0 40px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(15, 38, 68, 0.96), rgba(5, 16, 34, 0.98)),
    #061426;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 42px rgba(5, 16, 34, 0.18);
}

.nf-app-banner-row {
  --bs-gutter-x: 0;
  column-gap: 24px;
  row-gap: 24px;
  align-items: center;
}

.nf-app-phones-col {
  flex: 0 0 288px;
  max-width: 288px;
}

.nf-app-copy-col {
  flex: 1 1 0%;
  min-width: 0;
}

.nf-app-qr-col {
  flex: 0 0 112px;
  max-width: 112px;
}

.nf-app-store-col {
  flex: 0 0 350px;
  max-width: 350px;
}

@media (max-width: 1200px) {
  .nf-app-banner-row {
    column-gap: 20px;
    row-gap: 20px;
  }

  .nf-app-phones-col {
    flex-basis: 240px;
    max-width: 240px;
  }

  .nf-app-copy-col {
    flex: 1.2 1.2 0%;
  }

  .nf-app-qr-col {
    flex: 1 1 0%;
    max-width: none;
  }

  .nf-app-store-col {
    flex: 0 0 calc(100% - 260px);
    max-width: calc(100% - 260px);
    margin-left: 260px;
  }
}

@media (max-width: 768px) {
  .nf-app-phones-col,
  .nf-app-copy-col,
  .nf-app-qr-col,
  .nf-app-store-col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

.nf-app-phones-wrapper {
  height: 158px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.nf-app-phones {
  width: 276px;
  max-width: 100%;
  display: block;
  margin-bottom: -3px;
  filter: drop-shadow(0 24px 25px rgba(0, 0, 0, 0.34));
}

.nf-app-copy {
  padding-block: 24px;
}

.nf-app-copy p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.6px;
  margin: 0;
}

.nf-app-copy p span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #071321;
  background: var(--nf-gold-2);
  border-radius: 50%;
  flex-shrink: 0;
}

.nf-app-copy p svg {
  width: 12px;
  height: 12px;
}

.nf-app-copy h2 {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 430px;
  font-size: 31px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
}

.nf-app-copy h2 span {
  display: block;
  color: var(--nf-gold-2);
}

.nf-app-copy small {
  display: block;
  max-width: 445px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.5;
}

.nf-app-qr-section {
  display: flex;
  justify-content: center;
}

.nf-qr-image {
  width: 110px;
  height: 110px;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  object-fit: contain;
}

.nf-store-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.nf-store-wrap > strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 800;
}

.nf-stores {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nf-store-link {
  display: block;
  width: 140px;
  height: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nf-store-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.nf-store-link img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .nf-app-banner {
    padding: 24px;
    text-align: center;
  }

  .nf-app-phones-wrapper {
    justify-content: center;
  }

  .nf-app-phones {
    width: 70%;
    margin-bottom: -10px;
  }

  .nf-app-copy {
    padding: 0;
  }

  .nf-app-copy p {
    justify-content: center;
  }

  .nf-store-wrap {
    align-items: center;
  }

  .nf-stores {
    justify-content: center;
  }
}

/* ── Hero: light split layout ──────────────────────────────── */
.fh-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf8f2 0%, #f5ede0 35%, #f0ece4 70%, #ede8df 100%);
  color: #1a1a1a;
  padding: 60px 0 0;
}
/* Decorative blobs behind left content */
.fh-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,144,42,.08) 0%, transparent 70%);
  pointer-events: none;
}
.fh-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 30%;
  width: 300px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,144,42,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* keep old full-bleed hero image hidden — no longer used */
.fh-hero-img { display: none; }
.fh-hero-overlay { display: none; }
.fh-orb { display: none; }

.fh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fffbf0;
  border: 1px solid #f5d78a;
  border-radius: 50rem;
  padding: 0.375rem 1rem;
  color: #b07c0a;
  font-size: 0.875rem;
  font-weight: 600;
}

.fh-hero-title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 1.25rem;
  color: #0f172a;
}

.fh-gold-text {
  color: #C9902A;
}

.fh-gradient-text {
  background: linear-gradient(to right, #C9902A, #dba756);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fh-btn-primary {
  background-color: #C9902A;
  color: white;
  padding: 0.875rem 1.75rem;
  border-radius: 0.625rem;
  font-weight: 700;
  border: none;
  box-shadow: 0 8px 20px rgba(201,144,42,0.28);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.fh-btn-primary:hover {
  background-color: #a87520;
  box-shadow: 0 10px 24px rgba(201, 144, 42, 0.35);
  color: white;
  transform: translateY(-1px);
}

.fh-btn-secondary {
  background-color: #fff;
  border: 2px solid #e2e8f0;
  color: #1a1a1a;
  padding: 0.875rem 1.75rem;
  border-radius: 0.75rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.fh-btn-secondary:hover {
  border-color: #C9902A;
  color: #C9902A;
  background: #fffbf0;
}

.fh-stat-value {
  font-size: 1.6rem;
  font-weight: 900;
  display: block;
  color: #0f172a;
}

.fh-stat-label {
  font-size: 0.8rem;
  color: #64748b;
}

/* ── Hero right column ─────────────────────────────────────── */
.fh-hero-right {
  position: relative;
  height: 520px;
}

.fh-hero-athlete {
  position: absolute;
  right: -20px;
  bottom: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 24px 24px 0 0;
}

.fh-hero-img-wrap {
  position: relative;
  height: 520px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #2d2d2d 60%, #0f172a 100%);
}

.fh-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .85;
  mix-blend-mode: luminosity;
}

.fh-premium-card {
  position: absolute;
  bottom: 28px;
  right: 20px;
  background: linear-gradient(135deg, #0f172a 0%, #2d2d2d 100%);
  border: 1px solid rgba(201,144,42,.4);
  border-radius: 16px;
  padding: 16px 20px;
  color: #fff;
  width: 220px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

.fh-premium-card .pc-title {
  font-size: .78rem;
  font-weight: 800;
  color: #f5c842;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

.fh-premium-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.fh-premium-card ul li {
  font-size: .72rem;
  color: #cbd5e1;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fh-premium-card ul li::before {
  content: '✓';
  color: #4ade80;
  font-weight: 700;
  font-size: .7rem;
}

.fh-hero-app-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 10px 16px;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

/* ── Feature Bar: white ────────────────────────────────────── */
.fh-features-bar {
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.fh-feat-bar-item {
  border-right: 1px solid #f0f0f0;
  padding: 0 24px !important;
}

.fh-feat-bar-item:last-child { border-right: none; }

@media (max-width: 767px) {
  .fh-feat-bar-item { border-right: none; }
}

.fh-feature-icon-box {
  width: 40px;
  height: 40px;
  background-color: rgba(201, 144, 42, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #C9902A;
}

/* Gym Cards */
.fh-gym-card {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #f8f9fa;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.fh-gym-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.075);
  transform: translateY(-5px);
}

.fh-card-img-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.fh-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fh-gym-card:hover .fh-card-img-wrapper img {
  transform: scale(1.05);
}

.fh-rating-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fh-gym-tag {
  font-size: 10px;
  font-weight: 500;
  background-color: #f8f9fa;
  color: #6c757d;
  padding: 2px 10px;
  border-radius: 50px;
}

/* Trainer Cards */
.fh-trainer-card {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #f8f9fa;
  transition: all 0.3s ease;
  text-decoration: none !important;
  display: block;
}

.fh-trainer-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.075);
}

.fh-trainer-img-wrapper {
  height: 320px;
  overflow: hidden;
  position: relative;
}

.fh-trainer-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fh-trainer-card:hover .fh-trainer-img-wrapper img {
  transform: scale(1.05);
}

/* ═══ gym11-style gym card (shared: home page + gyms listing) ═══ */
.gym-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07); border: 1px solid #f0ede6;
  transition: transform .25s, box-shadow .25s; height: 100%; text-decoration: none !important; display: block;
}
.gym-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.13); }
.gym-img { height: 200px; position: relative; background-size: cover; background-position: center; overflow: hidden; }
.gym-img::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 75% 15%, rgba(255,255,255,0.12), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 2px, transparent 2px, transparent 14px);
  pointer-events: none;
}
.gym-img img { position: relative; z-index: 1; }
.gym-img-1 { background: linear-gradient(160deg, #0f0c00, #3a2200, #c9901a); }
.gym-img-2 { background: linear-gradient(160deg, #050f1f, #0d2951, #1a5fa8); }
.gym-img-3 { background: linear-gradient(160deg, #05150a, #0d3820, #1a7a40); }
.gym-img-4 { background: linear-gradient(160deg, #15050a, #3d0a18, #8a1030); }
.gym-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.badge-featured { background: #C9902A; color: #fff; }
.badge-popular { background: #ff6b35; color: #fff; }
.badge-new { background: #22c55e; color: #fff; }
.gym-info { padding: 14px 16px 16px; }
.gym-name { font-size: 15px; font-weight: 700; color: #111; }
.gym-rating { font-size: 13px; font-weight: 700; color: #C9902A; }
.gym-rating i { font-size: 11px; }
.gym-loc { font-size: 12px; color: #888; margin: 4px 0 10px; display: flex; align-items: center; gap: 4px; }
.gym-loc i { color: #C9902A; font-size: 11px; }
.gym-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.gym-tag {
  font-size: 10px; font-weight: 600; background: #fdf3e0; color: #8a5e00;
  border-radius: 20px; padding: 3px 10px; border: 1px solid #f0e0b8;
}
.gym-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f5f0e8; padding-top: 10px; }
.gym-price { font-size: 13px; color: #555; }
.gym-price strong { font-size: 15px; color: #C9902A; font-weight: 800; }
.gym-members { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 4px; }
#gymGrid.list-view .gym-card-col { flex: 0 0 100%; max-width: 100%; }
#gymGrid.list-view .gym-card { flex-direction: row; display: flex; }
#gymGrid.list-view .gym-img { width: 240px; height: auto; flex-shrink: 0; }

/* ═══ gym11-style trainer/coach card (shared: home page + trainers listing) ═══ */
.trainer-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07); border: 1px solid #f0f0f0;
  transition: transform .25s, box-shadow .25s; text-decoration: none !important; display: block; height: 100%;
}
.trainer-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.trainer-img {
  height: 150px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.trainer-img::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.14), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 12px);
  pointer-events: none;
}
.coach-img-1  { background: linear-gradient(135deg, #2a1f10, #5c3d1e); }
.coach-img-2  { background: linear-gradient(135deg, #0f2027, #203a43); }
.coach-img-3  { background: linear-gradient(135deg, #1a0533, #3d1a6e); }
.coach-img-4  { background: linear-gradient(135deg, #0d2137, #1b4f72); }
.trainer-img-1 { background: linear-gradient(135deg, #1a0e00, #4a2800); }
.trainer-img-2 { background: linear-gradient(135deg, #0a1628, #1c3a5e); }
.trainer-img-3 { background: linear-gradient(135deg, #0f1923, #2c4a3e); }
.trainer-img-4 { background: linear-gradient(135deg, #1c0a0a, #4a1010); }
.trainer-initials {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
}
.trainer-avatar-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.trainer-info { padding: 12px; }
.trainer-name { font-size: 14px; font-weight: 700; }
.trainer-spec { font-size: 11px; color: #888; margin: 2px 0; }
.trainer-rating { font-size: 12px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   gym11-style LISTING PAGE SYSTEM — shared by gyms/trainers/jobs/shop listings
   (dark gradient hero + search, sticky toolbar, filter sidebar)
═══════════════════════════════════════════════════════════ */
.list-hero {
  background: linear-gradient(110deg, #0d1117 0%, #1a2535 55%, #0d1117 100%);
  padding: 52px 0 44px; position: relative; overflow: hidden;
}
.list-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(201,144,42,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.list-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; }
.list-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #C9902A; display:flex; align-items:center; gap:6px; margin-bottom: 10px; }
.list-hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 10px; }
.list-hero-sub { font-size: 15px; color: rgba(255,255,255,0.5); margin: 0; }
.list-hero-search-wrap { flex: 1; min-width: 320px; max-width: 560px; }
.list-search-bar { display: flex; align-items: center; background: #fff; border-radius: 12px; padding: 6px 6px 6px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); gap: 10px; }
.list-search-icon { color: #aaa; font-size: 15px; flex-shrink: 0; }
.list-search-input { flex: 1; border: none; outline: none; font-size: 14px; color: #111; background: transparent; min-width: 0; }
.list-search-input::placeholder { color: #bbb; }
.list-search-btn { background: #C9902A; color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.list-search-btn:hover { background: #a87520; }
.list-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lh-tag { font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 5px 14px; cursor: pointer; }
.lh-tag:hover, .lh-tag.active { background: rgba(201,144,42,0.2); color: #C9902A; border-color: rgba(201,144,42,0.4); }

.list-toolbar { background: #fff; border-bottom: 1px solid #f0ede6; padding: 12px 0; }
.list-toolbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.list-count { font-size: 13px; color: #888; }
.list-count strong { color: #111; }
.list-sort-wrap { display: flex; align-items: center; gap: 8px; }
.list-sort-label { font-size: 13px; color: #888; white-space: nowrap; }
.list-sort-select { border: 1px solid #e8e3da; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: #333; background: #fff; }
.list-view-toggle { display: flex; gap: 4px; }
.lvt-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e8e3da; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #888; cursor: pointer; }
.lvt-btn.active, .lvt-btn:hover { background: #C9902A; color: #fff; border-color: #C9902A; }

.list-filter-toggle-btn { display: none; align-items: center; gap: 6px; background: #fff; border: 1px solid #e8e3da; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; color: #333; cursor: pointer; }
.list-filter-toggle-btn i { color: #C9902A; }

.filter-panel { background: #fff; border: 1px solid #f0ede6; border-radius: 16px; padding: 20px; position: sticky; top: 16px; }
.filter-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f0ede6; }
.filter-panel-title { font-size: 14px; font-weight: 800; color: #111; display: flex; align-items: center; gap: 6px; }
.filter-panel-title i { color: #C9902A; }
.filter-clear-all { font-size: 12px; font-weight: 600; color: #C9902A; background: none; border: none; cursor: pointer; }
.active-filter-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; background: rgba(201,144,42,0.1); color: #C9902A; border: 1px solid rgba(201,144,42,0.25); border-radius: 20px; padding: 3px 10px; cursor: pointer; }
.filter-group { border-bottom: 1px solid #f5f1ea; padding-bottom: 14px; margin-bottom: 14px; }
.filter-group.border-0 { border-bottom: none; }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #222; cursor: pointer; margin-bottom: 12px; user-select: none; }
.fg-arrow { font-size: 11px; color: #aaa; transition: transform .2s; }
.filter-group-head[aria-expanded="false"] .fg-arrow { transform: rotate(-90deg); }
.filter-group-body { display: flex; flex-direction: column; gap: 6px; }
.filter-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; cursor: pointer; padding: 3px 0; user-select: none; }
.filter-check input[type="checkbox"], .filter-check input[type="radio"] { accent-color: #C9902A; width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.filter-check span:first-of-type { flex: 1; }
.filter-apply-btn { background: #C9902A; color: #fff; border: none; border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; }
.filter-apply-btn:hover { background: #a87520; }

@media (max-width: 991.98px) {
  .list-filter-toggle-btn { display: inline-flex; }
  .filter-panel { display: none; margin-bottom: 16px; }
  .filter-panel.filter-panel-open { display: block; }
}

.list-nearby-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e8e3da; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; color: #333; text-decoration: none; white-space: nowrap; }
.list-nearby-btn i { color: #C9902A; }
.list-nearby-btn:hover { background: #C9902A; color: #fff; border-color: #C9902A; text-decoration: none; }
.list-nearby-btn:hover i { color: #fff; }

/* ═══ Trainer listing card extensions (verified/session badges, stats, footer rate) ═══ */
.tc-verified {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(201,144,42,0.9); color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.tc-session-badge {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; color: #fff;
}
.badge-online  { background: rgba(22,163,74,0.9); }
.badge-offline { background: rgba(59,130,246,0.9); }
.badge-both    { background: rgba(139,92,246,0.9); }
.tc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.tc-stats span { font-size: 11px; color: #555; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.tc-stats i { font-size: 10px; color: #C9902A; }
.tc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f5f0e8; }
.tc-rate { font-size: 14px; font-weight: 800; color: #111; }
.tc-rate small { font-weight: 500; color: #888; font-size: 11px; }
#trainerGrid.list-view .trainer-card-col { flex: 0 0 100%; max-width: 100%; }
#trainerGrid.list-view .trainer-card { flex-direction: row; display: flex; }
#trainerGrid.list-view .trainer-img { width: 160px; height: auto; flex-shrink: 0; }

/* ═══ gym11-style job card ═══ */
.job-card {
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: .25s;
  display: block; text-decoration: none !important; border: 1px solid transparent; margin-bottom: 16px;
}
.job-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.15); transform: translateY(-3px); }
.job-card-featured { border-color: #C9902A; background: linear-gradient(145deg, #fffdf5, #fff); }
.job-card-logo {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #111; font-size: 16px; flex-shrink: 0; overflow: hidden;
}
.job-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.job-title { font-size: 15px; font-weight: 800; color: #111; margin: 0 0 2px; line-height: 1.3; }
.job-gym-name { font-size: 12px; color: #888; }
.job-badge {
  font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-mode-onsite { background: #fdf3e8; color: #cc6600; }
.badge-mode-remote { background: #e8fdf0; color: #009940; }
.badge-mode-hybrid { background: #f0e8fd; color: #6600cc; }
.job-meta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.job-meta-item { font-size: 12px; color: #555; display: flex; align-items: center; gap: 5px; }
.job-meta-item i { color: #C9902A; font-size: 11px; }
.job-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid #f5f0e8;
}

.fh-trainer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1.5rem;
  color: white;
}

/* Product Cards */
.fh-product-card {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #f8f9fa;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.fh-product-img-wrapper {
  /* aspect-ratio: 1 / 1; */
  overflow: hidden;
  position: relative;
  background-color: #f8f9fa;
}

.fh-badge-featured {
  background-color: #C9902A;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.fh-badge-dark {
  background-color: #1a1a1a;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Hover Cart Button */
.fh-cart-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.fh-product-card:hover .fh-cart-btn {
  opacity: 1;
  transform: translateY(0);
}

.fh-cart-btn:hover {
  background: #C9902A;
  color: white;
}

/* CTA Section */
.fh-cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #2d2d2d 50%, #0f172a 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.fh-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201,144,42,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.fh-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.fh-text-shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.fh-cta-btn-primary {
  background-color: #C9902A;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
}

.fh-cta-btn-primary:hover {
  background-color: #a87520;
  box-shadow: 0 10px 20px rgba(201, 144, 42, 0.25);
  color: white;
}

.fh-cta-btn-outline {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
}

.fh-cta-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Product Detail Page Styles */
.fh-breadcrumb {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0.75rem 0;
}

.fh-breadcrumb a {
  color: #adb5bd;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.fh-breadcrumb a:hover {
  color: #C9902A;
}

.fh-product-gallery {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

.fh-flavor-btn {
  padding: 0.6rem 1.25rem;
  border: 2px solid #dee2e6;
  border-radius: 0.75rem;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  color: #1a1a1a;
}

.fh-flavor-btn.active {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: white;
}

.fh-flavor-btn:hover:not(.active) {
  border-color: #C9902A;
}

.fh-quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  width: fit-content;
  background: white;
  overflow: hidden;
}

.fh-qty-btn {
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  transition: background 0.2s;
}

.fh-qty-btn:hover {
  background: #f8f9fa;
}

.fh-detail-pill {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Trainer / Gym Profile Header */
.fh-profile-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 60px 0;
}

.fh-profile-avatar {
  width: 180px;
  height: 180px;
  border-radius: 1.25rem;
  border: 4px solid rgba(201, 144, 42, 0.3);
  object-fit: cover;
}

/* Pricing & Info Cards */
.fh-card {
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid #f0f0f0;
  padding: 1.5rem;
  /* height: 100%; */
}

.fh-package-card {
  border: 2px solid #eee;
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #fff;
}

.fh-package-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
}

.fh-package-card.featured {
  border-color: #C9902A;
  background-color: rgba(201, 144, 42, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Sidebar Sticky */
.fh-sticky-sidebar {
  position: sticky;
  top: 100px;
}

/* Cert Badges */
.fh-cert-badge {
  background-color: #ebf5ff;
  color: #1a1a1a;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Gym Image Gallery */
.fh-gallery-main {
  height: 400px;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
}

.fh-gallery-thumb {
  height: 194px;
  /* Calculated to match 2x2 grid height */
  border-radius: 0.75rem;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.fh-gallery-thumb.active {
  border-color: #C9902A;
}

.fh-img-overlay-tag {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
}

/* Lists and Icons */
.fh-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.bg-orange-subtle {
  background-color: rgba(201, 144, 42, 0.1);
}

.bg-green-subtle {
  background-color: #f0fdf4;
}

/* Header & Filter Styles */
.fh-search-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 3rem 0;
}

.fh-search-input {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a1a1a;
  padding-left: 2.5rem;
}

.fh-search-input::placeholder { color: #94a3b8; }

.fh-search-input:focus {
  background: #ffffff;
  border-color: #C9902A;
  color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(201,144,42,0.12);
}

.fh-filter-select {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a1a1a;
  cursor: pointer;
}

.fh-filter-select option {
  color: #1a1a1a;
}

/* Card Styles */
.fh-gym-card {
  border: 1px solid #f0f0f0;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.fh-gym-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
}

.fh-gym-card .card-img-container {
  height: 208px;
  overflow: hidden;
  position: relative;
}

.fh-gym-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fh-gym-card:hover img {
  transform: scale(1.05);
}

.fh-rating-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border-radius: 2rem;
  padding: 0.25rem 0.6rem;
  font-weight: 700;
  font-size: 0.75rem;
}

.fh-tag {
  font-size: 0.65rem;
  font-weight: 500;
  background-color: #f8f9fa;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
  border-radius: 2rem;
}

/* Header Styles */
.fh-trainer-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 3rem 0;
}

.fh-input-dark {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1a1a1a;
}

.fh-input-dark::placeholder {
  color: #94a3b8;
}

.fh-input-dark:focus {
  background: #ffffff;
  border-color: #C9902A;
  color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(201,144,42,0.12);
}

/* Card Profile Styles */
.fh-trainer-card {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.fh-trainer-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.fh-img-wrapper {
  height: 288px;
  overflow: hidden;
  position: relative;
}

.fh-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fh-trainer-card:hover .fh-img-wrapper img {
  transform: scale(1.05);
}

.fh-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

/* Badge Styles */
.badge-skill {
  background-color: rgba(201, 144, 42, 0.1);
  color: #C9902A;
  font-size: 10px;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

.badge-cert {
  background-color: #f0f7ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

.fh-stat-box {
  background-color: #fffef0;
  padding: 0.15rem 0.5rem;
  border-radius: 2rem;
}

/* Header & Search */
.fh-shop-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 3rem 0;
}

/* Category Pills */
.fh-pill {
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.fh-pill:hover,
.fh-pill.active {
  background-color: #C9902A;
  border-color: #C9902A;
  color: white;
}

/* Product Cards */
.fh-product-card {
  border: 1px solid #f0f0f0;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.fh-product-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.fh-img-container {
  background-color: #f8f9fa;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fh-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.fh-product-card:hover .fh-img-container img {
  transform: scale(1.05);
}

/* Floating Cart Button */
.fh-add-cart {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.fh-product-card:hover .fh-add-cart {
  opacity: 1;
  transform: translateY(0);
}

.fh-add-cart:hover {
  background-color: #C9902A;
  color: white;
}

.text-orange {
  color: #C9902A;
}

/* Cart Item Styling */
.fh-cart-item {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  transition: border-color 0.3s ease;
}

.fh-cart-img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

/* Quantity Stepper */
.fh-stepper {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
}

.fh-stepper button {
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  transition: background-color 0.2s ease;
}

.fh-stepper button:hover {
  background-color: #e9ecef;
}

/* Order Summary Sidebar */
.fh-summary-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  position: sticky;
  top: 6rem;
  /* Adjust based on your navbar height */
}

.btn-checkout {
  background-color: #C9902A;
  color: white;
  border-radius: 0.75rem;
  font-weight: 700;
  padding: 0.85rem;
  transition: all 0.3s ease;
  border: none;
}

.btn-checkout:hover {
  background-color: #a87520;
  color: white;
  box-shadow: 0 10px 15px -3px rgba(201, 144, 42, 0.25);
}

.text-orange {
  color: #C9902A;
}

/* Progress Tracker */
.fh-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
}

.fh-step-active .fh-step-circle {
  background-color: #C9902A;
  color: white;
}

.fh-step-inactive .fh-step-circle {
  background-color: #e9ecef;
  color: #adb5bd;
}

.fh-step-line {
  flex: 1;
  height: 1px;
  background-color: #e9ecef;
  margin: 0 1rem;
}

/* Checkout Form */
.fh-checkout-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
}

.fh-form-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.fh-input {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.fh-input:focus {
  border-color: #C9902A;
  box-shadow: none;
  outline: none;
}

.bg-orange {
  background-color: #C9902A;
}

.text-orange {
  color: #C9902A;
}

/* Job Filter Sidebar */
.fh-filter-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.fh-filter-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
}

/* Job Cards */
.fh-job-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  margin-bottom: 1rem;
}

.fh-job-card:hover {
  border-color: rgba(201, 144, 42, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.fh-company-logo {
  width: 48px;
  height: 48px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #C9902A;
}

/* Job Badges */
.fh-badge-job {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.bg-orange-light {
  background-color: rgba(201, 144, 42, 0.1);
  color: #C9902A;
}

.bg-blue-light {
  background-color: rgba(53, 142, 255, 0.1);
  color: #358eff;
}

.bg-green-light {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

/* Job Detail Header */
.fh-detail-header {
  background-color: #1a1a1a;
  padding: 4rem 0;
  border-bottom: 4px solid #C9902A;
}

/* Sticky Sidebar */
.fh-sticky-sidebar {
  position: sticky;
  top: 6rem;
}

/* Description Content */
.fh-job-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.fh-job-content p,
.fh-job-content li {
  color: #4b5563;
  line-height: 1.7;
}

.fh-job-content ul {
  padding-left: 1.25rem;
}

.fh-job-content li {
  margin-bottom: 0.5rem;
}

/* Benefit Cards */
.fh-benefit-card {
  background: #f8f9fa;
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid #eee;
  height: 100%;
}

.fh-benefit-icon {
  font-size: 1.5rem;
  color: #C9902A;
  margin-bottom: 0.75rem;
  display: block;
}

/* Story/Circle Nav */
.fh-story-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: none;
}

.fh-story-item {
  flex: 0 0 auto;
  width: 64px;
  text-align: center;
}

.fh-story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #C9902A, #ffb38a);
  margin-bottom: 0.5rem;
}

.fh-story-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

/* Post Cards */
.fh-post-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
}

.fh-post-action {
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.fh-post-action:hover {
  color: #C9902A;
}

.fh-post-action.active {
  color: #C9902A;
}

/* Trending Tags */
.fh-tag-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: #475569;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.fh-tag-link:hover {
  background: #f8f9fa;
  color: #C9902A;
}

/* Profile Header */
.fh-profile-banner {
  height: 240px;
  background:
    linear-gradient(rgba(26, 26, 26, 0.6), rgba(26, 26, 26, 0.6)),
    url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&q=80&w=1200");
  background-size: cover;
  background-position: center;
  border-radius: 0 0 1.5rem 1.5rem;
}

.fh-profile-avatar {
  width: 140px;
  height: 140px;
  border: 5px solid white;
  border-radius: 50%;
  margin-top: -70px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Stats Cards */
.fh-stat-box {
  background: white;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid #f0f0f0;
  text-align: center;
}

/* Gallery Grid */
.fh-gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
  position: relative;
  cursor: pointer;
}

.fh-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fh-gallery-item:hover img {
  transform: scale(1.05);
}

.fh-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

.fh-gallery-item:hover .fh-gallery-overlay {
  opacity: 1;
}

/* Workout List Styling */
.fh-workout-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: transform 0.2s;
}

.fh-workout-card:hover {
  transform: translateX(5px);
  border-color: #C9902A;
}

.fh-exercise-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #eee;
}

.fh-exercise-row:last-child {
  border-bottom: none;
}

/* Photo Gallery Enhancement */
.fh-masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.fh-gallery-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
}

/* Coach Specifics */
.fh-verified-badge {
  background-color: #007bff;
  color: white;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Transformation Cards */
.fh-transformation-card {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background: white;
}

.fh-compare-container {
  display: flex;
  gap: 2px;
  background: #fff;
}

.fh-compare-img {
  width: 50%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Review Stars */
.text-rating {
  color: #ffb100;
}

/* User Achievement Badges */
.fh-badge-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 5px 0;
}

.fh-achievement {
  width: 50px;
  height: 50px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 2px solid #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

/* Activity Heatmap Placeholder */
.fh-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #e9ecef;
}

.fh-heatmap-active {
  background: #C9902A;
  opacity: 0.8;
}

.fh-heatmap-peak {
  background: #C9902A;
}

/* Offcanvas Customization */
.fh-cart-drawer {
  width: 400px !important;
  /* Matches max-w-md */
  border-left: none;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.fh-mini-cart-item {
  background-color: #f8f9fa;
  border-radius: 1rem;
  padding: 0.75rem;
  transition: background-color 0.2s;
}

/* Compact Stepper for Mini Cart */
.fh-mini-stepper {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
}

.fh-mini-stepper button {
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: #1a1a1a;
}

.fh-mini-stepper button:hover {
  background-color: #f8f9fa;
}

/* Footer Buttons */
.btn-view-cart {
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-weight: 600;
}

.btn-view-cart:hover {
  background-color: #f8f9fa;
  color: #1a1a1a;
}

/* Onboarding Progress */
.fh-progress-container {
  height: 6px;
  background-color: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.fh-progress-bar {
  background-color: #C9902A;
  transition: width 0.5s ease;
}

/* Choice Cards */
.fh-choice-card {
  border: 2px solid #f0f0f0;
  border-radius: 1.25rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  position: relative;
}

.fh-choice-card:hover {
  border-color: #C9902A;
  background-color: rgba(201, 144, 42, 0.02);
}

.fh-choice-card.active {
  border-color: #C9902A;
  background-color: rgba(201, 144, 42, 0.05);
}

.fh-choice-card .bi-check-circle-fill {
  display: none;
  color: #C9902A;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.fh-choice-card.active .bi-check-circle-fill {
  display: block;
}

.fh-onboarding-icon {
  font-size: 2rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
  display: block;
}

/* Settings Navigation */
.fh-settings-nav .nav-link {
  color: #64748b;
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.fh-settings-nav .nav-link:hover {
  background-color: #f8f9fa;
  color: #C9902A;
}

.fh-settings-nav .nav-link.active {
  background-color: rgba(201, 144, 42, 0.05);
  color: #C9902A;
  border-color: rgba(201, 144, 42, 0.2);
}

/* Form Sections */
.fh-settings-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.5rem;
}

.fh-input-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

/* Avatar Upload Overlay */
.fh-avatar-edit {
  position: relative;
  width: 100px;
  height: 100px;
}

.fh-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.fh-avatar-edit:hover .fh-avatar-overlay {
  opacity: 1;
}

/* Order Status Badges */
.fh-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  letter-spacing: 0.5px;
}

.status-delivered {
  background: #dcfce7;
  color: #166534;
}

.status-shipped {
  background: #dbeafe;
  color: #1e40af;
}

.status-processing {
  background: #fef3c7;
  color: #92400e;
}

.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Order Item Row */
.fh-order-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  background: white;
  transition: all 0.2s ease;
}

.fh-order-card:hover {
  border-color: #dee2e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.fh-order-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #eee;
}

.fh-order-header {
  background-color: #fcfcfc;
  border-bottom: 1px solid #f0f0f0;
  padding: 1rem 1.5rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

/* Order Stepper */
.fh-order-stepper {
  position: relative;
  padding-left: 2rem;
}

.fh-order-stepper::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: #e9ecef;
}

.fh-step-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.fh-step-item::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid #dee2e6;
  border-radius: 50%;
  z-index: 1;
}

.fh-step-item.active::after {
  border-color: #C9902A;
  background: #C9902A;
}

.fh-step-item.completed::after {
  border-color: #166534;
  background: #166534;
}

/* Detail Summary */
.fh-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* Enquiry Status Pills */
.fh-badge-enquiry {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.enquiry-new {
  background: rgba(53, 142, 255, 0.1);
  color: #358eff;
  border: 1px solid rgba(53, 142, 255, 0.2);
}

.enquiry-pending {
  background: rgba(201, 144, 42, 0.1);
  color: #C9902A;
  border: 1px solid rgba(201, 144, 42, 0.2);
}

.enquiry-resolved {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Table Styling */
.fh-enquiry-table thead th {
  background-color: #f8f9fa;
  color: #64748b;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem;
  border-top: none;
}

.fh-enquiry-table tbody td {
  padding: 1.25rem 1rem;
  vertical-align: middle;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
}

.fh-enquiry-row:hover {
  background-color: #fcfcfc;
}

/* Priority Dot */
.priority-high {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  display: inline-block;
}

/* Enquiry Chat Bubble */
.fh-chat-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fh-msg {
  max-width: 85%;
  padding: 1.25rem;
  border-radius: 1.25rem;
  position: relative;
}

.fh-msg-user {
  align-self: flex-start;
  background-color: #f8f9fa;
  color: #1a1a1a;
  border-bottom-left-radius: 0.25rem;
}

.fh-msg-admin {
  align-self: flex-end;
  background-color: #1a1a1a;
  color: #ffffff;
  border-bottom-right-radius: 0.25rem;
}

/* Internal Note Style */
.fh-note-card {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
}

.fh-sticky-bottom {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 1.5rem;
  border-top: 1px solid #f0f0f0;
  margin-top: 2rem;
}

/* Star Rating Display */
.fh-star-rating {
  color: #ffb100;
  font-size: 0.85rem;
}

.fh-star-rating .bi-star {
  color: #dee2e6;
}

/* Feedback Card */
.fh-review-card {
  border: 1px solid #f0f0f0;
  border-radius: 1.25rem;
  transition: all 0.2s ease;
  background: white;
}

.fh-review-card:hover {
  border-color: #C9902A;
  transform: translateY(-2px);
}

.fh-entity-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* Helpful Counter */
.fh-helpful-pill {
  background: #f8f9fa;
  color: #64748b;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Digital Pass Ticket Aesthetic */
.fh-pass-ticket {
  background: white;
  border-radius: 1.5rem;
  border: 2px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}

.fh-pass-ticket::before,
.fh-pass-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background-color: #f8f9fa;
  /* Matches page bg */
  border-radius: 50%;
  z-index: 2;
  border: 2px solid #f0f0f0;
}

.fh-pass-ticket::before {
  left: -14px;
  margin-top: -12px;
}

.fh-pass-ticket::after {
  right: -14px;
  margin-top: -12px;
}

.fh-qr-container {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 1rem;
  display: inline-block;
  border: 1px dashed #dee2e6;
}

/* Status Indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.dot-active {
  background-color: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.dot-expired {
  background-color: #ef4444;
}

/* Digital Wallet Card */
.fh-wallet-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.fh-wallet-card::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: rgba(201, 144, 42, 0.1);
  border-radius: 50%;
  z-index: -1;
}

/* Transaction List Styling */
.fh-transaction-item {
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.fh-transaction-item:last-child {
  border-bottom: none;
}

.fh-transaction-item:hover {
  background-color: #fcfcfc;
}

.fh-icon-box {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.1rem;
}

.bg-income {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.bg-expense {
  background-color: rgba(241, 245, 249, 1);
  color: #475569;
}

.text-income {
  color: #16a34a;
  font-weight: 700;
}

.text-expense {
  color: #1a1a1a;
  font-weight: 700;
}

/* Custom Toggle Switch (Orange) */
.fh-switch .form-check-input:checked {
  background-color: #C9902A;
  border-color: #C9902A;
}

.fh-switch .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
  cursor: pointer;
}

/* Settings Row */
.fh-settings-row {
  padding: 1.25rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.fh-settings-row:last-child {
  border-bottom: none;
}

.fh-settings-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.15rem;
}

.fh-settings-desc {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0;
}

/* Workout Log Aesthetic */
.fh-log-card {
  border-left: 4px solid #C9902A;
  /* Brand color indicator */
  transition: transform 0.2s;
}

.fh-log-card:hover {
  transform: translateX(5px);
}

.fh-exercise-row {
  background: #f8f9fa;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.fh-add-exercise-btn {
  border: 2px dashed #dee2e6;
  color: #64748b;
  transition: all 0.2s;
}

.fh-add-exercise-btn:hover {
  border-color: #C9902A;
  color: #C9902A;
  background: rgba(201, 144, 42, 0.05);
}

/* Metric Pill */
.fh-metric-pill {
  background: rgba(26, 26, 26, 0.05);
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* Podium Layout */
.fh-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
}

.fh-podium-item {
  text-align: center;
  flex: 1;
  max-width: 120px;
}

.fh-podium-rank {
  background: white;
  border-radius: 1rem 1rem 0 0;
  position: relative;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1rem;
}

.rank-1 {
  height: 160px;
  border-top: 4px solid #ffb100;
}

.rank-2 {
  height: 130px;
  border-top: 4px solid #94a3b8;
}

.rank-3 {
  height: 110px;
  border-top: 4px solid #cd7f32;
}

.fh-podium-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid white;
  margin-bottom: -30px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Challenge Cards */
.fh-challenge-card {
  border: none;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  border-radius: 1.5rem;
  overflow: hidden;
}

.fh-challenge-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Filter Navigation */
.fh-filter-pills .nav-link {
  background: white;
  border: 1px solid #eee;
  color: #64748b;
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  margin-right: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.fh-filter-pills .nav-link.active {
  background-color: #C9902A;
  color: white;
  border-color: #C9902A;
}

/* Challenge Grid Card */
.fh-challenge-grid-card {
  height: 100%;
  border: none;
  border-radius: 1.5rem;
  transition: transform 0.3s ease;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 280px;
}

.fh-challenge-grid-card:hover {
  transform: translateY(-8px);
}

.fh-challenge-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(26, 26, 26, 0.95) 20%,
      rgba(26, 26, 26, 0.4) 100%);
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Video Thumbnail Styling */
.fh-video-card {
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.fh-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.fh-video-thumb-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
}

.fh-video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.fh-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.fh-video-card:hover .fh-play-overlay {
  opacity: 1;
}

.fh-level-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

/* Cinematic Player */
.fh-player-container {
  background: #000;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.fh-video-placeholder {
  aspect-ratio: 16 / 9;
  background: url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&q=80&w=1200") center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fh-big-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(201, 144, 42, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.fh-big-play-btn:hover {
  transform: scale(1.1);
  background: #C9902A;
}

/* Metadata Pills */
.fh-meta-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

/* Equipment List */
.fh-equip-item {
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: white;
  border: 1px solid #f0f0f0;
  margin-bottom: 0.5rem;
}

/* Calorie & Macro Rings */
.fh-macro-ring {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fh-macro-label {
  position: absolute;
  text-align: center;
}

.fh-calorie-budget {
  background: #1a1a1a;
  color: white;
  border-radius: 2rem;
  padding: 2rem;
  text-align: center;
}

/* Meal List Item */
.fh-meal-card {
  border-left: 4px solid #dee2e6;
  transition: all 0.2s;
}

.fh-meal-card:hover {
  border-left-color: #C9902A;
  background-color: #fff;
}

.fh-meal-icon {
  width: 48px;
  height: 48px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Product Card Styling */
.fh-product-card {
  border: none;
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.fh-product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.fh-product-img-wrapper {
  background-color: #f8f9fa;
  position: relative;
  /* padding: 2rem; */
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 15px;
}

.fh-product-img-wrapper img {
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.fh-badge-product {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Mini Cart Floating Trigger (Optional) */
.fh-cart-floating {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}

/* Image Upload Placeholder */
.fh-upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: 1.25rem;
  padding: 3rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
}

.fh-upload-zone:hover {
  border-color: #C9902A;
  background: rgba(201, 144, 42, 0.05);
}

.fh-upload-icon {
  font-size: 2.5rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

/* Category Selection Pills */
.fh-cat-pill {
  cursor: pointer;
}

.fh-cat-pill input[type="radio"] {
  display: none;
}

.fh-cat-pill label {
  padding: 0.6rem 1.25rem;
  border: 1px solid #dee2e6;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  background: white;
}

.fh-cat-pill input[type="radio"]:checked+label {
  background-color: #1a1a1a;
  color: white;
  border-color: #1a1a1a;
}

/* Split Screen Layout */
.fh-locator-container {
  height: calc(100vh - 100px);
  /* Adjust based on navbar height */
  overflow: hidden;
}

.fh-sidebar-scroll {
  height: 100%;
  overflow-y: auto;
  background: #f8f9fa;
}

/* Branch Card */
.fh-branch-card {
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.fh-branch-card:hover,
.fh-branch-card.active {
  border-color: #C9902A;
  background: #fff;
  transform: translateX(5px);
}

.fh-occupancy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Map Placeholder */
.fh-map-canvas {
  height: 100%;
  background: #e5e7eb;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom Map Marker */
.fh-map-marker {
  background: #1a1a1a;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.75rem;
  position: relative;
}

.fh-map-marker::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #1a1a1a;
}

/* Progress Photo Comparison */
.fh-compare-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fh-compare-box {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.fh-compare-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(26, 26, 26, 0.8);
  color: white;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Coach Message Bubble */
.fh-msg {
  max-width: 85%;
  padding: 1rem;
  border-radius: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.fh-msg-coach {
  background: white;
  border-bottom-left-radius: 0.25rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.fh-msg-user {
  background: #1a1a1a;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 0.25rem;
}

.fh-support-card {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.fh-support-card:hover {
  border-color: #C9902A;
  background: #fff;
  transform: translateY(-5px);
}

.fh-support-icon {
  width: 60px;
  height: 60px;
  background: rgba(201, 144, 42, 0.1);
  color: #C9902A;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Calendar Aesthetics */
.fh-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
}

.fh-calendar-day {
  background: #fff;
  min-height: 120px;
  padding: 10px;
  transition: background 0.2s;
}

.fh-calendar-day.today {
  background: #fff8f6;
}

.fh-calendar-day.other-month {
  background: #f8f9fa;
  color: #cbd5e1;
}

.fh-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.fh-event-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
}

/* Event Types */
.bg-workshop {
  background: #e0f2fe;
  color: #0369a1;
}

/* Blue */
.bg-social {
  background: #fef2f2;
  color: #b91c1c;
}

/* Red */
.bg-seminar {
  background: #f0fdf4;
  color: #15803d;
}

/* Green */
/* Settings Sidebar */
.fh-settings-nav .nav-link {
  color: #64748b;
  font-weight: 600;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.fh-settings-nav .nav-link.active {
  background: white;
  color: #C9902A;
  border-color: #f1f5f9;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.fh-settings-nav .nav-link i {
  width: 20px;
  margin-right: 10px;
}

/* Image Upload Preview */
.fh-profile-banner-upload {
  height: 200px;
  background: #e2e8f0;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.fh-profile-banner-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.fh-upload-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Pricing Card Elevation */
.fh-plan-card {
  border: 2px solid transparent;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  z-index: 1;
}

.fh-plan-card.featured {
  border-color: #C9902A;
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(201, 144, 42, 0.15) !important;
}

.fh-plan-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #C9902A;
  color: white;
  padding: 4px 15px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fh-plan-price {
  font-size: 3rem;
  font-weight: 900;
  color: #1a1a1a;
}

.fh-plan-price span {
  font-size: 1rem;
  color: #64748b;
  font-weight: 600;
}

.fh-feature-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.fh-feature-list li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #475569;
}

.fh-feature-list i {
  color: #10b981;
  /* Success Green */
  margin-right: 10px;
}

/* Staff Table Styles */
.fh-staff-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
}

.fh-skill-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 5px;
  margin-right: 4px;
}

.fh-status-online {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
}

/* Real-time Capacity Meter */
.fh-capacity-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
}

.fh-pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Equipment Status */
.fh-status-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.fh-status-ok {
  background: #dcfce7;
  color: #15803d;
}

.fh-status-repair {
  background: #fee2e2;
  color: #b91c1c;
}

/* Member Status Styling */
.fh-status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.status-active {
  background: #dcfce7;
  color: #15803d;
}

.status-expired {
  background: #fee2e2;
  color: #b91c1c;
}

.status-paused {
  background: #fef9c3;
  color: #854d0e;
}

/* Table Avatars */
.fh-avatar-stack {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
}

.fh-id-badge {
  background: #f1f5f9;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.75rem;
}

/* Job Status Toggle Styling */
.fh-job-type-btn {
  border: 2px solid #f1f5f9;
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  background: white;
}

.fh-job-type-input:checked+.fh-job-type-btn {
  border-color: #C9902A;
  background: rgba(201, 144, 42, 0.05);
  color: #C9902A;
}

.fh-job-type-input {
  display: none;
}

/* Internal Tag Indicator */
.fh-tag-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  background: white;
}

/* Inventory Progress Bars */
.fh-stock-bar {
  height: 8px;
  border-radius: 4px;
  background-color: #f1f5f9;
}

/* Asset Status Badges */
.fh-asset-status {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}

.status-instock {
  background: #dcfce7;
  color: #15803d;
}

.status-low {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #ffedd5;
}

.status-out {
  background: #fee2e2;
  color: #b91c1c;
}

/* Table Thumbnail */
.fh-item-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

/* Access Log Specifics */
.fh-log-row {
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.fh-log-in {
  border-left-color: #10b981;
}

/* Green for Entry */
.fh-log-out {
  border-left-color: #64748b;
}

/* Gray for Exit */
.fh-log-denied {
  border-left-color: #ef4444;
  background: #fff5f5;
}

/* Red for Denied */

.fh-method-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.9rem;
}

.fh-timestamp {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Scanner Camera Viewport */
.fh-scanner-viewport {
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  border: 4px solid #1a1a1a;
}

.fh-scan-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  border: 2px solid rgba(201, 144, 42, 0.5);
  border-radius: 1.5rem;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.fh-scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #C9902A;
  box-shadow: 0 0 15px #C9902A;
  top: 0;
  animation: scan-move 2s linear infinite;
}

@keyframes scan-move {
  0% {
    top: 0%;
  }

  100% {
    top: 100%;
  }
}

/* Toggle Tabs for Access Mode */
.fh-access-mode .nav-pills .nav-link {
  background: #f1f5f9;
  color: #64748b;
  font-weight: 700;
  border-radius: 0.75rem;
  margin: 0 5px;
}

.fh-access-mode .nav-pills .nav-link.active {
  background: #1a1a1a;
  color: white;
}

/* Lead Temperature Indicators */
.fh-lead-hot {
  border-left: 4px solid #ef4444 !important;
}

/* Urgent/High Interest */
.fh-lead-warm {
  border-left: 4px solid #f59e0b !important;
}

/* Interested */
.fh-lead-cold {
  border-left: 4px solid #3b82f6 !important;
}

/* New/Unresponsive */

/* Activity Timeline in Modal */
.fh-timeline {
  border-left: 2px solid #e2e8f0;
  margin-left: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.fh-timeline-item::before {
  content: "";
  position: absolute;
  left: -2.05rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  background: #C9902A;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Workout Progress Styles */
.fh-pr-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  border: 1px solid #2d2d2d;
  transition: transform 0.2s;
}

.fh-pr-card:hover {
  transform: translateY(-5px);
}

.fh-stat-value {
  font-size: 1.75rem;
  font-weight: 900;
  color: #C9902A;
  /* Brand Orange */
}

.fh-pr-badge {
  background: rgba(201, 144, 42, 0.2);
  color: #C9902A;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #C9902A;
}

/* Exercise Entry Rows */
.fh-exercise-row {
  background: white;
  border-radius: 1rem;
  border-left: 5px solid #1a1a1a;
}

.fh-set-input {
  width: 60px;
  text-align: center;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Workout Program Cards */
.fh-chart-card {
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #eef2f6;
  overflow: hidden;
}

.fh-chart-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-5px);
}

.fh-chart-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #1a1a1a;
  color: white;
  font-size: 1.2rem;
}

/* Exercise Order Handle */
.fh-drag-handle {
  cursor: grab;
  color: #cbd5e1;
}

.fh-drag-handle:active {
  cursor: grabbing;
}

/* Financial Indicators */
.fh-amount-in {
  color: #10b981;
  font-weight: 800;
}

.fh-amount-out {
  color: #ef4444;
  font-weight: 800;
}

.fh-finance-card {
  border-radius: 1.5rem;
  border: 1px solid #f1f5f9;
}

.fh-trend-up {
  color: #10b981;
  font-size: 0.75rem;
}

.fh-trend-down {
  color: #ef4444;
  font-size: 0.75rem;
}

/* Category Icons */
.fh-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Hero Section --- */
.about-hero {
  padding: 160px 0 120px;
  background-attachment: fixed !important;
  /* Parallax effect */
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -1.5px;
}

/* --- Mission Section (Asymmetrical) --- */
.mission-container {
  position: relative;
}

.mission-img-wrap::after {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100%;
  height: 100%;
  background: var(--fh-orange);
  z-index: -1;
  border-radius: 20px;
  opacity: 0.1;
}

.experience-badge {
  position: absolute;
  bottom: 30px;
  right: -10px;
  background: var(--fh-orange);
  color: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(230, 57, 70, 0.4);
  border: 4px solid #fff;
}

/* --- Floating Stats --- */
.stats-card-wrap {
  margin-top: -60px;
  position: relative;
  z-index: 10;
}

.glass-stats {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.stat-number {
  font-size: 48px;
  background: linear-gradient(135deg, var(--fh-orange), var(--fh-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* --- Value Items --- */
.value-card {
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #edf2f7;
  transition: 0.3s;
}

.value-card:hover {
  border-color: var(--fh-orange);
  transform: translateY(-5px);
}

.icon-box {
  width: 60px;
  height: 60px;
  background: rgba(230, 57, 70, 0.1);
  color: var(--fh-orange);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Team Card Pro --- */
.team-card {
  background: transparent;
  border: none;
}

.team-img-container {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 10px;
  /* aspect-ratio: 4/5; */
}

.team-img-container img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  object-fit: cover;
}

.team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--brand-navy) 0%, transparent 100%);
  opacity: 0;
  transition: 0.4s;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  justify-content: center;
}

.team-card:hover .team-overlay {
  opacity: 1;
}

.team-card:hover img {
  transform: scale(1.1);
}

.social-btn {
  width: 45px;
  height: 45px;
  background: #fff;
  color: var(--brand-navy);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s;
}

.social-btn:hover {
  background: var(--fh-orange);
  color: #fff;
  transform: translateY(-5px);
}

.faq-hero {
  padding: 120px 0;
  background-attachment: fixed;
}

.search-container {
  max-width: 600px;
  margin: 30px auto 0;
  position: relative;
}

.search-container input {
  padding: 18px 30px 18px 60px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  font-size: 16px;
}

.search-container i {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fh-orange);
  font-size: 18px;
}

/* --- Category Tabs --- */
.faq-tabs {
  border-bottom: none;
}

.faq-tabs .nav-link {
  background: #fff;
  color: var(--faq-navy);
  font-weight: 600;
  padding: 20px 30px;
  border-radius: 16px !important;
  border: 1px solid #edf2f7;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.faq-tabs .nav-link i {
  font-size: 24px;
  opacity: 0.7;
}

.faq-tabs .nav-link.active {
  background: #fff !important;
  color: var(--fh-orange) !important;
  border-color: var(--fh-orange);
  box-shadow: 0 10px 20px rgba(230, 57, 70, 0.1);
  transform: translateY(-5px);
}

.faq-tabs .nav-link.active i {
  opacity: 1;
}

/* --- Advanced Accordion --- */
.custom-faq .accordion-item {
  border: 1px solid #edf2f7 !important;
  transition: 0.3s;
}

.custom-faq .accordion-item:hover {
  border-color: var(--fh-orange) !important;
}

.custom-faq .accordion-button {
  padding: 25px;
  font-weight: 700;
  color: var(--faq-navy);
  transition: 0.3s;
}

.custom-faq .accordion-button:not(.collapsed) {
  color: var(--fh-orange);
  background: #fff;
  border-left: 4px solid var(--fh-orange);
}

.custom-faq .accordion-body {
  padding: 20px 25px 30px 30px;
  font-size: 15px;
  color: #64748b;
}

/* --- Contact Box --- */
.contact-card {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  position: relative;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: var(--faq-red);
  opacity: 0.03;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

/* --- Hero Section & Map --- */
.contact-hero-wrap {
  position: relative;
  background: #0f172a;
  /* padding-top: 80px; */
}

.google-map-container {
  height: 400px;
  width: 100%;
  filter: grayscale(1) invert(0.9) contrast(1.2);
  /* Premium Dark Map Look */
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

.google-map-container:hover {
  opacity: 0.9;
}

/* --- Sidebar Info Card --- */
.contact-info-wrap {
  background: linear-gradient(165deg, var(--brand-navy) 0%, #050a14 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
  margin-top: -100px;
  /* Overlap with map */
  padding: 30px;
}

.contact-info-wrap .social-icon {
  color: #fff;
  font-size: 18px;
  opacity: 0.7;
  transition: 0.3s;
  margin-right: 15px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.pulse {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(34, 197, 94, 0);
  }
}

/* --- Form Styling --- */
.form-label {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  color: var(--brand-navy);
  margin-bottom: 8px;
}

.contact-form-wrap .form-control,
.contact-form-wrap .form-select {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e2e8f0;
}

.contact-form-wrap .form-control:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.submit-btn {
  background: var(--fh-orange);
  color: white;
  border: none;
  padding: 16px 40px;
  border-radius: 12px;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 25px rgba(230, 57, 70, 0.3);
}

.submit-btn:hover {
  background: #c92c37;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(230, 57, 70, 0.4);
  color: white;
}

/* --- Billing Switcher --- */
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
  background-color: var(--fh-orange);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

/* --- Pricing Cards --- */
.pricing-card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: #ffffff;
}

.pricing-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Premium Shimmer Effect */
.pricing-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transform: skewX(-25deg);
  transition: 0.7s;
}

.pricing-card:hover::after {
  left: 125%;
}

.popular-badge {
  position: absolute;
  top: 20px;
  right: -35px;
  background: var(--fh-orange);
  color: white;
  padding: 5px 40px;
  transform: rotate(45deg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: #b91c1c;
}

/* --- List Styling --- */
.plan-features li {
  font-size: 14.5px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  color: #444;
}

.plan-features li i {
  font-size: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}

.plan-features li.disabled {
  color: #bbb;
}

.pricing-card .btn-main {
  background: #c92a35;
}

/* --- Hero Section --- */
.pricing-hero {
  background: radial-gradient(circle at top right, #2b4a77, var(--deep-blue));
  padding: 120px 0;
}

.pricing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
}

.billing-toggle-container {
  display: inline-flex;
  align-items: center;
  background: var(--glass-bg);
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.btn-custom {
  padding: 16px 24px;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  text-align: center;
}

.btn-main {
  background: var(--fh-orange);
  color: white !important;
  box-shadow: 0 8px 20px rgba(230, 57, 70, 0.3);
}

.btn-main:hover {
  background: #f14654;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(230, 57, 70, 0.4);
}

.btn-alt {
  background: #f8f9fa;
  color: var(--dark-navy) !important;
  border: 1px solid #dee2e6;
}

.btn-alt:hover {
  background: #eee;
  border-color: #ccc;
}

.legal-area {
  background-color: #f8fafc;
  line-height: 1.8;
  color: var(--legal-text);
}

/* --- Sidebar Styling --- */
.legal-nav li a {
  display: block;
  padding: 12px 15px;
  color: var(--legal-text);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  margin-bottom: 5px;
  border-left: 3px solid transparent;
}

.legal-nav li a:hover {
  background: rgba(29, 53, 87, 0.05);
  color: var(--legal-primary);
}

/* Active state for Scrollspy */
.legal-nav li a.active {
  background: white;
  color: var(--legal-accent);
  border-left-color: var(--legal-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- Content Styling --- */
.legal-content-card {
  border: 1px solid #e2e8f0;
}

.legal-section h4 {
  color: var(--legal-primary);
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Visual accent for section headers */
.legal-section h4::before {
  content: "";
  width: 4px;
  height: 24px;
  background: var(--legal-accent);
  border-radius: 10px;
}

.legal-section p {
  font-size: 16px;
  margin-bottom: 20px;
}

.data-sharing-list {
  background: #f1f5f9;
  padding: 25px;
  border-radius: 12px;
  list-style: none;
}

.data-sharing-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.data-sharing-list li i {
  color: var(--legal-accent);
  margin-top: 5px;
}

/* --- Smooth Scrolling --- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

@media (max-width: 991px) {
  .legal-sidebar {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 30px;
  }
}

.fh-modal-content {
  border: none;
  border-radius: 1.25rem;
  padding: 1rem;
}

/* Gradient Icon */
.fh-icon-box {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, #C9902A 0%, #dba756 100%);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
}

/* Icon Inputs */
.fh-input-group {
  position: relative;
}

.fh-input-group i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 0.9rem;
  pointer-events: none;
}

.fh-input-group .form-control {
  padding-left: 2.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid #dee2e6;
  font-size: 0.875rem;
}

.fh-input-group .form-control:focus {
  border-color: #C9902A;
  box-shadow: none;
}

/* Action Button */
.btn-signin {
  background-color: #C9902A;
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

.btn-signin:hover {
  background-color: #a87520;
  color: white;
}

#searchModal .modal-content {
  background-color: rgba(20, 20, 20, 0.95) !important;
}

#searchModal #searchInput::placeholder {
  color: #6c757d;
  font-weight: 300;
}

#searchModal .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

#searchModal .btn-outline-secondary:hover {
  background-color: #C9902A;
  /* Your NidoFit Theme Color */
  border-color: #C9902A;
  color: #fff;
}

/* Modal backdrop blur */
.modal-backdrop.show {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.7);
}

/* Filter Pill Styles */
.btn-filter {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 6px 16px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
}

.btn-filter:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-filter.active {
  background: #C9902A;
  /* NidoFit Orange */
  color: #fff;
  border-color: #C9902A;
  box-shadow: 0 4px 12px rgba(201, 144, 42, 0.3);
}

/* Ensure the AJAX container fills the available height */
#cardtDrawer {
  display: flex;
  flex-direction: column;
  height: calc(100% - 70px);
  /* Subtracting approximate header height */
  overflow: hidden;
}

/* Force the body to grow and push the footer down */
#cardtDrawer .offcanvas-body {
  flex-grow: 1;
  overflow-y: auto;
  /* Scroll only the items, not the footer */
}

/* Ensure footer stays at the very bottom */
#cardtDrawer .offcanvas-footer {
  flex-shrink: 0;
  background: #fff;
  /* Match your background */
  z-index: 10;
}

/* Hero Section Base */
.fh-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  overflow: hidden;
  padding: 100px 0 60px;
  /* Padding for fixed header */
}

.fh-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 1;
}

.fh-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient ensures text is readable on the left, image visible on the right */
  background: none;
  z-index: 2;
}

.fh-hero .container {
  position: relative;
  z-index: 3;
}

/* Typography & Elements */
.fh-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 144, 42, 0.1);
  color: #C9902A;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(201, 144, 42, 0.2);
}

.fh-hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin-bottom: 1.5rem;
}

.fh-gradient-text {
  background: linear-gradient(135deg, #C9902A, #dba756);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stats */
.fh-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.fh-stat-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Buttons */
.fh-btn-primary {
  background: #C9902A;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.fh-btn-primary:hover {
  background: #a87520;
  transform: translateY(-2px);
  color: #fff;
}

/* Features Bar */
.fh-features-bar {
  border-top: 1px solid #f0f0f0;
  background-color: #ffffff;
}

.fh-feature-icon-box {
  width: 45px;
  height: 45px;
  background: rgba(201, 144, 42, 0.1);
  color: #C9902A;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fh-hero .col-lg-8>* {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.fh-hero .col-lg-8>*:nth-child(1) {
  animation-delay: 0.1s;
}

.fh-hero .col-lg-8>*:nth-child(2) {
  animation-delay: 0.2s;
}

.fh-hero .col-lg-8>*:nth-child(3) {
  animation-delay: 0.3s;
}

.fh-hero .col-lg-8>*:nth-child(4) {
  animation-delay: 0.4s;
}

@media (max-width: 991.98px) {
  .fh-hero {
    text-align: center;
    margin-top: -15px;
  }

  .fh-hero-overlay {
    background: rgba(0, 0, 0, 0.6);
    /* Darken for mobile readability */
  }

  .fh-hero .d-flex {
    justify-content: center;
  }
}

.fh-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  overflow: hidden;
  /* Adjust padding for mobile vs desktop */
  padding-top: 70px;
  /* Mobile header height */
  padding-bottom: 60px;
}

@media (min-width: 992px) {
  .fh-hero {
    padding-top: 100px;
    /* Desktop header height */
  }
}

/* Remove potential margin-top from the first child of hero */
.fh-hero .container {
  margin-top: 0 !important;
}

.fh-hero-overlay {
  background: none !important;
}


.ai-content {
  font-size: 15px;
  line-height: 1.8;
}

.ai-content strong {
  font-weight: 700;
}

.custom-toast {
  min-width: 280px;
  border-radius: 12px;
  color: #fff;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-weight: 500;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.custom-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.custom-toast.success {
  background: #198754;
}

.custom-toast.error {
  background: #dc3545;
}



/** passes system **/
/* ---- hero ---- */
.fp-hero {
  background: linear-gradient(135deg, #0f172a 0%, #2d2d2d 60%, #1a1a1a 100%);
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}

.fp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201, 144, 42, .15) 0%, transparent 65%);
  pointer-events: none;
}

/* ---- pass card (ticket look) ---- */
.fp-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  transition: transform .25s, box-shadow .25s;
  position: relative;
}

.fp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}

.fp-card-header {
  padding: 24px 24px 20px;
  color: #fff;
}

.fp-card-body {
  background: #fff;
  padding: 20px 24px;
}

.fp-card-footer {
  background: #f8fafc;
  padding: 14px 24px;
  border-top: 1px solid #f0f0f0;
}

/* gradient by status */
.fp-grad-active {
  background: linear-gradient(135deg, #C9902A 0%, #e53e1a 100%);
}

.fp-grad-exhausted {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.fp-grad-expired {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

/* token ring */
.fp-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.fp-ring-wrap svg {
  transform: rotate(-90deg);
}

.fp-ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.fp-ring-val small {
  font-size: 9px;
  font-weight: 500;
  opacity: .75;
}

/* qr */
.fp-qr {
  border-radius: 12px;
  border: 3px solid #f0f0f0;
}

/* store card */
.fp-store-card {
  border-radius: 16px;
  border: 2px solid #f0f0f0;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  height: 100%;
}

.fp-store-card:hover,
.fp-store-card.popular {
  border-color: var(--fh-orange, #C9902A);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(201, 144, 42, .15);
}

.fp-store-card.popular {
  background: #fffaf7;
}

/* gym token badge */
.fp-gym-tier-1 {
  background: #f0fdf4;
  color: #16a34a;
}

.fp-gym-tier-2 {
  background: #eff6ff;
  color: #2563eb;
}

.fp-gym-tier-3 {
  background: #fef9c3;
  color: #ca8a04;
}

.fp-gym-tier-4 {
  background: #fff7ed;
  color: #ea580c;
}

.fp-gym-tier-5 {
  background: #fdf2f8;
  color: #9d174d;
}

/* history */
.fp-log-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.fp-log-row:last-child {
  border-bottom: none;
}

.fp-log-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* nav tabs */
.fp-tab-nav .nav-link {
  color: #64748b;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  padding: 10px 20px;
}

.fp-tab-nav .nav-link.active {
  color: #C9902A;
  border-bottom: 3px solid #C9902A;
  background: none;
}

/* ═══════════════════════════════════════════════════
   HERO — ANIMATED LIFE (orbs, marquee, parallax)
═══════════════════════════════════════════════════ */

/* Smooth parallax on bg image */
.fh-hero-img {
  transition: transform 0.18s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  will-change: transform;
}

/* ── Pulsing glow badge at top ── */
.fh-badge {
  position: relative;
  animation: fh-badge-pulse 3s ease-in-out infinite;
}
@keyframes fh-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,144,42,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(201,144,42,0); }
}

/* ── Floating glowing orbs ── */
.fh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.fh-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(201,144,42,0.20) 0%, transparent 70%);
  top: -100px; right: 12%;
  animation: fh-orb-float 9s ease-in-out infinite;
}
.fh-orb-2 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(201,144,42,0.13) 0%, transparent 70%);
  bottom: 8%; right: 32%;
  animation: fh-orb-float 12s ease-in-out infinite reverse;
}
.fh-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,160,100,0.11) 0%, transparent 70%);
  top: 30%; right: 3%;
  animation: fh-orb-float 7s ease-in-out infinite 2.5s;
}
@keyframes fh-orb-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-28px) scale(1.06); }
}

/* ── Feature badges marquee ── */
.fh-feat-marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  width: calc(100% + 30px);
  margin-left: -15px;
}
.fh-feat-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: fh-marquee-scroll 30s linear infinite;
}
.fh-feat-marquee-wrap:hover .fh-feat-track {
  animation-play-state: paused;
}
@keyframes fh-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.fh-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 40px;
  white-space: nowrap;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.fh-feat-pill:hover {
  background: rgba(201,144,42,0.06);
  border-color: rgba(201,144,42,0.35);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(201,144,42,0.12);
}
.fh-feat-pill i {
  color: #C9902A;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.fh-feat-pill-label {
  display: block;
  color: #1a1a1a;
  font-size: 0.77rem;
  font-weight: 600;
  line-height: 1.2;
}
.fh-feat-pill-sub {
  display: block;
  color: #64748b;
  font-size: 0.63rem;
  line-height: 1.2;
}

/* ── Stat items hover ── */
.fh-stat-item {
  transition: transform 0.25s ease;
  cursor: default;
}
.fh-stat-item:hover {
  transform: translateY(-4px);
}
.fh-stat-item:hover .fh-stat-value {
  color: #C9902A;
  transition: color 0.25s;
}

/* ── Feature bar item hover ── */
.fh-features-bar .fh-feat-bar-item {
  transition: transform 0.25s ease;
  cursor: default;
}
.fh-features-bar .fh-feat-bar-item:hover {
  transform: translateY(-4px);
}
.fh-features-bar .fh-feat-bar-item:hover .fh-feature-icon-box {
  background: rgba(201,144,42,0.22);
  box-shadow: 0 0 18px rgba(201,144,42,0.28);
  transition: background 0.25s, box-shadow 0.25s;
}

/* ── Counter animate ── */
@keyframes fh-count-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}
.fh-stat-value.count-animated {
  animation: fh-count-pop 0.6s ease-out forwards;
}

/* ── Mobile: disable parallax & orbs ── */
@media (max-width: 991.98px) {
  .fh-orb { display: none; }
  .fh-feat-marquee-wrap { margin-left: -12px; width: calc(100% + 24px); }
}

/* ═══════════════════════════════════════════════════
   GYM PASSPORT SECTION
═══════════════════════════════════════════════════ */
.fh-passport-section {
  background: #f8f9fa;
}
.fh-passport-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(201,144,42,.07) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(99,102,241,.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Eyebrow label ── */
.fh-passport-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,144,42,.1);
  color: #C9902A;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid rgba(201,144,42,.2);
}

/* ── Passport cards ── */
.fh-passport-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 32px;
  border: 1.5px solid #e9ecef;
  overflow: hidden;
  cursor: default;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.fh-passport-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.1);
  border-color: rgba(201,144,42,.35);
}

/* Shine sweep on hover */
.fh-pcard-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  transition: left .55s ease;
  pointer-events: none;
}
.fh-passport-card:hover .fh-pcard-shine {
  left: 150%;
}

/* ── International card accent ── */
.fh-pcard-international {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-color: rgba(99,102,241,.3);
  color: #fff;
}
.fh-pcard-international:hover {
  border-color: rgba(99,102,241,.6);
  box-shadow: 0 24px 60px rgba(99,102,241,.2);
}
.fh-pcard-international h3,
.fh-pcard-international p {
  color: #e2e8f0;
}
.fh-pcard-international .text-muted {
  color: rgba(255,255,255,.55) !important;
}

/* ── Icons ── */
.fh-pcard-icon {
  width: 56px; height: 56px;
  background: rgba(201,144,42,.12);
  color: #C9902A;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform .3s ease, background .3s ease;
}
.fh-passport-card:hover .fh-pcard-icon {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(201,144,42,.2);
}
.fh-pcard-icon-intl {
  background: rgba(99,102,241,.15);
  color: #818cf8;
}
.fh-pcard-international:hover .fh-pcard-icon-intl {
  background: rgba(99,102,241,.3);
}

/* ── Badges ── */
.fh-pcard-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: #fff3ed;
  color: #C9902A;
  border: 1px solid rgba(201,144,42,.2);
}
.fh-pcard-badge-intl {
  background: rgba(99,102,241,.15);
  color: #818cf8;
  border-color: rgba(99,102,241,.25);
}

/* ── Feature list ── */
.fh-passport-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: .875rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.fh-passport-features li:last-child { border-bottom: none; }
.fh-passport-features li .bi-check-circle-fill { color: #22c55e; font-size: 1rem; flex-shrink: 0; }
.fh-pcard-international .fh-passport-features li { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.06); }

/* ── Buttons ── */
.fh-pcard-btn {
  background: #C9902A;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: .9rem;
  transition: background .25s, transform .2s, box-shadow .25s;
}
.fh-pcard-btn:hover {
  background: #a87520;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,144,42,.35);
}
.fh-pcard-btn-intl {
  background: linear-gradient(135deg, #6366f1, #818cf8);
}
.fh-pcard-btn-intl:hover {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
}

/* ── Trust pills ── */
.fh-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* ═══════════════════════════════════════════════════
   PASSPORT WELCOME / ONBOARDING PAGE
═══════════════════════════════════════════════════ */
.fh-welcome-page {
  background: linear-gradient(135deg, #0f172a 0%, #1e1a3f 60%, #0f172a 100%);
  min-height: 100vh;
  padding-top: 80px;
}
.fh-welcome-checkmark {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  animation: fh-pop-in .6s cubic-bezier(.22,.61,.36,1) both;
  box-shadow: 0 0 0 0 rgba(34,197,94,.4);
  animation: fh-pop-in .5s ease both, fh-ring-pulse 2s ease 1s infinite;
}
@keyframes fh-pop-in {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes fh-ring-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  50%     { box-shadow: 0 0 0 16px rgba(34,197,94,0); }
}

.fh-onboard-step {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px 24px;
  transition: border-color .3s, transform .3s, background .3s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}
.fh-onboard-step:hover {
  border-color: rgba(201,144,42,.5);
  background: rgba(201,144,42,.07);
  transform: translateY(-4px);
  color: inherit;
  text-decoration: none;
}
.fh-onboard-step.step-done {
  border-color: rgba(34,197,94,.4);
  background: rgba(34,197,94,.06);
  cursor: default;
}
.fh-onboard-step.step-done:hover { transform: none; }
.fh-onboard-step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  background: rgba(255,255,255,.07);
  color: #94a3b8;
  flex-shrink: 0;
  transition: background .3s;
}
.fh-onboard-step.step-done .fh-onboard-step-num {
  background: rgba(34,197,94,.2);
  color: #22c55e;
}
.fh-onboard-step:not(.step-done):hover .fh-onboard-step-num {
  background: rgba(201,144,42,.2);
  color: #C9902A;
}

/* ═══════════════════════════════════════════════════
   SCROLL-REVEAL SYSTEM
═══════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal="fade-up"]    { transform: translateY(36px); }
[data-reveal="fade-down"]  { transform: translateY(-24px); }
[data-reveal="fade-left"]  { transform: translateX(-36px); }
[data-reveal="fade-right"] { transform: translateX(36px); }
[data-reveal="zoom-in"]    { transform: scale(0.90); }
[data-reveal="zoom-up"]    { transform: scale(0.92) translateY(24px); }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* Auto-stagger cards inside a grid row */
.row [data-reveal]:nth-child(2) { transition-delay: 0.12s; }
.row [data-reveal]:nth-child(3) { transition-delay: 0.24s; }
.row [data-reveal]:nth-child(4) { transition-delay: 0.36s; }
.row [data-reveal]:nth-child(5) { transition-delay: 0.48s; }
.row [data-reveal]:nth-child(6) { transition-delay: 0.60s; }

/* Explicit stagger delays */
[data-delay="100"]  { transition-delay: 0.10s; }
[data-delay="150"]  { transition-delay: 0.15s; }
[data-delay="200"]  { transition-delay: 0.20s; }
[data-delay="250"]  { transition-delay: 0.25s; }
[data-delay="300"]  { transition-delay: 0.30s; }
[data-delay="350"]  { transition-delay: 0.35s; }
[data-delay="400"]  { transition-delay: 0.40s; }
[data-delay="500"]  { transition-delay: 0.50s; }
[data-delay="600"]  { transition-delay: 0.60s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Section eyebrow label animation helper ── */
.fh-section-eyebrow {
  display: inline-block;
}

/* ── Header scroll state: handled via .fh-header.scrolled .container (see floating pill rules near top) ── */

/* Dropdown nav links: reuse the underline pseudo, kill Bootstrap's caret
   nub (the stray gold dot that showed under "More"). Use an explicit
   chevron icon in the markup for the affordance instead. */
.fh-nav-link.dropdown-toggle::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 12px;
  left: 50%;
  right: 50%;
  top: auto;
  width: auto;
  height: 3px;
  border: 0;
  margin: 0;
  vertical-align: baseline;
  background: var(--nf-gold-2);
  border-radius: 99px;
  transition: left 0.25s ease, right 0.25s ease;
}
.fh-nav-link.dropdown-toggle:hover::after,
.fh-nav-link.dropdown-toggle.active::after,
.fh-nav-link.dropdown-toggle.show::after {
  left: 1rem;
  right: 1rem;
}
.fh-nav-link.dropdown-toggle .bi-chevron-down {
  font-size: 10px;
  opacity: .5;
  margin-left: 3px;
  transition: transform .2s ease;
}
.fh-nav-link.dropdown-toggle.show .bi-chevron-down {
  transform: rotate(180deg);
}

/* ── Page transition fade ── */
body {
  animation: fh-page-in 0.35s ease both;
}
@keyframes fh-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Loading skeleton shimmer (global) ── */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer-move 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer-move { to { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════
   gym11-style ADMIN SIDEBAR (dark, gold-accent) — shared by
   dashboard/users/gymlist/etc via app/views/user/sidebar.php.
   Uses `sticky` (not `fixed`) so it drops into the existing
   Bootstrap col-lg-3 grid column without touching every
   admin page's main-content layout.
═══════════════════════════════════════════════════════════ */
.adm-sidebar {
  width: 100%;
  background: #0a0e18;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
}
.adm-sidebar-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.adm-sidebar-scroll::-webkit-scrollbar { width: 3px; }
.adm-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

.adm-logo { display:flex; align-items:center; gap:10px; padding:20px 20px 18px; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; flex-shrink:0; }
.adm-logo-icon { width:34px; height:34px; background:linear-gradient(135deg,#C9902A,#e8a935); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex-shrink:0; }
.adm-logo-name { font-size:16px; font-weight:900; color:#fff; letter-spacing:-.3px; line-height:1; }
.adm-logo-sub { font-size:10px; color:rgba(255,255,255,.3); font-weight:500; margin-top:2px; }

.adm-nav { padding:12px 10px; flex:1; }
.adm-nav-label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.22); padding:14px 10px 6px; }
.adm-nav-item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; color:rgba(255,255,255,.5); text-decoration:none; font-size:13px; font-weight:500; margin-bottom:2px; transition:background .15s,color .15s; position:relative; }
.adm-nav-item:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); }
.adm-nav-item.active { background:rgba(201,144,42,.13); color:#C9902A; font-weight:700; }
.adm-nav-item.active::before { content:''; position:absolute; left:0; top:26%; bottom:26%; width:3px; background:#C9902A; border-radius:0 2px 2px 0; }
.adm-nav-item i { font-size:15px; flex-shrink:0; width:18px; text-align:center; }
.adm-nav-badge { margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:rgba(201,144,42,.18); color:#C9902A; }
.adm-nav-badge-red { background:rgba(239,68,68,.15); color:#ef4444; }
.adm-nav-sep { height:1px; background:rgba(255,255,255,.06); margin:8px 2px; }

.adm-user { display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.adm-user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#C9902A,#e8a935); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden; }
.adm-user-avatar img { width:100%; height:100%; object-fit:cover; }
.adm-user-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.8); }
.adm-user-role { font-size:10px; color:rgba(255,255,255,.32); margin-top:1px; }
.adm-logout { margin-left:auto; color:rgba(255,255,255,.3); text-decoration:none; font-size:16px; transition:color .15s; }
.adm-logout:hover { color:#ef4444; }

@media (max-width: 991px) {
  .adm-sidebar { position:static; max-height:none; }
}

/* ═══════════════════════════════════════════════════════════
   gym11-style SOCIAL/COMMUNITY left panel — social/feeds.php only
   (profile mini-card + Feed/Reels/Photos/Saved nav + trending)
═══════════════════════════════════════════════════════════ */
.soc-left { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }
.soc-card { background: #fff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

.soc-profile-cover { height: 72px; background: linear-gradient(135deg, #0a0e18 0%, #1a2d4e 50%, #C9902A 100%); position: relative; }
.soc-profile-av-wrap { position: absolute; bottom: -22px; left: 16px; }
.soc-profile-av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #C9902A, #e8a935); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #fff; border: 3px solid #fff; overflow: hidden; }
.soc-profile-av img { width: 100%; height: 100%; object-fit: cover; }
.soc-profile-info { padding: 28px 16px 14px; }
.soc-profile-name { font-size: 15px; font-weight: 800; color: #111; line-height: 1; }
.soc-profile-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.soc-profile-stats { display: flex; gap: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.soc-ps-item { flex: 1; text-align: center; }
.soc-ps-val { font-size: 16px; font-weight: 900; color: #111; line-height: 1; }
.soc-ps-lbl { font-size: 10px; color: #6b7280; margin-top: 2px; }
.soc-ps-sep { width: 1px; background: #f3f4f6; margin: 0 4px; }

.soc-nav { padding: 8px; }
.soc-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; transition: background .15s, color .15s; text-decoration: none; margin-bottom: 2px; border: none; background: transparent; width: 100%; text-align: left; }
.soc-nav-item i { font-size: 16px; width: 18px; text-align: center; }
.soc-nav-item:hover { background: #f9fafb; color: #374151; }
.soc-nav-item.active { background: rgba(201,144,42,.1); color: #C9902A; font-weight: 700; }
.soc-nav-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; background: #fee2e2; color: #ef4444; }

.soc-card-hd { padding: 14px 16px 0; font-size: 13px; font-weight: 800; color: #111; }
.soc-hashtag-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background .1s; text-decoration: none; }
.soc-hashtag-row:last-child { border-bottom: none; }
.soc-hashtag-row:hover { background: #fafafa; }
.soc-ht-name { font-size: 13px; font-weight: 700; color: #111; }
.soc-ht-count { font-size: 11px; color: #6b7280; }

/* ═══════════════════════════════════════════════════════════
   Gym-owner profile — Trainers & Services management cards
   (gyms/tabs/trainer_items.php + services_list.php; injected
   via AJAX so the styles must live here, not inline)
═══════════════════════════════════════════════════════════ */
.gp-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s; }
.gp-card:hover { border-color:rgba(201,144,42,.35); box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-3px); }
.gp-card-media { position:relative; height:172px; background:#f3f4f6; overflow:hidden; }
.gp-card-media img { width:100%; height:100%; object-fit:cover; }
.gp-card-tag { position:absolute; top:10px; right:10px; background:#C9902A; color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; box-shadow:0 2px 8px rgba(201,144,42,.35); }
.gp-card-body { padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.gp-card-title { font-size:15px; font-weight:800; color:#0f172a; margin:0 0 2px; }
.gp-card-sub { font-size:12.5px; color:#64748b; }
.gp-card-rate { font-size:13px; font-weight:800; color:#C9902A; margin-top:8px; }
.gp-card-desc { font-size:12.5px; color:#64748b; margin-top:6px; line-height:1.5; flex:1; }
.gp-icon-badge { width:44px; height:44px; border-radius:12px; background:rgba(201,144,42,.12); color:#C9902A; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; flex-shrink:0; }
.gp-card-actions { display:flex; gap:8px; margin-top:14px; }
.gp-btn { flex:1; border:1px solid transparent; border-radius:9px; padding:6px 10px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:5px; text-decoration:none; }
.gp-btn-edit { background:#fff; border-color:#C9902A; color:#C9902A; }
.gp-btn-edit:hover { background:#C9902A; color:#fff; }
.gp-btn-del { background:#fff; border-color:#fecaca; color:#dc2626; }
.gp-btn-del:hover { background:#dc2626; border-color:#dc2626; color:#fff; }
.gp-empty { text-align:center; color:#94a3b8; padding:48px 16px; }
.gp-empty i { font-size:2.4rem; display:block; margin-bottom:10px; opacity:.55; }

/* ═══════════════════════════════════════════════════════════
   gym11-style ADMIN CONTENT DESIGN SYSTEM — header, stat cards,
   tables, badges, buttons, filters, pagination. Shared by every
   admin/*.php page (dashboard, users, gymlist, etc). Pairs with
   the .adm-sidebar already defined above.
═══════════════════════════════════════════════════════════ */
:root {
  --adm-brand: #C9902A;
  --adm-brand-light: rgba(201,144,42,.1);
  --adm-content-bg: #f3f4f8;
  --adm-card: #ffffff;
  --adm-text: #111827;
  --adm-muted: #6b7280;
  --adm-border: #e5e7eb;
  --adm-radius: 14px;
  --adm-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
}

/* ── Page wrapper / header ── */
.adm-page-wrap { background: var(--adm-content-bg); border-radius: 16px; margin: -1.5rem -0.75rem; padding: 0; }
.adm-header { background: var(--adm-card); border-bottom: 1px solid var(--adm-border); display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 16px; flex-wrap: wrap; border-radius: 16px 16px 0 0; }
.adm-page-title { font-size: 18px; font-weight: 800; color: var(--adm-text); margin: 0; line-height: 1; }
.adm-breadcrumb { font-size: 12px; color: var(--adm-muted); margin-top: 3px; }
.adm-breadcrumb a { color: var(--adm-muted); text-decoration: none; }
.adm-breadcrumb a:hover { color: var(--adm-brand); }
.adm-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.adm-header-actions { display: flex; align-items: center; gap: 8px; }

/* ── Content area ── */
.adm-content { padding: 24px; }
.adm-section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.adm-section-title { font-size: 16px; font-weight: 800; color: var(--adm-text); margin: 0; }
.adm-section-sub { font-size: 12px; color: var(--adm-muted); margin-top: 3px; }

/* ── Stat cards ── */
.adm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.adm-stat-card { background: var(--adm-card); border-radius: var(--adm-radius); padding: 18px 18px 14px; border: 1px solid var(--adm-border); box-shadow: var(--adm-shadow); position: relative; overflow: hidden; }
.adm-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--adm-radius) var(--adm-radius) 0 0; }
.adm-stat-card-gold::before { background: linear-gradient(90deg, var(--adm-brand), #e8a935); }
.adm-stat-card-blue::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.adm-stat-card-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.adm-stat-card-green::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.adm-stat-card-orange::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.adm-stat-card-red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.adm-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 10px; }
.adm-stat-icon-gold { background: rgba(201,144,42,.12); color: var(--adm-brand); }
.adm-stat-icon-blue { background: #dbeafe; color: #3b82f6; }
.adm-stat-icon-purple { background: #ede9fe; color: #8b5cf6; }
.adm-stat-icon-green { background: #dcfce7; color: #22c55e; }
.adm-stat-icon-orange { background: #ffedd5; color: #f97316; }
.adm-stat-icon-red { background: #fee2e2; color: #ef4444; }
.adm-stat-val { font-size: 22px; font-weight: 900; color: var(--adm-text); letter-spacing: -.5px; line-height: 1; margin-bottom: 3px; }
.adm-stat-lbl { font-size: 11px; color: var(--adm-muted); font-weight: 500; }
.adm-stat-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; margin-top: 8px; }
.adm-delta-up { color: #22c55e; }
.adm-delta-down { color: #ef4444; }
.adm-delta-warn { color: #f59e0b; }

/* ── Generic card ── */
.adm-card { background: var(--adm-card); border-radius: var(--adm-radius); border: 1px solid var(--adm-border); box-shadow: var(--adm-shadow); }
.adm-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--adm-border); flex-wrap: wrap; gap: 10px; }
.adm-card-title { font-size: 14px; font-weight: 800; color: var(--adm-text); margin: 0; }
.adm-card-sub { font-size: 12px; color: var(--adm-muted); margin-top: 2px; }
.adm-card-body { padding: 20px; }

/* ── Filter bar ── */
.adm-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.adm-filter-wrap { position: relative; }
.adm-filter-input { border: 1.5px solid var(--adm-border); border-radius: 10px; padding: 8px 14px 8px 36px; font-size: 13px; color: var(--adm-text); background: var(--adm-card); outline: none; width: 220px; transition: border-color .15s; }
.adm-filter-input:focus { border-color: var(--adm-brand); }
.adm-filter-input::placeholder { color: #bbb; }
.adm-filter-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 13px; pointer-events: none; }
.adm-filter-select { border: 1.5px solid var(--adm-border); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--adm-text); background: var(--adm-card); outline: none; cursor: pointer; transition: border-color .15s; }
.adm-filter-select:focus { border-color: var(--adm-brand); }
.adm-filter-right { margin-left: auto; display: flex; gap: 8px; }

/* ── Table ── */
.adm-table-card { background: var(--adm-card); border-radius: var(--adm-radius); border: 1px solid var(--adm-border); box-shadow: var(--adm-shadow); overflow: hidden; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table thead th { padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--adm-muted); background: #f9fafb; border-bottom: 1px solid var(--adm-border); white-space: nowrap; }
.adm-table tbody tr { border-bottom: 1px solid #f3f4f6; transition: background .1s; }
.adm-table tbody tr:last-child { border-bottom: none; }
.adm-table tbody tr:hover { background: #fafafa; }
.adm-table td { padding: 13px 16px; font-size: 13px; color: var(--adm-text); vertical-align: middle; }

/* ── Shared "no records" empty state — used inside table cells (wrap in a
   colspan'd <td>) or standalone (drop straight into any card body). ── */
.adm-empty { text-align: center; padding: 56px 20px; color: var(--adm-muted); }
.adm-empty i { font-size: 2.4rem; display: block; margin-bottom: 12px; opacity: .4; }
.adm-empty-title { font-weight: 700; color: var(--adm-text); margin-bottom: 4px; font-size: 13.5px; }
.adm-empty-sub { font-size: 12.5px; color: var(--adm-muted); }

/* ── Table user cell ── */
.adm-cell-user { display: flex; align-items: center; gap: 10px; }
.adm-cell-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; overflow: hidden; }
.adm-cell-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-cell-name { font-size: 13px; font-weight: 700; color: var(--adm-text); line-height: 1.2; }
.adm-cell-sub { font-size: 11px; color: var(--adm-muted); margin-top: 1px; }

/* ── Rating ── */
.adm-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #111; }
.adm-rating i { color: #f59e0b; font-size: 11px; }

/* ── Badges ── */
.adm-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.adm-badge.b-green { background: #dcfce7; color: #15803d; }
.adm-badge.b-yellow { background: #fef9c3; color: #a16207; }
.adm-badge.b-red { background: #fee2e2; color: #b91c1c; }
.adm-badge.b-blue { background: #dbeafe; color: #1d4ed8; }
.adm-badge.b-purple { background: #f3e8ff; color: #7e22ce; }
.adm-badge.b-gray { background: #f3f4f6; color: #6b7280; }
.adm-badge.b-orange { background: #ffedd5; color: #c2410c; }
.adm-badge .b-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.b-dot-green { background: #22c55e; }
.b-dot-yellow { background: #eab308; }
.b-dot-red { background: #ef4444; }
.b-dot-gray { background: #9ca3af; }

/* ── Action buttons ── */
.adm-actions { display: flex; align-items: center; gap: 5px; }
.adm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; outline: none; transition: opacity .15s, transform .1s; text-decoration: none; }
.adm-btn:hover { opacity: .85; transform: translateY(-.5px); }
.adm-btn-brand { background: linear-gradient(135deg, var(--adm-brand), #d4a843); color: #fff; box-shadow: 0 2px 8px rgba(201,144,42,.3); }
.adm-btn-outline { background: transparent; border: 1.5px solid var(--adm-border); color: var(--adm-muted); }
.adm-btn-outline:hover { border-color: var(--adm-brand); color: var(--adm-brand); }
.adm-btn-red { background: #fee2e2; color: #b91c1c; }
.adm-btn-green { background: #dcfce7; color: #15803d; }
.adm-btn-sm { padding: 5px 10px; font-size: 11px; }
.adm-act { width: 30px; height: 30px; border-radius: 8px; background: var(--adm-content-bg); border: 1.5px solid var(--adm-border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--adm-muted); cursor: pointer; transition: all .15s; text-decoration: none; }
.adm-act:hover { border-color: var(--adm-brand); color: var(--adm-brand); background: var(--adm-brand-light); }
.adm-act-red:hover { border-color: #ef4444; color: #ef4444; background: #fee2e2; }
.adm-act-green:hover { border-color: #22c55e; color: #22c55e; background: #dcfce7; }

/* ── Pagination ── */
.adm-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--adm-border); font-size: 13px; color: var(--adm-muted); flex-wrap: wrap; gap: 10px; }
.adm-pg-btns { display: flex; gap: 4px; }
.adm-pg-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--adm-border); background: var(--adm-card); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--adm-muted); cursor: pointer; transition: all .15s; text-decoration: none; }
.adm-pg-btn:hover { border-color: var(--adm-brand); color: var(--adm-brand); }
.adm-pg-btn.active { background: var(--adm-brand); color: #fff; border-color: var(--adm-brand); }

/* ── Dashboard pending/recent list items ── */
.adm-pending-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #f3f4f6; }
.adm-pending-item:last-child { border-bottom: none; }
.adm-pending-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.adm-pending-name { font-size: 13px; font-weight: 700; color: var(--adm-text); margin-bottom: 1px; }
.adm-pending-meta { font-size: 11px; color: var(--adm-muted); }
.adm-pending-actions { margin-left: auto; display: flex; gap: 6px; }
.adm-recent-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #f3f4f6; }
.adm-recent-item:last-child { border-bottom: none; }
.adm-recent-name { font-size: 13px; font-weight: 600; color: var(--adm-text); }
.adm-recent-meta { font-size: 11px; color: var(--adm-muted); margin-top: 1px; }
.adm-recent-time { font-size: 11px; color: var(--adm-muted); margin-left: auto; white-space: nowrap; }

@media (max-width: 1280px) { .adm-stats-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 992px) { .adm-stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .adm-content { padding: 16px; } .adm-header { padding: 12px 16px; } }

/* ═══════════════════════════════════════════════════════════
   STANDALONE ADMIN SHELL — true gym11-style fixed sidebar.
   Scoped under .adm-wrapper so the embedded/sticky sidebar
   used elsewhere (inside the public site's Bootstrap grid,
   and the mobile offcanvas drawer) is untouched.
═══════════════════════════════════════════════════════════ */
.adm-wrapper { display: flex; min-height: 100vh; background: var(--adm-content-bg); }
.adm-wrapper .adm-sidebar {
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 0;
  max-height: none;
  z-index: 1030;
}
.adm-wrapper .adm-main {
  margin-left: 260px;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background: var(--adm-content-bg);
}
.adm-wrapper .adm-header {
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
@media (max-width: 991px) {
  .adm-wrapper .adm-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .adm-wrapper .adm-main { margin-left: 0; }
}

/* Persistent top-right account dropdown — rendered once in admin_header.php
   so every admin-shell page gets it regardless of whether that page also
   defines its own .adm-header title row underneath. */
.adm-topbar {
  display: flex; align-items: center; justify-content: flex-end;
  height: 52px; padding: 0 20px; background: var(--adm-card);
  border-bottom: 1px solid var(--adm-border);
  position: sticky; top: 0; z-index: 110;
}
.adm-user-pill {
  display: flex; align-items: center; gap: 8px;
  background: #f8f9fa; border: 1px solid var(--adm-border);
  border-radius: 999px; padding: 5px 12px 5px 5px;
  font-size: 0.82rem; font-weight: 600; color: var(--adm-text); cursor: pointer;
}
.adm-user-pill:hover { border-color: #C9902A; color: #C9902A; }
.adm-user-pill-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #C9902A, #e6a94a); color: #fff; font-weight: 800; font-size: 0.75rem;
  flex-shrink: 0;
}
.adm-user-pill-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.adm-user-menu {
  min-width: 200px; border: 1px solid #eee; border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.13); padding: 6px; margin-top: 10px;
}
.adm-user-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: 0.84rem; font-weight: 500; color: #374151;
}
.adm-user-menu .dropdown-item:hover, .adm-user-menu .dropdown-item:focus { background: #fdf8ee; color: #C9902A; }
.adm-user-menu .dropdown-item.text-danger:hover { background: #fef2f2; color: #dc2626; }
.adm-user-menu .dropdown-item i { width: 18px; color: #C9902A; font-size: 0.95rem; }
.adm-user-menu .dropdown-item.text-danger i { color: #dc2626; }

/* Padding wrapper for admin pages not yet rebuilt with the .adm-header/.adm-content
   component system — keeps their legacy Bootstrap container/row markup from sitting
   flush against the sidebar/viewport edge, and clips any negative-margin row gutter
   overflow that would otherwise cause horizontal scroll. */
.adm-legacy-content { padding: 24px; overflow-x: hidden; }
@media (max-width: 768px) { .adm-legacy-content { padding: 16px; } }

/* ═══════════════════════════════════════════════════════════
   TRAINER DETAIL PAGE — gym11-style profile hero + tabs.
   Ported from gym11's assets/css/trainers.css, using this
   project's --fh-orange token in place of gym11's --brand.
═══════════════════════════════════════════════════════════ */
.tr-profile-hero {
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
  border: 1px solid #f0ede6;
}
.tr-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.tr-avatar-initials {
  background: linear-gradient(135deg, var(--fh-orange), #e8a935);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -1px;
}
.tr-name { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: #111; letter-spacing: -.3px; }
.tr-headline { font-size: 14px; color: #666; font-weight: 500; }
.tr-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--fh-orange), #e8a935);
  color: #111; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: .2px;
}
.tr-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: #555; background: #f5f5f5; border-radius: 20px; padding: 4px 12px;
}
.tr-badge-gold { background: #fdf8ee; color: var(--fh-orange); }
.tr-stats-row .tr-stat { flex-direction: column; align-items: flex-start; gap: 2px; }
.tr-stats-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0ede6; }
.tr-stat-value { display: block; font-size: 20px; font-weight: 900; color: #111; line-height: 1; }
.tr-stat-label { font-size: 11px; color: #888; font-weight: 500; white-space: nowrap; }

/* Tabs */
.tr-tabs { border-bottom: 2px solid #f0ede6; gap: 4px; }
.tr-tabs .nav-link {
  font-size: 13px; font-weight: 600; color: #666; border: none; border-radius: 0;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s;
}
.tr-tabs .nav-link:hover { color: var(--fh-orange); }
.tr-tabs .nav-link.active { color: var(--fh-orange); border-bottom-color: var(--fh-orange); background: none; }
.tr-tab-content {
  background: #fff; border-radius: 0 0 16px 16px; padding: 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,.06); border: 1px solid #f0ede6; border-top: none;
}

/* Certification card */
.tr-cert-card { background: #f9f5ef; border-radius: 12px; padding: 14px; border: 1px solid #f0ede6; }
.tr-cert-download { font-size: 12px; font-weight: 600; color: var(--fh-orange); text-decoration: none; }
.tr-cert-download:hover { text-decoration: underline; }

/* Transformations / Gallery */
.tr-transformation-card { border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 3/4; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.tr-transformation-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-transformation-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; font-size: 12px; font-weight: 700; padding: 20px 10px 10px; text-align: center;
}
.tr-gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .2s; }
.tr-gallery-img:hover { transform: scale(1.03); }

/* Reviews */
.tr-review-card { background: #f9f5ef; border-radius: 14px; padding: 16px; border: 1px solid #f0ede6; }
.tr-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fh-orange), #e8a935);
  color: #111; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Sidebar Cards */
.tr-booking-card { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 4px 24px rgba(0,0,0,.1); border: 1px solid #f0ede6; }
.tr-sidebar-card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.07); border: 1px solid #f0ede6; }
.tr-rate-display { display: flex; align-items: baseline; gap: 4px; }
.tr-rate-amount { font-size: 28px; font-weight: 900; color: #111; }
.tr-rate-label { font-size: 13px; color: #888; font-weight: 500; }

/* Tags (sports, languages) */
.tr-sport-tag, .tr-lang-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
.tr-sport-tag { background: #fdf8ee; color: var(--fh-orange); border: 1px solid rgba(201,144,42,.3); }
.tr-lang-tag { background: #f0f4ff; color: #3b5bdb; border: 1px solid rgba(59,91,219,.2); }

/* Medium-style content gate (kept from previous version, reused inside tab panes) */
.tr-gate-wrapper { position: relative; overflow: hidden; }
.tr-gate-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 130px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events: none;
}
.tr-gate-cta { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; }
.tr-btn-gate {
  background: #0f172a; color: #fff; border: none; border-radius: 999px;
  font-weight: 700; font-size: 0.82rem; padding: 9px 26px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22); text-decoration: none; transition: background 0.2s;
}
.tr-btn-gate:hover { background: var(--fh-orange); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   GYM DETAIL PAGE — quick info chips + review rating breakdown,
   ported from gym11's assets/css/detail.css.
═══════════════════════════════════════════════════════════ */
.detail-info-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.dic-item {
  display: flex; align-items: center; gap: 10px;
  background: #fdf8f0; border: 1px solid #f0e8d0;
  border-radius: 12px; padding: 10px 16px;
  font-size: 13px; flex: 1; min-width: 120px;
}
.dic-item > i { font-size: 18px; color: #C9902A; flex-shrink: 0; }
.dic-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; }
.dic-val { font-size: 13px; font-weight: 700; color: #111; }

.review-summary { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.review-big-score { font-size: 56px; font-weight: 900; color: #111; line-height: 1; padding-top: 4px; }
.review-bars { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.review-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888; }
.review-bar-row span:first-child { width: 20px; text-align: right; }
.review-bar-row span:last-child { width: 32px; }
.rb-track { flex: 1; height: 6px; background: #f0ede6; border-radius: 3px; overflow: hidden; }
.rb-fill { height: 100%; background: #C9902A; border-radius: 3px; }

/* Gym detail hero card + tabs — same visual language as .tr-profile-hero/.tr-tabs */
.gym-hero-card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 2px 20px rgba(0,0,0,.08); border: 1px solid #f0ede6; }

/* ── Premium section nav: no tabs — every section below is always
   rendered on the page (see .gym-section); this is a sticky floating
   pill strip that smooth-scrolls to a section and scrollspy-highlights
   whichever one is currently in view (see the JS at the bottom of
   gym-detail.php). Reads as an editorial single-page listing (Airbnb/
   Booking-style) rather than a boxed, content-hiding tab widget. ── */
.gym-tabs-wrap {
  position: sticky;
  top: 88px;
  z-index: 5;
  background: rgba(250, 247, 242, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid #f0ede6;
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 8px 24px rgba(15, 12, 9, .05);
}
.gym-tabs-wrap::-webkit-scrollbar { display: none; }

.gym-tabs {
  border-bottom: none;
  gap: 4px;
  flex-wrap: nowrap;
}

.gym-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  border: none;
  border-radius: 11px;
  padding: 10px 16px;
  margin-bottom: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.gym-tabs .nav-link i {
  font-size: 13px;
  opacity: .7;
}

.gym-tabs .nav-link:hover {
  color: #a3690f;
  background: rgba(201, 144, 42, .08);
}

.gym-tabs .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #dba756, #C9902A);
  box-shadow: 0 6px 16px rgba(201, 144, 42, .35);
}

.gym-tabs .nav-link.active i {
  opacity: 1;
}

.gym-sections {
  background: #fff;
  border-radius: 20px;
  padding: 0 28px;
  box-shadow: 0 12px 36px rgba(15, 12, 9, .07);
  border: 1px solid #f0ede6;
}

.gym-section {
  padding: 30px 0;
  /* clears the sticky site header + sticky .gym-tabs-wrap when a nav
     pill scrolls this section into view */
  scroll-margin-top: 170px;
}

.gym-section + .gym-section {
  border-top: 1px solid #f0ede6;
}

@media (max-width: 576px) {
  .gym-tabs-wrap {
    top: 68px;
  }

  .gym-tabs .nav-link {
    font-size: 12px;
    padding: 9px 13px;
  }

  .gym-sections {
    padding: 0 18px;
    border-radius: 16px;
  }

  .gym-section {
    padding: 22px 0;
    scroll-margin-top: 130px;
  }
}

/* ═══════════════════════════════════════════════════════════
   JOB DETAIL PAGE — ported from gym11's assets/css/jobs.css.
═══════════════════════════════════════════════════════════ */
.job-detail-hero { background: #f9f5ef; border-radius: 16px; padding: 28px; }
.job-detail-title { font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: #111; margin-bottom: 8px; line-height: 1.2; }

.job-section { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.job-section h5 { font-size: 15px; font-weight: 800; color: #111; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f5f0e8; }

.job-skill-tag { background: #f5f0e8; color: #C9902A; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 700; display: inline-block; margin: 3px; }

.job-badge { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.badge-type        { background: #e8f4fd; color: #0066cc; }
.badge-mode-remote { background: #e8fdf0; color: #009940; }
.badge-mode-onsite { background: #fdf3e8; color: #cc6600; }
.badge-mode-hybrid { background: #f0e8fd; color: #6600cc; }

.job-stat-chip { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f9f5ef; border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.job-stat-chip i { color: #C9902A; font-size: 16px; flex-shrink: 0; }

.job-apply-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.job-apply-card h5 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.job-gym-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

@media (max-width: 768px) { .job-detail-hero { padding: 20px; } }
/* Why NidoFit — 3D image icons */
.nf-feature-icon-wrapper:has(.nf-feature-img) {
  width: 72px;
  height: 72px;
  background: none;
  border: 0;
}
.nf-feature-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .nf-feature-icon-wrapper:has(.nf-feature-img) { width: 56px; height: 56px; }
}