/* ==========================================================================
   TAANUS Login — Premium Pixel-Level Rebuild (BUD-04)
   Matches owner-approved reference: warm cream/mint watery botanical, large feathered illustration, premium card.
   Scoped to .auth-page only — does not affect homepage.
   ========================================================================== */

/* Page shell */
.auth-page{
  min-height:100vh;
  margin:0;
  background:#FFFDFA;
  font-family:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif;
}
.auth-page .taanus-watermark{opacity:.035}
.taanus-auth-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("../brand/taanus-watermark.svg");
  background-repeat:repeat;background-size:520px auto;
  opacity:.03;
}

/* Top outer bar — language pill left, back link right */
.auth-topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 24px;pointer-events:none;
}
.auth-topbar .auth-lang{position:static;pointer-events:auto}
.auth-topbar .auth-back-top{
  pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  color:#1A3C34;font-size:.88rem;font-weight:600;text-decoration:none;
  background:transparent;border:0;cursor:pointer;
}
.auth-topbar .auth-back-top svg{width:18px;height:18px;flex:0 0 18px}
.auth-topbar .auth-back-top:hover{color:#0F5B4E}

/* Split layout: 62-66% left, 34-38% right */
.auth-split{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(380px,0.92fr);
  min-height:100vh;
}
@media(min-width:1100px){
  .auth-split{grid-template-columns: minmax(0,1.66fr) minmax(380px, 0.88fr);}
}

/* LEFT — watery botanical */
.auth-story{
  position:relative;display:flex;flex-direction:column;
  gap:0;padding:78px 42px 28px;overflow:hidden;
  background:
    radial-gradient(circle at 12% 88%, rgba(127,174,150,.14), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(233,216,166,.24), transparent 34%),
    linear-gradient(180deg, #FFFEFC 0%, #FFF9F2 48%, #F6FBF1 82%, #EAF6EF 100%);
  border-inline-end:1px solid rgba(220,232,226,.55);
}
.auth-story::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../brand/taanus-watermark.svg");
  background-repeat:repeat;background-size:520px auto;
  opacity:.04;
}
.auth-story::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-8%;height:38%;
  background:
    radial-gradient(ellipse 80% 100% at 20% 100%, rgba(127,174,150,.18), transparent 62%),
    radial-gradient(ellipse 70% 90% at 85% 100%, rgba(233,216,166,.18), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(232,246,240,.55) 100%);
  border-radius:48% 52% 0 0;pointer-events:none;
}
.auth-story > *{position:relative;z-index:1}

/* Logo — natural, no white strip, preserves aspect */
.taanus-auth-brand{
  display:inline-flex;align-items:center;
  background:transparent;border-radius:0;padding:0;box-shadow:none;margin:0 0 6px;
}
.taanus-auth-logo{
  display:block;width:auto;max-width:210px;max-height:64px;height:auto;
  object-fit:contain;object-position:center;
}

