/*
 * INR Health — Ademinterventies.
 *
 * De vorm volgt het ritme: lijn (2 fasen), cirkel (3), vierkant (4). Dit bestand
 * bevat het keuzescherm, het instelscherm en de oefening met het lopende vierkant.
 * Rustige, trage bewegingen; niets flitst.
 */

/* ── Keuzescherm ────────────────────────────────────────────────────────── */

.inr-adem-keuze, .inr-adem-instelling, .inr-adem-oefening, .inr-adem-afsluiting {
  width: 100% !important;
  max-width: 720px !important;
  display: flex !important; flex-direction: column !important; gap: 24px !important;
  animation: inr-health-omhoog .5s ease !important;
}
.inr-adem-kop { text-align: left !important; }
.inr-adem-kop .inr-health-titel { text-align: left !important; margin: 0 0 8px !important; font-size: 28px !important; }
.inr-adem-kop .inr-health-lead { text-align: left !important; margin: 0 !important; }
.inr-adem-ritme-label {
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em !important;
  color: rgba(45,212,191,.9) !important; margin: 0 0 10px !important;
}

.inr-adem-lijst { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.inr-adem-kaart {
  display: flex !important; align-items: flex-start !important; gap: 18px !important;
  text-align: left !important;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(10px) !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease !important;
}
.inr-adem-kaart:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(20,184,166,.4) !important;
}

/* Vorm-preview op de kaart: de vorm verklapt het ritme. */
.inr-adem-kaart-vorm {
  flex: 0 0 auto !important;
  width: 46px !important; height: 46px !important;
  margin-top: 2px !important;
  border: 2px solid rgba(45,212,191,.8) !important;
}
.inr-adem-kaart-vorm.vorm-2 { height: 2px !important; margin-top: 24px !important; border: 0 !important; border-top: 2px solid rgba(45,212,191,.8) !important; }
.inr-adem-kaart-vorm.vorm-3 { border-radius: 50% !important; }
.inr-adem-kaart-vorm.vorm-4 { border-radius: 8px !important; }

.inr-adem-kaart-tekst { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; }
.inr-adem-kaart-naam { font-size: 17px !important; font-weight: 600 !important; color: #F3F7FC !important; }
.inr-adem-kaart-ritme {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  color: rgba(45,212,191,.9) !important;
}
.inr-adem-kaart-help { font-size: 13.5px !important; line-height: 1.5 !important; color: rgba(220,230,244,.66) !important; }

/* ── Instelscherm ───────────────────────────────────────────────────────── */

.inr-adem-instel-blok {
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
}
.inr-adem-instel-label { font-size: 15px !important; font-weight: 500 !important; color: rgba(232,238,246,.85) !important; }
.inr-adem-cycli { display: flex !important; gap: 12px !important; }
.inr-adem-cyclus-knop {
  flex: 1 1 auto !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  color: #E8EEF6 !important;
  font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s, transform .15s !important;
}
.inr-adem-cyclus-knop:hover { background: rgba(255,255,255,.09) !important; }
.inr-adem-cyclus-knop.actief {
  border-color: rgba(45,212,191,.7) !important;
  background: rgba(20,184,166,.16) !important;
  color: #fff !important;
}

.inr-adem-start {
  align-self: flex-start !important;
  padding: 14px 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #14B8A6, #0EA5A0) !important;
  color: #04121A !important;
  font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .2s !important;
  box-shadow: 0 10px 30px -8px rgba(20,184,166,.5) !important;
}
.inr-adem-start:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 36px -8px rgba(20,184,166,.6) !important; }

/* ── De oefening: het lopende vierkant ──────────────────────────────────── */

.inr-adem-oefening {
  align-items: center !important;
  justify-content: center !important;
  /* Zonder terug-knop staat de oefening rustig gecentreerd in beeld. */
  min-height: 100% !important;
}
.inr-adem-scene {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 30px !important;
  padding: 20px 0 10px !important;
}
.inr-adem-vorm {
  position: relative !important;
  /* Schaalt mee met het scherm. Op mobiel vult de vorm bijna de hele breedte, op
     desktop mag hij fors zijn: de hoogte is daar de beperkende factor, niet een
     vaste pixelmaat. */
  width: min(80vw, 62vh) !important;
  height: min(80vw, 62vh) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: transform 1s ease-in-out !important;
}
/* De vorm "ademt" subtiel mee: iets groter bij inademen, kleiner bij uitademen.
   De duur van de transition wordt in JS niet gezet; we houden hem zacht en traag. */
.inr-adem-vorm.is-in  { transform: scale(1.06) !important; }
.inr-adem-vorm.is-uit { transform: scale(0.94) !important; }
.inr-adem-vorm.is-vast { transform: scale(1.0) !important; }

.inr-adem-svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
/* De baan werkt voor alle drie de vormen: vierkant (rect), cirkel (circle) en
   lijn (line). Bij de lijn is er geen vulling, dus fill:none daar. */
