/* ══════════════════════════════════════════════════════════════════════
   auth-brand.css — صفحات الدخول بهوية LaundryHub أو هوية المستأجر
   ──────────────────────────────────────────────────────────────────────
   يُحمَّل فوق zenora-auth.css (راجع AuthBranding) فلا يكرّر بنيته: يعيد
   تعريف التوكنز ويستبدل لغة «المولَّد» — شفقٌ ضبابي، شبكة، أزرارٌ متوهّجة —
   بلغة صفحة الهبوط التحريرية: ألوانٌ صلبة، خطٌّ مرسوم باليد، وبطاقة طلب.

   القيم أدناه هوية LaundryHub (منسوخةٌ من laundry-landing.css 2026-10-04).
   على دومين المستأجر تأتي <style> مضمَّنة بعد هذا الملف تعيد --a-* من لونه
   (ThemePalette::authCss) — فكل لونٍ هنا يمرّ بتوكن، ولا رقم ست عشري ثابت
   فيما يجب أن يتبع المستأجر.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --a-primary:      #0d6fd1;
    --a-primary-400:  #1a8ae6;
    --a-primary-600:  #0b62bb;
    --a-primary-700:  #0b2e72;
    --a-primary-soft: #eaf4fe;
    --a-press:        #0a4f99;
    --a-grad:         #0d6fd1;
    --a-ring:         rgba(13, 111, 209, .16);

    --a-hero-bg: #041044;
    --a-hero-2:  #0b2463;
    --a-accent:  #4fcdf5;

    --a-ink:     #0a1640;
    --a-ink-2:   #3d4a66;
    --a-muted:   #64718c;
    --a-faint:   #7a869e;
    --a-border:  #e5ecf5;
    --a-field:   #d3deec;
    --a-soft:    #f7fafd;

    --a-radius:  12px;
}

::selection { background: var(--a-primary); }

/* ─────────────── الهيرو: لونٌ صافٍ وحلقتا «حوض الغسّالة» ─────────────── */
body { background: var(--a-hero-bg); }

.auth-hero {
    --a-drum-x: 100%;
    background:
        radial-gradient(circle at var(--a-drum-x) 100%,
            transparent 0 30%, rgba(255, 255, 255, .07) 30% calc(30% + 1.5px),
            transparent calc(30% + 1.5px) 41%, rgba(255, 255, 255, .05) 41% calc(41% + 1px),
            transparent calc(41% + 1px)),
        var(--a-hero-bg);
}
/* الحلقتان في الركن الخارجي من الشاشة: الهيرو يسارٌ في العربية */
[dir="rtl"] .auth-hero { --a-drum-x: 0%; }
.auth-hero::before,
.auth-hero::after,
.auth-hero .aurora { display: none; }

.hero-badge {
    background: none; border: 0; padding: 0; border-radius: 0;
    color: rgba(255, 255, 255, .78); font-weight: 700;
}
.hero-badge .dot { animation: none; background: #34d399; box-shadow: none; }

.hero-title { font-weight: 800; line-height: 1.35; }
.hero-title .hl { background: none; -webkit-text-fill-color: currentColor; color: var(--a-accent); }
.hero-desc { color: rgba(255, 255, 255, .72); }

.hero-mark, .panel-mark, .mobile-brand .mb-mark {
    background: var(--a-primary); box-shadow: none;
}
.hero-mark:has(img), .panel-mark:has(img), .mobile-brand .mb-mark:has(img) {
    background: #fff; padding: 4px; box-shadow: inset 0 0 0 1px var(--a-border);
}

/* كلمةٌ بخطٍّ مرسوم باليد تحتها — لا نصٌّ بتدرّج لوني */
.lh-em {
    position: relative; display: inline-block; font-style: normal;
    color: var(--a-accent);
}
.lh-scribble {
    position: absolute; inset-inline: -2%; bottom: -.16em; width: 104%; height: .32em;
    fill: none; stroke: var(--a-accent); stroke-width: 4; stroke-linecap: round; overflow: visible; opacity: .8;
}
.lh-scribble path:last-child { stroke-width: 2.5; opacity: .5; }

/* ─────────────── LaundryHub: الملصق المخيط والبطاقة ─────────────── */
.lh-label {
    align-self: flex-start;
    display: inline-flex; padding: 10px 16px;
    background: #fff; border-radius: 8px;
    outline: 1.5px dashed var(--a-field); outline-offset: -6px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    transform: rotate(-1.5deg);
}
[dir="rtl"] .lh-label { transform: rotate(1.5deg); }
.lh-label img { display: block; width: 190px; height: auto; }

.lh-stage { position: relative; max-width: 400px; padding-bottom: 44px; }

.lh-ticket {
    position: relative;
    background: #fff; color: var(--a-ink);
    border-radius: 6px 16px 16px 6px;
    padding: 18px 20px 16px 30px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 26px 40px -24px rgba(0, 0, 0, .55);
    transform: rotate(-1.2deg);
}
[dir="rtl"] .lh-ticket { border-radius: 16px 6px 6px 16px; padding: 18px 30px 16px 20px; transform: rotate(1.2deg); }
/* ثقب البطاقة كما تُعلَّق على الكيس */
.lh-ticket::before {
    content: ""; position: absolute; inset-inline-start: 11px; top: 50%; translate: 0 -50%;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--a-hero-bg); box-shadow: inset 0 0 0 1.5px var(--a-field);
}

