/**
 * MotionISO Custom Authentication Portal Styling
 * Version: 2.1.0 (Auth Portal Forms Styling Update)
 *
 * Styles for forms rendered by the [motioniso_auth_portal] shortcode (login, register, etc.)
 * and AJAX notices.
 */

/* --- General Portal Container --- */
.motioniso-auth-portal-container {
    max-width: 450px; /* Or your preferred max width */
    margin: 40px auto;
    padding: 0; /* Wrapper will handle padding */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

/* --- Form Wrapper (for each form like login, register) --- */
.motioniso-form-wrapper {
    background-color: #ffffff;
    padding: 30px 35px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.motioniso-form-wrapper h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: #333333;
    font-size: 22px;
    font-weight: 600;
}

/* --- Form Rows & Elements --- */
.motioniso-form .motioniso-form-row {
    margin-bottom: 18px;
}

.motioniso-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #444444;
}

.motioniso-form .motioniso-input,
.motioniso-form input[type="text"],
.motioniso-form input[type="email"],
.motioniso-form input[type="password"],
.motioniso-form input[type="number"],
.motioniso-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccd0d4; /* WordPress-like border */
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.motioniso-form .motioniso-input:focus,
.motioniso-form input[type="text"]:focus,
.motioniso-form input[type="email"]:focus,
.motioniso-form input[type="password"]:focus,
.motioniso-form input[type="number"]:focus,
.motioniso-form textarea:focus {
    border-color: #007cba; /* WordPress blue */
    box-shadow: 0 0 0 1px #007cba;
    outline: none;
}

.motioniso-form .motioniso-form-text {
    font-size: 0.875em; /* 12px if base is 14px */
    color: #666666;
    display: block;
    margin-top: 5px;
}

.motioniso-form .motioniso-required {
    color: #d9534f; /* A soft red */
    margin-left: 2px;
    font-weight: normal;
}

/* Description text within forms (e.g., for forgot password instructions) */
.motioniso-form-description {
    font-size: 0.95em;
    color: #555555;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: center;
}


/* --- Buttons --- */
.motioniso-form .motioniso-button,
.motioniso-form input[type="submit"] {
    width: 100%;
    padding: 10px 15px;
    background-color: #007cba; /* WordPress blue */
    color: white;
    border: 1px solid #007cba;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    line-height: 1.5;
}

.motioniso-form .motioniso-button:hover,
.motioniso-form input[type="submit"]:hover {
    background-color: #005a87; /* Darker WordPress blue */
    border-color: #005a87;
}

.motioniso-form .motioniso-button:disabled {
    background-color: #a0a5aa;
    border-color: #a0a5aa;
    cursor: not-allowed;
}


/* --- Form Links (e.g., "Create account", "Lost password?") --- */
.motioniso-form-links {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9em;
}

.motioniso-form-links a {
    color: #0073aa; /* WordPress link blue */
    text-decoration: none;
}

.motioniso-form-links a:hover {
    text-decoration: underline;
    color: #005a87;
}

.motioniso-form-links .motioniso-link-separator {
    margin: 0 8px;
    color: #777777;
}

/* --- Notices Styling (Kept from previous version, slightly adjusted for context) --- */
.motioniso-form-notices { /* This class is added by PHP before the form if notices exist */
    margin-bottom: 20px;
}

.motioniso-notice { /* General notice styling for all types */
    padding: 12px 18px;
    margin-bottom: 15px;
    border-radius: 4px;
    border-left-width: 4px;
    border-left-style: solid;
    font-size: 14px;
    line-height: 1.5;
}

.motioniso-notice p {
    margin: 0;
    padding: 0;
}

.motioniso-notice-error {
    background-color: #fbeaea; /* Lighter red */
    border-color: #d9534f;
    color: #a94442;
}

.motioniso-notice-success {
    background-color: #eaf7ea; /* Lighter green */
    border-color: #5cb85c;
    color: #3c763d;
}

.motioniso-notice-warning {
    background-color: #fcf8e3; /* Lighter yellow */
    border-color: #f0ad4e;
    color: #8a6d3b;
}

.motioniso-notice-info {
    background-color: #e7f3fe; /* Lighter blue */
    border-color: #5bc0de;
    color: #31708f;
}

/* --- Google Sign-In Section Styling --- */
.motioniso-google-signin-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.motioniso-or-divider { /* This is the OR divider between form and Google button */
    text-align: center;
    margin-bottom: 15px; /* Space above Google button */
    color: #777777;
    font-size: 0.9em;
    position: relative;
    line-height: 1; /* Ensure text is vertically centered with lines */
}

.motioniso-or-divider span {
    background-color: #ffffff; /* Match form wrapper background */
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.motioniso-or-divider::before,
.motioniso-or-divider::after { /* Added ::after for the right line */
    content: "";
    display: block;
    width: calc(50% - 25px); /* Adjust 25px based on span width/padding */
    height: 1px;
    background-color: #e0e0e0;
    position: absolute;
    top: 50%;
    z-index: 0;
}

.motioniso-or-divider::before {
    left: 0;
}

.motioniso-or-divider::after {
    right: 0;
}


.motioniso-google-button-container { /* This is the div where Google renders its button */
    display: flex;
    justify-content: center;
    margin-top: 10px; /* Space below "OR" */
}

/* Styling for the Google button itself is largely controlled by Google's library,
   but you can style the container. The GSI library button is rendered inside the div
   with id 'motioniso-google-signin-button-container' (or whatever is filtered).
   The class .g_id_signin is also applied by Google. */

.g_id_signin { /* Target Google's own class if needed, but be cautious */
    /* Example: if you want to ensure it's centered if its own width is less than container */
    /* margin: 0 auto !important; */ /* Use !important sparingly */
}


.motioniso-google-message-area .motioniso-notice {
    /* Notices specific to Google Sign-In can inherit general notice styles */
    text-align: left; /* Ensure messages are not centered if container is */
    margin-top: 15px; /* Space above Google AJAX messages */
}

/* --- reCAPTCHA v2 Checkbox Styling --- */
.motioniso-form .motioniso-recaptcha-v2-row {
    margin-bottom: 18px;
    display: flex; /* Added for centering */
    justify-content: center; /* Added for centering */
}

.motioniso-recaptcha-v2-container {
    /* The reCAPTCHA widget itself has a fixed size. 
       This container can be used to position it. */
    /* Example: transform: scale(0.9); transform-origin: 0 0; to make it smaller if needed */
}

/* --- Form Divider (used between Google Sign-In and regular form) --- */
/* This was in your PHP code, but better to style it here if it's a consistent element */
.motioniso-form-divider {
    text-align: center;
    margin: 20px 0; /* Adjust spacing as needed */
    color: #777777;
    font-size: 0.9em;
    position: relative;
    line-height: 1;
}

.motioniso-form-divider span {
    background-color: #ffffff; /* Match form wrapper background */
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.motioniso-form-divider::before,
.motioniso-form-divider::after {
    content: "";
    display: block;
    width: calc(50% - 25px); /* Adjust based on span width/padding */
    height: 1px;
    background-color: #e0e0e0;
    position: absolute;
    top: 50%;
    z-index: 0;
}

.motioniso-form-divider::before {
    left: 0;
}

.motioniso-form-divider::after {
    right: 0;
}