.inr-adem-baan {
  fill: rgba(20,184,166,.05) !important;
  stroke: rgba(45,212,191,.35) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}
line.inr-adem-baan { fill: none !important; stroke-width: 3 !important; }
.inr-adem-punt {
  fill: #2DD4BF !important;
  filter: drop-shadow(0 0 8px rgba(45,212,191,.9)) !important;
}

.inr-adem-midden {
  position: absolute !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
  pointer-events: none !important;
}
.inr-adem-fase { font-size: clamp(18px, 2.4vh, 26px) !important; font-weight: 500 !important; color: #F3F7FC !important; letter-spacing: .01em !important; }
.inr-adem-tel { font-size: clamp(40px, 7vh, 76px) !important; font-weight: 300 !important; color: rgba(45,212,191,.95) !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
.inr-adem-voortgang { font-size: 14px !important; color: rgba(220,230,244,.6) !important; }

/* ── Afsluiting ─────────────────────────────────────────────────────────── */

.inr-adem-afsluiting { align-items: center !important; text-align: center !important; max-width: 520px !important; }
.inr-adem-afsluiting .inr-health-titel { text-align: center !important; }
.inr-adem-afsluiting-vink {
  width: 72px !important; height: 72px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(20,184,166,.16) !important;
  color: #2DD4BF !important;
}
.inr-adem-afsluiting-vink svg { width: 36px !important; height: 36px !important; }
.inr-adem-afsluiting-duur { font-size: 14px !important; color: rgba(45,212,191,.9) !important; font-weight: 500 !important; margin: 0 !important; }
.inr-adem-reflectie {
  list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important;
}
.inr-adem-reflectie li {
  font-size: 15px !important; line-height: 1.6 !important; color: rgba(220,230,244,.82) !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.inr-adem-afsluiting-knoppen { display: flex !important; gap: 12px !important; margin-top: 8px !important; }

@media (max-width: 600px) {
  /* Tijdens de oefening vult de vorm het scherm zoveel mogelijk: dat geeft rust
     en houdt de aandacht bij de beweging. */
  .inr-adem-vorm { width: min(88vw, 60vh) !important; height: min(88vw, 60vh) !important; }
  .inr-adem-cycli { flex-direction: row !important; }
  .inr-adem-afsluiting-knoppen { flex-direction: column !important; width: 100% !important; }
}

/* Gepauzeerde oefening: de vorm dooft rustig, zodat zichtbaar is dat hij stilstaat. */
.inr-adem-vorm.is-pauze { opacity: .5 !important; transform: scale(1) !important; }
.inr-adem-vorm.is-pauze .inr-adem-punt { filter: none !important; }

/* ── Achtergrond bij de oefening ────────────────────────────────────────── */

.inr-adem-achtergrond {
  width: 100% !important;
  margin-top: 34px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important;
  text-align: left !important;
}
.inr-adem-achtergrond-kop { margin-bottom: 6px !important; }
.inr-adem-achtergrond-titel {
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: rgba(45,212,191,.85) !important;
}

.inr-adem-sectie {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.028) !important;
  overflow: hidden !important;
  transition: border-color .25s ease, background .25s ease !important;
}
.inr-adem-sectie.is-open {
  border-color: rgba(45,212,191,.24) !important;
  background: rgba(255,255,255,.045) !important;
}

.inr-adem-sectie-kop {
  width: 100% !important;
  display: flex !important; align-items: center !important; gap: 13px !important;
  padding: 15px 17px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-family: 'Inter', sans-serif !important;
  text-align: left !important;
  cursor: pointer !important;
}
.inr-adem-sectie-kop:focus-visible { outline: 2px solid rgba(45,212,191,.8) !important; outline-offset: -2px !important; }

.inr-adem-sectie-nr {
  flex: 0 0 auto !important;
  width: 24px !important; height: 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(20,184,166,.16) !important;
  color: #2DD4BF !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  transition: background .25s ease !important;
}
.inr-adem-sectie.is-open .inr-adem-sectie-nr { background: rgba(20,184,166,.28) !important; }

.inr-adem-sectie-titel {
  flex: 1 1 auto !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  color: #F3F7FC !important;
  line-height: 1.35 !important;
}
.inr-adem-sectie-pijl {
  flex: 0 0 auto !important;
  width: 17px !important; height: 17px !important;
  color: rgba(220,230,244,.45) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), color .25s ease !important;
}
.inr-adem-sectie.is-open .inr-adem-sectie-pijl { transform: rotate(180deg) !important; color: rgba(45,212,191,.8) !important; }

/* Uitklappen met een rustige overgang. De buitenste laag knijpt de hoogte dicht
   en verbergt wat er buiten valt; de binnenste laag houdt zijn eigen hoogte, want
   anders zou de tekst zelf worden samengedrukt in plaats van afgedekt. */
.inr-adem-sectie-inhoud {
  display: grid !important;
  grid-template-rows: 0fr !important;
  overflow: hidden !important;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1) !important;
}
.inr-adem-sectie-binnen { min-height: 0 !important; overflow: hidden !important; }
.inr-adem-sectie.is-open .inr-adem-sectie-inhoud { grid-template-rows: 1fr !important; }

