/* =====================================================================
موقع "قُرّة أعيُن" — الأساس المشترك (Base / Core) • site.css
---------------------------------------------------------------------
معماريّة الأنماط (لتقليل التحميل غير الضروري):
• هذا الملف (site.css) = نظام التصميم المشترك في "كل" الصفحات فقط:
tokens + الهيدر/الفوتر/القائمة + الأزرار + البطاقات العامة + الأسعار
+ النجوم + المدخلات + أدوات + keyframes.
• لكل صفحة ملفّها الخاص يحمل مكوّناتها وحدها (لا تُحمَّل في غيرها):
home.css · about.css · family.css · store.css · product.css
· programs.css · event.css · consultations.css
ترتيب التحميل في القالب (مثال صفحة المتجر):
@stack('page-css') →
ملاحظة: الخطوط مستوردة بالأسفل عبر @import (يمكن نقلها إلى ).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');
/* =====================================================================
1) Design Tokens
===================================================================== */
:root {
/* Teal أساسي */
--c-teal: #15A99F; --c-teal-d: #0E8A82; --c-teal-dd: #0C443F;
/* نصوص */
--c-ink: #143E3C; --c-ink-2: #173E3C; --c-body: #2A524F;
--c-muted: #5C7370; --c-muted-2: #7C9491; --c-muted-3: #8CA19E;
/* وظيفية / مسارات */
--c-accent: #F7941E; --c-accent-d: #E8861A;
--c-lime: #8CC63F; --c-lime-d: #6BA52C;
--c-blue: #2EA4D8; --c-blue-d: #2186BC;
--c-star: #FBB60D;
/* خلفيات */
--bg-page: #F1F7EF; --bg-soft-teal: #E4F5F2; --bg-soft-teal2: #E3F4F1;
--bg-soft-green: #EAF6E8; --bg-soft-lime: #EFF8E2; --bg-soft-sand: #FFF3DF;
--bg-soft-blue: #E3F2FB; --bg-panel: #F6FBF4;
/* حدود */
--line: #E7EFE9; --line-2: #EEF4EF; --line-3: #D6E6DF;
/* خطوط */
--font-head: 'Baloo Bhaijaan 2', cursive;
--font-body: 'Tajawal', sans-serif;
/* زوايا */
--r-sm: 11px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 30px;
/* ظلال */
--sh-header: 0 4px 24px rgba(20,90,84,.06);
--sh-card: 0 14px 36px rgba(20,90,84,.08);
--sh-card-sm: 0 10px 28px rgba(20,90,84,.07);
--sh-card-hov: 0 22px 48px rgba(20,90,84,.14);
--sh-card-hov2: 0 18px 40px rgba(20,90,84,.13);
--sh-btn-teal: 0 6px 16px rgba(21,169,159,.32);
--sh-btn-accent: 0 10px 24px rgba(247,148,30,.34);
--sh-soft: 0 4px 14px rgba(20,90,84,.08);
/* لون المسار الافتراضي (Teal) — يُعاد تعريفه عبر .q-track-* */
--track: var(--c-teal); --track-d: var(--c-teal-d); --track-soft: var(--bg-soft-teal);
}
/* المسارات: سند=teal · ألفة=lime · مراس=blue · accent=برتقالي */
.q-track-teal { --track: var(--c-teal); --track-d: var(--c-teal-d); --track-soft: var(--bg-soft-teal); }
.q-track-lime { --track: var(--c-lime); --track-d: var(--c-lime-d); --track-soft: var(--bg-soft-lime); }
.q-track-blue { --track: var(--c-blue); --track-d: var(--c-blue-d); --track-soft: var(--bg-soft-blue); }
.q-track-sand { --track: var(--c-accent); --track-d: var(--c-accent-d); --track-soft: var(--bg-soft-sand); }
/* =====================================================================
2) Base / Reset
===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
background: var(--bg-page); font-family: var(--font-body); color: var(--c-ink-2);
direction: rtl; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--c-teal); color: #fff; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, .q-head { font-family: var(--font-head); color: var(--c-ink); }
/* حشو أفقي ثابت للحاوية — important لتجاوز أنماط inline (padding:X 0 Y) التي كانت تُصفّره
وتُسبّب تجاوز هوامش صفوف Bootstrap السالبة لحواف الشاشة (فراغ/إزاحة على اليسار في RTL) */
.container { padding-inline: 18px !important; }
@media (min-width: 768px) { .container { padding-inline: 28px !important; } }
@media (min-width: 1200px) { .container { max-width: 1240px; } }
/* =====================================================================
3) عناوين الأقسام
===================================================================== */
.q-section { padding: clamp(50px, 7vw, 78px) 0; }
.q-section--tight { padding: clamp(44px, 6vw, 64px) 0; }
.q-section--alt { background: #fff; }
.q-section-head { text-align: center; margin-bottom: 48px; }
.q-section-head--split { text-align: start; margin-bottom: 40px; }
.q-eyebrow { font-weight: 800; color: var(--c-accent); font-size: 15px; letter-spacing: 1px; margin-bottom: 10px; }
.q-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(27px,4.5vw,40px); line-height: 1.3; margin: 0 0 14px; color: var(--c-ink); }
.q-subtitle { font-size: 17px; color: var(--c-muted); font-weight: 500; max-width: 600px; margin: 0 auto; }
/* =====================================================================
4) Buttons
===================================================================== */
.q-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-weight: 800; font-size: 15px;
padding: 13px 26px; border-radius: var(--r-md); border: none; cursor: pointer;
line-height: 1; white-space: nowrap;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.q-btn--lg { font-size: 16px; padding: 15px 30px; }
.q-btn--sm { font-size: 14px; padding: 10px 20px; border-radius: var(--r-sm); }
.q-btn--block { width: 100%; }
.q-btn--accent { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn-accent); }
.q-btn--accent:hover { background: var(--c-accent-d); }
.q-btn--teal { background: var(--c-teal); color: #fff; box-shadow: var(--sh-btn-teal); }
.q-btn--teal:hover { background: var(--c-teal-d); }
.q-btn--white { background: #fff; color: var(--c-teal-d); box-shadow: 0 6px 16px rgba(20,90,84,.1); }
.q-btn--white:hover { background: var(--bg-page); }
.q-btn--soft { background: var(--bg-soft-teal); color: var(--c-teal-d); }
.q-btn--soft:hover { background: #d4efea; }
.q-btn--track { background: var(--track); color: #fff; }
.q-btn--track:hover { background: var(--track-d); }
.q-btn[disabled], .q-btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* =====================================================================
5) Top bar + Header / Nav (chrome مشترك)
===================================================================== */
.q-topbar { background: var(--c-teal-d); color: #EAF7F5; font-size: 13.5px; font-weight: 500; }
.q-topbar__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 9px 0; }
.q-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-lime); flex-shrink: 0; }
.q-header { background: #fff; box-shadow: var(--sh-header); position: sticky; top: 0; z-index: 50; }
.q-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.q-logo { flex-shrink: 0; display: flex; align-items: center; }
.q-logo img { height: 54px; width: auto; display: block; }
.q-nav { display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: 15px; }
.q-nav__link { color: var(--c-body); padding-bottom: 4px; border-bottom: 3px solid transparent; transition: color .15s; }
.q-nav__link:hover { color: var(--c-teal); }
.q-nav__link.is-active { color: var(--c-teal-d); border-bottom-color: var(--c-teal-d); }
.q-iconbtn { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-page); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .15s; }
.q-iconbtn:hover { background: var(--bg-soft-teal); }
.q-badge-count { position: absolute; top: -7px; left: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--c-accent); color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* بطاقة المستخدم في الهيدر (حالة تسجيل الدخول) */
.q-userchip { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-page); border-radius: 13px; padding: 6px 8px 6px 14px; transition: background .15s; }
.q-userchip:hover { background: var(--bg-soft-teal); }
.q-userchip__text { text-align: start; line-height: 1.3; min-width: 0; }
.q-userchip__name { display: block; font-weight: 800; font-size: 13px; color: var(--c-ink); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-userchip__role { display: block; font-size: 11px; color: var(--c-muted-3); font-weight: 600; }
.q-userchip__avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--c-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 16px; flex-shrink: 0; }
/* بطاقة المستخدم داخل قائمة الجوال + زر الدخول */
.q-mobile-user { display: flex !important; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px !important; background: var(--bg-soft-teal) !important; border-radius: 14px; }
.q-mobile-user__text { text-align: start; line-height: 1.35; min-width: 0; }
.q-mobile-user__name { display: block; font-weight: 800; font-size: 15px; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-mobile-user__role { display: block; font-size: 12px; color: var(--c-teal-d); font-weight: 700; }
.q-mobile-login { margin-top: 10px !important; text-align: center; background: var(--c-teal) !important; color: #fff !important; font-weight: 800 !important; border-radius: 12px !important; padding: 13px !important; }
.q-mobile-menu { border-top: 1px solid var(--line-2); background: #fff; }
.q-mobile-menu__list { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 16px; }
.q-mobile-menu a { padding: 12px 10px; border-radius: var(--r-sm); font-weight: 700; color: var(--c-body); }
.q-mobile-menu a.is-active { font-weight: 800; color: var(--c-teal-d); background: var(--bg-page); }
/* فتات الطريق (breadcrumb) — صفحات commerce */
.q-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--c-muted); font-weight: 600; padding: 16px 0; }
.q-breadcrumb a:hover { color: var(--c-teal-d); }
.q-breadcrumb .sep { color: var(--c-muted-3); }
.q-breadcrumb .is-current { color: var(--c-ink); }
/* =====================================================================
6) Footer (chrome مشترك)
===================================================================== */
.q-footer { background: var(--c-teal-dd); color: #CFE6E2; padding: clamp(44px,6vw,68px) 0 26px; }
.q-footer h4 { font-family: var(--font-head); color: #fff; font-size: 17px; margin: 0 0 16px; }
.q-footer a { color: #BFDDD8; font-size: 14.5px; line-height: 2.1; transition: color .15s; }
.q-footer a:hover { color: #fff; }
.q-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 20px; font-size: 13px; color: #9FC4BE; text-align: center; }
.q-footer__logo { display: inline-flex; align-items: center; background: #fff; border-radius: 18px; padding: 14px 20px; margin-bottom: 18px; }
.q-footer__logo img { height: 62px; width: auto; display: block; }
.q-footer__social { display: flex; gap: 10px; }
.q-footer__social span { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; }
/* =====================================================================
7) بطاقات عامة (Design-system cards) — مُعاد استخدامها في عدّة صفحات
===================================================================== */
.q-card { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-card); transition: transform .2s ease, box-shadow .2s ease; }
.q-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hov); }
.q-card--track { border-top: 6px solid var(--track); padding: 32px 26px; }
.q-icon-box { width: 66px; height: 66px; border-radius: var(--r-lg); background: var(--track-soft); color: var(--track); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.q-ico { display: block; }
.q-icon-box--lg { width: 78px; height: 78px; border-radius: 24px; margin: 0 auto 20px; }
.q-card__title { font-family: var(--font-head); font-weight: 800; font-size: 21px; margin: 0 0 11px; color: var(--c-ink); line-height: 1.4; }
.q-card__text { font-size: 14.5px; line-height: 1.8; color: var(--c-muted); font-weight: 500; margin: 0 0 16px; }
.q-card__more { color: var(--track); font-weight: 800; font-size: 14.5px; }
/* بطاقة بصورة علوية (برامج/فعاليات/مقترحات) */
.q-media-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); transition: transform .2s ease, box-shadow .2s ease; }
.q-media-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hov); }
.q-media { position: relative; height: 280px; overflow: hidden; background: var(--bg-soft-green); }
.q-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.q-media-card__body { padding: 22px 22px 26px; }
.q-media-card__cat { font-weight: 700; font-size: 13px; color: var(--c-muted-3); margin-bottom: 8px; }
/* السعر */
.q-price { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--track); }
.q-price--sm { font-size: 22px; }
.q-price-unit { font-size: 13px; color: var(--c-muted-2); font-weight: 700; }
.q-price-old { font-size: 14px; color: var(--c-muted-2); font-weight: 600; text-decoration: line-through; margin-inline-start: 6px; }
/* شارة حالة عامة بلون المسار */
.q-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--track); color: #fff; font-weight: 800; font-size: 12.5px; padding: 6px 14px; border-radius: 20px; }
.q-badge--abs { position: absolute; top: 14px; right: 14px; }
/* النجوم */
.q-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--c-star); font-size: 15px; line-height: 1; }
.q-stars .is-empty { color: #DCE6DF; }
.q-stars__count { color: var(--c-muted-2); font-weight: 700; font-size: 12.5px; margin-inline-start: 4px; }
/* =====================================================================
8) مدخلات النماذج (مشتركة: تقييم/تسجيل/حجز/تواصل)
===================================================================== */
.q-label { display: block; font-weight: 700; font-size: 14px; color: var(--c-ink); margin-bottom: 8px; }
.q-input, .q-textarea, .q-select {
width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--c-ink);
background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
padding: 12px 16px; transition: border-color .15s, box-shadow .15s;
}
.q-input:focus, .q-textarea:focus, .q-select:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(21,169,159,.14); }
.q-textarea { resize: vertical; min-height: 110px; }
.q-qty { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-page); border-radius: var(--r-sm); padding: 4px; }
.q-qty button { width: 28px; height: 28px; border: none; border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; font-weight: 800; color: var(--c-teal-d); }
.q-qty span { min-width: 24px; text-align: center; font-weight: 800; }
/* =====================================================================
8b) مكوّنات مشتركة بين عدّة صفحات (أبطال/بانرات/تبويبات/سلة/إشعار)
تبقى هنا لأنها تتكرّر في 2–5 صفحات؛ المكوّنات الخاصة بصفحة واحدة في ملفها.
===================================================================== */
/* عنوان قسم بشريط جانبي ملوّن (المتجر/المنتج/البرامج/الفريق) */
.q-blockhead { display: flex; align-items: center; gap: 11px; }
.q-blockhead__bar { width: 8px; height: 26px; border-radius: 6px; background: var(--track); flex-shrink: 0; }
.q-blockhead__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px,4vw,26px); margin: 0; color: var(--c-ink); }
/* بطل بخلفية متدرّجة ناعمة + زخارف (الرئيسية/من نحن/الفريق/البرامج) */
.q-herowrap { position: relative; overflow: hidden; background: linear-gradient(160deg,#EAF6E8 0%,#E3F4F1 100%); }
.q-herowrap__inner { position: relative; z-index: 2; }
.q-pagehero { padding: 30px 0 62px; text-align: center; }
.q-pagehero .q-breadcrumb { justify-content: center; }
.q-pagehero__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px,5.6vw,53px); line-height: 1.25; margin: 0 0 18px; color: var(--c-ink); }
.q-pagehero__lead { font-size: clamp(16px,2.4vw,19px); line-height: 1.9; color: #4F6B68; font-weight: 500; text-align: center; margin: 0 auto; max-width: 640px; }
.q-blob { position: absolute; z-index: 0; border-radius: 48% 52% 60% 40%/55% 45% 55% 45%; }
.q-blob--lime { top: -90px; left: -70px; width: 320px; height: 320px; background: rgba(140,198,63,.18); }
.q-blob--blue { bottom: -110px; right: -50px; width: 280px; height: 280px; border-radius: 55% 45% 50% 50%/45% 55% 45% 55%; background: rgba(46,164,216,.14); }
.q-star-deco { position: absolute; z-index: 1; color: var(--c-accent); animation: twinkle 3s ease-in-out infinite; }
.q-hero-curve { height: 46px; background: var(--bg-page); border-radius: 50% 50% 0 0 / 100% 100% 0 0; margin-top: -23px; position: relative; z-index: 1; }
.q-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 8px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 13.5px; color: var(--c-teal-d); box-shadow: var(--sh-soft); }
.q-chip .q-dot { background: var(--c-lime); width: 8px; height: 8px; }
/* إطار صورة عائم (الرئيسية/قصّتنا) */
.q-img-frame { position: relative; }
.q-img-frame__backdrop { position: absolute; inset: -12px; border-radius: 36px; background: linear-gradient(150deg,#15A99F,#8CC63F); opacity: .16; transform: rotate(-4deg); }
.q-img-frame__pic { position: relative; border-radius: 30px; overflow: hidden; height: clamp(300px,42vw,420px); box-shadow: 0 24px 60px rgba(20,90,84,.18); animation: floaty 6s ease-in-out infinite; }
.q-img-frame__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* بانر مجمّع (CTA / الاستشارات / الإحصائيات) */
.q-banner { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: clamp(36px,5vw,56px) clamp(24px,4vw,40px); }
.q-banner--teal { background: linear-gradient(150deg,#0E8A82,#15A99F); color: #fff; }
.q-banner--soft { background: linear-gradient(150deg,#EAF6E8,#E3F4F1); }
.q-banner__content { position: relative; z-index: 2; }
.q-banner__circle { position: absolute; z-index: 0; border-radius: 50%; background: rgba(255,255,255,.08); }
.q-banner__circle--lime { background: rgba(140,198,63,.22); }
.q-banner__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px,4.4vw,40px); line-height: 1.35; margin: 0 0 14px; }
.q-banner--teal .q-banner__title { color: #fff; }
.q-banner--soft .q-banner__title { color: var(--c-ink); }
.q-banner__text { font-size: 17px; font-weight: 500; line-height: 1.85; margin: 0 auto 28px; max-width: 560px; }
.q-banner--teal .q-banner__text { color: #D8F1EE; }
.q-banner--soft .q-banner__text { color: #4F6B68; }
/* إحصائيات */
.q-stat { text-align: center; }
.q-stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px,5vw,42px); line-height: 1; color: var(--c-teal); }
.q-stat__label { font-size: 13.5px; color: var(--c-muted-2); font-weight: 600; margin-top: 8px; }
.q-stat__sep { width: 1px; background: var(--line-3); }
.q-stat--on-teal .q-stat__num { color: #fff; }
.q-stat--on-teal .q-stat__label { color: #D8F1EE; }
/* تبويبات (المنتج/الفعالية) */
.q-tabs { display: flex; gap: 8px; margin-bottom: 28px; border-bottom: 2px solid var(--line-2); flex-wrap: wrap; }
.q-tab { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--c-muted); padding: 12px 18px; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s; }
.q-tab:hover { color: var(--c-teal-d); }
.q-tab.is-active { color: var(--c-teal); border-bottom-color: var(--c-teal); }
.q-tab-text { font-size: 16px; line-height: 2.05; color: #4F6B68; font-weight: 500; max-width: 820px; }
/* إشعار (toast) — مشترك في صفحات الشراء */
.q-toast { position: fixed; top: 104px; left: 50%; transform: translateX(-50%); z-index: 120; background: var(--c-teal-d); color: #fff; padding: 13px 22px; border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(14,138,130,.34); display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px; animation: toastIn .3s ease; }
.q-toast__check { width: 24px; height: 24px; border-radius: 50%; background: var(--c-lime); display: flex; align-items: center; justify-content: center; font-size: 14px; }
/* عرض مكبّر للصور (lightbox) — المنتج/الفعالية */
.q-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,46,42,.92); display: flex; flex-direction: column; }
.q-lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; color: #CFE5E1; font-weight: 700; font-size: 15px; }
.q-lightbox__close { width: 46px; height: 46px; border-radius: 13px; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 22px; }
.q-lightbox__stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 26px; min-height: 0; }
.q-lightbox__nav { width: 58px; height: 58px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font-size: 28px; flex-shrink: 0; }
.q-lightbox__nav:hover { background: var(--c-teal); }
.q-lightbox__pic { flex: 1; height: 100%; max-width: 760px; background: #fff; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 46px; }
/* درج السلة + الحجاب (المتجر/الفعالية/الاستشارات) */
.q-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(12,68,63,.42); }
.q-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 91; width: 390px; max-width: 92vw; background: var(--bg-panel); box-shadow: -14px 0 40px rgba(12,68,63,.2); display: flex; flex-direction: column; }
.q-drawer__head { padding: 22px 24px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.q-drawer__title { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--c-ink); display: flex; align-items: center; gap: 10px; }
.q-drawer__close { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--bg-page); cursor: pointer; font-size: 18px; color: var(--c-muted); }
.q-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.q-drawer__foot { padding: 20px 24px; background: #fff; border-top: 1px solid var(--line); }
.q-cart-item { display: flex; gap: 13px; align-items: center; background: #fff; border-radius: 16px; padding: 12px; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(20,90,84,.05); }
.q-cart-item__thumb { width: 58px; height: 58px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 6px; }
.q-cart-item__name { font-weight: 700; font-size: 14.5px; color: var(--c-ink); line-height: 1.4; }
.q-cart-item__price { font-weight: 800; font-size: 14px; color: var(--c-teal); margin-top: 3px; }
.q-cart-mini { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-page); border-radius: var(--r-sm); padding: 4px; }
.q-cart-mini button { width: 26px; height: 26px; border: none; border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; font-weight: 800; color: var(--c-teal-d); }
.q-cart-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.q-cart-total b { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--c-teal-d); }
.q-cart-empty { text-align: center; padding: 60px 20px; color: var(--c-muted-3); }
/* =====================================================================
9) أدوات مساعدة (Utilities)
===================================================================== */
.q-text-teal { color: var(--c-teal) !important; }
.q-text-accent { color: var(--c-accent)!important; }
.q-text-lime { color: var(--c-lime-d)!important; }
.q-text-blue { color: var(--c-blue-d)!important; }
.q-text-ink { color: var(--c-ink) !important; }
.q-text-muted { color: var(--c-muted) !important; }
.q-text-track { color: var(--track) !important; }
.q-bg-soft-teal { background: var(--bg-soft-teal); }
.q-bg-soft-lime { background: var(--bg-soft-lime); }
.q-bg-soft-blue { background: var(--bg-soft-blue); }
.q-bg-soft-sand { background: var(--bg-soft-sand); }
.q-bg-white { background: #fff; }
.q-head-font { font-family: var(--font-head); }
.q-lift { transition: transform .2s ease, box-shadow .2s ease; }
.q-lift:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hov); }
.q-round { border-radius: var(--r-xl); }
.q-shadow { box-shadow: var(--sh-card); }
/* =====================================================================
10) Keyframes (مشتركة — تستدعيها مكوّنات الصفحات)
===================================================================== */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes floaty2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%,-12px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes q-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes q-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.q-anim-pulse { animation: q-pulse .4s ease; }
.q-anim-fade { animation: q-fade .35s ease both; }
/* =====================================================================
11) Responsive (أساس) — التصميم الأصلي محسّن لسطح المكتب
===================================================================== */
@media (max-width: 991.98px) {
.q-nav { display: none; }
.q-media { height: 230px; }
}
@media (max-width: 575.98px) {
.q-section { padding: 44px 0; }
.q-section-head { margin-bottom: 32px; }
.q-card--track { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* ===== بحث الكتالوج (Livewire live search) ===== */
.q-catsearch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-catsearch__wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
.q-catsearch__ico { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 14px; color: #15A99F; pointer-events: none; display: flex; }
.q-catsearch__input { padding-inline-start: 42px !important; }
.q-catsearch__clear { color: #B23B3B; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.q-catsearch__clear:hover { text-decoration: underline; }
.q-catsearch__spin { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px; width: 16px; height: 16px; border: 2px solid #cfeeea; border-top-color: #15A99F; border-radius: 50%; animation: q-spin .6s linear infinite; }
@keyframes q-spin { to { transform: translateY(-50%) rotate(360deg); } }
/* تعتيم لطيف للشبكة أثناء التحميل اللحظي */
.q-grid-loading { opacity: .5; transition: opacity .2s ease; pointer-events: none; }
/* ===== ترقيم صفحات بهوية q- (Livewire wire:click) ===== */
.q-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 40px 0 6px; }
.q-pager__btn, .q-pager__num {
min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; text-decoration: none;
color: #0E5C57; background: #fff; border: 1px solid #e6efee; transition: all .15s; cursor: pointer;
}
.q-pager__num { padding: 0; }
.q-pager__btn:hover, .q-pager__num:hover { background: #f0faf9; border-color: #bfe4e0; color: #0E8A82; }
.q-pager__num.is-active { background: #15A99F; border-color: #15A99F; color: #fff; box-shadow: 0 6px 16px rgba(21,169,159,.28); }
.q-pager__btn.is-disabled { opacity: .45; cursor: not-allowed; }
.q-pager__dots { color: #9fb0ad; padding: 0 2px; }
/* قائمة Livewire: نقطة رجوع أعلى النتائج عند التنقّل بين الصفحات (تحت الهيدر الثابت) */
.lw-listing { scroll-margin-top: 90px; }