/**
 * SyteHero — Front-end hero layout.
 * Slider is a background layer; overlay content is vertically centered in the column.
 * Updated 2026-02-18: Hero overlay centering (flex on column, slider absolute background).
 * Updated 2026-03-01: Design token integration for glow effects and consistency.
 */

/* Updated 2026-03-05: Utility class renamed to .sytehero-fallback-container for fallback visibility toggles. */
.sytehero-fallback-container {
	display: none !important;
}

/* ========================================================
   FRONTEND DESIGN TOKENS
   Updated 2026-03-01: Frontend-specific tokens for consistency
   ======================================================== */

:root {
	/* Glow color (overridable by shortcode) */
	--sytehero-glow-default: #00e5ff;
	
	/* Transition speeds (match admin) */
	--sytehero-transition-fast: 100ms ease;
	--sytehero-transition-base: 150ms ease;
	--sytehero-transition-slow: 200ms ease;
}

/* ----- Hero layout tunables: defaults; Settings pane and shortcode atts override ----- */
.sytehero-hero-featured,
.sytehero-fhsbg {
  --sytehero-fhsbg-height: 65vh;
  --sytehero-hero-min-height: 500px;
}
.sytehero-hero-featured {
  --glow: var(--sytehero-glow-default);
}

/* Slider as background layer so overlay content can sit on top and be centered. */
.sytehero-fhsbg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit; /* inherit corner-radius from theme wrapper so background clips to rounded edges */
  z-index: 0;
}

/* Defensive reset for Elementor's edit-mode preview iframe: the absolute
 * positioning + overflow:hidden above traps wheel/touch events and locks
 * the editor canvas's scroll. The widget renders a static placeholder in
 * edit mode (HeroSliderWidget::render) and the slider JS bails
 * (sytehero-frontend.js), but if hero markup ever lands in the editor via
 * another path (an HTML/shortcode widget, a cached template), this rule
 * prevents the scroll-lock regression. */
body.elementor-editor-active .sytehero-fhsbg {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 200px;
  overflow: visible;
  pointer-events: none;
}

/* Updated 2026-03-05: Hide SyteHero wrappers when no active slide (including fallback) exists. */
.sytehero-hero-featured.sytehero-no-active-slides,
.sytehero-fhsbg.sytehero-no-active-slides {
  display: none !important;
}

/* Updated 2026-03-05: When the featured shortcode reports zero active slides, hide the slider itself but keep the wrapper available so fallback containers can surface. */
.sytehero-fhsbg[data-has-active-slides="0"],
.sytehero-fhsbg[data-sytehero-has-active-slides="0"] {
  display: block !important;
}

.sytehero-fhsbg[data-has-active-slides="0"] .sytehero-fhsbg__slider,
.sytehero-fhsbg[data-has-active-slides="0"] .sytehero-fhsbg__slider .slides,
.sytehero-fhsbg[data-has-active-slides="0"] .sytehero-fhsbg__slider .swiper-wrapper,
.sytehero-fhsbg[data-has-active-slides="0"] .sytehero-fhsbg__slider .splide__track,
.sytehero-fhsbg[data-sytehero-has-active-slides="0"] .sytehero-fhsbg__slider,
.sytehero-fhsbg[data-sytehero-has-active-slides="0"] .sytehero-fhsbg__slider .slides,
.sytehero-fhsbg[data-sytehero-has-active-slides="0"] .sytehero-fhsbg__slider .swiper-wrapper,
.sytehero-fhsbg[data-sytehero-has-active-slides="0"] .sytehero-fhsbg__slider .splide__track {
  display: none !important;
}

:where([data-sytehero-hero-wrapper="1"][data-has-active-slides="0"],
       [data-sytehero-hero-wrapper="1"][data-sytehero-has-active-slides="0"],
       .sytehero-fhsbg[data-has-active-slides="0"],
       .sytehero-fhsbg[data-sytehero-has-active-slides="0"]) [class*="hero-fallback-container"] {
  display: block !important;
}

/* Variants: Desktop / Tablet / Mobile. Updated 2026-02-18. */
.sytehero-fhsbg--desktop {}
.sytehero-fhsbg--tablet {}
.sytehero-fhsbg--mobile {}
/* Slider and slides fill container height */
.sytehero-fhsbg__slider,
.sytehero-fhsbg__slider .slides,
.sytehero-fhsbg__slider .slides > li,
.sytehero-fhsbg__slider .swiper-wrapper,
.sytehero-fhsbg__slider .splide__track,
.sytehero-fhsbg__slider .splide__list,
.sytehero-fhsbg__slider .sytehero-fhsbg__slide {
  height: 100%;
}

