/* CSO Booking Manager — intl-tel-input fit-ins for WooCommerce / Divi fields. */

/* Keep the enhanced phone field full-width inside Woo/Divi form rows. */
.iti { width: 100%; display: block; }
.woocommerce form .form-row .iti input,
.woocommerce-page form .form-row .iti input,
.woocommerce form .form-row .iti--separate-dial-code input { width: 100%; }

/* ── Stacking ────────────────────────────────────────────────────────────
 * The country dropdown is absolutely positioned inside the billing field; the
 * "Your order" summary was painting on top of it. Divi splits checkout into its
 * own modules/columns, so rather than target fixed IDs we lift WHICHEVER
 * container holds the phone field while it's focused (i.e. the dropdown is open)
 * above its neighbours. Layout-agnostic and works in every browser.
 */
.woocommerce .form-row:focus-within,
.woocommerce-page .form-row:focus-within,
.et_pb_contact_field:focus-within,
.et_pb_column:focus-within,
.et_pb_module:focus-within { position: relative; z-index: 1000; }

/* Belt-and-braces for the standard WooCommerce two-column template too. */
.woocommerce #customer_details,
.woocommerce-checkout #customer_details { position: relative; z-index: 50; }
.woocommerce #order_review,
.woocommerce-checkout #order_review { position: relative; z-index: 1; }

/* The dropdown panel itself + the field carry their own high stacking values. */
.iti,
.iti__country-container { z-index: 5; }
.iti__dropdown-content { z-index: 1000; }