/*
 * ParastooSeir Gravity Mobile Field
 * Update-safe overrides for Gravity Forms + intl-tel-input.
 * Scoped only to fields marked as real mobile fields by PHP.
 */

.ps-mobile-field,
[data-ps-mobile-field="1"] {
    --ps-mobile-h: 48px;
    --ps-mobile-radius: 12px;
    --ps-mobile-border: #d7dde8;
    --ps-mobile-focus: #485a85;
    --ps-mobile-country-width: 92px;
    direction: rtl;
    text-align: right;
}

.ps-mobile-field .gfield_label,
[data-ps-mobile-field="1"] .gfield_label {
    direction: rtl !important;
    text-align: right !important;
}

/* The ITI widget itself must be LTR so flag, dial code and digits stay stable. */
.ps-mobile-field .ginput_container,
.ps-mobile-field .iti,
[data-ps-mobile-field="1"] .ginput_container,
[data-ps-mobile-field="1"] .iti {
    width: 100% !important;
}

.ps-mobile-field .iti,
[data-ps-mobile-field="1"] .iti {
    display: block !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
    position: relative !important;
}

.ps-mobile-field input[type="tel"],
.ps-mobile-field input.iti__tel-input,
[data-ps-mobile-field="1"] input[type="tel"],
[data-ps-mobile-field="1"] input.iti__tel-input {
    width: 100% !important;
    min-height: var(--ps-mobile-h) !important;
    height: var(--ps-mobile-h) !important;
    box-sizing: border-box !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext !important;
    padding-left: calc(var(--ps-mobile-country-width) + 12px) !important;
    padding-right: 14px !important;
    border: 1px solid var(--ps-mobile-border) !important;
    border-radius: var(--ps-mobile-radius) !important;
    background: #fff !important;
    color: #1f2533 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.ps-mobile-field input[type="tel"]:focus,
.ps-mobile-field input.iti__tel-input:focus,
[data-ps-mobile-field="1"] input[type="tel"]:focus,
[data-ps-mobile-field="1"] input.iti__tel-input:focus {
    outline: none !important;
    border-color: var(--ps-mobile-focus) !important;
    box-shadow: 0 0 0 3px rgba(72, 90, 133, .10) !important;
}

/* Compatible with old and new intl-tel-input markup. */
.ps-mobile-field .iti__flag-container,
.ps-mobile-field .iti__country-container,
[data-ps-mobile-field="1"] .iti__flag-container,
[data-ps-mobile-field="1"] .iti__country-container {
    left: 0 !important;
    right: auto !important;
    direction: ltr !important;
    height: 100% !important;
    z-index: 3 !important;
}

.ps-mobile-field .iti__selected-country,
.ps-mobile-field .iti__selected-flag,
[data-ps-mobile-field="1"] .iti__selected-country,
[data-ps-mobile-field="1"] .iti__selected-flag {
    min-height: var(--ps-mobile-h) !important;
    height: var(--ps-mobile-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: var(--ps-mobile-radius) 0 0 var(--ps-mobile-radius) !important;
    background: transparent !important;
    border: 0 !important;
    color: #1f2533 !important;
    box-sizing: border-box !important;
}

/* Keep +98, flag and arrow visually ordered like the approved visa form. */
.ps-mobile-field .iti__selected-dial-code,
[data-ps-mobile-field="1"] .iti__selected-dial-code {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    margin: 0 !important;
    color: #485a85 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.ps-mobile-field .iti__selected-country-primary,
[data-ps-mobile-field="1"] .iti__selected-country-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ps-mobile-field .iti__arrow,
[data-ps-mobile-field="1"] .iti__arrow {
    margin-left: 2px !important;
    margin-right: 0 !important;
}

/* Country list: readable on RTL pages without breaking numeric direction. */
.ps-mobile-field .iti__dropdown-content,
.ps-mobile-field .iti__country-list,
[data-ps-mobile-field="1"] .iti__dropdown-content,
[data-ps-mobile-field="1"] .iti__country-list {
    max-width: min(92vw, 430px) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    direction: ltr !important;
    text-align: left !important;
    z-index: 999999 !important;
}

.ps-mobile-field .iti__country,
[data-ps-mobile-field="1"] .iti__country {
    min-height: 42px !important;
}

/* Gravity validation states. */
.ps-mobile-field.gfield_error input[type="tel"],
[data-ps-mobile-field="1"].gfield_error input[type="tel"] {
    border-color: #c92a2a !important;
}

@media (max-width: 480px) {
    .ps-mobile-field,
    [data-ps-mobile-field="1"] {
        --ps-mobile-h: 48px;
    }

    .ps-mobile-field input[type="tel"],
    .ps-mobile-field input.iti__tel-input,
    [data-ps-mobile-field="1"] input[type="tel"],
    [data-ps-mobile-field="1"] input.iti__tel-input {
        font-size: 15px !important;
        padding-right: 12px !important;
    }
}