/*
 * Give the predictions wrapper a proper containing block.
 * The SDK renders .endereco-predictions-wrapper as position:absolute; height:0
 * so it floats over the form without pushing content down. It must be anchored
 * to the nearest .control div (wraps the input), otherwise it escapes to a
 * distant positioned ancestor and lands in the wrong place.
 */
.checkout-index-index .control,
.form-address-edit .control {
    position: relative;
}

/* Defensive z-index: the wrapper already has z-index:99001 but the inner list
   needs an explicit value so it wins any future sibling stacking conflicts. */
.endereco-predictions {
    z-index: 1;
}

/*
 * Keep the "Use selected" / "Auswahl übernehmen" button always visible when
 * multiple address suggestions are shown. Without this the SDK's default
 * overflow-y:auto on the whole modal lets the suggestions list push the
 * footer button out of the viewport.
 *
 * Fix: turn the modal into a flex column so the body section (suggestions)
 * scrolls internally while the header and footer stay anchored.
 */
.endereco-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* body child handles its own scroll */
    /* Mobile: .endereco-popup-container has padding-top:80px + padding-bottom:120px,
       so the usable centering area is 100vh - 200px. Stay within that. */
    max-height: calc(100vh - 200px);
}

@media screen and (min-width: 768px) {
    .endereco-modal {
        /* Desktop: no container padding — keep 60px breathing room (30px each side). */
        max-height: calc(100vh - 60px);
    }
}

.endereco-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;             /* required for flex overflow to work in all browsers */
}

/*
 * The vendor SDK's own endereco-s--phone_* border/background rules
 * (targeting a bare "input" descendant selector) lose the specificity
 * fight against Luma's checkout field styles (.control input.input-text
 * and similar), so the phone field never visibly changes color. Restate
 * them here with matching specificity plus !important so the validation
 * state is never silently swallowed by theme CSS.
 *
 * Also: the SDK's own stylesheet groups phone_invalid into the same amber
 * "needs correction" bucket as phone_needs_correction/phone_wrong_type. An
 * invalid phone number should read as a hard error (red), not a soft
 * warning, so it gets its own color here rather than the vendor's amber.
 */
.control.endereco-s--phone_correct input,
.control.endereco-s--phone_correct .input-text {
    border-color: #4caf50 !important;
    background-color: #f8fcf8 !important;
}

.control.endereco-s--phone_invalid input,
.control.endereco-s--phone_invalid .input-text {
    border-color: #d9534b !important;
    background-color: #fdf5f5 !important;
}

.control.endereco-s--phone_needs_correction input,
.control.endereco-s--phone_needs_correction .input-text,
.control.endereco-s--phone_wrong_type input,
.control.endereco-s--phone_wrong_type .input-text {
    border-color: #f0ad4e !important;
    background-color: #fefbf8 !important;
}

/*
 * Same specificity gap as phone above, for the AMS address fields
 * (postcode/city/street/country/region) — confirmed live 2026-08-18 (issue
 * #57): after attachAmsStatusMarker (endereco-setup.js) applies the SDK's
 * endereco-s--field_correct class (or the field-specific
 * endereco-s--<field>_correct variant), <select> elements (country, region)
 * visibly turn green because Luma has no competing native select border
 * color, but <input> elements (postcode, city, street) stay grey — Luma's
 * ".control input.input-text" theme rule outguns the vendor's bare "input"
 * descendant selector, exactly like it did for phone before the override
 * above was added. Restate with matching specificity plus !important so
 * text-field validation state isn't silently swallowed for anything other
 * than phone.
 */
.control.endereco-s--field_correct input,
.control.endereco-s--field_correct .input-text,
.control.endereco-s--postal_code_correct input,
.control.endereco-s--postal_code_correct .input-text,
.control.endereco-s--locality_correct input,
.control.endereco-s--locality_correct .input-text,
.control.endereco-s--street_name_correct input,
.control.endereco-s--street_name_correct .input-text,
.control.endereco-s--street_full_correct input,
.control.endereco-s--street_full_correct .input-text,
.control.endereco-s--building_number_correct input,
.control.endereco-s--building_number_correct .input-text,
.control.endereco-s--country_code_correct input,
.control.endereco-s--country_code_correct .input-text,
.control.endereco-s--subdivision_code_correct input,
.control.endereco-s--subdivision_code_correct .input-text {
    border-color: #4caf50 !important;
    background-color: #f8fcf8 !important;
}

.control.endereco-s--field_not_correct input,
.control.endereco-s--field_not_correct .input-text,
.control.endereco-s--postal_code_needs_correction input,
.control.endereco-s--postal_code_needs_correction .input-text,
.control.endereco-s--locality_needs_correction input,
.control.endereco-s--locality_needs_correction .input-text,
.control.endereco-s--street_name_needs_correction input,
.control.endereco-s--street_name_needs_correction .input-text,
.control.endereco-s--street_full_needs_correction input,
.control.endereco-s--street_full_needs_correction .input-text,
.control.endereco-s--building_number_needs_correction input,
.control.endereco-s--building_number_needs_correction .input-text,
.control.endereco-s--country_code_needs_correction input,
.control.endereco-s--country_code_needs_correction .input-text,
.control.endereco-s--subdivision_code_needs_correction input,
.control.endereco-s--subdivision_code_needs_correction .input-text {
    border-color: #f0ad4e !important;
    background-color: #fefbf8 !important;
}