/*
 * Reset FlexSlider's bundled "Polaroid frame" defaults. The bundled
 * stylesheet (lib/flexslider/flexslider.css) sets a 4px white border +
 * 4px border-radius + white background on `.flexslider` — intended for
 * card-style image sliders, wrong for a full-bleed hero. Without this
 * reset, every SyteHero hero on every theme inherits a 4px white
 * gutter on all four sides; the issue was only visible once the
 * Elementor width-collapse fix (v1.0.063) let the slider render at
 * real dimensions.
 */
.sytehero-fhsbg .sytehero-fhsbg__slider.flexslider,
.sytehero-fhsbg .flexslider {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
/* Cover background; image is full bleed.
 *
 * `!important` is required on all three layout properties. Two competing
 * override sources are present on every known deployment:
 *
 * (1) Vendor FlexSlider: `.flexslider .slides img { height: auto }` at
 *     specificity (0,2,1). Because `sytehero-flexslider` is enqueued AFTER
 *     `sytehero-frontend`, a same-specificity rule in this file would lose
 *     the cascade — so the selector is bumped to (0,3,1) via the compound
 *     `.sytehero-fhsbg .sytehero-fhsbg__slide` chain.
 *
 * (2) Theme / Elementor resets: Blocksy's bundle and Elementor's
 *     frontend.css both carry `img { height: auto; … }` rules with
 *     `!important`. A specificity bump alone cannot beat `!important`
 *     declarations, so `!important` is needed on each property.
 *
 * `.sytehero-fhsbg__slide` is present on every engine's slide element
 * (FlexSlider `<li>`, Swiper `.swiper-slide`, Splide `.splide__slide`),
 * so one selector covers all engines. */
.sytehero-fhsbg .sytehero-fhsbg__slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.sytehero-fhsbg__slide {
  position: relative;
  overflow: hidden;
}
.sytehero-fhsbg__slide .sytehero-fhsbg__video,
.sytehero-fhsbg__slide .sytehero-fhsbg__video-embed {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sytehero-fhsbg__slide .sytehero-fhsbg__video-embed {
  border: 0;
  pointer-events: none;
}

/* FlexSlider: prevent smoothHeight from fighting the fixed wrapper height constraint. */
.sytehero-fhsbg .flex-viewport {
  height: 100% !important;
  transition: none !important;
}

/* Swiper: ensure wrapper fills container height. */
.sytehero-fhsbg__slider.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Splide: ensure track/list fill container height. */
.sytehero-fhsbg__slider.splide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sytehero-fhsbg__slider.splide .splide__track {
  height: 100%;
}
.sytehero-fhsbg__slider.splide .splide__list {
  height: 100%;
}

/* ----- Swiper navigation/pagination inside hero slider ----- */
.sytehero-fhsbg__slider.swiper .swiper-button-prev,
.sytehero-fhsbg__slider.swiper .swiper-button-next {
  z-index: 2;
  color: #fff;
}
.sytehero-fhsbg__slider.swiper .swiper-pagination {
  z-index: 2;
}
.sytehero-fhsbg__slider.swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.sytehero-fhsbg__slider.swiper .swiper-pagination-bullet-active {
  background: #fff;
}

/* ----- Splide navigation/pagination inside hero slider ----- */
.sytehero-fhsbg__slider.splide .splide__arrows {
  z-index: 2;
}
.sytehero-fhsbg__slider.splide .splide__arrow {
  background: rgba(0, 0, 0, 0.35);
  opacity: 1;
}
.sytehero-fhsbg__slider.splide .splide__arrow svg {
  fill: #fff;
}
.sytehero-fhsbg__slider.splide .splide__pagination {
  z-index: 2;
  bottom: 0.5em;
}
.sytehero-fhsbg__slider.splide .splide__pagination__page {
  background: rgba(255, 255, 255, 0.6);
}
.sytehero-fhsbg__slider.splide .splide__pagination__page.is-active {
  background: #fff;
}

/* Updated 2026-02-28: Letterbox option shows full video and fills gaps. */
.sytehero-fhsbg[data-video-letterbox-enabled="1"] .sytehero-fhsbg__slide {
  background-color: var(--sytehero-video-letterbox-color, #000);
}
.sytehero-fhsbg[data-video-letterbox-enabled="1"] .sytehero-fhsbg__slide .sytehero-fhsbg__video,
.sytehero-fhsbg[data-video-letterbox-enabled="1"] .sytehero-fhsbg__slide .sytehero-fhsbg__video-embed {
  object-fit: contain;
  background-color: transparent;
}

/* Updated 2026-03-05: Per-slide video letterbox overrides (cover | letterbox). */
.sytehero-fhsbg__slide[data-video-letterbox="cover"] .sytehero-fhsbg__video,
.sytehero-fhsbg__slide[data-video-letterbox="cover"] .sytehero-fhsbg__video-embed {
  object-fit: cover;
}
.sytehero-fhsbg__slide[data-video-letterbox="letterbox"] {
  background-color: var(--sytehero-video-letterbox-color, #000);
}
.sytehero-fhsbg__slide[data-video-letterbox="letterbox"] .sytehero-fhsbg__video,
.sytehero-fhsbg__slide[data-video-letterbox="letterbox"] .sytehero-fhsbg__video-embed {
  object-fit: contain;
  background-color: transparent;
}

/* ----- Hero column: vertical centering and overlay on top ----- */
/* Column that contains the shortcode gets a min-height and flex centering so overlay
   content is vertically centered; theme flex-start is overridden so content is not stuck at top. */
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg) {
  position: relative;
  /* border-box ensures padding is included inside min-height regardless of theme box-model. */
  box-sizing: border-box;
  /* Clears theme overflow:hidden (e.g. Avada fusion-column-has-shadow) so the abs-pos
     below-cta countdown isn't clipped. Safe: .sytehero-fhsbg retains its own overflow:hidden
     and inherits border-radius, so background images/video are still clipped to rounded corners. */
  overflow: visible !important;
  min-height: var(--sytehero-fhsbg-height, 65vh);
  max-height: var(--sytehero-fhsbg-height, 65vh);
  /* Equal top/bottom padding preserves justify-content:center symmetry while reserving edge
     buffers. margin-top:% is width-relative so the CTA can floor near the hero edge on wide
     viewports; padding-bottom ensures the countdown has visible space. background covers the
     full padded area via position:absolute;inset:0 so no visual gap is introduced. */
  padding-top: clamp(16px, 2vh, 24px);
  padding-bottom: clamp(16px, 2vh, 24px);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Avada: also clear overflow on the layout-column parent so the abs-pos
   below-cta countdown isn't double-clipped. The inner column-wrapper rule
   alone is insufficient when Avada adds overflow:hidden at the column level
   (e.g. fusion-column-has-shadow, box-shadow, or certain layout modes).
   Divi (.et_pb_row) and Elementor (.e-con parent) do not currently clip at
   the parent level, but if they do in the future, add equivalent rules here. */
.fusion-layout-column:has([data-sytehero-hero-wrapper="1"]) {
  overflow: visible !important;
}

/* ----- Countdown buffer: increase wrapper padding to clear countdown location ----- */
[data-sytehero-hero-wrapper="1"].sytehero-hero--has-banner-top {
  padding-top: 44px;
}
[data-sytehero-hero-wrapper="1"].sytehero-hero--has-banner-bottom {
  padding-bottom: 44px;
}
[data-sytehero-hero-wrapper="1"].sytehero-hero--has-badge-bottom {
  padding-bottom: 72px;
}
[data-sytehero-hero-wrapper="1"].sytehero-hero--has-badge-top {
  padding-top: 72px;
}
@media (max-width: 767px) {
  [data-sytehero-hero-wrapper="1"].sytehero-hero--has-banner-top {
    padding-top: 36px;
  }
  [data-sytehero-hero-wrapper="1"].sytehero-hero--has-banner-bottom {
    padding-bottom: 36px;
  }
  [data-sytehero-hero-wrapper="1"].sytehero-hero--has-badge-bottom {
    padding-bottom: 56px;
  }
  [data-sytehero-hero-wrapper="1"].sytehero-hero--has-badge-top {
    padding-top: 56px;
  }
}

/* Desktop wrappers keep the hero min-height floor; tablet/mobile rules drop the master class to honor viewport height. */
[data-sytehero-hero-wrapper="1"].sytehero-hero-featured:not(.sytehero-hero-featured--tablet):not(.sytehero-hero-featured--mobile):has(.sytehero-fhsbg) {
  min-height: max(var(--sytehero-fhsbg-height, 65vh), var(--sytehero-hero-min-height, 500px));
  max-height: max(var(--sytehero-fhsbg-height, 65vh), var(--sytehero-hero-min-height, 500px));
}

/* Overlay elements (siblings of .sytehero-fhsbg) stack on top of the slider.
   Excludes .sytehero-countdown which uses position:absolute for precise anchoring
   below the CTA — forcing it to relative would break its coordinates AND add it
   to the normal flow, inflating the hero height. */
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg) > *:not(.sytehero-fhsbg):not(.sytehero-countdown) {
  position: relative;
  z-index: 1;
}

/* Updated 2026-02-20: Prevent flash-of-overlay before JS injects per-slide text/visibility.
   Gate overlay nodes until the wrapper is marked ready by JS. */
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) .sytehero-hero-cta,
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) [class*="hero-hero-cta-"],
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) .sytehero-hero-text-area-1,
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) .sytehero-hero-text-area-2,
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) [class*="hero-hero-text-area-1-"],
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg):not([data-sytehero-ready="1"]) [class*="hero-hero-text-area-2-"] {
  opacity: 0 !important;
}

