/* Destan Booking widget v2 — premium boekingsflow in huisstijl (#fbd700 / #1c1c1c) */
.destan-booking {
    --db-geel: #fbd700;
    --db-geel-donker: #edb81e;
    --db-geel-zacht: #fff8d6;
    --db-zwart: #1c1c1c;
    --db-grijs: #6b6b6b;
    --db-grijs-licht: #9a9a9a;
    --db-licht: #f6f6f4;
    --db-rand: #e6e4de;
    --db-groen: #1e9e5a;
    --db-rood: #c93b30;
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: var(--db-zwart);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 40px rgba(28, 28, 28, .12), 0 2px 8px rgba(28, 28, 28, .06);
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
}
.destan-booking *, .destan-booking *::before, .destan-booking *::after { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────── */
.db-header {
    background: var(--db-zwart);
    padding: 1.15rem 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.db-brand { color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; white-space: nowrap; }
.db-brand span { color: var(--db-geel); }
.db-phone {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--db-geel);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    border: 1.5px solid rgba(251, 215, 0, .45);
    border-radius: 999px;
    padding: .35rem .8rem;
    transition: background .15s;
}
.db-phone:hover { background: rgba(251, 215, 0, .12); }
.db-phone svg { width: 13px; height: 13px; }

/* ── Stepper ────────────────────────────────────────────── */
.db-stepper {
    display: flex;
    background: var(--db-zwart);
    padding: 0 1.5rem 1.15rem;
    gap: .4rem;
}
.db-stepper .db-seg { flex: 1; text-align: center; }
.db-stepper .db-seg i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18);
    margin-bottom: .4rem;
    transition: background .3s;
}
.db-stepper .db-seg span {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    transition: color .3s;
}
.db-stepper .db-seg.done i, .db-stepper .db-seg.on i { background: var(--db-geel); }
.db-stepper .db-seg.on span { color: var(--db-geel); }
.db-stepper .db-seg.done span { color: rgba(255, 255, 255, .65); }

/* ── Samenvatting ───────────────────────────────────────── */
.db-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .85rem 1.5rem 0;
}
.db-summary:empty { display: none; }
.db-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--db-licht);
    border: 1px solid var(--db-rand);
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--db-zwart);
    animation: db-pop .25s ease;
}
.db-chip svg { width: 12px; height: 12px; color: var(--db-geel-donker); }

/* ── Body & stappen ─────────────────────────────────────── */
.db-body { padding: 1.35rem 1.5rem 1.6rem; }
.db-step { animation: db-slide .3s ease; }
@keyframes db-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes db-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes db-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.db-body h3 { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.db-sub { color: var(--db-grijs); font-size: .88rem; margin: 0 0 1.1rem; }

/* ── Diensttegels ───────────────────────────────────────── */
.db-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.db-tile {
    position: relative;
    border: 1.5px solid var(--db-rand);
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    animation: db-rise .35s ease backwards;
}
.db-tile:nth-child(2) { animation-delay: .04s; }
.db-tile:nth-child(3) { animation-delay: .08s; }
.db-tile:nth-child(4) { animation-delay: .12s; }
.db-tile:nth-child(5) { animation-delay: .16s; }
.db-tile:nth-child(6) { animation-delay: .2s; }
.db-tile:hover, .db-tile:focus-visible {
    border-color: var(--db-geel-donker);
    box-shadow: 0 6px 18px rgba(28, 28, 28, .08);
    transform: translateY(-1px);
    outline: none;
}
.db-tile.sel { border-color: var(--db-geel-donker); background: var(--db-geel-zacht); }
.db-tile-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--db-geel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--db-zwart);
}
.db-tile-ico svg { width: 24px; height: 24px; }
.db-tile-txt strong { display: block; font-size: .95rem; font-weight: 700; }
.db-tile-txt small { color: var(--db-grijs); font-size: .74rem; }

/* ── Formuliervelden ────────────────────────────────────── */
.db-field { margin-bottom: 1rem; position: relative; }
.db-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .35rem; }
.db-field input, .db-field select, .db-field textarea {
    width: 100%;
    padding: .8rem .95rem;
    border: 1.5px solid var(--db-rand);
    border-radius: 12px;
    font: inherit;
    background: #fff;
    color: var(--db-zwart);
    transition: border-color .15s, box-shadow .15s;
}
.db-field input:focus, .db-field select:focus, .db-field textarea:focus {
    outline: none;
    border-color: var(--db-geel-donker);
    box-shadow: 0 0 0 4px rgba(251, 215, 0, .22);
}
.db-field input::placeholder, .db-field textarea::placeholder { color: var(--db-grijs-licht); }
.db-hint { font-size: .76rem; color: var(--db-grijs); margin-top: .35rem; display: flex; align-items: center; gap: .35rem; }
.db-hint svg { width: 12px; height: 12px; flex: none; }
.db-hint.ok { color: var(--db-groen); font-weight: 600; }

