/* ===========================
   BOEKINGSPAGINA
=========================== */
.boek-hero {
    background-color: #0D1B3F;
    padding: 3rem 2rem 2rem;
    text-align: center;
}

.boek-hero h1 {
    color: #CCA847;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

.boek-hero p {
    color: #C7CBD6;
    font-size: 1rem;
}

.boek-wrapper {
    max-width: 750px;
    margin: 3rem auto 5rem;
    padding: 0 1.5rem;
}

/* ===========================
   STAPPEN INDICATOR
=========================== */
.stappen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.stap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stap-cirkel {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.stap.actief .stap-cirkel { background: #CCA847; color: #fff; }
.stap.klaar  .stap-cirkel { background: #0D1B3F; color: #fff; }

.stap-label {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stap.actief .stap-label { color: #CCA847; }
.stap.klaar  .stap-label { color: #0D1B3F; }

.stap-lijn {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 0.5rem;
    margin-bottom: 1.4rem;
    transition: background 0.3s;
}

.stap-lijn.klaar { background: #0D1B3F; }

/* ===========================
   FORMULIER KAART
=========================== */
.form-kaart {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
}

.form-sectie { display: none; }
.form-sectie.actief {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-sectie h2 {
    font-size: 1.3rem;
    color: #0D1B3F;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #f0f0f0;
}

/* ===========================
   VELDEN
=========================== */
.veld-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.veld-rij.enkel { grid-template-columns: 1fr; }

.veld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.veld label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vereist { color: #CCA847; margin-left: 2px; }

.veld input,
.veld select,
.veld textarea {
    padding: 0.7rem 1rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1f2937;
    background: #f9fafb;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
    border-color: #CCA847;
    box-shadow: 0 0 0 3px rgba(204, 168, 71, 0.15);
    background: #fff;
}

.veld textarea { resize: vertical; min-height: 100px; }

.fout { color: #dc2626; font-size: 0.8rem; display: none; }
.veld.heeft-fout input,
.veld.heeft-fout select { border-color: #dc2626; }
.veld.heeft-fout .fout  { display: block; }

/* ===========================
   PERSONEN TELLER
=========================== */
.aantal-teller {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.teller-info { font-size: 0.85rem; color: #6b7280; }

.teller-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid #CCA847;
    background: transparent;
    color: #CCA847;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.teller-btn:hover { background: #CCA847; color: #fff; }

.teller-waarde {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0D1B3F;
    min-width: 2rem;
    text-align: center;
}

/* ===========================
   DRANKEN SECTIE
=========================== */
.dranken-info {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.drank-categorie { margin-bottom: 2rem; }

.drank-cat-titel {
    font-size: 1rem;
    font-weight: 700;
    color: #0D1B3F;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.drank-cat-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.dranken-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.drank-kaart {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    background: #f9fafb;
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.drank-kaart:hover { border-color: #CCA847; transform: translateY(-2px); }
.drank-kaart.geselecteerd { border-color: #CCA847; background: #fffbf0; }

.drank-emoji { font-size: 1.8rem; }
.drank-naam  { font-size: 0.82rem; font-weight: 600; color: #374151; }
.drank-prijs { font-size: 0.78rem; color: #CCA847; font-weight: 700; }

.drank-geselecteerd-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    background: #CCA847;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    white-space: nowrap;
}

.drank-kaart.geselecteerd .drank-geselecteerd-badge { display: block; }

/* ===========================
   FRISDRANK / WIJN TELLERS
=========================== */
.frisdrank-grid {
    background: #f9fafb;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
}

.frisdrank-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid #e5e7eb;
}

.frisdrank-rij:last-child { border-bottom: none; }

.frisdrank-naam { font-size: 0.92rem; font-weight: 600; color: #374151; }

.frisdrank-teller { display: flex; align-items: center; gap: 0.8rem; }

.teller-btn-sm {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 2px solid #CCA847;
    background: transparent;
    color: #CCA847;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.teller-btn-sm:hover { background: #CCA847; color: #fff; }

.frisdrank-aantal {
    font-size: 1rem;
    font-weight: 700;
    color: #0D1B3F;
    min-width: 1.5rem;
    text-align: center;
}

/* ===========================
   DRANKEN TOTAAL
=========================== */
.dranken-totaal-blok {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0D1B3F;
    color: #fff;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.dranken-totaal-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.dranken-totaal-prijs {
    font-size: 1.3rem;
    font-weight: 700;
    color: #CCA847;
}

/* ===========================
   SAMENVATTING
=========================== */
.samenvatting {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.samenvatting h3 {
    font-size: 1rem;
    color: #0D1B3F;
    margin-bottom: 1rem;
    font-weight: 700;
}

.sam-rij {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.sam-rij:last-child { border-bottom: none; }

.sam-rij span:last-child {
    font-weight: 600;
    color: #0D1B3F;
    text-align: right;
    max-width: 60%;
}

/* ===========================
   AKKOORD CHECKBOX
=========================== */
.akkoord-veld { margin-bottom: 1.5rem; }

.akkoord-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.akkoord-label input {
    width: 1rem;
    height: 1rem;
    margin-top: 2px;
    accent-color: #CCA847;
    flex-shrink: 0;
}

.akkoord-label span { font-size: 0.9rem; color: #374151; line-height: 1.5; }
.akkoord-label a    { color: #CCA847; }

/* ===========================
   NAVIGATIE KNOPPEN
=========================== */
.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.btn-terug {
    padding: 0.7rem 2rem;
    border: 2px solid #0D1B3F;
    background: transparent;
    color: #0D1B3F;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
}

.btn-terug:hover { background: #0D1B3F; color: #fff; }

.btn-verder {
    padding: 0.7rem 2.5rem;
    background: #CCA847;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-left: auto;
}

.btn-verder:hover { background: #ac8e3c; transform: translateY(-1px); }

/* ===========================
   BEVESTIGING
=========================== */
.bevestiging { display: none; text-align: center; padding: 3rem 2rem; }
.bevestiging.zichtbaar { display: block; }

.bevestiging-vink {
    width: 5rem;
    height: 5rem;
    background: #0D1B3F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    font-weight: 700;
}

.bevestiging h2 { font-size: 1.6rem; color: #0D1B3F; margin-bottom: 0.8rem; }
.bevestiging p  { color: #6b7280; line-height: 1.6; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 600px) {
    .veld-rij      { grid-template-columns: 1fr; }
    .dranken-grid  { grid-template-columns: repeat(2, 1fr); }
    .form-kaart    { padding: 1.5rem; }
}