/* --- Updated Fonts & Theme Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&family=Alexandria:wght@300;400;500;600&display=swap');

:root {
    --uv-primary: #4d423e; /* Dark Brown (Main Theme) */
    --uv-secondary: #b02334; /* Reddish (Accent) */
    --uv-highlight: #bda699; /* Light Beige */
    --uv-bg-light: #fcf9f7;
    --uv-white: #ffffff;
    --uv-text-main: #333333;
    --uv-text-muted: #666666;
    --uv-border: #e6e1de;
}

/* --- Main Wrapper (Card Design) --- */
.uvicon-login-wrapper {
    width: 100% !important; 
    max-width: 520px !important;
    margin: 40px auto !important; 
    background-color: var(--uv-white) !important;
    padding: 40px 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(77, 66, 62, 0.08) !important;
    font-family: 'Alexandria', sans-serif;
    border: 1px solid var(--uv-border);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* --- Header Section --- */
.uvicon-login-header {
    text-align: center;
    margin-bottom: 30px;
}

.uvicon-login-header h2 {
    font-family: 'Readex Pro', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--uv-primary);
    margin: 0 0 8px 0;
}

.uvicon-login-header p {
    font-size: 14px;
    color: var(--uv-text-muted);
    margin: 0;
}

/* --- Input Groups & Icons --- */
.uvicon-form-group {
    margin-bottom: 20px;
}

.uvicon-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--uv-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input Wrapper for Icons */
.input-icon-wrap {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.5;
    pointer-events: none;
}

.uvicon-form-group .input {
    width: 100%;
    padding: 12px 15px 12px 40px; /* Space for icon */
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    box-sizing: border-box; 
    font-size: 14px;
    font-family: 'Alexandria', sans-serif;
    background-color: #fafafa;
    color: var(--uv-text-main);
    transition: all 0.2s ease;
}

.uvicon-form-group .input:focus {
    border-color: var(--uv-primary);
    background-color: var(--uv-white);
    outline: none;
    box-shadow: 0 4px 12px rgba(77, 66, 62, 0.05);
}

/* Password Toggle */
.uvicon-password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--uv-text-muted);
    font-size: 16px;
}

/* --- Form Actions (Remember / Forgot) --- */
.uvicon-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 13px;
}

.uv-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--uv-text-muted);
}
.uv-checkbox input { margin-right: 6px; accent-color: var(--uv-primary); }

.uvicon-forgot-password {
    color: var(--uv-secondary);
    font-weight: 600;
    text-decoration: none;
}
.uvicon-forgot-password:hover { text-decoration: underline; }

/* --- Buttons --- */
.uvicon-login-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--uv-primary), #362e2b);
    color: white;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Readex Pro', sans-serif;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.uvicon-login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(77, 66, 62, 0.3);
}

.uvicon-text-btn {
    background: none; border: none;
    color: var(--uv-text-muted);
    font-size: 13px; cursor: pointer;
    margin-top: 10px; width: 100%;
}
.uvicon-text-btn:hover { color: var(--uv-primary); }

/* --- Divider --- */
.uvicon-login-divider {
    display: flex; align-items: center;
    text-align: center; color: #aaa;
    margin: 25px 0; font-size: 12px;
}
.uvicon-login-divider::before, .uvicon-login-divider::after {
    content: ''; flex: 1; border-bottom: 1px solid #eee;
}
.uvicon-login-divider span { padding: 0 10px; }

/* --- Social Buttons (Bottom) --- */
.uvicon-login-social-buttons {
    display: flex; gap: 15px; justify-content: center;
}
.uvicon-social-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
    background: #fff; transition: all 0.2s;
}
.uvicon-social-btn:hover {
    border-color: var(--uv-highlight);
    transform: scale(1.1);
}

/* --- Footer --- */
.uvicon-login-footer-links {
    margin-top: 25px; text-align: center; font-size: 14px; color: var(--uv-text-muted);
}
.uvicon-login-footer-links a {
    color: var(--uv-primary); font-weight: 700; text-decoration: none;
}

/* --- OTP & Logged In Styles --- */
.otp-input {
    letter-spacing: 8px; text-align: center; font-size: 20px; font-weight: 700;
}
.uv-otp-header { text-align: center; margin-bottom: 20px; }
.uv-otp-header h3 { margin: 10px 0 5px; color: var(--uv-primary); }

/* Logged In Card */
.uvicon-logged-in-wrapper { text-align: center; }
.uvicon-user-avatar img { border-radius: 50%; border: 3px solid var(--uv-primary); padding: 3px; }
.uvicon-logged-in-title { font-family: 'Readex Pro'; color: var(--uv-primary); margin: 15px 0 5px; }
.uvicon-btn-group { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.uvicon-logout-btn {
    padding: 12px; border: 2px solid #eee; background: #fff; border-radius: 8px;
    color: var(--uv-text-muted); text-decoration: none; font-weight: 600; display: block;
}
.uvicon-logout-btn:hover { border-color: var(--uv-secondary); color: var(--uv-secondary); }

/* --- Modal --- */
.uv-modal-backdrop {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 99999;
    align-items: center; justify-content: center;
}
.uv-modal-content {
    background: #fff; width: 90%; max-width: 380px; padding: 30px;
    border-radius: 12px; position: relative; animation: slideDown 0.3s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.uv-close-btn {
    position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; color: #999;
}
.uv-modal-header { text-align: center; margin-bottom: 20px; }
.uv-modal-header h3 { margin: 0; color: var(--uv-primary); font-family: 'Readex Pro'; }

@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .uvicon-login-wrapper { padding: 30px 20px !important; margin: 20px auto !important; }
}