/* ==================== CSS VARIABLES ==================== */
:root {
    --color-yellow: #FFD900;
    --color-yellow-dark: #E6C200;
    --color-yellow-light: #FFF8D6;
    --color-yellow-glow: rgba(255, 217, 0, 0.4);
    --color-black: #0A0A0A;
    --color-white: #FFFFFF;
    
    --color-home: #FF9500;
    --color-home-light: #FFF4E6;
    --color-work: #3B82F6;
    --color-work-light: #EFF6FF;
    --color-vacation: #10B981;
    --color-vacation-light: #ECFDF5;
    --color-family: #8B5CF6;
    --color-family-light: #F5F3FF;
    
    --color-gray-900: #1A1A1A;
    --color-gray-800: #2D2D2D;
    --color-gray-700: #404040;
    --color-gray-600: #525252;
    --color-gray-500: #757575;
    --color-gray-400: #9CA3AF;
    --color-gray-300: #D1D5DB;
    --color-gray-200: #E5E7EB;
    --color-gray-100: #F3F4F6;
    --color-gray-50: #F9FAFB;
    
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-yellow: 0 8px 30px rgba(255, 217, 0, 0.4);
    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* ==================== RESET ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter Tight', -apple-system, sans-serif; background: var(--color-gray-50); color: var(--color-gray-900); line-height: 1.6; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

/* ==================== LAYOUT ==================== */
.login-page { display: flex; min-height: 100vh; }
.login-left { flex: 1; display: flex; flex-direction: column; padding: 2rem 3rem; }
.login-right { width: 50%; background: linear-gradient(135deg, var(--color-black) 0%, var(--color-gray-900) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* ==================== HEADER ==================== */
.login-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.logo { display: flex; align-items: center; gap: 0.625rem; font-size: 1.25rem; font-weight: 800; }
.logo-icon { width: 40px; height: 40px; background: var(--color-yellow); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.header-link { font-size: 0.875rem; color: var(--color-gray-500); transition: var(--transition-fast); }
.header-link:hover { color: var(--color-black); }

/* ==================== LOGIN CONTENT ==================== */
.login-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 480px; margin: 0 auto; width: 100%; }
.login-title { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.2; }
.login-subtitle { font-size: 1rem; color: var(--color-gray-600); margin-bottom: 2.5rem; }

/* ==================== LOGIN TYPE SELECTOR ==================== */
.login-type-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.login-type-card { padding: 1.5rem; border: 3px solid var(--color-gray-200); border-radius: var(--radius-xl); cursor: pointer; transition: var(--transition-base); position: relative; text-align: center; }
.login-type-card:hover { border-color: var(--color-gray-300); background: var(--color-gray-50); }
.login-type-card.active { border-color: var(--color-yellow); background: var(--color-yellow-light); }
.login-type-card.active.business { border-color: var(--color-work); background: var(--color-work-light); }
.login-type-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.login-type-card.client .login-type-icon { background: var(--color-yellow-light); }
.login-type-card.business .login-type-icon { background: var(--color-work-light); }
.login-type-card.active.client .login-type-icon { background: var(--color-yellow); }
.login-type-card.active.business .login-type-icon { background: var(--color-work); color: white; }
.login-type-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.login-type-desc { font-size: 0.8125rem; color: var(--color-gray-500); }
.login-type-radio { position: absolute; top: 1rem; right: 1rem; width: 20px; height: 20px; border: 2px solid var(--color-gray-300); border-radius: 50%; }
.login-type-card.active .login-type-radio { border-color: var(--color-yellow); background: var(--color-yellow); }
.login-type-card.active.business .login-type-radio { border-color: var(--color-work); background: var(--color-work); }
.login-type-card.active .login-type-radio::after { content: '✓'; color: var(--color-black); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; height: 100%; }
.login-type-card.active.business .login-type-radio::after { color: white; }

/* ==================== FORM ==================== */
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--color-gray-700); }
.form-input-wrapper { position: relative; }
.form-input { width: 100%; padding: 0.875rem 1rem; padding-left: 2.75rem; border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); font-size: 1rem; transition: var(--transition-fast); background: white; }
.form-input:focus { outline: none; border-color: var(--color-yellow); box-shadow: 0 0 0 4px var(--color-yellow-glow); }
.form-input.business-focus:focus { border-color: var(--color-work); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
.form-input::placeholder { color: var(--color-gray-400); }
.input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.125rem; color: var(--color-gray-400); }
.input-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.125rem; color: var(--color-gray-400); cursor: pointer; transition: var(--transition-fast); }
.input-toggle:hover { color: var(--color-gray-600); }
.form-row { display: flex; align-items: center; justify-content: space-between; }
.form-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.form-checkbox input { width: 18px; height: 18px; accent-color: var(--color-yellow); cursor: pointer; }
.form-checkbox span { font-size: 0.875rem; color: var(--color-gray-600); }
.form-link { font-size: 0.875rem; color: var(--color-work); font-weight: 500; transition: var(--transition-fast); }
.form-link:hover { color: var(--color-gray-900); text-decoration: underline; }

