/* ── Cookie Doos brand tokens ──────────────────────────
   dark:   #5C3317  (chocolade)
   mid:    #8B5A2B  (caramel)
   light:  #C9956A  (biscuit)
   cream:  #FDF8F3  (achtergrond)
   cream2: #F5EBE0  (licht bruin)
────────────────────────────────────────────────────── */

/* ── Knoppen ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.25rem;
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #C9956A 0%, #8B5A2B 60%, #5C3317 100%);
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(92,51,23,.3);
}
.btn-primary:hover  { opacity: .92; box-shadow: 0 6px 20px rgba(92,51,23,.4); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.25rem;
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: #8B5A2B;
    background: transparent;
    border: 1.5px solid #E8D5C0;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: #FDF8F3; border-color: #C9956A; }

.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.25rem;
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #5C3317 0%, #8B5A2B 100%);
    border: none;
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(92,51,23,.3);
}
.btn-success:hover    { opacity: .92; }
.btn-success:disabled { opacity: .45; cursor: not-allowed; }

/* ── Input velden & floating labels ── */
.field-wrap { position: relative; }

.input-field {
    width: 100%;
    border: 1.5px solid #E8D5C0;
    border-radius: .6rem;
    padding: 1.35rem .85rem .4rem;
    font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    background: #fff;
    color: #3a2010;
    line-height: 1.4;
}
.input-field::placeholder { color: transparent; }
.input-field:focus {
    border-color: #C9956A;
    box-shadow: 0 0 0 3px rgba(201,149,106,.18);
}
select.input-field { cursor: pointer; }
textarea.input-field { resize: vertical; }

/* Label zweeft standaard klein bovenaan */
.field-wrap label {
    position: absolute;
    left: .875rem;
    top: .38rem;
    font-size: .68rem;
    font-weight: 600;
    color: #C9956A;
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: none;
    transition: all .15s ease;
    line-height: 1;
}

/* Leeg & niet gefocused: label als placeholder */
.field-wrap input:placeholder-shown:not(:focus) + label,
.field-wrap textarea:placeholder-shown:not(:focus) + label {
    top: .82rem;
    font-size: .875rem;
    color: #d4b89a;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Gefocused: label zweeft omhoog */
.field-wrap input:focus + label,
.field-wrap textarea:focus + label {
    top: .38rem;
    font-size: .68rem;
    color: #8B5A2B;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Select & date: label altijd klein bovenaan */
.field-wrap .label-fixed {
    top: .38rem;
    font-size: .68rem;
    font-weight: 600;
    color: #C9956A;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Wizard panels ── */
.wizard-panel { display: none; }
.wizard-panel.active {
    display: block;
    animation: fadeIn .22s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Wizard step indicators ── */
.wizard-steps {
    display: flex;
    align-items: center;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #E8D5C0;
    background: #fff;
    color: #C9956A;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

.step-label {
    font-size: 10px;
    font-weight: 600;
    color: #C9956A;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.wizard-step.active .step-dot {
    background: linear-gradient(135deg, #C9956A, #8B5A2B);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(139,90,43,.4);
}
.wizard-step.active .step-label { color: #8B5A2B; font-weight: 700; }
.wizard-step.done .step-dot     { background: #16a34a; border-color: #16a34a; color: #fff; }
.wizard-step.done .step-label   { color: #16a34a; }

.step-connector {
    flex: 1;
    height: 2px;
    background: #E8D5C0;
    margin: 0 6px;
    margin-bottom: 15px;
    border-radius: 2px;
    transition: background .2s;
}
.step-connector.done { background: #16a34a; }

@media (max-width: 420px) {
    .step-label { display: none; }
    .step-dot   { width: 28px; height: 28px; font-size: 11px; }
    .step-connector { margin-bottom: 0; }
}

/* iOS zoom-preventie: inputs < 16px triggeren automatisch inzoomen */
@media (max-width: 768px) {
    .input-field { font-size: 16px; }
}

/* ── Flatpickr: stijlen staan in <style> in index.html ── */

/* ── Klant knoppen ── */
.customer-btn {
    border: 1.5px solid #E8D5C0;
    background: #fff;
    color: #3a2010;
    cursor: pointer;
    border-radius: .75rem;
}
.customer-btn:not(:disabled):hover {
    border-color: #C9956A;
    background: #FDF8F3;
    box-shadow: 0 4px 16px rgba(139,90,43,.12);
}
.customer-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: #faf6f2;
}

/* ── Logo grid ── */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 480px) {
    .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

.logo-option { position: relative; }

.logo-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.logo-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px 12px;
    border: 2px solid #E8D5C0;
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: #fdfaf7;
    min-height: 140px;
}

.logo-option label:hover {
    border-color: #C9956A;
    background: #FDF8F3;
}

.logo-option input:checked + label {
    border-color: #8B5A2B;
    background: #F5EBE0;
    box-shadow: 0 0 0 3px rgba(139,90,43,.12);
}

.logo-option img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 2px 8px rgba(92,51,23,.08);
}

.logo-name {
    font-size: 10px;
    font-weight: 700;
    color: #C9956A;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.logo-option input:checked + label .logo-name { color: #8B5A2B; }