/* Updated 2026-03-01: Hide overlay copy with smooth transition until the slider paints to avoid FOUC. */
.sytehero-hero-cta,
[class*="hero-hero-cta-"],
.sytehero-hero-text-area-1,
[class*="hero-hero-text-area-1-"],
.sytehero-hero-text-area-2,
[class*="hero-hero-text-area-2-"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sytehero-transition-base, 150ms ease);
}

/* Updated 2026-03-01: Smooth reveal with token-based timing once ready. */
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] .sytehero-hero-cta,
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] [class*="hero-hero-cta-"],
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] .sytehero-hero-text-area-1,
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] .sytehero-hero-text-area-2,
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] [class*="hero-hero-text-area-1-"],
[data-sytehero-hero-wrapper="1"][data-sytehero-ready="1"] [class*="hero-hero-text-area-2-"] {
  transition: opacity var(--sytehero-transition-base, 150ms ease);
}

/* ----- CTA button: prevent full-width stretch and maintain centering ----- */
/* The hero wrapper is a flex column (align-items defaults to stretch). The theme wraps
   the button in a container div that stretches. Converting the wrapper to a flex container
   with justify-content:center prevents stretch and keeps the button centered. */
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg) > div:has(.sytehero-hero-cta),
[data-sytehero-hero-wrapper="1"]:has(.sytehero-fhsbg) > div:has([class*="hero-hero-cta-"]) {
  display: flex;
  justify-content: center;
}
.sytehero-hero-cta,
[class*="hero-hero-cta-"] {
  align-self: flex-start;
}

