/* De kaartjes in het gesprek van de assistent (deel 2, mockups 09-10): Even kennismaken, Jouw voorstel, de vrije
   momenten, de gegevens voor de boeking en dit staat voor je klaar (assistent-kaarten.js), en in dezelfde stijl de
   formulieren en de uitkomst van de oude rekenhulp (de terugval). Een kaartje is wit met een fijne rand en een zachte
   schaduw, op één lijn met de ballonnen (34 px in); bovenaan een klein label in mosterd, velden in een raster, een
   mosterd hoofdknop. De momenten zijn tegels met pillen eronder. Een kaartje dat af is, staat er nog zoals het was. */

.ah-bericht--kaart{padding-left:34px}
.ah-bericht--kaart:focus{outline:none}
.ah-kaart,.ah-assistent__stap :is(.ah-assistent__gegevens,.ah-assistent__klein){margin:0;padding:16px;border:1px solid var(--chat-lijn);border-radius:18px;background:var(--wit);box-shadow:0 6px 18px rgba(31,27,19,.06)}
.ah-kaart+.ah-kaart__pillen,.ah-kaart--momenten>.ah-kaart+*{margin-top:10px}
.ah-kaart__boven{margin:0;color:var(--mosterdtekst);font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
.ah-kaart__titel{margin:4px 0 2px;font-size:17px;font-weight:650;line-height:1.25}
.ah-kaart__sub{margin:0;color:var(--chat-grijs);font-size:13px;line-height:1.4}
.ah-kaart__tekst{margin:8px 0 0;font-size:14px;line-height:1.45}
.ah-kaart__noot{margin:10px 0 0;color:var(--chat-grijs);font-size:12px;line-height:1.4}
.ah-kaart__noot a{color:var(--brons)}

/* Het voorstel: de prijs groot, de vinkjes, de hoofdknop en de losse beurt eronder. */
.ah-kaart__prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:12px 0 2px}
.ah-kaart__prijs b{font-size:36px;font-weight:600;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:lining-nums}
.ah-kaart__prijs span{color:var(--chat-grijs);font-size:14px}
.ah-kaart__vinkjes{margin:10px 0 14px;padding:0;list-style:none;font-size:14px;line-height:1.4}
.ah-kaart__vinkjes li{display:flex;gap:8px;margin-top:6px}
.ah-kaart__vinkjes svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--mosterdtekst)}
/* Eerst de behandeling, daarna onderhoud (14-10, variant B): twee regels met elk hun bedrag. */
.ah-kaart__stappen{margin:12px 0 0;border:1px solid var(--chat-lijn);border-radius:14px;overflow:hidden}
.ah-kaart__stap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px}
.ah-kaart__stap+.ah-kaart__stap{border-top:1px solid var(--chat-lijn);background:var(--chat-vlak)}
.ah-kaart__wanneer{grid-column:1/-1;color:var(--mosterdtekst);font-size:11.5px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.ah-kaart__wat{min-width:0;font-size:15px;font-weight:650;line-height:1.3}
.ah-kaart__bedrag{font-size:20px;font-weight:650;line-height:1.2;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ah-kaart__duur,.ah-kaart__per{color:var(--chat-grijs);font-size:12.5px;line-height:1.35}
.ah-kaart__per{text-align:right;white-space:nowrap}
.ah-kaart__stappen+.ah-kaart__noot{margin-top:8px}
.ah-kaart__hoofd,.ah-assistent__stap .ah-assistent__verstuur{display:block;width:100%;min-height:46px;margin:0;padding:10px 16px;border:0;border-radius:12px;background:var(--mosterd);color:var(--brons);font:650 15px/1.2 var(--letter);letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .2s}
.ah-kaart__hoofd:hover,.ah-assistent__stap .ah-assistent__verstuur:hover{background:var(--mosterd-licht)}
.ah-kaart__twee{display:block;width:100%;min-height:44px;margin:8px 0 0;padding:10px 16px;border:1.5px solid var(--chat-lijn);border-radius:12px;background:var(--wit);color:var(--brons);font:550 14.5px/1.2 var(--letter);cursor:pointer;transition:border-color .2s}
.ah-kaart__twee:hover{border-color:var(--mosterd)}
.ah-kaart__tekst+.ah-kaart__hoofd{margin-top:14px}

/* Velden: in een raster van twee, naam en e-mail over de hele breedte. */
.ah-kaart__velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0 14px}
.ah-chat .ah-assistent__veldje{display:flex;flex-direction:column;gap:5px;min-width:0}
.ah-assistent__veldje--breed{grid-column:1/-1}
.ah-chat .ah-assistent__label{margin:0;color:var(--chat-grijs);font-size:12.5px;font-weight:400;line-height:1.3;letter-spacing:0;text-transform:none}
.ah-chat .ah-assistent__regel{display:flex;gap:8px}
.ah-chat :is(.ah-kaart,.ah-kaart__postcode,.ah-assistent__stap) .ah-assistent__veld{width:100%;min-width:0;height:44px;margin:0;padding:0 12px;border:1px solid rgba(31,27,19,.18);border-radius:10px;background:var(--wit);color:var(--brons);font:400 15px/1.2 var(--letter);transition:border-color .2s,box-shadow .2s}
.ah-chat :is(.ah-kaart,.ah-kaart__postcode,.ah-assistent__stap) .ah-assistent__veld--groot{height:auto;min-height:64px;padding:10px 12px;line-height:1.4;resize:vertical}
.ah-chat :is(.ah-kaart,.ah-kaart__postcode,.ah-assistent__stap) .ah-assistent__veld::placeholder{color:#a8a296;opacity:1}
.ah-chat :is(.ah-kaart,.ah-kaart__postcode,.ah-assistent__stap) .ah-assistent__veld:focus{outline:none;border-color:var(--mosterd);box-shadow:0 0 0 3px rgba(226,180,36,.25)}
.ah-chat .ah-assistent__veld[aria-invalid="true"]{border-color:#b3261e}
.ah-chat .ah-assistent__veldfout{margin:0;color:#b3261e;font-size:12.5px;line-height:1.35}
.ah-assistent__hint{margin:0;color:var(--chat-grijs);font-size:12px;line-height:1.35}
.ah-assistent__honing{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Op een aanraakscherm (en op elk scherm onder 1024 px: niet elke browser meldt de vinger) 16 px, anders zoomt iOS in. */
@media (pointer:coarse),(max-width:1023.98px){
  .ah-chat :is(.ah-kaart,.ah-kaart__postcode,.ah-assistent__stap) .ah-assistent__veld{font-size:16px}
  .ah-chat .ah-assistent__optie{font-size:16px}
}

/* Wat al bekend is: een klein label en de waarde, regel onder regel. */
.ah-kaart__regel{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:10px}
.ah-kaart__boven+.ah-kaart__regel{margin-top:12px}
.ah-kaart__label{min-width:7.5em;color:var(--chat-grijs);font-size:12.5px;line-height:1.4}
.ah-kaart__waarde{margin:0;font-size:15px;font-weight:550;line-height:1.4;overflow-wrap:anywhere}
.ah-kaart__waarde small{color:var(--chat-grijs);font-size:12.5px;font-weight:400}
/* Een tweede regel bij een waarde (13-10: de voorrijkosten bij een moment, tot wanneer je de dag van een week hoort). */
.ah-kaart__regel--twee .ah-kaart__waarde small{display:block;margin-top:2px;font-size:13px;line-height:1.4}
.ah-kaart__regel+.ah-kaart__velden{margin-top:14px}

/* De postcode: een veld met Zoek momenten ernaast. Onder de momenten als eigen kaartje. */
.ah-kaart__postcode{margin-top:14px}
.ah-kaart--momenten>.ah-kaart__postcode,.ah-assistent__stap .ah-assistent__klein{margin-top:10px;padding:14px 16px;border:1px solid var(--chat-lijn);border-radius:18px;background:var(--wit)}
.ah-kaart__postcoderij{display:flex;align-items:flex-end;gap:8px}
.ah-kaart__postcoderij .ah-assistent__veldje{flex:1}
.ah-kaart__postcoderij .ah-assistent__veldje:has(.ah-assistent__veldfout:not([hidden])){align-self:flex-start}
.ah-kaart__zoek,.ah-assistent__stap .ah-assistent__stuur{flex:none;height:44px;margin:0;padding:0 16px;border:0;border-radius:10px;background:var(--brons);color:var(--papier);font:600 14px/1 var(--letter);cursor:pointer}
.ah-kaart__zoek:hover,.ah-assistent__stap .ah-assistent__stuur:hover{background:#3a3326}

/* De momenten: tegels in twee kolommen (op de aparte pagina vier), de eerste met een mosterd rand en "eerstvolgende". */
.ah-momenten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ah-moment{display:block;min-width:0;margin:0;padding:10px 12px;border:1.5px solid var(--chat-lijn);border-radius:14px;background:var(--wit);color:var(--brons);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.ah-moment:hover{border-color:var(--mosterd)}
.ah-moment b{display:block;font-size:14.5px;font-weight:650;line-height:1.3}
.ah-moment span{display:block;color:var(--chat-grijs);font-size:13px;line-height:1.35}
.ah-moment.is-eerst{border-color:var(--mosterd)}
.ah-moment.is-eerst span{color:var(--mosterdtekst);font-weight:600}
.ah-moment.is-gekozen{border-color:var(--mosterd);background:var(--mosterd)}
.ah-moment.is-gekozen span{color:var(--brons)}
.ah-moment.is-gedempt{opacity:.5}
.ah-kaart__pillen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* Dit staat voor je klaar: blokken met een haarlijn ertussen. */
.ah-kaart__blok{margin-top:12px;padding-top:12px;border-top:1px solid var(--chat-lijn)}
.ah-kaart__boven+.ah-kaart__blok{margin-top:10px;padding-top:0;border-top:0}
.ah-kaart__blok .ah-kaart__label{display:block;margin-bottom:2px}
.ah-kaart__blok p{margin:0;font-size:14.5px;line-height:1.45}

/* De oude rekenhulp: de uitkomst als kaartje naast het teken van Fris, het formulier met de keuze abonnement of losse
   beurt als rondjes. */
.ah-kaart--uitkomst{max-width:calc(100% - 34px)}
.ah-uitkomst__pakket{margin:0;font-size:17px;font-weight:650;line-height:1.25}
.ah-uitkomst__bedrag{margin:10px 0 0;font-size:36px;font-weight:600;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:lining-nums tabular-nums}
.ah-uitkomst__bij{margin:2px 0 8px;color:var(--chat-grijs);font-size:13px;line-height:1.4}
.ah-uitkomst__regel{margin:4px 0 0;font-size:14px;font-variant-numeric:lining-nums tabular-nums}
.ah-uitkomst__reden{margin:10px 0 0;font-size:14px;line-height:1.45}
.ah-uitkomst__opmerkingen{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.45}
.ah-assistent__stap .ah-assistent__gegevens{display:grid;gap:10px}
.ah-assistent__kies{min-width:0;margin:0;padding:0;border:0}
.ah-assistent__optie{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;line-height:1.35;cursor:pointer}
.ah-assistent__optie input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--mosterdtekst);cursor:pointer}
.ah-assistent__noot{margin:0;color:var(--chat-grijs);font-size:12px;line-height:1.4}
.ah-assistent__noot a{color:var(--brons)}

/* De aparte pagina: kaartjes tot 600 breed, de momenten in vier kolommen (mockup, stand pagina-gesprek). */
.ah-chat--groot .ah-kaart{max-width:600px}
.ah-chat--groot .ah-momenten{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px}
@media (max-width:1023.98px){
  .ah-chat--groot .ah-momenten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:359px){
  .ah-kaart__velden{grid-template-columns:minmax(0,1fr)}
}
/* Inplannen via Fris (13-10): de koppen van de groepen momenten (in de buurt, flexibele weken, met voorrijkosten), de maanden
   na Andere periode, en Zet in je agenda als knop op het eindkaartje. */
.ah-momenten__kop,.ah-momenten__uitleg{margin:16px 2px 8px;color:var(--mosterdtekst)}
.ah-momenten__kop{font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
.ah-momenten__uitleg{font-size:13px;font-weight:600;line-height:1.4}
.ah-kaart--momenten>:is(.ah-momenten__kop,.ah-momenten__uitleg):first-child{margin-top:4px}
.ah-kaart__agenda{display:flex;align-items:center;justify-content:center;margin-top:14px;text-align:center;text-decoration:none}
.ah-rij>.ah-kaart--periodes{flex:1 1 auto;min-width:0}