/* GPS-knop in het veld */
.db-gps {
    position: absolute;
    right: .5rem;
    top: 1.95rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--db-zwart);
    color: var(--db-geel);
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    padding: .4rem .7rem;
    cursor: pointer;
    transition: opacity .15s;
}
.db-gps:hover { opacity: .85; }
.db-gps svg { width: 12px; height: 12px; }

/* Autocomplete */
.db-ac {
    position: absolute;
    z-index: 30;
    left: 0; right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1.5px solid var(--db-rand);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(28, 28, 28, .14);
    overflow: hidden;
    animation: db-pop .15s ease;
}
.db-ac button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-size: .88rem;
    padding: .65rem .9rem;
    cursor: pointer;
}
.db-ac button:hover { background: var(--db-geel-zacht); }
.db-ac button svg { width: 14px; height: 14px; color: var(--db-grijs); flex: none; }

/* ── Kentekenplaat ──────────────────────────────────────── */
.db-plate {
    display: flex;
    width: 240px;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #16161a;
    box-shadow: 0 3px 8px rgba(28, 28, 28, .18);
}
.db-plate-nl {
    background: #003da5;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    font-size: .62rem;
    font-weight: 800;
    gap: .15rem;
}
.db-plate-nl .db-stars { color: #ffd500; font-size: .5rem; letter-spacing: .05em; }
.db-plate input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: #f6c700;
    font: inherit;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    padding: .55rem .4rem;
    color: #16161a;
}
.db-plate input:focus { box-shadow: none; border: none; }
.db-plate input:focus { outline: none; }
.db-plate input::placeholder { color: rgba(22, 22, 26, .35); }

/* Voertuigkaart */
.db-vehicle {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--db-licht);
    border: 1.5px solid var(--db-rand);
    border-radius: 14px;
    padding: .9rem 1rem;
    margin-top: .9rem;
    animation: db-rise .3s ease;
}
.db-vehicle-ico {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--db-zwart);
    color: var(--db-geel);
    display: flex; align-items: center; justify-content: center;
}
.db-vehicle-ico svg { width: 22px; height: 22px; }
.db-vehicle strong { display: block; font-size: .95rem; }
.db-vehicle small { color: var(--db-grijs); font-size: .78rem; }
.db-rdw {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
    background: #e5f6ec;
    color: var(--db-groen);
    font-size: .7rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .25rem .6rem;
    white-space: nowrap;
}
.db-rdw svg { width: 11px; height: 11px; }

/* ── Wanneer-toggle ─────────────────────────────────────── */
.db-when { display: flex; gap: .6rem; }
.db-when .db-tile { flex: 1; animation: none; }

/* ── Prijsoverzicht ─────────────────────────────────────── */
.db-price {
    background: var(--db-licht);
    border: 1.5px solid var(--db-rand);
    border-radius: 16px;
    padding: 1.15rem 1.2rem;
    margin-bottom: 1rem;
}
.db-price-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    padding: .3rem 0;
    color: #3a3a3a;
    animation: db-rise .35s ease backwards;
}
.db-price-line span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-price-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--db-zwart);
    margin-top: .6rem;
    padding-top: .7rem;
    font-weight: 800;
}
.db-price-total .db-amount { font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.db-usps { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: .9rem 0 .3rem; }
.db-usp { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--db-grijs); }
.db-usp svg { width: 14px; height: 14px; color: var(--db-groen); }

.db-eta {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #e5f6ec;
    border: 1.5px solid #bfe8d0;
    color: #14733f;
    border-radius: 12px;
    padding: .7rem .9rem;
    font-size: .92rem;
    margin-bottom: .9rem;
    animation: db-rise .3s ease;
}
.db-eta svg { width: 16px; height: 16px; flex: none; }

.db-offer {
    background: var(--db-geel-zacht);
    border: 1.5px solid var(--db-geel);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    font-size: .92rem;
    animation: db-rise .3s ease;
}
.db-offer strong { display: block; margin-bottom: .25rem; }

/* ── Knoppen & navigatie ────────────────────────────────── */
.db-nav { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-top: 1.3rem; }
.db-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--db-geel);
    color: var(--db-zwart);
    border: none;
    border-radius: 999px;
    padding: .95rem 1.7rem;
    font: inherit;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow: 0 4px 14px rgba(237, 184, 30, .35);
}
.db-btn svg { width: 16px; height: 16px; }
.db-btn:hover { background: var(--db-geel-donker); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(237, 184, 30, .45); }
.db-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.db-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--db-rand);
    color: var(--db-grijs);
    font-weight: 600;
    box-shadow: none;
}
.db-btn--ghost:hover { background: var(--db-licht); transform: none; box-shadow: none; }
.db-btn--wide { width: 100%; }

