/*
  TweetLife Auth UI (Login/Register) — Patch v1
  File: public_html/css/tl_auth.css

  Goal:
  - App-like auth screens (desktop 2-column + mobile simplified)
  - Works with TweetLife DS tokens/components (tl-btn, tl-input, etc.)
*/

/* ---------------------------------------------
   Background / scene
---------------------------------------------- */
.tl-auth-bg{
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(37, 188, 207, .12), transparent 60%),
    radial-gradient(900px 420px at 10% 110%, rgba(225, 186, 65, .12), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f8fafc 100%);
  min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* ---------------------------------------------
   Small primitives
---------------------------------------------- */

/* ---------------------------------------------
   OAuth button (Google)
---------------------------------------------- */
.tl-oauth-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.92);
  box-shadow: var(--tl-shadow-xs, 0 2px 10px rgba(2,6,23,.06));
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tl-oauth-btn:hover{
  background: rgba(255,255,255,.98);
  box-shadow: var(--tl-shadow-sm, 0 10px 25px rgba(2,6,23,.08));
  transform: translateY(-1px);
}
.tl-oauth-btn:active{ transform: translateY(0); }

.tl-oauth-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tl-oauth-chevron{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(2,6,23,.65);
  transform: rotate(180deg);
}

/* ---------------------------------------------
   Divider
---------------------------------------------- */
.tl-auth-divider{
  position: relative;
  height: 1px;
  background: rgba(148,163,184,.30);
}
.tl-auth-divider::after{
  content: "\0623 \0648 ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  padding: 0 10px;
  background: #fff;
  color: rgba(71,85,105,.9);
}

/* ---------------------------------------------
   Tabs
---------------------------------------------- */
.tl-auth-tabs{
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.85);
}

.tl-auth-tab{
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(51,65,85,.95);
  font-weight: 700;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tl-auth-tab[aria-selected="true"]{
  background: #fff;
  border-color: rgba(148,163,184,.30);
  box-shadow: 0 10px 25px rgba(2, 6, 23, .06);
  color: rgba(15,23,42,1);
}
.tl-auth-tab:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,188,207,.14);
}

/* ---------------------------------------------
   Step cards + alerts
---------------------------------------------- */
.tl-auth-stepCard{
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.70);
  padding: 16px;
}
@media (min-width: 640px){
  .tl-auth-stepCard{ padding: 18px; }
}

.tl-auth-stepTitle{
  font-weight: 800;
  color: rgba(15,23,42,1);
  font-size: 16px;
}
.tl-auth-stepText{
  margin-top: 6px;
  color: rgba(71,85,105,1);
  line-height: 1.95;
  font-size: 14px;
}

.tl-auth-alert{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.92);
  padding: 12px 14px;
  line-height: 1.9;
}
.tl-auth-alert--success{
  border-color: rgba(16,185,129,.22);
  background: rgba(16,185,129,.10);
  color: #065f46;
}
.tl-auth-alert--error{
  border-color: rgba(244,63,94,.24);
  background: rgba(244,63,94,.10);
  color: #9f1239;
}

/* Toast-only flash: keep node for JS but hide visually to avoid double messaging */
.tl-auth-alert--toastonly{
  display: none !important;
}

/* ---------------------------------------------
   OTP
---------------------------------------------- */
.tl-otp-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.tl-otp-input{
  width: 46px;
  height: 54px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(255,255,255,.96);
  outline: none;
  font-weight: 900;
  font-size: 18px;
  color: rgba(15,23,42,1);
  box-shadow: var(--tl-shadow-xs, 0 2px 10px rgba(2,6,23,.06));
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tl-otp-input:focus{
  border-color: rgba(37,188,207,.55);
  box-shadow: 0 0 0 4px rgba(37,188,207,.14);
  transform: translateY(-1px);
}
@media (max-width: 420px){
  .tl-otp-input{ width: 42px; height: 52px; }
}

/* ---------------------------------------------
   Password toggle (in-field button)
---------------------------------------------- */
.tl-pass-wrap{
  position: relative;
}
.tl-pass-input{
  padding-left: 76px; /* RTL: visually left = start? We'll keep neutral by absolute positioning below */
}
[dir="rtl"] .tl-pass-input{
  padding-left: 12px;
  padding-right: 76px;
}
.tl-pass-toggle{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.92);
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(30,41,59,.85);
  cursor: pointer;
}
[dir="rtl"] .tl-pass-toggle{
  left: auto;
  right: 10px;
}
.tl-pass-toggle:hover{ background: rgba(248,250,252,.95); }