/* Illustration — large, feathered */
.auth-story-illus{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  margin:10px 0 14px;padding:0;flex:0 0 auto;
}
.auth-story-illus .taanus-login-hero-img{
  display:block;width:min(100%,620px) !important;height:auto;max-width:620px;max-height:440px;
  object-fit:contain !important;object-position:center;
  border-radius:0;background:transparent;border:0;box-shadow:none;filter:none;
  -webkit-mask-image: radial-gradient(ellipse 88% 94% at 50% 46%, #000 62%, rgba(0,0,0,.98) 74%, rgba(0,0,0,.72) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 94% at 50% 46%, #000 62%, rgba(0,0,0,.98) 74%, rgba(0,0,0,.72) 86%, transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}

/* Copy below illustration */
.auth-story-copy{text-align:center;max-width:640px;margin:0 auto}
.auth-story-copy h2{
  margin:0;color:#0B2C24;font-size:clamp(1.55rem,2.1vw,1.95rem);font-weight:800;line-height:1.45;
}
.auth-story-copy h2 span{color:#0F5B4E}
.auth-story-copy p{
  margin:10px auto 0;color:#5B6F66;font-size:.92rem;line-height:1.9;max-width:52ch;
}

/* Trust row — 3 columns */
.auth-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:22px;max-width:640px;width:100%;align-self:center;
}
.trust-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:10px 6px;
}
.trust-icon{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid #E2EDE7;color:#0F5B4E;
  box-shadow:0 4px 14px rgba(16,55,44,.06);
}
.trust-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust-item strong{color:#0F2F26;font-size:.86rem;font-weight:800;line-height:1.4}
.trust-item span{color:#6E8378;font-size:.76rem;line-height:1.6}

/* RIGHT — light panel + premium card */
.auth-panel{
  display:flex;align-items:center;justify-content:center;
  padding:84px 28px 28px;background:#FFFEFC;
}
.auth-card{
  width:min(460px,100%);background:#FFFFFF;
  border:1px solid #E6EFE9;border-radius:28px;
  box-shadow:0 18px 48px rgba(16,55,44,.09);
  padding:28px 26px 22px;
}
.auth-card-icon{
  width:58px;height:58px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:#EAF6EF;border:1px solid #D8EAE0;color:#0F5B4E;
}
.auth-card-icon svg{width:24px;height:24px}
.auth-card h1{
  margin:0;color:#0F2F26;font-size:1.45rem;font-weight:800;text-align:center;
}
.auth-card .auth-subtitle{
  margin:6px 0 18px;color:#7A948A;font-size:.86rem;text-align:center;line-height:1.7;
}

/* Form */
.login-form{display:grid;gap:14px}
.form-group{display:grid;gap:6px}
.form-group label{font-size:.84rem;font-weight:700;color:#1F3D33}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .input-icon{
  position:absolute;inset-inline-start:12px;width:18px;height:18px;color:#7FAE96;pointer-events:none;
}
.input-wrap .form-control{
  width:100%;height:48px;padding:0 14px;padding-inline-start:38px;
  border:1px solid #E2EDE7;border-radius:12px;background:#FFFFFF;
  font-size:.92rem;color:#1A3C34;transition:border-color .2s,box-shadow .2s;
}
.input-wrap .form-control::placeholder{color:#9AB0A6}
.input-wrap .form-control:focus{
  outline:none;border-color:#7FAE96;box-shadow:0 0 0 3px rgba(127,174,150,.18);background:#FFFFFF;
}
.input-wrap.has-eye .form-control{padding-inline-end:40px}
.eye-btn{
  position:absolute;inset-inline-end:8px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#7FAE96;cursor:pointer;border-radius:8px;
}
.eye-btn:hover{background:#F1F8F4;color:#0F5B4E}
.eye-btn svg{width:18px;height:18px}

/* Remember / forgot row */
.form-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:2px;
}
.remember{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;color:#5B6F66;cursor:pointer;user-select:none;
}
.remember input{width:16px;height:16px;accent-color:#0F5B4E;border:1px solid #C8DAD2;border-radius:4px}
.forgot{font-size:.82rem;color:#0F5B4E;font-weight:600;text-decoration:none}
.forgot:hover{color:#0A3D36;text-decoration:underline}

/* Primary button */
.auth-card .btn-primary{
  width:100%;height:52px;border-radius:12px;border:0;
  background:#0F5B4E;color:#FFFFFF;font-size:.98rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 22px rgba(15,91,78,.18);cursor:pointer;transition:background .2s,transform .1s;
}
.auth-card .btn-primary:hover{background:#0A3D36}
.auth-card .btn-primary:active{transform:translateY(1px)}

/* Divider */
.auth-divider{
  position:relative;display:flex;align-items:center;justify-content:center;
  margin:16px 0;color:#8FA89E;font-size:.78rem;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:#E6EFE9;
}
.auth-divider span{padding:0 12px;background:#FFFFFF}

/* Back link as outline button */
.auth-back{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:44px;border:1px solid #C8DAD2;border-radius:12px;
  background:#FFFFFF;color:#1A3C34;font-size:.88rem;font-weight:700;text-decoration:none;
  transition:border-color .2s,background .2s;
}
.auth-back:hover{background:#F6FBF7;border-color:#7FAE96;color:#0F5B4E}
.auth-back svg{width:18px;height:18px}

/* Alerts */
.auth-card .alert{border-radius:12px;padding:.8rem 1rem;font-size:.86rem}

/* RTL/LTR adjustments */
html[dir="ltr"] .auth-story-copy{direction:ltr}
html[dir="ltr"] .trust-item{ direction:ltr }
html[dir="ltr"] .auth-card{ direction:ltr }
html[dir="rtl"] .auth-card{ direction:rtl }

/* Responsive */
@media(max-width:1024px){
  .auth-split{grid-template-columns:minmax(0,1.4fr) minmax(360px,.9fr)}
  .auth-story{padding:78px 28px 24px}
}
@media(max-width:940px){
  .auth-split{grid-template-columns:1fr;min-height:auto}
  .auth-story{order:2;padding:24px 20px 28px;gap:12px;border-inline-end:0;border-top:1px solid rgba(220,232,226,.6)}
  .auth-story-illus .taanus-login-hero-img{width:min(88%,520px) !important;max-height:360px}
  .auth-panel{order:1;padding:78px 16px 20px}
  .auth-card{padding:24px 20px 20px}
  .auth-trust{gap:12px}
}
@media(max-width:560px){
  .auth-topbar{padding:12px 14px}
  .auth-story{padding:20px 14px 24px}
  .auth-story-illus .taanus-login-hero-img{width:min(96%,360px) !important;max-height:300px}
  .auth-story-copy h2{font-size:1.35rem}
  .auth-story-copy p{font-size:.84rem}
  .auth-trust{grid-template-columns:1fr;gap:10px;text-align:start}
  .trust-item{flex-direction:row;text-align:start;gap:12px;padding:8px 10px;background:#FFFFFF;border:1px solid #E6EFE9;border-radius:14px}
  .trust-item strong,.trust-item span{text-align:start}
  .auth-card{border-radius:22px}
}