/* Start:/local/templates/union/assets/css/zoom_dark_chrome.css?17843509914853*/
/* ZOOM dark inner-page CHROME (presentation only) — shared across ZOOM dark pages
   (booking, pricing, and any future dark inner page). Loaded per-page via addCss.

   The template header is transparent and the body is white, so on a dark page the
   header reads white and the footer wave reveals a white band. These rules darken the
   body (so the transparent header + wave areas go dark) and relight the header text +
   dropdowns to a light-on-dark treatment matching the homepage. Every rule is
   body.s1-scoped (ZOOM only, never MIX/UNION) and only applies on pages that addCss
   this file — it cannot leak to other pages. The homepage :root tokens are homepage-
   scoped and NOT loaded here, so the palette is declared on body.s1 below. */

body.s1 {
  --zr-console: #131316;   /* primary console ground */
  --zr-console-2: #16161a; /* alt ground (dropdown panels) */
  --zr-line: #2c2c33;      /* hairline borders */
  --zr-pink: #FF006A;      /* ZOOM primary */
  --zr-ink: #f4f4f5;       /* light heading/body ink */
  --zr-dim: #8a8a95;       /* secondary copy */
  --zr-muted: #BFBDBB;     /* dropdown item ink */
  --zr-radius: 14px;
  --zr-radius-pill: 999px;
  --zr-ease-out: cubic-bezier(.23, 1, .32, 1);
  /* dark page: the template header is transparent, so its "white" is just the body
     showing through — darkening the body turns the header (and the footer wave gap) dark. */
  background: var(--zr-console) !important;
}

/* "Open 24/7" ships black (invisible on dark) and is awkwardly placed; hide it like
   the homepage does (it was already unreadable on dark, so nothing visible is lost). */
body.s1 header.header .open24 { display: none !important; }

/* mobile burger bars (closed hamburger AND the open "X") ship black; relight for the
   dark header so the menu control is visible. The bars are ::before/span/::after. */
body.s1 header.header .header__burger span,
body.s1 header.header .header__burger::before,
body.s1 header.header .header__burger::after {
  background: var(--zr-ink) !important;
}

/* utility bar: white location + phone, pink icons */
body.s1 header.header .header-city { color: #fff !important; }
body.s1 header.header .header-city .fa-map-marker,
body.s1 header.header .header-city .marker-img { color: var(--zr-pink) !important; }
body.s1 header.header .head-phone a { color: #fff !important; }
body.s1 header.header .head-phone a .fa-phone { color: var(--zr-pink) !important; }

/* top-level nav links → light */
body.s1 header.header .menu > li > a { color: var(--zr-ink) !important; }
@media (hover: hover) and (pointer: fine) {
  body.s1 header.header .menu > li > a:hover { color: var(--zr-pink) !important; }
}

/* desktop dropdown → console panel + light items (was light plate + black text) */
body.s1 header.header .dropdown-content {
  background: var(--zr-console-2) !important;
  border: 1px solid var(--zr-line) !important;
}
body.s1 header.header .dropdown-content li a { color: var(--zr-muted) !important; }
@media (hover: hover) and (pointer: fine) {
  body.s1 header.header .dropdown-content li a:hover {
    color: var(--zr-ink) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }
}

/* mobile burger drawer → console drawer (same treatment as the homepage) */
@media (max-width: 767px) {
  body.s1 #navbar-collapse .navbar-nav.menu {
    background: var(--zr-console) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.s1 #navbar-collapse,
  body.s1 .header .navbar-expand-md .navbar-collapse { border: 0 !important; }
  body.s1 #navbar-collapse .navbar-nav .nav-item {
    border-bottom: 1px solid var(--zr-line) !important;
  }
  body.s1 #navbar-collapse .navbar-nav .nav-item:last-child { border-bottom: 0 !important; }
  body.s1 #navbar-collapse .navbar-nav .nav-link { color: var(--zr-ink) !important; }
  body.s1 #navbar-collapse .navbar-nav .nav-link.active,
  body.s1 #navbar-collapse .navbar-nav .nav-item:active .nav-link { color: var(--zr-pink) !important; }
  body.s1 #navbar-collapse .dropdown-mark { color: var(--zr-dim) !important; }
  body.s1 #navbar-collapse .dropdown-content {
    background: var(--zr-console-2) !important;
    border: 1px solid var(--zr-line) !important;
    border-radius: 10px;
  }
  body.s1 #navbar-collapse .dropdown-content li a { color: var(--zr-muted) !important; }
}

