/* ═══════════════════════════════════════════════════════════
   auth5.css — ظاهر صفحه‌های ورود، ثبت‌نام و بازیابی رمز
   هم‌خانواده‌ی صفحه‌ی اصلی home5.

   هیچ ساختاری را عوض نمی‌کند؛ فقط روی کلاس‌های موجود
   می‌نشیند. برای برگشت، کافی است خط <link> این فایل را از
   resources/views/layouts/auth.blade.php برداری.
   ═══════════════════════════════════════════════════════════ */

:root{
  --a-navy:#0F1B33; --a-navy-2:#16233D;
  --a-paper:#F4F5F8; --a-white:#fff;
  --a-brand:#5B5CE0; --a-brand-d:#4A44C9; --a-brand-l:#E4E3FB;
  --a-grad:linear-gradient(135deg,#48CDD2 0%,#4576DB 38%,#8B4FDE 74%,#623ABF 100%);
  --a-ink:#0F1B33; --a-ink-60:#59627A; --a-ink-40:#8A92A5;
  --a-line:#E2E4EC;
}

/* ── فونت ───────────────────────────────────────────── */
html body,
html body input, html body select, html body textarea,
html body button, html body label, html body a,
html body h1, html body h2, html body h3, html body span,
html body p, html body div{
  font-family:'IRANSans',system-ui,-apple-system,sans-serif
}
html body input[type="tel"], html body #phoneNumber{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.5px
}

html body{background:var(--a-paper);color:var(--a-ink)}

/* ── وکتورهای تزئینی قالب قبلی حذف می‌شوند ──────────── */
.top-vector, .bottom-vector{display:none !important}

/* ── ستون تصویر: پوشش برند روی عکس ──────────────────── */
.login-section{background:var(--a-paper) !important}
.login-img{position:relative;overflow:hidden;min-height:100vh;background:var(--a-navy)}
.login-img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.2) contrast(1.05);opacity:.13
}
.login-img::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 320px at 30% 22%,rgba(139,79,222,.42),transparent 62%),
    linear-gradient(150deg,rgba(15,27,51,.86),rgba(15,27,51,.97));
  pointer-events:none
}
/* نوار باریک گرادیانی بین دو ستون */
.login-img::before{
  content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;
  width:4px;background:var(--a-grad);z-index:3
}

/* ── کادر فرم ───────────────────────────────────────── */
.login-form{
  background:var(--a-white);
  border:1px solid var(--a-line);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(15,27,51,.07);
  padding:34px 8px;
  margin:32px auto;
  max-width:520px;width:100%
}
.login-app-name{margin-bottom:6px}
.login-app-name span{font-size:22px !important;font-weight:900 !important;letter-spacing:-.4px}
.logo-fix-size{max-height:38px;width:auto}

.login-form h1{
  font-size:26px !important;font-weight:900 !important;
  letter-spacing:-.6px;color:var(--a-ink)
}

