/* ============================================================
   Expoints - نظام الهوية
   مستخرج من دليل التسليم الرسمي (design_handoff_expoints_platform).
   كل قيمة هنا منصوصة في الدليل، لا اجتهاد.

   قاعدتان صارمتان يفرضهما الدليل ويجب ألا تُخرقا:
     1. لا تدرّجات لونية في أي مكان إطلاقاً.
     2. اللهجات الثلاث (برتقالي/ماجنتا/بنفسجي) تصنيفية لا زخرفية -
        لونٌ واحد ثابت لكل فئة، ولا لهجتان في عنصر واحد.

   كل ما هو اتجاهي مكتوب بخصائص منطقية (inline-start/end) فيعمل الملف
   في الاتجاهين، وRTL هو الأصل لا الاستثناء.
   ============================================================ */

:root{
    color-scheme: light only;

    /* ---- اللوحة ---- */
    --xp-yellow:#FFC72C;      /* الأساسي - يقود ~40% من أي تركيبة */
    --xp-ink:#211E1F;         /* النص والأسطح الداكنة - ~25% */
    --xp-offwhite:#FBF8F1;    /* خلفية الصفحة - ~20% */
    --xp-ink2:#2E2A2B;        /* بطاقات فوق الحبري */

    /* لهجات تصنيفية فقط */
    --xp-orange:#F58220;      /* eyebrow · دلتا · حالة مباشرة · زائر */
    --xp-magenta:#D6338A;     /* عارض · مدفوع · VIP جانبي */
    --xp-purple:#5A4FA2;      /* إعلام · أفاتار */

    /* ---- محايدات ---- */
    --xp-border:#E8E2D6;      /* حدّ 1px على الفاتح */
    --xp-divider:#F0EBE0;     /* فواصل داخلية */
    --xp-text-2:#857E72;      /* تسميات وبيانات ثانوية */
    --xp-text:#4A453E;        /* فقرات على الفاتح */
    --xp-on-dark:#C9C4BB;     /* فقرات على الحبري */
    --xp-dark-border:#3A3536; /* فواصل على الحبري */
    --xp-white:#FFFFFF;

    /* ---- الطباعة ---- */
    --xp-display:'Poppins','Almarai',sans-serif;   /* عناوين وأرقام ولاتيني */
    --xp-arabic:'Almarai','Poppins',sans-serif;    /* واجهة عربية */

    /* ---- الحواف ---- */
    --xp-r-pill:100px;
    --xp-r-card:20px;
    --xp-r-card-lg:22px;
    --xp-r-panel:28px;
    --xp-r-panel-lg:32px;
    --xp-r-tile:14px;
    --xp-r-inner:16px;

    /* ---- الظلال ---- */
    --xp-sh-card:0 20px 40px rgba(33,30,31,.13);
    --xp-sh-float:0 24px 60px rgba(0,0,0,.30);
    --xp-sh-hero:0 30px 70px rgba(0,0,0,.34);
    --xp-sh-avatar:0 8px 18px rgba(33,30,31,.14);

    /* ---- الحركة ---- */
    --xp-ease:cubic-bezier(.22,1,.36,1);
    --xp-t-interact:240ms;
    --xp-t-enter:600ms;
    --xp-stagger:80ms;

    /* ---- الإيقاع ---- */
    --xp-wrap:1160px;
}

/* ============ الأساس ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
    margin:0;
    background:var(--xp-offwhite);
    color:var(--xp-text);
    font-family:var(--xp-arabic);
    font-size:16px;
    line-height:1.95;
    -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:inherit;text-decoration:none;}
.xp-wrap{width:min(var(--xp-wrap),100% - 80px);margin-inline:auto;}
@media (max-width:640px){.xp-wrap{width:calc(100% - 32px);}}

/* ============ الطباعة ============ */
h1,h2,h3,h4{font-family:var(--xp-arabic);font-weight:800;line-height:1.3;margin:0;color:var(--xp-ink);}
.xp-display{font-size:clamp(40px,6vw,76px);font-weight:800;line-height:1.15;letter-spacing:-.01em;}
.xp-h1{font-size:40px;font-weight:800;}
.xp-h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;}
.xp-card-title{font-size:19px;font-weight:800;}
.xp-body{font-size:16px;line-height:1.95;}
.xp-meta{font-size:13px;color:var(--xp-text-2);}
.xp-micro{font-size:11px;font-weight:700;}

