/* =========================================================
   Order popup.

   Two steps: location, then pickup or delivery. Only dvz-
   prefixed selectors, no !important, tokens from style.css.
   ========================================================= */

.dvz-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dvz-modal[hidden] { display: none; }

.dvz-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 22, 48, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.dvz-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 34px 32px 32px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(6, 22, 48, 0.28);
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.dvz-modal.is-open .dvz-modal__backdrop { opacity: 1; }

.dvz-modal.is-open .dvz-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dvz-modal__dialog:focus-visible,
.dvz-modal :focus-visible {
    outline: 2px solid var(--dvz-azuur);
    outline-offset: 2px;
}

.dvz-modal__x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dvz-tekst);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dvz-modal__x:hover { background: var(--dvz-ijs); color: var(--dvz-marine); }

.dvz-modal__step[hidden] { display: none; }

.dvz-modal__title {
    margin: 0 0 10px;
    font-family: Lora, Georgia, serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--dvz-marine);
}

.dvz-modal__title--tight { margin-top: 22px; margin-bottom: 18px; }

.dvz-modal__lead {
    margin: 0 0 22px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dvz-tekst);
}

/* ----------------------------------------------- step 1 form */
.dvz-modal__form {
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 14px;
}

.dvz-field { display: flex; flex-direction: column; gap: 6px; }

.dvz-field__label {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

/* Twee selectors, met opzet: het thema stijlt input[type="text"] met een
   attribuutselector en een donkere rand, en die wint van een enkele klasse,
   hoe laat dit bestand ook laadt. Dezelfde reden als bij het zoekveld. */
.dvz-field .dvz-field__input,
.dvz-field input.dvz-field__input {
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 999px;
    background: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    color: var(--dvz-marine);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dvz-field__input::placeholder { color: #9fb0c4; }

.dvz-field .dvz-field__input:focus,
.dvz-field input.dvz-field__input:focus {
    border-color: var(--dvz-azuur);
    box-shadow: 0 0 0 3px rgba(74, 155, 245, 0.16);
    outline: none;
}

/* Na een muisklik krijgt "Terug" via het script de focus, zodat een
   toetsenbordgebruiker verder kan. Een muisgebruiker hoort daar geen ring
   van te zien; alleen :focus-visible tekent er een. */
.dvz-back:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.dvz-modal__submit {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 15px 24px;
    border: 1px solid var(--dvz-diepblauw);
    border-radius: 999px;
    background: var(--dvz-diepblauw);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease;
}

.dvz-modal__submit:hover:not(:disabled) {
    background: var(--dvz-marine);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 36, 85, 0.2);
}

/* Uit betekent hier "we hebben je adres nog niet gevonden", niet "er wordt
   geladen". Daarom vlak grijs en geen wachtcursor. */
.dvz-modal__submit:disabled {
    border-color: #cdd7e4;
    background: #cdd7e4;
    color: #6b7a8f;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Het gevonden adres, bevestigd onder de velden voordat er iets geklikt wordt. */
.dvz-modal__resolved {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--dvz-ijs, #eff5fc);
    color: var(--dvz-marine, #0b2455);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.dvz-modal__resolved::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--dvz-azuur, #4a9bf5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.dvz-modal__resolved[hidden] { display: none; }

.dvz-modal__error {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdf0ec;
    color: #9a3f1e;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.dvz-modal__error[hidden] { display: none; }

/* ---------------------------------------------- step 2 header */
.dvz-modal__crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dvz-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dvz-tekst);
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.dvz-back:hover { color: var(--dvz-diepblauw); }

.dvz-back__arrow {
    width: 14px;
    height: 9px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M20 6H3.8L8 1.6 6.6 0 0 6l6.6 6L8 10.4 3.8 6z' fill='%23000'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M20 6H3.8L8 1.6 6.6 0 0 6l6.6 6L8 10.4 3.8 6z' fill='%23000'/></svg>") no-repeat center / contain;
    transition: transform 0.2s ease;
}

.dvz-back:hover .dvz-back__arrow { transform: translateX(-3px); }

/* Er was hier een pil met de plaatsnaam uit het ingevulde adres. Dat was
   overgenomen van de referentie, die twintig vestigingen heeft en je eerst een
   stad laat kiezen. Wij hebben er een, dus de pil zei alleen de woonplaats van
   de klant terug terwijl het adres er direct onder al stond. Vervangen door een
   bevestiging van het gevonden adres. */
.dvz-modal__confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--dvz-ijs);
}

.dvz-modal__confirm::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--dvz-azuur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.dvz-modal__address {
    margin: 12px 0 0;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--dvz-tekst);
}

/* ------------------------------------------------ step 2 choices */
.dvz-choices { display: flex; flex-direction: column; gap: 12px; }

.dvz-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    /* Dezelfde verhoudingen als .dvz-btn elders. Dit is wel een groter
       raakvlak, want het is de hoofdkeuze, maar niet log. */
    padding: 16px 24px;
    border-radius: 999px;
    border: 1px solid var(--dvz-lijn);
    background: #fff;
    color: var(--dvz-marine);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, transform 0.22s ease,
                box-shadow 0.22s ease;
}

.dvz-choice__main {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.dvz-choice__sub {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.35;
    opacity: 0.78;
}

.dvz-choice__sub:empty { display: none; }

/* The recommended option carries the weight. */
.dvz-choice--primary {
    padding: 18px 24px;
    border-color: var(--dvz-diepblauw);
    background: var(--dvz-diepblauw);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 55, 122, 0.22);
}

.dvz-choice--primary .dvz-choice__main { font-size: 16.5px; }

.dvz-choice--primary:hover {
    background: var(--dvz-marine);
    border-color: var(--dvz-marine);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 55, 122, 0.28);
}

