/* src/app/auth.css */

/* Page Wrapper */
.auth-page-wrapper {
    min-height: 100vh;
    background-color: #f6f9ff;
    /* Solid Blue Background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

/* Auth Card */
.auth-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    padding: 50px 40px;
}

/* Card Header */
.auth-card-header {
    margin-bottom: 40px;
    text-align: left;
    /* Image shows left aligned title */
}

/* Title with Accent */
.auth-title {
    font-weight: 800;
    font-size: 2rem;
    color: #333;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
}

/* Blue underline accent under the start of the title */
.auth-title::after {
    content: '';
    position: absolute;
    bottom: 5px;
    /* Adjust position */
    left: 0;
    width: 40px;
    /* Width of the accent */
    height: 4px;
    background-color: #3b82f6;
    border-radius: 2px;
}

/* Form Controls */
.auth-form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    /* Underline style in some variants, or border? Image looks like full border but clean. Let's stick to full border for better UX unless strictly underlined requested. Image description says "Enter your name" with icon. let's go with a clean full border but minimal. */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2px 5px;
    transition: all 0.2s;
    background-color: #ffffff;
}

.auth-input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Input Icon */
.auth-input-icon {
    color: #9ca3af;
    margin-left: 10px;
    width: 20px;
    height: 20px;
}

.auth-input {
    width: 100%;
    padding: 14px 12px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    background-color: transparent;
    color: #333;
}

.auth-input:focus {
    outline: none;
}

.auth-input::placeholder {
    color: #9ca3af;
}

/* Password Toggle */
.auth-password-toggle {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.auth-password-toggle:hover {
    color: #6b7280;
}

/* Helper Links & Checkbox */
.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: #666;
}

/* Custom Checkbox */
.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #9ca3af;
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.auth-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.auth-checkbox:checked::after {
    content: '✓';
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
}

.auth-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

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

/* Buttons */
.btn-auth {
    width: 100%;
    padding: 16px;
    background-color: #3b82f6;
    /* Solid Blue */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.25);
}

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

.btn-auth:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Footer Link */
.auth-footer-link {
    margin-top: 25px;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}