/* === Scroll Indicators (Up/Down) — Life Progress theme === */
.scroll-indicator{
  position: fixed;
  right: 24px;
  width: 44px;
  height: 44px;
  display: none; /* toggled via JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}
.scroll-indicator svg{
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}
/* Arrow shape: rounded chevron in brand blue */
.scroll-indicator path{
  fill: #0B508A;
}
/* Positions: up above mid-line, down below mid-line */
#scroll-indicator-up{ top: calc(50% - 34px); }
#scroll-indicator-down{ top: calc(50% + 34px); }

/* Visibility */
.scroll-indicator.is-visible{ display: flex; }

/* Hover micro-interaction */
.scroll-indicator:hover{ transform: translateX(-1px); transition: transform .15s ease; }

/* Reduce motion respectful pulse on down arrow to hint */
@media (prefers-reduced-motion: no-preference){
  #scroll-indicator-down.pulsing svg{ animation: spPulse 1.6s ease-out infinite; }
  @keyframes spPulse{
    0%{ filter: drop-shadow(0 0 0 rgba(11,80,138,.45)); opacity: 1; }
    70%{ filter: drop-shadow(0 0 10px rgba(11,80,138,.0)); opacity: 0.95; }
    100%{ filter: drop-shadow(0 0 0 rgba(11,80,138,.0)); opacity: 1; }
  }
}

.scroll-indicator{
  position: fixed;
  z-index: 9999;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  right: 24px;
}

/* === THEME: Scroll Indicators styled like Frontalier/Résident selector === */

/* === THEME: Scroll Indicators styled like Frontalier/Résident selector === */
:root{
  /* ensure tokens exist even if style.css not loaded */
  --brand: #0b4e7a;
  --line: #e6eef5;
  --shadow: 0 10px 28px rgba(13,93,145,.12);
}
.scroll-indicator{
  position: fixed;
  right: 24px;
  width: 46px;
  height: 46px;
  display: none; /* controlled by JS */
  align-items: center;
  justify-content: center;
  z-index: 2147483646;
  pointer-events: auto;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.scroll-indicator.theme{
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(13,93,145,.12);
}
.scroll-indicator.theme:hover{
  transform: translateX(-1px);
  box-shadow: 0 10px 24px rgba(13,93,145,.16);
}
.scroll-indicator.theme:active{
  transform: translateX(-1px) scale(.98);
}
.scroll-indicator svg{
  width: 22px; height: 22px; display: block;
}
.scroll-indicator svg path{
  fill: var(--brand);
}
/* Positions relative to midline */
#scroll-indicator-up{ top: calc(50% - 36px); }
#scroll-indicator-down{ top: calc(50% + 36px); }

/* END THEME */


/* === THEME MATCH: make scroll indicators look like the active stepper dot === */
.scroll-indicator.theme{
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  display: none; /* controlled by JS */
  align-items: center;
  justify-content: center;
  z-index: 2147483646;
  border: 1px solid rgba(0,0,0,0.25);
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.scroll-indicator.theme:hover{
  box-shadow:
    0 10px 20px rgba(0,0,0,0.26),
    inset 0 3px 7px rgba(255,255,255,0.35),
    inset 0 -4px 8px rgba(0,0,0,0.40);
  transform: translateX(-1px);
}
.scroll-indicator.theme:active{ transform: scale(.98); }
.scroll-indicator.theme svg{ width: 22px; height: 22px; display: block; }
.scroll-indicator.theme svg path{ fill: #fff; }
#scroll-indicator-up{ top: calc(50% - 36px); }
#scroll-indicator-down{ top: calc(50% + 36px); }


/* === FORCE OVERRIDE: EUR toggle (.fx-switch) glossy style === */
#eurToggleBox .fx-switch,
.fx-switch{ position:relative; display:inline-block; vertical-align:middle; }

#eurToggleBox .fx-switch .fx-slider,
.fx-switch .fx-slider,
.fx-switch .fx-slider.round{
  position:absolute; inset:0;
  border-radius:9999px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%) !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08),
    inset 0 3px 6px rgba(255,255,255,0.50),
    inset 0 -3px 6px rgba(0,0,0,0.06) !important;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#eurToggleBox .fx-switch .fx-slider:before,
.fx-switch .fx-slider:before{
  content:"";
  position:absolute; top:3px; left:3px;
  width: calc(100% - 38px); /* fallback: will be overridden by width below */
  width: 24px; height: 24px;
  border-radius:50%;
  background: linear-gradient(180deg, #BEE0FF 0%, #A6CCE9 100%) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.16),
    inset 0 3px 5px rgba(255,255,255,0.60),
    inset 0 -3px 5px rgba(0,0,0,0.12) !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

/* ON (EUR) */
#eurToggleBox .fx-switch input:checked + .fx-slider,
.fx-switch input:checked + .fx-slider{
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  border-color: rgba(0,0,0,0.25) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
}

#eurToggleBox .fx-switch input:checked + .fx-slider:before,
.fx-switch input:checked + .fx-slider:before{
  transform: translateX(32px) !important; /* keeps existing motion distance */
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FB 100%) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.20),
    inset 0 3px 5px rgba(255,255,255,0.70),
    inset 0 -3px 6px rgba(0,0,0,0.18) !important;
}
/* END FORCE OVERRIDE */


/* === EUR toggle ON -> deep blue gradient (like 'Mixte') === */
#eurToggleBox input:checked + .fx-slider,
#eurToggleBox .fx-switch input:checked + .fx-slider,
.fx-switch input:checked + .fx-slider,
.fx-switch input:checked + .fx-slider.round {
  background: linear-gradient(180deg, #2C8DDB 0%, #0B508A 100%) !important;
  border-color: rgba(0,0,0,0.25) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.22),
    inset 0 3px 6px rgba(255,255,255,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.35) !important;
}

/* Knob becomes glossy white when ON, and translation distance aligned to default (≈26px) */
#eurToggleBox input:checked + .fx-slider:before,
#eurToggleBox .fx-switch input:checked + .fx-slider:before,
.fx-switch input:checked + .fx-slider:before {
  transform: translateX(26px) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FB 100%) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.20),
    inset 0 3px 5px rgba(255,255,255,0.70),
    inset 0 -3px 6px rgba(0,0,0,0.18) !important;
}
/* === END EUR toggle ON override === */

@media (max-width:520px){ .paddle{ display:none !important; } }

@media (max-width:520px){ .scroll-indicator, #scroll-paddle-right{ display:none !important; } }

/* --- auto patch: hide fullscreen overlays when running as installed PWA/TWA --- */
@media (display-mode: standalone), (display-mode: fullscreen) {
  #overlay, .overlay,
  #fullscreen-overlay, .fullscreen-overlay,
  [data-overlay], [data-fullscreen-overlay],
  .fs-overlay, #fs-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html.no-fullscreen-overlay, body.no-fullscreen-overlay { overflow: auto !important; }
}