/* Sprint 6636-1054 — voorstel 3 "Kader" op login, registratie, audit en demo.
   Eén afgerond kader op een lichte achtergrond: links een zachtgroen paneel (label, kop, uitleg, voordelen, vertrouwensregel),
   rechts het formulier. Overal dezelfde opbouw, maten en uitlijning. Alleen weergave. */

/* ---------- achtergrond rond het kader ---------- */
html body .adv1054-bg,
html body main.adv1051 .audit-wrap,
html body main.demo580 .demo580-hero{
  background:#f7faf8!important;background-image:none!important;
  padding:48px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))!important;
  margin:0!important;border:0!important;
}
html body main.demo580 .demo580-hero{border-bottom:1px solid #e3ebe7!important}

/* ---------- het kader ---------- */
html body .adv1054-bg>.adv1052,
html body .adv1054-bg>.auth-page.auth-page-register,
html body main.adv1051 .audit-wrap .audit-hero,
html body main.demo580 .demo580-hero .demo580-hero-grid{
  display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:0!important;align-items:stretch!important;
  width:100%!important;max-width:1180px!important;min-height:0!important;margin:0 auto!important;padding:0!important;
  background:#fff!important;border:1px solid #e3ebe7!important;border-radius:28px!important;overflow:hidden!important;
  box-shadow:0 12px 40px rgba(16,24,38,.06)!important;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;color:#101826!important;
}

/* ---------- linkerpaneel ---------- */
html body .adv1054-bg>.adv1052 .adv1052-brand,
html body .adv1054-bg>.auth-page-register .auth-visual,
html body main.adv1051 .audit-wrap .audit-copy,
html body main.demo580 .demo580-hero .demo580-copy{
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:18px!important;
  min-width:0!important;margin:0!important;padding:44px 40px!important;border:0!important;border-radius:0!important;
  background:#eef6f1!important;background-image:none!important;color:#101826!important;position:static!important;order:0!important;
}
/* binnenste groepen volgen hetzelfde ritme */
html body .adv1054-bg>.adv1052 .adv1052-brand-in,
html body .adv1054-bg>.auth-page-register .auth-visual>div:first-child{display:flex!important;flex-direction:column!important;gap:18px!important;max-width:none!important;margin:0!important;position:static!important}
html body .adv1054-bg>.auth-page-register .auth-visual .auth-quote{display:none!important}

/* label */
html body .adv1054-bg>.adv1052 .adv1052-kicker,
html body .adv1054-bg>.auth-page-register .auth-visual .eyebrow,
html body main.adv1051 .audit-wrap .audit-copy .audit-kicker,
html body main.demo580 .demo580-hero .demo580-copy .demo580-eyebrow{
  display:block!important;margin:0!important;padding:0!important;background:none!important;border-radius:0!important;
  color:#087a55!important;font-size:13px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1.4!important;
}
html body main.demo580 .demo580-hero .demo580-copy .demo580-eyebrow:before{display:none!important}

/* kop */
html body .adv1054-bg>.adv1052 .adv1052-brand h1,
html body .adv1054-bg>.auth-page-register .auth-visual h1,
html body main.adv1051 .audit-wrap .audit-copy h1,
html body main.demo580 .demo580-hero .demo580-copy h1{
  margin:0!important;max-width:none!important;color:#07182b!important;text-shadow:none!important;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:clamp(28px,2.8vw,40px)!important;line-height:1.1!important;letter-spacing:-.03em!important;font-weight:800!important;text-wrap:balance;
}
html body main.demo580 .demo580-hero .demo580-copy h1 em{color:#087a55!important;font-style:normal!important}

/* uitleg */
html body .adv1054-bg>.adv1052 .adv1052-intro,
html body .adv1054-bg>.auth-page-register .auth-visual>div:first-child>p:not(.s6636-277-trust-copy),
html body main.adv1051 .audit-wrap .audit-copy>p,
html body main.demo580 .demo580-hero .demo580-copy .demo580-lead{
  margin:0!important;max-width:none!important;color:#4d5868!important;font-size:16px!important;line-height:1.6!important;font-weight:500!important;
}

/* voordelen: icoon en tekst op één lijn, tekst verticaal gecentreerd naast het icoon */
html body .adv1054-bg>.adv1052 .adv1052-feat,
html body .adv1054-bg>.auth-page-register .auth-benefits,
html body main.adv1051 .audit-wrap .audit-proof,
html body main.demo580 .demo580-hero .demo580-hero-proof{
  display:flex!important;flex-direction:column!important;gap:14px!important;margin:4px 0 0!important;padding:0!important;list-style:none!important;max-width:none!important;
}
html body .adv1054-bg>.adv1052 .adv1052-feat li,
html body .adv1054-bg>.auth-page-register .auth-benefits>span,
html body main.adv1051 .audit-wrap .audit-proof>span,
html body main.demo580 .demo580-hero .demo580-hero-proof>span{
  display:flex!important;gap:12px!important;align-items:center!important;margin:0!important;padding:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  color:#1f2d26!important;font-size:15px!important;font-weight:600!important;line-height:1.45!important;text-align:left!important;
}
html body .adv1054-bg>.auth-page-register .auth-benefits>span>i{display:none!important}
html body .adv1054-bg>.auth-page-register .auth-benefits>span:before,
html body main.adv1051 .audit-wrap .audit-proof>span:before,
html body main.demo580 .demo580-hero .demo580-hero-proof>span:before{
  content:''!important;flex:0 0 32px!important;width:32px!important;height:32px!important;margin:0!important;border-radius:10px!important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6b45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat!important;
  border:1px solid #cfe6da!important;box-sizing:border-box!important;
}
html body .adv1054-bg>.adv1052 .adv1052-ic{flex:0 0 32px!important;width:32px!important;height:32px!important;border-radius:10px!important;background:#fff!important;border:1px solid #cfe6da!important;color:#1d6b45!important;box-sizing:border-box}
html body .adv1054-bg>.adv1052 .adv1052-ic svg{width:16px;height:16px}
html body .adv1054-bg>.adv1052 .adv1052-feat b{display:block;color:#1f2d26!important;font-size:15px!important;font-weight:700!important}
html body .adv1054-bg>.adv1052 .adv1052-feat small{display:block;margin-top:1px;color:#5b6675!important;font-size:14px!important;font-weight:500!important}

/* vertrouwensregel onderaan het paneel: direct onder de voordelen, met een dunne lijn */
html body .adv1054-bg>.adv1052 .adv1052-foot,
html body .adv1054-bg>.auth-page-register .s6636-277-trust-copy,
html body main.demo580 .demo580-hero .demo580-mini-note{
  display:flex!important;gap:10px!important;align-items:center!important;margin:6px 0 0!important;padding:18px 0 0!important;
  border:0!important;border-top:1px solid #cfe6da!important;border-radius:0!important;background:none!important;
  color:#5b6675!important;font-size:14px!important;line-height:1.5!important;font-weight:500!important;max-width:none!important;
}
html body .adv1054-bg>.adv1052 .adv1052-foot svg{color:#1d6b45!important;flex:0 0 18px}
html body .adv1054-bg>.auth-page-register .s6636-277-trust-copy:before,
html body main.demo580 .demo580-hero .demo580-mini-note:before{
  content:'';flex:0 0 18px;width:18px;height:18px;align-self:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E") center/18px no-repeat;
}
html body main.demo580 .demo580-hero .demo580-mini-note{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;column-gap:10px!important;row-gap:2px!important}
html body main.demo580 .demo580-hero .demo580-mini-note:before{grid-row:1/3}
html body main.demo580 .demo580-hero .demo580-mini-note strong{display:block!important;color:#1f2d26!important;font-size:14px!important}
html body main.demo580 .demo580-hero .demo580-mini-note span{display:block!important;margin:0!important;color:#5b6675!important;font-size:14px!important}
/* registratie: betaalmethoden als kleine labels */
html body .adv1054-bg>.auth-page-register .s6636-277-trust-badges{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:4px 0 0!important}
html body .adv1054-bg>.auth-page-register .s6636-277-trust-badges span{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:30px!important;padding:4px 10px!important;border-radius:999px!important;background:#fff!important;border:1px solid #cfe6da!important;color:#1f2d26!important;font-size:13px!important;font-weight:700!important}
/* audit: kerncijfers in dezelfde onderzone */
html body main.adv1051 .audit-wrap .adv1051-stats{margin:6px 0 0!important;padding:18px 0 0!important;border-top:1px solid #cfe6da!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important}
html body main.adv1051 .audit-wrap .adv1051-stats li{flex:1 1 140px;padding:12px 14px!important;border-radius:12px!important;background:#fff!important;border:1px solid #cfe6da!important;justify-content:center}
html body main.adv1051 .audit-wrap .adv1051-stat-v{color:#07182b!important;font-size:18px!important}
html body main.adv1051 .audit-wrap .adv1051-stat-l{color:#5b6675!important}

/* ---------- rechterpaneel ---------- */
html body .adv1054-bg>.adv1052 .adv1052-formwrap,
html body .adv1054-bg>.auth-page-register .auth-form-wrap,
html body main.adv1051 .audit-wrap .audit-form,
html body main.demo580 .demo580-hero .demo580-book{
  display:block!important;min-width:0!important;margin:0!important;padding:44px clamp(24px,4vw,56px)!important;
  background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;align-self:stretch!important;order:1!important;
}
html body .adv1054-bg>.adv1052 .adv1052-form{max-width:none!important}
html body .adv1054-bg>.auth-page-register .register-card{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#101826!important}

/* formulierkop: overal zelfde maat, bovenkant gelijk met het label links */
html body .adv1054-bg>.adv1052 .adv1052-head h2,
html body .adv1054-bg>.auth-page-register .register-card h2,
html body main.adv1051 .audit-wrap .audit-form h2,
html body main.demo580 .demo580-hero .demo580-book-head h2{
  margin:0 0 6px!important;color:#07182b!important;font-family:Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:28px!important;line-height:1.15!important;letter-spacing:-.03em!important;font-weight:800!important;
}
html body .adv1054-bg>.adv1052 .adv1052-head p,
html body .adv1054-bg>.auth-page-register .auth-card-heading .muted,
html body main.adv1051 .audit-wrap .audit-form>p,
html body main.demo580 .demo580-hero .demo580-book-head p{margin:0!important;color:#4d5868!important;font-size:15px!important;line-height:1.5!important}
html body main.adv1051 .audit-wrap .audit-form>p{margin:0 0 20px!important}
html body .adv1054-bg>.auth-page-register .auth-card-heading{margin:0 0 20px!important;align-items:flex-start!important}
html body .adv1054-bg>.auth-page-register .auth-card-heading .eyebrow,
html body main.demo580 .demo580-hero .demo580-step{display:none!important}
html body main.demo580 .demo580-hero .demo580-book-head{padding:0 0 20px!important;margin:0 0 20px!important;border-bottom:1px solid #e3ebe7!important}
html body main.demo580 .demo580-hero .demo582-booking,
html body main.demo580 .demo580-hero .demo586-native{padding-left:0!important;padding-right:0!important}
html body main.demo580 .demo580-hero .demo580-unavailable{min-height:320px!important;border:1px solid #e3ebe7!important;border-radius:18px!important;background:#f7faf8!important}
html body main.demo580 .demo580-hero .demo580-calendar-foot{padding-left:0!important;padding-right:0!important}

/* knoppen: overal donkerblauw met witte tekst */
html body .adv1054-bg>.adv1052 .adv1052-submit,
html body .adv1054-bg>.auth-page-register .register-card .btn-primary,
html body main.adv1051 .audit-wrap .audit-submit,
html body main.demo580 .demo580-hero .demo580-book .btn-primary,
html body main.demo580 .demo580-hero .demo580-book button[type=submit]{
  background:#07182b!important;color:#fff!important;border:0!important;border-radius:14px!important;min-height:54px!important;box-shadow:none!important;font-weight:800!important;
}
html body .adv1054-bg>.adv1052 .adv1052-submit:hover,
html body .adv1054-bg>.auth-page-register .register-card .btn-primary:hover,
html body main.adv1051 .audit-wrap .audit-submit:hover,
html body main.demo580 .demo580-hero .demo580-book .btn-primary:hover,
html body main.demo580 .demo580-hero .demo580-book button[type=submit]:hover{background:#0a3145!important}
html body .adv1054-bg>.auth-page-register .register-card .btn-primary svg{stroke:#fff;color:#fff}

/* registratie: licht formulier */
html body .adv1054-bg>.auth-page-register .register-card label,
html body .adv1054-bg>.auth-page-register .register-card legend{color:#101826!important}
html body .adv1054-bg>.auth-page-register .register-card .muted,
html body .adv1054-bg>.auth-page-register .register-card .field-hint,
html body .adv1054-bg>.auth-page-register .register-card .register-guarantee,
html body .adv1054-bg>.auth-page-register .register-card .auth-links span{color:#4d5868!important}
html body .adv1054-bg>.auth-page-register .register-card input:not([type=checkbox]):not([type=radio]),
html body .adv1054-bg>.auth-page-register .register-card select{background:#fff!important;color:#101826!important;-webkit-text-fill-color:#101826;border:1px solid #cfdcd5!important;border-radius:12px!important;box-shadow:none!important;font-weight:500!important}
html body .adv1054-bg>.auth-page-register .register-card input::placeholder{color:#7a8794!important;-webkit-text-fill-color:#7a8794;font-weight:500!important}
html body .adv1054-bg>.auth-page-register .register-card input:focus,
html body .adv1054-bg>.auth-page-register .register-card select:focus{outline:none!important;border-color:#1d6b45!important;box-shadow:0 0 0 3px rgba(29,107,69,.15)!important}
html body .adv1054-bg>.auth-page-register .register-card select option{background:#fff;color:#101826}
html body .adv1054-bg>.auth-page-register .auth-secure-badge{background:#eef7f2!important;border:1px solid #cfe6da!important;color:#1d6b45!important;white-space:nowrap}
html body .adv1054-bg>.auth-page-register .plan-option{background:#fff!important;border:1px solid #cfdcd5!important;color:#101826!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
html body .adv1054-bg>.auth-page-register .plan-option span,
html body .adv1054-bg>.auth-page-register .plan-option small{color:#101826!important}
html body .adv1054-bg>.auth-page-register .plan-option:has(input:checked){border:2px solid #1d6b45!important;background:#f2faf6!important}
html body .adv1054-bg>.auth-page-register .register-consents{background:#f7faf8!important;border:1px solid #e3ebe7!important}
html body .adv1054-bg>.auth-page-register .register-consents .check{display:flex!important;align-items:flex-start!important;gap:10px!important}
html body .adv1054-bg>.auth-page-register .register-consents .check input{margin:3px 0 0!important;flex:0 0 18px}
html body .adv1054-bg>.auth-page-register .register-consents span{color:#33403a!important}
html body .adv1054-bg>.auth-page-register .register-card a{color:#087a55!important}
html body .adv1054-bg>.auth-page-register .register-guarantee{text-align:center!important}

/* ---------- stappen met verbindingslijn (audit en demo gelijk) ---------- */
html body main.demo580 .demo580-section-head:has(+ .demo580-agenda){margin-left:auto!important;margin-right:auto!important;text-align:center!important}
html body main.demo580 .demo580-agenda{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin-top:40px!important}
html body main.demo580 .demo580-agenda article{position:relative!important;min-height:0!important;padding:0 8px!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}
html body main.demo580 .demo580-agenda article:not(:last-child):after,
html body main.adv1051 .audit-section.audit-how-section .audit-card:not(:last-child):after{content:''!important;position:absolute!important;top:21px!important;left:calc(50% + 30px)!important;width:calc(100% - 44px)!important;height:2px!important;background:#cfe0d7!important;display:block!important}
html body main.demo580 .demo580-agenda .demo580-num{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;border:2px solid #1d6b45!important;background:#fff!important;color:#1d6b45!important;font-size:15px!important;font-weight:800!important;box-sizing:border-box!important;position:relative;z-index:1}
html body main.demo580 .demo580-agenda article:last-child .demo580-num{background:#1d6b45!important;color:#fff!important}
html body main.demo580 .demo580-agenda .demo580-time{position:static!important;margin-top:10px!important;padding:3px 10px!important;border-radius:999px!important;background:#eef7f2!important;color:#1d6b45!important;font-size:12px!important;font-weight:800!important}
html body main.demo580 .demo580-agenda h3{margin:12px 0 6px!important;font-size:17px!important;font-weight:800!important;color:#101826!important}
html body main.demo580 .demo580-agenda p{margin:0!important;font-size:14px!important;line-height:1.5!important;color:#5b6675!important}
html body main.adv1051 .audit-section.audit-how-section .audit-card>b{box-sizing:border-box!important;display:grid!important;place-items:center!important;position:relative;z-index:1}
html body main.adv1051 .audit-section.audit-how-section .audit-card:not(:last-child):after{width:calc(100% - 44px)!important}

/* ---------- smal scherm ---------- */
@media(max-width:1000px){
  html body main.demo580 .demo580-agenda{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:32px!important}
  html body main.demo580 .demo580-agenda article:after,
  html body main.adv1051 .audit-section.audit-how-section .audit-card:after{display:none!important}
}
@media(max-width:900px){
  html body .adv1054-bg,
  html body main.adv1051 .audit-wrap,
  html body main.demo580 .demo580-hero{padding-top:20px!important;padding-bottom:36px!important}
  html body .adv1054-bg>.adv1052,
  html body .adv1054-bg>.auth-page.auth-page-register,
  html body main.adv1051 .audit-wrap .audit-hero,
  html body main.demo580 .demo580-hero .demo580-hero-grid{grid-template-columns:minmax(0,1fr)!important;border-radius:22px!important}
  html body .adv1054-bg>.adv1052 .adv1052-brand,
  html body .adv1054-bg>.auth-page-register .auth-visual,
  html body main.adv1051 .audit-wrap .audit-copy,
  html body main.demo580 .demo580-hero .demo580-copy{display:flex!important;order:0!important;padding:28px 22px!important}
  html body .adv1054-bg>.adv1052 .adv1052-formwrap,
  html body .adv1054-bg>.auth-page-register .auth-form-wrap,
  html body main.adv1051 .audit-wrap .audit-form,
  html body main.demo580 .demo580-hero .demo580-book{order:1!important;padding:28px 22px!important}
}
@media(max-width:560px){
  html body main.demo580 .demo580-agenda{grid-template-columns:minmax(0,1fr)!important}
  html body .adv1054-bg>.auth-page-register .auth-card-heading{display:flex!important;flex-direction:column!important;gap:10px!important}
  html body main.adv1051 .audit-wrap .adv1051-stats li{padding:10px 12px!important}
  html body main.adv1051 .audit-wrap .adv1051-stat-v{font-size:16px!important;white-space:nowrap}
}

/* ---------- uitlijning: details ---------- */
/* vertrouwensregel: icoon op de eerste tekstregel, ook als de tekst over twee regels loopt */
html body .adv1054-bg>.adv1052 .adv1052-foot,
html body .adv1054-bg>.auth-page-register .s6636-277-trust-copy{align-items:flex-start!important}
html body .adv1054-bg>.adv1052 .adv1052-foot svg,
html body .adv1054-bg>.auth-page-register .s6636-277-trust-copy:before,
html body main.demo580 .demo580-hero .demo580-mini-note:before{margin-top:2px!important;align-self:flex-start!important}
/* plankeuze: geen extra vlak binnen de gekozen optie */
html body .adv1054-bg>.auth-page-register .plan-option>span{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
html body .adv1054-bg>.auth-page-register .plan-option{min-height:56px!important;padding:8px 10px!important;border-radius:12px!important}
/* toestemmingen: vakje en tekst op dezelfde regel */
html body .adv1054-bg>.auth-page-register .register-consents{display:flex!important;flex-direction:column!important;gap:12px!important;padding:16px!important;border-radius:14px!important}
html body .adv1054-bg>.auth-page-register .register-consents label.check{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;column-gap:12px!important;align-items:start!important;margin:0!important;padding:0!important;min-height:0!important}
html body .adv1054-bg>.auth-page-register .register-consents label.check input{position:static!important;width:18px!important;height:18px!important;min-height:0!important;max-height:18px!important;padding:0!important;margin:2px 0 0!important;transform:none!important;top:auto!important}
html body .adv1054-bg>.auth-page-register .register-consents label.check span{display:block!important;margin:0!important;padding:0!important;line-height:1.5!important;font-size:14px!important}