/* ==========================================================================
   Alternivite - Login / Auth Page (Glassmorphism)
   ========================================================================== */

/* Full-page background */
.auth-bg {
   position: fixed;
   inset: 0;
   z-index: -1;
   background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 25%, #ede9fe 50%, #fce7f3 75%, #e0f2fe 100%);
   background-size: 400% 400%;
   animation: authGradientShift 20s ease infinite;
}

[data-theme="dark"] .auth-bg {
   background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 25%, #1a0533 50%, #1c1917 75%, #0c1a2e 100%);
   background-size: 400% 400%;
}

@keyframes authGradientShift {
   0%, 100% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
}

/* Floating orbs */
.auth-orb {
   position: fixed;
   border-radius: 50%;
   filter: blur(80px);
   opacity: 0.5;
   pointer-events: none;
   z-index: -1;
}

.auth-orb--1 {
   width: 400px;
   height: 400px;
   top: -10%;
   left: -5%;
   background: var(--color-primary-300);
   animation: authOrbFloat1 25s ease-in-out infinite;
}

.auth-orb--2 {
   width: 350px;
   height: 350px;
   bottom: -10%;
   right: -5%;
   background: #c084fc;
   animation: authOrbFloat2 30s ease-in-out infinite;
}

.auth-orb--3 {
   width: 250px;
   height: 250px;
   top: 50%;
   left: 60%;
   background: #67e8f9;
   animation: authOrbFloat3 22s ease-in-out infinite;
}

[data-theme="dark"] .auth-orb--1 { opacity: 0.15; }
[data-theme="dark"] .auth-orb--2 { opacity: 0.15; }
[data-theme="dark"] .auth-orb--3 { opacity: 0.1; }

@keyframes authOrbFloat1 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(60px, 40px) scale(1.1); }
   66% { transform: translate(-30px, 60px) scale(0.95); }
}

@keyframes authOrbFloat2 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(-50px, -30px) scale(1.05); }
   66% { transform: translate(40px, -50px) scale(0.9); }
}

@keyframes authOrbFloat3 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50% { transform: translate(-40px, 30px) scale(1.15); }
}

/* Page layout */
.auth-page {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: var(--space-6) var(--space-4);
}

/* Glass card */
.auth-card {
   width: 100%;
   max-width: 440px;
   padding: var(--space-10) var(--space-8);
   background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: var(--radius-2xl, 24px);
   box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
   animation: authCardIn 0.6s ease-out;
}

[data-theme="dark"] .auth-card {
   background: rgba(30, 30, 50, 0.6);
   border-color: rgba(255, 255, 255, 0.08);
   box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@keyframes authCardIn {
   from {
      opacity: 0;
      transform: translateY(20px) scale(0.97);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Logo */
.auth-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-3);
   margin-bottom: var(--space-8);
   text-decoration: none;
}

.auth-logo-text {
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
}

/* Title */
.auth-title {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   text-align: center;
   margin-bottom: var(--space-2);
   line-height: var(--leading-tight);
}

.auth-subtitle {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   text-align: center;
   margin-bottom: var(--space-8);
   line-height: var(--leading-relaxed);
}

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

.auth-field {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.auth-label {
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-primary);
}

.auth-input {
   width: 100%;
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-base);
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-lg);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
   font-family: inherit;
}

[data-theme="dark"] .auth-input {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.1);
}

.auth-input::placeholder { color: var(--text-tertiary); }

.auth-input:focus {
   border-color: var(--color-primary-400);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
   background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .auth-input:focus {
   background: rgba(255, 255, 255, 0.1);
}

/* Remember me + Forgot row */
.auth-options {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.auth-remember {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   cursor: pointer;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   user-select: none;
}

.auth-remember input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: var(--color-primary-500);
   cursor: pointer;
   border-radius: 4px;
}

.auth-forgot {
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-primary-600);
   text-decoration: none;
}

[data-theme="dark"] .auth-forgot { color: var(--color-primary-400); }
.auth-forgot:hover { text-decoration: underline; }

/* Submit button */
.auth-submit {
   width: 100%;
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-base);
   font-weight: var(--font-semibold);
   color: white;
   background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
   border: none;
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
   font-family: inherit;
   position: relative;
   overflow: hidden;
}

.auth-submit::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500));
   opacity: 0;
   transition: opacity 0.2s;
}

.auth-submit:hover::before { opacity: 1; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

.auth-submit span {
   position: relative;
   z-index: 1;
}

/* Divider */
.auth-divider {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin: var(--space-6) 0;
   color: var(--text-tertiary);
   font-size: var(--text-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

.auth-divider::before,
.auth-divider::after {
   content: "";
   flex: 1;
   height: 1px;
   background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after {
   background: rgba(255, 255, 255, 0.08);
}

/* Social button */
.auth-social {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: background 0.2s, border-color 0.2s;
   font-family: inherit;
}

[data-theme="dark"] .auth-social {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1);
}

.auth-social:hover {
   background: rgba(255, 255, 255, 0.7);
   border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .auth-social:hover {
   background: rgba(255, 255, 255, 0.08);
}

.auth-social:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

/* Footer links */
.auth-footer {
   text-align: center;
   margin-top: var(--space-8);
   font-size: var(--text-sm);
   color: var(--text-secondary);
}

.auth-footer-link {
   font-weight: var(--font-medium);
   color: var(--color-primary-600);
   text-decoration: none;
}

[data-theme="dark"] .auth-footer-link { color: var(--color-primary-400); }
.auth-footer-link:hover { text-decoration: underline; }

/* Legal */
.auth-legal {
   text-align: center;
   margin-top: var(--space-6);
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   line-height: var(--leading-relaxed);
}

.auth-legal a {
   color: var(--text-secondary);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.auth-legal a:hover { color: var(--text-primary); }

/* Responsive */
@media (max-width: 480px) {
   .auth-card {
      padding: var(--space-8) var(--space-6);
      border-radius: var(--radius-xl);
   }
   .auth-title { font-size: var(--text-xl); }
   .auth-orb--1 { width: 250px; height: 250px; }
   .auth-orb--2 { width: 200px; height: 200px; }
   .auth-orb--3 { width: 150px; height: 150px; }
}