/*
 * استایل صفحهٔ ورود.
 *
 * این تنها استایل‌شیتِ مجموعهٔ public/front/** است که هنوز بار می‌شود، و تنها مصرف‌کننده‌اش
 * auth/layouts/includes/head.blade.php است — یعنی صفحهٔ ورود و سه صفحهٔ بازیابی رمز.
 *
 * ═══ فونت ═══
 * تا امروز اینجا «دانا» تعریف و روی body نشانده می‌شد، در حالی که تمام بقیهٔ اپ از پاس A
 * روی «استعداد» است. یک محصول، یک فونت. خانوادهٔ Estedad در admin/css/cafe-theme.css
 * تعریف شده و همان‌جا هم قبل از این فایل بار می‌شود، پس اینجا هیچ @font-face ای لازم نیست
 * و هیچ فونت تازه‌ای دانلود نمی‌شود.
 *
 * ═══ چیزی که پاک شد ═══
 * ۵۶ قاعده از ۶۸ قاعدهٔ این فایل به کلاس‌هایی اشاره می‌کرد که در هیچ‌کدام از چهار ویویِ
 * مصرف‌کننده وجود ندارند — بازماندهٔ سایت شکایات که اپ کافه از رویش کپی شده
 * (.complain-* · .banner-complain · .card-complain-* · .reservation-page ·
 * .info-content-reservation · .otp-input · .input-verification · .icon-reserve ·
 * .img-banner · .btn-submit-moin · .shadow-moin · .form-submit · .info-rules …).
 * همه حذف شدند. آنچه مانده، همان چیزی است که صفحهٔ ورود واقعاً استفاده می‌کند.
 *
 * ═══ رنگ ═══
 * هیچ هگز خامی. همه از توکن‌های cafe-theme.css می‌آید.
 */

body {
    /* پاس A خانوادهٔ Estedad را با نام واقعی‌اش تعریف کرد؛ اینجا فقط مصرف می‌شود */
    font-family: var(--font-body), "segoe ui", tahoma, sans-serif;
}

/* دکمهٔ ورود — همان دکمهٔ اصلی پنل، از همان توکن برند */
.primary-btn-panel {
    background: var(--navy) !important;
    color: var(--surface);
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--navy);
    border-radius: var(--r-sm);
    min-block-size: 48px;
    line-height: 1.5;
}

.primary-btn-panel:hover {
    background: var(--navy-d) !important;
    border-color: var(--navy-d);
    color: var(--surface);
}

/* ═════════ کارت ورود ═════════ */

.authenticate {
    min-height: 100vh;
}

/* زمینهٔ صفحهٔ ورود.
   تا پاس A به assets/images/complain-banner.png اشاره می‌کرد که با بقیهٔ تصاویر سایت
   شکایات حذف شده بود — صفحه عملاً بی‌زمینه بود. جایش یک زمینهٔ ساخته‌شده از توکن‌ها
   نشسته: زمین جوهری با یک تاب برنجیِ خیلی کم‌رنگ. هیچ فایل تصویری ندارد، پس نه ۴۰۴
   می‌دهد و نه بایتی دانلود می‌شود. */
