/* IN2Fitness — shared design system for the WP block theme.
   Dark athletic editorial: #0a0a0a base, gold accent, Archivo + JetBrains Mono.
   Arabic/RTL via body.rtl class (font-family swap + direction flip).
   Fonts load via inc/enqueue.php as a single Google Fonts call — no @import
   here so the editor stylesheet doesn't trigger a remote fetch on every save. */

/* Top-level <main> wraps full-bleed pattern <section>s that own their own
   vertical padding. Zero out theme.json's blockGap on the main group so
   adjacent sections butt up flush, matching the demo_3 layout. */
main.wp-block-group { --wp--style--block-gap: 0px; }
main.wp-block-group > * + * { margin-block-start: 0; }

/* ---------- TOKEN ALIAS BRIDGE ---------------------------------------------
   theme.json emits design tokens as --wp--preset--color--* / --wp--custom--*.
   The legacy demo CSS below uses the short names (--bg, --gold, --font-display,
   --nav-h, …). The aliases below let editors tweak the palette from the Site
   Editor's Style Book and have those changes flow through unchanged. The
   hard-coded fallbacks match the demo defaults so the theme still renders
   correctly even before theme.json is parsed. */
:root {
  --bg:        var(--wp--preset--color--bg,        #0a0a0a);
  --bg-2:      var(--wp--preset--color--bg-2,      #111111);
  --bg-3:      var(--wp--preset--color--bg-3,      #181818);
  --ink:       var(--wp--preset--color--ink,       #f4f1ea);
  --ink-dim:   var(--wp--preset--color--ink-dim,   #a8a39a);
  --ink-mute:  var(--wp--preset--color--ink-mute,  #6a655c);
  --gold:      var(--wp--preset--color--gold,      #F5B324);
  --gold-deep: var(--wp--preset--color--gold-deep, #E8A317);

  --line:      var(--wp--custom--line,      rgba(244, 241, 234, 0.08));
  --line-2:    var(--wp--custom--line-2,    rgba(244, 241, 234, 0.14));
  --gold-soft: var(--wp--custom--gold-soft, rgba(245, 179, 36, 0.14));
  --nav-h:     var(--wp--custom--nav-h,     76px);

  --font-display: var(--wp--preset--font-family--display, 'Archivo', system-ui, sans-serif);
  --font-narrow:  var(--wp--preset--font-family--narrow,  'Archivo Narrow', 'Archivo', sans-serif);
  --font-mono:    var(--wp--preset--font-family--mono,    'JetBrains Mono', ui-monospace, monospace);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }

::selection { background: var(--gold); color: #000; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap; background: transparent;
}
.btn--gold { background: var(--gold); color: #000; }
.btn--gold:hover { background: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Language toggle button: in LTR the label is Arabic ("عربي"), so load
   Noto Sans Arabic first in the stack so the glyphs render correctly.
   In RTL the label is Latin ("English"), so swap to the display font.
   Mirrors the live site's .header__cta--outline rule.
   Compound selector (.btn[data-lang-toggle]) ensures this beats any
   inline .btn font-family that appears later in the cascade. */
.btn[data-lang-toggle],
a[data-lang-toggle],
[data-lang-toggle] {
  font-family: 'Noto Sans Arabic', var(--font-display), sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.btn__arrow { transition: transform 0.2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ===== NAV / HEADER ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s;
}
.nav--scrolled { background: rgba(10,10,10,0.95); }
.nav--solid { background: rgba(10,10,10,0.95); }

/* When the WP admin bar is showing on the front-end (logged-in admins), push
   the fixed nav below it. WP exposes 32px on >782px screens and 46px below. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}
.nav__inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 0; }
.nav__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  padding: 14px 0; position: relative; display: inline-flex; align-items: center; min-height: 44px;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.active { color: var(--gold); }
.nav__links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 10px; background: transparent; border: 0; cursor: pointer; }
.nav__burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== SECTION HEAD (ghost numeral + editorial title) ===== */
.section-head { position: relative; padding: 110px 0 40px; }
.section-head__ghost {
  position: absolute; top: 40px; left: -12px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(180px, 22vw, 320px); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
  pointer-events: none; user-select: none; z-index: 0;
  letter-spacing: -0.04em;
}
.section-head__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.section-head h2 {
  font-size: clamp(44px, 6vw, 92px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.95;
  margin-top: 16px; text-wrap: balance;
  text-transform: uppercase;
}
.section-head h2 em { font-style: normal; color: var(--gold); font-weight: 300; letter-spacing: -0.02em; }
.section-head__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px;
}
.section-head__meta::before {
  content: '';
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B324'%3E%3Cpath d='M6 3h3v4h6V3h3v8h1v2h-1v8h-3v-4H9v4H6v-8H5v-2h1V3zm-4 7h2v4H2v-4zm18 0h2v4h-2v-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===== PAGE HERO (subpage banner) ===== */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 90px) 0 90px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero--tall {
  padding-top: calc(var(--nav-h) + 130px);
  padding-bottom: 130px;
  isolation: isolate;
}
.page-hero--tall::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--page-hero-image, url('../images/man-dumbbells.webp'));
  background-size: cover; background-position: center;
  filter: grayscale(0.35) brightness(0.35) contrast(1.05);
  z-index: -2;
}
.page-hero--tall::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,10,10,0.7) 20%, rgba(10,10,10,0.7) 80%, var(--bg) 100%),
    radial-gradient(ellipse at 80% 40%, rgba(245,179,36,0.2), transparent 55%);
  z-index: -1;
}
.page-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.6;
}
.page-hero__glow {
  position: absolute; top: 40%; right: 8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,179,36,0.15), transparent 65%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__ghost {
  position: absolute; top: -30px; left: -12px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(180px, 22vw, 320px); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
  pointer-events: none; user-select: none;
  letter-spacing: -0.04em;
}
.page-hero__eyebrow { margin-bottom: 20px; position: relative; z-index: 1; }
.page-hero__title {
  position: relative; z-index: 1;
  font-size: clamp(48px, 7.5vw, 120px); font-weight: 900;
  letter-spacing: -0.045em; line-height: 0.92;
  text-transform: uppercase;
  max-width: 14ch;
}
.page-hero__title em { font-style: normal; color: var(--gold); font-weight: 300; }
.page-hero__desc {
  position: relative; z-index: 1;
  margin-top: 28px; max-width: 640px;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6;
  color: var(--ink-dim);
}
.page-hero__cta { position: relative; z-index: 1; margin-top: 32px; }
.page-hero__crumbs {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 28px;
}
.page-hero__crumbs a { color: var(--ink-mute); transition: color 0.2s; }
.page-hero__crumbs a:hover { color: var(--gold); }
.page-hero__crumbs span.sep { color: var(--line-2); }

.page-section { padding: 80px 0; background: var(--bg); }
.page-section--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ===== LEGAL PAGES (privacy / terms / customer-protection) ===== */
.legal { padding: 80px 0 120px; background: var(--bg); }
.legal__inner { max-width: 820px; }
.legal__section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.legal__section:last-of-type { border-bottom: 0; }
.legal__h {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.legal__p {
  font-size: 16px; line-height: 1.75; color: var(--ink-dim); margin: 0;
}
.legal__updated {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 32px;
}

/* ===== FOOTER ===== */
.footer { background: var(--bg); padding: 80px 0 40px; border-top: 1px solid var(--line); }
.footer__grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 24px; }
.footer__brand img.logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer__brand img.cert { max-width: 120px; height: auto; opacity: 0.8; }
.footer__col h4,
.footer__col-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em;
  color: var(--gold); text-transform: uppercase;
  margin: 0 0 20px;
  font-weight: 600;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
  font-size: 13px; color: var(--ink-dim);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--ink); }
.footer__col--right { display: flex; flex-direction: column; gap: 20px; }
.footer__apps { display: flex; gap: 10px; }
.footer__apps img { height: 36px; width: auto; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink-dim);
  transition: all 0.2s;
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.footer__social svg { width: 14px; height: 14px; }

/* ===== BOTTOM BAR ===== */
.bottom-bar { background: var(--bg-2); border-top: 1px solid var(--line); padding: 18px 0; }
.bottom-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bottom-bar__payments { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.bottom-bar__payments img {
  height: 22px; width: auto;
  opacity: 0.7;
  filter: grayscale(0.3);
  transition: opacity 0.2s, filter 0.2s;
}
.bottom-bar__payments img:hover { opacity: 1; filter: grayscale(0); }
.bottom-bar__copy {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-dim); text-transform: uppercase;
}

/* ===== COOKIE NOTICE ===== */
.cookie {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  max-width: 640px; margin: 0 auto;
  padding: 18px 22px;
  background: rgba(20,20,20,0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  display: flex; gap: 20px; align-items: center;
  transform: translateY(200%); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cookie.show { transform: translateY(0); }
.cookie p { font-size: 13px; color: var(--ink-dim); line-height: 1.5; flex: 1; }
.cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ===== CTA BANNER (shared between several subpages) ===== */
.page-cta {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(135deg, #141414 0%, #080808 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(245,179,36,0.15), transparent 60%);
}
.page-cta__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
}
.page-cta__heading {
  font-size: clamp(36px, 5vw, 72px); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.95; text-transform: uppercase;
}
.page-cta__heading em { font-style: normal; color: var(--gold); font-weight: 300; }
.page-cta__desc { margin-top: 20px; color: var(--ink-dim); font-size: 16px; line-height: 1.6; max-width: 520px; }
.page-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

/* ===== FACILITIES ===== */
.facilities { padding-bottom: 60px; background: var(--bg); }
.facilities__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 48px;
}
.facility-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  transition: transform 0.4s;
}
.facility-card:hover { transform: translateY(-4px); }
.facility-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) brightness(0.7);
  transition: filter 0.4s, transform 0.6s;
}
.facility-card:hover .facility-card__img { filter: grayscale(0) brightness(0.8); transform: scale(1.04); }
.facility-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.92) 100%);
}
.facility-card__label {
  position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2;
  font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 1.1;
}
.facility-card__num {
  position: absolute; top: 20px; left: 24px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--gold);
}

