/**
 * SkyDonate Phone Validation — intl-tel-input v17 styling
 *
 * Theme-agnostic overrides to match the design:
 * - Country flag + dial code in separate rounded container
 * - Phone input in adjacent rounded container
 * - Works with any WooCommerce theme
 */

/* ── Container: full width, positioned for dropdown ── */
.iti.sky-iti-container {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    gap: 8px;
}

/* ── Flag/dial-code button container ── */
.iti.sky-iti-container .iti__flag-container {
    position: static !important;
    flex-shrink: 0;
}

.iti.sky-iti-container .iti__selected-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    border: 1px solid black !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer;
    height: 100% !important;
    min-width: 95px;
    box-sizing: border-box;
}

.iti.sky-iti-container .iti__selected-flag:hover {
    border-color: #9ca3af !important;
    background: #f9fafb !important;
}

/* ── Dial code text ── */
.iti.sky-iti-container .iti__selected-dial-code {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* ── Arrow ── */
.iti.sky-iti-container .iti__arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #555;
    margin-left: 4px;
}

.iti.sky-iti-container .iti__arrow--up {
    border-top: none;
    border-bottom: 5px solid #555;
}

/* ── Phone input field ── */
.iti.sky-iti-container input[type="tel"],
.iti.sky-iti-container input[type="text"] {
    flex: 1 !important;
    width: 100% !important;
    border: 1px solid black !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
}

.iti.sky-iti-container input[type="tel"]:focus,
.iti.sky-iti-container input[type="text"]:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
}

/* ── Placeholder ── */
.iti.sky-iti-container input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
    font-weight: 400;
}

/* ── Error state ── */
.iti.sky-iti-container.sky-iti-error input[type="tel"],
.iti.sky-iti-container.sky-iti-error input[type="text"] {
    border-color: #d63638 !important;
}

.iti.sky-iti-container.sky-iti-error .iti__selected-flag {
    border-color: #d63638 !important;
}

/* ── Error message ── */
.sky-phone-error {
    color: #d63638;
    font-size: 13px;
    margin-top: 4px;
    padding: 0 2px;
    line-height: 1.4;
}

/* ── Dropdown ── */
.iti.sky-iti-container .iti__country-list {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #d1d5db !important;
    max-height: 300px !important;
    z-index: 100000 !important;
    margin-top: 4px;
    white-space: normal;
}

.iti.sky-iti-container .iti__country {
    padding: 8px 12px !important;
    font-size: 14px;
}

.iti.sky-iti-container .iti__country:hover,
.iti.sky-iti-container .iti__country.iti__highlight {
    background-color: #f0f6fc !important;
}

.iti.sky-iti-container .iti__divider {
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
    padding: 0;
}

.iti.sky-iti-container .iti__dial-code {
    color: #666;
}

/* ── Country search input ── */
.sky-country-search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 8px 10px !important;
    border-bottom: 1px solid #e5e7eb;
    list-style: none !important;
    margin: 0 !important;
}

.sky-country-search {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e91e8c !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #333 !important;
}

.sky-country-search:focus {
    border-color: #e91e8c !important;
    box-shadow: 0 0 0 1px #e91e8c !important;
}

.sky-country-search::placeholder {
    color: #9ca3af !important;
    font-weight: 400;
}

/* ── Flag sizing ── */
.iti.sky-iti-container .iti__flag {
    transform: scale(1.2);
}

/* ── Checkout custom style integration ── */
body.checkout-custom-style .iti.sky-iti-container .iti__selected-flag {
    height: 50px;
}

body.checkout-custom-style .iti.sky-iti-container input[type="tel"],
body.checkout-custom-style .iti.sky-iti-container input[type="text"] {
    height: 50px !important;
    min-height: 50px;
    padding: 12px 14px !important;
}

/* When using floating labels, hide the label for the phone field
   because the intl-tel-input provides its own placeholder */
body.checkout-custom-style form.woocommerce-checkout #billing_phone_field label {
    display: none;
}

/* ── Registration form styling ── */
.woocommerce-form-register .iti.sky-iti-container,
.woocommerce-form-login .iti.sky-iti-container {
    margin: 0;
}

.woocommerce-form-register .iti.sky-iti-container input,
.woocommerce-form-login .iti.sky-iti-container input {
    min-height: 44px;
}

/* ── My Account edit address ── */
.woocommerce-address-fields .iti.sky-iti-container {
    margin: 0;
}

/* ── Ensure parent containers don't constrain the dropdown ── */
#billing_phone_field {
    overflow: visible !important;
}

.form-row .iti.sky-iti-container {
    overflow: visible !important;
}

/* Registration form <p> wrappers may clip dropdown */
.woocommerce-form-row:has(.iti.sky-iti-container) {
    overflow: visible !important;
}

/* Fallback for browsers without :has() support */
.woocommerce-form-register .woocommerce-form-row,
.woocommerce-form-login .woocommerce-form-row {
    overflow: visible !important;
}

/* ── Responsive: keep country code + phone side by side on all screens ── */
@media (max-width: 480px) {
    .iti.sky-iti-container {
        flex-wrap: nowrap !important;
    }

    .iti.sky-iti-container .iti__flag-container {
        width: auto;
        flex-shrink: 0;
    }

    .iti.sky-iti-container .iti__selected-flag {
        width: auto;
        min-width: 80px;
        padding: 6px 8px !important;
    }

    .iti.sky-iti-container input[type="tel"],
    .iti.sky-iti-container input[type="text"] {
        min-width: 0 !important;
    }
}

/* ── Force first & last name side by side on all screens ── */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48% !important;
    float: left !important;
    clear: none !important;
}

.woocommerce-checkout .form-row-last {
    float: right !important;
}