/* Gastlogin (claude/gastlogin-ontwerp.md v1.3): de pagina /gast/ en de gastbalk, de pop-up en de schermen in /mijn/ */
.gs-body{background:#FAF8F3;min-height:100vh}
.gs-main{max-width:600px;margin:0 auto;padding:40px 20px 80px;display:flex;flex-direction:column;gap:18px}
.gs-kaart{background:#fff;border:1px solid #E4E7EC;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}
.gs-kaart h1{margin:0;font-size:28px;line-height:1.2}
.gs-kaart h2{margin:0;font-size:20px}
.gs-kaart p{margin:0}
.gs-midden{align-items:center;text-align:center}
.gs-stil{color:#475467;font-size:15px}
.gs-klein{color:#475467;font-size:14px}
.gs-stappen{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.gs-code{font-size:44px;font-weight:800;letter-spacing:.14em;padding:12px 18px;border-radius:14px;background:#F3F5FF;color:#101828;text-align:center}
.gs-ico{width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#ECFDF3;color:#067647}
.gs-ico.rood{background:#FEF3F2;color:#B42318}.gs-ico.geel{background:#FFF4D6;color:#93370D}
.gs-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.gs-knoppen .mj-knop{min-height:52px;font-size:17px}
.gs-veld{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700}
.gs-veld input,.gs-veld textarea{font:inherit;font-weight:400;font-size:17px;padding:12px 14px;border-radius:12px;border:1.5px solid #D0D5DD;box-sizing:border-box;width:100%}
.gs-veld input:focus,.gs-veld textarea:focus{outline:3px solid #C7D2FE;border-color:#2B4EFF}
.gs-fout{color:#B42318;font-size:15px;margin:0}
.gs-berichten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gs-berichten li{padding:10px 14px;border-radius:12px;background:#F9FAFB;font-size:15px}
.gs-berichten li.ik{background:#EEF2FF}
.gs-berichten b{font-size:14px}
.gs-wacht{display:flex;align-items:center;gap:10px;color:#475467;font-size:15px}
.gs-wacht::before{content:"";width:14px;height:14px;border-radius:999px;border:2px solid #2B4EFF;border-right-color:transparent;animation:gs-draai 1s linear infinite}
@keyframes gs-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gs-wacht::before{animation:none}}

/* in /mijn/: de balk van de gast (donker, niet weg te klikken) */
.gk-balk{position:sticky;top:0;z-index:61;background:#1F2A44;color:#fff;font-size:15px}
.gk-balk .gk-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 24px;max-width:1200px;margin:0 auto}
.gk-balk .gk-tijd{color:#D0D5DD;font-size:14px}
.gk-balk button{font:inherit;font-weight:700;background:#fff;color:#101828;border:0;border-radius:10px;padding:8px 14px;cursor:pointer;min-height:40px}
/* de balk bij de eigenaar: er helpt iemand mee */
.ge-balk{background:#FFF4D6;border-bottom:1px solid #FEDF89;font-size:15px}
.ge-balk .gk-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 24px;max-width:1200px;margin:0 auto}
.ge-balk button,.ge-balk a{font:inherit;font-size:14px;font-weight:700}
.ge-balk .ge-stop{background:#fff;color:#B42318;border:1.5px solid #FDA29B;border-radius:10px;padding:6px 12px;cursor:pointer;min-height:36px}
.ge-gez{width:30px;height:30px;border-radius:999px;background:#B54708;color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* pop-up (inlogverzoek) en waarschuwingen: een eigen laag, los van de gewone dialogen */
.gk-laag{position:fixed;inset:0;z-index:10050;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.gk-venster{background:#fff;border-radius:20px;padding:24px;max-width:480px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(16,24,40,.3)}
.gk-venster h2{margin:0;font-size:22px}
.gk-venster p{margin:0;font-size:16px}
.gk-venster .gs-code{font-size:34px}
.gk-keus{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid #D0D5DD;cursor:pointer;font-size:15px}
.gk-keus:has(input:checked){border:2px solid #2B4EFF;background:#F8F9FF}
.gk-keus input{width:20px;height:20px;margin:2px 0 0;accent-color:#2B4EFF}
.gk-keus b{display:block;font-size:16px}
/* het scherm Wie helpt mee (#meehelpen) */
.gm-rij{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #E4E7EC;border-radius:14px;background:#fff;flex-wrap:wrap}
.gm-rij .gm-wie{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px;font-size:15px}
.gm-rij .gm-wie b{font-size:17px}
.gm-aan{color:#067647;font-weight:700}
.gm-log{list-style:none;margin:0;padding:0}
.gm-log li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #F2F4F7;font-size:15px}
.gm-log li span:first-child{width:130px;flex:none;color:#475467}
.gm-sectie{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid #E4E7EC;border-radius:16px;background:#fff;margin-top:16px}
.gm-sectie h2{margin:0;font-size:18px}
.gu-link{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gu-link input{flex:1;min-width:200px;font:inherit;font-size:14px;padding:10px 12px;border-radius:10px;border:1.5px solid #D0D5DD}
@media (max-width:640px){.gk-balk .gk-in,.ge-balk .gk-in{padding:8px 14px;gap:8px}.gk-balk .gk-tijd{width:100%;order:3}.gs-main{padding:24px 14px 60px}.gs-kaart h1{font-size:23px}.gs-code{font-size:36px}}
.gs-kaart h1:focus,.gs-kaart h1:focus-visible{outline:none}