/* ===== STEP VIDEO SECTION ===== */
.step-video {
  position: relative; height: 68vh; min-height: 520px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.step-video__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.45) contrast(1.1) saturate(0.8);
}
.step-video__grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,0.55) 60%, var(--bg) 100%),
    linear-gradient(120deg, rgba(245,179,36,0.08), transparent 60%);
}
.step-video__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 48px; max-width: 1400px; margin: 0 auto;
}
.step-video__eyebrow { margin-bottom: 24px; }
.step-video__title {
  font-size: clamp(52px, 7.5vw, 120px); font-weight: 900; line-height: 0.9;
  letter-spacing: -0.04em; text-transform: uppercase; max-width: 12ch;
}
.step-video__title em { font-style: normal; color: var(--gold); }

/* ===== ABOUT =====
   demo_3 wraps row + stats + facilities in ONE <section class="about">; the
   block theme splits them across THREE sections (row | stat-counter block |
   facilities). flow-root contains the inner margin-top values (64px on
   .about__stats, 88px on .about__facilities) so they stay inside the bg-2
   region instead of escaping into the body bg between sections. */
.about { background: var(--bg-2); padding: 100px 0 120px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flow-root; }
.about__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; margin-top: 48px; align-items: start; }
.about__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.8) contrast(1.1); }
.about__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(210deg, transparent 55%, rgba(10,10,10,0.6)); }
.about__body { display: flex; flex-direction: column; gap: 24px; }
.about__heading { font-size: clamp(38px, 4.2vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase; }
.about__heading em { font-style: normal; color: var(--gold); }
.about__desc { font-size: 16px; line-height: 1.65; color: var(--ink-dim); max-width: 620px; }
.about__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 32px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num {
  font-size: 54px; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat__num .plus { color: var(--gold); font-weight: 400; }
.stat__label {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-mute); text-transform: uppercase;
}

/* About: gold-accent facilities strip (header + icon-card grid + CTA). */
.about__facilities {
  margin-top: 88px;
  position: relative;
  padding: 48px;
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.about__facilities::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(245,179,36,0.12), transparent 65%);
  pointer-events: none;
}
.about__fac-head {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  align-items: end;
  margin-bottom: 36px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.about__fac-title {
  font-size: clamp(26px, 2.8vw, 40px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch;
  text-transform: uppercase;
}
.about__fac-title em { font-style: normal; color: var(--gold); font-weight: 300; }
.about__fac-count {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.25em; color: var(--ink-mute);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.about__fac-count strong { color: var(--gold); font-weight: 700; font-size: 14px; }
.about__fac-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative; z-index: 1;
}
.about__fac-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.about__fac-list li:hover { transform: translateY(-2px); border-color: rgba(245,179,36,0.35); background: var(--bg-3); }
.about__fac-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 24px; height: 24px; margin-top: 1px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B324'%3E%3Cpath d='M6 3h3v4h6V3h3v8h1v2h-1v8h-3v-4H9v4H6v-8H5v-2h1V3zm-4 7h2v4H2v-4zm18 0h2v4h-2v-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about__fac-list li:nth-child(3n+2)::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B324'%3E%3Cpath d='M10 2h4c1.1 0 2 .9 2 2 0 .9-.4 1.6-.9 2.2 2.3 1.4 3.9 4 3.9 6.8 0 4.4-3.6 8-8 8s-8-3.6-8-8c0-2.8 1.6-5.4 3.9-6.8C6.4 5.6 6 4.9 6 4c0-1.1.9-2 2-2h2zm4 2.5h-4c-.3 0-.5.2-.5.5s.2.5.5.5h4c.3 0 .5-.2.5-.5s-.2-.5-.5-.5z'/%3E%3C/svg%3E");
}
.about__fac-list li:nth-child(3n)::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B324'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 4a6 6 0 110 12 6 6 0 010-12zm0 3.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z'/%3E%3C/svg%3E");
}
.about__fac-cta {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 28px;
  background: linear-gradient(90deg, rgba(245,179,36,0.12), rgba(245,179,36,0.02));
  border: 1px solid rgba(245,179,36,0.28);
  position: relative; z-index: 1;
}
.about__fac-cta-text {
  font-size: 15px; color: var(--ink); line-height: 1.45;
  max-width: 68ch;
}
.about__fac-cta-text strong { color: var(--gold); font-weight: 700; }
.about__fac-cta .btn { flex-shrink: 0; }