/* ----- Glow effects (CTA/Text Areas) ----- */
/* Updated 2026-02-20: Apply glow per overlay target via CSS vars. */
.sytehero-hero-cta {
  box-shadow: 0 0 12px var(--sytehero-glow-cta, var(--glow, transparent)), 0 0 24px var(--sytehero-glow-cta, var(--glow, transparent));
}
[class*="hero-hero-cta-"] {
  box-shadow: 0 0 12px var(--sytehero-glow-cta, var(--glow, transparent)), 0 0 24px var(--sytehero-glow-cta, var(--glow, transparent));
}
.sytehero-hero-text-area-1 {
  text-shadow: 0 0 10px var(--sytehero-glow-text-1, transparent), 0 0 20px var(--sytehero-glow-text-1, transparent);
}
[class*="hero-hero-text-area-1-"] {
  text-shadow: 0 0 10px var(--sytehero-glow-text-1, transparent), 0 0 20px var(--sytehero-glow-text-1, transparent);
}
.sytehero-hero-text-area-2 {
  text-shadow: 0 0 10px var(--sytehero-glow-text-2, transparent), 0 0 20px var(--sytehero-glow-text-2, transparent);
}
[class*="hero-hero-text-area-2-"] {
  text-shadow: 0 0 10px var(--sytehero-glow-text-2, transparent), 0 0 20px var(--sytehero-glow-text-2, transparent);
}