/* eyebrow: لاتيني كبير برتقالي دائماً - نصّ الدليل */
.xp-eyebrow{
    font-family:var(--xp-display);
    font-size:13px;font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--xp-orange);
    margin:0 0 14px;
}
.xp-on-ink{color:var(--xp-on-dark);}
.xp-on-ink h1,.xp-on-ink h2,.xp-on-ink h3{color:var(--xp-white);}

/* ============ الأزرار ============ */
.xp-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--xp-arabic);font-weight:800;font-size:15px;line-height:1;
    padding:15px 28px;border-radius:var(--xp-r-pill);
    border:1.5px solid transparent;cursor:pointer;
    transition:background var(--xp-t-interact) var(--xp-ease),
               color var(--xp-t-interact) var(--xp-ease),
               border-color var(--xp-t-interact) var(--xp-ease),
               transform var(--xp-t-interact) var(--xp-ease),
               box-shadow var(--xp-t-interact) var(--xp-ease);
}
.xp-btn:active{transform:scale(.97);}
.xp-btn:focus-visible{outline:3px solid var(--xp-orange);outline-offset:3px;}

.xp-btn-primary{background:var(--xp-yellow);color:var(--xp-ink);}
.xp-btn-primary:hover{background:var(--xp-ink);color:var(--xp-yellow);transform:translateY(-3px);box-shadow:var(--xp-sh-card);}

.xp-btn-ink{background:var(--xp-ink);color:var(--xp-yellow);}
.xp-btn-ink:hover{background:var(--xp-ink2);transform:translateY(-3px);box-shadow:var(--xp-sh-card);}

.xp-btn-ghost{background:transparent;color:var(--xp-ink);border-color:var(--xp-border);}
.xp-btn-ghost:hover{background:var(--xp-ink);color:var(--xp-yellow);border-color:var(--xp-ink);transform:translateY(-3px);}

.xp-btn-ghost-light{background:transparent;color:var(--xp-white);border-color:var(--xp-dark-border);}
.xp-btn-ghost-light:hover{background:var(--xp-yellow);color:var(--xp-ink);border-color:var(--xp-yellow);transform:translateY(-3px);}

/* ============ الشرائح التصنيفية ============
   لون ثابت لكل فئة. هذه ليست خيارات جمالية بل معنى: القارئ يتعلّم أن
   الماجنتا تعني "عارض" فيقرأها من اللون قبل النص. */
.xp-chip{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--xp-arabic);font-size:11px;font-weight:700;line-height:1;
    padding:6px 12px;border-radius:var(--xp-r-pill);
    background:var(--xp-divider);color:var(--xp-text);
}
.xp-chip-vip{background:var(--xp-yellow);color:var(--xp-ink);}
.xp-chip-exhibitor{background:var(--xp-magenta);color:var(--xp-white);}
.xp-chip-media{background:var(--xp-purple);color:var(--xp-white);}
.xp-chip-visitor{background:var(--xp-orange);color:var(--xp-white);}
.xp-chip-organizer{background:transparent;color:var(--xp-ink);border:1px solid var(--xp-ink);}
.xp-chip-free{background:var(--xp-yellow);color:var(--xp-ink);}
.xp-chip-paid{background:var(--xp-magenta);color:var(--xp-white);}
/* "انتهت" مفرّغة لا مملوءة: الحالة المنتهية يجب ألا تنافس الحالة النشطة */
.xp-chip-ended{background:transparent;color:var(--xp-text-2);border:1px solid var(--xp-border);}