/* ===== MARQUEE — truly infinite loop =====
   Track holds N identical copies of the item sequence. Each child (word or
   icon) owns its own margin-right, so every set's width is uniform.
   site.js clones more sets at runtime until track_width ≥ viewport + set_width,
   then sets `--marquee-shift` to exactly one set's width in px. The keyframe
   translates by that pixel amount, so the wrap-around is seamless AND the
   viewport always stays filled — no empty gap after the last item. */
.marquee {
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; background: var(--bg);
}
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  animation: ticker 32s linear infinite;
  white-space: nowrap;
}
.marquee__word {
  font-size: clamp(20px, 2.4vw, 36px); font-weight: 900; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-right: 32px;
  flex: 0 0 auto;
  line-height: 1;
}
.marquee__word.outline { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.marquee__word.fill    { color: var(--ink); }
.marquee__word.gold    { color: var(--gold); }
.marquee__icon {
  width: 36px; height: 36px; object-fit: contain;
  margin-right: 32px; flex: 0 0 auto;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -50%)); }
}

/* Reusable "gym-dot" — mini gym icon replacement for diamond bullets.
   Attach as ::before via .gym-dot on any inline container, or use the
   .gym-icon class on a span that should render a kettlebell / plate variant. */
.gym-dot::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px; vertical-align: middle;
  margin-right: 8px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B324'%3E%3Cpath d='M6 3h3v4h6V3h3v8h1v2h-1v8h-3v-4H9v4H6v-8H5v-2h1V3zm-4 7h2v4H2v-4zm18 0h2v4h-2v-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.rtl .gym-dot::before { margin-right: 0; margin-left: 8px; }

