/* ========================================
   🔐 دار سامي — واجهة الحساب
   ----------------------------------------
   ⚠️ المشترك في base.css — لا يُكرَّر هنا.
   ----------------------------------------
   يُحمَّل في: login.html · upload-book.html ·
              account.html
   نموذج الدخول واحد يظهر في موضعين، فأنماطه
   مشتركة هنا لا مكرّرة في كل صفحة.
   ======================================== */

.auth-page,
.auth-box,
.auth-overlay {
    --c-25:  #fffafa;
    --c-50:  #fcf1f2;
    --c-100: #f7e0e2;
    --c-200: #efc5c9;
    --c-300: #e1a0a6;
    --c-700: #7a0c16;
    --c-800: #5e0810;

    --c-glow: rgba(122, 12, 22, .16);
    --c-soft: rgba(122, 12, 22, .10);
}


/* ========================================
   📄 صفحة الدخول
   ======================================== */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.2rem 4.5rem;
    min-height: 62vh;
    background: linear-gradient(180deg, #fff 0%, var(--c-50) 100%);
}

.auth-box {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border: 1px solid var(--c-200);
    border-radius: var(--radius-lg);
    padding: 2.2rem 1.9rem 2rem;
    box-shadow: 0 18px 50px var(--c-soft);
    animation: authIn .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes authIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.auth-head {
    text-align: center;
    margin-bottom: 1.7rem;
}

.auth-head i {
    display: inline-grid;
    place-items: center;
    width: 3.2rem; height: 3.2rem;
    border-radius: 50%;
    background: var(--c-100);
    color: var(--c-700);
    font-size: 1.6rem;
    margin-bottom: .9rem;
}

.auth-head h1 {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: .35rem;
}

.auth-head p {
    font-size: .87rem;
    color: var(--text-light);
    line-height: 1.85;
}


/* ========================================
   🧾 النموذج
   ======================================== */

.auth-field { margin-bottom: 1.05rem; }

.auth-field label {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .42rem;
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;
    padding: .78rem 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .93rem;
    background: #fff;
    color: var(--text);
    transition: border-color .22s ease, box-shadow .22s ease;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--c-700);
    box-shadow: 0 0 0 4px var(--c-glow);
}

.auth-field input.invalid { border-color: #dc3545; }


/* ---------- كلمة السرّ ---------- */

.auth-pass { position: relative; }

.auth-pass input { padding-inline-end: 3.1rem; }

.auth-eye {
    position: absolute;
    inset-inline-end: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-light);
    font-size: 1.15rem;
    transition: background .2s ease, color .2s ease;
}

.auth-eye:hover { background: var(--c-50); color: var(--c-700); }


/* ---------- مقياس القوّة ---------- */

.pw-meter {
    height: 4px;
    margin-top: .5rem;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}

.pw-meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #dc3545;
    transition: width .3s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}

