/* ── CORE WIDGET LAYOUT (self-sufficient fallback) ──
   Replicates the essential intl-tel-input layout so the flag box,
   dial code and country list render correctly even if the library
   stylesheet is slow, cached-out or blocked. When the library CSS
   also loads, values match and nothing conflicts. */
.iti { display: block; width: 100%; position: relative; }
.iti * { box-sizing: border-box; }
.iti__flag-container {
  position: absolute; top: 0; bottom: 0; left: 0;
  padding: 0; z-index: 10;
}
.iti__selected-flag {
  position: relative; z-index: 1;
  display: flex; align-items: center; height: 100%;
  padding: 0 8px 0 10px; margin: 0;
  cursor: pointer; max-width: 100%;
}
.iti__flag {
  width: 20px; height: 15px; flex-shrink: 0;
  box-shadow: 0px 0px 1px 0px #888;
  /* Two candidate locations: correct one is assets/css/img/.
     A missing file layer is transparent, so the other shows. */
  background-image: url("img/flags.png"), url("../img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url("img/flags@2x.png"), url("../img/flags@2x.png"); }
}
.iti__selected-dial-code { margin-left: 6px; }
.iti__arrow { margin-left: 6px; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid #555; }
.iti__arrow--up { border-top: none; border-bottom: 4px solid #555; }
.iti__country-list {
  position: absolute; top: 100%; left: 0;
  margin: 4px 0 0 0; padding: 0; list-style: none; text-align: left;
}
.iti__country { list-style: none; margin: 0; padding: 5px 10px; outline: none; }
.iti__flag-box, .iti__country-name, .iti__dial-code { display: inline-block; vertical-align: middle; }
.iti__flag-box { width: 20px; margin-right: 6px; }
.iti__country-name { margin-right: 6px; }
.iti__divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
.iti__search-input { width: 100%; box-sizing: border-box; margin: 0; padding: 8px 12px; }
.iti--inline-dropdown .iti__dropdown-content { position: absolute; z-index: 1000; }

/* ── CONTACT-US AESTHETIC on top of the core layout ── */
.iti__selected-flag {
  background: #f5f0fa !important;
  border: 1px solid #ddd !important; border-right: none !important;
  border-radius: 6px 0 0 6px !important;
}
.iti__selected-flag:hover, .iti__selected-flag:focus { background: #e9ddf0 !important; }
.iti__selected-dial-code { color: #7C3784; font-weight: 600; font-size: .92rem; }
.iti__arrow { border-top-color: #7C3784; }
.iti__arrow--up { border-bottom-color: #7C3784; }
.iti__country-list {
  max-height: 240px; overflow-y: auto; z-index: 1000; background: #fff;
  border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: .92rem; color: #333;
  white-space: nowrap;
}
.iti__country.iti__highlight, .iti__country:hover { background: #f5f0fa; }
.iti__dial-code { color: #7C3784; font-weight: 600; }

/* ── UNIFIED contact-us aesthetic for EVERY phone input ──
   Same as .cu-form-group input: 1px #ddd border, 6px radius,
   10px/14px padding, .92rem #333 text. Overrides the old
   8px-radius purple inner-form style in main.css. */
.contact-form .iti input[type=tel],
.cu-phone-wrap .iti input[type=tel],
.phone-input-wrap .iti input[type=tel],
.form-group .iti input[type=tel],
#waBubblePhoneWrap .iti input[type=tel],
#mai-chatbot .iti input[type=tel] {
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* Fixed text gap: the plugin measures the flag-box width with JS at init,
     which runs before stylesheets/fonts finish — measured gap comes out
     too small and text slides under the box ("umber"). Fixed 96px clears
     the box for every country code, on every form. */
  padding-left: 96px !important;
  font-size: .92rem !important;
  color: #333 !important;
  outline: none;
  box-sizing: border-box;
  background: #fff;
}
.contact-form .iti input[type=tel]:focus,
.cu-phone-wrap .iti input[type=tel]:focus,
.phone-input-wrap .iti input[type=tel]:focus,
.form-group .iti input[type=tel]:focus,
#waBubblePhoneWrap .iti input[type=tel]:focus {
  border-color: #7C3784 !important;
  box-shadow: none !important;
}
.contact-form .iti__selected-flag,
.cu-phone-wrap .iti__selected-flag,
.phone-input-wrap .iti__selected-flag {
  border-radius: 6px 0 0 6px !important;
}

/* Old wrappers were flex rows built around the fixed +91 span */
.cu-phone-wrap { display: block; border: none; overflow: visible; }
.phone-input-wrap { display: block; }

/* Homepage widget measures its text gap with JS at load time, but the code
   font swaps in later and widens the flag box a few px after measuring.
   Fixed floor: always clears the box for every country code. */
#phone_iti { padding-left: 96px !important; }

/* Pharmaaipulse registration row: input + Verify button in flex.
   intl-tel-input wraps the input in .iti — let it grow, keep button fixed. */
.form-group .iti { flex: 1 1 auto; min-width: 0; }
.form-group .iti input[type=tel].form-input { width: 100%; }

/* WhatsApp bubble popup: dropdown list must overflow visibly */
#waBubblePhoneWrap { overflow: visible; }
#waBubblePhoneWrap .iti__country-list { z-index: 10000; }

/* Chatbot static card "Mobile Number" field */
#mai-chatbot .iti { display: block; width: 100%; }
#mai-chatbot .iti input { width: 100%; }