/* ----- Per-view margin-top overrides (class-scoped) ----- */
/* Updated 2026-02-20: Apply margin-top via CSS rule (value set by JS as a CSS var). */
/* Updated 2026-04-19: Floor at 5px so configured margins never collapse the
   baseline gap between TA1 / TA2 / CTA. */
.sytehero-hero-cta.sytehero-margin-top--on,
[class*="hero-hero-cta-"].sytehero-margin-top--on,
.sytehero-hero-text-area-1.sytehero-margin-top--on,
.sytehero-hero-text-area-2.sytehero-margin-top--on,
[class*="hero-hero-text-area-1-"].sytehero-margin-top--on,
[class*="hero-hero-text-area-2-"].sytehero-margin-top--on {
  margin-top: max(5px, var(--sytehero-margin-top, 0px)) !important;
}

/* Baseline 5px minimum spacing between the second text area / CTA and the
   element above when no per-element margin is configured. Scoped under the
   hero wrapper so it never bleeds into other theme blocks. The `--on` rule
   above wins via `!important` once authors specify margins. */
[data-sytehero-hero-wrapper="1"] .sytehero-hero-text-area-2,
[data-sytehero-hero-wrapper="1"] [class*="hero-hero-text-area-2-"],
[data-sytehero-hero-wrapper="1"] .sytehero-hero-cta,
[data-sytehero-hero-wrapper="1"] [class*="hero-hero-cta-"] {
  margin-top: 5px;
}

