/* Checkout Address Fields - Robuuste CSS Layout */

/* =====================================================
   VERBERG ORIGINELE ECWID VELDEN - ALLEEN IN SHIPPING SECTIE
   Alleen actief wanneer body.custom-checkout-fields-active is gezet (via JS).
   Factuuradres/billing velden blijven altijd zichtbaar.
   ===================================================== */

body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell-name,
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell--phone,
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell--company-name,
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell--street,
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell--city,
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__cell--postalcode,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell-name,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell--phone,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell--company-name,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell--street,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell--city,
body.custom-checkout-fields-active .ec-form--shipping .ec-form__cell--postalcode,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell-name,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell--phone,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell--company-name,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell--street,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell--city,
body.custom-checkout-fields-active [data-ec-widget-type="shipping_address"] .ec-form__cell--postalcode {
    display: none !important;
}

body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell-name),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell--phone),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell--company-name),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell--street),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell--city),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(.ec-form__cell--postalcode),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell-name),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell--phone),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell--company-name),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell--street),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell--city),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(.ec-form__cell--postalcode) {
    display: none !important;
}

body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="name"]),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="phone"]),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="organization"]),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="address-line1"]),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="city"]),
body.custom-checkout-fields-active .ec-cart-step--address .ec-form__row:has(input[name="zip"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="name"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="phone"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="organization"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="address-line1"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="city"]),
body.custom-checkout-fields-active .ec-form--shipping .ec-form__row:has(input[name="zip"]) {
    display: none !important;
}

/* Alle child elementen 100% breed */
[class*="ec-form__row--shipping_voornaam"] > *,
[class*="ec-form__row--shipping_achternaam"] > *,
[class*="ec-form__row--shipping_postcode"] > *,
[class*="ec-form__row--shipping_huisnummer"] > *,
[class*="ec-form__row--shipping_straat"] > *,
[class*="ec-form__row--shipping_plaats"] > *,
[class*="ec-form__row--shipping_telefoon"] > *,
[class*="ec-form__row--shipping_geboortedatum"] > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

[class*="ec-form__row--shipping_voornaam"] input,
[class*="ec-form__row--shipping_achternaam"] input,
[class*="ec-form__row--shipping_postcode"] input,
[class*="ec-form__row--shipping_huisnummer"] input,
[class*="ec-form__row--shipping_straat"] input,
[class*="ec-form__row--shipping_plaats"] input,
[class*="ec-form__row--shipping_telefoon"] input,
[class*="ec-form__row--shipping_geboortedatum"] input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Desktop layout - velden naast elkaar */
@media screen and (min-width: 600px) {
    /* Alle custom velden inline-block */
    [class*="ec-form__row--shipping_voornaam"],
    [class*="ec-form__row--shipping_achternaam"],
    [class*="ec-form__row--shipping_postcode"],
    [class*="ec-form__row--shipping_huisnummer"],
    [class*="ec-form__row--shipping_straat"],
    [class*="ec-form__row--shipping_plaats"] {
        display: inline-block !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
        float: none !important;
    }

    /* ROW 1: Voornaam 50% | Achternaam 50% */
    [class*="ec-form__row--shipping_voornaam"] {
        width: 48% !important;
        margin-right: 4% !important;
    }
    [class*="ec-form__row--shipping_achternaam"] {
        width: 48% !important;
        margin-right: 0 !important;
    }

    /* ROW 2: Postcode 25% | Huisnummer 50% | Toevoeging 25% */
    [class*="ec-form__row--shipping_postcode"] {
        width: 23% !important;
        margin-right: 2% !important;
    }
    [class*="ec-form__row--shipping_huisnummer"]:not([class*="_toevoeging"]) {
        width: 48% !important;
        margin-right: 2% !important;
    }
    [class*="ec-form__row--shipping_huisnummer_toevoeging"] {
        width: 23% !important;
        margin-right: 0 !important;
    }

    /* ROW 3: Straat 50% | Plaats 50% */
    [class*="ec-form__row--shipping_straat"] {
        width: 48% !important;
        margin-right: 4% !important;
    }
    [class*="ec-form__row--shipping_plaats"] {
        width: 48% !important;
        margin-right: 0 !important;
    }

    /* ROW 4: Telefoon 100% */
    [class*="ec-form__row--shipping_telefoon"] {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* ROW 5: Geboortedatum 100% (verborgen tenzij verzekering actief) */
    [class*="ec-form__row--shipping_geboortedatum"] {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Mobiel - alles onder elkaar */
@media screen and (max-width: 599px) {
    [class*="ec-form__row--shipping_voornaam"],
    [class*="ec-form__row--shipping_achternaam"],
    [class*="ec-form__row--shipping_postcode"],
    [class*="ec-form__row--shipping_huisnummer"],
    [class*="ec-form__row--shipping_straat"],
    [class*="ec-form__row--shipping_plaats"],
    [class*="ec-form__row--shipping_telefoon"],
    [class*="ec-form__row--shipping_geboortedatum"] {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* =====================================================
   PICKUP (Ophalen in winkel) VELDEN
   ===================================================== */

/* Alle child elementen 100% breed voor pickup */
[class*="ec-form__row--pickup_voornaam"] > *,
[class*="ec-form__row--pickup_achternaam"] > *,
[class*="ec-form__row--pickup_telefoon"] > *,
[class*="ec-form__row--pickup_geboortedatum"] > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

[class*="ec-form__row--pickup_voornaam"] input,
[class*="ec-form__row--pickup_achternaam"] input,
[class*="ec-form__row--pickup_telefoon"] input,
[class*="ec-form__row--pickup_geboortedatum"] input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Desktop layout voor pickup - voornaam en achternaam naast elkaar */
@media screen and (min-width: 600px) {
    [class*="ec-form__row--pickup_voornaam"],
    [class*="ec-form__row--pickup_achternaam"] {
        display: inline-block !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
        float: none !important;
    }

    /* Voornaam 50% | Achternaam 50% */
    [class*="ec-form__row--pickup_voornaam"] {
        width: 48% !important;
        margin-right: 4% !important;
    }
    [class*="ec-form__row--pickup_achternaam"] {
        width: 48% !important;
        margin-right: 0 !important;
    }

    /* Telefoon 100% */
    [class*="ec-form__row--pickup_telefoon"] {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Geboortedatum 100% */
    [class*="ec-form__row--pickup_geboortedatum"] {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Mobiel - alles onder elkaar voor pickup */
@media screen and (max-width: 599px) {
    [class*="ec-form__row--pickup_voornaam"],
    [class*="ec-form__row--pickup_achternaam"],
    [class*="ec-form__row--pickup_telefoon"],
    [class*="ec-form__row--pickup_geboortedatum"] {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* =====================================================
   ERROR STYLING - Gebruik Ecwid standaard validatie
   ===================================================== */

/* Custom error styling verwijderd - Ecwid handelt nu alle validatie errors af */