.dvz-choice--ghost:hover:not([disabled]) {
    border-color: var(--dvz-azuur);
    color: var(--dvz-diepblauw);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(11, 36, 85, 0.08);
}

/* Out of range: shown, explained, not hidden. */
.dvz-choice[disabled] {
    cursor: not-allowed;
    border-style: dashed;
    border-color: #dfe6ee;
    background: #f7f9fc;
    color: #8fa0b4;
    box-shadow: none;
    transform: none;
}

.dvz-choice[disabled] .dvz-choice__sub { opacity: 1; color: #9a3f1e; }

@media (max-width: 480px) {
    .dvz-modal { padding: 14px; }
    .dvz-modal__dialog { padding: 28px 20px 24px; border-radius: 18px; }
    .dvz-modal__form { grid-template-columns: 1fr; }
    .dvz-modal__title { font-size: 24px; }
    .dvz-choice { padding: 15px 20px; }
    .dvz-choice--primary { padding: 17px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .dvz-modal__backdrop,
    .dvz-modal__dialog,
    .dvz-choice,
    .dvz-modal__submit,
    .dvz-back__arrow { transition: none; }

    .dvz-modal__dialog { transform: none; }
    .dvz-choice:hover { transform: none; }
}

/* =====================================================================
   De balk bovenaan de site met de gekozen manier van bestellen.

   Overgenomen van het bestelplatform van de referentie, dat afhalen of
   bezorgen plus het adres permanent in beeld houdt met een knop om te
   wijzigen. Hij staat boven de header en schuift mee met de pagina, zodat
   hij nooit ruimte steelt van het menu op een telefoon.
   ===================================================================== */
.dvz-modebar {
    background: var(--dvz-marine, #0b2455);
    color: #fff;
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.dvz-modebar[hidden] { display: none; }

.dvz-modebar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 20px;
}

.dvz-modebar__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background: currentColor center / contain no-repeat;
    /* Een winkelpui voor afhalen. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En een scooter zodra er bezorgd wordt. */
.dvz-modebar[data-mode="delivery"] .dvz-modebar__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M18 15V9a3 3 0 0 0-3-3h-2'/%3E%3Cpath d='M4 6h4l2 9'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M18 15V9a3 3 0 0 0-3-3h-2'/%3E%3Cpath d='M4 6h4l2 9'/%3E%3C/svg%3E");
}

.dvz-modebar__text {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dvz-modebar__change {
    flex: 0 0 auto;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dvz-modebar__change:hover,
.dvz-modebar__change:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

/* Op een telefoon is een adres langer dan de balk breed is. Afkappen met
   puntjes verbergt dan juist het deel dat de klant wil controleren, de
   straat en het huisnummer. Dus twee regels, en de knop blijft rechts. */
@media (max-width: 600px) {
    .dvz-modebar__inner { padding: 8px 14px; gap: 10px; }
    .dvz-modebar__text {
        font-size: 13px;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .dvz-modebar__change { padding: 4px 12px; font-size: 13px; }
}

/* --------------------------------------------- rechtstreeks afhalen
   Een tweede route op stap 1. Afhalen heeft geen adres nodig, dus daar
   hoort geen postcodeveld voor te staan. De referentie zet op deze plek
   "of kies je locatie" met twintig vestigingen; wij hebben er een en
   noemen die gewoon bij naam. */
.dvz-modal__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 16px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dvz-tekst);
}

.dvz-modal__or::before,
.dvz-modal__or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--dvz-lijn);
}

.dvz-pickupcard {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--dvz-lijn);
    border-radius: 14px;
    background: #fff;
    color: var(--dvz-marine);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}

.dvz-pickupcard:hover,
.dvz-pickupcard:focus-visible {
    background: var(--dvz-ijs);
    border-color: var(--dvz-azuur);
    color: var(--dvz-marine);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(11, 36, 85, 0.08);
}

.dvz-pickupcard__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: var(--dvz-diepblauw);
    /* Een winkelpui, dezelfde als in de balk bovenaan de site. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dvz-pickupcard__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.dvz-pickupcard__main {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.dvz-pickupcard__sub {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--dvz-tekst);
}

.dvz-pickupcard__arrow {
    flex: 0 0 auto;
    width: 15px;
    height: 9px;
    background: var(--dvz-diepblauw);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 6h16.2L12 1.6 13.4 0 20 6l-6.6 6L12 10.4 16.2 6z' fill='%23000'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M0 6h16.2L12 1.6 13.4 0 20 6l-6.6 6L12 10.4 16.2 6z' fill='%23000'/></svg>") no-repeat center / contain;
    transition: transform 0.2s ease;
}

.dvz-pickupcard:hover .dvz-pickupcard__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .dvz-modebar__change { transition: none; }
    .dvz-pickupcard,
    .dvz-pickupcard__arrow { transition: none; }
    .dvz-pickupcard:hover { transform: none; }
}