/* ---------- STEP SWITCH (translate the inner wrapper) ---------- */
/* When moving to step 2, slide the wrapper to reveal it */
[cu-element="multistep-form-wrapper"] {
  transform: translateX(0%);
  transition: all 400ms var(--transition);
}

[cu-element="multistep-form-step-2"],
[cu-element="multistep-form-step-1"] {
  transition: all 400ms var(--transition);
}

[cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-wrapper"] {
  transform: translateX(calc(-50% - 25px));
}

/* ---------- BUTTON STATES ---------- */
/* Base (Step 1): show Next; hide Prev & Submit */
[cu-element="multistep-form-prev-btn"],
[cu-element="multistep-form-submit"] {
  display: none;
  transition: opacity var(--msf-transition), visibility var(--msf-transition);
}

[cu-element="multistep-form-next-btn"] {
  display: flex;
  transition: opacity 500ms var(--transition), visibility 500ms var(--transition);
}

/* Step 2: hide Next; show Prev & Submit */
[cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-next-btn"] {
  display: none;
}

[cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-prev-btn"],
[cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-submit"] {
  display: flex;
}

/* ---------- STEP NUMBERS ---------- */
/* Active colors by step */
[cu-element="multistep-form"]:not(.is-step-2) [cu-element="step-number-1"] {
  color: var(--secondary-cobalt);
}

[cu-element="multistep-form"].is-step-2 [cu-element="step-number-2"] {
  color: var(--secondary-cobalt);
}

/* ---------- PROGRESS BAR FILL ---------- */
/* Transitions */
[cu-element="multistep-progress-bar"],
[cu-element="step-number-2"] {
  transition: color, width 700ms var(--transition);
}

[cu-element="step-number-2"] {
  transition-delay: 300ms;
}

/* Step 2 → 50% */
[cu-element="multistep-form"].is-step-2 [cu-element="multistep-progress-bar"] {
  width: 55%;
}

/* Submit step → 100% */
[cu-element="multistep-form"].is-step-submit [cu-element="multistep-progress-bar"] {
  width: 100%;
}



/* Styling for selected radio buttons */
.form__checkbox-wrapper-alt {
  cursor: pointer;
}
.form__checkbox-wrapper-alt.selected {
  border-color: var(--secondary-cobalt);
}

.form__checkbox-wrapper-alt.selected .w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-color: var(--secondary-cobalt);
}




/*  Fix dynamic height */
@media screen and (max-width: 767px) {
  [cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-wrapper"] {
    max-height: 400px;
  }
  
  [cu-element="multistep-form"].is-step-2.is-step-2-has-local [cu-element="multistep-form-wrapper"] {
    max-height: 500px;
  }
}

@media screen and (max-width: 467px) {
  [cu-element="multistep-form"].is-step-2 [cu-element="multistep-form-wrapper"] {
    max-height: 460px;
  }
  
  [cu-element="multistep-form"].is-step-2.is-step-2-has-local [cu-element="multistep-form-wrapper"] {
    max-height: 570px;
  }
}




/* Custom scroll animation */
[cu-element="franchise-animation-1"] .images-animation-wrapper:nth-child(1),
[cu-element="franchise-animation-1"] .images-animation-wrapper:nth-child(2),
[cu-element="franchise-animation-1"] .images-animation-wrapper:nth-child(3) {
  transition: opacity 0.75s var(--transition); 
}

@media screen and (min-width: 992px) {
  
  [cu-element="franchise-animation-1"] .images-animation-wrapper:nth-child(2),
  [cu-element="franchise-animation-1"] .images-animation-wrapper:nth-child(3) {
    opacity: 0;
  }
  
  
  [cu-element="franchise-animation-1"].franchise--state-1 .images-animation-wrapper:nth-child(1) {
    opacity: 0;
  }
  [cu-element="franchise-animation-1"].franchise--state-1 .images-animation-wrapper:nth-child(2) {
    opacity: 1;
  }
  
  
  [cu-element="franchise-animation-1"].franchise--state-2 .images-animation-wrapper:nth-child(1),
  [cu-element="franchise-animation-1"].franchise--state-2 .images-animation-wrapper:nth-child(2) {
    opacity: 0;
  }
  [cu-element="franchise-animation-1"].franchise--state-2 .images-animation-wrapper:nth-child(3) {
    opacity: 1;
  }
  
}







