/* Mauritian Rides — shared form bits.
 *
 * Loaded alongside intl-tel-input on any page that collects a phone
 * number (booking + driver signup). Two responsibilities:
 *
 *   1. Hide the honeypot field from real users. Visually off-screen
 *      AND inert (no tab stop, no a11y leak). Bots that fill every
 *      input still get caught server-side.
 *
 *   2. Reconcile intl-tel-input's default chrome with the rest of
 *      the site (rounded inputs, focus rings, error tint).
 */

/* ── Honeypot ────────────────────────────────────────────────── */
.mr-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.mr-hp input { pointer-events: none; }

/* ── Phone error message ─────────────────────────────────────── */
.mr-phone-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--coral-600, #d24a30);
  line-height: 1.3;
}

/* ── intl-tel-input container — span full width of parent field ── */
.iti.iti--container { width: 100%; }
.iti                { width: 100%; display: block; }

/* When intl-tel-input takes over the <input>, the border + bg need to
   move from the <input> onto the `.iti` wrapper — otherwise the flag
   column sits outside the field's border and looks broken. */

/* Driver signup uses `.fld input` — let the `.iti` wrapper own chrome. */
.fld .iti {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line, #e5dcc6);
  border-radius: var(--r-md, 14px);
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.fld .iti:focus-within {
  border-color: var(--coral-500, #ee5a30);
  box-shadow: 0 0 0 3px rgba(238, 90, 48, 0.15);
}
.fld .iti input[type="tel"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 14px !important;
  padding-right: 16px !important;
  padding-bottom: 14px !important;
  /* padding-left left to intl-tel-input JS — !important would override it */
  width: 100%;
  font-size: 14px;
}
.fld .iti--separate-dial-code .iti__selected-flag {
  padding: 0 10px 0 14px;
  background: transparent;
}
.fld .iti--separate-dial-code .iti__selected-dial-code {
  font-weight: 600;
  font-size: 14px;
}

/* Booking form uses `.input-basic` (sand-50 bg). Same idea: wrap chrome. */
.field-group .iti {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line, #e5dcc6);
  border-radius: var(--r-md, 14px);
  background: var(--sand-50, #faf6ee);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.field-group .iti:focus-within {
  border-color: var(--coral-500, #ff7a54);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 122, 84, 0.12);
}
.field-group .iti input[type="tel"].input-basic {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 14px !important;
  padding-right: 16px !important;
  padding-bottom: 14px !important;
}
.field-group .iti--separate-dial-code .iti__selected-flag {
  background: transparent;
  padding: 0 10px 0 14px;
}
.field-group .iti__country-list,
.fld .iti__country-list {
  border-radius: var(--r-sm, 12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line, #e5dcc6);
  margin-top: 4px;
  max-height: 280px;
  font-size: 14px;
}
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(11, 184, 173, 0.08); }
.iti__search-input  {
  padding: 10px 12px !important;
  border-radius: var(--r-xs, 8px) !important;
  border: 1px solid var(--line, #e5dcc6) !important;
  font-size: 13px !important;
}

/* Error tint on the input wrapper when phone-error is visible. */
.field-group:has(.mr-phone-error:not([hidden])) .input-basic,
.fld:has(.mr-phone-error:not([hidden])) input[type="tel"] {
  border-color: var(--coral-500, #ff7a54);
  box-shadow: 0 0 0 3px rgba(238, 90, 48, 0.15);
}