.inr-adem-alinea {
  margin: 0 !important;
  padding: 0 17px 15px 54px !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  color: rgba(220,230,244,.74) !important;
}
.inr-adem-alinea + .inr-adem-alinea { padding-top: 0 !important; }

/* Terugval voor browsers zonder grid-animatie: gewoon tonen of verbergen. */
/* Terugval voor browsers zonder grid-animatie: gewoon tonen of verbergen. */
@supports not (grid-template-rows: 0fr) {
  .inr-adem-sectie-inhoud { display: none !important; }
  .inr-adem-sectie.is-open .inr-adem-sectie-inhoud { display: block !important; }
}

@media (max-width: 600px) {
  .inr-adem-achtergrond { margin-top: 28px !important; padding-top: 22px !important; }
  .inr-adem-sectie-kop { padding: 14px !important; gap: 11px !important; }
  .inr-adem-sectie-titel { font-size: 13.5px !important; }
  .inr-adem-alinea { padding: 0 14px 14px 14px !important; font-size: 13.5px !important; line-height: 1.68 !important; }
}

/* ── Sessie bewaren na afloop ───────────────────────────────────────────── */

.inr-adem-bewaar {
  width: 100% !important;
  max-width: 460px !important;
  margin: 4px auto 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important;
  text-align: left !important;
}
.inr-adem-bewaar-kop { display: flex !important; align-items: center !important; gap: 10px !important; }
.inr-adem-bewaar-icoon { width: 18px !important; height: 18px !important; color: rgba(45,212,191,.9) !important; flex: 0 0 auto !important; }
.inr-adem-bewaar-titel { font-size: 15px !important; font-weight: 600 !important; color: #F3F7FC !important; }
.inr-adem-bewaar-uitleg {
  margin: 0 !important;
  font-size: 13.5px !important; line-height: 1.6 !important;
  color: rgba(220,230,244,.66) !important;
}

.inr-adem-notitie-label {
  font-size: 12.5px !important; font-weight: 500 !important;
  color: rgba(220,230,244,.6) !important;
}
.inr-adem-notitie {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 11px !important;
  background: rgba(6,12,22,.5) !important;
  color: #E8EEF6 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; line-height: 1.55 !important;
  resize: vertical !important;
  min-height: 70px !important;
}
.inr-adem-notitie::placeholder { color: rgba(220,230,244,.34) !important; }
.inr-adem-notitie:focus {
  outline: none !important;
  border-color: rgba(45,212,191,.55) !important;
  background: rgba(6,12,22,.7) !important;
}

/* De privacymelding: rustig maar duidelijk aanwezig. */
.inr-adem-privacy {
  display: flex !important; align-items: flex-start !important; gap: 9px !important;
  padding: 11px 13px !important;
  border-radius: 11px !important;
  background: rgba(20,184,166,.09) !important;
  border: 1px solid rgba(45,212,191,.18) !important;
}
.inr-adem-privacy svg {
  width: 16px !important; height: 16px !important;
  color: rgba(45,212,191,.9) !important;
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}
.inr-adem-privacy span {
  font-size: 12.5px !important; line-height: 1.55 !important;
  color: rgba(220,230,244,.78) !important;
}

.inr-adem-bewaar-knoppen { display: flex !important; gap: 10px !important; align-items: center !important; }
.inr-adem-bewaar-knop {
  padding: 11px 22px !important;
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(135deg, #14B8A6, #2DD4BF) !important;
  color: #04121A !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .2s ease !important;
}
.inr-adem-bewaar-knop:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(20,184,166,.28) !important; }
.inr-adem-bewaar-knop:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; }
.inr-adem-bewaar-nee {
  padding: 11px 16px !important;
  border: 0 !important; background: transparent !important;
  color: rgba(220,230,244,.55) !important;
  font-family: 'Inter', sans-serif !important; font-size: 13.5px !important;
  cursor: pointer !important;
  transition: color .2s !important;
}
.inr-adem-bewaar-nee:hover { color: rgba(232,238,246,.85) !important; }

.inr-adem-bewaar.is-bewaard { border-color: rgba(45,212,191,.32) !important; background: rgba(20,184,166,.1) !important; }
.inr-adem-bewaar-klaar {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  color: #2DD4BF !important;
  font-size: 14.5px !important; font-weight: 600 !important;
}
.inr-adem-bewaar-klaar svg { width: 19px !important; height: 19px !important; }

@media (max-width: 600px) {
  .inr-adem-bewaar { padding: 16px 15px !important; max-width: 100% !important; }
  .inr-adem-bewaar-knoppen { flex-direction: column-reverse !important; align-items: stretch !important; }
  .inr-adem-bewaar-knop, .inr-adem-bewaar-nee { width: 100% !important; text-align: center !important; }
}