/* ===== RESPONSIVE (shared) ===== */
@media (max-width: 960px) {
  .container, .nav__inner { padding-left: 24px; padding-right: 24px; }
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: flex; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(10,10,10,0.98); padding: 20px 24px;
    border-bottom: 1px solid var(--line);
  }
  .nav.open .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  /* Mobile language-toggle clone injected by site.js: sits at the bottom
     of the burger menu as a pill, separate from the plain nav links. */
  .nav__lang-mobile {
    display: inline-flex !important;
    margin-top: 16px; padding: 10px 18px !important;
    border: 1px solid var(--line-2) !important;
    background: transparent !important;
    color: var(--ink) !important;
    align-self: flex-start;
    border-bottom: 1px solid var(--line-2) !important;
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .page-cta__inner { grid-template-columns: 1fr; }
  .page-cta__actions { justify-content: flex-start; }
  .bottom-bar__inner { justify-content: center; text-align: center; }
  .cookie { flex-direction: column; align-items: stretch; }
  .facilities__grid { grid-template-columns: repeat(2, 1fr); }
  .about__row { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .about__facilities { padding: 32px 24px; }
  .about__fac-list { grid-template-columns: 1fr 1fr; }
  .about__fac-head { grid-template-columns: 1fr; }
  .app-cta__inner { grid-template-columns: 1fr; text-align: center; }
  .app-cta__badges { justify-content: center; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .facilities__grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .about__fac-list { grid-template-columns: 1fr; }
  .about__fac-cta { flex-direction: column; align-items: flex-start; }
}

/* Mobile language-toggle clone: hidden by default (desktop). The
   @media (max-width: 960px) block above flips it to inline-flex.
   Selector chained through .nav__links to out-specific inline
   .btn { display: inline-flex } rules that load after this file. */
.nav__links .nav__lang-mobile,
.nav .nav__lang-mobile { display: none !important; }
@media (max-width: 960px) {
  .nav__links .nav__lang-mobile,
  .nav .nav__lang-mobile { display: inline-flex !important; }
}

/* ===== ARABIC / RTL ============================================
   body.rtl flips direction and swaps the primary font to Noto Sans
   Arabic. Display face (Archivo) remains for headings in Latin
   scripts; Arabic headings fall back to Noto Sans Arabic's heavier
   weights. Individual components that rely on physical direction
   (ghost numerals, section heads, footer grid) get explicit
   overrides below. */
body.rtl {
  direction: rtl;
  font-family: 'Noto Sans Arabic', var(--font-display);
}
body.rtl .eyebrow,
body.rtl .page-hero__crumbs,
body.rtl .section-head__meta,
body.rtl .btn,
body.rtl .nav__links a,
body.rtl .stat__label,
body.rtl .footer__col h4,
body.rtl .footer__col-title,
body.rtl .bottom-bar__copy {
  /* Keep the monospace label rhythm; Noto Sans Arabic handles
     Arabic glyphs while JetBrains Mono renders Latin numerals. */
  font-family: 'Noto Sans Arabic', var(--font-mono);
}

/* Arabic nav link sizing: Noto Sans Arabic at 11px reads too tight against
   JetBrains Mono Latin at the same size — bump to 14px for legibility. */
body.rtl .nav__links a {
  font-size: 14px;
  letter-spacing: 0.04em;
}
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4,
body.rtl .page-hero__title,
body.rtl .section-head h2,
body.rtl .hero__title,
body.rtl .page-cta__heading,
body.rtl .amenities__title {
  font-family: 'Noto Sans Arabic', var(--font-display);
  font-weight: 800;
}

/* Flip ghost numerals to the right edge in RTL */
body.rtl .page-hero__ghost,
body.rtl .section-head__ghost {
  left: auto;
  right: -12px;
}

/* Page-hero crumbs: arrow separators still read naturally */
body.rtl .page-hero__crumbs .sep { transform: scaleX(-1); display: inline-block; }

/* Section head: swap side-by-side to mirrored alignment */
body.rtl .section-head__inner { direction: rtl; }
body.rtl .section-head__meta::before {
  /* the gold diamond marker sits before text in LTR; in RTL it
     should still visually precede the text, which means "after"
     in source order relative to flex direction */
  /* flexbox already mirrors via direction: rtl, no change needed */
}

/* Nav: .nav__inner is a flex row; direction: rtl swaps logo/links/
   CTA automatically. We just need to keep the burger on the
   trailing edge on mobile. */
body.rtl .nav__links a.active::after { /* underline stays centered */ }

/* Hero kicker line on the main rebuild — flip so line sits on the
   near edge of the text */
body.rtl .hero__kicker { flex-direction: row-reverse; }

/* Footer: keep grid columns but right-align text */
body.rtl .footer__col { text-align: right; }
body.rtl .footer__col--right { align-items: flex-end; }
body.rtl .footer__brand { align-items: flex-end; }
body.rtl .footer__social { direction: ltr; }  /* keep icon order */
body.rtl .footer__apps { direction: ltr; }

/* Bottom bar: payments row stays LTR for consistent icon reading */
body.rtl .bottom-bar__payments { direction: ltr; }

/* Plan card list bullets — flip the short hairline to the right */
body.rtl .plan__features li { padding-left: 0; padding-right: 20px; }
body.rtl .plan__features li::before { left: auto; right: 0; }

/* About / amenities grids with right-side borders — swap */
body.rtl .stat { border-right: 0; border-left: 1px solid var(--line); }
body.rtl .stat:last-child { border-left: 0; }
body.rtl .amenity { border-right: 0; border-left: 1px solid var(--line); }
body.rtl .amenity:nth-child(3n) { border-left: 0; }

/* Locations page: keep map LTR (pins are absolutely-positioned by
   explicit coords; RTL would otherwise flip them). Panel content
   flips to RTL naturally. */
body.rtl .locations__map,
body.rtl .ksa-map-inline,
body.rtl #pins,
body.rtl .pin,
body.rtl .pin__label,
body.rtl .marquee__track { direction: ltr; }
body.rtl .branch { direction: rtl; }
body.rtl .branch__hours,
body.rtl .branch__link { font-family: 'Noto Sans Arabic', var(--font-mono); }

/* Forms: right-align text but keep numeric/tel fields LTR */
body.rtl .field input,
body.rtl .field select,
body.rtl .field textarea { text-align: right; }
/* Email/date keep LTR digits but stay aligned to the start of the line in
   RTL (= right edge). Tel mirrors that and additionally right-aligns its
   placeholder so "5XXXXXXXX" sits next to the country code. */
body.rtl .field input[type="email"],
body.rtl .field input[type="tel"],
body.rtl .field input[type="date"] { direction: ltr; text-align: right; }
body.rtl .field input[type="tel"]::placeholder { text-align: right; direction: ltr; }

/* FAQ accordion — the "+" glyph sits on the opposite side */
body.rtl .faq__q { direction: rtl; }

/* Saudi Riyal symbol (the new SAMA-designed glyph from 2025). The font ships
   the symbol on Unicode U+00EA so we render it via `<span class="riyal-icon">ê</span>`
   — the literal "ê" gets replaced by the glyph at draw time and falls back
   to the body font (still legible) if the file fails to load.
   Source: github.com/abdulrysrr/new-saudi-riyal-symbol */
@font-face {
  font-family: 'SaudiRiyalSymbol';
  src: url('../fonts/saudiriyalsymbol.woff2') format('woff2'),
       url('../fonts/saudiriyalsymbol.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.riyal-icon {
  font-family: 'SaudiRiyalSymbol', 'Noto Sans Arabic', sans-serif;
  font-style: normal;
  font-weight: inherit;
  display: inline-block;
  line-height: 1;
}

/* Join-Now wizard steps: the head bar's text-align is hardcoded to left in
   the LTR base rule, so the AR step title sat on the left. Mirror to right,
   match the typography of .summary__title for visual parity in AR, and flip
   the meta margin so it stays opposite the title in RTL. */
body.rtl .step__head { text-align: right; }
body.rtl .step__title {
  text-align: right;
  font-family: 'Noto Sans Arabic', var(--font-display), sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;  /* matches .summary__title (was -0.015em) */
}
body.rtl .step__meta { margin-right: 0; margin-left: 14px; }

/* Cookie banner arrangement */
body.rtl .cookie__actions { direction: rtl; }
body.rtl .cookie { direction: rtl; }

/* In RTL, the language-toggle label is "English" — swap back to the
   display font so the Latin word doesn't render in Noto Sans Arabic. */
body.rtl .btn[data-lang-toggle],
body.rtl a[data-lang-toggle],
body.rtl [data-lang-toggle] {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ===== SEAMLESS GOLD SCROLLBAR (shared) =====
   Used on scrollable panels (Locations list, any tall overflow-y area) so the
   default browser scrollbar blends into the dark theme with a gold thumb. */
.scroll-gold {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.scroll-gold::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-gold::-webkit-scrollbar-track { background: transparent; }
.scroll-gold::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 999px;
}
.scroll-gold::-webkit-scrollbar-thumb:hover { background: #fff; }

/* ===== GLOBAL PAGE SCROLLBAR =====
   Replaces the OS default (light grey on dark bg) with a theme-consistent
   gold-on-near-black scrollbar so the page chrome matches the editorial dark
   palette. Firefox uses scrollbar-* properties; WebKit/Blink use ::-webkit-*. */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--gold) var(--bg-2);
}
html::-webkit-scrollbar { width: 16px; height: 16px; }
html::-webkit-scrollbar-track {
  background: var(--bg-2);
  border-left: 1px solid var(--line);
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 999px;
  border: 3px solid var(--bg-2);
}
html::-webkit-scrollbar-thumb:hover { background: #fff; }
html::-webkit-scrollbar-corner { background: var(--bg-2); }

/* ===== SLIDER EDGE ARROWS (reusable legacy placement) =====
   Vertically-centred circular prev/next buttons on the left/right edge of a
   slider — matches the original in2fitness.sa site and the previous demo_1. */
.edge-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(10,10,10,0.45);
  border: 1px solid var(--line-2);
  color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  z-index: 5;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.edge-arrow:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.edge-arrow svg { width: 18px; height: 18px; }
.edge-arrow--prev { left: 20px; }
.edge-arrow--next { right: 20px; }
body.rtl .edge-arrow--prev { left: auto; right: 20px; }
body.rtl .edge-arrow--next { right: auto; left: 20px; }
body.rtl .edge-arrow svg { transform: scaleX(-1); }
@media (max-width: 640px) {
  .edge-arrow { width: 40px; height: 40px; }
  .edge-arrow--prev { left: 10px; }
  .edge-arrow--next { right: 10px; }
  body.rtl .edge-arrow--prev { right: 10px; }
  body.rtl .edge-arrow--next { left: 10px; }
}

/* =============================================================
   PHASE 2 — page-specific styles (gx-classes, personal-training,
   faqs, contact). Lifted from each demo_3 page's inline <style>.
   ============================================================= */

/* ---------- GX Classes ---------- */
.classes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.class-card {
  padding: 180px 24px 32px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  isolation: isolate;
}
.class-card:hover { transform: translateY(-4px); border-color: rgba(245,179,36,0.35); }
.class-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--card-bg, url('../images/facility-strength.webp'));
  background-size: cover; background-position: center;
  filter: grayscale(0.4) brightness(0.5) contrast(1.05);
  transition: filter 0.45s, transform 0.6s;
  z-index: -2;
}
.class-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.75) 55%, rgba(10,10,10,0.95) 100%);
  z-index: -1;
}
.class-card:hover::before { filter: grayscale(0) brightness(0.6) contrast(1.1); transform: scale(1.05); }
.class-card__num   { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; color: var(--gold); position: relative; z-index: 1; }
.class-card__name  { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; position: relative; z-index: 1; color: var(--ink); text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.class-card__desc  { color: var(--ink-dim); font-size: 13px; line-height: 1.55; position: relative; z-index: 1; }
.class-card__list  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; position: relative; z-index: 1; }
.class-card__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  padding: 5px 10px; border: 1px solid rgba(244,241,234,0.25);
  color: var(--ink); text-transform: uppercase;
  background: rgba(10,10,10,0.55); backdrop-filter: blur(6px);
}

