/* css/login.css */

/* --- Main layout for Login/Register page --- */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 600px 1fr; /* Custom 3-column layout */
    /* REMOVE THIS LINE, min-height is likely fighting with flex:1 and grid-template-rows:1fr */
    /* min-height: calc(100vh - 100px); */
    flex: 1; /* Allows it to grow and fill available space */
    /* IMPORTANT: Change align-items back to stretch (or remove it, as it's default for grid) */
    /* This makes the grid items (the panels) stretch vertically to fill the entire row height. */
    align-items: stretch;
    /* Also ensure grid-template-rows: 1fr; if it's not already, to make the row itself take full height */
    grid-template-rows: 1fr; /* Make sure this is present if it's not already */
}

/* --- Left Panel - Marketing Content --- */
.left-panel {
    background: linear-gradient(135deg, var(--green-secondary) 0%, var(--green-primary) 100%);
    padding: var(--spacing-2xl) var(--spacing-xl);
    color: var(--white);
    display: flex;
    flex-direction: column;
    /* IMPORTANT: Change justify-content to flex-start here. */
    /* This ensures the *content inside* the left panel aligns to the top of its now stretched container. */
    justify-content: flex-start;
    /* Remove height: 100%; here. The parent grid's align-items: stretch will handle the height. */
    /* height: 100%; */
}

.hero-content h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-xl);
    font-weight: 300;
}

.hero-content p {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
    opacity: 0.9;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-2xl);
    position: relative;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4ade80;
    font-weight: bold;
}

/* --- Form Section (Center Panel) --- */
.form-section {
    padding: 35px 60px; /* Keep this padding for internal spacing as desired */
    display: flex;
    flex-direction: column;
    /* IMPORTANT: Keep justify-content to flex-start here. */
    /* This ensures the *content inside* the center panel aligns to the top. */
    justify-content: flex-start;
    background: var(--white);
}

.form-header {
    text-align: center;
    margin: 0;
    padding: 0;
}

.tab-navigation {
    display: flex;
    border-bottom: 2px solid var(--gray-border);
    margin-bottom: var(--spacing-xl);
    justify-content: center;
}

.tab {
    padding: var(--spacing-md) var(--spacing-xl);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab:hover {
    color: var(--green-secondary);
}

.tab.active {
    color: var(--green-secondary);
    border-bottom-color: var(--green-secondary);
    font-weight: 600;
}

.form-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-dark);
}

.form-subtitle {
    color: var(--text-light);
    font-size: var(--font-size-base);
    margin-top: 0;
    margin-bottom: var(--spacing-2xl);
}

.form-message {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--border-radius);
    text-align: center;
    min-height: 20px;
    border: 2px dashed var(--gray-border);
    color: var(--text-light);
    font-size: var(--font-size-sm);
    background: var(--gray-light);
    display: none;
}

.form-content {
    display: block;
    justify-content: start;
}

.form-content.hidden {
    display: none;
}

.form-group {
    margin-bottom: 28px;
}

.required {
    color: #ef4444;
}

.password-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    padding: 4px;
    color: var(--text-light);
}

.password-toggle:hover {
    color: var(--text-medium);
}

.error-message {
    color: #ef4444;
    font-size: 13px;
    margin-top: var(--spacing-xs);
    min-height: 18px;
}

.help-text {
    color: var(--text-light);
    font-size: 13px;
    margin-top: var(--spacing-xs);
}

.link-text {
    text-align: right;
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.link-text a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
}

.link-text a:hover {
    text-decoration: underline;
}

.submit-btn {
    width: 100%;
    padding: 18px;
    background-color: #3b82f6;
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--spacing-md);
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #2563eb;
}

/* --- Right Panel - Trust Signals --- */
.right-panel {
    background: var(--secondary);
    padding: var(--spacing-2xl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    /* IMPORTANT: Change justify-content to flex-start here. */
    /* This ensures the *content inside* the right panel aligns to the top of its now stretched container. */
    justify-content: flex-start;
    /* Remove height: 100%; here. The parent grid's align-items: stretch will handle the height. */
    /* height: 100%; */
}

.security-badge {
    text-align: center;
    padding: 30px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-2xl);
}

.security-badge:last-child {
    margin-bottom: 0;
}

.security-badge h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: #059669;
    font-size: var(--font-size-lg);
}

.security-badge p {
    margin: 0;
    color: var(--text-light);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* --- Responsive design for Login/Register page --- */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        /* Ensure align-items is still stretch here for panels to fill height */
        align-items: stretch;
    }

    .left-panel,
    .right-panel {
        justify-content: flex-start; /* Keep content at top when stacked */
        height: auto; /* Remove explicit height 100% when stacked, content auto-sizes */
    }

    .form-section {
        padding: var(--spacing-2xl);
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .left-panel,
    .right-panel,
    .form-section {
        padding: var(--spacing-xl) var(--spacing-lg);
        height: auto; /* Ensure no explicit height 100% when stacked and smaller */
    }

    .hero-content h2 {
        font-size: var(--font-size-2xl);
    }

    .form-title {
        font-size: var(--font-size-2xl);
    }
}