.pw-meter span.bad  { background: #dc3545; }
.pw-meter span.mid  { background: #d69e2e; }
.pw-meter span.ok   { background: #3f9142; }
.pw-meter span.good { background: #1a7f37; }

.pw-note {
    display: block;
    margin-top: .38rem;
    font-size: .76rem;
    color: var(--text-light);
    line-height: 1.7;
}

.pw-note.weak { color: #b02a37; font-weight: 600; }


/* ---------- الأزرار ---------- */

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .88rem;
    margin-top: .4rem;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: inherit;
    font-size: .93rem;
    font-weight: 800;
    transition: var(--transition);
    box-shadow: 0 6px 18px var(--c-glow);
}

.auth-submit:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px var(--c-glow);
    color: #fff;
}

.auth-submit:disabled { opacity: .75; cursor: not-allowed; transform: none; }

.auth-submit i { font-size: 1.15rem; }

.auth-forgot,
.auth-link {
    display: block;
    margin: -.3rem 0 1rem auto;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--c-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-link {
    margin: .9rem auto 0;
    display: block;
    color: var(--text-light);
    font-weight: 600;
}

.auth-forgot:hover,
.auth-link:hover { color: var(--c-800); }

.auth-foot {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
    line-height: 1.9;
    color: var(--text-light);
    text-align: center;
}

.auth-foot a { color: var(--c-700); font-weight: 700; }


/* ---------- التنبيه ---------- */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .78rem .95rem;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.75;
    animation: alertIn .28s cubic-bezier(.16, 1, .3, 1) both;
}

.auth-alert[hidden] { display: none; }

@keyframes alertIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

.auth-alert i { font-size: 1.05rem; flex-shrink: 0; margin-top: .12rem; }

.auth-alert.err {
    background: rgba(220,53,69,.09);
    border-inline-start: 4px solid #dc3545;
    color: #b02a37;
}

.auth-alert.ok {
    background: rgba(26,127,55,.08);
    border-inline-start: 4px solid #1a7f37;
    color: #166534;
}


/* ========================================
   🔑 نافذة الاستعادة
   ======================================== */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    overflow-y: auto;
}

.auth-modal {
    position: relative;
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.9rem 1.7rem 1.7rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    animation: authIn .35s cubic-bezier(.16, 1, .3, 1) both;
    max-height: 92vh;
    overflow-y: auto;
}

.auth-close {
    position: absolute;
    top: .9rem; left: .9rem;
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text);
    font-size: 1.15rem;
    transition: var(--transition-sm);
}

.auth-close:hover { background: var(--c-700); color: #fff; transform: rotate(90deg); }

.auth-modal h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.12rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 1.2rem;
}

.auth-modal h2 i { color: var(--c-700); font-size: 1.3rem; }


/* ---------- مسار الخطوات ---------- */

.rec-track {
    display: flex;
    gap: .3rem;
    list-style: none;
    margin-bottom: 1.4rem;
}

.rec-track li {
    flex: 1;
    padding-top: .5rem;
    border-top: 3px solid var(--border);
    font-size: .73rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: center;
    transition: border-color .3s ease, color .3s ease;
}

.rec-track li.on   { border-top-color: var(--c-700); color: var(--c-700); }
.rec-track li.done { border-top-color: var(--c-300); color: var(--c-800); }

.rec-step[hidden] { display: none; }

.rec-step { animation: alertIn .3s cubic-bezier(.16, 1, .3, 1) both; }

.rec-lead {
    font-size: .86rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.1rem;
}

.rec-lead b { color: var(--text); font-weight: 700; word-break: break-all; }

/* الرمز أرقام متباعدة — أسهل في المراجعة قبل الإرسال */
.rec-code {
    text-align: center;
    font-size: 1.5rem !important;
    font-weight: 900;
    letter-spacing: .5em;
    padding-inline-start: .5em !important;
}

.rec-done {
    text-align: center;
    padding: .6rem 0 0;
}

.rec-done > i {
    display: block;
    font-size: 3rem;
    color: #1a7f37;
    margin-bottom: .7rem;
}

.rec-done b {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: .3rem;
}

.rec-done span {
    display: block;
    font-size: .85rem;
    color: var(--text-light);
    margin-bottom: 1.2rem;
}


/* ========================================
   📱 التجاوب
   ======================================== */

@media (max-width: 480px) {
    .auth-page { padding: 2.2rem 1rem 3rem; }
    .auth-box  { padding: 1.7rem 1.2rem 1.5rem; }
    .auth-modal { padding: 1.6rem 1.1rem 1.3rem; }
    .rec-track li { font-size: .68rem; }
    .rec-code { font-size: 1.25rem !important; letter-spacing: .35em; }
}


/* من يطلب تقليل الحركة يجب أن يجدها ساكنة */
@media (prefers-reduced-motion: reduce) {
    .auth-box, .auth-modal, .auth-alert, .rec-step { animation: none; }
    .auth-submit:hover:not(:disabled) { transform: none; }
    .pw-meter span { transition: none; }
}


/* ---------- «اضغط هنا» في تذييل النموذج ---------- */

/* زرّ لا رابط: الوجهة تختلف بالسياق — صفحة نشر
   كتاب من صفحة الدخول، والخطوة الأولى من داخل
   البوّابة. لكنه يبدو رابطاً لأنّه يتصرّف كرابط. */
.auth-here {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    color: var(--c-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .2s ease;
}

.auth-here:hover { color: var(--c-800); }

.auth-here:focus-visible {
    outline: 2px solid var(--c-700);
    outline-offset: 3px;
    border-radius: 4px;
}