/**
 * FV Hospital custom overrides for intlTelInput (country-phone-field-contact-form-7).
 * Moved from plugin assets to theme to survive plugin updates.
 *
 * @since 1.0.0
 */

/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.intl-tel-input {
    display: block;
}

/* ─── Phone <input> ───────────────────────────────────────────────────────── */
.intl-tel-input input,
.intl-tel-input input[type=text],
.intl-tel-input input[type=tel] {
    background-color: #f9fafb;
    border: 1px solid #a3a3a3;
    border-radius: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-right: 1rem;
    /* Bump padding-left by 20px over the library's iti-sdc-* values to
       account for the wider .selected-flag (extra padding-right for arrow)
       and add breathing room after the left border divider. */
}

.intl-tel-input.separate-dial-code.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] {
    padding-left: 86px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] {
    padding-left: 96px;
}
.intl-tel-input.separate-dial-code.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] {
    padding-left: 94px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
    padding-left: 104px;
}
.intl-tel-input.separate-dial-code.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] {
    padding-left: 102px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
    padding-left: 112px;
}
.intl-tel-input.separate-dial-code.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] {
    padding-left: 110px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] {
    padding-left: 120px;
}

.intl-tel-input input:focus,
.intl-tel-input input[type=text]:focus,
.intl-tel-input input[type=tel]:focus {
    outline: none;
    border-color: var(--color-primary, #023C69);
    box-shadow: 0 0 0 1px var(--color-primary, #023C69);
}

/* ─── Flag + dial-code panel (left side) ─────────────────────────────────── */
.intl-tel-input.separate-dial-code .selected-flag {
    background-color: #f9fafb;
    border-right: 1px solid #a3a3a3;
    border-radius: 0.5rem 0 0 0.5rem;
    padding-right: 20px;
}

/* ─── Chevron arrow – add gap between dial-code and arrow ────────────────── */
.intl-tel-input .selected-flag .iti-arrow {
    right: 8px;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 7px;
    height: 4px;
    margin-top: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' fill='none'%3E%3Cpath d='M0.702148 0.5C0.732003 0.500271 0.761002 0.505982 0.787109 0.516602C0.813261 0.527279 0.835285 0.542616 0.852539 0.55957L0.859375 0.56543L3.16406 2.75684L3.50879 3.08398L3.85352 2.75684L6.15234 0.569336C6.18853 0.536761 6.24228 0.516158 6.30176 0.516602C6.36183 0.517098 6.41483 0.539819 6.4502 0.573242C6.48473 0.606069 6.49968 0.645619 6.5 0.680664C6.50026 0.715332 6.4861 0.753275 6.45312 0.786133L3.65918 3.44238C3.62346 3.47634 3.56968 3.49991 3.50879 3.5C3.47827 3.49999 3.44937 3.49446 3.42383 3.48438L3.3584 3.44238L0.558594 0.78125L0.551758 0.775391C0.533717 0.758807 0.521031 0.740123 0.512695 0.72168C0.504496 0.703485 0.500231 0.685067 0.5 0.666992C0.499833 0.64875 0.503823 0.629706 0.511719 0.611328C0.519674 0.592847 0.532153 0.574394 0.549805 0.557617C0.567511 0.540789 0.589707 0.525931 0.616211 0.515625C0.64274 0.505314 0.672137 0.499752 0.702148 0.5Z' fill='%232A2A2A' stroke='%23676767'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.intl-tel-input .selected-flag .iti-arrow.up {
    border-bottom: none;
    transform: rotate(180deg);
}

/* ─── Country-list dropdown ───────────────────────────────────────────────── */
.intl-tel-input .country-list {
    border: 1px solid #a3a3a3;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    margin: 4px 0 0 0;
    max-height: 200px !important;
}

.intl-tel-input .country-list .country.highlight {
    background-color: #f3f4f6;
}

.intl-tel-input .country-list .divider {
    border-bottom-color: #e5e7eb;
}