.auth-page {
    background-color: var(--ink-900);
    /* مرورگر بدون color-mix فقط زمین جوهری را می‌گیرد، که خودش کامل است */
    background-image: radial-gradient(120% 90% at 82% 0%,
                                      color-mix(in srgb, var(--brass) 14%, transparent),
                                      transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.form-login-moin {
    /* سایه از توکن می‌آید. تا امروز یک rgba(46,130,255,.30) بود — یک هالهٔ آبی که به
       هیچ‌جای پالت وصل نبود. */
    box-shadow: var(--shadow-lift);
    border-radius: var(--r-lg);
    padding: var(--sp-48);
    margin: auto;
    max-height: 85vh;
    overflow-y: auto;
}

.auth-page .form-login-moin {
    background: var(--surface);
    /* تنها عنصر برنجیِ صریح صفحه: یک خط مو در لبهٔ بالای کارت ورود */
    border-top: 2px solid var(--brass);
}

/* .form-login-moin خودش کارت است؛ .card داخلش یک جعبهٔ سفید روی جعبهٔ سفید بود.
   یک لایه جعبه کمتر — همان کاری که پاس B با کارت‌های صفحهٔ تحویل کرد. */
.auth-page .form-login-moin > .card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.auth-page .form-login-moin .card-header {
    padding-block-end: var(--sp-24);
}

.form-login-moin .form,
.form-login-moin .form-control {
    text-align: right;
}

/* ورودی‌ها: تا امروز border:none داشتند و هیچ‌جا معلوم نبود کجا باید تایپ کرد
   (پاس A این را به‌عنوان کارِ پاس C ثبت کرده بود). حالا یک لبهٔ --line دارند و در فوکوس
   لبه‌شان --navy می‌شود؛ حلقهٔ :focus-visible هم از cafe-theme.css سر جایش است.
   ۱۶px حداقلِ اندازه است تا iOS موقع فوکوس زوم نکند. */
.form-login-moin input {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-700);
    font-size: 16px;
    min-block-size: 48px;
    /* جا برای آیکنی که .form-control-position داخل ورودی می‌نشاند */
    padding-inline-start: var(--sp-48);
}

.form-login-moin input:focus {
    border-color: var(--navy);
    box-shadow: none;
}

/* ⚠️ بوت‌استرپ ۵ روی `.form-control:focus` صریحاً `outline: 0` می‌گذارد و با specificity
   بالاترش حلقهٔ `input:focus-visible` در cafe-theme.css را خاموش می‌کند. با تب‌زدن واقعی
   در مرورگر پیدا شد: `outline = rgb(23,41,58) 0px none`. اینجا برگردانده می‌شود.
   --brass-d است نه --brass: برنجی روی سفید فقط ۲٫۶۵:۱ می‌دهد و به کف ۳:۱ اجزای غیرمتنی
   نمی‌رسد؛ --brass-d ‏۴٫۳۳:۱ می‌دهد. */
.form-login-moin input:focus-visible,
.auth-page .card .form-control:focus-visible,
.auth-page .card .btn:focus-visible,
.form-login-moin .btn:focus-visible {
    outline: 2px solid var(--brass-d);
    outline-offset: 2px;
}

.form-login-moin input::placeholder {
    color: var(--muted-s);
}

/* .has-icon-left / .form-control-position از اپ مبدأ آمده‌اند و هیچ‌جای این پروژه
   تعریف نشده بودند، پس آیکن به‌جای نشستن داخل ورودی، زیرش می‌افتاد.
   fieldset خودش position-relative دارد (کلاس بوت‌استرپ روی همان تگ). */
.form-login-moin .form-control-position {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 48px;
    inline-size: var(--sp-48);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-s);
    pointer-events: none;
}

.font-large-1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-700);
}

/* متن ثانویه. هم‌نام و هم‌مقدارِ .panel-meta در cafe-panel.css، ولی اینجا دوباره تعریف
   می‌شود چون صفحات ورود آن استایل‌شیت را بار نمی‌کنند. --muted-s است نه --muted:
   --muted روی سفید فقط ۴٫۲۶:۱ می‌دهد و به AA نمی‌رسد. */
.panel-meta {
    color: var(--muted-s);
    font-size: 13px;
}

.form-login-moin .form-label,
.auth-page .card .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-s);
}

/* ═════════ صفحه‌های بازیابی رمز ═════════
   بوت‌استرپ خام‌اند و فقط .card و .form-control دارند؛ همان لبه و شعاعِ کارت ورود. */

.auth-page .card {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    /* همان خط موی برنجیِ کارت ورود، تا هر چهار صفحهٔ احراز هویت یک محصول به نظر برسند.
       ترتیب مهم است: shorthand ‏border بالا، border-top بعد از آن. */
    border-top: 2px solid var(--brass);
}

.auth-page .card-header {
    background: transparent;
    border-block-end: 1px solid var(--line);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-700);
}

.auth-page .card .form-control {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 16px;
    min-block-size: 48px;
    color: var(--ink-700);
}

.auth-page .card .btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    border-radius: var(--r-sm);
    min-block-size: 48px;
}

.auth-page .card .btn-link {
    color: var(--navy);
}

.auth-page .invalid-feedback {
    color: var(--ember);
}

/* ═════════ سوییت‌الرت ═════════
   خطاهای اعتبارسنجی ورود از این مسیر نشان داده می‌شوند (auth/layouts/includes/script). */

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    background-color: var(--navy) !important;
    border-radius: var(--r-sm) !important;
}

@media (max-width: 992px) {
    .form-login-moin {
        padding: var(--sp-48) var(--sp-32);
    }
}

@media (max-width: 768px) {
    .form-login-moin {
        padding: var(--sp-32) var(--sp-24);
    }
}