/* ==========================================================================
   Finaap phone field — professional intl-tel-input v23 styling.
   Makes the flag + dial-code segment blend into the standard Tailwind input
   (gray-300 border, rounded-lg, trust-blue focus ring) used across forms.
   Used by the registration and edit-profile screens.
   ========================================================================== */

.iti {
  width: 100%;
  display: block;
}

/* The phone input itself — match the other form inputs exactly. */
.iti .iti__tel-input,
.iti input[type="tel"],
.iti input[type="text"] {
  width: 100%;
  height: 50px;
  border: 1px solid #d1d5db;          /* gray-300 */
  border-radius: 0.5rem;              /* rounded-lg */
  background-color: #fff;
  color: #1e293b;                     /* slate-dark */
  font-size: 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}

.iti .iti__tel-input:hover,
.iti input[type="tel"]:hover,
.iti input[type="text"]:hover {
  border-color: #9ca3af;              /* gray-400 */
}

.iti .iti__tel-input:focus,
.iti input[type="tel"]:focus,
.iti input[type="text"]:focus {
  border-color: #2563eb;              /* trust-blue */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .25);
}

/* Flag + dial-code button on the left. */
.iti__selected-country {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: transparent;
  transition: background-color .15s ease;
}
.iti__selected-country:hover,
.iti__selected-country:focus {
  background-color: #f8fafc;          /* slate-50 */
}
.iti__selected-country-primary {
  padding: 0 8px 0 14px;
}
.iti__selected-dial-code {
  color: #475569;                     /* slate-600 */
  font-size: 0.95rem;
  margin-left: 6px;
}

/* Country dropdown. */
.iti__dropdown-content {
  border: 1px solid #e5e7eb;          /* gray-200 */
  border-radius: 0.75rem;             /* rounded-xl */
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  overflow: hidden;
  margin-top: 6px;
}
.iti__search-input {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.9rem;
  outline: none;
}
.iti__country-list {
  max-height: 260px;
}
.iti__country {
  padding: 0.55rem 0.95rem;
  font-size: 0.9rem;
}
.iti__country.iti__highlight {
  background-color: #eff6ff;          /* blue-50 */
}
.iti__country-name {
  color: #1e293b;
}
.iti__dial-code {
  color: #94a3b8;                     /* slate-400 */
}