.lh-ticket__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lh-ticket__no { font-size: 13px; color: var(--a-muted); font-weight: 600; }
.lh-ticket__no b { font-family: var(--a-font-brand); color: var(--a-ink); font-size: 15px; }
.lh-ticket__chip {
    font-size: 11.5px; font-weight: 700; color: #05603a;
    background: #ecfdf3; border-radius: 6px; padding: 3px 8px;
}

.lh-ticket__rows { list-style: none; margin: 12px 0 14px; padding: 10px 0; border-block: 1.5px dashed var(--a-border); }
.lh-ticket__rows li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; padding: 3px 0; }
.lh-ticket__rows small { font-weight: 500; color: var(--a-muted); font-size: 12.5px; }
.lh-ticket__rows b { font-family: var(--a-font-brand); color: var(--a-primary); }

.lh-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lh-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--a-faint); }
.lh-steps i { height: 4px; border-radius: 2px; background: var(--a-border); }
.lh-steps li.is-done { color: var(--a-ink-2); }
.lh-steps li.is-done i { background: var(--a-primary); }

/* ورقة ملاحظة صفراء بشريطٍ لاصق — نفس ورقة صفحة الهبوط */
.lh-note {
    position: absolute; inset-inline-end: -22px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff8d6; color: #5b4a12; font-size: 13px; font-weight: 700;
    padding: 11px 14px; border-radius: 3px;
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .6);
    transform: rotate(-3deg);
}
[dir="rtl"] .lh-note { transform: rotate(3deg); }
.lh-note::before {
    content: ""; position: absolute; top: -8px; left: 50%; width: 54px; height: 16px; translate: -50% 0;
    background: rgba(200, 225, 245, .7); transform: rotate(-3deg); border-radius: 2px;
}
.lh-note i { color: #128c4a; font-size: 16px; }

/* شريط المزايا: بطاقاتٌ بخطٍّ متقطّع لا حبوبٌ زجاجية */
.t-pill {
    background: none; border: 1px dashed rgba(255, 255, 255, .26);
    border-radius: 6px; color: rgba(255, 255, 255, .86);
}
.t-pill i { color: var(--a-accent); }

/* المعاينة الكلاسيكية (صفحات الاستعادة لا تحملها، والدخول يستبدلها) */
.hero-preview { background: rgba(255, 255, 255, .05); box-shadow: none; border-radius: 10px; }

/* ─────────────── المستأجر: شعاره على لوحٍ أبيض ─────────────── */
.tn-hero { gap: 22px; }
.tn-plate {
    width: 112px; height: 112px; border-radius: 22px;
    display: grid; place-items: center;
    font-family: var(--a-font-brand); font-weight: 800; font-size: 48px; color: #fff;
    background: var(--a-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.tn-plate.has-logo { background: #fff; padding: 14px; }
.tn-hero .hero-title { font-size: clamp(26px, 2.6vw, 38px); }

/* ─────────────── لوحة النموذج ─────────────── */
.auth-panel { background: var(--a-soft); background-image: none; }
.auth-title { font-weight: 800; color: var(--a-ink); }

.fld { border-width: 1.5px; }
.fld:hover { border-color: var(--a-field); }
.fld:focus-within { border-color: var(--a-primary); box-shadow: 0 0 0 4px var(--a-ring); }

/* الزرّ: صلبٌ بحافّةٍ سفلية تنضغط — كأزرار صفحة الهبوط */
.btn-auth, .btn-auth:hover {
    background: var(--a-primary); border-radius: var(--a-radius);
    box-shadow: 0 2px 0 var(--a-press);
}
.btn-auth:hover { background: var(--a-primary-600); transform: translateY(-1px); }
.btn-auth:active { box-shadow: 0 0 0 var(--a-press); transform: translateY(2px); }
.btn-auth::after { display: none; }

.lang-seg { background: #fff; border-color: var(--a-border); }
.lang-seg a.active { background: var(--a-primary-soft); color: var(--a-primary-700); box-shadow: none; }
.link-soft { color: var(--a-primary); }

/* ─────────────── الجوال ─────────────── */
@media (max-width: 991.98px) {
    body { background: var(--a-soft); }
    .mobile-brand { background: var(--a-hero-bg); }
    .mobile-brand span { color: rgba(255, 255, 255, .7); }
    .mobile-brand .mb-badge { background: none; border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
}

@media (max-height: 760px) and (min-width: 992px) {
    .lh-ticket { padding-block: 14px 12px; }
    .lh-ticket__rows { margin-block: 8px 10px; padding-block: 6px; }
    .lh-label img { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .lh-label, .lh-ticket, .lh-note { transform: none !important; }
}