/* =====================================================================
   سنام العز — تطبيق العملاء
   home.css — أنماط الصفحة الرئيسية (index.html) الخاصة بها فقط.
   يُحمَّل بعد الأنماط المشتركة (base/layout/components/pages/responsive)
   وفي صفحة الرئيسية حصراً؛ يكمّل الأقسام غير المغطاة في الأنماط المشتركة
   (البطل الكامل، شريط المزادات الداكن، شريط المتجر، شبكة الخدمات المدمجة).
   يعتمد كلياً على متغيّرات base.css فيعمل مع كل الأنماط اللونية والوضع الداكن.
   ملاحظة: الهوية البصرية مصدرها التصميم المعتمد للصفحة الرئيسية (سابقاً homepage/index.html).
   ===================================================================== */

/* ===================== ترتيب أقسام الرئيسية: بطل ← متجر ← مزادات ← خدمات ← سوق ← دعوة (طلب مالك المنتج 2026-08-02/08-03) =====================
   تنبيه هام: main#main هو flex container، فالترتيب البصري الفعلي محكوم بقيم order أدناه لا بترتيب
   عناصر DOM في index.html. أي إعادة ترتيب لأقسام الرئيسية مستقبلاً يجب أن تُحدَّث هنا أيضًا،
   وإلا ظل الترتيب المرئي كما هو رغم تغيّر ترتيب HTML (خطأ اكتُشف وصُحِّح 2026-08-03: تعديلان سابقان
   على ترتيب DOM لم يظهرا فعليًا في المتصفح بسبب هذه القاعدة). ترتيب DOM في index.html مطابق الآن
   لهذا الترتيب البصري لتفادي تعارض ترتيب التبويب بلوحة المفاتيح (Tab order) مع الترتيب المرئي. */
main#main{display:flex;flex-direction:column}
main#main>.hero{order:0}
main#main>#store{order:4}
main#main>#auctions{order:2}
main#main>#services{order:3}
main#main>#camels{order:1}
main#main>.cta-sec{order:5}

