/* =========================================================
   Timothy Academy — Brand stylesheet
   Colors from Bible Society in Syria Brand Guide v1
   ========================================================= */

:root{
  --blue-20:  #D3E4F7;
  --blue-40:  #A7C9ED;
  --blue-60:  #7BAEE3;
  --blue-80:  #4F92CE;
  --blue-100: #0077CC;
  --blue-120: #005797;
  --blue-140: #003865;
  --blue-160: #001C37;

  --orange-20:  #FFF5DC;
  --orange-40:  #FFEAB8;
  --orange-60:  #FFDF92;
  --orange-80:  #FFD366;
  --orange-100: #FAA61A;
  --orange-120: #BE9314;

  --bg:      #F7FAFD;
  --surface: #FFFFFF;
  --line:    #E4EDF7;
  --text:    #0E1E2E;
  --muted:   #6B7C90;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow-md: 0 8px 24px rgba(0,56,101,.08);
  --shadow-lg: 0 24px 60px rgba(0,56,101,.15);

  --font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* =========================================================
   Auth layout
   ========================================================= */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
}

.auth-brand{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 0%,
      var(--blue-100) 0%,
      var(--blue-120) 45%,
      var(--blue-140) 100%);
  color:#fff;
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.auth-brand .pattern{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
}
.auth-brand .pattern span{
  position:absolute;
  display:block;
  border-radius:50%;
  background:var(--blue-80);
  opacity:.35;
}
.auth-brand .pattern span.sq { border-radius:14px; }
.auth-brand .pattern span.dia{ border-radius:10px; transform:rotate(45deg); }
.auth-brand .pattern span.pill{ border-radius:999px; }

.auth-brand .pattern span:nth-child(1){ width:180px; height:180px; left:-40px;  top:60px; }
.auth-brand .pattern span:nth-child(2){ width:120px; height:120px; right:60px;  top:120px; border-radius:24px; }
.auth-brand .pattern span:nth-child(3){ width:90px;  height:90px;  left:120px;  bottom:180px; transform:rotate(45deg); border-radius:14px; }
.auth-brand .pattern span:nth-child(4){ width:220px; height:220px; right:-60px; bottom:-60px; }
.auth-brand .pattern span:nth-child(5){ width:70px;  height:140px; left:-20px;  bottom:40px; border-radius:999px; }
.auth-brand .pattern span:nth-child(6){ width:60px;  height:60px;  right:180px; bottom:220px; }

.auth-brand__top,
.auth-brand__bottom{ position:relative; z-index:2; }

.brand-mark{
  display:flex;
  align-items:center;
  gap:16px;
}

/* white circle behind the logo */
.brand-mark__logo{
  width:128px;
  height:128px;
  flex:0 0 128px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  padding:18px;
  box-shadow:0 10px 28px rgba(0,28,55,.30);
}

/* fallback: bare <img> directly inside .brand-mark (older markup) */
.brand-mark img{
  width:auto;
  height:56px;
  max-width:220px;
  object-fit:contain;
}

/* logo inside the white circle (declared after the fallback so it wins) */
.brand-mark__logo img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  display:block;
}

.brand-mark--image-only .brand-mark__text{ display:none; }
.brand-mark__text{ line-height:1.2; }
.brand-mark__text strong{
  display:block; font-size:18px; font-weight:800; letter-spacing:.2px;
}
.brand-mark__text small{
  display:block; font-size:12px; color:var(--blue-40); margin-top:2px;
}

.auth-brand h1{
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.25;
  font-weight:800;
  margin:32px 0 12px;
  max-width:14ch;
}
.auth-brand p.lead{
  font-size:17px;
  color:var(--blue-20);
  max-width:38ch;
  margin:0;
}

.auth-brand__bottom .tags{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:auto;
}
.tag{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:500;
  backdrop-filter: blur(6px);
}
.tag .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--orange-100); margin-inline-end:8px; vertical-align:middle;
}
.auth-brand__bottom .copy{
  margin-top:24px;
  color:var(--blue-40);
  font-size:12.5px;
}

.auth-form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px;
  background:var(--surface);
}

.auth-card{
  width:100%;
  max-width:420px;
  animation: rise .5s ease both;
}
.auth-card--wide{ max-width:460px; }
@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}

.auth-card__logo{ display:none; }

.auth-card h2{
  font-size:30px;
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:-.2px;
}
.auth-card .sub{
  color:var(--muted);
  margin:0 0 28px;
  font-size:15px;
}

.alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  font-size:14px;
  margin-bottom:18px;
  border:1px solid transparent;
}
.alert svg{ flex:0 0 18px; margin-top:2px; }
.alert--error{
  background:#FFF1F1; border-color:#FAD1D1; color:#9B1C1C;
}
.alert--success{
  background:var(--orange-20); border-color:var(--orange-40); color:#7A4A00;
}

