/**
 * File: assets/css/ejs-login.css
 * Description: Styles for login/signup dropdown forms in EmulatorJS plugin.
 * @package EmulatorJS
 * @since 1.0.0
 */

/**
 * Dropdown for login and register forms.
 */
.ejs-login-dropdown, .ejs-register-dropdown {
    position: absolute;
    top: calc(100% + 34px);
    right: 0;
    background: white;
    padding: 20px;
    z-index: 1000;
    width: 300px;
    background-color: #fff;
    border-bottom: 4px solid #f0f0f0;
    border-left: 4px solid #f7f8f9;
    border-right: 1px solid #f7f8f9;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

/**
 * Modal overlay for mobile
 */
.ejs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.ejs-modal-content {
    background: white;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

/**
 * Form styles for login, register, forgot, reset.
 */
.ejs-login-form, .ejs-register-form, .ejs-forgot-form, .ejs-reset-form {
    display: flex;
    flex-direction: column;
}

.ejs-login-form .ejs-login-input, .ejs-register-form .ejs-login-input, .ejs-forgot-form .ejs-login-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e9e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
	background-color: #fff;
}

.ejs-back-to-login {
	text-align: center;
	margin: 10px;
}

.ejs-forgot-form p {
	font-size: 14px;	
}

.ejs-register-form .ejs-success-message {
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    background: #dff0d8;
    color: #3c763d;
    border: 1px dashed #7e9968;
}

/**
 * Input fields in forms.
 */
.ejs-login-input {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Options section in login form (remember me, forgot).
 */
.ejs-login-options, .ejs-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/**
 * Submit button in forms.
 */
.ejs-login-button {
    background: #333;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

/**
 * Social login buttons section.
 */
.ejs-social-logins {
    text-align: center;
    margin: 10px 0;
}

/**
 * Individual social login links.
 */
.ejs-social-logins a {
    display: block;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
}

/**
 * Container for first and last name fields in register.
 */
.ejs-name-fields {
    display: flex;
    gap: 10px;
}

/**
 * Inputs in name fields.
 */
.ejs-name-fields input {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

/**
 * Labels in dropdown forms.
 */
.ejs-login-dropdown label,
.ejs-register-dropdown label,
.ejs-login-forms-container label,
.ejs-register-forms-container label {
    margin: 0;
    font-weight: normal;
    font-size: 14px;
    color: #6B7280;
}

/**
 * Paragraph texts in dropdown forms.
 */
.ejs-login-dropdown p,
.ejs-register-dropdown p,
.ejs-login-forms-container p,
.ejs-register-forms-container p {
    text-align: center;
    margin: 10px 0;
}

/**
 * Pseudo-elements for social icons (placeholder).
 */
.ejs-social-logins a:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('icons.png') no-repeat; /* Assume icons sprite */
    vertical-align: middle;
    margin-right: 10px;
}

/**
 * Google icon position.
 */
.ejs-google:before { background-position: 0 0; }

/**
 * Facebook icon position.
 */
.ejs-facebook:before { background-position: -20px 0; }

/**
 * Apple icon position.
 */
.ejs-apple:before { background-position: -40px 0; }

/**
 * Toggle links in login dropdown.
 */
.ejs-login-dropdown .ejs-toggle-forgot,
.ejs-login-dropdown .ejs-toggle-login,
.ejs-login-forms-container .ejs-toggle-forgot,
.ejs-login-forms-container .ejs-toggle-login {
    text-decoration: none;
    font-size: 14px;
    margin-left: auto;
}

/**
 * Mobile responsive styles
 */
@media (max-width: 480px) {
    /* Hide dropdowns on mobile and use modal instead */
    .ejs-sticky-footer-nav .ejs-login-dropdown,
    .ejs-sticky-footer-nav .ejs-register-dropdown {
        display: none !important;
    }
    
    /* Show modal overlay on mobile */
    .ejs-modal-overlay.show {
        display: flex !important;
    }
    
    /* Adjust modal content for mobile */
    .ejs-modal-content {
        max-height: calc(100vh - 40px);
    }
    
    /* Ensure modal forms have same styling */
    .ejs-modal-content .ejs-login-form,
    .ejs-modal-content .ejs-register-form,
    .ejs-modal-content .ejs-forgot-form,
    .ejs-modal-content .ejs-reset-form {
        display: flex;
        flex-direction: column;
    }
    
    .ejs-modal-content .ejs-login-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #e9e6ed;
        border-radius: 8px;
        font-size: 16px;
        transition: border-color 0.2s, box-shadow 0.2s;
        background-color: #fff;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    
    .ejs-modal-content .ejs-login-options,
    .ejs-modal-content .ejs-checkbox-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    
    .ejs-modal-content .ejs-login-button {
        background: #333;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
    }
    
    .ejs-modal-content .ejs-name-fields {
        display: flex;
        gap: 10px;
    }
    
    .ejs-modal-content .ejs-name-fields input {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
    }
    
    .ejs-modal-content p {
        text-align: center;
        margin: 10px 0;
		font-size: 15px;
    }
    
    .ejs-modal-content .ejs-back-to-login {
        text-align: center;
        margin: 10px;
		font-size: 15px;
    }
    
    .ejs-modal-content .ejs-forgot-form p {
        font-size: 14px;
    }
    
    .ejs-modal-content .ejs-register-form .ejs-success-message {
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        background: #dff0d8;
        color: #3c763d;
        border: 1px dashed #7e9968;
    }
}

/**
 * Tablet and larger - keep original dropdown behavior
 */
@media (min-width: 481px) {
    .ejs-modal-overlay {
        display: none !important;
    }
}