.iti.iti--allow-dropdown {
  width: 100%;
}

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

/* Country dropdown — always readable, above modals/sections */
.iti__country-list {
  z-index: 2147483000 !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
  max-height: min(280px, 50vh) !important;
}

.iti__country-list .iti__country,
.iti__country-list .iti__country-name,
.iti__country-list .iti__dial-code {
  color: #1a1a1a !important;
}

.iti__country-list .iti__country.iti__highlight {
  background-color: #eef2f6 !important;
}

.iti__country-list .iti__search-input {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #b8b8b8 !important;
}

.iti__country-list .iti__search-input::placeholder {
  color: #666666 !important;
}

.iti__country-list .iti__search-icon {
  color: #555555 !important;
}

/* Dial code + caret — light inputs (default) */
.leadform .iti .iti__selected-dial-code {
  color: #1a1a1a !important;
}

.leadform .iti .iti__selected-country {
  background: transparent !important;
}

.leadform .iti .iti__arrow {
  border-top-color: #555555 !important;
}

/* Dark phone fields */
.leadform .iti:has(input[class*="bg-[#111111]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#0A0A0A]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#000000]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#070B0C]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#101718]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#ffffff]/10"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="bg-[#ffffff]/[0.06]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="text-[#f5f5f0]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="text-[#f8fafc]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="text-[#E6E9E4]"]) .iti__selected-dial-code,
.leadform .iti:has(input[class*="text-white"]) .iti__selected-dial-code {
  color: #f5f5f0 !important;
}

.leadform .iti:has(input[class*="bg-[#111111]"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#0A0A0A]"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#000000]"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#070B0C]"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#101718]"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#ffffff]/10"]) .iti__arrow,
.leadform .iti:has(input[class*="bg-[#ffffff]/[0.06]"]) .iti__arrow,
.leadform .iti:has(input[class*="text-[#f5f5f0]"]) .iti__arrow,
.leadform .iti:has(input[class*="text-[#f8fafc]"]) .iti__arrow,
.leadform .iti:has(input[class*="text-[#E6E9E4]"]) .iti__arrow,
.leadform .iti:has(input[class*="text-white"]) .iti__arrow {
  border-top-color: #f5f5f0 !important;
}

/* Prevent inherited form/section text color breaking the tel input row */
.leadform .iti input[type="tel"].iti__tel-input,
.leadform .iti input[type="tel"] {
  background-color: transparent;
}
.leadform {
  position: relative;
}
.form-preloader {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-msg {
  padding-bottom: 10px;
  color: red;
  font-size: 14px;
  text-align: right;
}
.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}
.spinner .path {
  stroke: #0077db;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
.hide {
  display: none !important;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}