/* Auth shared styles based on templates/test/index.html */
* { margin: 0; padding: 0; box-sizing: border-box; }

body.auth-body {
  --auth-input-bg: rgba(228,240,255,0.04);
  --auth-section-gap: 44px; /* tabs ↔ form, fields ↔ submit */
  --auth-field-gap: 12px;   /* spacing between fields */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background: conic-gradient(from 48.98deg at 46.24% 55.41%, #12181F 0deg, #1C2530 231.66deg, #12181F 360deg),
              radial-gradient(83.61% 83.61% at 77.59% 96.24%, #2D3B4E 0%, #12181F 50%, #172A40 100%);
  color: #fff;
}

.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1 0 auto; display: flex; justify-content: center; align-items: center; padding: 40px 20px; position: relative; }

.auth-container { width: 360px; display: flex; flex-direction: column; gap: 42px; z-index: 2; margin: 0 auto; }
.auth-banner { display: none; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 18px; }
.auth-banner.success { background: rgba(121,252,252,0.14); border: 1px solid rgba(121,252,252,0.35); color: #CFFFFF; }
.auth-banner.error { background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.35); color: #FFD6D6; }
.auth-header { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-title { font-size: 28px; font-weight: 500; line-height: 38px; text-align: center; color: #fff; }
.auth-subtitle { font-size: 14px; font-weight: 400; line-height: 19px; color: rgba(255,255,255,0.7); }
.auth-form { display: flex; flex-direction: column; gap: var(--auth-section-gap); }

.auth-tabs { display: flex; background: rgba(228,240,255,0.04); border-radius: 12px; padding: 4px; gap: 4px; }
.auth-tab { flex: 1; padding: 16px; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; }
.auth-tab.active { background: rgba(228,240,255,0.12); color: #fff; }
.auth-tab.inactive { color: rgba(255,255,255,0.7); font-weight: 400; }

.auth-fields { display: flex; flex-direction: column; gap: var(--auth-field-gap); }
.auth-view { display: none; }
.auth-view.active { display: flex; flex-direction: column; gap: var(--auth-field-gap); }
.auth-group { background: var(--auth-input-bg); border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.auth-label { font-size: 10px; line-height: 14px; color: rgba(255,255,255,0.7); }
.auth-input { font-size: 14px; line-height: 19px; color: #fff; background: none; border: none; outline: none; width: 100%; }
.auth-input::placeholder { color: rgba(255,255,255,0.7); }

/* Tame browser autofill (Chrome/Safari/Firefox) to match dark inputs */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important; /* match .auth-group bg */
  -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important;
  transition: background-color 9999s ease-in-out 0s; /* suppress yellow flash */
}
.auth-input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important;
  -moz-text-fill-color: #ffffff;
}
.auth-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
.auth-checkbox-wrap { display: flex; align-items: center; gap: 8px; }
.auth-checkbox { width: 18px; height: 18px; background: rgba(228,240,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; accent-color: #79FCFC; }
.auth-checkbox-label { font-size: 14px; line-height: 19px; color: #fff; }
.auth-forgot { font-size: 14px; font-weight: 500; line-height: 19px; color: rgba(228,240,255,0.7); text-decoration: none; cursor: pointer; }
.auth-submit { background: #79FCFC; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 20px; font-size: 14px; font-weight: 500; line-height: 19px; color: #000; cursor: pointer; transition: all .2s; width: 100%; }
.auth-view .auth-submit { margin-top: calc(var(--auth-section-gap) - var(--auth-field-gap)); }
.auth-submit:hover { background: #6BEBEB; }

.auth-logo-section { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; padding: 20px 0; }
.auth-logo { width: 130px; height: 20px; }
.auth-tagline { font-size: 12px; color: rgba(228,240,255,0.7); }

.auth-decoration.top-left { position: absolute; top: 0; left: 0; width: 70%; height: 70%; background-image: url('/images/auth/up.svg'); background-repeat: no-repeat; background-size: contain; background-position: top left; pointer-events: none; z-index: 1; }
.auth-decoration.bottom-right { position: absolute; bottom: 0; right: 0; width: 70%; height: 70%; background-image: url('/images/auth/down.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom right; pointer-events: none; z-index: 1; }

/* OTP specific */
.otp-wrapper { display: flex; justify-content: center; gap: 10px; }
.otp-input { width: 42px; height: 52px; text-align: center; font-size: 22px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: var(--auth-input-bg); color: #fff; outline: none; }
.otp-input:focus { border-color: #79FCFC; box-shadow: 0 0 0 2px rgba(121,252,252,0.2); }
.otp-invalid { border-color: #ff6b6b !important; }
.otp-error-text { color: #ff8787; margin-top: 6px; font-size: 13px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.auth-container { animation: fadeIn 1s ease-out; }

@media (max-width: 480px) {
  .auth-container { width: 320px; padding: 0 20px; }
  .auth-decoration.top-left, .auth-decoration.bottom-right { width: 150px; height: 150px; }
}

/* On very short viewports, allow the page to scroll naturally */
@media (max-height: 560px) {
  .auth-main { align-items: flex-start; padding-top: 24px; }
}