/* 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?17897586814349*/
/* 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;
  /* 2026-09-18: same trap the homepage #offer had. GHL authors its fields at 50%
     but gates the two-column rules behind `@media (min-width: 1025px)`, and a
     cross-origin iframe evaluates that against ITS OWN viewport, not the window.
     At 640px the frame never reached the breakpoint, so every field rendered full
     width. 1070px clears it and matches the width the homepage form settled at,
     so both ZOOM booking surfaces present the form identically. */
  max-width: 1070px;
  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?17897586814349 */