/* ================================
   Bootstrap Select – Form Control Fix
   ================================ */

/* Match input height, border & background */
.bootstrap-select .dropdown-toggle {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff !important;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

/* Remove default bootstrap-select shadow */
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.show .dropdown-toggle {
    outline: none;
    box-shadow: none;
    border-color: #86b7fe;
}

/* Dropdown menu border radius */
.bootstrap-select .dropdown-menu {
    border-radius: 0.375rem;
}

/* Selected item color */
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: #0d6efd;
    color: #fff;
}

/* Validation – error */
.was-validated .bootstrap-select select:invalid+.dropdown-toggle,
.bootstrap-select.is-invalid .dropdown-toggle {
    border-color: #dc3545;
}

/* Validation – success */
.was-validated .bootstrap-select select:valid+.dropdown-toggle,
.bootstrap-select.is-valid .dropdown-toggle {
    border-color: #198754;
}

/* Hide select error by default */
.select-error {
    display: none;
    color: #dc3545;
    font-size: 0.875em;
}

/* Show error only when invalid */
.bootstrap-select.is-invalid+.select-error,
.bootstrap-select.is-invalid~.select-error {
    display: block;
}

/* Red border */
.bootstrap-select.is-invalid .dropdown-toggle {
    border-color: #dc3545;
}

/* 🔥 Remove validation icons from bootstrap-select search input */
.bootstrap-select .bs-searchbox .form-control {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Prevent validation state from affecting search box */
.bootstrap-select.is-invalid .bs-searchbox .form-control,
.bootstrap-select.is-valid .bs-searchbox .form-control {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.bootstrap-select .bs-searchbox .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}


/* Password strength colors */
.progress-bar.weak {
    background-color: #dc3545;
    /* red */
}

.progress-bar.medium {
    background-color: #ffc107;
    /* yellow */
}

.progress-bar.strong {
    background-color: #198754;
    /* green */
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #6c757d;
}

.password-toggle:hover {
    color: #0d6efd;
}

/* Remove Bootstrap validation icons ONLY for password fields */
.form-control[type="password"] {
    --bs-form-valid-bg-icon: none !important;
    --bs-form-invalid-bg-icon: none !important;
    background-image: none !important;
}

/* Fix confirm password eye icon shift */
.password-wrapper {
    position: relative;
}

/* Lock eye icon */
.password-wrapper .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Keep height stable */
.password-wrapper .form-control {
    min-height: 38px;
    padding-right: 2.75rem;
}

/* Prevent feedback from pushing layout */
.password-wrapper .invalid-feedback {
    position: absolute;
    bottom: -1.25rem;
    left: 0;
}

.password-wrapper {
    margin-bottom: 2rem;
}

.drawer-message {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}