/**
 * Leunt op de merkkleuren uit rw-theme (views/assets/style/abstracts/_variables.scss):
 * $color-2: #24272b (tekst), $color-3: #b26e2d (accent/primary), $color-6: #7ab22d (succes/CTA-groen).
 * Gedefinieerd als custom properties zodat kleuren op één plek staan, zonder het thema zelf aan te raken.
 */
.rwld-widget,
.rwld-checkout-block,
.rwld-order-summary {
    --rwld-text: #24272b;
    --rwld-accent: #b26e2d;
    --rwld-accent-dark: #96591f;
    --rwld-success: #7ab22d;
    --rwld-error: #d94b3f;
    --rwld-bg: #f9f6f1;
    --rwld-border: #e7e0d3;
}

.rwld-widget {
    margin: 1.5em 0;
    padding: 20px 22px;
    background: var(--rwld-bg);
    border: 1px solid var(--rwld-border);
    border-radius: 16px;
    color: var(--rwld-text);
}

.rwld-widget__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rwld-widget__icon {
    display: inline-flex;
    color: var(--rwld-accent);
}

.rwld-widget__title,
.rwld-checkout-block h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rwld-text);
}

.rwld-widget__teaser {
    margin: 4px 0 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--rwld-text);
    opacity: 0.85;
}

.rwld-widget__field {
    margin-bottom: 14px;
}

.rwld-widget__field:last-of-type {
    margin-bottom: 0;
}

.rwld-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pill-toggle voor land — vervangt kale radiobuttons */
.rwld-pill-toggle {
    display: inline-flex;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--rwld-border);
    border-radius: 999px;
}

.rwld-date-choice {
    margin-top: 12px;
}

.rwld-pill-toggle__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.rwld-pill-toggle__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rwld-pill-toggle__option span {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--rwld-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rwld-pill-toggle__option input:checked + span {
    background: var(--rwld-accent);
    color: #fff;
}

.rwld-pill-toggle__option input:focus-visible + span {
    outline: 2px solid var(--rwld-accent);
    outline-offset: 2px;
}

/* Postcode-rij: input + knop op één lijn, gelijke hoogte */
.rwld-widget__postcode-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Postcode is maar 4 cijfers + 2 letters — het veld hoeft niet breder te
   zijn dan dat. */
.rwld-postcode-input {
    flex: 0 0 100px;
    width: 100px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--rwld-border);
    border-radius: 10px;
    background: #fff;
    font-size: 0.95rem;
    color: var(--rwld-text);
}

.rwld-postcode-input:focus {
    outline: none;
    border-color: var(--rwld-accent);
}

.rwld-check-button.button {
    height: 46px;
    padding: 0 20px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.rwld-check-button.button:disabled {
    opacity: 0.7;
    cursor: default;
}

.rwld-widget__result {
    margin-top: 16px;
}

.rwld-widget__error {
    margin: 0;
    padding: 10px 14px;
    background: #fdf1ef;
    border: 1px solid var(--rwld-error);
    border-radius: 10px;
    color: var(--rwld-error);
    font-size: 0.9rem;
}

.rwld-widget__contact {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--rwld-border);
    border-radius: 10px;
    font-size: 0.92rem;
}

.rwld-widget__contact p:last-of-type {
    margin-bottom: 0;
}

/* Bel / Mail / Chat — Rwld_Contact_Actions::render_html() */
.rwld-contact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rwld-contact-action {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--rwld-border);
    border-radius: 10px;
    background: #fff;
    color: var(--rwld-text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.rwld-contact-action svg {
    flex-shrink: 0;
    color: var(--rwld-accent);
}

.rwld-contact-action:hover {
    border-color: var(--rwld-accent);
    background: var(--rwld-bg);
}

.rwld-widget__loading {
    margin: 0;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--rwld-border);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--rwld-text);
    opacity: 0.7;
}

/* Uitgelichte badge met de eerstvolgende leverdatum */
.rwld-widget__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--rwld-accent);
    border-radius: 12px;
}

.rwld-widget__badge-icon {
    flex-shrink: 0;
    color: var(--rwld-accent);
}

.rwld-widget__badge-text {
    flex: 1;
    min-width: 0;
}

.rwld-widget__badge-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rwld-text);
    opacity: 0.65;
}

.rwld-widget__badge-date {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rwld-text);
}