/* ===================== البطل ===================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0D0A06;color:#F6EAD2;
  min-height:min(82vh, 820px);display:flex;
}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-shade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to left, rgba(13,10,6,.88) 0%, rgba(13,10,6,.62) 34%, rgba(13,10,6,.12) 62%, rgba(13,10,6,0) 80%),
             linear-gradient(to top, rgba(13,10,6,.75) 0%, rgba(13,10,6,0) 36%);
}
.hero .hero-inner{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  width:100%;padding-block:88px 64px;
}
.hero .kicker{
  display:flex;align-items:center;gap:14px;
  color:var(--accent-hi);font-weight:600;font-size:clamp(14px, 1.4vw, 19px);letter-spacing:.5px;
}
.hero .kline{width:56px;height:1px;background:var(--accent-hi);opacity:.7;flex-shrink:0}
.hero h1{
  font-family:"Aref Ruqaa",var(--font-display),serif;font-weight:700;
  font-size:clamp(36px, 5.5vw, 76px);line-height:1.4;margin:20px 0 0;max-width:820px;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero h1 em{font-style:normal;color:var(--accent-hi)}
.hero .sub{font-size:clamp(16px, 1.8vw, 24px);line-height:1.9;color:#E9DCC2;max-width:44ch;margin:20px 0 0}
.hero-actions{display:flex;align-items:center;gap:18px;margin-top:40px;flex-wrap:wrap}
.hero-actions-ai{margin-top:14px}
.hero-actions .btn{font-size:clamp(16px, 1.4vw, 20px);min-height:56px;padding:14px 40px;border-radius:8px}
.hero-actions .btn-gold{box-shadow:0 6px 28px color-mix(in srgb, var(--gold-500) 35%, transparent)}
.hero-actions .btn-ghost-light{border-color:rgba(246,234,210,.55)}
.hero-actions .btn-ghost-light:hover{background:transparent;border-color:var(--accent-hi);color:var(--accent-hi)}
.hero-actions .btn-outline-ai{
  border:1.5px dashed color-mix(in srgb, var(--accent-hi) 55%, transparent);
  background:color-mix(in srgb, var(--accent-hi) 8%, transparent);
  color:var(--accent-hi);padding-inline:26px;
}
.hero-actions .btn-outline-ai:hover{background:color-mix(in srgb, var(--accent-hi) 16%, transparent)}
.hero-actions .btn-outline-ai .ai-badge{
  font-size:10.5px;font-weight:700;color:#2B1F04;background:var(--accent-hi);
  padding:2px 7px;border-radius:5px;
}
.hero-marks{
  display:flex;gap:clamp(24px, 4vw, 56px);margin-top:56px;padding-top:26px;
  border-top:1px solid rgba(246,234,210,.22);flex-wrap:wrap;
}
.hero-marks .mark b{
  display:block;font-family:"Aref Ruqaa",var(--font-display),serif;
  font-size:clamp(22px, 2.2vw, 32px);color:var(--accent-hi);font-weight:700;line-height:1.5;
}
.hero-marks .mark span{font-size:clamp(13px, 1.2vw, 16px);color:#D9C9A8}
@media (max-width: 720px){
  .hero .hero-inner{padding-block:64px 48px}
  .hero-shade{background:linear-gradient(to top, rgba(13,10,6,.86) 0%, rgba(13,10,6,.58) 55%, rgba(13,10,6,.3) 100%)}
  .hero-marks{margin-top:40px;gap:20px}
}

/* ===================== بطاقات الإبل — تنسيق السعر (ترميز الرئيسية يستخدم .price-row مباشرة) ===================== */
.price-row .amount{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .price-row .amount{color:var(--gold-600)}
.price-row .currency{font-size:14px;color:var(--ink-2);font-weight:600}

/* زر «عرض المزيد» أسفل الشبكات */
.more-row{display:flex;justify-content:center;margin-top:30px}

/* ===================== قسم المزادات — شريط داكن (تجاوزات فوق مكوّنات المزاد المشتركة) ===================== */
.auctions{
  background:linear-gradient(180deg, var(--green-900) 0%, var(--green-800) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.auctions::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%, var(--gold-500) 0, transparent 30%),
                   radial-gradient(circle at 85% 75%, var(--gold-500) 0, transparent 25%);
}
.auctions .container{position:relative;z-index:1}
.auctions .section-title .eyebrow{color:var(--gold-500)}
.auctions .section-title h2{color:#fff}
.auctions .link-more{color:var(--accent-soft)}
.auctions .auction-grid{grid-template-columns:1fr 1.25fr 1fr}
@media (max-width: 820px){.auctions .auction-grid{grid-template-columns:1fr}}
.auctions .auction-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);
}
.auctions .auction-card:hover{border-color:color-mix(in srgb, var(--accent-hi) 50%, transparent)}
.auctions .auction-card.featured{
  background:rgba(255,255,255,.1);
  border-color:color-mix(in srgb, var(--accent-hi) 55%, transparent);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
}
.auctions .auction-body h3{color:#fff}
.auctions .auction-sub{color:rgba(255,255,255,.65)}
.auctions .top-bid .label{color:rgba(255,255,255,.6)}
.auctions .top-bid .amount{color:var(--accent-hi)}
.auctions .top-bid .currency{color:rgba(255,255,255,.7)}
.auctions .countdown .unit{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.14)}
.auctions .countdown b{color:#fff}
.auctions .countdown span{color:rgba(255,255,255,.6)}
.auctions .count-label{color:rgba(255,255,255,.55)}

/* ===================== شريط المتجر — فئات على خلفية داكنة ===================== */
.store-band{
  background:linear-gradient(180deg, var(--green-900) 0%, var(--green-800) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.store-band::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 15% 25%, var(--gold-500) 0, transparent 30%),
                   radial-gradient(circle at 85% 80%, var(--gold-500) 0, transparent 25%);
}
.store-band .container{position:relative;z-index:1}
.store-band .section-title .eyebrow{color:var(--gold-500)}
.store-band .section-title h2{color:#fff}
.store-band .link-more{color:var(--accent-soft)}

.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width:980px){.category-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.category-grid{grid-template-columns:repeat(2,1fr)}}
.category-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);backdrop-filter:blur(4px);
  transition:transform .2s ease, border-color .2s ease;
}
.category-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb, var(--accent-hi) 55%, transparent)}
.category-card .cat-media{aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.25)}
.category-card .cat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.category-card:hover .cat-media img{transform:scale(1.06)}
.category-card .cat-body{padding:15px 14px;display:flex;flex-direction:column;gap:8px;flex:1;align-items:center;text-align:center;justify-content:center}
.category-card h3{font-size:16px;font-weight:700;color:#fff;line-height:1.4}
.category-card .cat-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-hi)}
.category-card .cat-cta svg{width:15px;height:15px}