.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.why-card { padding: 32px 28px; background: var(--bg-3); border-left: 2px solid var(--gold); }
.why-card__num   { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; color: var(--gold); }
.why-card__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-top: 14px; text-transform: uppercase; line-height: 1.1; }
.why-card__desc  { color: var(--ink-dim); font-size: 13px; line-height: 1.55; margin-top: 12px; }

@media (max-width: 960px) { .classes__grid, .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .classes__grid, .why__grid { grid-template-columns: 1fr; } }

/* ---------- Personal Training ---------- */
.pt-subtitle { padding: 80px 0 20px; }
.pt-subtitle__text { font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 920px; letter-spacing: -0.01em; }
.pt-subtitle__text em { font-style: normal; color: var(--gold); font-weight: 300; }

.pt-benefits { padding: 120px 0; }
.pt-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.pt-benefit {
  position: relative; padding: 40px 32px;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.pt-benefit:hover { transform: translateY(-4px); border-color: rgba(245,179,36,0.5); background: rgba(17,17,17,0.9); }
.pt-benefit__big-num {
  font-size: clamp(70px, 9vw, 120px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px rgba(245,179,36,0.55);
}
.pt-benefit__title { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; line-height: 1.1; }
.pt-benefit__desc  { color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
@media (max-width: 960px) { .pt-benefits__grid { grid-template-columns: 1fr; } .pt-benefits { padding: 80px 0; } }

/* ---------- FAQs ---------- */
.faqs { padding: 80px 0 120px; }
.faq-cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 40px 0 32px; }
.faq-cat-tab {
  padding: 10px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  transition: all 0.2s;
}
.faq-cat-tab:hover { color: var(--ink); }
.faq-cat-tab.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }
.faq-cat-tab[disabled] { opacity: 0.45; cursor: not-allowed; }

.faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-bottom: 0; }
.faq { border-bottom: 1px solid var(--line); background: var(--bg-2); transition: background 0.2s; }
.faq:hover { background: var(--bg-3); }
.faq__q {
  width: 100%;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  letter-spacing: -0.005em;
}
.faq__q::after {
  content: '+'; font-family: var(--font-mono); font-weight: 300;
  font-size: 24px; color: var(--gold);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.faq.open .faq__q::after { transform: rotate(45deg); }
.faq__a {
  max-height: 0; overflow: hidden;
  padding: 0 24px;
  color: var(--ink-dim); font-size: 14px; line-height: 1.6;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq.open .faq__a { max-height: 420px; padding: 4px 24px 22px; }

/* ---------- Contact ---------- */
.contact-layout { padding: 80px 0 120px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); }
.contact-info__row {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-2);
}
.contact-info__row:last-child { border-bottom: 0; }
.contact-info__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; }
.contact-info__value { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.contact-info__value a { color: var(--ink); transition: color 0.2s; }
.contact-info__value a:hover { color: var(--gold); }
.contact-info__small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-mute); text-transform: uppercase; }

.contact-form { padding: 40px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.contact-form__title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-mute); text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--ink); padding: 12px 14px;
  font-family: inherit; font-size: 14px;
  outline: 0; transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 120px; }

/* Custom select chevron — replaces the OS-native arrow with a gold caret
   that matches the rest of the form. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F5B324' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }
body.rtl .field select {
  background-position: left 14px center;
  padding-right: 14px;
  padding-left: 36px;
}

/* minmax(0,1fr) lets the number input shrink below its intrinsic min-content —
   a plain 1fr bottoms out at the input's default size and forces the whole
   contact grid wider than a 390px phone viewport. */
.phone-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; }

/* ===== COUNTRY-CODE PICKER (shared) =====
   Custom-built picker that replaces the native <select> so SVG flags from
   flag-icons render the same on every OS (Windows in particular doesn't
   paint flag emojis). Used by the contact form and the Join Us form; the
   `flag-icons` stylesheet must be enqueued by the consumer block. */
.cc-picker { position: relative; }
.cc-picker__trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 100%;
  box-sizing: border-box;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 12px 14px;
  font-family: inherit; font-size: 14px; line-height: 1.2;
  cursor: pointer; outline: 0;
  text-align: left;
  transition: border-color 0.2s;
}
.cc-picker__trigger:focus-visible,
.cc-picker.is-open .cc-picker__trigger { border-color: var(--gold); }
.cc-picker__flag {
  width: 22px; height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.cc-picker__dial {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.cc-picker__caret {
  width: 12px; height: 8px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.2s;
}
.cc-picker.is-open .cc-picker__caret { transform: rotate(180deg); }
.cc-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 16px 32px rgba(0,0,0,0.55);
  min-width: 280px;
  /* Force the vertical scrollbar to the left in LTR by parking the list's
     own direction in RTL — the scrollbar tracks the inline-start side. Each
     row is flipped back to LTR below so flag/name/dial still read naturally. */
  direction: rtl;
}
.cc-picker__opt { direction: ltr; }
.cc-picker__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.cc-picker__opt:hover,
.cc-picker__opt.is-active { background: rgba(245,179,36,0.12); }
.cc-picker__opt[aria-selected="true"] { background: rgba(245,179,36,0.18); }
.cc-picker__opt .cc-picker__name {
  flex: 1;
  color: var(--ink);
  font-family: inherit;
  letter-spacing: 0;
}
.cc-picker__opt .cc-picker__dial {
  color: var(--ink-mute);
  font-size: 12px;
}
body.rtl .cc-picker__trigger { text-align: right; }
body.rtl .cc-picker__caret  { margin-left: 0; margin-right: auto; }
body.rtl .cc-picker__list   { left: auto; right: 0; }
/* In RTL the browser parks the vertical scrollbar on the inline-start side
   (left). Flip the list itself to LTR so the scrollbar sits on the right
   the way Arabic readers expect, then put each row back into RTL so the
   flag/name/dial flex order reads naturally inside the row. */
body.rtl .cc-picker__list   { direction: ltr; }
body.rtl .cc-picker__opt    { direction: rtl; }
@media (max-width: 480px) {
  .cc-picker__list { min-width: 100%; }
}
.contact-form__submit {
  margin-top: 10px; padding: 14px;
  background: var(--gold); color: #000; border: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s;
}
.contact-form__submit:hover { background: #fff; }
.contact-form__submit[disabled] { opacity: 0.65; cursor: progress; }
.contact-form__feedback {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); padding-top: 6px;
}
.contact-form__feedback--error { color: #ff7a7a; }

@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } .field--row { grid-template-columns: 1fr; } }

/* =============================================================
   PHASE 5 — CPT-driven sections (plans grid, amenities grid,
   gx classes grid, locations map, testimonials marquee).
   Lifted from each demo_3 page's inline <style>.
   ============================================================= */

/* ---------- Promotions: plans grid ----------
   Up to 4 plans per row, always centered. Flex (not grid) so an incomplete
   final row centers naturally via justify-content. Each plan basis is
   (100% - 3*gap) / 4 = (100% - 48px) / 4 at 16px gap. */