/* ----- Sale Countdown Timer Overlay ----- */
.sytehero-countdown {
  z-index: 10;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.7s ease;
  box-sizing: border-box;
}
.sytehero-countdown__unit {
  text-align: center;
  line-height: 1;
}
.sytehero-countdown__digits {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.sytehero-countdown__label {
  display: block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.sytehero-countdown__sep {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.3);
  line-height: 1.2;
  align-self: flex-start;
}

/* Position: Floating Badge (frosted glass pill) */
.sytehero-countdown--bottom-right {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Position: Below CTA (accent badge chips — absolutely anchored 8px below the button) */
.sytehero-countdown--below-cta {
  position: absolute;   /* JS sets top/left/width via anchorBelowCta() */
  opacity: 0;           /* JS controls visibility via opacity transitions */
  justify-content: center;
  gap: 4px;
}
.sytehero-countdown--below-cta .sytehero-countdown__unit {
  background: rgba(0,0,0,0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 6px;
  border-radius: 3px;
}
.sytehero-countdown--below-cta .sytehero-countdown__digits {
  font-size: 13px;
}
.sytehero-countdown--below-cta .sytehero-countdown__label {
  font-size: 7px;
  color: rgba(255,255,255,0.7);
}
.sytehero-countdown--below-cta .sytehero-countdown__sep {
  display: none;
}

/* Position: Discreet Banner (full-width urgency bar) */
.sytehero-countdown--top-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0;           /* JS controls visibility per active slide */
  background: rgba(0,0,0,0.75);
  padding: 6px 0;
  justify-content: center;
  gap: 12px;
}
.sytehero-countdown__banner-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
}
.sytehero-countdown__banner-digits {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sytehero-countdown--top-banner .sytehero-countdown__digits {
  font-size: 14px;
  letter-spacing: 1px;
}
.sytehero-countdown--top-banner .sytehero-countdown__label {
  display: none;
}
.sytehero-countdown--top-banner .sytehero-countdown__sep {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}

/* Responsive: smaller countdown on mobile */
@media (max-width: 767px) {
  .sytehero-countdown--bottom-right {
    bottom: 8px;
    right: 8px;
    padding: 6px 10px;
  }
  .sytehero-countdown__digits {
    font-size: 14px;
  }
  .sytehero-countdown__sep {
    font-size: 14px;
  }
  .sytehero-countdown--top-banner {
    padding: 4px 0;
  }
  .sytehero-countdown__banner-label {
    font-size: 9px;
  }
  .sytehero-countdown--top-banner .sytehero-countdown__digits {
    font-size: 12px;
  }
}

/* Countdown device-visibility: hide at disabled breakpoints. */
@media (min-width: 1200px) {
  .sytehero-countdown--hide-desktop {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sytehero-countdown--hide-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .sytehero-countdown--hide-mobile {
    display: none !important;
  }
}

/* ----- Floating Badge: 8 placement positions ----- */
/* Default (bottom-right) is already set by .sytehero-countdown--bottom-right base rules. */
.sytehero-countdown--badge-top-right    { top: 16px;  right: 16px;  bottom: auto; left: auto; }
.sytehero-countdown--badge-top-center   { top: 16px;  left: 50%;    bottom: auto; right: auto; transform: translateX(-50%); }
.sytehero-countdown--badge-top-left     { top: 16px;  left: 16px;   bottom: auto; right: auto; }
.sytehero-countdown--badge-middle-right { top: 50%;   right: 16px;  bottom: auto; left: auto;  transform: translateY(-50%); }
.sytehero-countdown--badge-middle-left  { top: 50%;   left: 16px;   bottom: auto; right: auto; transform: translateY(-50%); }
.sytehero-countdown--badge-bottom-right { bottom: 16px; right: 16px; top: auto; left: auto; }
.sytehero-countdown--badge-bottom-center{ bottom: 16px; left: 50%;   top: auto; right: auto; transform: translateX(-50%); }
.sytehero-countdown--badge-bottom-left  { bottom: 16px; left: 16px;  top: auto; right: auto; }

@media (max-width: 767px) {
  .sytehero-countdown--badge-top-right    { top: 8px;  right: 8px; }
  .sytehero-countdown--badge-top-center   { top: 8px; }
  .sytehero-countdown--badge-top-left     { top: 8px;  left: 8px; }
  .sytehero-countdown--badge-middle-right { right: 8px; }
  .sytehero-countdown--badge-middle-left  { left: 8px; }
  .sytehero-countdown--badge-bottom-right { bottom: 8px; right: 8px; }
  .sytehero-countdown--badge-bottom-center{ bottom: 8px; }
  .sytehero-countdown--badge-bottom-left  { bottom: 8px; left: 8px; }
}

/* ----- Top-Strip: bottom placement ----- */
.sytehero-countdown--top-banner-bottom {
  top: auto;
  bottom: 0;
}

/* ----- Countdown themes: Floating Badge ----- */
.sytehero-countdown--bottom-right.sytehero-countdown--theme-urgency {
  background: rgba(220,38,38,0.9);
  border-color: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: sytehero-countdown-pulse 2s ease-in-out infinite;
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-minimal {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-minimal .sytehero-countdown__digits {
  color: #1a202c;
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-minimal .sytehero-countdown__label {
  color: rgba(26,32,44,0.5);
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-minimal .sytehero-countdown__sep {
  color: rgba(26,32,44,0.3);
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-brand {
  background: var(--sytehero-countdown-brand-accent, var(--sytehero-countdown-accent, #e53e3e));
  border-color: var(--sytehero-countdown-brand-border, rgba(255,255,255,0.15));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ----- Countdown themes: Below CTA ----- */
.sytehero-countdown--below-cta.sytehero-countdown--theme-urgency .sytehero-countdown__unit {
  background: rgba(220,38,38,0.9);
  border-color: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: sytehero-countdown-pulse 2s ease-in-out infinite;
}
.sytehero-countdown--below-cta.sytehero-countdown--theme-minimal .sytehero-countdown__unit {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
}
.sytehero-countdown--below-cta.sytehero-countdown--theme-brand .sytehero-countdown__unit {
  background: var(--sytehero-countdown-brand-accent, var(--sytehero-countdown-accent, #e53e3e));
}

/* ----- Countdown themes: Discreet Banner ----- */
.sytehero-countdown--top-banner.sytehero-countdown--theme-urgency {
  background: rgba(220,38,38,0.9);
  animation: sytehero-countdown-pulse 2s ease-in-out infinite;
}
.sytehero-countdown--top-banner.sytehero-countdown--theme-minimal {
  background: rgba(255,255,255,0.92);
}
.sytehero-countdown--top-banner.sytehero-countdown--theme-minimal .sytehero-countdown__banner-label {
  color: #64748b;
}
.sytehero-countdown--top-banner.sytehero-countdown--theme-minimal .sytehero-countdown__digits {
  color: #1a202c;
}
.sytehero-countdown--top-banner.sytehero-countdown--theme-minimal .sytehero-countdown__sep {
  color: rgba(26,32,44,0.3);
}
.sytehero-countdown--top-banner.sytehero-countdown--theme-brand {
  background: linear-gradient(90deg, var(--sytehero-countdown-brand-accent, var(--sytehero-countdown-accent, #e53e3e)), var(--sytehero-countdown-brand-bg, var(--sytehero-countdown-accent-dark, #c53030)));
}

/* ----- Urgency pulse keyframe ----- */
@keyframes sytehero-countdown-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0.25); }
}

/* ----- Countdown theme: Custom (CSS custom properties set via JS inline styles) ----- */
/*
 * NOTE: --bottom-right is the internal position value used for ALL badge/floating
 * countdown variants, not just the literal bottom-right corner. The badge countdown
 * always uses `position` = 'bottom-right' as its base identifier; actual visual
 * placement (top-center, middle-left, etc.) is controlled by separate
 * .sytehero-countdown--badge-* placement classes set dynamically by JS.
 */
.sytehero-countdown--theme-custom.sytehero-countdown--bottom-right {
  background: var(--sytehero-countdown-custom-bg, #1e293b);
  border: 1px solid var(--sytehero-countdown-custom-border, #475569);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sytehero-countdown--theme-custom .sytehero-countdown__digits {
  color: var(--sytehero-countdown-custom-text, #ffffff);
}
.sytehero-countdown--theme-custom .sytehero-countdown__label {
  color: var(--sytehero-countdown-custom-text, #ffffff);
  opacity: 0.6;
}
.sytehero-countdown--theme-custom .sytehero-countdown__sep {
  color: var(--sytehero-countdown-custom-accent, #f59e0b);
}
.sytehero-countdown--theme-custom.sytehero-countdown--below-cta .sytehero-countdown__unit {
  background: var(--sytehero-countdown-custom-bg, #1e293b);
  border: 1px solid var(--sytehero-countdown-custom-border, #475569);
}
.sytehero-countdown--theme-custom.sytehero-countdown--top-banner {
  background: var(--sytehero-countdown-custom-bg, #1e293b);
}
.sytehero-countdown--theme-custom.sytehero-countdown--top-banner .sytehero-countdown__banner-label {
  color: var(--sytehero-countdown-custom-accent, #f59e0b);
}
.sytehero-countdown--theme-custom.sytehero-countdown--top-banner .sytehero-countdown__banner-digits {
  color: var(--sytehero-countdown-custom-text, #ffffff);
}

/* ----- Countdown theme: Brand (configurable via CSS custom properties set via JS) ----- */
.sytehero-countdown--theme-brand .sytehero-countdown__digits {
  color: var(--sytehero-countdown-brand-text, #ffffff);
}
.sytehero-countdown--theme-brand .sytehero-countdown__label {
  color: var(--sytehero-countdown-brand-text, #ffffff);
  opacity: 0.8;
}
.sytehero-countdown--theme-brand .sytehero-countdown__sep {
  color: var(--sytehero-countdown-brand-text, #ffffff);
  opacity: 0.6;
}
.sytehero-countdown--theme-brand.sytehero-countdown--below-cta .sytehero-countdown__digits {
  color: var(--sytehero-countdown-brand-text, #ffffff);
}
.sytehero-countdown--theme-brand.sytehero-countdown--top-banner .sytehero-countdown__banner-label {
  color: var(--sytehero-countdown-brand-text, #ffffff);
  opacity: 0.85;
}
.sytehero-countdown--theme-brand.sytehero-countdown--top-banner .sytehero-countdown__banner-digits {
  color: var(--sytehero-countdown-brand-text, #ffffff);
}

/* ----- Floating Badge custom label (appears above digits) ----- */
.sytehero-countdown__badge-label {
  display: block;
  width: 100%;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 3px;
  opacity: 0.8;
  color: #fff;
}
.sytehero-countdown--bottom-right.sytehero-countdown--theme-minimal .sytehero-countdown__badge-label {
  color: #1a202c;
}
.sytehero-countdown--theme-custom .sytehero-countdown__badge-label {
  color: var(--sytehero-countdown-custom-text, #ffffff);
}
.sytehero-countdown--theme-brand .sytehero-countdown__badge-label {
  color: var(--sytehero-countdown-brand-text, #ffffff);
}
.sytehero-countdown--bottom-right:has(.sytehero-countdown__badge-label) {
  flex-direction: column;
}
.sytehero-countdown__badge-digits {
  display: flex;
  align-items: center;
  gap: 4px;
}