/* ===================== الخدمات — مكوّن مدمج (خدمة مميزة + شبكة + سوق السلع) ===================== */
.svcx{display:flex;flex-direction:column;gap:30px}
.svcx-feature{
  display:grid;grid-template-columns:66px 1fr auto;align-items:center;gap:24px;
  background:linear-gradient(120deg, var(--gold-tint), var(--card));
  border:1px solid var(--gold-300);border-radius:18px;padding:26px 28px;
}
.svcx-feature .fx-ico{
  width:66px;height:66px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(180deg, var(--gold-500), var(--gold-600));color:#3B2810;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -12px rgba(120,88,32,.8);
}
.svcx-feature .fx-ico svg{width:30px;height:30px}
.svcx-feature .fx-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.svcx-feature .fx-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.svcx-feature h3{margin:0;font-size:22px;font-weight:800;color:var(--ink)}
.svcx-badge{font-size:11px;font-weight:700;color:var(--gold-600);background:color-mix(in srgb, var(--gold-500) 18%, transparent);border:1px solid color-mix(in srgb, var(--gold-500) 45%, transparent);padding:4px 9px;border-radius:999px}
.svcx-feature p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-2);max-width:78ch}
.svcx-feature .fx-cta{white-space:nowrap;flex-shrink:0;background:var(--green-700);color:#fff;font-size:14.5px;font-weight:700;padding:13px 22px;border-radius:11px;transition:background .15s}
.svcx-feature .fx-cta:hover{background:var(--green-600)}

.svcx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svcx-card{
  grid-column:span 2;display:flex;flex-direction:column;gap:14px;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold-500);
  border-radius:16px;padding:24px 22px;transition:box-shadow .2s ease, transform .2s ease;
}
.svcx-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.svcx-card .cx-head{display:flex;align-items:center;gap:12px}
.svcx-card .cx-ico{width:42px;height:42px;border-radius:11px;flex-shrink:0;background:var(--gold-tint);color:var(--gold-600);display:flex;align-items:center;justify-content:center}
.svcx-card .cx-ico svg{width:20px;height:20px}
.svcx-card h4{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.svcx-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.svcx-card li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.svcx-card li svg{width:15px;height:15px;color:var(--gold-600);flex-shrink:0}
.svcx-card .cx-link{margin-top:auto;align-self:flex-start;font-size:13.5px;font-weight:700;color:var(--gold-600);display:inline-flex;align-items:center;gap:6px}
.svcx-card .cx-link svg{width:14px;height:14px}

.svcx-market{
  grid-column:span 4;display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px;
  background:linear-gradient(115deg, var(--green-900), var(--green-800) 70%, var(--green-700));
  border-radius:16px;padding:26px 28px;color:#FBF4E7;position:relative;overflow:hidden;
}
.svcx-market::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px 160px at 92% 0%, color-mix(in srgb, var(--gold-500) 30%, transparent), transparent 70%)}
.svcx-market .mk-body{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.svcx-market .mk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.svcx-market .mk-ico{width:42px;height:42px;border-radius:11px;flex-shrink:0;background:rgba(251,244,231,.14);border:1px solid rgba(240,225,196,.3);color:#F0D89C;display:flex;align-items:center;justify-content:center}
.svcx-market .mk-ico svg{width:20px;height:20px}
.svcx-market h4{margin:0;font-size:20px;font-weight:800;color:#FDF7EA}
.svcx-new{font-size:11px;font-weight:700;color:#34240E;background:var(--gold-500);padding:4px 9px;border-radius:999px}
.svcx-market p{margin:0;font-size:14px;line-height:1.8;color:rgba(245,233,210,.85);max-width:60ch}
.svcx-chips{display:flex;flex-wrap:wrap;gap:8px}
.svcx-chips span{font-size:12.5px;color:#F2E4C6;background:rgba(23,15,6,.26);border:1px solid rgba(240,225,196,.18);padding:6px 12px;border-radius:999px}
.svcx-market .mk-cta{position:relative;white-space:nowrap;flex-shrink:0;background:linear-gradient(180deg, var(--gold-500), var(--gold-600));color:#34240E;font-size:14.5px;font-weight:800;padding:14px 24px;border-radius:11px;box-shadow:0 12px 26px -16px rgba(0,0,0,.7);display:inline-flex;align-items:center;gap:8px;transition:filter .15s}
.svcx-market .mk-cta:hover{filter:brightness(1.06)}
.svcx-market .mk-cta svg{width:16px;height:16px}

@media (max-width:900px){
  .svcx-feature{grid-template-columns:1fr;text-align:start}
  .svcx-feature .fx-cta{justify-content:center;text-align:center}
  .svcx-grid{grid-template-columns:repeat(2,1fr)}
  .svcx-card{grid-column:span 1}
  .svcx-market{grid-column:span 2;grid-template-columns:1fr}
}
@media (max-width:560px){
  .svcx-grid{grid-template-columns:1fr}
  .svcx-card{grid-column:span 1}
  .svcx-market{grid-column:span 1}
}

/* ===================== بوب أب «تقييم بالذكاء الاصطناعي» (طلب مالك المنتج 2026-08-03) =====================
   الألوان Hex ثابتة عمدًا (لا رموز --gold-*) لمطابقة تصميم المصدر حرفيًا — استثناء من قاعدة رموز
   التصميم المتّبعة في بقية الملف. */
.modal.modal-ai{background:transparent;box-shadow:none;max-width:620px}
.modal.modal-ai .modal-close{
  top:-14px;inset-inline-start:-14px;width:32px;height:32px;border-radius:50%;
  background:#2B1F04;color:#F6EAD2;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.modal.modal-ai .modal-close:hover{background:#1E1500;color:#fff}
.ai-card{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#54391D,#3F2C18);
  border:1px solid rgba(231,197,114,.55);border-radius:16px;padding:22px;
  display:flex;gap:18px;align-items:flex-start;
  box-shadow:0 18px 40px -26px rgba(63,44,24,.75);
}
.ai-card-sheen{
  position:absolute;top:0;bottom:0;left:-90px;width:90px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,197,114,.13),transparent);
  animation:sanamSheen 4.5s ease-in-out infinite;
}
.ai-card-icon{
  position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(155deg,#F0DDB5,#C9922E);
  display:grid;place-items:center;color:#3E2D19;font-size:20px;font-weight:900;
}
.ai-card-icon-ring{
  position:absolute;inset:-6px;border:1px solid rgba(231,197,114,.45);border-radius:17px;
  animation:sanamPulse 2.8s ease-in-out infinite;
}
.ai-card-body{position:relative;flex:1 1 0;min-width:0}
.ai-card-title-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ai-card-title-row h2{font-family:"Alexandria",var(--font-display),sans-serif;font-weight:800;font-size:20px;margin:0;color:#FBF4E7}
.ai-card-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#3E2D19;
  background:#E7C572;border-radius:6px;padding:3px 9px;
}
.ai-card-badge-dot{width:6px;height:6px;border-radius:50%;background:#6B4E2E;animation:sanamPulse 1.6s ease-in-out infinite}
.ai-card-desc{font-size:13.5px;line-height:1.85;color:#DCCBAE;margin:0 0 16px}
.ai-card-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ai-card-cta{
  display:inline-flex;align-items:center;gap:8px;background:#E7C572;color:#3E2D19;
  font-family:inherit;font-weight:800;font-size:13px;border:0;border-radius:9px;padding:11px 18px;cursor:pointer;
  transition:background-color .15s;
}
.ai-card-cta:hover{background:#F0DDB5}
.ai-card-note{font-size:12px;color:#A8926C}
.ai-card-waitlist{
  border-top:1px dashed rgba(231,197,114,.35);padding-top:14px;margin-top:2px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ai-card-waitlist input{
  flex:1 1 0;min-width:190px;font-family:inherit;font-size:13px;color:#FBF4E7;
  background:rgba(251,244,231,.08);border:1px solid rgba(231,197,114,.4);border-radius:9px;
  padding:11px 14px;outline:none;
}
.ai-card-waitlist input::placeholder{color:#B7A487}
.ai-card-waitlist input:focus{border-color:#E7C572;box-shadow:0 0 0 3px rgba(231,197,114,.2)}
.ai-card-waitlist button{
  background:#FBF4E7;color:#3E2D19;font-family:inherit;font-weight:800;font-size:13px;
  border:0;border-radius:9px;padding:11px 18px;cursor:pointer;transition:background-color .15s;
}
.ai-card-waitlist button:hover{background:#F0E6D2}
@keyframes sanamSheen{0%{left:-90px}100%{left:100%}}
@keyframes sanamPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion: reduce){
  .ai-card-sheen,.ai-card-icon-ring,.ai-card-badge-dot{animation:none}
}
@media (max-width:600px){
  .ai-card{flex-direction:column;padding:20px}
}

/* ===================== شارة «قيد الربط مع نادي الإبل» (DEC-MTG-008) ===================== */
.club-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:999px;position:relative;z-index:1;
}
.club-badge .dot{width:8px;height:8px;border-radius:999px;background:var(--gold-500);flex-shrink:0}