.plans__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px; margin-top: 56px;
}
.plans__grid > .plan {
  flex: 1 1 calc((100% - 48px) / 4);
  max-width: calc((100% - 48px) / 4);
}
.plan {
  position: relative;
  padding: 32px 24px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
  transition: transform 0.35s, border-color 0.35s, background 0.35s;
}
.plan::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(245,179,36,0.1), transparent 60%);
  opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.plan:hover { transform: translateY(-4px); border-color: rgba(245,179,36,0.4); background: var(--bg-3); }
.plan:hover::before { opacity: 1; }
.plan--featured {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: rgba(245,179,36,0.45);
}
.plan--featured::after {
  content: 'BEST VALUE'; position: absolute; top: -10px; right: 20px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em;
  padding: 5px 10px; background: var(--gold); color: #000;
}
.plan__label    { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.plan__duration { font-size: clamp(34px, 3.2vw, 48px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-top: 8px; text-transform: uppercase; overflow-wrap: anywhere; }
.plan__price    { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 16px; color: var(--ink); }
.plan__price small { font-size: 13px; color: var(--ink-dim); font-weight: 400; font-family: var(--font-mono); letter-spacing: 0.1em; margin-left: 4px; }
.plan__price del   { color: var(--ink-mute); font-size: 14px; font-weight: 400; margin-right: 8px; }
.plan__rule     { height: 1px; background: var(--line); margin: 22px 0; }
.plan__features { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan__features li {
  font-size: 13px; color: var(--ink-dim); line-height: 1.5;
  padding-left: 20px; position: relative;
}
.plan__features li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 10px; height: 1px; background: var(--gold);
}
.plan__cta {
  margin-top: 24px; padding: 12px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); text-align: center;
  transition: all 0.2s;
  display: block;
}
.plan__cta:hover { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; }

@media (max-width: 1024px) {
  .plans__grid > .plan { flex: 1 1 calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  .plan--featured::after { right: 14px; }
}
@media (max-width: 560px)  {
  .plans__grid > .plan { flex: 1 1 100%; max-width: 100%; }
}

/* ---------- Promotions: "Every plan comes with" amenities grid ---------- */
.amenities { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 80px 0; }
.amenities__title { font-size: clamp(32px, 4vw, 56px); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; margin-bottom: 44px; }
.amenities__title em { font-style: normal; color: var(--gold); font-weight: 300; }
.amenities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.amenity {
  padding: 32px 28px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.amenity:nth-child(3n) { border-right: 0; }
.amenity__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; color: var(--gold); }
.amenity__name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-transform: uppercase; }
.amenity__desc { color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) {
  .amenities__grid { grid-template-columns: 1fr; }
  .amenity, .amenity:nth-child(3n) { border-right: 0; }
}

/* ---------- Locations page ---------- */
.locations { background: var(--bg); padding: 40px 0 120px; }
.locations__cities {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg-2);
  scrollbar-width: thin;
}
.locations__cities::-webkit-scrollbar { height: 4px; }
.locations__cities::-webkit-scrollbar-thumb { background: rgba(245,179,36,0.55); border-radius: 999px; }
.city-tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s;
}
.city-tab:hover  { color: var(--ink); }
.city-tab.active { background: var(--gold); color: #000; font-weight: 600; }

.locations__body {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  margin-top: 24px; min-height: 640px;
  border: 1px solid var(--line);
}
.locations__map      { position: relative; background: #0f0f0f; overflow: hidden; border-right: 1px solid var(--line); }
.locations__map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}
.ksa-map-inline { position: absolute; inset: 48px; }
.ksa-map-inline svg { width: 100%; height: 100%; }
.ksa-map-inline svg path {
  fill: #141414 !important;
  stroke: rgba(245,179,36,0.22) !important;
  stroke-width: 0.8 !important; stroke-linejoin: round;
  transition: fill 0.4s;
}
.ksa-map-inline svg path:hover { fill: #1c1c1c !important; }

.pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; z-index: 3; }
.pin__dot {
  display: block;
  width: 14px; height: 14px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(245,179,36,0.22), 0 0 22px rgba(245,179,36,0.45);
  position: relative; transition: all 0.3s;
}
.pin__dot::after {
  content: ''; position: absolute; inset: -6px; border: 1px solid var(--gold);
  border-radius: 50%; animation: pin-pulse 2s infinite;
}
@keyframes pin-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.pin__label {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  white-space: nowrap;
  background: rgba(10,10,10,0.85); backdrop-filter: blur(8px);
  padding: 4px 10px; border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pin.active .pin__dot   { background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,0.22), 0 0 28px var(--gold); }
.pin.active .pin__label { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 800; }

.locations__panel {
  padding: 40px 36px; background: var(--bg-2);
  overflow-y: auto; max-height: 720px;
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.locations__panel::-webkit-scrollbar { width: 6px; }
.locations__panel::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.locations__panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 999px; }
.locations__panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.locations__panel-city  { font-size: 40px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.locations__panel-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-top: 6px; }

.locations__tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.locations__tab {
  flex: 1; padding: 10px 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  transition: all 0.2s;
}
.locations__tab.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }

.branch-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.branch-list:empty::after {
  content: 'No branches yet in this segment.';
  display: block; padding: 20px; background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.branch {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: var(--bg-3);
  transition: background 0.2s;
}
/* The view.js filter toggles the [hidden] attribute to filter by city +
   gender. `.branch` declares display:flex which would otherwise win over
   the attribute's implicit display:none, so re-assert it here. */
.branch[hidden] { display: none; }
.branch:hover  { background: #1f1f1f; }
.branch__name  { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.branch__hours { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; }
.branch__badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  padding: 4px 8px; border: 1px solid var(--line-2); color: var(--ink-dim);
  text-transform: uppercase;
}
.branch__badge--24 { color: var(--gold); border-color: rgba(245,179,36,0.4); }
.branch__link {
  color: var(--ink-dim); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s;
}
.branch__link:hover { color: var(--gold); }

@media (max-width: 960px) {
  .locations__body { grid-template-columns: 1fr; }
  .locations__map  { min-height: 420px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ksa-map-inline  { inset: 24px; }
}

/* ===== APP CTA ===== */
.app-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #151515 0%, #0c0c0c 100%);
  padding: 100px 0;
}
.app-cta__bg {
  position: absolute; inset: 0;
  opacity: 0.1;
  background-image: url('../images/app-bg-pattern.png');
  background-size: 400px;
  mix-blend-mode: screen;
}
.app-cta__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.8fr 1fr; gap: 48px; align-items: center;
}
.app-cta__phone { position: relative; display: grid; place-items: center; }
.app-cta__phone img {
  max-height: 560px; width: auto;
  filter: drop-shadow(0 40px 80px rgba(245,179,36,0.2));
}
.app-cta__heading {
  font-size: clamp(48px, 6vw, 96px); font-weight: 900; line-height: 0.95;
  letter-spacing: -0.04em; text-transform: uppercase;
  margin-bottom: 24px;
}
.app-cta__heading em { font-style: normal; color: var(--gold); }
.app-cta__desc { font-size: 17px; line-height: 1.6; color: var(--ink-dim); max-width: 520px; margin-bottom: 40px; }
.app-cta__badges { display: flex; gap: 20px; flex-wrap: wrap; }
.app-cta__badge {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px; background: var(--bg-3); border: 1px solid var(--line-2);
  transition: border-color 0.2s;
}
.app-cta__badge:hover { border-color: var(--gold); }
.app-cta__badge img.qr { width: 60px; height: 60px; object-fit: contain; background: #fff; padding: 3px; }
.app-cta__badge-text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); text-transform: uppercase; }
.app-cta__badge-text strong { display: block; color: var(--ink); font-size: 14px; letter-spacing: 0.05em; font-family: var(--font-display); text-transform: none; font-weight: 700; margin-top: 2px; }