/* ── Meldingen ──────────────────────────────────────────── */
.db-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fdecea;
    color: var(--db-rood);
    border-radius: 12px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    font-weight: 600;
    animation: db-shake .35s ease;
}
.db-error svg { width: 16px; height: 16px; flex: none; }
@keyframes db-shake {
    0%, 100% { transform: none; }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.db-loading { text-align: center; color: var(--db-grijs); padding: 2.2rem 0; }
.db-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--db-rand);
    border-top-color: var(--db-geel-donker);
    border-radius: 50%;
    margin: 0 auto .8rem;
    animation: db-spin .8s linear infinite;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

/* ── Succes ─────────────────────────────────────────────── */
.db-success { text-align: center; padding: 1.2rem 0 .4rem; animation: db-rise .35s ease; }
.db-check {
    width: 74px; height: 74px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--db-geel);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: db-pop .4s cubic-bezier(.2, 1.4, .5, 1);
}
.db-check svg { width: 34px; height: 34px; }
.db-check svg path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: db-draw .45s ease .25s forwards;
}
@keyframes db-draw { to { stroke-dashoffset: 0; } }
.db-success h3 { margin-bottom: .35rem; }
.db-success p { margin: 0 0 .4rem; color: var(--db-grijs); font-size: .92rem; }
.db-success .db-ref { color: var(--db-zwart); font-weight: 800; }
.db-success-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.db-btn--wa {
    background: #e7f8ee;
    color: #128c4b;
    box-shadow: none;
    border: 1.5px solid #bfe8d0;
}
.db-btn--wa:hover { background: #d8f3e3; box-shadow: none; }

/* ── Footer ─────────────────────────────────────────────── */
.db-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    padding: .85rem 1.5rem;
    background: var(--db-licht);
    border-top: 1px solid var(--db-rand);
    font-size: .76rem;
    color: var(--db-grijs);
}
.db-footer b { color: var(--db-zwart); }
.db-footer .db-dot { color: var(--db-geel-donker); }

@media (max-width: 480px) {
    .destan-booking { border-radius: 16px; font-size: 15.5px; }
    .db-tiles { grid-template-columns: 1fr; }
    .db-body { padding: 1.15rem 1.1rem 1.35rem; }
    .db-header, .db-stepper { padding-left: 1.1rem; padding-right: 1.1rem; }
    .db-stepper .db-seg span { display: none; }
    .db-nav { flex-direction: column-reverse; }
    .db-nav .db-btn { width: 100%; }
}

/* ── Vaste blip + popup (launcher) ─────────────────────────
   Staat buiten .destan-booking, dus bewust letterlijke
   huisstijlkleuren (#fbd700 / #1c1c1c) i.p.v. de CSS-variabelen. */
.destan-blip-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.destan-blip-label {
    background: #fff;
    color: #1c1c1c;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    padding: .6rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(28, 28, 28, .18);
    white-space: nowrap;
    transition: opacity .18s ease, transform .18s ease;
}
.destan-blip-label.is-verborgen { opacity: 0; transform: translateX(6px); pointer-events: none; }
.destan-blip {
    position: relative;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: #fbd700;
    color: #1c1c1c;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(28, 28, 28, .32);
    transition: transform .18s ease, box-shadow .18s ease;
}
.destan-blip:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(28, 28, 28, .36); }
.destan-blip:active { transform: scale(.94); }
.destan-blip:focus-visible { outline: 3px solid #1c1c1c; outline-offset: 2px; }
.destan-blip-ico {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .18s ease, transform .18s ease;
}
.destan-blip-ico svg { width: 30px; height: 30px; }
.destan-blip-ico--dicht { opacity: 0; transform: rotate(-45deg) scale(.6); }
.destan-blip.is-open .destan-blip-ico--open { opacity: 0; transform: rotate(45deg) scale(.6); }
.destan-blip.is-open .destan-blip-ico--dicht { opacity: 1; transform: none; }
.destan-blip-puls {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: destan-puls 2.6s ease-out infinite;
}
.destan-blip.is-open .destan-blip-puls { animation: none; }
@keyframes destan-puls {
    0% { box-shadow: 0 0 0 0 rgba(251, 215, 0, .55); }
    70% { box-shadow: 0 0 0 18px rgba(251, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 215, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .destan-blip-puls { animation: none; }
}

.destan-popup {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 99998;
    width: min(420px, calc(100vw - 40px));
    max-height: min(680px, calc(100dvh - 130px));
    display: flex;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(28, 28, 28, .35);
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.destan-popup.is-open { opacity: 1; transform: none; pointer-events: auto; }
.destan-popup .destan-booking {
    max-width: none;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .destan-popup {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: calc(100dvh - 90px);
        border-radius: 22px 22px 0 0;
    }
    .destan-popup .destan-booking { border-radius: 22px 22px 0 0; }
    .destan-blip-label { display: none; }
    html.destan-popup-open { overflow: hidden; }
}