/* =============================================================================
   Maa Ki Rasoi — assets/css/auth.css
   Login & Forgot Password page styles
   ============================================================================= */

/* =============================================================================
   AUTH PAGE LAYOUT
   ============================================================================= */

.mkr-auth-page {
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Left hero panel */
.mkr-auth-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mkr-space-12);
    background: linear-gradient(
        135deg,
        hsl(218, 60%, 22%) 0%,
        hsl(218, 60%, 14%) 50%,
        hsl(25, 100%, 28%) 100%
    );
    position: relative;
    overflow: hidden;
}

.mkr-auth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(247, 95, 10, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.10) 0%, transparent 50%);
}

.mkr-auth-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 420px;
}

.mkr-auth-hero__illustration {
    font-size: 96px;
    margin-bottom: var(--mkr-space-6);
    animation: mkr-float 3s ease-in-out infinite;
}

@keyframes mkr-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

.mkr-auth-hero__title {
    font-size: var(--mkr-text-4xl);
    font-weight: var(--mkr-font-extrabold);
    color: white;
    line-height: var(--mkr-leading-tight);
    margin-bottom: var(--mkr-space-4);
}

.mkr-auth-hero__title span {
    color: var(--mkr-primary-300);
}

.mkr-auth-hero__tagline {
    font-size: var(--mkr-text-lg);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--mkr-leading-relaxed);
    margin-bottom: var(--mkr-space-8);
}

.mkr-auth-hero__features {
    display: flex;
    flex-direction: column;
    gap: var(--mkr-space-3);
    text-align: left;
}

.mkr-auth-hero__feature {
    display: flex;
    align-items: center;
    gap: var(--mkr-space-3);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--mkr-text-sm);
}

.mkr-auth-hero__feature-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--mkr-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Decorative blobs */
.mkr-auth-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    pointer-events: none;
}
.mkr-auth-hero__blob--1 {
    width: 400px;
    height: 400px;
    background: var(--mkr-primary-500);
    top: -100px;
    right: -100px;
}
.mkr-auth-hero__blob--2 {
    width: 300px;
    height: 300px;
    background: hsl(214, 100%, 60%);
    bottom: -80px;
    left: -80px;
}

/* =============================================================================
   AUTH FORM PANEL
   ============================================================================= */

.mkr-auth-panel {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mkr-space-12) var(--mkr-space-8);
    background: var(--mkr-bg);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .mkr-auth-hero {
        display: none;
    }
    .mkr-auth-panel {
        max-width: 100%;
        padding: var(--mkr-space-8) var(--mkr-space-6);
    }
}

/* =============================================================================
   LOGIN CARD (Glassmorphism)
   ============================================================================= */

.mkr-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--mkr-glass-bg);
    border: 1px solid var(--mkr-glass-border);
    backdrop-filter: var(--mkr-glass-blur);
    -webkit-backdrop-filter: var(--mkr-glass-blur);
    border-radius: var(--mkr-radius-2xl);
    box-shadow: var(--mkr-shadow-xl);
    overflow: hidden;
}

/* Auth card top accent bar */
.mkr-auth-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--mkr-primary-400), var(--mkr-primary-600), hsl(214,100%,60%));
}

.mkr-auth-card__body {
    padding: var(--mkr-space-8);
}

/* =============================================================================
   AUTH HEADER
   ============================================================================= */

.mkr-auth-header {
    text-align: center;
    margin-bottom: var(--mkr-space-8);
}

.mkr-auth-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--mkr-primary-500), var(--mkr-primary-600));
    border-radius: var(--mkr-radius-xl);
    font-size: 32px;
    margin-bottom: var(--mkr-space-4);
    box-shadow: 0 8px 24px rgba(247, 95, 10, 0.30);
}

.mkr-auth-header__title {
    font-size: var(--mkr-text-2xl);
    font-weight: var(--mkr-font-bold);
    color: var(--mkr-text-primary);
    margin-bottom: var(--mkr-space-2);
}

.mkr-auth-header__subtitle {
    font-size: var(--mkr-text-sm);
    color: var(--mkr-text-secondary);
}

