/**
 * Mavera Phone Formatter - Styles
 *
 * Custom styling for intl-tel-input (v29) integration in WooCommerce classic
 * checkout, Blocks checkout, account pages, Elementor and global forms.
 *
 * IMPORTANT: intl-tel-input v29 ships its own stylesheet (and a webp flag
 * sprite referenced via a relative path). We only add layout glue here — we do
 * NOT restyle the flag/sprite. Overriding the flag background (as the old v18
 * integration did with flags.png) breaks the sprite positions and renders a
 * black box, so it is intentionally absent.
 *
 * @package MaveraWooCommerceDonation
 * @since 2.9.0
 */

/* ── Container fills the field width ── */
.iti {
    width: 100% !important;
    display: block !important;
}

.iti input,
.iti .iti__tel-input,
.iti input[type="tel"],
.iti input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* ── Dropdown must sit above popups, sticky headers and block overlays ── */
.iti__dropdown-content {
    z-index: 99999 !important;
}

/* ── Validation states ── */
input.mavera-phone-valid {
    border-color: #4caf50 !important;
}

input.mavera-phone-invalid {
    border-color: #e74c3c !important;
}

.mavera-phone-error {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 0;
    font-weight: 500;
    animation: maveraPhoneErrorFade 0.3s ease;
}

@keyframes maveraPhoneErrorFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── WooCommerce classic checkout ── */
.woocommerce form .form-row .iti {
    width: 100% !important;
}

.woocommerce form .form-row .iti input[type="tel"] {
    height: auto;
    margin: 0;
}

/* ── WooCommerce Blocks checkout ──
 * The Blocks text input uses a floating <label> positioned at the field's left
 * edge. With the country flag sitting there too, the resting label overlaps the
 * flag. Shift the label clear of the flag while it is in its resting position
 * (Blocks adds .is-active once the label floats up to the top).
 */
.wc-block-components-text-input .iti {
    width: 100% !important;
}

.wc-block-components-text-input:not(.is-active) > label,
.wc-block-components-text-input:not(.is-active) .iti + label {
    left: 68px;
}

/* ── Elementor forms ── */
.elementor-field-group .iti {
    display: block !important;
}

.elementor-field-group .iti input[type="tel"],
.elementor-field-group .iti input.ui-e-field {
    width: 100% !important;
}

.elementor-field-type-tel.elementor-field-group > label {
    display: block;
    margin-bottom: 5px;
}

/* ── Admin area (order edit / user profile) ── */
.wp-admin .iti {
    width: 100% !important;
    max-width: 400px;
}

.wp-admin .iti input[type="tel"] {
    width: 100% !important;
}