/* =============================================================
   PHASE 6 — Join form (4-step accordion + summary panel).
   Lifted verbatim from demo_3/join-now.html inline <style>.
   ============================================================= */
.join { padding: 60px 0 120px; }
.join__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

.step {
  background: var(--bg-2); border: 1px solid var(--line);
  margin-bottom: 14px;
  transition: border-color 0.25s, opacity 0.25s;
}
.step--locked { opacity: 0.55; }
.step--locked .step__head { cursor: not-allowed; }
.step--complete { border-color: rgba(245,179,36,0.35); }
.step__head {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 28px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.step__head:hover { background: rgba(245,179,36,0.04); }
.step--locked .step__head:hover { background: transparent; }
.step__num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em;
  padding: 6px 10px; background: var(--gold); color: #000; font-weight: 600;
  flex: 0 0 auto;
}
.step--locked .step__num { background: var(--line-2); color: var(--ink-dim); }
.step__title { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; flex: 1; color: var(--ink); }
.step__meta  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-right: 14px; }
.step__chev  { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-mute); transition: transform 0.3s, color 0.2s; }
.step.open .step__chev { transform: rotate(180deg); color: var(--gold); }
.step__body  { padding: 0 28px 28px; display: none; }
.step.open .step__body { display: block; }

.sub-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 10px; display: block; }
.sub-label--mt { margin-top: 22px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* The form-skeleton uses .field-row (single dash) for two-up form pairs
   like First/Last name and DOB/Start date. Defaults to two equal columns;
   the @media (max-width: 900px) block at the bottom collapses to one. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pill {
  padding: 10px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  background: var(--bg-3); border: 1px solid var(--line-2); cursor: pointer;
  transition: all 0.2s;
}
.pill:hover { color: var(--ink); border-color: rgba(245,179,36,0.4); }
.pill.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }
.pill:disabled, .pill.disabled { opacity: 0.4; cursor: not-allowed; }

.reveal { display: none; margin-top: 20px; animation: revealIn 0.4s ease; }
.reveal.show { display: block; }
@keyframes revealIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.plan-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-opt {
  position: relative;
  padding: 22px 20px;
  background: var(--bg-3); border: 1px solid var(--line-2); cursor: pointer;
  transition: all 0.2s;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-opt:hover { border-color: rgba(245,179,36,0.45); transform: translateY(-2px); }
.plan-opt.active { border-color: var(--gold); background: linear-gradient(180deg, var(--bg-3), rgba(245,179,36,0.08)); }
.plan-opt--popular::before {
  content: 'Popular';
  position: absolute; top: -10px; right: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em;
  padding: 4px 10px; background: var(--gold); color: #000; text-transform: uppercase;
}
.plan-opt__name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; }
.plan-opt__duration { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; }
.plan-opt__price { color: var(--gold); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.plan-opt__price small { color: var(--ink-mute); font-size: 11px; letter-spacing: 0.08em; margin-left: 4px; font-family: var(--font-mono); font-weight: 400; }
.plan-opt__old { text-decoration: line-through; font-size: 12px; color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: 0.08em; }
.plan-opt__badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-dim); text-transform: uppercase; }
.plan-opt__benefits {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; line-height: 1.5; color: var(--ink-dim);
}
.plan-opt__benefits li {
  position: relative; padding-inline-start: 16px;
}
.plan-opt__benefits li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
[dir="rtl"] .plan-opt__benefits li,
.rtl .plan-opt__benefits li { padding-inline-start: 16px; padding-inline-end: 0; }

.pay-options { display: flex; flex-direction: column; gap: 10px; }
.pay-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--bg-3); border: 1px solid var(--line-2); cursor: pointer;
  transition: all 0.2s;
}
.pay-opt:hover  { border-color: rgba(245,179,36,0.45); }
.pay-opt.active { border-color: var(--gold); }
/* "Coming soon" methods (Tabby/Tamara pre-launch): visible, not selectable. */
.pay-opt--soon { opacity: 0.55; cursor: default; }
.pay-opt--soon:hover { border-color: var(--line); }
.pay-opt__soon {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(245,179,36,0.45);
  padding: 4px 8px; white-space: nowrap;
}
/* Embedded Tap card fields (step 4). The inputs are Tap-hosted iframes and
   Tap's v1 widget draws a WHITE card panel — present it as a deliberate
   "bank card" sitting on the dark step, framed by a slim gold-tinted well. */
.card-element-wrap { margin-top: 18px; }
.card-element-wrap .sub-label { margin-bottom: 10px; }
#in2f-card-element {
  background: linear-gradient(180deg, rgba(245,179,36,0.10), rgba(245,179,36,0.02));
  border: 1px solid rgba(245,179,36,0.35);
  padding: 16px; min-height: 52px;
  max-width: 520px;
}
#in2f-card-element:focus-within { border-color: var(--gold); }
#in2f-card-element iframe { border-radius: 10px; overflow: hidden; }
.pay-opt__label { font-weight: 700; font-size: 14px; }
.pay-opt__sub   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; }
.pay-opt__radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); flex-shrink: 0; position: relative; }
.pay-opt.active .pay-opt__radio { border-color: var(--gold); }
.pay-opt.active .pay-opt__radio::after {
  content: ''; position: absolute; inset: 3px; background: var(--gold); border-radius: 50%;
}

.terms { display: flex; gap: 12px; padding: 16px; background: var(--bg-3); border: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin-top: 20px; }
.terms input { accent-color: var(--gold); margin-top: 2px; flex: 0 0 auto; }
.terms a { color: var(--gold); }

