/* Quform Smart Phone Field - Custom Styles */

/* Override intl-tel-input to use local flags instead of CDN */
.iti__flag {
  background-image: url("../assets/flags.png") !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("../assets/flags@2x.png") !important;
  }
}

/* Phone field container */
.quform-smart-phone-field {
  width: 100%;
}

/* intl-tel-input container styling */
.iti {
  width: 100%;
  display: block;
}

.iti__flag-container {
  z-index: 10;
}

/* Adjust for Quform's field wrapper */
.quform-input-phone {
  position: relative;
}

.quform-input-phone .iti {
  width: 100%;
}

/* Phone input field */
.quform-smart-phone-field.iti__input {
  padding-left: 52px;
  width: 100%;
}

/* Country dropdown */
.iti__country-list {
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 9999;
}

.iti__country {
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.iti__country:hover {
  background-color: #f5f5f5;
}

.iti__country.iti__highlight {
  background-color: #e8f4f8;
}

.iti__country.iti__active {
  background-color: #d4ebf2;
}

/* Dial code styling */
.iti__selected-dial-code {
  font-weight: 500;
  color: #666;
}

/* Error state */
.quform-field-error.quform-smart-phone-field {
  border-color: #dc3545;
}

.quform-field-error.quform-smart-phone-field:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Success state (valid number) */
.quform-smart-phone-field.valid {
  border-color: #28a745;
}

/* Loading state for country detection */
.quform-smart-phone-field.detecting-country {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI4IiBmaWxsPSJub25lIiBzdHJva2U9IiM5OTkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTIgNiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 20px;
}

/* Responsive adjustments */
@media screen and (max-width: 568px) {
  .iti__country-list {
    max-height: 150px;
  }

  .quform-smart-phone-field.iti__input {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .iti__country-list {
    background-color: #2d2d2d;
    color: #fff;
  }

  .iti__country:hover {
    background-color: #3d3d3d;
  }

  .iti__country.iti__highlight {
    background-color: #1a4d5c;
  }

  .iti__country.iti__active {
    background-color: #0d3d4d;
  }

  .iti__selected-dial-code {
    color: #ccc;
  }
}

/* Integration with Quform themes */
.quform-theme-minimal .quform-smart-phone-field,
.quform-theme-light .quform-smart-phone-field,
.quform-theme-dark .quform-smart-phone-field {
  width: 100%;
}

/* Ensure proper spacing with icons */
.quform-field-icon-left + .quform-input-phone .quform-smart-phone-field {
  padding-left: 52px;
}

.quform-field-icon-right ~ .quform-input-phone .quform-smart-phone-field {
  padding-right: 40px;
}

/* Multi-step form support */
.quform-page .quform-smart-phone-field {
  width: 100%;
}

/* Accessibility improvements */
.iti__country:focus {
  outline: 2px solid #4a90e2;
  outline-offset: -2px;
}

.iti__selected-flag:focus {
  outline: 2px solid #4a90e2;
}

/* Animation for country dropdown */
.iti__country-list {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Validation feedback animation */
.quform-field-error.quform-smart-phone-field {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}