.elementor-kit-8{--e-global-color-primary:#00CAF2;--e-global-color-secondary:#00DD97;--e-global-color-text:#06181F;--e-global-color-accent:#FFBE53;--e-global-color-d647bcb:#00CAF2;--e-global-color-7700b7d:#00DD97;--e-global-color-f97238e:#FFBE53;--e-global-color-67162e8:#FF003D;--e-global-color-0a988b5:#06181F;--e-global-color-f74da46:#FFFFFF;--e-global-color-15a6722:#132F39;--e-global-typography-primary-font-family:"Exo 2";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:72px;--e-global-typography-secondary-font-family:"Exo 2";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:42px;--e-global-typography-text-font-family:"Exo 2";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:24px;--e-global-typography-accent-font-family:"Exo 2";--e-global-typography-accent-font-size:24px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:22px;background-color:#06181F;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:var( --e-global-color-primary );}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:var( --e-global-color-f97238e );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{color:var( --e-global-color-f74da46 );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{color:var( --e-global-color-f74da46 );font-family:"Exo 2", Sans-serif;font-size:28px;font-weight:400;line-height:42px;}.elementor-kit-8 h3{color:var( --e-global-color-f74da46 );font-family:"Exo 2", Sans-serif;font-size:19px;font-weight:400;line-height:42px;}.elementor-kit-8 h4{color:var( --e-global-color-f74da46 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-8 img{border-style:none;}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{color:var( --e-global-color-f74da46 );accent-color:var( --e-global-color-f74da46 );background-color:var( --e-global-color-0a988b5 );border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1160px;}.e-con{--container-max-width:1160px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1370px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(max-width:1024px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:2400px){.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h4{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}}/* Start custom CSS *//* Download CTA Mobilee */
@media screen and (min-width: 767px){
#downloadCTA {
    display:none;}
}

/* Make the whole Icon Box clickable by stretching the title <a> */
.mega-links .elementor-icon-box-wrapper{
  position: relative;
  cursor: pointer;                  /* hand cursor on hover */
}

.mega-links .elementor-icon-box-title a{
  position: absolute;
  inset: 0;                         /* cover the entire box */
  display: block;
  z-index: 5;                       /* above text so it catches clicks */
  /* keep link visually invisible but still focusable */
  color: inherit;
  text-decoration: none;
}

/* Show a nice focus ring when tabbing */
.mega-links .elementor-icon-box-title a:focus{
  outline: 2px solid rgba(0,202,242,.9); /* your cyan */
  outline-offset: 3px;
  border-radius: 6px;
}


/* Base pill badge */
.badge{
  display:inline-block;
  padding:.35rem .6rem;          /* ~6px 10px */
  border-radius:999px;            /* full pill */
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 10px rgba(0,0,0,.25);
}

/* Colour variants */
.badge--green{       background:#00DD97; color:#06181F; } /* Green */
.badge--blue{    background:#00CAF2; color:#06181F; } /* Blue */
.badge--yellow{  background:#FFBE53; color:#06181F; } /* Yellow */
.badge--red{  background:#FF003D; color:#06181F; } /* Red */

/* Align when using Flexbox Containers */
.e-con .badge{ align-self:flex-start; }

/* =========================================
   CICLOZONE — Accordion Image Stage (clean)
   Scope: #zones-acc
   ========================================= */

#zones-acc{
  --acc-dur: 420ms;                 /* JS will overwrite to match widget */
  --fade-dur: var(--acc-dur);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Stage: fixed height so accordion growth never resizes the art */
#zones-acc .stage{
  position: sticky; top: 24px;
  height: 579px;                    /* your image height */
  min-height: 579px;
  max-height: 579px;

  /* keep reflow/paint from nudging it */
  contain: layout paint size;
  transform: translateZ(0);
}

/* Stack the image widgets */
#zones-acc .stage-img{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* PURE cross-fade (no translate/scale) for stability */
  opacity: 0;
  transition: opacity var(--fade-dur) var(--ease);
  will-change: opacity;
}

/* Inner <img> fills consistently */
#zones-acc .stage-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;            /* avoid baseline quirks */
}

/* Before JS: show only the first image */
#zones-acc:not(.zones-ready) .stage-img:first-child{
  opacity: 1;
  z-index: 2;
}

/* After JS: only active/prev visible */
#zones-acc.zones-ready .stage-img{ opacity: 0; }
#zones-acc.zones-ready .stage-img.is-active,
#zones-acc.zones-ready .stage-img.is-prev{ opacity: 1; }

/* Ensure outgoing frame sits above the stack during overlap */
#zones-acc .stage-img.is-prev { z-index: 2; }
#zones-acc .stage-img.is-active { z-index: 3; }

/* Mobile: relax sticky/height if needed */
@media (max-width: 991px){
  #zones-acc .stage{
    position: relative;
    top: 0;
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }
}

