/*
 * @almadah-clean-room — كُتب من الصفر من وصف السلوك، لا نسخًا من كود المورّد (12/11/2026)
 *
 * أساس الصفحات بدل ملفات تنسيق المورّد (CleanAssets — الخطوة 9 من الاستقلال).
 * يُحمَّل في موضع ملف المورّد القديم نفسه من ترتيب التنسيق (بعد vendors.css وbootstrap-rtl، قبل custom-ux وam-*)
 * فتبقى علاقة الأسبقية بين الملفات كما كانت.
 *
 * محتواه = ما تستعمله الصفحات الجديدة وأجزاؤها المشتركة فعلًا، لا أكثر:
 *   قيس بتغطية قواعد Chrome على الصفحات الجديدة (الرئيسية · المنتج · القوائم · السلة · الدفع · الحساب · تفاصيل الطلب في الإدارة)
 *   ثم بفرق الأنماط المحسوبة لكل عنصر قبل/بعد حتى صار صفرًا. الأقسام:
 *     ١) المتغيّرات  ٢) أساس الوثيقة  ٣) أدوات الأصناف  ٤) مكوّنات Bootstrap كما تظهر في متجرنا
 *     ٥) اللوحات الجانبية والنوافذ  ٦) حقل الجوال الدولي  ٧) التقييم بالنجوم وأزرار الكمية
 */

/* ─────────── ١) المتغيّرات ─────────── */
/* ألوان الحالة في المتجر (الرأس يعيد تعريف الأساسي والثانوي من الإعدادات بعد هذا الملف) */
:root {
    --white: #fff;
    --green: #28a745;
    --red: #dc3545;
    --dark: #111723;
    --secondary: #8f97ab;
    --soft-secondary: rgba(143, 151, 171, .15);
    --hov-primary: #e56f0e;
    --soft-primary: rgba(247, 123, 11, .15);
    --success: #0abb75;
    --soft-success: rgba(10, 187, 117, .15);
    --info: #25bcf1;
    --soft-info: rgba(37, 188, 241, .15);
    --warning: #ffc519;
    --soft-warning: rgba(255, 197, 25, .15);
    --danger: #ef486a;
    --soft-danger: rgba(239, 72, 106, .15);
    --light: #f2f3f8;
    --soft-light: #dfdfe6;
    --gray: #6c757d;
    --preorder-orange: #ff6002;
    /* مؤشر «×» فوق الخلفيات التي يغلقها النقر */
    --am-cursor-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fff' stroke='%230f1111' stroke-width='1.5'/%3E%3Cpath d='M11 11l10 10M21 11 11 21' stroke='%230f1111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, crosshair;
}

/* ─────────── ٢) أساس الوثيقة ─────────── */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #1b1b28;
    background-color: #fff;
    max-width: 100vw;
    overflow-x: hidden;
}

/* شريط تمرير الصفحة مخفي (التمرير نفسه يعمل) */
body::-webkit-scrollbar { display: none !important; }

a { color: var(--primary); }
a:hover { text-decoration: none; color: var(--hov-primary); }
a:hover, a:focus { text-decoration: none; outline: none; }

/* لا حلقة تركيز ولا ظل للعناصر المركَّز عليها (كما تعمل الواجهة اليوم؛ عناصرنا الجديدة ترسم :focus-visible بنفسها) */
:focus, a:focus, button:focus { box-shadow: none; outline: none; }

pre { white-space: initial; }

/* انتقال ناعم للروابط والأزرار والحقول */
a, button, input, textarea, .btn, .has-transition { transition: all .5s ease; }

/* الصور والفيديو لا تتجاوز حاويتها وتحتفظ بنسبتها، والفيديو كتلة تملأ حاويتها */
img, video { max-height: 100%; object-fit: contain; }
video { display: block; width: 100%; height: 100%; }