/* Membership agreement (Sentinel GetTerms) — read link + modal */
.terms-read {
  display: block;
  background: none; border: 0; padding: 0; margin: 12px 0 4px;
  color: var(--gold); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.terms-read:hover { color: #fff; }
.terms-modal {
  border: 1px solid var(--line-2); padding: 0;
  background: var(--bg-2); color: var(--ink);
  width: min(760px, 92vw);
  /* The theme's global reset zeroes margins, which kills the UA stylesheet's
     dialog centering (position:fixed; inset:0; margin:auto) — restore it so
     the modal centers on both axes. */
  position: fixed; inset: 0; margin: auto;
  max-height: min(80vh, 720px);
}
.terms-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.terms-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2);
}
.terms-modal__title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.terms-modal__close {
  background: none; border: 1px solid var(--line-2); color: var(--ink-dim);
  width: 32px; height: 32px; cursor: pointer; flex: 0 0 auto;
  transition: color 0.2s, border-color 0.2s;
}
.terms-modal__close:hover { color: var(--gold); border-color: var(--gold); }
.terms-modal__body { padding: 8px 24px 26px; overflow-y: auto; max-height: min(66vh, 640px); }
.terms-modal__heading { font-size: 13px; font-weight: 800; color: var(--ink); margin: 18px 0 4px; white-space: pre-line; }
.terms-modal__item { font-size: 13px; line-height: 1.7; color: var(--ink-dim); margin: 8px 0; white-space: pre-line; }
body.rtl .terms-modal__body,
body.rtl .terms-modal__head { text-align: right; }

.proceed {
  margin-top: 22px; padding: 14px 22px;
  background: var(--gold); color: #000; border: 0;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.proceed:hover:not(:disabled) { background: #fff; }
.proceed:disabled { opacity: 0.45; cursor: not-allowed; }

.summary {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 28px 28px 24px;
}
.summary__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.summary__row   { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font-size: 13px; color: var(--ink-dim); }
.summary__row strong { color: var(--ink); font-weight: 600; font-family: var(--font-display); text-align: right; }
.summary__row.total  { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; font-size: 20px; color: var(--ink); font-weight: 800; }
.summary__row.total .v { color: var(--gold); }
.summary__fees   { display: none; }
.summary__fees.show { display: block; }
.summary__freeze { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; padding: 10px 12px; background: rgba(245,179,36,0.06); border: 1px dashed rgba(245,179,36,0.3); margin-top: 16px; display: none; }
.summary__freeze.show { display: block; }
.summary__note   { font-size: 11px; color: var(--ink-mute); padding: 10px 12px; background: var(--bg-3); border-left: 2px solid var(--gold); margin-top: 14px; line-height: 1.5; display: none; }
.summary__note.show { display: block; }
.summary__cta    { width: 100%; margin-top: 20px; padding: 14px; background: var(--gold); color: #000; border: 0; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, opacity 0.2s; }
.summary__cta:hover:not(:disabled) { background: #fff; }
.summary__cta:disabled { opacity: 0.45; cursor: not-allowed; }
.summary__ssl    { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; text-align: center; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.summary__error  { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #ff7a7a; padding: 10px 12px; background: rgba(255,122,122,0.06); border-left: 2px solid #ff7a7a; margin-top: 14px; display: none; }
.summary__error.show { display: block; }

/* Gender split — full-width 2-column cards (Ladies | Men). Layout pulled
   from demo_1; visuals stay in the dark/gold theme. */
.gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gender-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 18px 16px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  cursor: pointer; transition: all 0.2s;
  text-align: center;
}
.gender-card:hover  { border-color: rgba(245,179,36,0.45); }
.gender-card.active { border-color: var(--gold); background: linear-gradient(180deg, var(--bg-3), rgba(245,179,36,0.08)); }
.gender-card[hidden] { display: none; }
.gender-card__title { font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.gender-card__desc  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; }
.gender-card.active .gender-card__title { color: var(--gold); }

/* Branch picker — 3-column card grid with image header (placeholder if
   the CPT row has no image_url) and a city pin under the name. */
.branch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nearest-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px; padding: 7px 12px;
  background: none; border: 1px solid var(--line-2); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.nearest-toggle svg { width: 12px; height: 12px; }
.nearest-toggle:hover { color: var(--gold); border-color: rgba(245,179,36,0.45); }
.nearest-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.nearest-toggle[disabled] { opacity: 0.6; cursor: progress; }
.branch-card__dist { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--gold); white-space: nowrap; }
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.branch-card {
  display: flex; flex-direction: column;
  background: var(--bg-3); border: 1px solid var(--line-2);
  cursor: pointer; transition: all 0.2s;
  overflow: hidden;
  text-align: left;
  padding: 0;
}
body.rtl .branch-card { text-align: right; }
.branch-card:hover  { border-color: rgba(245,179,36,0.45); transform: translateY(-2px); }
.branch-card.active { border-color: var(--gold); background: linear-gradient(180deg, var(--bg-3), rgba(245,179,36,0.08)); }
.branch-card__img {
  height: 110px;
  background: rgba(245,179,36,0.04);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.branch-card__img-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-card__img-placeholder { color: rgba(245,179,36,0.55); display: flex; align-items: center; justify-content: center; }
.branch-card__info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.branch-card__name { font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.branch-card.active .branch-card__name { color: var(--gold); }
.branch-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.branch-card__location { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.branch-card__location svg { flex: 0 0 auto; }
.branch-card__badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; padding: 2px 6px; background: rgba(245,179,36,0.12); color: var(--gold); text-transform: uppercase; }

/* Payment row — icon tile + label + radio. Brands inherit currentColor for
   inline SVGs; image icons (when admin sets icon_url) display at natural
   contrast inside a neutral tile. */
.pay-opt { gap: 14px; }
.pay-opt__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--gold);
  flex: 0 0 auto;
}
.pay-opt__icon-img { max-width: 28px; max-height: 28px; object-fit: contain; display: block; }
.pay-opt__body { flex: 1; min-width: 0; }
.pay-opt__radio { margin-left: auto; }
body.rtl .pay-opt__radio { margin-left: 0; margin-right: auto; }

.field .hint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; margin-top: 2px; }
.field .hint--error { color: #ff7a7a; letter-spacing: 0.08em; }
.field input[aria-invalid="true"] { border-color: rgba(255, 122, 122, 0.6); }

@media (max-width: 900px) {
  .join__grid   { grid-template-columns: 1fr; }
  .summary      { position: static; }
  .plan-picker  { grid-template-columns: 1fr; }
  .field-row    { grid-template-columns: 1fr; }
  .branch-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .branch-grid { grid-template-columns: 1fr; }
  .gender-grid { grid-template-columns: 1fr; }
}

/* ---------- Status shortcode (thank-you / failure pages) ----------
   The card lives inside `wp:post-content`, whose default flow-root parent
   collapses the card's vertical margin out into the document. Wrap it in
   .in2-status-wrap to break margin collapse, give the page a comfortable
   minimum height so the box visually centers between header and footer,
   and add explicit padding instead of relying on margin. */
.in2-status-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 20px;
  min-height: 60vh;
}
.in2-status {
  max-width: 720px;
  width: 100%;
  margin: 0;
  padding: 56px 48px;
  background: var(--bg-2); border: 1px solid var(--line);
  text-align: center;
}
.in2-status__icon  { font-size: 48px; line-height: 1; margin-bottom: 18px; }
.in2-status__title { font-size: clamp(28px, 3.4vw, 48px); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.in2-status__sub   { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 16px auto; max-width: 56ch; }
.in2-status__ref   { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; padding: 12px 16px; background: var(--bg-3); border-left: 2px solid var(--gold); display: inline-flex; gap: 10px; }