/**
 * Excellence Cyprus — Phone Validation Styles
 *
 * Makes intl-tel-input blend seamlessly with Houzez form inputs,
 * and styles the inline error messages.
 */

/* ── Container: fill parent width ─────────────────────────── */
.iti {
  width: 100% !important;
}

/* ── Input: match Houzez .form-control exactly ────────────── */
/* ── Input: room for flag + dial code ─────────────────────── */
.iti input.form-control,
.iti input[name="mobile"],
.iti input[name="phone"] {
  padding-left: 105px !important;
  width: 100% !important;
  height: auto !important;
}

/* ── Flag dropdown: subtle, no border clash ───────────────── */
.iti__selected-country {
  border-radius: var(--ec-radius-input, 8px) 0 0 var(--ec-radius-input, 8px) !important;
  background: transparent !important;
  padding: 0 6px 0 10px !important;
}

.iti__selected-country:hover,
.iti__selected-country:focus {
  background: rgba(44, 62, 89, 0.04) !important;
}

/* ── Dropdown list: clean, matches site card style ────────── */
.iti__country-list {
  border-radius: 12px !important;
  border: 1px solid var(--ec-border, #E2E4E8) !important;
  box-shadow: 0 12px 40px rgba(27, 37, 76, 0.12) !important;
  max-height: 220px !important;
  z-index: 10000 !important;
}

.iti__country-list .iti__country {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.iti__country-list .iti__country:hover,
.iti__country-list .iti__country--highlight {
  background: var(--ec-bg, #F8F8FA) !important;
}

.iti__country-list .iti__dial-code {
  color: var(--ec-grey, #A6A6A7) !important;
}

/* ── Search box inside dropdown ───────────────────────────── */
.iti__search-input {
  border-radius: 8px !important;
  border: 1px solid var(--ec-border, #E2E4E8) !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
}

.iti__search-input:focus {
  border-color: var(--ec-navy, #2C3E59) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44, 62, 89, 0.08) !important;
}

/* ── Invalid state ────────────────────────────────────────── */
.ec-phone-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

/* ── Error message ────────────────────────────────────────── */
.ec-phone-error {
  font-size: 12px;
  line-height: 1.4;
  color: #c0392b;
  margin-top: 4px;
  padding: 0 2px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

.ec-phone-error--visible {
  max-height: 40px;
  opacity: 1;
  margin-top: 6px;
}

/* ── Sidebar: prevent dropdown clipping ───────────────────── */
.property-form-tabs-wrap,
.property-form .property-form-wrap,
.property-schedule-tour-form-wrap,
.ec-proj-sidebar__inner {
  overflow: visible !important;
}

/* ── Mobile: dropdown goes full-width ─────────────────────── */
@media (max-width: 767px) {
   /* intl-tel-input dropdown — prevent clipping on mobile */
.iti--container {
    z-index: 99999 !important;
}

    
  .iti__country-list {
    max-width: 90vw !important;
  }

  .iti--separate-dial-code input.form-control {
    padding-left: 80px !important;
  }
}