:root {
    /* Your original accent color */
    --accent-color: #e66a00; 
    /* Placeholder for the purple color in the sample */
    --primary-color-purple: #5c0b8f; 
    --light-bg: #EDEDED; /* Changed to a slightly darker grey for the slider */
    --page-bg: #e5e5e5; /* New: Soft page background for better contrast */
    --form-bg: #FFFFFF;
    --text-color-dark: #333;
    --text-color-light: #666;
}

/* Global Reset (Ensures no default margin/padding) */
* {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* --- CRITICAL FIX: Ensure HTML and BODY have no default padding/margin --- */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* ----------------------------------------------------------------------- */

a {
    text-decoration: none;
    transition: color 0.3s ease;
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--page-bg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Container to hold Nav, Page Wrapper, and Footer */
.page-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Navigation Bar --- */
.top-nav {
    background-color: #0f1932; 
    padding: 15px 50px;
    width: 100%;
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 40px;
    height: auto;
}

.logo-text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}

.right-top-nav.home-link-center {
    display: flex;
    gap: 30px;
    align-items: center;
}

.btn-color {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
}

.btn-color:hover {
    color: var(--accent-color);
}
/* --- End Navigation Bar --- */


/* --- Main Content Area (Two-Column Layout) --- */
.page-wrapper {
    flex: 1;
    display: flex; 
    box-sizing: border-box;
    max-width: 1000px; 
    width: 90%;
    margin: 20px auto; 
    /* NEW: Add gap to separate the two columns (slider and form) */
    gap: 20px; 
    /* REMOVED: background-color & box-shadow. Now applied to inner divs */
    border-radius: 15px; 
    min-height: 600px;
}

/* Column division */
.image-slider-area, .form-area-div {
    flex: 1; 
    min-width: 50%;
}

/* --- LEFT COLUMN: Image Slider/Display Area (Darker Grey Background) --- */
.image-slider-area {
    background-color: var(--light-bg); /* Darker Grey background */
    border-radius: 15px; /* Rounded corners for the "card" look */
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; 
}

.slider-content {
    position: relative;
    width: 100%;
    height: 100%; 
    min-height: 400px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image-slides-wrapper {
    position: relative; 
    width: 100%;
    flex-grow: 1;
    margin-bottom: 20px;
}

.slide {
    display: none; 
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: absolute; 
    top: 0;
    left: 0;
}

.slide.active-slide {
    display: flex; 
    opacity: 1; 
}

.illustration-img {
    max-width: 100%;
    max-height: 250px; 
    height: auto;
    margin-bottom: 20px;
}

.slider-heading {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color-purple);
}

.slider-text {
    font-size: 0.95rem;
    color: var(--text-color-dark);
}

.slider-pagination {
    margin-top: 10px;
}
.slider-pagination .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 4px;
    transition: all 0.3s;
    cursor: pointer;
}
.slider-pagination .dot.active {
    background-color: var(--primary-color-purple);
    width: 20px; 
    border-radius: 4px;
}

/* --- Form Area (RIGHT COLUMN STYLES with Shadow) --- */
.form-area-div {
    background-color: var(--form-bg); /* Explicit white background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* NEW: Shadow for the form card */
    border-radius: 15px; /* Rounded corners for the "card" look */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px; 
}

.form-div {
    width: 100%;
    max-width: 350px;
    padding: 0;
    background-color: var(--form-bg);
    border-radius: 10px;
}

.app-logo-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.app-logo-mini .logo-img {
    width: 30px;
    height: auto;
}

.app-logo-mini .logo-text-form {
    color: var(--primary-color-purple);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 5px;
}

.small-heading {
    font-size: 1.8rem; 
    color: var(--text-color-dark);
}

.form-label {
    margin-bottom: .2rem;
    color: var(--text-color-dark);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Added specific style for the CAPTCHA wrapper to ensure margin is applied */
.captcha-wrapper {
    margin-bottom: 20px; 
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 10px; 
    padding: 12px 15px; 
    height: auto;
}

.create-btn, .btn-primary {
    background-color: var(--primary-color-purple);
    border: none;
    border-radius: 10px;
    display: block;
    color: #FFF;
    font-weight: 600; 
    padding: 12px 0;
    transition: background-color 0.3s;
}

.create-btn:hover, .btn-primary:hover {
    background-color: #4a0873; 
}

/* Adjustments for text and links */
.small-text, .copy {
    font-size: .8rem;
    color: var(--text-color-light);
}

.small-text a, .forgot-password {
    color: var(--primary-color-purple);
    font-weight: 600;
}

.small-text a:hover, .forgot-password:hover {
    color: var(--accent-color);
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color-light);
}

.policy-text {
    font-size: 0.75rem;
    margin-top: 20px;
    color: #aaa;
}

.policy-text a {
    color: #999;
    text-decoration: underline;
    font-size: 0.75rem;
}

/* --- Footer (Simple) --- */
.simple-footer {
    padding: 15px 0;
    width: 100%;
    text-align: center;
    background-color: #0f1932;
    color: white;
    margin-top: auto; 
}
.simple-footer .copy {
    color: #fff;
    font-size: 0.75rem;
}


/* --- Media Queries for Responsiveness (Tablet and Mobile) --- */
@media screen and (max-width: 992px) {
    /* Collapse to single column on tablet/mobile */
    .page-wrapper {
        flex-direction: column;
        width: 95%; 
        max-width: 500px;
        margin: 20px auto;
        gap: 0; /* Remove gap when stacked vertically */
        /* Re-introduce main card styling for single column view */
        background-color: var(--form-bg); 
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
        overflow: hidden;

        /* CRITICAL FIX: Allow content to dictate height, fixing bottom cutoff */
        min-height: auto; 
        /* CRITICAL FIX: Ensure vertical content overflow is possible */
        overflow-y: visible;
        overflow-x: hidden;
    }
    
    /* Ensure the form area has its shadow/background removed when on mobile */
    .form-area-div {
        background-color: transparent;
        box-shadow: none; 
        border-radius: 0;
        padding: 20px 0; 
        min-height: auto; 
    }

    .image-slider-area {
        display: none; /* HIDE SLIDER ON MOBILE/TABLET */
    }
    .form-div {
        max-width: 100%;
        padding: 0 20px; /* Add horizontal padding directly to the form content on mobile */
    }

    /* CAPTCHA Fix: Ensure the recaptcha element is centered and scaled if necessary */
    .captcha-wrapper-mobile {
        text-align: center;
        /* Padding to prevent captcha from hitting the screen edge */
        padding: 0 10px; 
    }
    /* If the CAPTCHA element is still too wide, we can use transformation to scale it down */
    .captcha-wrapper-mobile > center > div {
        transform-origin: center;
        max-width: 100%;
        margin: 0 auto !important; /* Force margin auto to center */
    }
    /* A quick and dirty fix for extremely narrow screens */
    @media (max-width: 320px) {
        .captcha-wrapper-mobile > center > div {
            transform: scale(0.85); /* Scales down the entire captcha block */
            margin: 0 auto !important;
        }
    }
}

@media screen and (max-width: 500px) {
    .top-nav {
        padding: 15px 15px;
    }
    .page-wrapper {
        /*
          The card styling (width: 95%; max-width: 500px; margin: 20px auto; 
          background-color: var(--form-bg); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          from the 992px block will now apply, giving the desired shadow/wrap.
        */
    }
    .form-area-div {
        padding: 20px;
    }
    .form-div {
        padding: 0;
    }
}