/* ============ البطاقات ============ */
.xp-card{
    background:var(--xp-white);
    border:1px solid var(--xp-border);
    border-radius:var(--xp-r-card);
    overflow:hidden;
    transition:transform var(--xp-t-interact) var(--xp-ease),
               box-shadow var(--xp-t-interact) var(--xp-ease),
               border-color var(--xp-t-interact) var(--xp-ease);
}
.xp-card:hover{transform:translateY(-6px);box-shadow:var(--xp-sh-card);border-color:var(--xp-yellow);}

.xp-panel-ink{background:var(--xp-ink);border-radius:var(--xp-r-panel-lg);padding:56px;}
.xp-panel-yellow{background:var(--xp-yellow);border-radius:var(--xp-r-panel);padding:48px;}
@media (max-width:768px){.xp-panel-ink,.xp-panel-yellow{padding:32px 24px;}}

/* ============ الشبكات ============ */
.xp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.xp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.xp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:1024px){.xp-grid-4,.xp-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.xp-grid-4,.xp-grid-3,.xp-grid-2{grid-template-columns:1fr;}}

.xp-section{padding:96px 0 0;}
@media (max-width:768px){.xp-section{padding:56px 0 0;}}
.xp-section-head{margin-bottom:32px;}
.xp-section-head .xp-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}

/* ============ الحركة ============
   الأسماء والتوقيتات من الدليل حرفياً. القاعدة المرافقة: لا أكثر من
   عنصرين متحركين في الشاشة الواحدة، ولا شيء يتجاوز ثانية. */

@keyframes ex-rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes ex-pulse{0%{transform:scale(1);opacity:.55;}70%{transform:scale(2.6);opacity:0;}100%{transform:scale(2.6);opacity:0;}}
@keyframes ex-trail{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(-7px);opacity:1;}}
@keyframes ex-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes ex-scan{from{transform:translateY(-100%);}to{transform:translateY(100%);}}

/* دخول: يُفعَّل عند التمرير. الإخفاء مشروط بـ html.xp-anim الذي لا يُضاف
   إلا إذا كانت جافاسكربت تعمل والحركة مسموحة - فبدونهما لا يُخفى شيء. */
html.xp-anim [data-xp-rise]{opacity:0;translate:0 24px;}
html.xp-anim [data-xp-rise].is-in{
    opacity:1;translate:0 0;
    transition:opacity var(--xp-t-enter) var(--xp-ease),
               translate var(--xp-t-enter) var(--xp-ease);
    transition-delay:calc(var(--xp-i,0) * var(--xp-stagger));
}
/* translate خاصية مستقلة عن transform عمداً: بها يتعايش الدخول مع
   ارتفاع البطاقة عند المرور، ولو استُخدم transform لألغى أحدهما الآخر. */
html.xp-anim [data-xp-rise].xp-shown{opacity:1 !important;translate:0 0 !important;transition:none !important;}

/* نقطة نابضة للحالة المباشرة */
.xp-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--xp-orange);}
.xp-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--xp-orange);animation:ex-pulse 1.8s var(--xp-ease) infinite;}

/* شريط الشركاء */
.xp-marquee{overflow:hidden;}
.xp-marquee-track{display:flex;gap:56px;width:max-content;animation:ex-marquee 26s linear infinite;}
.xp-marquee:hover .xp-marquee-track{animation-play-state:paused;}

/* أثر النقاط - التوقيع البصري */
.xp-trail circle{animation:ex-trail 2.4s var(--xp-ease) infinite;}
.xp-trail circle:nth-child(2){animation-delay:150ms;}
.xp-trail circle:nth-child(3){animation-delay:300ms;}
.xp-trail circle:nth-child(4){animation-delay:450ms;}
.xp-trail circle:nth-child(5){animation-delay:600ms;}

/* يفرضه الدليل صراحةً */
@media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    html.xp-anim [data-xp-rise]{opacity:1 !important;translate:0 0 !important;}
}