/*================================================
  LOGIN FORM - LIQUID GLASS THEME (DEFINITIVE FIX)
================================================*/

/* Sections 1-7 remain identical to your provided code */

/* 1. THEME: LIQUID GLASS PALETTE & HIGH CONTRAST */
:root {
    --primary-color: #E55D6C; --dark-bg: #121019; --glass-bg: rgba(35, 33, 46, 0.7);
    --glass-border: rgba(255, 255, 255, 0.15); --text-on-dark: #FFFFFF;
    --text-placeholder: #b0aec2; --input-bg: #211F2E; --input-border: #4a4a6a;
    --input-focus-glow: 0 0 0 4px rgba(229, 93, 108, 0.3); --input-focus-border: #E55D6C;
    --font-sans: 'Poppins', sans-serif; --font-serif: 'Playfair Display', serif;
}
/* Body and Base Styles */
body { font-family: var(--font-sans); background-color: var(--dark-bg); color: var(--text-on-dark); cursor: none; overflow-x: hidden; }
*:focus-visible { outline: none; }
a, button, input, select { cursor: none; }

/* 2. VISUALS: BACKGROUND & CURSOR */
.background-container, #cursor-trail-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.background-container { filter: blur(100px); }
#cursor-trail-container { z-index: 9999; }
@keyframes move-orb { 0% { transform: translate(0, 0) } 25% { transform: translate(40vw, 50vh) } 50% { transform: translate(20vw, -30vh) } 75% { transform: translate(-30vw, 40vh) } 100% { transform: translate(0, 0) } }
.orb { position: absolute; border-radius: 50% }
.orb-1 { top: 10%; left: 10%; width: 300px; height: 300px; background: #DA4453; animation: move-orb 30s infinite alternate }
.orb-2 { top: 60%; left: 40%; width: 400px; height: 400px; background: #89216B; animation: move-orb 35s infinite alternate-reverse }
.orb-3 { top: 20%; left: 70%; width: 350px; height: 350px; background: #3a6186; animation: move-orb 25s infinite alternate }
.cursor-dot { width: 10px; height: 10px; background-color: var(--primary-color); border-radius: 50%; position: absolute; transform: translate3d(-50%, -50%, 0); transition: transform .2s ease-out; box-shadow: 0 0 10px var(--primary-color) }
.cursor-dot.hover { transform: translate3d(-50%, -50%, 0) scale(1.8) }
.heart-particle { position: absolute; pointer-events: none; opacity: 1; animation: fall-and-fade 2.5s ease-in forwards }
.heart-particle::before { content: '❤'; font-size: 24px; color: var(--primary-color); text-shadow: 0 0 5px var(--primary-color) }
@keyframes fall-and-fade { 0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1 } 100% { transform: translateY(150px) scale(0) rotate(90deg); opacity: 0 } }

/* 3. LAYOUT & LOGIN CONTAINER */
.login-wrapper { min-height: 100vh; padding: 2rem 1rem; display: flex; align-items: center; justify-content: center; }
.login-container { max-width: 480px; width: 100%; }
.login-form { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 3rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); animation: form-fade-in 0.8s ease-out forwards; }
@keyframes form-fade-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* 4. FORM HEADER & TYPOGRAPHY */
.form-header h2 { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; }

/* 5. HIGH-VISIBILITY INPUTS WITH ICONS */
.form-label { font-weight: 500; margin-bottom: 0.5rem; display: block; }
.input-group-icon { position: relative; }

/* General rule for LEFT icons */
.input-group-icon > .fas {
    position: absolute; left: 20px; top: 50%;
    transform: translateY(-50%); color: var(--text-placeholder);
    transition: color 0.3s ease;
}
.input-group-icon .form-control { padding-left: 50px; }
.form-control { height: 52px; width: 100%; background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: 12px; padding-top: 0; padding-bottom: 0; color: var(--text-on-dark); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-control::placeholder { color: var(--text-placeholder); }
.input-group-icon:focus-within .fas { color: var(--primary-color); }
.form-control:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--input-focus-glow); }

/* 6. CUSTOM CHECKBOX & LINKS */
.custom-checkbox input[type="checkbox"] { display: none; }
.custom-checkbox label { display: flex; align-items: center; color: var(--text-placeholder); font-size: 0.9rem; margin-bottom: 0; }
.custom-checkbox label::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 0.75rem; background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; transition: all 0.3s ease; }
.custom-checkbox input[type="checkbox"]:checked + label::before { background-color: var(--primary-color); border-color: var(--primary-color); content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #fff; text-align: center; line-height: 18px; font-size: 11px; }
.forgot-password-link, .register-link { color: var(--primary-color); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: text-shadow 0.3s ease; }
.forgot-password-link:hover, .register-link:hover { text-shadow: 0 0 5px var(--primary-color); }

/* 7. LOGIN BUTTON */
.btn-login { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px; border: none; cursor: none; text-decoration: none; transition: all .3s ease; background: var(--primary-color); color: #fff; box-shadow: 0 4px 15px rgba(229, 93, 108, .3); }
.btn-login:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(229, 93, 108, .4); }


/* 8. View Password Button (RIGHT SIDE ICON) - THE PERMANENT FIX
----------------------------------------------------------------*/

/* Add padding to the RIGHT of the password input field to make space. */
#password {
    padding-right: 50px;
}

/* 
  This is the new, more specific rule that forces the eye icon to the right.
  It overpowers the general rule from Section 5.
*/
.input-group-icon .password-toggle-icon {
    left: auto;   /* THIS IS THE FIX: It cancels the 'left: 20px' */
    right: 20px;  /* This now works as intended */
    cursor: pointer;
    z-index: 5;
}