/* Controls (same as before) */
[cu-element="france-chart-svg"]{
  --base: #E7E7E7;
  --accent: var(--secondary-cobalt);
  --slot: 2s;          /* each region lit for 2s */
  --paths: 13;
  --duration: 26s;     /* 13 * 2s */
}

/* Base + reduced motion */
@media (prefers-reduced-motion: reduce){
  [cu-element="france-chart-svg"] svg path { animation: none !important; }
}
[cu-element="france-chart-svg"] svg path{
  fill: var(--base);
  will-change: fill;
}

/* Play (unchanged) 
[cu-element="france-chart-svg"].france-chart--play svg path,
.france-chart--play [cu-element="france-chart-svg"] svg path{
  animation: region-scan-soft var(--duration) linear infinite both;
  animation-delay: calc(var(--i, 0) * var(--slot));
}*/
[cu-element="france-chart-svg"] svg path {
  animation: region-scan-soft var(--duration) linear infinite both;
  animation-delay: calc(var(--i, 0) * var(--slot));
}

/* Smooth fade-in/out inside each 2s slot
   Fade = 0.3s → 0.3/26 = 1.1538%
   Slot = 2s → 2/26 = 7.6923%
*/
@keyframes region-scan-soft{
  0%        { fill: var(--base); }
  1.1538%   { fill: var(--accent); }  /* fade-in completes (~0.3s) */
  6.5385%   { fill: var(--accent); }  /* stay lit (~2s - 0.3s) */
  7.6923%   { fill: var(--base); }    /* fade-out completes at slot end */
  100%      { fill: var(--base); }
}

/* Index all 13 paths */
[cu-element="france-chart-svg"] svg path:nth-of-type(1)  { --i: 0; }
[cu-element="france-chart-svg"] svg path:nth-of-type(2)  { --i: 1; }
[cu-element="france-chart-svg"] svg path:nth-of-type(3)  { --i: 2; }
[cu-element="france-chart-svg"] svg path:nth-of-type(4)  { --i: 3; }
[cu-element="france-chart-svg"] svg path:nth-of-type(5)  { --i: 4; }
[cu-element="france-chart-svg"] svg path:nth-of-type(6)  { --i: 5; }
[cu-element="france-chart-svg"] svg path:nth-of-type(7)  { --i: 6; }
[cu-element="france-chart-svg"] svg path:nth-of-type(8)  { --i: 7; }
[cu-element="france-chart-svg"] svg path:nth-of-type(9)  { --i: 8; }
[cu-element="france-chart-svg"] svg path:nth-of-type(10) { --i: 9; }
[cu-element="france-chart-svg"] svg path:nth-of-type(11) { --i: 10; }
[cu-element="france-chart-svg"] svg path:nth-of-type(12) { --i: 11; }
[cu-element="france-chart-svg"] svg path:nth-of-type(13) { --i: 12; }



/* Base state: lines “hidden” by dash and slightly faded */
[cu-element="lp-hero-grids"] svg path {
  stroke-dasharray: 1000px;
  stroke-dashoffset: 1000px;
  opacity: 0;
  transition:
    stroke-dashoffset 5s ease-out,
    opacity .35s ease-out;
  will-change: stroke-dashoffset, opacity;
}

/* When the class is added, draw the lines */
[cu-element="lp-hero-grids"].is-animated svg path {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [cu-element="lp-hero-grids"] svg path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}




[cu-element="lp-open-spots"].lp-open-spots--visible .tag-open__light {
  animation: lp-open-spots-animation 2.5s var(--transition) infinite;
}

@keyframes lp-open-spots-animation {
  0%    { background-color: var(--custom-available--success); box-shadow: 0 0 8px #009027; }
  50%   { background-color: #0090271A; box-shadow: 0 0 8px transparent; }
  100%  { background-color: var(--custom-available--success); box-shadow: 0 0 8px #009027; }
}