/* =============================================================================
   AUTH FORM
   ============================================================================= */

.mkr-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--mkr-space-5);
}

.mkr-auth-form .mkr-form-group {
    margin-bottom: 0;
}

/* Remember Me + Forgot Password row */
.mkr-auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mkr-space-3);
}

.mkr-auth-form__forgot {
    font-size: var(--mkr-text-sm);
    color: var(--mkr-primary-500);
    text-decoration: none;
    white-space: nowrap;
}

.mkr-auth-form__forgot:hover {
    color: var(--mkr-primary-600);
    text-decoration: underline;
}

/* Submit button */
.mkr-auth-form .mkr-btn--primary {
    width: 100%;
    height: 48px;
    font-size: var(--mkr-text-base);
    font-weight: var(--mkr-font-semibold);
    border-radius: var(--mkr-radius-md);
    margin-top: var(--mkr-space-2);
    position: relative;
}

.mkr-auth-form .mkr-btn--primary .mkr-spinner {
    position: absolute;
    right: var(--mkr-space-4);
}

/* =============================================================================
   AUTH FOOTER
   ============================================================================= */

.mkr-auth-footer {
    text-align: center;
    padding: var(--mkr-space-5) var(--mkr-space-8);
    border-top: 1px solid var(--mkr-border);
    font-size: var(--mkr-text-sm);
    color: var(--mkr-text-secondary);
    background: var(--mkr-surface-hover);
}

/* =============================================================================
   STATUS / ERROR MESSAGES
   ============================================================================= */

.mkr-auth-error {
    display: flex;
    align-items: flex-start;
    gap: var(--mkr-space-2);
    padding: var(--mkr-space-3) var(--mkr-space-4);
    background: var(--mkr-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--mkr-radius);
    color: var(--mkr-danger-dark);
    font-size: var(--mkr-text-sm);
    animation: mkr-slide-down 0.2s ease;
}

.mkr-auth-success {
    display: flex;
    align-items: flex-start;
    gap: var(--mkr-space-2);
    padding: var(--mkr-space-3) var(--mkr-space-4);
    background: var(--mkr-success-light);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--mkr-radius);
    color: var(--mkr-success-dark);
    font-size: var(--mkr-text-sm);
    animation: mkr-slide-down 0.2s ease;
}

/* =============================================================================
   LOCKOUT NOTICE
   ============================================================================= */

.mkr-auth-locked {
    text-align: center;
    padding: var(--mkr-space-6);
    background: var(--mkr-danger-light);
    border: 1px solid var(--mkr-danger);
    border-radius: var(--mkr-radius-lg);
    color: var(--mkr-danger-dark);
}

.mkr-auth-locked__icon {
    font-size: 32px;
    margin-bottom: var(--mkr-space-3);
}

/* =============================================================================
   PASSWORD STRENGTH INDICATOR
   ============================================================================= */

.mkr-password-strength {
    display: flex;
    gap: 4px;
    margin-top: var(--mkr-space-2);
}

.mkr-password-strength__bar {
    flex: 1;
    height: 3px;
    border-radius: var(--mkr-radius-full);
    background: var(--mkr-border);
    transition: background 0.3s ease;
}

.mkr-password-strength--weak   .mkr-password-strength__bar:nth-child(1) { background: var(--mkr-danger); }
.mkr-password-strength--fair   .mkr-password-strength__bar:nth-child(-n+2) { background: var(--mkr-warning); }
.mkr-password-strength--good   .mkr-password-strength__bar:nth-child(-n+3) { background: var(--mkr-info); }
.mkr-password-strength--strong .mkr-password-strength__bar { background: var(--mkr-success); }

/* =============================================================================
   DARK MODE AUTH
   ============================================================================= */

[data-theme="dark"] .mkr-auth-page,
.dark-mode .mkr-auth-page {
    background: var(--mkr-bg);
}

[data-theme="dark"] .mkr-auth-panel,
.dark-mode .mkr-auth-panel {
    background: var(--mkr-bg);
}