/* ==================== BUTTONS ==================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-lg); transition: var(--transition-fast); white-space: nowrap; }
.btn-primary { background: var(--color-yellow); color: var(--color-black); }
.btn-primary:hover { background: var(--color-yellow-dark); transform: translateY(-2px); box-shadow: var(--shadow-yellow); }
.btn-primary.business { background: var(--color-work); color: white; }
.btn-primary.business:hover { background: #2563eb; box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4); }
.btn-secondary { background: var(--color-white); color: var(--color-gray-700); border: 2px solid var(--color-gray-200); }
.btn-secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); }
.btn-block { width: 100%; }
.btn-large { padding: 1rem 1.5rem; font-size: 1.0625rem; }

/* ==================== DIVIDER ==================== */
.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.divider-line { flex: 1; height: 1px; background: var(--color-gray-200); }
.divider-text { font-size: 0.8125rem; color: var(--color-gray-400); font-weight: 500; }

/* ==================== SOCIAL LOGIN ==================== */
.social-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.btn-social { padding: 0.75rem 1rem; background: white; border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition-fast); }
.btn-social:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); }
.btn-social-icon { font-size: 1.25rem; }

/* ==================== FOOTER ==================== */
.login-footer { margin-top: 2rem; text-align: center; }
.login-footer p { font-size: 0.875rem; color: var(--color-gray-500); }
.login-footer a { color: var(--color-work); font-weight: 600; }
.login-footer a:hover { text-decoration: underline; }

/* ==================== RIGHT PANEL ==================== */
.login-right-content { position: relative; z-index: 10; text-align: center; color: white; padding: 3rem; max-width: 500px; }
.right-pattern { position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.right-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, var(--color-yellow) 0%, transparent 60%); opacity: 0.15; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.right-glow-2 { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--color-work) 0%, transparent 60%); opacity: 0.1; top: 20%; right: 10%; }
.right-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); font-size: 0.875rem; margin-bottom: 2rem; }
.right-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
.right-title .highlight { color: var(--color-yellow); }
.right-text { font-size: 1.0625rem; color: var(--color-gray-400); margin-bottom: 3rem; line-height: 1.7; }
.stats-row { display: flex; justify-content: center; gap: 3rem; margin-bottom: 3rem; }
.stat-item { text-align: center; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--color-yellow); line-height: 1; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.8125rem; color: var(--color-gray-400); }
.testimonial-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); padding: 1.5rem; text-align: left; }
.testimonial-text { font-size: 0.9375rem; color: var(--color-gray-300); line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 40px; height: 40px; background: var(--color-gray-700); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.testimonial-info h5 { font-size: 0.875rem; font-weight: 700; margin: 0; }
.testimonial-info span { font-size: 0.75rem; color: var(--color-gray-500); }

/* ==================== FEATURES LIST ==================== */
.features-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; text-align: left; }
.feature-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); }
.feature-icon { width: 36px; height: 36px; background: var(--color-yellow); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.feature-text { font-size: 0.9375rem; }

/* ==================== ANIMATIONS ==================== */
.fade-in { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .login-right { width: 45%; }
    .right-title { font-size: 2rem; }
}
@media (max-width: 1024px) {
    .login-right { display: none; }
    .login-left { padding: 1.5rem; }
}
@media (max-width: 768px) {
    .login-type-selector { grid-template-columns: 1fr; }
    .social-buttons { grid-template-columns: 1fr; }
    .login-title { font-size: 1.75rem; }
    .stats-row { flex-wrap: wrap; gap: 1.5rem; }
}
@media (max-width: 480px) {
    .login-left { padding: 1rem; }
    .form-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .login-header { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ==================== ALERTS ==================== */
.alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.alert-error {
    background: #FEE2E2;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.alert-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* ==================== FORM EXTRAS ==================== */
.form-hint {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: 0.375rem;
}

.form-checkbox a {
    color: var(--color-work);
}

.form-checkbox a:hover {
    text-decoration: underline;
}

/* ==================== PASSWORD STRENGTH ==================== */
.password-strength {
    margin-top: 0.5rem;
}

.password-strength-bar {
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.password-strength-fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.password-strength-fill.weak { width: 25%; background: var(--color-error); }
.password-strength-fill.fair { width: 50%; background: var(--color-warning); }
.password-strength-fill.good { width: 75%; background: var(--color-info); }
.password-strength-fill.strong { width: 100%; background: var(--color-success); }

.password-strength-text {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* ==================== BUTTON STATES ==================== */
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==================== SCROLLBAR ==================== */
.login-left {
    overflow-y: auto;
}

.login-left::-webkit-scrollbar {
    width: 6px;
}

.login-left::-webkit-scrollbar-track {
    background: transparent;
}

.login-left::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
}

.login-left::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}