/* Form Alt - lighter + outline on hover/focus */
.form-control-alt {
    background-color: #f5f6f8 !important;
    border: 1px solid #f5f6f8 !important;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
    transition-delay: 0.50s;
}

.form-control-alt:hover {
    background-color: #ffffff !important;
    border-color: #333333 !important;
    transition-delay: 0.50s;
}

.form-control-alt:focus {
    background-color: #ffffff !important;
    border-color: #333333 !important;
    transition-delay: 0.50s;
}

/* ================================
    FLOATING LABEL - outlined style, label memotong garis border
    ================================ */
.floating-group {
    position: relative;
}

/* di dalam floating-group, field jadi outlined putih (override .form-control-alt) bukan filled abu-abu */
.floating-group .form-control {
    background-color: #ffffff !important;
    border: 1px solid #d8dce1 !important;
    border-radius: 0.6rem;
    padding: 0.7rem 1rem;
    transition: border-color 0.15s ease-in-out;
}

.floating-group .form-control:hover,
.floating-group .form-control:focus {
    background-color: #ffffff !important;
    border-color: #1F2937 !important;
}

.floating-group .floating-label {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 0.35rem;
    font-size: 0.9rem;
    color: #8a8f98;
    background: transparent;
    pointer-events: none;
    transform-origin: left center;
    transition: top 0.15s ease-in-out, transform 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    z-index: 2;
}

/* sembunyikan placeholder asli sampai user fokus, supaya tidak tabrakan sama label */
.floating-group .form-control::placeholder {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.floating-group .form-control:focus::placeholder {
    opacity: 1;
}

/* label naik ke garis border saat: hover pada group, fokus pada input, atau input sudah terisi */
.floating-group:hover .floating-label,
.floating-group .form-control:focus~.floating-label,
.floating-group .form-control:not(:placeholder-shown)~.floating-label {
    top: 0;
    transform: translateY(-50%) scale(0.82);
    color: #1F2937;
    background-color: #ffffff;
}

/* ================================
    ICON DI DALAM FLOATING INPUT
    ================================ */
.floating-group.has-icon .form-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #8a8f98;
    pointer-events: none;
    z-index: 2;
    transition: color 0.15s ease-in-out;
}

.floating-group.has-icon .form-control {
    padding-left: 2.6rem !important;
}

.floating-group.has-icon .floating-label {
    left: 2.6rem;
}

/* icon ikut gelap pas field fokus / udah keisi, biar konsisten sama label */
.floating-group.has-icon .form-control:focus~.form-icon,
.floating-group.has-icon .form-control:not(:placeholder-shown)~.form-icon {
    color: #1F2937;
}

/* toggle show/hide password (icon kanan, bisa diklik) */
.floating-group .pass-toggle {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #8a8f98;
    cursor: pointer;
    z-index: 2;
    transition: color 0.15s ease-in-out;
}

.floating-group .pass-toggle:hover {
    color: #1F2937;
}

.floating-group.has-icon.has-toggle .form-control {
    padding-right: 2.6rem !important;
}

/* Checkbox "Tampilkan Password" pakai warna brand saat dicentang/fokus */
.form-check-input:checked {
    background-color: #1F2937 !important;
    border-color: #1F2937 !important;
}

.form-check-input:focus {
    border-color: #1F2937 !important;
    box-shadow: 0 0 0 0.2rem rgba(31, 41, 55, 0.25) !important;
}