/**
 * Phone field with country picker (intl-tel-input).
 *
 * Scoped to .phone-field--iti so the theme's own pickers, which still use the
 * old markup and phone-code-field.css, are untouched.
 *
 * Two rules of thumb here, both learned the hard way:
 *  - Appearance goes through intl-tel-input's own custom properties. Overriding
 *    its rules breaks its layout: its search input reserves room for the icon
 *    with a padding calc, and its country list does its own scrolling.
 *  - The surrounding theme styles bare <button> and input[type="tel"] elements,
 *    so the few structural properties we do set need !important to survive.
 */

.phone-field--iti {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 44px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.2s, background-color 0.2s;

  /* intl-tel-input's own theming hooks. */
  --iti-border-color: #e6e6e6;
  --iti-country-selector-bg: #fff; /* the dropdown's background, not the button's */
  --iti-hover-color: rgba(0, 0, 0, 0.04);
  --iti-icon-color: #909090;
  --iti-spacer-horizontal: 12px;
}

.phone-field--iti:focus-within {
  border-color: #f07e02;
}

.phone-field--iti.is-error {
  border-color: #dc3545;
}

.phone-field--iti .iti {
  width: 100%;
}

/* The shell draws the border and background, so the input must not. The theme
   styles input[type="tel"] with its own border, height and background. */
.phone-field--iti .iti__tel-input,
.phone-field--iti .phone-field__input {
  width: 100%;
  height: auto !important;
  min-height: 42px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  color: inherit;
}

.phone-field--iti .iti__tel-input:focus,
.phone-field--iti .phone-field__input:focus {
  outline: none;
  box-shadow: none !important;
}

/* The country selector is a <button>, which the theme (and Elementor's global
   button styles) would otherwise give a pill border and orange outline. */
.phone-field--iti .iti__selected-country,
.phone-field--iti .iti__selected-country:hover,
.phone-field--iti .iti__selected-country:focus,
.phone-field--iti .iti__selected-country:active {
  background-color: inherit !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid #e6e6e6 !important;
  border-radius: 10px 0 0 10px !important;
  box-shadow: none !important;
  outline: none !important;
  font: inherit;
  color: inherit;
  text-decoration: none !important;
}

.phone-field--iti .iti__selected-dial-code {
  font-size: 12px;
  color: #aaa;
}

/* Dropdown. In v29 the container is .iti__country-selector — note that
   .iti__dropdown-content does not exist, styling it silently does nothing. */
.phone-field--iti .iti__country-selector {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  background-color: #fff;
  /* Above sticky booking sidebars and the callback modal. */
  z-index: 100;
}

.iti--inline-country-selector .iti__country-list {
  max-height: 175px;
}

.phone-field--iti .iti__country.iti__highlight {
  background-color: #fdf3e8;
}

.phone-field--iti .iti__dial-code {
  color: #5f6660;
}

/* The search field is an <input>, which the theme gives a height and border. */
.phone-field--iti .iti__search-input,
.phone-field--iti .iti__search-input:focus {
  height: auto !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font: inherit;
}