/**
 * International Phone Input Styling
 * 
 * Professional styling for intl-tel-input library
 * Consistent with Global Studies brand design
 */

/* Base phone input container */
.iti {
  width: 100%;
  display: block;
}

/* Flag container */
.iti__flag-container {
  padding: 0;
}

/* Selected flag button */
.iti__selected-flag {
  padding: 0 0 0 0.9rem;
  border-radius: 12px 0 0 12px;
  background: transparent;
  border-right: 1px solid var(--gs-border-strong);
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background: var(--gs-canvas);
}

.iti__selected-flag {
  width: auto;
  min-width: 5.5rem;
}

/* Dial code spacing */
.iti__selected-dial-code {
  margin-left: 0.25rem;
  margin-right: 0.5rem;
}

/* Country dropdown list */
.iti__country-list {
  border-radius: 12px;
  box-shadow: 0 10px 40px -10px rgba(10, 37, 64, 0.2);
  border: 1px solid var(--gs-border);
  margin-top: 4px;
  max-height: 280px;
}

/* Individual country item */
.iti__country {
  padding: 0.6rem 0.9rem;
  transition: background .15s ease;
}

.iti__country:hover {
  background: var(--gs-canvas);
}

.iti__country.iti__highlight {
  background: var(--gs-accent-soft);
}

/* Divider between preferred and all countries */
.iti__divider {
  border-bottom: 1px solid var(--gs-border);
  margin: 0.25rem 0;
}

/* Search input in dropdown */
.iti__search-input {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--gs-border-strong);
  border-radius: 8px;
  margin: 0.5rem;
  width: calc(100% - 1rem);
  font-size: 0.875rem;
}

.iti__search-input:focus {
  border-color: var(--gs-ink);
  outline: none;
}

/* Phone input field - add padding to prevent overlap with flag */
input[type="tel"].phone-input,
input[data-phone-input] {
  padding-left: 6rem !important;
}

/* Specific overrides for different form contexts */

/* Quotator forms (rounded inputs) */
.gs-pq-input[data-phone-input],
.gs-q-input[data-phone-input],
#id_phone_program,
#id_phone_school {
  padding-left: 6rem !important;
}

/* Contact forms (underline style) */
.gs-input[data-phone-input],
.contact-form input[type="tel"],
#id_phone_quick_contact,
#id_phone_contact {
  padding-left: 5rem !important;
}

/* Contact form specific flag styling (underline style) */
.contact-form .iti__selected-flag,
#quick_contact_form .iti__selected-flag {
  padding: 0.75rem 0 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gs-border-strong);
  border-radius: 0;
}

.contact-form .iti__selected-flag:hover,
#quick_contact_form .iti__selected-flag:hover {
  background: var(--gs-canvas);
}