/* Mijn onderhoud in de vormen van de site (mockups A, gekozen door Wesley 22-10). Kop, voet, letters, knoppen en alle
   blokken komen uit ah-site.css van de site zelf; hier staat alleen wat de site nog niet heeft. Overgenomen uit
   voorbeeld-a.html en overzicht-a.html, plus de meldingen, het Fris-venster dat echt verstuurt en een rij van vier tegels. */

/* De inlogpagina: het inlogvak in de vorm van het zoekveld van de site, en "Kijk in je mail" in de vorm van het antwoord
   van de plaatscheck. */
.ah-inlog{width:100%;max-width:540px;margin:0}
.ah-inlog .ah-zoek{max-width:none;margin:0 0 var(--r2)}
.ah-inlog .ah-zoek input{padding-right:24px}
.ah-inlog .ah-zoek__loep{width:21px;height:21px}
.ah-inlog__noot{max-width:46ch;margin:var(--r3) 0 0;font-size:15px;line-height:1.55;color:rgba(31,27,19,.74)}
.ah-inlog__noot+.ah-inlog__noot{margin-top:6px}
.ah-inlog__noot a{color:var(--brons);font-weight:600;text-decoration:none;border-bottom:2px solid var(--mosterd)}
.ah-inlog__fout{margin:0 0 var(--r2);font-size:15px;font-weight:600;color:#8a2b1d}
.ah-inlog__klaar{width:100%;max-width:540px;margin:0}
.ah-inlog__klaar.ah-plaatsen__ja{align-items:start}
.ah-inlog__klaar .ah-plaatsen__ja-waar+.ah-plaatsen__ja-waar{margin-top:8px}
@media (max-width:899px){
  .ah-inlog .ah-zoek{margin-bottom:12px}
  .ah-inlog__noot{font-size:15px}
}
/* Vier tegels naast de foto (zelf verzetten staat uit): twee naast de foto, twee eronder op halve breedte. De site regelt
   alleen de rij van vijf (ah-bento--foto). */
@media (min-width:1024px){
  .ah-bento--foto>.ah-tegel--foto:first-child:nth-last-child(5)~.ah-tegel:nth-child(n+4){grid-column:span 6}
}

/* Ingelogd: de naam en Uitloggen als rustige regel onder de kopbalk (de kop zelf blijft die van de site), even breed als de
   opening eronder. Uitloggen is een knop in een formulier (POST met @csrf naar mijn.uit). */
.ah-mijn-wie{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;width:min(100% - 2*var(--marge),1690px);
  margin:0 auto;padding:16px 0 0;font-size:14px;line-height:1.4;color:var(--zacht)}
.ah-mijn-wie p{margin:0}
.ah-mijn-wie b{color:var(--brons);font-weight:600}
.ah-mijn-uit{margin:0}
.ah-mijn-uit button{margin:0;padding:0 0 1px;border:0;border-bottom:2px solid var(--mosterd);background:none;color:var(--brons);
  font:600 14px/1.4 var(--letter);cursor:pointer}
.ah-mijn-uit button:hover{border-color:var(--brons)}

/* Een melding na een handeling (verzet, aangevuld): boven de afspraak, in de vorm van een chip van de site. */
.ah-mijn-melding{margin:0 0 var(--r3);max-width:46ch;padding:12px 16px;border-radius:16px;background:#e9f2e6;color:#2f6b3a;font-size:15px;line-height:1.45}
.ah-mijn-melding--fout{background:#fbeae7;color:#8a2b1d}

/* De opening: links de afspraak, rechts Fris, op de plek van de foto en even groot. */
.ah-mijn-opening .ah-opening__raster{min-height:min(calc(100svh - var(--balk) - 56px - clamp(24px,3.4vh,48px)),900px)}
.ah-mijn-opening .ah-scherm__stip{margin:-6px 0 14px;font-size:13px;padding:4px 11px}
.ah-mijn-opening .ah-scherm__stip--open{background:#e8f1f8;color:#245a80}
.ah-mijn-opening .ah-opening__kop .ah-regel{display:block}
.ah-mijn-noot{margin:var(--r3) 0 0;max-width:42ch;font-size:15px;line-height:1.5;color:var(--zacht)}
.ah-mijn-noot+.ah-mijn-noot{margin-top:10px}
.ah-mijn-noot .ah-pijllink{white-space:nowrap}
.ah-mijn-noot ul{margin:4px 0 0;padding-left:18px}
.ah-mijn-fris{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;overflow:clip;border-radius:28px;
  background:var(--chat-vlak);box-shadow:0 1px 2px rgba(31,27,19,.06),0 30px 60px -36px rgba(31,27,19,.45)}
.ah-mijn-fris .ah-chat__kop{padding:18px 22px}
.ah-mijn-fris .ah-gesprek__verloop{gap:12px;padding:24px 28px 14px}
.ah-mijn-fris .ah-assistent__onder{padding:14px 28px 16px}
.ah-mijn-fris .ah-chat__invoer{padding:6px 8px 6px 20px}
.ah-mijn-fris .ah-ballon{max-width:80%;font-size:16px}
.ah-mijn-fris .ah-bericht--jij .ah-ballon{max-width:72%}
.ah-mijn-fris .ah-assistent__keuze{min-height:40px;font-size:15px;text-decoration:none}
.ah-mijn-fris .ah-assistent__keuze[aria-pressed="true"]{background:var(--brons);border-color:var(--brons);color:var(--wit)}
.ah-mijn-fris .ah-mijn-adressen{display:flex;flex-wrap:wrap;gap:8px}
.ah-mijn-fris .ah-mijn-adres{position:relative}
.ah-mijn-fris .ah-mijn-adres input{position:absolute;opacity:0;width:1px;height:1px}
.ah-mijn-fris .ah-mijn-adres:has(input:checked){background:var(--brons);border-color:var(--brons);color:var(--wit)}
.ah-mijn-fris .ah-mijn-adres:has(input:focus-visible){outline:2px solid var(--mosterd);outline-offset:2px}
/* Op een breed scherm is het venster niet zo groot als de foto die hier op de site staat: rechts uitgelijnd, zoals
   Uitloggen erboven, en verticaal in het midden. */
@media (min-width:1440px){
  .ah-mijn-fris{inset:0 0 0 auto;width:min(100%,780px);height:min(100%,640px);margin:auto 0}
}
@media (max-width:899px){
  .ah-mijn-wie{width:calc(100% - 2*var(--marge));padding-top:12px}
  .ah-mijn-opening .ah-opening__tekst{order:0;margin:0 0 24px}
  .ah-mijn-wie__adres{display:none}
  .ah-mijn-opening{padding-top:18px}
  .ah-mijn-opening .ah-opening__beeld{order:0;height:auto;margin:var(--r5) 0 0}
  .ah-mijn-fris{position:relative;inset:auto;height:min(560px,calc(100svh - 120px));min-height:460px;border-radius:22px}
  .ah-mijn-fris .ah-chat__kop{padding:12px 14px}
  .ah-mijn-fris .ah-gesprek__verloop{padding:18px 16px 10px}
  .ah-mijn-fris .ah-assistent__onder{padding:10px 14px 12px}
  .ah-mijn-fris .ah-ballon{max-width:86%;font-size:15px}
  .ah-mijn-noot{order:2;margin-top:18px}
}
@media (max-width:599px){
  .ah-mijn-fris .ah-chat__bel{display:none}
}

/* De regels van een abonnement of een airco: de vorm van de regels in het schermpje van de site, hier ook buiten de opening. */
.ah-mijn-regels{list-style:none;margin:0;padding:0}
.ah-mijn-regels li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding:10px 0 0;
  border-top:1px solid var(--kaartlijn);font-size:15px;line-height:1.35;color:var(--zacht)}
.ah-mijn-regels li::before{content:none}
.ah-mijn-regels li+li{margin-top:10px}
.ah-mijn-regels li:first-child{padding-top:0;border-top:0}
.ah-mijn-regels b{font-weight:600;color:var(--brons);text-align:right}
.ah-prijskaart .ah-mijn-regels{margin:0 0 22px}
.ah-prijskaart .ah-prijsopties{margin-bottom:22px}
.ah-prijskaart .ah-prijskaart__klein a{white-space:nowrap}
.ah-prijskaart__klein+.ah-prijskaart__klein{margin-top:8px}
.ah-prijskaart .ah-knoppen{margin:0 0 18px}

/* De facturen: een knop Betalen in de tabel. */
.ah-mijn-betaal{display:inline-flex;margin-top:10px;min-height:0;padding:9px 16px;font-size:11px;line-height:1.35;text-align:center}

/* De tegels van je airco en je beurten: de tegels van Waarom bij ons, met regels, foto's en vinkjes erin. */
.ah-mijn-airco .ah-bento{align-items:stretch}
.ah-mijn-airco .ah-tegel .ah-mijn-regels{margin:2px 0 0}
.ah-mijn-airco .ah-tegel .ah-pijllink{align-self:flex-start;margin-top:auto}
.ah-mijn-wanneer{margin:-6px 0 0!important;font-size:15px!important}
.ah-mijn-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:0}
.ah-mijn-fotos img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--kaartlijn)}
/* In het kort onder de afspraak: abonnement en facturen in één blik. */
.ah-mijn-stand{max-width:440px;margin:var(--r3) 0 0!important}
.ah-mijn-stand li{font-size:15px}
.ah-mijn-stand a{color:inherit;text-decoration:none;border-bottom:2px solid var(--mosterd)}
.ah-mijn-stand a:hover{border-color:var(--brons)}
@media (max-width:899px){.ah-mijn-stand{order:3;width:100%;max-width:none}}
.ah-mijn-klein{margin:4px 0 0!important;font-size:12px!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mosterdtekst)!important}