/* ---------------------------------------------
   Toasts (app-like, dark)
   - Auth pages used to show a banner + toast; we now rely on the toast only.
   - Keep styles compatible with the global toast (ds/components.css).
---------------------------------------------- */
.tl-toast-host{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(
    var(--tl-bottom-nav-h, 0px)
    + var(--tl-adp-cta-h, 0px)
    + var(--tl-safe-bottom, 0px)
    + var(--tl-vv-bottom, 0px)
    + 14px
  );
  width: min(520px, calc(100vw - 24px));
  z-index: 9999;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.tl-toast{
  pointer-events: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.94);
  color: #fff;
  box-shadow: 0 18px 42px rgba(2,6,23,.28);
  backdrop-filter: blur(10px) saturate(120%);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: tlToastIn .18s ease-out;
}

.tl-toast .title{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
}

.tl-toast .msg{
  margin-top: 2px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 800;
}

.tl-toast .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  flex: 0 0 auto;
}

.tl-toast.tl-toast--info .dot{
  background: rgba(37,188,207,.95);
  box-shadow: 0 0 0 4px rgba(37,188,207,.16);
}

.tl-toast.is-error .dot{
  background: rgba(244,63,94,.92);
  box-shadow: 0 0 0 4px rgba(244,63,94,.18);
}

@keyframes tlToastIn{
  from{ transform: translateY(10px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Auth v2 — premium mobile-app style login
============================================================ */
.tl-auth-v2-page{background:#f5f8fc}
.tl-auth-v2-shell{max-width:1240px;margin:0 auto;padding:24px 14px 48px}
.tl-auth-v2-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(360px,.86fr);gap:18px;align-items:start}
.tl-auth-v2-card{position:relative;border-radius:34px;overflow:hidden;padding:24px;background:#fff;border:1px solid rgba(219,230,243,.95);box-shadow:0 18px 54px rgba(15,23,42,.08)}
.tl-auth-v2-card__head{display:block}
.tl-auth-v2-card__eyebrow{font-size:12px;font-weight:900;color:#3b82f6}
.tl-auth-v2-card__title{margin:6px 0 0;font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.12;font-weight:950;color:#0f172a}
.tl-auth-v2-card__copy{margin-top:8px;max-width:56ch;font-size:14px;line-height:1.95;color:#64748b}
.tl-auth-v2-back{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:18px;border:1px solid #dbe6f3;background:#f8fbff;color:#173e72;font-weight:900;text-decoration:none;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.tl-auth-v2-google-wrap{margin-top:20px}
.tl-auth-v2-google{min-height:58px;border-radius:22px}
.tl-auth-tabs{margin-top:18px}
.tl-auth-v2-step{margin-top:16px;border-radius:24px;border-color:#dbe6f3;background:#f8fbff}
.tl-auth-v2-inline-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.tl-auth-v2-footer{margin-top:20px;padding-top:18px;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tl-auth-v2-footer__register{display:grid;gap:4px;color:#64748b;font-size:14px}
.tl-auth-v2-footer__register strong{font-size:15px;color:#0f172a}

/* Mobile refinement */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  .tl-auth-v2-shell{max-width:680px;padding:14px 10px 26px}
  .tl-auth-v2-layout{grid-template-columns:1fr}
  .tl-auth-v2-card{padding:18px;border-radius:28px;min-height:0}
  .tl-auth-v2-card__head{display:block}
  .tl-auth-v2-back{margin-top:12px;width:100%}
  .tl-auth-v2-footer{display:block}
  .tl-auth-v2-footer .tl-btn{margin-top:12px;width:100%}
}
@media (max-width: 640px){
  .tl-auth-bg{background:linear-gradient(180deg,#f7faff 0%,#ffffff 52%,#f7faff 100%)}
  .tl-auth-v2-card{padding:16px}
  .tl-auth-v2-card__title{font-size:1.55rem}
  .tl-auth-v2-step{padding:14px}
}

.tl-auth-v2-page .site-header .container{max-width:1200px}
.tl-auth-v2-back{display:none !important}
@media ((min-width: 1024px) and (hover: hover) and (pointer: fine)), (min-width: 1367px){
  .tl-auth-v2-card{min-height:100%}
  .tl-auth-v2-card__title{max-width:18ch}
}
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  .tl-auth-bg{background:linear-gradient(180deg,#f6f9fd 0%,#ffffff 48%,#f6f9fd 100%)}
  .tl-auth-v2-card__title{font-size:1.9rem;line-height:1.16;max-width:none}
  .tl-auth-v2-card__copy{font-size:14px;line-height:1.85;max-width:none}
  .tl-auth-v2-google-wrap{margin-top:18px}
  .tl-auth-tabs{margin-top:16px}
}
@media (max-width: 640px){
  .tl-auth-v2-shell{padding:10px 8px 20px}
  .tl-auth-v2-card{padding:16px 14px;border-radius:24px;box-shadow:0 14px 32px rgba(15,23,42,.08)}
  .tl-auth-v2-card__title{font-size:1.65rem}
}