/* ── فیلدها ─────────────────────────────────────────── */
.form-label{
  font-size:14px !important;font-weight:500 !important;
  color:var(--a-ink) !important;margin-bottom:7px
}
.form-control, .form-select{
  background:var(--a-paper) !important;
  border:1px solid var(--a-line) !important;
  border-radius:11px !important;
  padding:12px 14px !important;
  font-size:15px !important;
  color:var(--a-ink) !important;
  box-shadow:none !important;
  transition:border-color .15s, background .15s
}
.form-control:focus, .form-select:focus{
  border-color:var(--a-brand) !important;
  background:var(--a-white) !important;
  box-shadow:0 0 0 3px rgba(91,92,224,.13) !important
}
.form-control::placeholder{color:var(--a-ink-40) !important}
.required::after{content:" *";color:#C0392B}

/* شماره تلفن همیشه چپ‌چین می‌ماند */
#phoneNumber, input[name="contact"]{direction:ltr !important;text-align:left !important}

/* چشمک رمز */
.password-addon, .toggle-password{color:var(--a-ink-40)}

/* ── دکمه‌ها ────────────────────────────────────────── */
.btn-primary, .btn.btn-primary, button[type="submit"].btn{
  background:var(--a-grad) !important;
  border:0 !important;
  border-radius:11px !important;
  padding:13px 26px !important;
  font-weight:700 !important;
  font-size:16px !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:filter .15s, transform .12s
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:scale(.99)}

.btn-secondary, .btn-light{
  border-radius:11px !important;
  border:1.5px solid var(--a-line) !important;
  background:var(--a-white) !important;
  color:var(--a-ink) !important;
  font-weight:700 !important
}

/* دکمه‌ی انتخاب زبان بالای صفحه */
.dropdown-toggle.btn-info{
  background:rgba(255,255,255,.9) !important;
  border:1px solid var(--a-line) !important;
  color:var(--a-ink) !important;
  border-radius:100px !important;
  font-size:14px !important;font-weight:500 !important;
  padding:8px 16px !important;
  box-shadow:0 2px 10px rgba(15,27,51,.06) !important
}
.dropdown-menu{
  border-radius:14px !important;border:1px solid var(--a-line) !important;
  box-shadow:0 14px 40px rgba(15,27,51,.12) !important;padding:6px !important
}
.dropdown-item{border-radius:9px !important;font-size:14px !important}
.dropdown-item.active, .dropdown-item:active{
  background:var(--a-brand-l) !important;color:var(--a-ink) !important
}

/* ── لینک‌ها ────────────────────────────────────────── */
.login-form a{color:var(--a-brand);text-decoration:none;font-weight:500}
.login-form a:hover{color:var(--a-brand-d);text-decoration:underline}

/* ── تیک «مرا به خاطر بسپار» ────────────────────────── */
.form-check-input{
  width:18px;height:18px;border-radius:5px !important;
  border:1.5px solid var(--a-line) !important;margin-top:.2rem
}
.form-check-input:checked{
  background-color:var(--a-brand) !important;border-color:var(--a-brand) !important
}
.form-check-label{font-size:14px;color:var(--a-ink-60)}

/* ── پیام‌ها ────────────────────────────────────────── */
.alert{border-radius:12px !important;border:1px solid var(--a-line) !important;font-size:14px}
.alert-danger{background:#FDECEA !important;color:#8E2B22 !important;border-color:#F5C6C1 !important}
.alert-success{background:#E8F7F0 !important;color:#14684A !important;border-color:#BCE6D4 !important}
.invalid-feedback, .text-danger{font-size:13px !important}

/* ── کد کشور ────────────────────────────────────────── */
.iti__country-list{border-radius:12px !important;font-size:14px}
.iti--separate-dial-code .iti__selected-flag{
  background:transparent !important;border-radius:11px 0 0 11px
}

/* ── فوتر ───────────────────────────────────────────── */
footer{background:transparent !important;color:var(--a-ink-40);font-size:13px}
footer a{color:var(--a-ink-60)}

/* ── موبایل ─────────────────────────────────────────── */
@media(max-width:767px){
  .login-img{display:none}
  .login-form{margin:18px 12px;padding:26px 4px;border-radius:16px}
  .login-form h1{font-size:23px !important}
}

/* ══════════ پنل کارت زنده ══════════ */
.apanel{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px;text-align:center;color:#C6CEDB;gap:0
}
.abrand{display:flex;align-items:center;gap:10px;margin-bottom:auto;padding-top:6px}
.abrand img{height:34px;width:auto}
.abrand span{font-weight:900;font-size:20px;letter-spacing:.4px;color:#fff}

.astage{display:grid;place-items:center;margin:26px 0}

/* قاب گوشی */
.aphone{
  position:relative;width:258px;
  background:linear-gradient(160deg,#22334F,#0C1526);
  border:1px solid #3B4E70;border-radius:30px;padding:11px 11px 14px;
  box-shadow:0 26px 60px rgba(0,0,0,.45)
}
.anotch{position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:56px;height:4px;border-radius:100px;background:#4A5B7C}

.ascr{
  background:#F7F8FC;border-radius:22px;padding:0 16px 16px;
  position:relative;overflow:hidden;min-height:326px;
  display:flex;flex-direction:column;align-items:center
}
.acover{
  height:82px;margin:0 -16px 0;align-self:stretch;
  background:var(--a-grad)
}
.aav{
  width:66px;height:66px;border-radius:50%;margin-top:-33px;
  background:#fff;border:3px solid #fff;color:var(--a-brand);
  display:grid;place-items:center;font-size:26px;font-weight:900;
  box-shadow:0 6px 18px rgba(15,27,51,.18);
  transition:color .2s, background .2s
}
.aav.filled{background:var(--a-grad);color:#fff}

.anm{
  margin-top:12px;font-size:18px;font-weight:900;color:var(--a-ink);
  min-height:28px;transition:color .2s;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.anm:not(.filled){color:#B9BFCE}
.arl{font-size:13px;color:var(--a-ink-40);margin-top:1px}

.aurl{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  direction:ltr;font-size:12px;margin-top:12px;
  background:#EDEEF5;color:#8A92A5;border-radius:100px;padding:6px 13px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .25s, color .25s
}
.aurl.filled{background:var(--a-brand-l);color:var(--a-brand-d);font-weight:700}

.achips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}
.achips span{
  font-size:11.5px;background:#EDEEF5;color:#69718A;
  border-radius:8px;padding:6px 10px;transition:background .25s, color .25s
}
.achips span[data-tel]:not(.off){
  background:var(--a-brand);color:#fff;font-weight:700;
  font-family:ui-monospace,monospace;direction:ltr
}

/* موج NFC */
.awaves{position:absolute;inset-inline-start:-26px;top:50%;transform:translateY(-50%);
  width:54px;height:54px;pointer-events:none}
.awaves i{position:absolute;inset:0;border:2px solid #6D8BE8;border-radius:50%;
  opacity:0;animation:aw 2.8s ease-out infinite}
.awaves i:nth-child(2){animation-delay:.93s;border-color:#8B4FDE}
.awaves i:nth-child(3){animation-delay:1.86s;border-color:#48CDD2}
@keyframes aw{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1.6);opacity:0}}

.atitle{font-size:20px;font-weight:900;color:#fff;margin:0 0 6px;letter-spacing:-.4px}
.asub{font-size:14.5px;color:#98A4B8;margin:0 0 auto;max-width:330px;line-height:1.9}

@media(max-height:760px){
  .ascr{min-height:280px}
  .aphone{width:232px}
  .astage{margin:16px 0}
}

/* ══════ صفحه‌ی ثبت‌نام: همان قواعد با نام کلاس خودش ══════ */
.register-section{background:var(--a-paper) !important}
.register-img{position:relative;overflow:hidden;min-height:100vh;background:var(--a-navy)}
.register-img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.2) contrast(1.05);opacity:.13}
.register-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 320px at 30% 22%,rgba(139,79,222,.42),transparent 62%),
    linear-gradient(150deg,rgba(15,27,51,.86),rgba(15,27,51,.97))}
.register-img::before{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;
  width:4px;background:var(--a-grad);z-index:3}

.register-form{
  background:var(--a-white);border:1px solid var(--a-line);border-radius:20px;
  box-shadow:0 18px 50px rgba(15,27,51,.07);
  padding:34px 8px;margin:32px auto;max-width:560px;width:100%
}
.register-app-name{margin-bottom:6px}
.register-app-name span{font-size:22px !important;font-weight:900 !important;letter-spacing:-.4px}
.register-form h1{font-size:26px !important;font-weight:900 !important;
  letter-spacing:-.6px;color:var(--a-ink)}
.register-form a{color:var(--a-brand);text-decoration:none;font-weight:500}
.register-form a:hover{color:var(--a-brand-d);text-decoration:underline}

/* پیام اعتبارسنجی شماره */
.phone-msg{display:block;font-size:12.5px;margin-top:6px;min-height:16px}
.phone-msg.is-ok{color:var(--a-ok,#1A9E6E)}
.phone-msg.is-err{color:#C0392B}

@media(max-width:767px){
  .register-img{display:none}
  .register-form{margin:18px 12px;padding:26px 4px;border-radius:16px}
  .register-form h1{font-size:23px !important}
}

/* ══════ چیدمان پنل: همیشه در قاب یک صفحه جمع بماند ══════
   در ثبت‌نام ستون فرم بلند است و ستون تصویر هم با آن کش می‌آید.
   پنل به ارتفاع یک صفحه محدود می‌شود تا وسط‌چین بماند.        */
.login-img img, .register-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.apanel{
  position:sticky;top:0;
  height:100vh;max-height:100vh;
  inset-inline:0;
  justify-content:center;
  gap:0;padding:0 30px
}
.abrand{
  position:absolute;top:24px;inset-inline:0;
  justify-content:center;margin:0;padding:0
}
.astage{margin:0 0 24px}
.atitle{margin:0 0 7px}
.asub{margin:0}

/* ستون تصویر نباید ارتفاع پنل را بشکند */
.login-img, .register-img{overflow:clip}

@media(max-height:820px){
  .aphone{width:228px}
  .ascr{min-height:274px;padding-bottom:13px}
  .acover{height:70px}
  .aav{width:58px;height:58px;margin-top:-29px;font-size:23px}
  .anm{font-size:17px;margin-top:10px}
  .achips span{font-size:11px;padding:5px 9px}
  .atitle{font-size:18px}
  .asub{font-size:13.5px}
}