/* The phone uses the input surface of each acquisition context. */
.ib-phone-field .iti { display:block; width:100%; max-width:100%; }
.ib-phone-field .iti input.iti__tel-input {
  display:block !important; box-sizing:border-box !important; width:100% !important;
  min-width:0 !important; max-width:100% !important; margin:0 !important;
  padding-left:var(--ib-phone-pad-left, 112px) !important;
  color:inherit !important; caret-color:currentColor;
}
#form-hero .ib-phone-field .iti input.iti__tel-input {
  height:calc(3rem + 1px) !important; padding-right:1em !important;
  padding-left:var(--ib-phone-pad-left,112px) !important;
  border:0 !important; border-bottom:1px solid #9e9e9e !important;
  border-radius:12px !important; background:rgba(255,255,255,.06) !important;
  box-shadow:none !important; color:#fff !important;
}
.ugc #form-hero .ib-phone-field .iti input.iti__tel-input { height:calc(3rem + 2px) !important; }
#form-hero .ib-phone-field .iti input.iti__tel-input:focus {
  border-bottom:2px solid var(--ib-rosa) !important;
  outline:0 !important; box-shadow:0 1px 0 var(--ib-rosa) !important;
}
.ib-modal--checkout .ib-modal-form .ib-phone-field .iti input.iti__tel-input {
  height:48px !important; min-height:48px !important; padding-right:16px !important;
  padding-left:var(--ib-phone-pad-left,112px) !important;
  border:1px solid rgba(148,163,184,.28) !important; border-radius:14px !important;
  background:linear-gradient(180deg,rgba(15,23,42,.62),rgba(15,23,42,.45)) !important;
  box-shadow:none !important; color:#f1f5f9 !important;
}
.ib-modal--checkout .ib-modal-form .ib-phone-field .iti input.iti__tel-input:focus {
  border-color:rgba(168,85,247,.75) !important; outline:0 !important;
  background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(15,23,42,.64)) !important;
  box-shadow:0 0 0 3px rgba(168,85,247,.16) !important;
}
.ib-b2b-profile__control .iti input.iti__tel-input {
  height:54px !important; padding-right:12px !important;
  padding-left:var(--ib-phone-pad-left,112px) !important;
  border:0 !important; border-radius:inherit !important;
  background:transparent !important; box-shadow:none !important; outline:0 !important;
  color:#fff !important;
}
.ib-phone-field .iti__country-container { color:inherit; }
.ib-phone-field .iti__selected-country-primary {
  gap:6px; padding:0 12px !important; border-right:1px solid currentColor;
  border-radius:12px 0 0 12px; background:transparent;
  border-right-color:rgba(255,255,255,.18);
}
.ib-phone-field .iti__selected-country-primary:hover { background:rgba(255,255,255,.06); }
.ib-phone-field .iti__selected-country-primary:focus-visible {
  background:rgba(255,255,255,.08); outline:2px solid currentColor; outline-offset:-3px;
}
.ib-phone-field .iti__selected-dial-code { color:inherit; font-size:.86rem; font-weight:700; }
.ib-phone-field .iti__arrow { border-top-color:currentColor; }
.ib-phone-field .iti__flag { flex:none; }
.ib-phone-field > label { color:#e9dff1 !important; }
#form-hero .ib-phone-field > label.active { transform:translateY(-17px) scale(.8) !important; }
.ib-phone-field--invalid .iti input.iti__tel-input { border-color:#fb7185 !important; }
.ib-phone-field__error { display:block; margin-top:6px; color:#fecdd3; font-size:.78rem; line-height:1.35; }

/* The detached picker has its own scroll, search clearance and mobile safe area. */
.iti--detached-country-selector { z-index:1300 !important; }
.iti--detached-country-selector .iti__country-selector {
  box-sizing:border-box; width:min(390px,calc(100vw - 24px)); max-width:100%;
  max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));
  border:1px solid #75558e; border-radius:16px; background:#211a31;
  color:#f8fafc; box-shadow:0 18px 48px #08051099; overflow:hidden;
}
.iti--detached-country-selector .iti__search-input-wrapper {
  position:relative; margin:10px; border:0; background:transparent;
}
.iti--detached-country-selector .iti__search-input {
  box-sizing:border-box !important; display:block; width:100% !important;
  height:44px !important; min-height:44px !important; margin:0 !important;
  padding:0 42px 0 42px !important; font-size:16px !important;
  color:#fff !important; background:#30243f !important;
  border:1px solid #88699f !important; border-radius:10px !important;
  outline:0 !important; box-shadow:none !important;
}
.iti--detached-country-selector .iti__search-input:focus {
  border-color:#c58cdd !important; outline:0 !important;
  box-shadow:0 0 0 2px rgba(197,140,221,.2) !important;
}
.iti--detached-country-selector .iti__search-icon { left:14px; z-index:1; }
.iti--detached-country-selector .iti__search-clear { right:7px; }
.iti--detached-country-selector .iti__country-list {
  max-height:min(340px,48dvh); padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior:contain; scrollbar-color:#805197 transparent;
}
.iti--detached-country-selector .iti__country.iti__highlight,
.iti--detached-country-selector .iti__country:hover { background:#5d3276; }
.iti--detached-country-selector .iti__dial-code { color:#dfcde9; }
.iti--fullscreen-popup.iti--detached-country-selector {
  z-index:1300 !important; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.iti--fullscreen-popup.iti--detached-country-selector .iti__country-selector { width:100%; max-height:100%; }

/* WebKit autofill retains the intended colors, focus state and floating labels. */
#form-hero { --ib-acq-fill-bg:#292039; --ib-acq-fill-text:#fff; }
.ib-modal-form { --ib-acq-fill-bg:#162033; --ib-acq-fill-text:#f1f5f9; }
#form-hero :is(input,textarea,select):-webkit-autofill,
#form-hero :is(input,textarea,select):-webkit-autofill:hover,
#form-hero :is(input,textarea,select):-webkit-autofill:focus,
.ib-modal-form :is(input,textarea,select):-webkit-autofill,
.ib-modal-form :is(input,textarea,select):-webkit-autofill:hover,
.ib-modal-form :is(input,textarea,select):-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ib-acq-fill-text) !important;
  caret-color:var(--ib-acq-fill-text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--ib-acq-fill-bg) inset !important;
  box-shadow:0 0 0 1000px var(--ib-acq-fill-bg) inset !important;
  border-color:#a855f7 !important; border-radius:12px !important;
  animation-name:ib-acquisition-autofill; animation-duration:.01s;
}
#form-hero .input-field:has(input:-webkit-autofill) > label,
.ib-modal-field:has(input:-webkit-autofill) > label { color:#fff !important; }
#form-hero .input-field:has(input:-webkit-autofill) > label {
  transform:translateY(-17px) scale(.8) !important;
}
#form-hero :is(input,textarea,select):-webkit-autofill:focus,
.ib-modal-form :is(input,textarea,select):-webkit-autofill:focus {
  outline:0 !important;
}
.ib-b2b-profile__control input:-webkit-autofill,
.ib-b2b-profile__control input:-webkit-autofill:hover,
.ib-b2b-profile__control input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #0c0b19 inset !important;
  box-shadow:0 0 0 1000px #0c0b19 inset !important;
  outline:0 !important;
}
@keyframes ib-acquisition-autofill { from { opacity:1; } to { opacity:1; } }
