/* RESET & FONTS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body,
html {
    height: 100%;
    width: 100%;
}

/* LAYOUT */
.split-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* LEFT PANEL (BRANDING) */
.left-panel {
    flex: 1;
    background-color: #0f172a;
    /* CRIEE Dark Blue */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.brand-wrapper {
    width: 100%;
    max-width: 400px;
}

.main-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* RIGHT PANEL (FORM) */
.right-panel {
    flex: 1;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    overflow-y: auto;
}

.form-content {
    width: 100%;
    max-width: 480px;
}

.form-content h2 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.highlight-text {
    color: #3b82f6;
    /* CRIEE Blue Accent */
    font-weight: 700;
}

.form-subtitle {
    color: #64748b;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* FORM STYLES */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
    color: #334155;
}

.input-group input:focus,
.input-group select:focus {
    border-color: #3b82f6;
}

.input-group input::placeholder {
    color: #94a3b8;
}

/* Radio Group */
.radio-group-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

.label-interest {
    display: block;
    margin-bottom: 10px;
    color: #475569;
    font-weight: 500;
    font-size: 0.9rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.radio-option input[type="radio"] {
    accent-color: #3b82f6;
    width: 18px;
    height: 18px;
}

.radio-option label {
    color: #475569;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Button */
.btn-submit {
    background-color: #3b82f6;
    /* CRIEE Blue */
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}

/* Privacy */
.privacy-note {
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 10px;
}

.privacy-note a {
    color: #22c55e;
    /* Green for privacy link (optional, or keep blue) - keeping green as per reference usually, but sticking to brand blue? Reference had green. Let's start with matching reference green text? No, user said blue. I'll make it blue here too or maybe green to distinct. */
    text-decoration: none;
    font-weight: 600;
}

.privacy-note a {
    color: #3b82f6;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .split-container {
        flex-direction: column;
        height: auto;
    }

    .left-panel {
        padding: 60px 20px;
    }

    .brand-wrapper {
        max-width: 200px;
    }

    .right-panel {
        padding: 40px 20px;
    }
}