/* كل ما في اسم صنفه «border» وفواصل hr بلون الخط الفاتح نفسه */
[class*="border"], hr { border-color: #ededf2 !important; }

/* حقول البحث والأرقام بلا زخارف المتصفح */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.body-no-scroll { overflow: hidden; }

/* ─────────── ٣) أدوات الأصناف ─────────── */
/* الوزن */
.fw-400 { font-weight: 400 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-bold { font-weight: 700 !important; }

/* المقاس بالبكسل المقابل (1rem = 16px) */
.fs-10 { font-size: .625rem !important; }
.fs-11 { font-size: .6875rem !important; }
.fs-12 { font-size: .75rem !important; }
.fs-13 { font-size: .8125rem !important; }
.fs-14 { font-size: .875rem !important; }
.fs-15 { font-size: .9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.fs-24 { font-size: 1.5rem !important; }
.fs-28 { font-size: 1.75rem !important; }
.fs-30 { font-size: 1.875rem !important; }
@media (min-width: 768px) {
    .fs-md-13 { font-size: 13px !important; }
    .fs-md-20 { font-size: 20px !important; }
}

/* الشفافية */
.opacity-60, .hov-opacity-60:hover { opacity: .6 !important; }
.hov-opacity-70:hover { opacity: .7 !important; }
.shadow-none { box-shadow: none !important; }

/* المسافات الإضافية على سلّم Bootstrap */
.pt-6, .py-6, .p-6 { padding-top: 4rem; }
.pb-6, .py-6, .p-6 { padding-bottom: 4rem; }
.pl-15px, .px-15px, .p-15px { padding-left: 15px; }
.pr-15px, .px-15px, .p-15px { padding-right: 15px; }
.pt-15px, .py-15px, .p-15px { padding-top: 15px; }
.pb-15px, .py-15px, .p-15px { padding-bottom: 15px; }
.pb-30px, .py-30px, .p-30px { padding-bottom: 30px; }
.pt-20px, .py-20px, .p-20px { padding-top: 20px; }
.pb-20px, .py-20px, .p-20px { padding-bottom: 20px; }
.pl-20px, .px-20px, .p-20px { padding-left: 20px; }
.pr-20px, .px-20px, .p-20px { padding-right: 20px; }

.w-48px { width: 48px; }
.h-48px { height: 48px; }
.size-15px { width: 15px; height: 15px; }
.top-0 { top: 0 !important; }
.left-0 { left: 0 !important; }

.rounded-1 { border-radius: .25rem !important; }
.rounded-2 { border-radius: .5rem !important; }
.rounded-corner-8px { border-radius: 8px !important; }
.hov-bg-soft-primary:hover { background-color: var(--soft-primary) !important; }

/* صورة تملأ مربعها (وعلى الجوال تُقصّ من الأسفل لا من الوسط) */
.img-fit { max-height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 576px) {
    .img-fit { object-position: top; }
}

/* نص يُقطع بعد سطرين بثلاث نقاط */
.text-truncate-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ألوان النص والحدود بمتغيّرات المتجر */
.text-primary, .hov-text-primary:hover { color: var(--primary) !important; }
.text-warning, .hov-text-warning:hover { color: var(--warning) !important; }
.text-danger, .hov-text-danger:hover { color: var(--danger) !important; }
.text-success, .hov-text-success:hover { color: var(--success) !important; }
.text-dark, .hov-text-dark:hover { color: var(--dark) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-gray { color: var(--gray) !important; }
.text-orange { color: var(--preorder-orange) !important; }
.bg-soft-primary { background-color: var(--soft-primary) !important; }
.bg-soft-warning { background-color: var(--soft-warning) !important; }
.bg-soft-light { background-color: var(--soft-light) !important; }
.bg-black { background-color: #17171f !important; }
.border-primary { border-color: var(--primary) !important; }
.border-gray-300 { border-color: #e2e8f0 !important; }
.border-2 { border: 2px solid !important; }
.border-gray-400 { border-color: #cbd5e0 !important; }

/* رابط معطَّل مؤقتًا (أثناء إضافة للسلة مثلًا) */
.link-disable { pointer-events: none; opacity: .3; }

/* شريط تمرير رفيع فاتح داخل الصناديق */
.c-scrollbar-light { scrollbar-color: rgba(24, 28, 41, .08); scrollbar-width: thin; }
.c-scrollbar-light::-webkit-scrollbar { width: 4px; background: rgba(24, 28, 41, .08); border-radius: 3px; }
.c-scrollbar-light::-webkit-scrollbar-track { background: transparent; }
.c-scrollbar-light::-webkit-scrollbar-thumb { background: rgba(24, 28, 41, .1); border-radius: 3px; }

/* الحاوية تتسع إلى 1400px على الشاشات العريضة جدًّا */
@media (min-width: 1500px) {
    .container { max-width: 1400px; }
}

/* صف بفراغات 5px بين الأعمدة */
.gutters-5 { margin-right: -5px; margin-left: -5px; }
.gutters-5 > .col, .gutters-5 > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

/* وبفراغات 10px (نموذج تسجيل المنشأة في نسبة، وصفحات اللوحتين) */
.gutters-10 { margin-right: -10px; margin-left: -10px; }
.gutters-10 > .col, .gutters-10 > [class*="col-"] { padding-right: 10px; padding-left: 10px; }

/* ظل البطاقات الخفيف: أهدأ من ظل Bootstrap الافتراضي (حذف الحساب · تأكيد الاستلام · انتظار نسبة) */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important; }

/* أيقونات الأسهم تنعكس في الاتجاه من اليمين */
[dir="rtl"] .la-angle-right,
[dir="rtl"] .la-angle-left { transform: rotate(180deg); }

/* ─────────── ٤) مكوّنات Bootstrap كما تظهر في متجرنا ─────────── */
.card { box-shadow: 0 0 13px 0 rgba(82, 63, 105, .05); background-color: #fff; margin-bottom: 20px; border-color: #ebedf2; }
.card .card-header {
    display: flex; align-items: center; justify-content: space-between; position: relative;
    padding: 12px 25px; border-bottom: 1px solid #ebedf2; min-height: 50px;
    border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: transparent;
}
.card .card-body { padding: 20px 25px; border-radius: 4px; }

.form-control { padding: .6rem 1rem; font-size: .875rem; height: calc(1.3125rem + 1.2rem + 2px); border: 1px solid #dfdfe6; color: #898b92; }
.form-control-sm { height: calc(1.5rem + .8rem + 2px); padding: .4rem .7rem; font-size: .8125rem; line-height: 1.5; border-radius: .25rem; }
.form-control::placeholder { color: #898b92; }
.form-control:focus { border-color: var(--primary); box-shadow: none; }
.form-control[readonly] { background-color: #f7f8fa; opacity: 1; border-color: #dfdfe6; }
.form-control:disabled { background-color: #f7f8fa; opacity: 1; border-color: #dfdfe6; }

.btn { padding: .6rem 1.2rem; font-size: .875rem; color: #2a3242; font-weight: inherit; }
.btn-xs { padding: .25rem .75rem; font-size: .75rem; }
.btn-sm { padding: .416rem 1rem; font-size: .8125rem; }
.btn.focus, .btn:focus:not(.btn-shadow) { box-shadow: none !important; outline: none; }

/* ألوان الأزرار بمتغيّرات المتجر: الممتلئ · الناعم (خلفية فاتحة وتمتلئ عند المرور) · المحدَّد */
.btn-primary, .btn-soft-primary:hover, .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.disabled, .btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { background-color: var(--hov-primary); border-color: var(--hov-primary); }
.btn-secondary, .btn-soft-secondary:hover, .btn-outline-secondary:hover { background-color: var(--secondary); border-color: var(--secondary); color: var(--white); }
.btn-danger, .btn-soft-danger:hover, .btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); color: var(--white); }
.btn-light, .btn-outline-light:hover { background-color: var(--light); border-color: var(--light); }
.btn-soft-primary { background-color: var(--soft-primary); color: var(--primary); }
.btn-soft-secondary { background-color: var(--soft-secondary); color: var(--dark); }
/* الناعم الرمادي يصير مشمشيًّا فاتحًا بنص أبيض عند المرور (كما يظهر اليوم) */
.btn-soft-secondary:hover, .btn-outline-secondary:hover { background-color: #ffe7d8; border-color: #ffe7d8; color: var(--white); }
.btn-soft-danger { background-color: var(--soft-danger); color: var(--danger); }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-link { color: var(--primary); }
.btn-link:hover { color: var(--hov-primary); }
.btn-warning { background-color: var(--warning); border-color: var(--warning); }
.btn-soft-info { background-color: var(--soft-info); color: var(--info); }
.btn-soft-info:hover { background-color: var(--info); border-color: var(--info); color: var(--white); }
.btn-circle { border-radius: 50em; }
.btn-icon { font-size: 1rem; line-height: 1.4; padding: .6rem; width: calc(2.5125rem + 2px); height: calc(2.5125rem + 2px); }
.btn-sm.btn-icon { padding: .416rem; width: calc(2.02rem + 2px); height: calc(2.02rem + 2px); }

/* حالتا زر الإضافة للسلة: أثناء الإرسال ثم «أُضيف» */
.adding { pointer-events: none; opacity: .7; }
.added-success { background-color: #28a745 !important; color: #fff !important; }

/* دائرة التحميل بلا لون في جانبها الأيمن (تدور كقوس) */
.spinner-border { border-right-color: transparent !important; }

/* الشارة: دائرة 18px للأرقام بخط صغير يرث ارتفاع السطر، وbadge-inline بعرض نصها */
.badge { display: inline-flex; justify-content: center; align-items: center; height: 18px; width: 18px; font-size: .65rem; font-weight: 500; line-height: unset; }
.badge-inline { width: auto; }
.badge-secondary { background-color: var(--secondary); }
.badge-success { background-color: var(--success); }
.badge-danger { background-color: var(--danger); }
.badge-warning { background-color: var(--warning); }
.badge-info { background-color: var(--info); }
.badge-soft-secondary { background-color: var(--soft-secondary); color: var(--secondary); }

/* ─────────── ٥) اللوحات الجانبية والنوافذ ─────────── */
/* اللوحة الجانبية اليمنى (خيارات المنتج · التقييم): تنزلق من اليمين وتغطي 90% من شاشة الجوال */
#rightOffcanvas { box-shadow: rgba(50, 50, 93, .16) 0 0 40px; transition: right .4s ease; min-height: 100vh; }
.right-offcanvas-sm { width: 240px; right: -240px; }
.right-offcanvas-md { width: 450px; right: -450px; }
.right-offcanvas-lg { width: 648px; right: -648px; }
@media (min-width: 320px) and (max-width: 575px) {
    #rightOffcanvas { right: -90%; width: 90% !important; }
}
#rightOffcanvas.active { right: 0; }
#rightOffcanvas .right-offcanvas-body { padding-bottom: 120px; width: 100%; overflow-y: scroll; }

#rightOffcanvasOverlay {
    background: rgba(0, 0, 0, .2);
    backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1040;
    cursor: var(--am-cursor-close, crosshair);
}
#rightOffcanvasOverlay.active { opacity: 1; visibility: visible; }

/* اللوحة الجانبية العامة في الإدارة (إضافة سريعة من نموذج المنتج …) بالسلوك نفسه */
#globalRightOffcanvas { box-shadow: rgba(50, 50, 93, .16) 0 0 40px; transition: right .4s ease; min-height: 100vh; }
@media (min-width: 320px) and (max-width: 575px) {
    #globalRightOffcanvas { right: -90%; width: 90% !important; }
}
#globalRightOffcanvas.active { right: 0; }
#globalRightOffcanvas .global-right-offcanvas-body { padding-bottom: 120px; width: 100%; overflow-y: scroll; }
#globalRightOffcanvasOverlay {
    background: rgba(0, 0, 0, .2); backdrop-filter: blur(1px); opacity: 0; visibility: hidden;
    transition: opacity .3s ease; z-index: 1040; cursor: var(--am-cursor-close, crosshair);
}
#globalRightOffcanvasOverlay.active { opacity: 1; visibility: visible; }

/* نافذة التأكيد: النقر خارجها يغلقها (مؤشر ×)، وداخلها مؤشر عادي، وروابط نصها مسطّرة */
.confirmDeleteModal { cursor: var(--am-cursor-close, crosshair); }
.confirmDeleteModal .modal-content { cursor: default; }
.confirmDeleteModal .modal-content .modal-body p a { text-decoration: underline; }
#bulk-action-modal { z-index: 1050 !important; }
/* زرّا نافذة التأكيد: الرجوع أخضر والتأكيد أحمر عند المرور */
#back-btn:hover { border-color: var(--green) !important; background-color: var(--green) !important; color: var(--white) !important; }
#conform-yes-btn:hover { border-color: var(--red) !important; background-color: var(--red) !important; color: var(--white) !important; }
#size-guide-modal.show { z-index: 1050 !important; }

/* خلفية النوافذ داكنة مزرقّة، والنافذة المفتوحة لا تُظهر شريط تمرير خاصًّا بها */
.modal-backdrop { background-color: #11151d; }
.modal-open .modal { overflow-x: hidden; overflow-y: hidden; }

/* نوافذ Bootstrap: إطار رفيع، رأس وتذييل مرنان بارتفاع 60px على الأقل، وجسم بحشوة 20/25 يتمرّر داخله
   (70% من الشاشة، و80% من 768px)، وزر الإغلاق في الرأس أيقونة × من خط Line Awesome (vendors.css) */
.modal-content { border: 1px solid rgba(20, 20, 35, .2); }
.modal-header .close { font-size: 0; }
.modal-header .close::before { font-family: "Line Awesome Free"; font-weight: 900; content: "\f00d"; font-size: 20px; }
.modal-content .modal-footer {
    display: flex; align-items: center; justify-content: flex-end; position: relative;
    padding: 10px 25px; border-top: 1px solid #ebedf2; min-height: 60px; background-color: transparent;
}
.modal-content .modal-header {
    display: flex; align-items: center; justify-content: space-between; position: relative;
    padding: 12px 25px; border-bottom: 1px solid #ebedf2; min-height: 60px; background-color: transparent;
}
.modal-content .modal-body { padding: 20px 25px; overflow-y: auto; max-height: 70vh; }
@media (min-width: 768px) {
    .modal-content .modal-body { max-height: 80vh; }
}

/* نافذتا السلة والدخول بزوايا 8px، والسلة فوق خلفيتها دائمًا */
#addToCart { z-index: 1050 !important; }
#addToCart .modal-content,
#login_modal .modal-content { border-radius: 8px !important; }

/* ─────────── ٦) حقل الجوال الدولي ─────────── */
.iti { display: block; width: 100%; }
.iti--allow-dropdown input { padding-left: 95px !important; }
.iti--separate-dial-code .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background: #fff; margin-left: 2px; border-right: 1px solid #dfdfe6; }

/* ─────────── ٧) التنبيه العائم (ALM.plugins.notify في am-core.js) ─────────── */
/* البادئة amb- لا am-: الاسم am-toast مستعمل في am-account/am-checkout/am-admin/am-auth/am-seller بأنماط أخرى (موضع وسط · خلفية داكنة) فكان يطغى على تنبيهنا ويدفعه خارج الشاشة (13/11/2026) */
.amb-toasts { position: fixed; left: 20px; bottom: 20px; z-index: 1060; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; }
.amb-toast {
    position: relative; overflow: hidden; pointer-events: auto;
    width: 350px; padding: 1.25rem 50px 1.25rem 1.25rem; border-radius: .25rem;
    font-size: .875rem; line-height: 1.5; color: #fff; background: var(--dark);
    box-shadow: 0 5px 20px 0 rgba(38, 45, 58, .2);
    opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease;
}
[dir="rtl"] .amb-toast { padding: 1.25rem 1.25rem 1.25rem 50px; text-align: right; }
.amb-toast.is-in { opacity: 1; transform: none; }
.amb-toast.is-out { opacity: 0; transform: translateY(16px); }
.amb-toast__x {
    position: absolute; top: 50%; right: 15px; width: 22px; height: 22px; margin-top: -11px; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: transparent; color: inherit; opacity: .7; cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
[dir="rtl"] .amb-toast__x { right: auto; left: 15px; }
.amb-toast__x:hover { opacity: 1; background: #fff; color: var(--dark); }
.amb-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .9; }
.amb-toast--success { background: var(--success); }
.amb-toast--danger { background: var(--danger); }
.amb-toast--warning { background: var(--warning); }
.amb-toast--info { background: var(--info); }
.amb-toast--primary { background: var(--primary); }
.amb-toast--secondary { background: var(--secondary); }
.amb-toast--secondary-base { background: var(--secondary-base); }
.amb-toast--light { background: var(--light); color: var(--dark); }
.amb-toast--light .amb-toast__bar { background: var(--primary); }
@media (max-width: 575px) {
    .amb-toast { width: calc(100vw - 40px); }
}