.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:7px;
  color:#25384B;
}
.input{ position:relative; }
.input svg.lead{
  position:absolute; inset-inline-start:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--muted);
  pointer-events:none;
}
.input input{
  width:100%;
  padding:13px 44px 13px 44px;
  border:1.5px solid var(--line);
  background:#FBFDFF;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  transition:border-color .15s, background .15s, box-shadow .15s;
  outline:none;
}
.input input::placeholder{ color:#9DAEC1; }
.input input:hover{ border-color:var(--blue-40); }
.input input:focus{
  border-color:var(--blue-100);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,119,204,.12);
}

.toggle-pass{
  position:absolute; inset-inline-end:8px; top:50%;
  transform:translateY(-50%);
  width:32px; height:32px;
  border:none; background:transparent;
  border-radius:8px;
  color:var(--muted);
  display:grid; place-items:center;
}
.toggle-pass:hover{ background:var(--blue-20); color:var(--blue-120); }

.row-between{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 22px;
  font-size:13.5px;
}
.check{
  display:inline-flex; align-items:center; gap:8px;
  color:#3A5068; cursor:pointer; user-select:none;
}
.check input{
  appearance:none; width:16px; height:16px;
  border:1.5px solid var(--blue-40); border-radius:4px;
  background:#fff; cursor:pointer; position:relative;
  transition:background .15s, border-color .15s;
}
.check input:checked{ background:var(--blue-100); border-color:var(--blue-100); }
.check input:checked::after{
  content:''; position:absolute; left:4px; top:1px;
  width:5px; height:9px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
.link-muted{ color:var(--blue-120); font-weight:600; }
.link-muted:hover{ color:var(--blue-100); text-decoration:underline; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  width:100%;
  padding:14px 18px;
  border:none;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15.5px;
  font-weight:700;
  transition:transform .06s, box-shadow .15s, background .15s;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:var(--blue-100);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,119,204,.28);
}
.btn--primary:hover{ background:var(--blue-120); }

.btn--accent{
  background:var(--orange-100);
  color:#3A2500;
  box-shadow:0 8px 20px rgba(250,166,26,.35);
}
.btn--accent:hover{ background:var(--orange-80); }

.divider{
  display:flex; align-items:center; gap:14px;
  color:#9DAEC1; font-size:12.5px;
  margin:26px 0 18px;
}
.divider::before,.divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.register-cta{
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.register-cta a{
  color:var(--blue-100);
  font-weight:700;
  margin-inline-start:4px;
}
.register-cta a:hover{ text-decoration:underline; }

/* =========================================================
   Password strength + requirements
   ========================================================= */
.strength{
  display:flex; gap:5px; margin-top:10px;
}
.strength span{
  flex:1; height:5px; border-radius:999px;
  background:var(--line); transition:background .2s;
}
.strength[data-score="1"] span:nth-child(-n+1){ background:#E5484D; }
.strength[data-score="2"] span:nth-child(-n+2){ background:var(--orange-100); }
.strength[data-score="3"] span:nth-child(-n+3){ background:var(--blue-80); }
.strength[data-score="4"] span{ background:#2E7D32; }

.strength-label{
  font-size:12px; margin-top:6px; color:var(--muted);
  min-height:16px;
}

.reqs{
  list-style:none; padding:0; margin:14px 0 0;
  display:grid; gap:6px;
  font-size:13px; color:var(--muted);
}
.reqs li{
  display:flex; align-items:center; gap:8px;
  position:relative;
}
.reqs li::before{
  content:'';
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--line);
  background:#fff;
  flex:0 0 14px;
  transition:background .15s, border-color .15s;
}
.reqs li.ok{ color:#1B5E20; }
.reqs li.ok::before{
  background:#2E7D32; border-color:#2E7D32;
}
.reqs li.ok::after{
  content:'';
  position:absolute;
  inset-inline-start:5px;
  top:3px;
  width:4px; height:8px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg);
  pointer-events:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-brand{ display:none; }

  .auth-form-wrap{
    padding:32px 20px;
    background:
      linear-gradient(180deg, var(--blue-20) 0%, var(--surface) 40%);
  }
  .auth-card__logo{
    display:flex;
    justify-content:center;
    align-items:center;
    width:128px;
    height:128px;
    margin:0 auto 22px;
    border-radius:50%;
    background:#fff;
    padding:20px;
    box-shadow:0 8px 24px rgba(0,56,101,.15);
  }
  .auth-card__logo img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
  }
  .auth-card{ text-align:start; }
  .auth-card h2{ font-size:26px; }
}