/* Keep layout width stable when page first gets a scrollbar */
html { scrollbar-gutter: stable; }



/* ==============================
   CICLOZONE Accordion Styling
   ============================== */

/* Layout of accordion headers */
#zones-acc-accordion .e-n-accordion-item-title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 140px 16px 24px; /* space for right label */
  line-height: 1.2;
  cursor: pointer;
}

/* ----- Right-side "ZONE n" label ----- */
#zones-acc-accordion summary.e-n-accordion-item-title::after {
  content: "ZONE " attr(data-zone);
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 16px;
  color: var(--zone-color, #9BA8AE);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  white-space: nowrap;
}

/* Per-zone colours (customise as needed) */
#zones-acc-accordion details[data-zone="1"] > summary::after { --zone-color:#9BA8AE; } /* neutral */
#zones-acc-accordion details[data-zone="2"] > summary::after { --zone-color:#00CAF2; } /* cyan */
#zones-acc-accordion details[data-zone="3"] > summary::after { --zone-color:#00DD97; } /* green */
#zones-acc-accordion details[data-zone="4"] > summary::after { --zone-color:#FFBE53; } /* amber */
#zones-acc-accordion details[data-zone="5"] > summary::after { --zone-color:#FF003D; } /* red */

/* ----- Title text styling ----- */
#zones-acc-accordion .e-n-accordion-item-title-text {
  font-weight: 600;
  color: #d0d7da; /* default muted */
  transition: color .3s ease;
}

/* Active item: brighten the left title text */
#zones-acc-accordion details[open] .e-n-accordion-item-title-text {
  color: #ffffff;
}

/* Optional: subtle divider between items */
#zones-acc-accordion details.e-n-accordion-item {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Accessibility helper (for screen-reader-only text added via JS) */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,1px,1px) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ==============================
   CICLOZONE Accordion backgrounds
   Works with Nested Accordion (<details>/<summary>)
   ============================== */

/* Theme variables (tweak these) */
#zones-acc-accordion {
  --bg-inactive: #0f1a20;           /* closed item background */
  --bg-active:   #15252d;           /* open item background */
  --bg-hover:    #132129;           /* hover background (closed) */
  --border:      rgba(255,255,255,.08);
  --radius:      16px;
  --shadow:      0 6px 18px rgba(0,0,0,.25);
  --shine:       linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}

/* Item wrapper */
#zones-acc-accordion details.e-n-accordion-item{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    var(--shine),
    var(--bg-inactive);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    background .35s var(--ease, ease),
    border-color .35s var(--ease, ease),
    box-shadow .35s var(--ease, ease);
  margin-bottom: 12px; /* space between items */
}

/* Remove last divider if you kept a border-bottom elsewhere */
#zones-acc-accordion details.e-n-accordion-item:last-child{
  margin-bottom: 0;
}

/* Hover (only on closed items) */
#zones-acc-accordion details.e-n-accordion-item:not([open]):hover{
  background:
    var(--shine),
    var(--bg-hover);
  border-color: rgba(255,255,255,.12);
}

/* Active/open item */
#zones-acc-accordion details.e-n-accordion-item[open]{
  background:
    radial-gradient(120% 160% at 20% -40%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 60%),
    var(--bg-active);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Header row inherits the container’s rounded corners and padding from your previous CSS */
#zones-acc-accordion .e-n-accordion-item-title{
  backdrop-filter: saturate(1.02); /* a touch more clarity */
}

/* --- Left accent bar tied to the zone color --- */
#zones-acc-accordion details.e-n-accordion-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--zone-color, #9BA8AE);
  opacity:.65;
  transition: opacity .35s var(--ease, ease), width .35s var(--ease, ease);
}

/* Thicker + brighter when active */
#zones-acc-accordion details.e-n-accordion-item[open]::before{
  width:6px;
  opacity:1;
}

/* --- Content region (the panel) --- */
#zones-acc-accordion details.e-n-accordion-item > [role="region"],
#zones-acc-accordion details.e-n-accordion-item > .e-n-accordion__content{
  padding: 10px 24px 20px 24px;   /* comfy inner spacing */
  color: #d6dee2;
  transition: padding .25s var(--ease, ease), background .35s var(--ease, ease);
}

/* Slightly brighter backdrop for open content */
#zones-acc-accordion details.e-n-accordion-item[open] > [role="region"],
#zones-acc-accordion details.e-n-accordion-item[open] > .e-n-accordion__content{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

/* Tighten content padding on closed items (when Elementor keeps DOM mounted) */
#zones-acc-accordion details.e-n-accordion-item:not([open]) > [role="region"],
#zones-acc-accordion details.e-n-accordion-item:not([open]) > .e-n-accordion__content{
  padding-top: 0; padding-bottom: 0;
}

