/* FPFX dark theme for intl-tel-input v29.x — HELP CENTRE COPY.
   ------------------------------------------------------------------
   A mirror of portal/assets/css/fpfx-phone.css with four deliberate
   deltas, each of which is a real difference between the two surfaces
   and NOT drift:
     1. the widened input selector — the help ticket form's text inputs
        carry class `input` (fpfx-help.css:417), the portal's carry
        `fpfx-input`, so the 122px left gutter that clears the country
        button has to name both;
     2. the error colour is the help centre's #ffb4b4 (fpfx-help.css:426
        `.tf-warn`) rather than the portal's #ff8cab — one warning colour
        per surface;
     3. --iti-border-color falls back to the help line token instead of
        the portal's #4f3516;
     4. a <=430px narrowing of the country button, because the help form
        is a single 640px-collapsing column and 110px of flag+dial code
        left under 200px for the number itself.
   The VENDOR tree beside it is a byte-identical copy of
   assets/vendor/intl-tel-input/ — that one must never diverge. */
.fpfx-phone .iti,
.iti--container{
  --iti-border-color:var(--fpfx-line2,rgba(238,183,98,.28));
  --iti-country-selector-bg:#201508;
  --iti-hover-color:rgba(232,196,114,.12);
  --iti-icon-color:#e9dac9;
  --iti-strict-reject-flash-color:rgba(255,65,111,.16);
  --iti-path-flags-1x:url('/assets/vendor/intl-tel-input/img/flags.webp');
  --iti-path-flags-2x:url('/assets/vendor/intl-tel-input/img/flags@2x.webp');
}

.fpfx-phone .iti{display:block;width:100%}
.fpfx-phone .iti input.fpfx-input,
.fpfx-phone .iti input.input{width:100%;padding-left:122px!important}
.fpfx-phone .iti__selected-country{
  min-width:110px;
  padding:0 13px 0 10px!important;
  border-radius:11px 0 0 11px;
  background:rgba(255,255,255,.025)!important;
}
.fpfx-phone .iti__selected-country-primary{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0!important;
}
.fpfx-phone .iti__selected-dial-code{
  margin:0 0 0 6px!important;
  padding-right:3px;
  white-space:nowrap;
  line-height:1;
}
.fpfx-phone .iti__selected-country:hover,
.fpfx-phone .iti__selected-country:focus{
  background:rgba(232,196,114,.10)!important;
}

/* The dropdown can be rendered outside .fpfx-phone, so these selectors are intentionally global. */
.iti__dropdown-content,
.iti__country-list{
  background:#201508!important;
  color:#fdf8f1!important;
  border:1px solid var(--fpfx-line2,rgba(238,183,98,.28))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.58)!important;
}
.iti__country-list{
  scrollbar-color:#c78726 #201508;
  scrollbar-width:thin;
}
.iti__country-list::-webkit-scrollbar{width:9px}
.iti__country-list::-webkit-scrollbar-track{background:#201508}
.iti__country-list::-webkit-scrollbar-thumb{
  background:#b87c25;
  border:2px solid #201508;
  border-radius:999px;
}
.iti__country{
  background:#201508!important;
  color:#fdf8f1!important;
}
.iti__country.iti__highlight,
.iti__country:hover,
.iti__country:focus{
  background:#3b2912!important;
  color:#fff!important;
}
.iti__country-name{
  color:#fdf8f1!important;
  font-weight:600;
}
.iti__dial-code{
  color:#d0bea9!important;
}
.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__country-name,
.iti__country.iti__highlight .iti__dial-code,
.iti__country:hover .iti__dial-code{
  color:#fff!important;
}
.iti__search-input{
  background:#180f06!important;
  color:#fdf8f1!important;
  border:1px solid var(--fpfx-line2,rgba(238,183,98,.28))!important;
  border-radius:9px!important;
  padding:9px 11px!important;
  caret-color:#e6c168;
}
.iti__search-input::placeholder{color:#a5927b!important;opacity:1}
.iti__search-input:focus{
  border-color:#d69b2b!important;
  box-shadow:0 0 0 3px rgba(214,155,43,.14)!important;
  outline:0!important;
}
.iti__search-icon,
.iti__search-icon-svg,
.iti__close-button,
.iti__selected-country-primary,
.iti__arrow{color:#e9dac9!important}

.fpfx-phone.phone-invalid label{color:#ffb4b4}
.fpfx-phone.phone-invalid .iti input.fpfx-input,
.fpfx-phone.phone-invalid .iti input.input{
  border-color:#ff416f!important;
  box-shadow:0 0 0 3px rgba(255,65,111,.12),0 10px 24px rgba(255,35,99,.07)
}
.fpfx-phone-error{
  display:none;
  margin-top:6px;
  color:#ffb4b4;
  font-size:11.5px;
  line-height:1.45
}
.fpfx-phone.phone-invalid .fpfx-phone-error{display:block}

/* Under 430px the help form is one column and the country button's 110px
   plus the 122px gutter leaves the number itself under 200px on a 360px
   device. Narrow both together so the pair stays in step. */
@media (max-width:430px){
  .fpfx-phone .iti__selected-country{min-width:92px}
  .fpfx-phone .iti input.fpfx-input,
  .fpfx-phone .iti input.input{padding-left:104px!important}
}