/* ── NWC Initiatie Inschrijving ── */
:root {
    --b1: #0a5fa3;
    --b2: #084d87;
    --b3: #063d6b;
    --b4: #c8e4f8;
    --b5: #e8f4fd;
    --b6: rgba(10,95,163,.15);
    --tx: #0f2d4a;
    --tg: #4a6580;
}

#init-wrap {
    max-width: 580px;
    margin: 2rem auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tx);
    font-size: 1rem;
}

/* ══ Stap container ══════════════════════════════════════ */
.init-stap {
    background: var(--b5);
    border: 1.5px solid var(--b4);
    border-radius: 14px;
    padding: 1.75rem 2rem;
    animation: init-in .22s ease;
}
@keyframes init-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══ Header met logo ══════════════════════════════════════ */
.init-header {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--b1);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    margin-bottom: 1.4rem;
}
.init-logo {
    width: 80px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.init-header h3 {
    margin: 0 0 .15rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-header p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: .88rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ══ Stap kop ════════════════════════════════════════════ */
.init-stap-kop { margin-bottom: 1.2rem; }
.init-stap-kop h3 {
    margin: 0 0 .2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--b3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-stap-kop p {
    margin: 0;
    color: var(--tg);
    font-size: .92rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ══ Formuliervelden ══════════════════════════════════════ */
.init-veld { margin-bottom: 1rem; }
.init-veld label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
    font-size: .93rem;
    color: var(--tx);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-veld input[type="text"],
.init-veld input[type="email"],
.init-veld input[type="tel"],
.init-veld input[type="date"],
.init-veld input[type="number"],
.init-veld select,
#init-gevonden-anders-wrap input {
    width: 100%;
    padding: .6rem .8rem;
    border: 1.5px solid var(--b4);
    border-radius: 7px;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    background: #fff;
    color: var(--tx);
    transition: border-color .15s, box-shadow .15s;
}
.init-veld input[type="date"] {
    min-height: 46px;
    appearance: none;
    -webkit-appearance: none;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.init-veld input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: .2rem;
    border-radius: 6px;
    opacity: .78;
    transition: background-color .15s, opacity .15s;
}
.init-veld input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(10,95,163,.1);
    opacity: 1;
}
.init-veld input:focus,
.init-veld select:focus,
#init-gevonden-anders-wrap input:focus {
    border-color: var(--b1);
    outline: none;
    box-shadow: 0 0 0 3px var(--b6);
}
.init-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) {
    .init-rij { grid-template-columns: 1fr; }
    .init-stap { padding: 1.25rem 1.1rem; }
}
.init-verplicht { color: #c0392b; }

/* ══ Checkboxes ══════════════════════════════════════════ */
.init-veld-check label {
    display: flex; align-items: center; gap: .5rem;
    font-weight: normal; cursor: pointer; color: var(--tx);
    padding: .4rem .6rem; border-radius: 7px;
    transition: background .12s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-veld-check label:hover { background: #d9eefa; }
.init-veld-check input[type="checkbox"] {
    width: 1.1rem; height: 1.1rem;
    accent-color: var(--b1); cursor: pointer; flex-shrink: 0;
}
.init-sub-check {
    margin-top: -.4rem; margin-left: 1.6rem;
    padding: .5rem .8rem;
    background: #d6edf9;
    border-left: 3px solid var(--b1);
    border-radius: 0 7px 7px 0;
    animation: init-in .18s ease;
}

/* ══ Radio's ══════════════════════════════════════════════ */
.init-radio-groep { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
.init-radio-label {
    display: flex; align-items: center; gap: .55rem;
    font-weight: normal; cursor: pointer; color: var(--tx);
    padding: .42rem .7rem; border-radius: 7px;
    transition: background .1s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-radio-label:hover { background: #d9eefa; }
.init-radio-label input[type="radio"] {
    width: 1.05rem; height: 1.05rem;
    accent-color: var(--b1); flex-shrink: 0; cursor: pointer;
}
#init-gevonden-anders-wrap { margin-top: .5rem; animation: init-in .18s ease; }

/* ══ Profielkaarten ══════════════════════════════════════ */
.init-kaarten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.init-profielkaart {
    display: flex; flex-direction: column; align-items: center;
    gap: .45rem; padding: 1rem .75rem;
    background: #fff;
    border: 2px solid var(--b4);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    font-size: .88rem;
    font-weight: 600;
    color: var(--b3);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: init-in .2s ease;
    line-height: 1.3;
}
.init-profielkaart:hover {
    border-color: var(--b1);
    transform: translateY(-3px);
    box-shadow: 0 5px 16px rgba(10,95,163,.2);
}
.init-profielkaart:active { transform: translateY(0); }
.init-kaart-naam { font-weight: 400; font-size: .82rem; color: var(--tg); }
.init-profielkaart.init-kaart-nieuw {
    border-style: dashed; color: var(--b1);
    border-color: var(--b1); background: #eef7ff;
}
.init-profielkaart.init-kaart-nieuw:hover { background: #daeeff; }
.init-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--b5);
    border: 2px solid var(--b4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; color: var(--b1);
}
.init-kaart-nieuw .init-avatar {
    background: #d6edf9; border-color: var(--b1);
    font-size: 1.6rem; font-weight: 400;
}

/* ══ Sessiekaarten ════════════════════════════════════════ */
.init-sessie-kaarten { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.init-sessie-kaart {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.1rem;
    background: #fff; border: 2px solid var(--b4); border-radius: 10px;
    cursor: pointer; text-align: left;
    transition: border-color .15s, transform .12s, background .12s;
    animation: init-in .15s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-sessie-kaart:hover { border-color: var(--b1); background: #eef7ff; transform: translateX(3px); }
.init-sessie-kaart:active { transform: translateX(0); }
.init-sessie-dag { font-size: .8rem; font-weight: 600; color: var(--tg); text-transform: capitalize; min-width: 75px; }
.init-sessie-datum { font-size: 1rem; font-weight: 700; color: var(--b3); }

/* ══ Knoppen ══════════════════════════════════════════════ */
.init-knop {
    display: inline-block; padding: .65rem 1.5rem;
    background: var(--b1); color: #fff;
    border: none; border-radius: 7px;
    font-size: .97rem; font-weight: 600; cursor: pointer;
    transition: background .15s, transform .1s;
    margin-top: .75rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-knop:hover:not(:disabled)  { background: var(--b2); }
.init-knop:active:not(:disabled) { transform: translateY(1px); }
.init-knop:disabled               { opacity: .55; cursor: not-allowed; }

/* Terug-knop — donkere rand + tekst zodat het altijd zichtbaar is */
.init-knop-terug {
    background: #fff;
    color: var(--b2);
    border: 2px solid var(--b1);
    margin-left: .5rem;
    font-weight: 600;
}
.init-knop-terug:hover:not(:disabled) {
    background: var(--b1);
    color: #fff;
    border-color: var(--b1);
}

.init-knop-rij { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }

/* ══ Foutmelding ══════════════════════════════════════════ */
.init-fout {
    margin-top: .7rem; padding: .6rem .9rem;
    background: #fff0f0; border: 1px solid #f5a8a8;
    border-radius: 7px; color: #8b1a1a; font-size: .9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ══ Loading: kayak + golven ══════════════════════════════ */
.init-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 1.25rem;
    padding: .5rem 0;
}
.init-kayak-img {
    width: 140px;
    opacity: .85;
    animation: init-kayak-bob 1.8s ease-in-out infinite;
}
@keyframes init-kayak-bob {
    0%,100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-3px) rotate(.6deg); }
    70%      { transform: translateY(2px) rotate(-.4deg); }
}
.init-golven { width: 140px; overflow: hidden; }
.init-golf-svg { width: 100%; display: block; }
.init-golf-1 {
    stroke: var(--b1);
    stroke-dasharray: 200;
    animation: init-golf-flow 1.4s linear infinite;
}
.init-golf-2 {
    stroke: var(--b4);
    stroke-dasharray: 200;
    animation: init-golf-flow 1.4s linear infinite .25s;
}
@keyframes init-golf-flow {
    from { stroke-dashoffset: 200; }
    to   { stroke-dashoffset: 0; }
}

/* ══ Geboortedatum wrapper ════════════════════════════════ */
.init-datum-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
}
.init-datum-wrap input[type="text"] {
    border-radius: 7px 0 0 7px !important;
    flex: 1;
    min-width: 0;
}
.init-datum-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    background: var(--b1);
    border: 1.5px solid var(--b1);
    border-left: none;
    border-radius: 0 7px 7px 0;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s;
}
.init-datum-knop:hover { background: var(--b2); border-color: var(--b2); }
.init-datum-knop:active { background: var(--b3); }
.init-datum-picker-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    bottom: 0;
    right: 0;
    border: none;
    padding: 0;
}


.init-bevestiging { text-align: center; padding: 2.25rem 1rem; }
.init-vinkje { font-size: 4rem; line-height: 1; margin-bottom: .8rem; }
.init-bevestiging p {
    font-size: 1.1rem; font-weight: 700; color: var(--b3); margin-bottom: .4rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.init-sub {
    font-size: .9rem !important; font-weight: 400 !important; color: var(--tg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.init-knop-opnieuw {
    margin-top: 1.5rem;
    background: #fff;
    color: var(--b2);
    border: 2px solid var(--b1);
    font-weight: 600;
}
.init-knop-opnieuw:hover:not(:disabled) {
    background: var(--b1);
    color: #fff;
}
.init-geen-sessies {
    font-style: italic; color: var(--tg);
    background: var(--b5); border: 1px solid var(--b4);
    border-radius: 10px; padding: 1rem 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}