/* --- Title text (left) and Zone label (right) states --- */
/* Left title default + active (from your previous block; repeat here for clarity) */
#zones-acc-accordion .e-n-accordion-item-title-text {
  font-weight: 600;
  color: #d0d7da;
  transition: color .3s var(--ease, ease);
}
#zones-acc-accordion details[open] .e-n-accordion-item-title-text {
  color: #ffffff;
}

/* Right label stays coloured always (no override on open) */
/* (We rely on your per-zone --zone-color rules already set) */

/* Focus ring for keyboard navigation */
#zones-acc-accordion summary.e-n-accordion-item-title:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--zone-color, #00CAF2) 70%, #fff 30%);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #zones-acc-accordion details.e-n-accordion-item{
    transition: none !important;
  }
  #zones-acc-accordion .e-n-accordion-item-title-text{
    transition: none !important;
  }
}
/* Fixed (or clamped) stage height so images don’t resize with content */
#zones-acc{
  --stage-h: clamp(360px, 42vw, 580px);  /* tweak to taste */
}

#zones-acc .stage{
  height: var(--stage-h);
  min-height: var(--stage-h);
  max-height: var(--stage-h);
  position: sticky; top: 24px;          /* keeps it in view while right side grows */
  z-index: 1;
}

/* The frames are already absolute/inset:0; they’ll now fill the fixed stage */
#zones-acc .stage-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide recaptcha logo */
.grecaptcha-badge { visibility: hidden; }

/* =====================================================
   Elementor Form – Acceptance Checkbox (Global Styling)
   ===================================================== */

/* Layout: keep checkbox and text aligned nicely */
.elementor-form .elementor-field-type-acceptance .elementor-field-subgroup,
.elementor-form .elementor-field-type-acceptance .elementor-field-option{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* Label text styling */
.elementor-form .elementor-field-type-acceptance label{
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

/* Checkbox base */
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 26px !important;
  height: 26px !important;
  margin-top: 4px !important;

  border: 2px solid rgba(255,255,255,.65) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.08) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  transition: border-color .15s ease, background-color .15s ease;
}

/* Classic, traditional checkmark */
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]::before{
  content: "✓" !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--e-global-color-accent, #f5c400) !important;

  opacity: 0;
  transform: translateY(-1px); /* optical centring */
  transition: opacity .12s ease;
}

/* Checked state */
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]:checked{
  border-color: var(--e-global-color-accent, #f5c400) !important;
  background: rgba(245,196,0,.18) !important;
}

.elementor-form .elementor-field-type-acceptance input[type="checkbox"]:checked::before{
  opacity: 1;
}

/* Focus (keyboard accessibility) */
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--e-global-color-accent, #f5c400) !important;
  outline-offset: 3px !important;
}

/* Privacy Policy link styling */
.elementor-form .elementor-field-type-acceptance label a{
  float: none !important;
  display: inline !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* --- Square-lock patch for Elementor Acceptance checkbox --- */
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]{
  /* hard-reset the usual culprits */
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;

  /* lock square geometry even if other CSS interferes */
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex: 0 0 26px !important;          /* stops flex from stretching/squashing */
  aspect-ratio: 1 / 1 !important;     /* extra insurance */
  display: grid !important;
  place-content: center !important;

  /* if you want it visually squarer */
  border-radius: 4px !important;
}

/* After successful submit, hide the fields and buttons, show the success panel */
.cz-newsletter-form .elementor-message-success{
  margin-top: 18px !important;
  padding: 18px 18px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Hide inputs + buttons AFTER success appears */
.cz-newsletter-form .elementor-message-success ~ .elementor-field-group,
.cz-newsletter-form .elementor-message-success ~ .e-form__buttons{
  display: none !important;
}

/* =====================================================
   CicloZone Newsletter – Hide fields after successful submit
   Uses :has() (supported in modern browsers)
   ===================================================== */

.cz-newsletter-form form:has(.elementor-message-success) .elementor-field-group,
.cz-newsletter-form form:has(.elementor-message-success) .e-form__buttons{
  display: none !important;
}

/* Keep the success message visible and nicely spaced */
.cz-newsletter-form form:has(.elementor-message-success) .elementor-message-success{
  display: block !important;
  margin-top: 20px !important;
}
/* Hide Elementor success tick/icon in newsletter form */
.cz-newsletter-form .elementor-message-success::before,
.cz-newsletter-form .elementor-message-success .elementor-message-icon{
  display: none !important;
}


/* =====================================================
   Header colours on white backgrounds
   ===================================================== */
body .policy-page h2,
body .policy-page h3,
body .policy-page h4,
body .policy-page h5,
body .policy-page h6 {
  color: #06181F !important;
}


/* =====================================================
   Header colours on white backgrounds blogs
   ===================================================== */
#blog-content h2,
#blog-content h3,
#blog-content h4,
#blog-content h5,
#blog-content h6 {
  color: #06181F !important;
}/* End custom CSS */