/**
 * Bootstrap 5 Floating Label CSS for intl-tel-input
 * Works with the DOM restructuring done by intl-tel-bootstrap-fix.js
 */

/* Basic setup */
.iti {
    width: 100%;
    position: relative;
}

/* Ensure inputs have proper padding */
.iti input.form-control {
    width: 100%;
    padding-left: 90px; /* Space for flag and dial code */
}

.iti__country-container > button {
    min-width: 70px !important;
}

.iti__country-list > li {
    color: #000 !important;
}

.iti__country-list > li:before {
    display: none !important;
}

.iti__search-input {
    height: 40px !important;
    padding: 20px 12px !important;
}

.iti__dropdown-content {
    z-index: 999999 !important;
}

@media screen and (min-width: 1400px) {
    .iti > label {
        top: 12px !important;
        left: 83px !important;
        right: 10px !important;
        line-height: normal;
    }
}

@media screen and (max-width: 1399px) {
  .iti > label {
    top: 9px !important;
    left: 83px !important;
    right: 10px !important;
    line-height: normal;
  }
}

.iti > .form-control-plaintext ~ label, .iti > .form-control:focus ~ label, .iti > .form-control:not(:placeholder-shown) ~ label, .iti > .form-select ~ label {
    right: unset !important;
    left: 8px !important;
}

/* Fix flag images */
.iti__flag {
    background-image: url("../images/intl-tel-input/flags.png");
}

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

.iti__selected-dial-code {
    font-size: 14px !important;
}

.iti--fullscreen-popup.iti--container {
    z-index: 999999 !important;
}