/* footer wave (#svgBtmLine): a transparent SVG whose dark path normally rises out of a
   WHITE page. With the dark body it already blends, but back it explicitly with the
   console ground so the last section flows into the dark footer with no light band. */
body.s1 #svgBtmLine {
  /* background-COLOR only (not the shorthand) so a page can layer its own grid
     texture on #svgBtmLine via background-image without this rule wiping it. */
  background-color: var(--zr-console) !important;
}

/* End */


/* Start:/local/templates/union/assets/css/zoom_booking.css?17843509913873*/
/* ZOOM /booking/ — booking SECTION styles (presentation only).
   The dark page chrome (dark body, header relight, footer wave) lives in the shared
   zoom_dark_chrome.css, which booking/index.php loads alongside this file — so the
   palette tokens (--zr-*) are declared there on body.s1 and inherited here.

   This file styles only the #megasale booking section: dark console ground, a seamless
   GHL form (no "window in a window"), and a Manual / Instant booking toggle. The shared
   template.js .jsBookBtn handler does the toggle switching; this only styles the markup. */

body.s1 #megasale {
  background: var(--zr-console) !important;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem) !important;
}

/* single page title (promoted h2 -> h1 in the markup) reads light on the dark ground;
   keep the template's pink underline accent. */
body.s1 #megasale .section-title {
  color: var(--zr-ink) !important;
}
body.s1 #megasale .section-title::after {
  background: var(--zr-pink) !important;
}

/* ---- Manual / Instant toggle ------------------------------------------------- */
body.s1 #megasale .zr-book-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
  background: var(--zr-console);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius-pill);
}
body.s1 #megasale .zr-book-toggle .jsBookBtn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0 !important;
  padding: 11px clamp(16px, 4vw, 26px);
  border-radius: var(--zr-radius-pill);
  background: transparent;
  color: var(--zr-dim);
  font: 700 clamp(12px, 1.1vw, 14px)/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--zr-ease-out), background-color 160ms var(--zr-ease-out);
}
body.s1 #megasale .zr-book-toggle .jsBookBtn:hover { color: var(--zr-ink); }
body.s1 #megasale .zr-book-toggle .jsBookBtn.active {
  background: var(--zr-pink);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(255, 0, 106, 0.55);
}

/* ---- booking blocks: manual (form) default-visible, instant hidden ----------- */
body.s1 #megasale .jsBookBlocks { display: none; }
body.s1 #megasale #jsBookBlock_BOOK { display: block; }

/* ---- seamless GHL form: drop the frame + inline 40px radius so it embeds ------ */
body.s1 #megasale #jsBookBlock_BOOK iframe,
body.s1 #megasale iframe#inline-KFE55nMAsNM3aESc8WGO {
  display: block;
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
  border: none !important;
  border-radius: 0 !important;   /* beat the iframe's inline border-radius:40px */
  background: transparent;
  box-sizing: border-box;
}

/* ---- Instant block: console card that hands off to StudioLink self-serve ------ */
body.s1 #megasale .zr-instant-panel {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--zr-console);
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius);
  text-align: center;
}
body.s1 #megasale .zr-instant-panel p {
  color: var(--zr-dim);
  font: 400 16px/1.6 system-ui, -apple-system, sans-serif;
  margin: 0 auto 1.5rem;
  max-width: 44ch;
}
body.s1 #megasale .zr-instant-panel .zr-instant-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 15px 30px;
  border-radius: var(--zr-radius-pill);
  background: var(--zr-pink);
  color: #fff;
  font: 800 clamp(14px, 1.3vw, 16px)/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(255, 0, 106, 0.6);
  transition: transform 160ms var(--zr-ease-out);
}
body.s1 #megasale .zr-instant-panel .zr-instant-go:hover { transform: translateY(-2px); }
body.s1 #megasale .zr-instant-panel .zr-instant-go:active { transform: scale(0.97); }

/* End */
/* /local/templates/union/assets/css/zoom_dark_chrome.css?17843509914853 */
/* /local/templates/union/assets/css/zoom_booking.css?17843509913873 */