/*
 * Flatpickr's zichtbare "alt input" is bewust readonly (typen zou de
 * validatie kunnen omzeilen), maar mag er niet als een uitgegrijsd/
 * geblokkeerd veld uitzien — vandaar de expliciete overrides incl.
 * !important tegen thema-stijlen voor readonly/disabled inputs, plus een
 * duidelijk klikbare/hover-state en een chevron als visuele hint dat de
 * datum nog te wijzigen is.
 *
 * Let op: dit mikt specifiek op ".rwld-date-input-visible" (de alt-input
 * die flatpickr toevoegt), NIET op ".rwld-date-input" zelf — dat laatste
 * blijft na init het oorspronkelijke, verborgen (type=hidden) veld. Een
 * class-selector met "display" wint van de browser se ingebouwde
 * "input[type=hidden]{display:none}"-regel, dus als deze stijl ook op
 * ".rwld-date-input" zou matchen, wordt dat verborgen veld weer zichtbaar
 * als een lege, onzichtbare box — precies wat het "pijltje-op-een-eigen-
 * regel"-bugje veroorzaakte.
 */
/*
 * Het oorspronkelijke <input> (waar flatpickr op init) wordt door
 * flatpickr zelf op type="hidden" gezet. Dat hoort door de browser
 * genegeerd te worden, maar forceer het hier expliciet met !important —
 * elke class-selector met een eigen "display" (ook per ongeluk, via een
 * bredere thema-regel) kan die ingebouwde "input[type=hidden]{display:
 * none}" anders overschrijven en het lege veld weer laten meetellen in de
 * layout. Dit was vermoedelijk de daadwerkelijke oorzaak van het
 * "pijltje op een eigen regel"-bugje, niet (alleen) de class-naam-mixup
 * die eerder al gefixt is.
 */
.rwld-widget__badge .rwld-date-input {
    display: none !important;
}

.rwld-widget__badge .rwld-date-input-visible,
.rwld-widget__badge .rwld-date-input-visible:read-only,
.rwld-widget__badge .rwld-date-input-visible[readonly] {
    display: inline-block;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rwld-text) !important;
    -webkit-text-fill-color: var(--rwld-text);
    opacity: 1 !important;
    cursor: pointer;
    width: auto;
    max-width: 100%;
    caret-color: transparent;
    user-select: none;
}

/* Het is een readonly "knop" die een kalender opent, geen echt tekstveld
   — de standaard blauwe browser-focusring en tekstselectie horen daar niet
   bij. */
.rwld-widget__badge .rwld-date-input-visible:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*
 * Klikbare/pijltje-styling is bewust opt-in via de "--clickable"-modifier
 * (toegevoegd door product.js/checkout.js op hun flatpickr-badge) — de
 * statische, niet-interactieve badge op de winkelwagenpagina (er valt
 * daar niets te wijzigen) mag geen misleidende cursor/chevron krijgen.
 *
 * De pijl staat hier bewust ABSOLUUT gepositioneerd t.o.v. de hele badge
 * (niet meer inline ná de teksten) — zo kan-ie nooit meer naar een eigen
 * regel wrappen, ongeacht de breedte/het gedrag van het datumveld erboven.
 */
.rwld-widget__badge--clickable {
    position: relative;
    padding-right: 34px;
    cursor: pointer;
}

.rwld-widget__badge--clickable::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.6px solid var(--rwld-accent);
    border-bottom: 1.6px solid var(--rwld-accent);
    transform: rotate(45deg);
    pointer-events: none;
}

.rwld-widget__badge--clickable:hover {
    border-color: var(--rwld-accent-dark);
}

.rwld-widget__note {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--rwld-text);
    opacity: 0.65;
    font-style: italic;
}

.rwld-widget__contact-prompt {
    margin: 14px 0 8px;
    font-size: 0.85rem;
    color: var(--rwld-text);
    opacity: 0.8;
}

/* Checkout-blok deelt dezelfde look, iets compacter */
.rwld-checkout-block {
    margin: 1.5em 0;
    padding: 18px 20px;
    background: var(--rwld-bg);
    border: 1px solid var(--rwld-border);
    border-radius: 16px;
    color: var(--rwld-text);
}

.rwld-checkout-block .description {
    margin: 4px 0 14px;
    font-size: 0.88rem;
    opacity: 0.75;
}

/* Statische samenvatting op bedankpagina / "Mijn account" -> bestelling */
.rwld-order-summary {
    margin: 1.5em 0;
    padding: 16px 20px;
    background: #f9f6f1;
    border: 1px solid #e7e0d3;
    border-radius: 12px;
}

.rwld-order-summary h2 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.rwld-order-summary p {
    margin: 0;
}