/* =========================================
   AQUALITY LOGIN FINAL DESIGN (Clean & Borderless)
   ========================================= */

/* 1. RESET CONTAINER
   Remove any background, height constraint or "boxing" from the plugin container.
   Let Elementor control the section background. */
#bubble-login-container,
#bubble-lostpassword-container,
#bubble-reset-password-container {
    position: relative;
    display: block;
    /* Normal block flow */
    width: 100%;
    max-width: 450px;
    /* Restrict width for readability */
    margin: 0 auto;
    /* Center horizontally */
    padding: 0;
    /* No extra padding around the form */
    min-height: auto;
    background: transparent !important;
    /* Force transparency */
    box-shadow: none !important;
    /* No outer shadows */
    border: none !important;
    /* No outer borders */
}

/* 2. THE CARD (Form itself) 
   Clean white card with subtle shadow, centered. */
#customer-login-form,
#customer-lostpassword-form,
#customer-reset-password-form {
    background-color: #ffffff;
    border-radius: 8px;
    /* Standard clean radius */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    /* Slightly stronger shadow for depth */
    border: 1px solid #eef2f5;
    /* Very subtle border */
    padding: 40px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Stretch children to full width */
    box-sizing: border-box;
}

/* 3. HEADINGS & TEXT */
/* Hide redundant "Login" title inside the card if there's a page title */
.form-title {
    display: none;
}

/* Style the welcome/subtitle text */
.form-subtitle {
    font-size: 16px;
    /* Larger, readable font size */
    line-height: 1.5;
    color: #555;
    /* Darker grey for readability */
    text-align: center;
    margin-bottom: 25px;
    /* Consistent spacing */
    font-weight: 400;
}

/* 4. INPUT FIELDS 
   Style like reference: Clean input below label */
.form-group {
    margin-bottom: 20px;
    width: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d9e6;
    /* Cleaner border color */
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 48px;
    /* Fixed height for consistency */
    font-family: 'Poppins', sans-serif;
    box-shadow: none !important;
    box-sizing: border-box;
    /* Ensure padding doesn't break width */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: #30b5e5;
    /* Aquality Blue */
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(48, 181, 229, 0.15) !important;
    /* Focus ring */
}

input::placeholder {
    color: #a0a0a0;
}

/* 5. BUTTONS 
   Full width, Blue, Bold */
#login-button,
#lostpassword-button,
#reset-password-button {
    width: 100%;
    height: 48px;
    background-color: #30b5e5;
    /* Aquality Blue */
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s, transform 0.1s;
    text-transform: none;
    /* No uppercase */
    box-shadow: 0 4px 6px rgba(48, 181, 229, 0.2);
    /* Subtle button shadow */
}

#login-button:hover,
#lostpassword-button:hover,
#reset-password-button:hover {
    background-color: #23a0ce;
    transform: translateY(-1px);
    /* Slight lift */
    box-shadow: 0 6px 12px rgba(48, 181, 229, 0.3);
}

/* 6. LINKS (Forgot Pw / Register) */
.forgot-password-bubble,
.login-bubble,
.bubble {
    /* Turn bubbles into simple text links */
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    width: auto;
    height: auto;
    position: static;
    border-radius: 0;
    transition: color 0.2s;
}

.forgot-password-bubble:hover,
.login-bubble:hover {
    color: #30b5e5;
    /* Blue on hover */
    text-decoration: none;
}

/* Hide unwanted decorative elements */
.new-password-input,
.confirm-new-password-input {
    /* Keeps existing positioning for eye icon but removes weird styles if any */
    right: 15px;
}

/* Error Messages */
.error-message {
    background: #ffebee;
    color: #d32f2f;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 15px;
    text-align: center;
    border: 1px solid #ffcdd2;
    display: none;
}

/* Responsive */
@media (max-width: 480px) {
    #bubble-login-container {
        padding: 0;
    }

    #customer-login-form {
        box-shadow: none;
        border: none;
        padding: 20px 0;
    }
}