/* Aurora Login - Form Styles - Final Version */
:root {
    --raspberry-red: #DE0157;
    --robin-egg-blue: #19D7E8;
    --safety-orange: #FE832D;
    --cinnabar-orange: #EE5442;
    --mint-green: #36B583;
    --night-black: #131313;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }
/* --- CORE FIX: Disables Conflicting WooCommerce Form Styles --- */
body .woocommerce form.login,
body .woocommerce form.register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    border: 1px solid rgba(222, 1, 87, 0.01) !important;
    text-align: left !important;
}
/* --- Base WooCommerce & Page Layout --- */
.woocommerce-account:not(.logged-in) .woocommerce { background: var(--night-black) !important; min-height: 100vh !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 20px !important; }
.woocommerce .col2-set, .woocommerce-account:not(.logged-in) > h2:first-child { display: none !important; }

/* --- Main Login Box --- */
.ultimate-login-container { --inputColor: var(--safety-orange); --outlineColor: var(--safety-orange); --beamColor: #FFFFFF; position: relative; z-index: 1000; }
.ultimate-login__box { position: relative; width: 400px; height: 200px; background: repeating-conic-gradient(from var(--a), var(--raspberry-red) 0%, var(--raspberry-red) 5%, transparent 5%, transparent 40%, var(--raspberry-red) 50%); filter: drop-shadow(0 15px 50px #000); border-radius: 20px; animation: rotating 4s linear infinite; display: flex; justify-content: center; align-items: center; transition: all 0.5s; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rotating { 0% { --a: 0deg; } 100% { --a: 360deg; } }
.ultimate-login__box::before { content: ""; position: absolute; width: 100%; height: 100%; background: repeating-conic-gradient(from var(--a), var(--safety-orange) 0%, var(--safety-orange) 5%, transparent 5%, transparent 40%, var(--safety-orange) 50%); border-radius: 20px; animation: rotating 4s linear infinite; animation-delay: -1s; }
.ultimate-login__box::after { content: ""; position: absolute; inset: 4px; background: #1e1e1e; border-radius: 15px; border: 8px solid var(--night-black); }

/* --- THIS IS THE KEY FIX: Box expands on hover OR when a child element is focused --- */
.ultimate-login__box:hover,
.ultimate-login__box:focus-within {
    height: 500px; /* One generous height for both forms for stability */
}

/* --- Form Switcher Buttons --- */
.ultimate-login__switcher { position: absolute; top: 4px; left: 4px; right: 4px; z-index: 1001; display: flex; justify-content: center; padding: 10px; gap: 10px; border-radius: 15px; opacity: 0; transform: translateY(-20px); transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s; }
.ultimate-login__box:hover .ultimate-login__switcher,
.ultimate-login__box:focus-within .ultimate-login__switcher {
    opacity: 1; transform: translateY(0);
}
.switcher-link { color: #fff; text-decoration: none; font-size: 1.1em; font-weight: 500; padding: 8px 20px; border-radius: 10px; background: #ffffff1a; border: 1px solid #ffffff44; transition: 0.3s; }
.switcher-link.active { color: #fff; background: var(--raspberry-red); border-color: var(--raspberry-red); box-shadow: 0 0 10px var(--raspberry-red), 0 0 20px var(--raspberry-red); }

/* --- Content Wrapper --- */
.ultimate-login__content-wrapper { position: absolute; inset: 40px; z-index: 1000; overflow: hidden; opacity: 0; transition: opacity 0.4s ease-out 0.2s; }
.ultimate-login__box:hover .ultimate-login__content-wrapper,
.ultimate-login__box:focus-within .ultimate-login__content-wrapper {
    opacity: 1;
}

/* --- Form Positioning, Transition & Layering --- */
#login-form, #signup-form {
    padding: 45px 5px 5px 5px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}
#signup-form {
    transform: translateY(0);
    z-index: 2;
}
#login-form {
    transform: translateY(100%);
    z-index: 1;
}
.ultimate-login-container.show-login #login-form {
    transform: translateY(0);
    z-index: 2;
}
.ultimate-login-container.show-login #signup-form {
    transform: translateY(-100%);
    z-index: 1;
}

/* --- Inner Form Layout --- */
.ultimate-login__form { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 15px; width: 80%; margin: 0 auto; height: 100%; }

/* --- Form Fields & Button --- */
.ultimate-login__field { width: 100%; position: relative; }
.ultimate-login__field input { width: 100% !important; padding: 10px 20px !important; font-size: 1em !important; color: #e0e0e0 !important; background: #0000003a !important; outline: none !important; box-shadow: none !important; border-radius: 30px !important; border: 2px solid #ffffff55 !important; transition: border-color 0.3s, box-shadow 0.3s !important; }
.ultimate-login__field input:focus { border-color: var(--safety-orange) !important; box-shadow: 0 0 10px var(--safety-orange), 0 0 20px var(--safety-orange) !important; }
.ultimate-login__field input::placeholder { color: #999; }
/* --- Evasive Button Styling (and surrounding elements) --- */
.ultimate-login__msg { min-height: 20px; font-size: 0.8em; font-weight: 500; text-align: center; color: var(--cinnabar-orange); padding: 0 10px; }

.ultimate-login__btn-container {
    padding: 5px;
    position: relative; /* Keep this for the evasive effect */
}
.ultimate-login__btn {
    padding: 10px 25px;
    border: none;
    background: var(--safety-orange); /* Uses variable for consistency */
    font-weight: 600;
    font-size: 1em;
    color: #fff;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.5s, transform 0.3s;
    position: relative; /* Keep this for the evasive effect */
}
.ultimate-login__btn:hover, .ultimate-login__btn.no-shift:hover {
    background: var(--mint-green); /* Uses variable for consistency */
    box-shadow: 0 0 10px var(--mint-green), 0 0 60px var(--mint-green);
}
.ultimate-login__btn:disabled {
    background: var(--cinnabar-orange);
    cursor: not-allowed;
}

/* --- Evasive Button Shifting --- */
.shift-left { transform: translateX(-120%); }
.shift-right { transform: translateX(120%); }
.shift-top { transform: translateY(-150%); }
.shift-bottom { transform: translateY(150%); }
.no-shift { transform: translate(0, 0); }

.ultimate-login__msg { min-height: 20px; font-size: 0.8em; font-weight: 500; text-align: center; color: var(--cinnabar-orange); }
.shift-left { transform: translateX(-120%); } .shift-right { transform: translateX(120%); } .shift-top { transform: translateY(-150%); } .shift-bottom { transform: translateY(150%); } .no-shift { transform: translate(0, 0); }

/* --- Password Eyeball Effect --- */
.password-wrapper input { padding-right: 3.5rem !important; }
/* Replace the old .eyeball rule with this one */
.eyeball {
    --size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    position: absolute;
    top: 50%;
    right: 0.75rem; /* Reduced to align it further right */
    border: none;
    background-color: transparent;
    transform: translateY(-50%);
    z-index: 2;
}
.eye { width: var(--size); height: var(--size); border: 2px solid var(--inputColor); border-radius: calc(var(--size) / 1.5) 0; transform: rotate(45deg); }
.eye:before, .eye:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 100%; transition: background-color 0.3s, border-color 0.3s; }
.eye:before { width: 35%; height: 35%; background-color: var(--inputColor); }
.eye:after { width: 65%; height: 65%; border: 2px solid var(--inputColor); }
.beam { position: absolute; top: 50%; right: 2.25rem; clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%); width: 500%; height: 1000px; z-index: 1; mix-blend-mode: overlay; filter: blur(2px); transition: transform 200ms ease-out; transform-origin: 100% 50%; transform: translateY(-50%) rotate(var(--beamDegrees, -10deg)); pointer-events: none; opacity: 0; }
.ultimate-login__content.show-password .beam { background: var(--beamColor); opacity: 0.2; }
.ultimate-login__content.show-password .ultimate-login__field input { border-color: var(--outlineColor) !important; }
.ultimate-login__content.show-password .eyeball { border-color: var(--safety-orange); } .ultimate-login__content.show-password .eye:before { background-color: var(--safety-orange); } .ultimate-login__content.show-password .eye:after { border-color: var(--safety-orange); }

/* --- "Remember Me" & "Lost Password" --- */
.ultimate-login__extras { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 0.8em; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
.ultimate-login__extras label { color: #e0e0e0; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.ultimate-login__extras input[type="checkbox"] { width: auto !important; margin: 0 !important; accent-color: var(--safety-orange); }
.ultimate-login__extras a { color: var(--robin-egg-blue); text-decoration: none; transition: color 0.3s; }
.ultimate-login__extras a:hover { color: var(--safety-orange); }
/* --- Browser & Plugin Compatability --- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #e0e0e0 !important; -webkit-box-shadow: 0 0 0 30px #3a3a4a inset !important; }
.woocommerce-error, .woocommerce-message, .woocommerce-info { position: fixed !important; top: 20px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 9999 !important; width: auto !important; max-width: 90% !important; padding: 15px 25px !important; border-radius: 10px !important; border: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; animation: slideInDown 0.4s ease-out !important; color: white !important; }
.woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { display: none !important; }
.woocommerce-error { background: var(--cinnabar-orange) !important; } .woocommerce-message { background: var(--mint-green) !important; } .woocommerce-info { background: var(--robin-egg-blue) !important; }
@keyframes slideInDown { from { transform: translate(-50%, -150%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* --- Hover Hint --- */
@keyframes pulsing-glow-rebrand { 0% { text-shadow: 0 0 5px var(--safety-orange), 0 0 10px var(--safety-orange); } 50% { text-shadow: 0 0 20px var(--safety-orange), 0 0 30px var(--safety-orange); } 100% { text-shadow: 0 0 5px var(--safety-orange), 0 0 10px var(--safety-orange); } }
.ultimate-login__hint { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--safety-orange); opacity: 1; transition: opacity 0.3s ease-out; z-index: 1002; animation: pulsing-glow-rebrand 2.5s infinite ease-in-out; pointer-events: none;}
.ultimate-login__hint i { font-size: 3em; } .ultimate-login__hint span { font-weight: normal; letter-spacing: 0.1em; margin-top: 10px; }
.ultimate-login__box:hover .ultimate-login__hint,
.ultimate-login__box:focus-within .ultimate-login__hint {
    opacity: 0;
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .ultimate-login__box { width: 95vw; max-width: 350px; height: 180px; }
    .ultimate-login__box:hover,
    .ultimate-login__box:focus-within {
        height: 500px;
    }
    .ultimate-login__form { width: 90%; }
}
/* Reduce font size for WooCommerce privacy policy text */
.ultimate-login__form .woocommerce-privacy-policy-text,
.ultimate-login__form .woocommerce-form-row--wide p {
    font-size: 0.8em;
    line-height: 1.4;
}
/* --- Fix Password Field Icons --- */

/* 1. Forcefully hide the default WooCommerce password toggle icon and strength meter */
.woocommerce-password-strength {
    display: none !important;
}

/* 2. Remove the unwanted hover effect (the "red square") from our custom eyeball */
.ultimate-login__form .eyeball:hover,
.ultimate-login__form .eyeball:focus {
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
}
/* --- Fix Password Field Icons (v2) --- */

/* Forcefully hide the default WooCommerce/theme password toggle button,
   by selecting any button inside the password wrapper that is NOT our .eyeball button. */
.password-wrapper button:not(.eyeball) {
    display: none !important;
}
/* --- DEFINITIVE OVERRIDE FIX --- */

/* 1. Force the eyeball to the correct position */
.eyeball {
    right: 0.75rem !important;
}

/* 2. Force the correct button colors and style */
.ultimate-login__btn {
    padding: 10px 25px !important;
    border: none !important;
    background: var(--safety-orange) !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    color: #fff !important;
    border-radius: 30px !important;
    cursor: pointer !important;
}
.ultimate-login__btn:hover, .ultimate-login__btn.no-shift:hover {
    background: var(--mint-green) !important;
    box-shadow: 0 0 10px var(--mint-green), 0 0 60px var(--mint-green) !important;
}