/*
Theme Name: Astra Child
Description: Child theme of Astra with custom login styling
Author: Your Name
Template: astra
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../astra/style.css");

/* ==========================================================================
   Ultimate Member Login Form Custom Styles (Method 1)
   ========================================================================== */

/* Custom Login Wrapper */
.custom-login-wrapper {
    max-width: 450px;
    margin: 40px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   Ultimate Member Custom Header Styles
   ========================================================================== */

/* Custom UM Header */
.custom-um-header {
    text-align: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
}

.custom-um-header h2 {
    color: #5a0616 !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Helvetica', sans-serif !important;
}

/* Ultimate Member Form Styling */
.um.um-login.um-129 {
    background: transparent;
    margin: 0;
    box-shadow: none;
}

.um-129 .um-form {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.um-129 .um-form form {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Field Styling */
.um-129 .um-field {
    margin-bottom: 20px;
    padding: 0;
}

.um-129 .um-field-label {
    margin-bottom: 8px;
}

.um-129 .um-field-label label {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0;
}

/* Input Field Styling */
.um-129 .um-form input[type="text"],
.um-129 .um-form input[type="password"],
.um-129 .um-form input[type="email"] {
    width: 100% !important;
    padding: 15px 18px !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    height: auto !important;
    min-height: 50px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.um-129 .um-form input[type="text"]:focus,
.um-129 .um-form input[type="password"]:focus,
.um-129 .um-form input[type="email"]:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
    background: #fff !important;
}

/* Button Styling */
.um-129 .um-button,
.um-129 .um-button.um-alt {
    background: #004568 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #d8b847 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 15px 30px !important;
    height: auto !important;
    min-height: 50px !important;
    width: 100% !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.um-129 .um-button:hover,
.um-129 .um-button.um-alt:hover {
    background: #004568 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

/* Error and Success Messages */
.um-129 .um-notice,
.um-129 .um-error {
    background: rgba(255, 107, 107, 0.1) !important;
    border: 1px solid #ff6b6b !important;
    border-radius: 8px !important;
    color: #d63031 !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
}

.um-129 .um-success {
    background: rgba(81, 207, 102, 0.1) !important;
    border: 1px solid #51cf66 !important;
    color: #2d8a3e !important;
}

/* Remember Me Checkbox */
.um-129 .um-field-checkbox {
    display: flex;
    align-items: center;
    margin: 15px 0 20px 0;
}

.um-129 .um-field-checkbox input[type="checkbox"] {
    margin-right: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
}

/* Links Styling */
.um-129 .um-link,
.um-129 a {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.um-129 .um-link:hover,
.um-129 a:hover {
    color: #5a67d8 !important;
    text-decoration: underline !important;
}

/* Remember Me Checkbox */
.um-129 .um-field-checkbox-option {
    color: black !important;
}

/* Margin for the Remember Me Checkbox */
.um-129 .um-col-alt {
    margin: 5px 0 5px 0 !important; /* top right bottom left */
}
/* Bottom margin for the textfield row */
.um-129 .um-row {
    margin: 0px 0 10px 0 !important; /* top right bottom left */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .custom-login-wrapper {
        margin: 20px;
        padding: 25px 20px;
        max-width: none;
    }
    
    .custom-login-header h2 {
        font-size: 24px;
    }
    
    .um-129 .um-form input[type="text"],
    .um-129 .um-form input[type="password"],
    .um-129 .um-form input[type="email"] {
        padding: 12px 15px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-login-wrapper {
    animation: fadeInUp 0.6s ease-out;
}

/* ==========================================================================
   WordPress Core Login Page Styles
   ========================================================================== */

/* These styles are loaded via login-style.css */