/**
* VX Toolkit — Phone Field decorator styles.
*
* intl-tel-input ships its own CSS (loaded as `vx-toolkit:intl-tel.css`,
* a dep of this file). We only add:
* • Full-width `.iti` wrapper so the picker fills the form group.
* • Transparent background on the dial-code chip (Voxel's wrapper
* applies a background to children, which competes with the chip's
* own styling).
* • z-index lift for the dropdown content inside Voxel popup dialogs.
* • WhatsApp link styling.
*
* Selectors deliberately target generic intl-tel-input classes (NOT a
* `.vx-toolkit-phone-field` wrapper) because we don't modify Voxel's
* template — we just decorate `` directly.
*/
/* The inline `.iti` wrapper around the should fill its form
* group. We exclude `.iti--container` (the teleported dropdown) so it
* doesn't stretch to 100% of . */
.iti:not(.iti--container) {
width: 100% !important;
}
.iti--separate-dial-code .iti__selected-country {
background-color: transparent !important;
}
/* ============================================================
* Teleported country dropdown (`dropdownContainer: document.body`)
*
* intl-tel-input appends a `.iti.iti--container` div to .
* We need:
* 1. z-index above the dialog (500000) so it paints on top
* 2. Reasonable max-width so it doesn't span the full viewport
* 3. Polished visual treatment (shadow, border-radius)
* ============================================================ */
.iti--container {
z-index: 500002 !important;
}
.iti--container .iti__dropdown-content {
max-width: 360px;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.iti--container .iti__search-input {
border-radius: 6px;
border: 1px solid #d1d5db;
padding: 8px 12px;
font-size: 14px;
margin: 8px;
width: calc(100% - 16px);
box-sizing: border-box;
}
.iti--container .iti__search-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.iti--container .iti__country-list {
max-height: 260px;
}
.iti--container .iti__country {
padding: 8px 12px;
transition: background-color 0.1s ease;
}
.iti--container .iti__country:hover,
.iti--container .iti__country--highlight {
background-color: #f3f4f6;
}
/* WhatsApp helper link rendered by phone-field.js next to the input. */
.vx-toolkit-phone-field__whatsapp {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 4px 0;
font-size: 13px;
color: #25D366;
text-decoration: none;
transition: opacity 0.15s ease;
}
.vx-toolkit-phone-field__whatsapp:hover {
opacity: 0.85;
text-decoration: underline;
}
.vx-toolkit-phone-field__whatsapp::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}