/* ═══════════════════════════════════════════════════════════════════════════
   ICT aan de Lek — Boekingssysteem  |  public.css
   Mobile-first, alle kleuren via CSS custom properties
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --iatl-primary: #2D6A9F;
    --iatl-accent:  #1A4A7A;
    --iatl-radius:  10px;
    --iatl-shadow:  0 2px 12px rgba(0,0,0,.07);
}

/* ── Events lijst ─────────────────────────────────────────────────────────── */
.iatl-events        { display:flex; flex-direction:column; gap:16px; }
.iatl-events-empty  { color:#718096; font-style:italic; text-align:center; padding:40px 0; }

.iatl-event-card {
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:var(--iatl-radius);
    overflow:hidden;
    transition:box-shadow .2s;
}
.iatl-event-card:hover { box-shadow:var(--iatl-shadow); }
.iatl-event-card.is-soldout { opacity:.72; }

.iatl-event-img {
    height:180px;
    background-size:cover;
    background-position:center;
}

/* Mobile: stacked layout */
.iatl-event-body {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:16px;
}

/* Tablet+ */
@media(min-width:600px) {
    .iatl-event-body {
        display:grid;
        grid-template-columns:60px 1fr;
        gap:16px;
        padding:20px 22px;
        align-items:start;
    }
}

/* Datumbadge */
.iatl-date-badge {
    text-align:center;
    background:#F0F4F8;
    border-radius:8px;
    padding:8px 6px;
    width:60px;
    flex-shrink:0;
}
.iatl-date-badge .day   { display:block; font-size:24px; font-weight:700; color:#2C3E50; line-height:1.1; }
.iatl-date-badge .month { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#718096; margin-top:2px; }

/* Info kolom */
.iatl-event-info-col  { flex:1; min-width:0; }
.iatl-event-title     { font-size:18px; font-weight:700; color:#2C3E50; margin:0 0 6px; line-height:1.3; }
.iatl-event-location  { font-size:13px; color:#718096; margin:0 0 8px; }
.iatl-event-description { font-size:14px; color:#4A5568; line-height:1.7; margin:0 0 12px; }

.iatl-event-meta      { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:#4A5568; margin:8px 0; }
.iatl-avail-ok        { color:#276749; font-weight:600; }
.iatl-avail-low       { color:#C05621; font-weight:600; }
.iatl-avail-none      { color:#C53030; font-weight:600; }
.iatl-avail-wl        { color:#2B6CB0; font-weight:600; }

.iatl-event-action-inline { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Sessies grid ─────────────────────────────────────────────────────────── */
.iatl-sessions-heading {
    font-size:14px; font-weight:600; color:#2C3E50;
    margin:16px 0 10px; text-transform:uppercase; letter-spacing:.06em;
}

.iatl-sessions-grid   { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }

.iatl-session-row {
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:6px 10px;
    background:#fff;
    border:1.5px solid #E2E8F0;
    border-radius:8px;
    padding:12px 14px;
    transition:border-color .15s;
}

/* Tablet+: één regel per sessie */
@media(min-width:560px) {
    .iatl-session-row {
        grid-template-columns:1fr auto auto auto;
        grid-template-rows:auto;
        gap:10px 14px;
        padding:11px 16px;
    }
}

.iatl-session-row.session-soldout {
    background:#F7FAFC;
    border-color:#E2E8F0;
    cursor:not-allowed;
}
.iatl-session-row.session-soldout .iatl-session-day,
.iatl-session-row.session-soldout .iatl-session-dmy,
.iatl-session-row.session-soldout .iatl-session-time {
    text-decoration:line-through;
    color:#A0AEC0;
}
.iatl-session-row.session-low   { border-color:#F6AD55; background:#FFFBF0; }

/* Datum */
.iatl-session-date  { display:flex; flex-direction:column; gap:1px; }
.iatl-session-day   { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#718096; line-height:1.2; }
.iatl-session-dmy   { font-size:14px; font-weight:700; color:#2C3E50; line-height:1.3; }

/* Tijd — verborgen op mobiel, zichtbaar vanaf 560px */
.iatl-session-time  { font-size:13px; color:#4A5568; white-space:nowrap; display:none; }
@media(min-width:560px) { .iatl-session-time { display:block; } }

/* Status badge */
.iatl-session-avail {
    font-size:12px; font-weight:600;
    padding:4px 10px; border-radius:99px;
    white-space:nowrap;
}
.iatl-session-avail.ok       { background:#F0FFF4; color:#276749; }
.iatl-session-avail.low1     { background:#FFF5F5; color:#C53030; border:1px solid #FEB2B2; }
.iatl-session-avail.low2     { background:#FFF8F0; color:#C05621; border:1px solid #FBD38D; }
.iatl-session-avail.none     { background:#EDF2F7; color:#718096; }
.iatl-session-avail.waitlist { background:#EBF8FF; color:#2B6CB0; }

/* Aanmeldknop per sessie */
.iatl-session-btn-col { display:flex; align-items:center; }

/* Op mobiel: knop neemt volledige breedte in */
@media(max-width:559px) {
    .iatl-session-avail { grid-row:1; grid-column:2; }
    .iatl-session-btn-col { grid-row:2; grid-column:1 / -1; }
}

.iatl-btn-session {
    background:var(--iatl-primary);
    color:#fff;
    border:none;
    padding:8px 18px;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    white-space:nowrap;
    transition:background .15s, transform .1s;
    width:100%;
}
@media(min-width:560px) { .iatl-btn-session { width:auto; } }
.iatl-btn-session:hover { background:var(--iatl-accent); transform:translateY(-1px); }
.iatl-btn-session-soldout {
    background:#E2E8F0 !important;
    color:#A0AEC0 !important;
    cursor:not-allowed;
    transform:none !important;
}

/* ── Hoofd-knoppen ────────────────────────────────────────────────────────── */
.iatl-btn-book {
    display:inline-block;
    background:var(--iatl-primary);
    color:#fff !important;
    border:none;
    padding:12px 24px;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:background .2s;
    line-height:1.4;
    width:100%;
    text-align:center;
}
@media(min-width:480px) { .iatl-btn-book { width:auto; } }
.iatl-btn-book:hover { background:var(--iatl-accent); }
.iatl-btn-soldout {
    background:#CBD5E0; color:#718096; border:none;
    padding:12px 24px; border-radius:6px; font-size:15px;
    cursor:not-allowed; font-family:inherit; width:100%;
}
@media(min-width:480px) { .iatl-btn-soldout { width:auto; } }

.iatl-price-tag { font-size:13px; color:#718096; }

/* ── Popup overlay ────────────────────────────────────────────────────────── */
.iatl-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.55); z-index:9998;
    backdrop-filter:blur(3px);
}
.iatl-overlay.open { display:block; }

.iatl-popup {
    display:none;
    position:fixed;
    /* Mobiel: sheet van onderaf */
    bottom:0; left:0; right:0; top:auto;
    transform:translateY(100%);
    max-height:92vh;
    border-radius:14px 14px 0 0;
    z-index:9999;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 18px 32px;
    box-shadow:0 -8px 40px rgba(0,0,0,.16);
    transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .25s;
    opacity:0;
    box-sizing:border-box;
    width:100%;
}
.iatl-popup.open {
    display:block;
    transform:translateY(0);
    opacity:1;
}
/* Tablet+: centered modal */
@media(min-width:600px) {
    .iatl-popup {
        bottom:auto; left:50%; right:auto; top:50%;
        transform:translate(-50%,-50%) scale(.96);
        width:min(620px, 95vw);
        max-height:88vh;
        border-radius:14px;
        padding:28px 32px 32px;
    }
    .iatl-popup.open { transform:translate(-50%,-50%) scale(1); }
}

/* Sluit-knop */
.iatl-popup-close {
    position:sticky; top:0; float:right;
    background:none; border:none; font-size:26px;
    color:#A0AEC0; cursor:pointer; padding:0 0 8px 8px; line-height:1;
    transition:color .15s; z-index:1;
}
.iatl-popup-close:hover { color:#2D3748; }

.iatl-popup-event-name { font-size:17px; font-weight:700; color:#2C3E50; margin:0 0 4px; }
.iatl-popup-event-sub  { font-size:13px; color:#718096; margin:0 0 18px; }

/* ── Stap-indicator ───────────────────────────────────────────────────────── */
.iatl-steps {
    display:flex; align-items:center;
    margin-bottom:20px; padding-bottom:16px;
    border-bottom:1px solid #E2E8F0;
}
.iatl-step           { display:flex; align-items:center; gap:6px; }
.iatl-step-num {
    width:26px; height:26px; border-radius:50%;
    background:#EDF2F7; color:#718096;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0; transition:all .2s;
}
.iatl-step-label    { font-size:12px; color:#718096; display:none; }
@media(min-width:400px) { .iatl-step-label { display:block; } }
.iatl-step.active .iatl-step-num  { background:var(--iatl-primary); color:#fff; }
.iatl-step.active .iatl-step-label{ color:#2C3E50; font-weight:600; }
.iatl-step.done .iatl-step-num    { background:#38A169; color:#fff; }
.iatl-step-line { flex:1; height:1px; background:#E2E8F0; margin:0 6px; }

/* ── Datumkeuze kaartjes in popup ─────────────────────────────────────────── */
.iatl-date-options  { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }

.iatl-date-opt {
    display:flex; align-items:center; gap:12px;
    border:2px solid #E2E8F0; border-radius:8px;
    padding:12px 14px; cursor:pointer;
    transition:border-color .15s, background .15s;
}
.iatl-date-opt:hover   { border-color:var(--iatl-primary); background:#EBF8FF; }
.iatl-date-opt.selected{ border-color:var(--iatl-primary); background:#EBF4FF; }
.iatl-date-opt.disabled{ opacity:.5; cursor:not-allowed; }

.iatl-dob { text-align:center; background:#F0F4F8; border-radius:6px; padding:7px 10px; min-width:46px; }
.iatl-dob .d  { font-size:20px; font-weight:700; color:#2C3E50; line-height:1; }
.iatl-dob .m  { font-size:10px; text-transform:uppercase; color:#718096; }
.iatl-doi     { flex:1; }
.iatl-doi-time  { font-size:14px; font-weight:600; color:#2C3E50; }
.iatl-doi-avail { font-size:12px; color:#38A169; margin-top:2px; }
.iatl-doi-avail.low  { color:#C05621; }
.iatl-doi-avail.none { color:#C53030; }
.iatl-check {
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    background:#E2E8F0; display:flex; align-items:center; justify-content:center;
    font-size:12px; color:transparent; transition:all .15s;
}
.iatl-date-opt.selected .iatl-check { background:var(--iatl-primary); color:#fff; }

/* ── Formulier ────────────────────────────────────────────────────────────── */
.iatl-form-row   { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
@media(min-width:420px) { .iatl-form-row { grid-template-columns:1fr 1fr; } }

.iatl-form-field { margin-bottom:12px; }
.iatl-form-field label { display:block; font-size:13px; font-weight:600; color:#2C3E50; margin-bottom:4px; }
.iatl-req { color:#E53E3E; }

.iatl-form-field input,
.iatl-form-field select,
.iatl-form-field textarea {
    width:100%; border:1px solid #CBD5E0; border-radius:6px;
    padding:10px 12px; font-size:15px; color:#2C3E50;
    background:#fff; font-family:inherit;
    transition:border-color .15s; box-sizing:border-box;
    /* iOS fix */
    -webkit-appearance:none; appearance:none;
}
.iatl-form-field input:focus,
.iatl-form-field select:focus,
.iatl-form-field textarea:focus {
    border-color:var(--iatl-primary); outline:none;
    box-shadow:0 0 0 3px rgba(45,106,159,.12);
}
.iatl-form-field input.error { border-color:#E53E3E !important; }

.iatl-gdpr label {
    display:flex; gap:10px; align-items:flex-start;
    font-size:13px; color:#4A5568; cursor:pointer; font-weight:normal;
}
.iatl-gdpr input { margin-top:3px; flex-shrink:0; accent-color:var(--iatl-primary); }
.iatl-gdpr a { color:var(--iatl-primary); }

/* ── Review blok ──────────────────────────────────────────────────────────── */
.iatl-review {
    background:#F7FAFC; border:1px solid #E2E8F0; border-radius:8px;
    padding:14px 16px; margin-bottom:16px; font-size:14px;
}
.iatl-review table { width:100%; border-collapse:collapse; }
.iatl-review td    { padding:5px 0; vertical-align:top; }
.iatl-review td:first-child { color:#718096; width:110px; padding-right:12px; }

/* ── Popup navigatie ──────────────────────────────────────────────────────── */
.iatl-popup-nav {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:18px; padding-top:14px; border-top:1px solid #E2E8F0; gap:10px;
}

.iatl-btn-next, .iatl-btn-submit {
    background:var(--iatl-primary); color:#fff;
    border:none; padding:12px 24px;
    border-radius:6px; font-size:15px; font-weight:600;
    cursor:pointer; font-family:inherit; flex:1;
    transition:background .2s; line-height:1.4;
}
.iatl-btn-next:hover, .iatl-btn-submit:hover { background:var(--iatl-accent); }
.iatl-btn-next:disabled, .iatl-btn-submit:disabled { background:#CBD5E0; cursor:not-allowed; }
@media(min-width:420px) { .iatl-btn-next, .iatl-btn-submit { flex:0 0 auto; } }

.iatl-btn-back {
    background:none; border:1px solid #CBD5E0; color:#4A5568;
    padding:10px 18px; border-radius:6px; font-size:14px;
    cursor:pointer; font-family:inherit; transition:background .15s;
}
.iatl-btn-back:hover { background:#F7FAFC; }

/* ── Resultaat berichten ──────────────────────────────────────────────────── */
.iatl-result {
    margin-top:12px; padding:12px 16px; border-radius:6px;
    font-size:14px; line-height:1.6; display:none;
}
.iatl-result.success { background:#F0FFF4; color:#276749; border:1px solid #9AE6B4; }
.iatl-result.error   { background:#FFF5F5; color:#C53030; border:1px solid #FEB2B2; }
.iatl-result.warning { background:#FFFBEB; color:#B7791F; border:1px solid #FAF089; }

/* ── Single event ─────────────────────────────────────────────────────────── */
.iatl-single          { max-width:720px; }
.iatl-single-img      { height:240px; background-size:cover; background-position:center; border-radius:var(--iatl-radius); margin-bottom:20px; }
@media(min-width:600px) { .iatl-single-img { height:340px; } }
.iatl-single-title    { font-size:24px; font-weight:700; color:#2C3E50; margin:0 0 12px; line-height:1.3; }
@media(min-width:600px) { .iatl-single-title { font-size:30px; } }
.iatl-single-meta     { display:flex; flex-wrap:wrap; gap:12px; font-size:14px; color:#4A5568; margin-bottom:18px; }
.iatl-single-desc     { font-size:15px; color:#4A5568; line-height:1.8; margin-bottom:24px; }
.iatl-single-book     { margin-top:20px; }
.iatl-maps-link       { display:inline-block; margin-bottom:16px; color:var(--iatl-primary); font-size:14px; text-decoration:none; }
.iatl-maps-link:hover { text-decoration:underline; }
.iatl-maps-embed      { border-radius:8px; overflow:hidden; margin-bottom:20px; }