/* ===== صفحات الدخول في «حسابي» (الدخول/التسجيل/نسيت كلمة المرور/إعادة التعيين/تأكيد الإيميل/تغيير المؤقتة/انتظار التأكيد) — شكل بارز (Neumorphism) =====
   كل حاجة هنا تحت .auth-wrapper.auth-emboss بس (لوحة العميل مش متأثرة)
   الحركة (قطر النور حوالين الخانة + قلبة الكارت + حالة الزرار) في js/auth-emboss.js
   الوضع الفاتح بيغيّر الألوان بس (المتغيرات) + شوية !important علشان قواعد الفاتح العامة في shop-common.css */

.auth-wrapper.auth-emboss {
    --emb-surface: #14141d;
    --emb-sh-dark: rgba(0, 0, 0, .78);
    --emb-sh-light: rgba(255, 255, 255, .05);
    --emb-in-dark: rgba(0, 0, 0, .62);
    --emb-in-light: rgba(255, 255, 255, .04);
    --emb-rim: rgba(255, 255, 255, .07);
    --emb-primary: #00d4ff;
    --emb-primary-rgb: 0, 212, 255;
    --emb-secondary: #6366f1;
    --emb-grad: linear-gradient(135deg, #0e7490 0%, #4f46e5 100%);
    --emb-text: #f8fafc;
    --emb-text-2: #a0a0b0;
    --emb-muted: #94a3b8;
    --mbk-r: 16px;
    max-width: 440px;
    margin-top: 36px;
    perspective: 1800px;
}
html[data-theme="light"] .auth-wrapper.auth-emboss {
    --emb-surface: #e9eef5;
    --emb-sh-dark: rgba(163, 177, 198, .75);
    --emb-sh-light: rgba(255, 255, 255, .95);
    --emb-in-dark: rgba(163, 177, 198, .7);
    --emb-in-light: rgba(255, 255, 255, .9);
    --emb-rim: rgba(255, 255, 255, .6);
    --emb-primary: #7c3aed;
    --emb-primary-rgb: 124, 58, 237;
    --emb-secondary: #4f46e5;
    --emb-grad: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    --emb-text: #0f172a;
    --emb-text-2: #475569;
    --emb-muted: #556070;
}
.auth-wrapper.auth-emboss.emb-no-rise { animation: none; }

/* ===== الكارت ===== */
.auth-wrapper.auth-emboss .auth-card {
    padding: 28px 26px 22px;
    border-radius: 28px;
    overflow: visible;
    background: var(--emb-surface);
    border: 1px solid var(--emb-rim);
    box-shadow: 18px 18px 40px var(--emb-sh-dark), -14px -14px 34px var(--emb-sh-light);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-card {
    background: var(--emb-surface) !important;
    border-color: var(--emb-rim) !important;
    box-shadow: 18px 18px 40px var(--emb-sh-dark), -14px -14px 34px var(--emb-sh-light) !important;
}
.auth-wrapper.auth-emboss .auth-card::before { display: none; }

/* قلبة الكارت لما العميل يروح من الدخول للتسجيل أو العكس (نص القلبة هنا والنص التاني في الصفحة الجديدة) */
.auth-wrapper.auth-emboss .auth-card.emb-flip-out { animation: embFlipOut .3s ease-in forwards; }
.auth-wrapper.auth-emboss .auth-card.emb-flip-in { animation: embFlipIn .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes embFlipOut { to { transform: rotateY(90deg); opacity: .5; } }
@keyframes embFlipIn { from { transform: rotateY(-90deg); opacity: .5; } }

/* ===== الأيقونة: دايرة بارزة وجواها دايرة محفورة ===== */
.auth-wrapper.auth-emboss .auth-header { margin-bottom: 22px; }
.auth-wrapper.auth-emboss .auth-header .auth-icon {
    width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 50%; border: 0;
    font-size: 1.2rem; color: var(--emb-primary); background: var(--emb-surface);
    box-shadow: 8px 8px 18px var(--emb-sh-dark), -8px -8px 18px var(--emb-sh-light);
    animation: none;
}
.auth-wrapper.auth-emboss .auth-header .auth-icon::before {
    content: ''; position: absolute; inset: 10px; border-radius: 50%;
    box-shadow: inset 3px 3px 7px var(--emb-in-dark), inset -3px -3px 7px var(--emb-in-light);
}
.auth-wrapper.auth-emboss .auth-header .auth-icon i { position: relative; animation: embBob 3.2s ease-in-out infinite; }
@keyframes embBob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.auth-wrapper.auth-emboss .auth-header h1 {
    margin: 0 0 2px; font-size: 1.35rem; font-weight: 800; line-height: 1.35;
    color: var(--emb-text); background: none; -webkit-text-fill-color: currentColor;
}
.auth-wrapper.auth-emboss .auth-header p { font-size: .88rem; color: var(--emb-text-2) !important; }

/* ===== الخانة: محفورة + العنوان بيطير ويقعد على إطارها ===== */
.auth-wrapper.auth-emboss .form-group { position: relative; margin-bottom: 20px; }
.auth-wrapper.auth-emboss .form-group > label {
    position: absolute; right: 18px; top: 28px; transform: translateY(-50%); z-index: 3; /* نص الخانة (طولها 56) */
    display: block; max-width: calc(100% - 70px); margin: 0; padding: 0; border-radius: 8px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--emb-muted); background: transparent;
    pointer-events: none; transition: all .28s cubic-bezier(.3, .7, .3, 1);
}
.auth-wrapper.auth-emboss .form-group > label i,
.auth-wrapper.auth-emboss .form-group > label .required { display: none; }
.auth-wrapper.auth-emboss .form-group:focus-within > label,
.auth-wrapper.auth-emboss .form-group.is-filled > label,
.auth-wrapper.auth-emboss .form-group.is-pinned > label {
    top: -10px; right: 12px; transform: none; padding: 0 7px; background: var(--emb-surface);
    font-size: .75rem; font-weight: 700; color: var(--emb-primary);
}
/* المتصفح ملا الخانة لوحده (الحفظ التلقائي) — قاعدة لوحدها علشان المتصفحات القديمة ماتلغيش اللي فوق */
.auth-wrapper.auth-emboss .form-group:has(.form-input:-webkit-autofill) > label {
    top: -10px; right: 12px; transform: none; padding: 0 7px; background: var(--emb-surface);
    font-size: .75rem; font-weight: 700; color: var(--emb-primary);
}

.auth-wrapper.auth-emboss .form-input {
    height: 56px; padding: 0 18px; border-radius: 16px;
    font-size: 1rem; font-weight: 600; color: var(--emb-text);
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: inset 5px 5px 11px var(--emb-in-dark), inset -5px -5px 11px var(--emb-in-light);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.auth-wrapper.auth-emboss .form-input:hover:not(:focus) { border-color: var(--emb-rim); }
.auth-wrapper.auth-emboss .form-input:focus {
    outline: none; background: var(--emb-surface);
    border-color: rgba(var(--emb-primary-rgb), .5);
    box-shadow: inset 5px 5px 11px var(--emb-in-dark), inset -5px -5px 11px var(--emb-in-light), 0 0 0 3px rgba(var(--emb-primary-rgb), .12);
}
html[data-theme="light"] .auth-wrapper.auth-emboss .form-input {
    background: var(--emb-surface) !important; border-color: var(--emb-rim) !important; color: var(--emb-text) !important;
}
html[data-theme="light"] .auth-wrapper.auth-emboss .form-input:focus { border-color: rgba(var(--emb-primary-rgb), .5) !important; }
/* لون المتصفح لما يملا الخانة لوحده بيبوّظ الحفر — نسيبه شفاف */
.auth-wrapper.auth-emboss .form-input:-webkit-autofill {
    -webkit-text-fill-color: var(--emb-text);
    transition: background-color 9999s ease-in-out 0s;
}
/* الكلام المساعد جوه الخانة بيستخبى طول ما العنوان قاعد مكانه، ويظهر لما الخانة تتفتح */
.auth-wrapper.auth-emboss .form-input::placeholder { color: transparent; opacity: 1; transition: color .2s ease; }
.auth-wrapper.auth-emboss .form-input:focus::placeholder,
.auth-wrapper.auth-emboss .form-group.is-pinned .form-input::placeholder { color: var(--emb-muted); font-weight: 500; }

/* زرار العين */
.auth-wrapper.auth-emboss .password-wrapper .password-toggle {
    left: 6px; width: 44px; height: 44px; border-radius: 12px; z-index: 4;
    color: var(--emb-muted); background: transparent; font-size: 1.05rem;
}
.auth-wrapper.auth-emboss .password-wrapper .password-toggle:hover { color: var(--emb-primary); background: transparent; }

/* خانة الموبايل (js/phone-field.js): العلم و+20 جوه الخانة المحفورة */
.auth-wrapper.auth-emboss .mbk-phone-cc {
    top: 1px; bottom: 1px; left: 1px; background: transparent;
    border-right-color: var(--emb-rim); color: var(--emb-text-2);
}
.auth-wrapper.auth-emboss .form-group small { margin-top: 6px !important; padding: 0 6px; }

/* قطر النور: حتة منوّرة (راس + ديل) بتلف حوالين إطار الخانة المفتوحة — الـ SVG بيتحط بالـ JS */
.auth-wrapper.auth-emboss .emb-train {
    position: absolute; z-index: 2; pointer-events: none; overflow: visible;
    opacity: 0; transition: opacity .3s ease;
    filter: drop-shadow(0 0 4px rgba(var(--emb-primary-rgb), .9));
}
.auth-wrapper.auth-emboss .form-group:focus-within .emb-train { opacity: 1; }
.auth-wrapper.auth-emboss .emb-train rect { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.auth-wrapper.auth-emboss .emb-train .emb-head { stroke: var(--emb-primary); }
.auth-wrapper.auth-emboss .emb-train .emb-tail { stroke: var(--emb-secondary); opacity: .55; }

/* ===== الزرار الأساسي: بارز ← بيتملي بتدرّج ولمعة بتعدي ===== */
.auth-wrapper.auth-emboss .auth-btn {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 52px; padding: 13px 16px; border: 0; border-radius: 16px; gap: 10px;
    font-size: 1.02rem; font-weight: 800; color: var(--emb-primary); background: var(--emb-surface);
    box-shadow: 7px 7px 16px var(--emb-sh-dark), -7px -7px 16px var(--emb-sh-light);
    transition: color .3s ease, box-shadow .3s ease, transform .15s ease;
}
.auth-wrapper.auth-emboss .auth-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1; transform: none;
    background: var(--emb-grad); opacity: 0; transition: opacity .35s ease;
}
.auth-wrapper.auth-emboss .auth-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: -50%; width: 40%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg); opacity: 0;
}
.auth-wrapper.auth-emboss .auth-btn:hover,
.auth-wrapper.auth-emboss .auth-btn:focus-visible,
.auth-wrapper.auth-emboss .auth-btn.is-busy {
    color: #fff; transform: none;
    box-shadow: 0 10px 26px rgba(var(--emb-primary-rgb), .35), 0 0 0 1px rgba(var(--emb-primary-rgb), .3);
}
.auth-wrapper.auth-emboss .auth-btn:hover::before,
.auth-wrapper.auth-emboss .auth-btn:focus-visible::before,
.auth-wrapper.auth-emboss .auth-btn.is-busy::before { opacity: 1; transform: none; }
.auth-wrapper.auth-emboss .auth-btn:hover::after { opacity: 1; animation: embSheen 1.1s ease forwards; }
@keyframes embSheen { to { right: 120%; } }
.auth-wrapper.auth-emboss .auth-btn:active { transform: scale(.98); }
.auth-wrapper.auth-emboss .auth-btn:focus-visible { outline: 2px solid var(--emb-primary); outline-offset: 3px; }
.auth-wrapper.auth-emboss .auth-btn:disabled { cursor: default; }
/* بعد الضغط: الأيقونة بتتحول لدايرة تحميل لحد ما الصفحة التانية تفتح */
.auth-wrapper.auth-emboss .auth-btn.is-busy { cursor: progress; }
.auth-wrapper.auth-emboss .auth-btn.is-busy > i::before { content: "\f110"; }
.auth-wrapper.auth-emboss .auth-btn.is-busy > i { animation: embSpin .8s linear infinite; }
@keyframes embSpin { to { transform: rotate(360deg); } }

/* ===== خطوة الباسورد: الإيميل/الرقم اللي اتكتب في كبسولة محفورة + زرار «تغيير» ===== */
.auth-wrapper.auth-emboss .login-email-badge {
    gap: 10px; margin: 0 0 22px; padding: 6px 16px 6px 6px; border-radius: 999px;
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: inset 4px 4px 9px var(--emb-in-dark), inset -4px -4px 9px var(--emb-in-light);
}
.auth-wrapper.auth-emboss .login-email-badge i:first-child { color: var(--emb-primary); font-size: 1rem; }
.auth-wrapper.auth-emboss .login-email-badge span { color: var(--emb-text); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-wrapper.auth-emboss .login-email-badge a {
    width: 40px; height: 40px; border-radius: 50%; flex: none; color: var(--emb-primary); background: var(--emb-surface);
    box-shadow: 4px 4px 9px var(--emb-sh-dark), -4px -4px 9px var(--emb-sh-light);
}
.auth-wrapper.auth-emboss .login-email-badge a:hover { color: var(--emb-primary); background: var(--emb-surface); box-shadow: inset 3px 3px 7px var(--emb-in-dark), inset -3px -3px 7px var(--emb-in-light); }

/* رسالة الخطأ اللي فوق الخانات */
.auth-wrapper.auth-emboss .alert { border-radius: 16px; }

/* ===== «أو» + زرار جوجل بارز (نفس تأثيرات المتجر: إطار بألوان جوجل بيلف + لمعة) ===== */
.auth-wrapper.auth-emboss .auth-or { color: var(--emb-muted); }
.auth-wrapper.auth-emboss .auth-or::before,
.auth-wrapper.auth-emboss .auth-or::after {
    height: 3px; border-radius: 3px; background: transparent;
    box-shadow: inset 1px 1px 2px var(--emb-in-dark), inset -1px -1px 2px var(--emb-in-light);
}
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-or { color: var(--emb-muted); }
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-or::before,
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-or::after { background: transparent; }
.auth-wrapper.auth-emboss .gsi-custom,
html[data-theme="light"] .auth-wrapper.auth-emboss .gsi-custom {
    min-height: 54px; border-radius: 16px; color: var(--emb-text); background: var(--emb-surface);
    box-shadow: 7px 7px 16px var(--emb-sh-dark), -7px -7px 16px var(--emb-sh-light);
}
@media (hover: hover) {
    .auth-wrapper.auth-emboss .gsi-custom:hover:not(:disabled),
    html[data-theme="light"] .auth-wrapper.auth-emboss .gsi-custom:hover:not(:disabled) {
        background: var(--emb-surface);
        box-shadow: 9px 9px 20px var(--emb-sh-dark), -9px -9px 20px var(--emb-sh-light);
    }
}
.auth-wrapper.auth-emboss .gsi-custom:active:not(:disabled) {
    box-shadow: inset 4px 4px 10px var(--emb-in-dark), inset -4px -4px 10px var(--emb-in-light);
}
.auth-wrapper.auth-emboss .gsi-custom:focus-visible { box-shadow: 7px 7px 16px var(--emb-sh-dark), -7px -7px 16px var(--emb-sh-light), 0 0 0 3px rgba(66, 133, 244, .35); }

/* ===== مميزات الحساب ===== */
.auth-wrapper.auth-emboss .auth-perks { gap: 8px; margin-top: 16px; }
.auth-wrapper.auth-emboss .auth-perks span {
    padding: 6px 12px; font-size: .76rem; font-weight: 700; color: var(--emb-text-2);
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: 3px 3px 8px var(--emb-sh-dark), -3px -3px 8px var(--emb-sh-light);
}
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-perks span { color: var(--emb-text-2); background: var(--emb-surface); border-color: var(--emb-rim); }

/* ===== تحت: «ليس لديك حساب؟» + زرار دايرة بيقلب الكارت (السطر كله بيدوس) ===== */
.auth-wrapper.auth-emboss .auth-footer { margin-top: 14px; padding-top: 10px; border-top: 0; }
.auth-wrapper.auth-emboss .auth-footer a.auth-switch,
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-footer a.auth-switch {
    display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 2px 4px; border: 0; border-radius: 999px;
    background: none; color: var(--emb-text-2) !important; font-size: .9rem; font-weight: 600; text-decoration: none;
}
.auth-wrapper.auth-emboss .auth-switch-btn {
    width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: 1.05rem; color: var(--emb-primary); background: var(--emb-surface);
    box-shadow: 5px 5px 12px var(--emb-sh-dark), -5px -5px 12px var(--emb-sh-light);
    transition: box-shadow .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.auth-wrapper.auth-emboss .auth-switch-btn i { transition: transform .35s ease; }
.auth-wrapper.auth-emboss .auth-switch:hover .auth-switch-btn i { transform: rotate(90deg); }
.auth-wrapper.auth-emboss .auth-switch.is-back:hover .auth-switch-btn i { transform: translateX(4px); }
.auth-wrapper.auth-emboss .auth-switch:focus-visible { outline: 2px solid var(--emb-primary); outline-offset: 3px; }
.auth-wrapper.auth-emboss .auth-switch.is-pressed .auth-switch-btn {
    color: #fff; background: var(--emb-grad); transform: scale(.94);
    box-shadow: 0 6px 20px rgba(var(--emb-primary-rgb), .45);
}

/* ===== باقي صفحات الدخول (نسيت كلمة المرور / إعادة التعيين / تأكيد الإيميل / تغيير المؤقتة / انتظار التأكيد) ===== */
/* الزرار المقفول لحد ما الكود يكمل (مش وقت التحميل): باهت ومابيتملاش بالتدرّج */
.auth-wrapper.auth-emboss .auth-btn:disabled:not(:has(.fa-spinner)) { opacity: .55; color: var(--emb-muted); }
.auth-wrapper.auth-emboss .auth-btn:disabled:not(:has(.fa-spinner)):hover { box-shadow: 7px 7px 16px var(--emb-sh-dark), -7px -7px 16px var(--emb-sh-light); }
.auth-wrapper.auth-emboss .auth-btn:disabled:not(:has(.fa-spinner)):hover::before,
.auth-wrapper.auth-emboss .auth-btn:disabled:not(:has(.fa-spinner)):hover::after { opacity: 0; animation: none; }
.auth-wrapper.auth-emboss a.auth-btn { text-decoration: none; }

/* اسم العميل وإيميله / الإيميل اللي مستني التأكيد: كبسولة محفورة */
.auth-wrapper.auth-emboss .verify-email-display,
.auth-wrapper.auth-emboss .auth-email-pill {
    display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 10px 16px 10px 10px; border-radius: 18px;
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: inset 4px 4px 9px var(--emb-in-dark), inset -4px -4px 9px var(--emb-in-light);
}
.auth-wrapper.auth-emboss .verify-email-display i,
.auth-wrapper.auth-emboss .auth-email-pill i {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
    font-size: 1.05rem; color: var(--emb-primary); background: var(--emb-surface);
    box-shadow: 4px 4px 9px var(--emb-sh-dark), -4px -4px 9px var(--emb-sh-light);
}
.auth-wrapper.auth-emboss .verify-email-display div { min-width: 0; text-align: right; }
.auth-wrapper.auth-emboss .verify-email-display strong { color: var(--emb-text); }
.auth-wrapper.auth-emboss .verify-email-display span { display: block; color: var(--emb-text-2); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-wrapper.auth-emboss .auth-header .auth-email-pill { margin: 14px 0 0; color: var(--emb-text) !important; font-size: .95rem; font-weight: 700; }
.auth-wrapper.auth-emboss .auth-email-pill span { flex: 1; min-width: 0; direction: ltr; text-align: left; overflow-wrap: anywhere; }

/* خانات كود التأكيد (6 مربعات محفورة) */
.auth-wrapper.auth-emboss .otp-inputs { gap: 10px; margin-bottom: 24px; }
.auth-wrapper.auth-emboss .otp-digit {
    width: 50px; height: 58px; border-radius: 14px; color: var(--emb-text);
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: inset 4px 4px 9px var(--emb-in-dark), inset -4px -4px 9px var(--emb-in-light);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-wrapper.auth-emboss .otp-digit:focus {
    transform: none; background: var(--emb-surface); border-color: rgba(var(--emb-primary-rgb), .55);
    box-shadow: inset 4px 4px 9px var(--emb-in-dark), inset -4px -4px 9px var(--emb-in-light), 0 0 0 3px rgba(var(--emb-primary-rgb), .14);
}
html[data-theme="light"] .auth-wrapper.auth-emboss .otp-digit {
    background: var(--emb-surface) !important; border-color: var(--emb-rim) !important; color: var(--emb-text) !important;
}
html[data-theme="light"] .auth-wrapper.auth-emboss .otp-digit:focus { border-color: rgba(var(--emb-primary-rgb), .55) !important; }

/* «إعادة الإرسال (60)» */
.auth-wrapper.auth-emboss .auth-link-btn {
    min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: inherit; font-size: .88rem; font-weight: 700; color: var(--emb-primary);
}
.auth-wrapper.auth-emboss .auth-link-btn:hover:not(:disabled) { box-shadow: inset 3px 3px 7px var(--emb-in-dark), inset -3px -3px 7px var(--emb-in-light); }
.auth-wrapper.auth-emboss .auth-link-btn:disabled { color: var(--emb-muted); cursor: default; }
.auth-wrapper.auth-emboss .auth-link-btn:focus-visible { outline: 2px solid var(--emb-primary); outline-offset: 2px; }

/* تم التأكيد: دايرة بارزة وجواها علامة صح خضرا */
.auth-wrapper.auth-emboss .auth-done-ico {
    position: relative; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; color: #10b981; background: var(--emb-surface);
    box-shadow: 8px 8px 18px var(--emb-sh-dark), -8px -8px 18px var(--emb-sh-light);
}
.auth-wrapper.auth-emboss .auth-done-ico::before {
    content: ''; position: absolute; inset: 10px; border-radius: 50%;
    box-shadow: inset 3px 3px 7px var(--emb-in-dark), inset -3px -3px 7px var(--emb-in-light);
}
.auth-wrapper.auth-emboss .auth-done-ico i { position: relative; }
.auth-wrapper.auth-emboss .auth-done-title { margin: 0 0 10px; font-size: 1.1rem; font-weight: 800; color: #10b981; }
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-done-ico,
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-done-title { color: #047857; }

/* تنبيه «كلمة المرور الحالية مؤقتة» + خطوات التأكيد: صندوق محفور بلمسة كهرماني */
.auth-wrapper.auth-emboss .auth-note,
.auth-wrapper.auth-emboss .auth-steps {
    --emb-warn: #f59e0b;
    margin: 0 0 20px; padding: 14px 16px; border-radius: 18px; text-align: right;
    font-size: .88rem; line-height: 1.8; color: var(--emb-text-2);
    background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: inset 4px 4px 9px var(--emb-in-dark), inset -4px -4px 9px var(--emb-in-light);
}
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-note,
html[data-theme="light"] .auth-wrapper.auth-emboss .auth-steps { --emb-warn: #b45309; }
.auth-wrapper.auth-emboss .auth-note { display: flex; align-items: flex-start; gap: 10px; }
.auth-wrapper.auth-emboss .auth-note > i { margin-top: 5px; color: var(--emb-warn); }
.auth-wrapper.auth-emboss .auth-note b { color: var(--emb-warn); }
.auth-wrapper.auth-emboss .auth-steps h4 { margin: 0 0 6px; font-size: .95rem; color: var(--emb-warn); }
.auth-wrapper.auth-emboss .auth-steps ol { margin: 0; padding-right: 20px; line-height: 2; }
.auth-wrapper.auth-emboss .auth-steps strong { color: var(--emb-text); }
.auth-wrapper.auth-emboss .auth-steps strong.is-accent { color: var(--emb-primary); }

/* «لم تصلك الرسالة؟» + زرار إعادة الإرسال */
.auth-wrapper.auth-emboss .auth-resend { margin-top: 6px; }
.auth-wrapper.auth-emboss .auth-resend p { margin: 0 0 12px; font-size: .86rem; color: var(--emb-text-2); }

/* كارت تأكيد الموبايل (لما رسايل SMS تشتغل): الكود والرقم يفضلوا باينين */
.auth-wrapper.auth-emboss .pv-card .form-input::placeholder { color: var(--emb-muted); }

@media (max-width: 480px) {
    .auth-wrapper.auth-emboss .otp-inputs { gap: 7px; }
    .auth-wrapper.auth-emboss .otp-digit { width: 42px; height: 50px; }
}

@media (max-width: 480px) {
    .auth-wrapper.auth-emboss { margin-top: 18px; }
    .auth-wrapper.auth-emboss .auth-card { padding: 24px 18px 18px; border-radius: 24px; }
    .auth-wrapper.auth-emboss .auth-header h1 { font-size: 1.3rem; }
    .auth-wrapper.auth-emboss .auth-perks span { font-size: .7rem; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-wrapper.auth-emboss .auth-header .auth-icon i,
    .auth-wrapper.auth-emboss .auth-btn:hover::after { animation: none; }
    .auth-wrapper.auth-emboss .auth-card.emb-flip-in,
    .auth-wrapper.auth-emboss .auth-card.emb-flip-out { animation: none; }
}

/* ===== تكملة الإيميل (js/email-suggest.js) في صفحتي الدخول والتسجيل: نفس القائمة بشكل بارز =====
   القائمة بتتحط على الـ body (برّه الكارت) فبنعرّف ألوانها هنا تاني — قواعد لوحدها علشان :has */
html body:has(.auth-emboss) #mbk-email-sug {
    --emb-surface: #14141d; --emb-sh-dark: rgba(0, 0, 0, .78); --emb-sh-light: rgba(255, 255, 255, .05);
    --emb-in-dark: rgba(0, 0, 0, .62); --emb-in-light: rgba(255, 255, 255, .04); --emb-rim: rgba(255, 255, 255, .07);
    --emb-primary: #00d4ff; --emb-text: #f8fafc; --emb-text-2: #a0a0b0; --emb-muted: #94a3b8;
    border-radius: 18px; background: var(--emb-surface); border: 1px solid var(--emb-rim);
    box-shadow: 12px 12px 28px var(--emb-sh-dark), -8px -8px 22px var(--emb-sh-light);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="light"] body:has(.auth-emboss) #mbk-email-sug {
    --emb-surface: #e9eef5; --emb-sh-dark: rgba(163, 177, 198, .75); --emb-sh-light: rgba(255, 255, 255, .95);
    --emb-in-dark: rgba(163, 177, 198, .7); --emb-in-light: rgba(255, 255, 255, .9); --emb-rim: rgba(255, 255, 255, .6);
    --emb-primary: #7c3aed; --emb-text: #0f172a; --emb-text-2: #475569; --emb-muted: #556070;
    background: var(--emb-surface); border-color: var(--emb-rim);
    box-shadow: 12px 12px 28px var(--emb-sh-dark), -8px -8px 22px var(--emb-sh-light);
}
html body:has(.auth-emboss) #mbk-email-sug .mes-head { color: var(--emb-muted); border-bottom-color: var(--emb-rim); }
html body:has(.auth-emboss) #mbk-email-sug kbd {
    color: var(--emb-text-2); background: var(--emb-surface); border: 0;
    box-shadow: 2px 2px 4px var(--emb-sh-dark), -2px -2px 4px var(--emb-sh-light);
}
html body:has(.auth-emboss) #mbk-email-sug .mes-opt { color: var(--emb-text); border-radius: 12px; transition: box-shadow .15s ease; }
html body:has(.auth-emboss) #mbk-email-sug .mes-local,
html body:has(.auth-emboss) #mbk-email-sug .mes-at { color: var(--emb-text); }
html body:has(.auth-emboss) #mbk-email-sug .mes-addr b { color: var(--emb-primary); }
html body:has(.auth-emboss) #mbk-email-sug .mes-name { color: var(--emb-muted); }
html body:has(.auth-emboss) #mbk-email-sug .mes-go { fill: var(--emb-primary); }
html body:has(.auth-emboss) #mbk-email-sug .mes-badge { box-shadow: 2px 2px 5px var(--emb-sh-dark), -2px -2px 5px var(--emb-sh-light); }
/* الاقتراح اللي عليه الاختيار بيبان محفور زي الخانة */
html body:has(.auth-emboss) #mbk-email-sug .mes-opt:hover,
html body:has(.auth-emboss) #mbk-email-sug .mes-opt.is-active {
    background: transparent;
    box-shadow: inset 3px 3px 7px var(--emb-in-dark), inset -3px -3px 7px var(--emb-in-light);
}