/* In your CSS file (e.g., static/css/style.css) */

html, body, #wrapper {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--dark-text);
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-size: 0.85rem;
}
:root {
    --primary-purple: #6800A5 ; /* Darker purple color */
    --light-purple: #f3e5f5;
    --dark-text: #212529;
    --light-text: #6a6b6cab;
    --grey-text: #1e1f20ab;
    --bg-color: #FEFDFF ;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e9ecef;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    
}



html, body, #wrapper {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--dark-text);
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-size: 0.85rem;
}

#wrapper {
    display: flex;
}



body:has(.auth-container) {
  background-color: #fff; /* White background for the right panel */
  overflow: hidden;
}

/* ==========================================================================
    Authentication Page Styles (Login, Sign Up, etc.)
    ========================================================================== */
.auth-container {
    width: 100vw;
    height: 100vh;
}
.auth-container > .row {
    height: 100%;
    display: flex;
   margin: 0; 
   overflow: hidden;
}

/* --- Left Promotional Panel --- */

/* This is the "frame". It has padding on all 4 sides. */
.auth-promo-panel {
    background-color: #fff; /* The grey frame color */
    /* THIS IS THE FIX: Padding is now applied to ALL FOUR sides. */
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 6rem;
    padding-right: 6rem;
    /* --- MODIFICATION START --- */
    /* Set fixed width and height */
    max-width: 500px; /* Example fixed width, adjust as needed */
    height: 100vh; /* Make it take the full viewport height */
    flex-shrink: 0; /* Prevent it from shrinking */
    overflow: hidden;
    /* --- MODIFICATION END --- */
}

/* This is the pink "card" that sits inside the frame */
.promo-panel-wrapper {
    /* inset the card by 2rem on all sides */
    margin: 2rem;

    /* subtract the margins from its full size */
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);

    /* the rest of your existing rules remain unchanged */
    background-color: #E17575;
    color: #fff;
    padding: 4rem;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}



.logo-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.logo-text img {
    filter: brightness(0) invert(1);
    margin: 0 0.05em;
    transform: translateY(-0.05em);
}
h1.logo-text img {
    height: 0.8em;
}
.logo-header .logo-text img {
    height: 1.1em;
}

.logo-header {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
    font-weight: 600;
    font-size: 1.1rem;
}

.promo-img-bg-ball {
    position: absolute;
    z-index: 1;
    left: -90px;
    top: 65%;
    transform: translateY(-50%);
    height: 70%;
    opacity: 1;
}

.promo-img-person {
    position: absolute;
    z-index: 2;
    /* Adjust these values to move it right and ensure proper overlap */
    right: -39px; /* Moved further right, adjust as needed */
    bottom: 0;
    max-height: 60%;
    object-fit: contain;
    /* Add transform to fine-tune horizontal position without affecting `right` */
    transform: translateX(10px); /* Adjust to move it more to the right */
}

.promo-content {
    position: relative;
    z-index: 3;
    /* THIS IS THE KEY CHANGE TO MOVE TEXT/LOGO UPWARDS */
    margin-top: -3rem; /* Adjust this value (e.g., -2rem, -4rem) to move it up */
    margin-bottom: 7rem; /* Keep this if you want space below the text */
}

.promo-content h1 {
    font-weight: 700;
    margin-bottom: 0.8rem; /* Slightly reduce space below the H1 if needed */
}

.promo-content .lead {
    font-size: 1.05rem; /* Slightly reduced font size for lead text */
    font-weight: 400;
    line-height: 1.5; /* Slightly reduced line height for lead text */
    max-width: 400px;
}

/* --- Right Login Form Panel --- */
.auth-form-panel {
    padding: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Allow the form panel to grow and take remaining space */
    flex-grow: 1;
    overflow-y: auto; 
    height: 100vh;
    flex-direction: column;
}

.auth-form-panel .form-content {
    width: 100%;
    max-width: 400px;
    margin-top: 0;
     margin-bottom: auto;
      margin-top: 2rem;
}

.form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #171a1c;
}
.form-label {
    font-weight: 400;
    color:var(--dark-text);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.form-control {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    height: 40px;
     font-size: 0.8rem;
}
.form-control:focus {
    border-color: #6C2BD9;
    box-shadow: 0 0 0 0.25rem rgba(108, 43, 217, 0.2);
}
.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
.form-check-input {
    border-color: #ced4da;
    margin-top: 0.2em;
}
.form-check-input:checked {
    background-color: #D65A7C;
    border-color: #D65A7C;
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(214, 90, 124, 0.25);
}
.form-check-label {
    font-weight: 300;
    font-size: 0.8rem;
}
.input-group-text {
    cursor: pointer;
    font-size: 0.8rem;
}
.forgot-password-link, .signup-link {
    color: #6C2BD9;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.85rem;
}
.forgot-password-link:hover, .signup-link:hover {
    text-decoration: underline;
}
.btn-login {
    background: linear-gradient(to right, #8A2BE2, #6C2BD9);
    color: #fff;
    border: none;
    padding: 0.8rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}
.btn-login:hover {
    background: linear-gradient(to right, #7b25c9, #5e24bc);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(108, 43, 217, 0.3);
    color: #fff;
}
.btn-google {
    background-color: #fff;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 0.8rem 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
}
.btn-google:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}
.btn-google img {
    vertical-align: text-bottom;
}
.or-separator {
    text-align: center;
    color: #adb5bd;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Example for a specific form, assuming your form has an ID like 'my-form' */
#my-form .form-label {
    font-size: 0.85rem;
}

/* Or if you want to target all form-labels globally (use with caution) */
.form-label {
    font-size: 0.85rem;
}
/* In your style.css file or within <style> tags in your HTML */
.form-select {
    font-size: 0.85rem; /* This will affect the selected value and the dropdown options */
}
.or-separator::before,
.or-separator::after {
    content: '';
    flex-grow: 1;
    background-color: #e9ecef;
    height: 1px;
    margin: 0 1rem;
}
     /* Basic styling for messages */
        .message-box {
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            text-align: center;
        }
        .message-box.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message-box.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        /* Hide elements by default, JavaScript will show them */
        .hidden {
            display: none !important;
        }
        /* Style for OTP input fields as per design */
        .otp-input-group {
            display: flex;
            justify-content: center;
            gap: 10px; /* Space between OTP boxes */
            margin-bottom: 1.5rem;
        }
        .otp-input-group input {
            text-align: center;
            font-size: 1.8rem; /* Larger font for OTP */
            width: 50px; /* Fixed width for each box */
            height: 50px; /* Fixed height for each box */
            border: 1px solid #ced4da;
            border-radius: 8px; /* Slightly rounded corners */
            box-shadow: none; /* Remove default input shadow */
            /* -moz-appearance: textfield; Hide arrows on Firefox */
        }
        /* Hide arrows on Chrome, Safari, Edge, Opera */
        .otp-input-group input::-webkit-outer-spin-button,
        .otp-input-group input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Success page specific styles */
        .success-icon-container {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .success-icon {
            width: 80px; /* Size of the checkmark */
            height: 80px;
            color: #28a745; /* Green color for the checkmark */
            border: 4px solid #28a745;
            border-radius: 50%;
            padding: 10px;
        }
        .success-icon svg {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }