/* =========================================================
   هوية نيكس — أخضر داكن + ذهبي
   الذهبي الأساسي: #00B3D6 | الأخضر الأساسي: #003C7A
   ========================================================= */

/* 🟢 [الفوتر] الحاوية الرئيسية للفوتر — خلفية زجاجية + حواف علوية دائرية */
.store-footer.overflow-hidden.relative.f-btm-inside-f-top.icons-rounded-md {
    position: relative !important;
    background: rgba(0, 60, 122, 0.92) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
    border-radius: 40px 40px 0 0 !important;
    padding: 20px 20px !important;
    margin: 5px 10px !important;
    border: 1px solid rgba(0, 179, 214, 0.22) !important;
    overflow: hidden !important;
    box-shadow:
        0 -8px 30px rgba(0, 60, 122, 0.35),
        inset 0 1px 0 rgba(0, 179, 214, 0.08) !important;
}

/* 🟢 [الفوتر] تنظيم الروابط بشكل صف مرن ومتوسط */
.store-footer .footer-links,
.store-footer .footer-content,
.store-footer ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 0 !important;
}

/* 🟢 [الفوتر] لون وحجم روابط الفوتر */
.store-footer a,
.store-footer li {
    font-size: 11px !important;
    color: #00B3D6 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
    text-shadow: none !important;
}

.store-footer a:hover,
.store-footer li:hover {
    color: #00B3D6 !important;
    opacity: 0.78 !important;
}

/* 🟢 [الفوتر] الإطار الخارجي المتحرك (نيون ذهبي/أخضر) */
.store-footer.overflow-hidden.relative.f-btm-inside-f-top.icons-rounded-md::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 40px 40px 0 0 !important;
    border: 2px solid transparent !important;
    background:
        linear-gradient(90deg, #003C7A 0%, #00B3D6 50%, #003C7A 100%) border-box !important;
    background-size: 200% 100% !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    animation: neon-fast-flow 5s linear infinite !important;
    pointer-events: none !important;
}

@keyframes neon-fast-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 🟢 [الفوتر] الإطار الداخلي الثابت */
.store-footer.overflow-hidden.relative.f-btm-inside-f-top.icons-rounded-md::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 5px !important;
    border-radius: 35px 35px 0 0 !important;
    border: 1px solid rgba(0, 179, 214, 0.18) !important;
    pointer-events: none !important;
}

/* =========================================================
   🟢 [أزرار المنتجات] أزرار السلايدر التفاعلية — تدرج متحرك + تعويم
   ========================================================= */

.s-products-slider-slider .btn,
.s-products-slider-slider button {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    min-height: auto !important;

    background: linear-gradient(90deg, #003C7A 0%, #054B7F 50%, #003C7A 100%) !important;
    background-image: linear-gradient(90deg, #003C7A 0%, #054B7F 50%, #003C7A 100%) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;

    color: #00B3D6 !important;
    border: 1px solid rgba(0, 179, 214, 0.42) !important;
    border-radius: 20px !important;

    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
    isolation: isolate !important;
    overflow: hidden !important;

    transition:
        transform 0.35s ease,
        filter 0.35s ease,
        background-position 0.6s ease !important;

    animation: float-gentle 4s ease-in-out infinite,
               gradient-flow 6s linear infinite !important;

    cursor: pointer !important;
}

.s-products-slider-slider .btn::before,
.s-products-slider-slider .btn::after,
.s-products-slider-slider button::before,
.s-products-slider-slider button::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.s-products-slider-slider .btn:hover,
.s-products-slider-slider button:hover {
    filter: brightness(1.10) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes gradient-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================================
   🟢 [الأسئلة الشائعة] الحاوية + العنوان + البطاقات
   ========================================================= */

.faq-container {
    padding: 16px !important;
    border: 2px solid transparent !important;
    border-radius: 32px !important;

    background-image:
        radial-gradient(circle at 50% 40%, rgba(0, 60, 122, 0.92), rgba(0, 60, 122, 0.99)),
        linear-gradient(90deg, #003C7A 0%, #00B3D6 50%, #003C7A 100%) !important;

    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 300% 100% !important;
    animation: faq-border-flow 6s linear infinite !important;

    position: relative !important;
    overflow: hidden !important;

    box-shadow:
        0 10px 28px rgba(0, 60, 122, 0.30),
        inset 0 1px 0 rgba(0, 179, 214, 0.08) !important;
}

@keyframes faq-border-flow {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 300% 0; }
}

.faq-container h1,
.faq-container h2,
.faq-container .faq-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    background: linear-gradient(90deg, #00B3D6 0%, #5FD3EC 50%, #00B3D6 100%) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    animation: faq-title-flow 6s linear infinite !important;
    position: relative !important;
    z-index: 1 !important;
}

@keyframes faq-title-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@media (max-width: 600px) {
    .faq-container h1,
    .faq-container h2,
    .faq-container .faq-title {
        font-size: 15px !important;
    }
}

.faq-container .faq-item,
.faq-container .grid > div {
    background: rgba(0, 60, 122, 0.78) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    border-radius: 12px !important;
    padding: 9px !important;
    margin: 2px !important;

    border: 1px solid rgba(0, 179, 214, 0.16) !important;

    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;

    box-shadow:
        inset 0 1px 0 rgba(0, 179, 214, 0.05),
        0 4px 12px rgba(0, 60, 122, 0.20) !important;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

.faq-container .faq-item:hover,
.faq-container .grid > div:hover {
    border-color: rgba(0, 179, 214, 0.32) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(0, 179, 214, 0.08),
        0 7px 16px rgba(0, 60, 122, 0.28) !important;
}

.faq-container .faq-item::after,
.faq-container .grid > div::after {
    display: none !important;
}

.faq-container .faq-item::before,
.faq-container .grid > div::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    width: 36px !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;

    background: linear-gradient(90deg, #003C7A 0%, #00B3D6 50%, #003C7A 100%) !important;
    background-size: 200% 100% !important;
    animation: faq-line-flow 4s linear infinite !important;
    z-index: 2 !important;
}

@keyframes faq-line-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* =========================================================
   🟢 [النص المتحرك] تدرج ذهبي متموّج على النص
   ========================================================= */

.dark .animated-text-inner {
    font-size: 1.1em;
    font-weight: 700;

    background:
        linear-gradient(90deg, #00B3D6 0%, #5FD3EC 25%, #00B3D6 50%, #5FD3EC 75%, #00B3D6 100%);
    background-size: 300% 100% !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    filter: drop-shadow(0 0 3px rgba(0, 179, 214, 0.20));
    animation: textWave 6s linear infinite;
}

@keyframes textWave {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* =========================================================
   🟡 [الهيدر] تم إصلاحه — كان backdrop-filter مباشر على
   .header-inner-wrapper يحوّله إلى containing block لأي
   عنصر position:fixed بداخله (مثل القائمة المنسدلة)، فتنحسب
   القائمة بالنسبة لصندوق الهيدر بدل الشاشة وتظهر بالأعلى خطأ.
   الحل: نقل تأثير الزجاج إلى ::before بدل العنصر الأساسي.
   ========================================================= */

body:not(.normal-menu) .header-inner-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;

    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, #003C7A, #00B3D6, #003C7A) !important;
    border-image-slice: 1 !important;

    padding: 10px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    position: relative !important;
    isolation: isolate !important;

    box-shadow:
        0 4px 20px rgba(0, 60, 122, 0.28),
        inset 0 1px 0 rgba(0, 179, 214, 0.07) !important;
}

/* طبقة الزجاج الفعلية على pseudo-element بدل العنصر الأساسي */
body:not(.normal-menu) .header-inner-wrapper::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    background: linear-gradient(135deg, rgba(0, 60, 122, 0.94) 0%, rgba(0, 60, 122, 0.82) 100%) !important;
    background-size: 200% 200% !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;

    animation: glassShift 8s ease-in-out infinite !important;
    pointer-events: none !important;
}

/* إبقاء محتوى الهيدر فوق طبقة الزجاج */
body:not(.normal-menu) .header-inner-wrapper > * {
    position: relative !important;
    z-index: 1 !important;
}

/* تموّج الإطار الذهبي أسفل الهيدر */
body:not(.normal-menu) .header-inner-wrapper::after {
    content: "" !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;

    background: linear-gradient(90deg, #003C7A 0%, #00B3D6 50%, #003C7A 100%) !important;
    background-size: 300% 100% !important;
    animation: goldWave 4s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

@keyframes goldWave {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes glassShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* 🟢 [الهيدر] أيقونات الهيدر — لون ذهبي + توهج + تكبير عند الهوفر */
body:not(.normal-menu) .header-inner-wrapper .icon,
body:not(.normal-menu) .header-inner-wrapper svg,
body:not(.normal-menu) .header-inner-wrapper i {
    color: #00B3D6 !important;
    filter: drop-shadow(0 0 3px rgba(0, 179, 214, 0.24)) !important;
    margin: 0 8px !important;
    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        opacity 0.3s ease !important;
}

body:not(.normal-menu) .header-inner-wrapper .icon:hover,
body:not(.normal-menu) .header-inner-wrapper svg:hover,
body:not(.normal-menu) .header-inner-wrapper i:hover {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 0 7px rgba(0, 179, 214, 0.45)) !important;
    opacity: 0.9 !important;
}

body:not(.normal-menu) .header-inner-wrapper .icons-container {
    display: flex !important;
    margin-inline-start: auto !important;
}

/* 🟢 [بطاقة زجاجية عامة] dm-bg-sec */
.dark .dm-bg-sec {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.06), transparent 42%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.38) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  border-radius: 16px 16px 6px 16px !important;

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease !important;
}

.dark .dm-bg-sec:hover {
  border-color: rgba(0,179,214,0.65) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.42),
    0 0 28px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;
}

/* 🟢 [بانرات الولاء والكاش باك] */
.dark .s-loyalty-points-banner-container,
.dark .s-cashback-banner-container {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.08), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.45) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  overflow: hidden !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}

.dark .s-loyalty-points-banner-container:hover,
.dark .s-cashback-banner-container:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,179,214,0.72) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.42),
    0 0 30px rgba(0,179,214,0.18),
    inset 0 1px 0 rgba(95,211,236,0.14) !important;
}

/* 🟢 [ودجت الإهداء] عناصر القائمة */
.dark #app .main-content .s-gifting-widget .s-list-tile-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.06), transparent 48%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.38) !important;
  border-radius: 14px 14px 5px 14px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.32),
    0 0 18px rgba(0,179,214,0.07),
    inset 0 1px 0 rgba(0,179,214,0.08) !important;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease !important;
}

.dark #app .main-content .s-gifting-widget .s-list-tile-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,179,214,0.68) !important;
  background:
    linear-gradient(135deg, #003C7A 0%, #054B7F 60%, rgba(0,179,214,0.10) 100%) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;
}

/* 🟢 [صفحة المنتج] صندوق التعليقات وحقول الإدخال */
.dark .product-single .s-comments-product {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.06), transparent 42%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #C7DCE6 !important;
  border: 1px solid rgba(0,179,214,0.42) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  overflow: hidden !important;
}

.dark .product-single .s-comments-product input,
.dark .product-single .s-comments-product textarea {
  background: rgba(1,32,67,0.88) !important;
  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.35) !important;
  border-radius: 12px 12px 4px 12px !important;
  box-shadow: inset 0 0 12px rgba(0,179,214,0.04) !important;
  transition:
    border-color .25s ease,
    box-shadow .25s ease !important;
}

.dark .product-single .s-comments-product input:focus,
.dark .product-single .s-comments-product textarea:focus {
  border-color: rgba(0,179,214,0.75) !important;
  outline: none !important;
  box-shadow:
    0 0 14px rgba(0,179,214,0.12),
    inset 0 0 12px rgba(0,179,214,0.05) !important;
}

/* 🟢 [صندوق البحث] */
.s-search-input-row {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.06), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  border: 1px solid rgba(0,179,214,0.42) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.30),
    0 0 18px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  transition:
    border-color .25s ease,
    box-shadow .25s ease !important;
}

.s-search-input-row:focus-within {
  border-color: rgba(0,179,214,0.78) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.34),
    0 0 24px rgba(0,179,214,0.16),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;
}

.s-search-input-row input {
  background: transparent !important;
  color: #5FD3EC !important;
}

.s-search-input-row input::placeholder {
  color: rgba(199,220,230,0.65) !important;
}

/* 🟢 [عنصر عام] w-12 */
.w-12 {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.05), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.38) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.30),
    0 0 18px rgba(0,179,214,0.07),
    inset 0 1px 0 rgba(0,179,214,0.08) !important;
}

/* 🟢 [المودالات] الحاوية والأزرار الداخلية */
.s-modal-align-middle {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.08), transparent 42%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.48) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 14px 40px rgba(0,0,0,0.48),
    0 0 30px rgba(0,179,214,0.12),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;

  overflow: hidden !important;
}

.s-modal-align-middle button,
.s-modal-align-middle .btn {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95,211,236,0.82) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,179,214,0.20),
    0 0 16px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;

  transition:
    filter .25s ease,
    box-shadow .25s ease,
    transform .2s ease !important;
}

.s-modal-align-middle button:hover,
.s-modal-align-middle .btn:hover {
  filter: brightness(1.07) !important;
  box-shadow:
    0 8px 24px rgba(0,179,214,0.30),
    0 0 22px rgba(0,179,214,0.20),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.s-modal-align-middle button:active,
.s-modal-align-middle .btn:active {
  transform: scale(0.97) !important;
}

/* 🔴 [تنبيه هام] هذا السطر يخفي كل عنصر بالصفحة اتجاهه LTR
   وليس عنصر محدد — قد يخفي أرقام، حقول إدخال، أو شارات إنجليزية
   بالخطأ في أي مكان بالمتجر. راجع إذا هذا مقصود، أو حدده بكلاس
   أدق مثل ".some-widget[dir='ltr']" بدل الشمولية الكاملة. */
.top-navbar {
  display: none !important;
}
[dir="ltr"] {
  display: none !important;
}

/* 🟢 [مكوّن Altumcode] الحاوية العامة والعناوين والأزرار */
.altumcode-wrapper {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.07), transparent 42%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0,179,214,0.45) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  overflow: hidden !important;
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease !important;
}

.altumcode-wrapper:hover {
  border-color: rgba(0,179,214,0.68) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.42),
    0 0 30px rgba(0,179,214,0.15),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;
}

.altumcode-wrapper,
.altumcode-wrapper p,
.altumcode-wrapper span,
.altumcode-wrapper div {
  color: #C7DCE6 !important;
}

.altumcode-wrapper h1,
.altumcode-wrapper h2,
.altumcode-wrapper h3,
.altumcode-wrapper h4 {
  color: #5FD3EC !important;
  text-shadow: 0 0 10px rgba(0,179,214,0.12) !important;
}

.altumcode-wrapper a {
  color: #00B3D6 !important;
  transition:
    color .25s ease,
    text-shadow .25s ease !important;
}

.altumcode-wrapper a:hover {
  color: #5FD3EC !important;
  text-shadow: 0 0 8px rgba(0,179,214,0.45) !important;
}

.altumcode-wrapper button,
.altumcode-wrapper .btn {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95,211,236,0.82) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,179,214,0.20),
    0 0 16px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;

  transition:
    filter .25s ease,
    box-shadow .25s ease,
    transform .2s ease !important;
}

.altumcode-wrapper button:hover,
.altumcode-wrapper .btn:hover {
  filter: brightness(1.07) !important;
  box-shadow:
    0 8px 24px rgba(0,179,214,0.30),
    0 0 22px rgba(0,179,214,0.20),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.altumcode-wrapper button:active,
.altumcode-wrapper .btn:active {
  transform: scale(0.97) !important;
}

/* 🟢 [زر إضافة للسلة] الرئيسي مع تأثير لمعان */
#app salla-add-product-button button[product-id].s-button-primary {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95,211,236,0.85) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,179,214,0.20),
    0 0 16px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;

  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 800 !important;
  text-shadow: none !important;

  transition:
    filter .25s ease,
    transform .2s ease,
    box-shadow .25s ease !important;

  position: relative !important;
  overflow: hidden !important;
}

#app salla-add-product-button button[product-id].s-button-primary::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;

  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent) !important;
  transform: skewX(-20deg);
  transition: left .7s ease !important;
  pointer-events: none !important;
}

#app salla-add-product-button button[product-id].s-button-primary:hover {
  filter: brightness(1.07) !important;
  box-shadow:
    0 8px 24px rgba(0,179,214,0.30),
    0 0 24px rgba(0,179,214,0.20),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
  transform: translateY(-2px) !important;
}

#app salla-add-product-button button[product-id].s-button-primary:hover::before {
  left: 120%;
}

#app salla-add-product-button button[product-id].s-button-primary:active {
  transform: scale(0.97) !important;
  box-shadow: 0 4px 12px rgba(0,179,214,0.18) !important;
}

#app salla-add-product-button button[product-id].s-button-primary svg,
#app salla-add-product-button button[product-id].s-button-primary .material-symbols-outlined {
  color: #003C7A !important;
}

/* 🟢 [ودجت الإهداء الأفقي] زر الإجراء */
.s-gifting-widget-horizontal .s-gifting-widget-action button {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95,211,236,0.85) !important;
  border-radius: 12px 12px 4px 12px !important;

  box-shadow:
    0 6px 18px rgba(0,179,214,0.20),
    0 0 16px rgba(0,179,214,0.14),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;

  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 800 !important;
  text-shadow: none !important;

  transition:
    filter .25s ease,
    transform .2s ease,
    box-shadow .25s ease !important;

  position: relative !important;
  overflow: hidden !important;
}

.s-gifting-widget-horizontal .s-gifting-widget-action button:hover {
  filter: brightness(1.07) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 24px rgba(0,179,214,0.30),
    0 0 24px rgba(0,179,214,0.20),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.s-gifting-widget-horizontal .s-gifting-widget-action button:active {
  transform: scale(0.97) !important;
}

.s-gifting-widget-horizontal .s-gifting-widget-action button svg,
.s-gifting-widget-horizontal .s-gifting-widget-action button .material-symbols-outlined {
  color: #003C7A !important;
}

/* 🟢 [إخفاء شارة altumcode] */
.altumcode.on-fadeIn {
  display: none !important;
}

/* 🟢 [بطاقة المنتج] الخلفية والنصوص والأسعار */
.dark #app.product-card-bg-on custom-salla-product-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,179,214,0.07), transparent 42%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #C7DCE6 !important;
  border: 1px solid rgba(0,179,214,0.42) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.08),
    inset 0 1px 0 rgba(0,179,214,0.10) !important;

  overflow: hidden !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease !important;
}

.dark #app.product-card-bg-on custom-salla-product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,179,214,0.70) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.42),
    0 0 30px rgba(0,179,214,0.16),
    inset 0 1px 0 rgba(95,211,236,0.12) !important;
}

.dark #app.product-card-bg-on custom-salla-product-card .product-title,
.dark #app.product-card-bg-on custom-salla-product-card .product-name {
  color: #5FD3EC !important;
}

.dark #app.product-card-bg-on custom-salla-product-card .price,
.dark #app.product-card-bg-on custom-salla-product-card .price-value {
  color: #00B3D6 !important;
  text-shadow: 0 0 8px rgba(0,179,214,0.16) !important;
}

.dark #app.product-card-bg-on custom-salla-product-card .old-price {
  color: #036284 !important;
}

.dark #app.product-card-bg-on custom-salla-product-card a {
  color: #00B3D6 !important;
}

.dark #app.product-card-bg-on custom-salla-product-card .product-card-content,
.dark #app.product-card-bg-on custom-salla-product-card .product-info {
  border-color: rgba(0,179,214,0.18) !important;
}

/* 🟢 [سلايدر صور المنتج] إزالة الحدود الافتراضية وتحديد إطار ذهبي للصورة */
.dark .product-single salla-slider.details-slider .swiper-slide {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

.dark .product-single salla-slider.details-slider .swiper-slide img {
  max-width: 88% !important;
  max-height: 88% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;

  border: 3px solid #00B3D6 !important;
  border-radius: 16px 16px 6px 16px !important;
  padding: 5px !important;

  box-shadow:
    0 0 0 1px rgba(0,179,214,0.25),
    0 8px 24px rgba(0,0,0,0.38),
    0 0 24px rgba(0,179,214,0.12) !important;

  display: block !important;
  margin: auto !important;
}


/* =========================================================
   🟢 [القائمة الرئيسية / موبايل] mm-spn navbar
   ========================================================= */
body .mm-spn.mm-spn--navbar {
  --green-dark: #001830;
  --green: #054B7F;
  --green-hover: #0489B6;
  --gold: #00b3d6;
  --gold-light: #5FD3EC;
  --mint: #00B3D6;

  position: relative !important;
  direction: rtl !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 67%, rgba(0, 179, 214, .18), transparent 25%),
    linear-gradient(135deg, #001830, #054B7F) !important;
  border-right: 4px solid var(--gold) !important;
  color: #fff !important;
}

body .mm-spn.mm-spn--navbar,
body .mm-spn.mm-spn--navbar ul,
body .mm-spn.mm-spn--navbar li {
  background-color: transparent !important;
  background-image: none !important;
}

body .mm-spn.mm-spn--navbar ul {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .mm-spn.mm-spn--navbar li::after,
body .mm-spn.mm-spn--navbar a::after,
body .mm-spn.mm-spn--navbar span::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

body .mm-spn.mm-spn--navbar li {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 65px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(95, 211, 236, .16) !important;
}

body .mm-spn.mm-spn--navbar li > a,
body .mm-spn.mm-spn--navbar li > span {
  position: relative !important;
  top: auto !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;

  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 65px !important;
  margin: 0 !important;
  padding: 14px 60px 14px 32px !important;
  box-sizing: border-box !important;

  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
  overflow: visible !important;

  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  transition: background .25s ease, color .25s ease, transform .25s ease !important;
}

body .mm-spn.mm-spn--navbar li::before {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  top: 50% !important;
  left: 0 !important;
  width: 8px !important;
  height: 35px !important;
  transform: translateY(-50%) !important;
  border-radius: 0 11px 11px 0 !important;

  background: linear-gradient(90deg, var(--gold-light), var(--gold)) !important;
  box-shadow: 0 0 12px rgba(0, 179, 214, .34) !important;
  transition: width .25s ease, box-shadow .25s ease !important;
}

body .mm-spn.mm-spn--navbar li > a::before,
body .mm-spn.mm-spn--navbar li > span::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 34px !important;
  width: 8px !important;
  height: 8px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border-bottom: 1.5px solid #5FD3EC !important;
  border-left: 1.5px solid #5FD3EC !important;
}

body .mm-spn.mm-spn--navbar li:hover > a,
body .mm-spn.mm-spn--navbar li:hover > span {
  color: var(--gold-light) !important;
  background: linear-gradient(90deg, rgba(4, 137, 182, .5), rgba(255, 255, 255, .02)) !important;
  transform: translateX(-5px) !important;
}

body .mm-spn.mm-spn--navbar li:hover::before {
  width: 18px !important;
  box-shadow: 0 0 18px rgba(95, 211, 236, .7) !important;
}

body .mm-spn.mm-spn--navbar li:active > a,
body .mm-spn.mm-spn--navbar li:active > span {
  transform: translateX(-2px) scale(.985) !important;
  background: rgba(0, 179, 214, .16) !important;
}

body .mm-spn.mm-spn--navbar li.active > a,
body .mm-spn.mm-spn--navbar li.selected > a,
body .mm-spn.mm-spn--navbar li.current-menu-item > a {
  color: var(--mint) !important;
  background: linear-gradient(90deg, rgba(0, 179, 214, .28), rgba(0, 60, 122, .45) 58%, transparent) !important;
}

body .mm-spn.mm-spn--navbar li.active::before,
body .mm-spn.mm-spn--navbar li.selected::before,
body .mm-spn.mm-spn--navbar li.current-menu-item::before {
  width: 50px !important;
  height: 38px !important;
  border-radius: 0 14px 14px 0 !important;
}

body .mm-spn.mm-spn--navbar .mm-navbar {
  min-height: 62px !important;
  background: linear-gradient(90deg, #001830, #054B7F) !important;
  border-bottom: 1px solid rgba(0, 179, 214, .24) !important;
  color: #fff !important;
}

body .mm-spn.mm-spn--navbar .mm-title {
  color: #fff !important;
  font-weight: 800 !important;
}

/* 🟢 [القائمة] خلفية متحركة بنقاط خضراء متوهجة */
body .mm-spn.mm-spn--navbar ul {
  background-color: #000814 !important;
  background-image:
    radial-gradient(ellipse at 12% 78%, rgba(0, 179, 214, 0.22) 0%, rgba(4, 137, 182, 0.1) 22%, transparent 52%),
    radial-gradient(ellipse at 88% 15%, rgba(95, 211, 236, 0.1) 0%, transparent 40%),
    radial-gradient(3px 3px at 10% 95%, #00B3D6, transparent 72%),
    radial-gradient(2px 2px at 25% 84%, #5FD3EC, transparent 72%),
    radial-gradient(3px 3px at 42% 92%, #0489B6, transparent 72%),
    radial-gradient(2px 2px at 62% 86%, #5FD3EC, transparent 72%),
    radial-gradient(3px 3px at 82% 96%, #00B3D6, transparent 72%),
    linear-gradient(145deg, #000814 0%, #001830 52%, #000814 100%) !important;

  background-size:
    100% 100%, 100% 100%, 100% 250%, 100% 250%, 100% 250%, 100% 250%, 100% 250%, 100% 100% !important;

  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat !important;
  animation: menu-floating-dots 9s linear infinite !important;
}

@keyframes menu-floating-dots {
  from {
    background-position: center, center, center 0, center 0, center 0, center 0, center 0, center;
  }
  to {
    background-position: center, center, center -250%, center -250%, center -250%, center -250%, center -250%, center;
  }
}

/* 🟢 [قائمة سطح المكتب المطابقة للموبايل] desk-menu-like-mob */
#app.desk-menu-like-mob .mm-spn.mm-spn--navbar.mm-spn--main {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: linear-gradient(145deg, #000814, #001830) !important;
}

#app.desk-menu-like-mob .mm-spn.mm-spn--navbar.mm-spn--main::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;

  background:
    radial-gradient(ellipse at 12% 75%, rgba(0, 179, 214, 0.22) 0%, rgba(4, 137, 182, 0.1) 24%, transparent 55%),
    radial-gradient(ellipse at 90% 13%, rgba(95, 211, 236, 0.1) 0%, transparent 42%),
    radial-gradient(3px 3px at 10% 92%, #00B3D6, transparent 70%),
    radial-gradient(2px 2px at 28% 84%, #5FD3EC, transparent 70%),
    radial-gradient(3px 3px at 48% 96%, #0489B6, transparent 70%),
    radial-gradient(2px 2px at 68% 88%, #5FD3EC, transparent 70%),
    radial-gradient(3px 3px at 88% 94%, #00B3D6, transparent 70%);

  background-size: 100% 100%, 100% 100%, 100% 260%, 100% 260%, 100% 260%, 100% 260%, 100% 260%;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;

  opacity: 0.8;
  animation: desk-menu-green-particles 9s linear infinite;
}

#app.desk-menu-like-mob .mm-spn.mm-spn--navbar.mm-spn--main > ul,
#app.desk-menu-like-mob .mm-spn.mm-spn--navbar.mm-spn--main .mm-navbar {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes desk-menu-green-particles {
  from {
    background-position: center, center, center 0, center 0, center 0, center 0, center 0;
  }
  to {
    background-position: center, center, center -260%, center -260%, center -260%, center -260%, center -260%;
  }
}

/* 🟢 [إصلاح تضارب سابق] cntr-menu-title */
#app.cntr-menu-title .mm-spn.mm-spn--navbar {
  position: relative !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 15% 70%, rgba(0, 179, 214, .16), transparent 30%),
    linear-gradient(145deg, #000814, #001830) !important;
}

#app.cntr-menu-title .mm-spn.mm-spn--navbar::after {
  content: none !important;
  display: none !important;
}

#app.cntr-menu-title .mm-spn.mm-spn--navbar li,
#app.cntr-menu-title .mm-spn.mm-spn--navbar li > a,
#app.cntr-menu-title .mm-spn.mm-spn--navbar li > span {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
}

/* 🟢 [قائمة الموبايل] عناصر الأزرار وتفاعلاتها */
#mobile-menu .mobile-menu-item:not(.item-has-bg) > a,
#mobile-menu .mobile-menu-item:not(.item-has-bg) > span {
  position: relative !important;
  display: block !important;
  min-height: auto !important;
  margin: 4px 8px !important;
  padding: 14px 20px !important;

  color: #fff !important;
  background: linear-gradient(135deg, rgba(0, 60, 122, .96), rgba(1, 32, 67, .96)) !important;

  border: 1px solid rgba(0, 179, 214, .34) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px rgba(95, 211, 236, .08) !important;

  transition: transform .2s ease, background .2s ease, border-color .2s ease !important;
}

#mobile-menu .mobile-menu-item:not(.item-has-bg) > a:hover,
#mobile-menu .mobile-menu-item:not(.item-has-bg) > span:hover {
  color: #5FD3EC !important;
  background: linear-gradient(135deg, rgba(4, 137, 182, .98), rgba(1, 32, 67, .98)) !important;
  border-color: #00b3d6 !important;
  transform: translateX(-4px) !important;
}

#mobile-menu .mobile-menu-item:not(.item-has-bg) > a:active,
#mobile-menu .mobile-menu-item:not(.item-has-bg) > span:active {
  transform: scale(.985) !important;
}

/* =========================================================
   🟡 [قائمة المستخدم المنسدلة] الحاوية — تم إضافة z-index عالي
   لضمان ظهورها فوق كل العناصر بعد إصلاح مشكلة الهيدر أعلاه
   ========================================================= */
.s-user-menu-dropdown-list {
    background:
        radial-gradient(circle at 50% 0%, rgba(0,179,214,0.08), transparent 45%),
        linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

    border: 1px solid rgba(0,179,214,0.42) !important;
    border-radius: 16px 16px 6px 16px !important;

    padding: 8px !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.40),
        0 0 24px rgba(0,179,214,0.10),
        inset 0 1px 0 rgba(0,179,214,0.10) !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    z-index: 9999 !important;
}

/* 🟡 [قائمة المستخدم] الهيدر العلوي — خلفية بدرجات الذهبي فقط
   (بدون أخضر) عشان يبرز كترويسة مميزة داخل القائمة المنسدلة */
.s-user-menu-dropdown-header {
    background:
        linear-gradient(135deg, #036284 0%, #00B3D6 45%, #5FD3EC 75%, #00B3D6 100%) !important;

    color: #003C7A !important;

    padding: 14px 16px !important;
    margin: -8px -8px 6px -8px !important; /* يلتصق بحواف الحاوية الأصلية */

    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid rgba(0,60,122,0.18) !important;

    font-weight: 800 !important;
    font-size: 13px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 4px 10px rgba(0,179,214,0.22) !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* نصوص/سبان داخل الهيدر تبقى بلون أخضر داكن لتباين واضح فوق الذهبي */
.s-user-menu-dropdown-header,
.s-user-menu-dropdown-header * {
    color: #003C7A !important;
    text-shadow: none !important;
}

/* أيقونة/أفاتار داخل الهيدر (إن وجدت) */
.s-user-menu-dropdown-header svg,
.s-user-menu-dropdown-header i,
.s-user-menu-dropdown-header img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* 🟡 [قائمة المستخدم] صف/عنصر — محاذاة الأيقونة مصلحة */
.s-user-menu-dropdown-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🟡 [قائمة المستخدم] رابط الزر — تمت إضافة إطار ثابت + تفاعلات هوفر/فوكس/ضغط */
.s-user-menu-dropdown-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;

    padding: 10px 14px !important;
    margin: 0 !important;

    color: #C7DCE6 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    background: rgba(0,179,214,0.03) !important;
    border: 1px solid rgba(0,179,214,0.22) !important; /* إطار ثابت دائم */
    border-radius: 10px 10px 4px 10px !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease !important;
}

/* الأيقونة داخل الرابط — محاذاة صحيحة بدون انسحاب للأعلى */
.s-user-menu-dropdown-item a svg,
.s-user-menu-dropdown-item a i,
.s-user-menu-dropdown-item a .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;

    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    top: auto !important;
    position: relative !important;
    vertical-align: middle !important;

    color: #00B3D6 !important;
    filter: drop-shadow(0 0 3px rgba(0,179,214,0.20)) !important;

    transition:
        transform 0.3s ease,
        filter 0.3s ease !important;
}

.s-user-menu-dropdown-item a span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* هوفر: إطار ذهبي أوضح + توهج خفيف + انزلاق بسيط */
.s-user-menu-dropdown-item a:hover {
    background:
        linear-gradient(90deg, rgba(0,179,214,0.18), rgba(0,179,214,0.03)) !important;

    border-color: rgba(0,179,214,0.60) !important;
    color: #5FD3EC !important;
    transform: translateX(-3px) !important;

    box-shadow:
        0 4px 14px rgba(0,179,214,0.18),
        inset 0 1px 0 rgba(95,211,236,0.10) !important;
}

.s-user-menu-dropdown-item a:hover svg,
.s-user-menu-dropdown-item a:hover i,
.s-user-menu-dropdown-item a:hover .icon {
    transform: scale(1.12) !important;
    filter: drop-shadow(0 0 6px rgba(0,179,214,0.45)) !important;
}

/* الضغط */
.s-user-menu-dropdown-item a:active {
    transform: translateX(-1px) scale(0.98) !important;
    background: rgba(0,179,214,0.16) !important;
}

/* التركيز عبر لوحة المفاتيح (لأجل الوصولية) */
.s-user-menu-dropdown-item a:focus-visible {
    outline: none !important;
    border-color: #00B3D6 !important;
    box-shadow: 0 0 0 3px rgba(0,179,214,0.25) !important;
}

/* فاصل بين العناصر (اختياري) */
.s-user-menu-dropdown-list hr,
.s-user-menu-dropdown-list .divider {
    border: none !important;
    border-top: 1px solid rgba(0,179,214,0.18) !important;
    margin: 4px 6px !important;
}
/* =========================================================
   نيكس — تنسيقات إضافية (الإشعارات / الأزرار / السلة / الطلبات)
   الذهبي: #00B3D6 | الأخضر الداكن: #003C7A
   ========================================================= */

/* 🟢 [الإشعارات] العنصر المقروء — مظهر خافت مقارنة بالجديد */
.dark #app .main-content .s-notifications-item-read:not(.dm-text-sec) {
  background: linear-gradient(160deg, #003C7A 0%, #0a1830 100%) !important;
  color: rgba(199, 220, 230, 0.55) !important;
  border: 1px solid rgba(0, 179, 214, 0.14) !important;
  border-radius: 14px 14px 5px 14px !important;
  padding: 10px 12px !important;
  opacity: 0.78 !important;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease !important;
}

.dark #app .main-content .s-notifications-item-read:not(.dm-text-sec):hover {
  opacity: 1 !important;
  border-color: rgba(0, 179, 214, 0.30) !important;
  background: linear-gradient(160deg, #003C7A 0%, #0d2c4a 100%) !important;
}

/* 🔴 [تنبيه] .self-start كلاس محاذاة عام (Tailwind: align-self flex-start)
   على الأغلب مستخدم بعدة أماكن بالموقع. إخفاؤه الكامل قد يخفي عناصر
   غير مقصودة (أزرار، حقول، عناصر تخطيط). إذا العنصر المقصود له كلاس
   إضافي مميز، أضفه للسيليكتور بدل الشمولية الكاملة. */
.self-start {
  display: none !important;
}

/* 🟢 [زر أساسي] .s-button-primary — تعبئة ذهبية متدرجة + تفاعلات */
.s-button-primary {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95, 211, 236, 0.85) !important;
  border-radius: 12px 12px 4px 12px !important;
  font-weight: 800 !important;
  text-shadow: none !important;

  box-shadow:
    0 6px 18px rgba(0, 179, 214, 0.20),
    0 0 16px rgba(0, 179, 214, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

  transition:
    filter 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease !important;
}

.s-button-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 24px rgba(0, 179, 214, 0.30),
    0 0 22px rgba(0, 179, 214, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

.s-button-primary:active {
  transform: scale(0.97) !important;
}

/* 🟢 [جدول الطلبات] صفوف الجدول — حدود ذهبية خفيفة + هوفر */
.dark #app .s-orders-table-tbody-tr {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 179, 214, 0.14) !important;
  color: #C7DCE6 !important;
  transition: background 0.2s ease !important;
}

.dark #app .s-orders-table-tbody-tr:hover {
  background: rgba(0, 179, 214, 0.06) !important;
}

/* 🟡 [زر عام] .s-button-element — هذا الكلاس أساسي مشترك بين كل أنواع
   الأزرار بمنصة سلة (أساسي/ثانوي/محدد بإطار). نسّقته كطبقة تفاعلات
   عامة (حركة، فوكس، ضغط) بدون فرض لون، عشان يتناسق مع أي لون أساسي
   موروث من نوع الزر (مثل .s-button-primary أعلاه) بدل ما يتصادم معه. */
.s-button-element:not(:disabled):not([loading]) {
  border-radius: 12px 12px 4px 12px !important;
  cursor: pointer !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    filter 0.25s ease !important;
}

.s-button-element:not(:disabled):not([loading]):hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

.s-button-element:not(:disabled):not([loading]):active {
  transform: scale(0.97) !important;
}

.s-button-element:not(:disabled):not([loading]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 179, 214, 0.28) !important;
}

/* 🟢 [بانر الطلبات] */
.s-orders-banner {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 179, 214, 0.08), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0, 179, 214, 0.42) !important;
  border-radius: 16px 16px 6px 16px !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(0, 179, 214, 0.08),
    inset 0 1px 0 rgba(0, 179, 214, 0.10) !important;

  overflow: hidden !important;
}

/* 🟡 [أنيميشن عام] .animated — افترضت إنه يُستخدم لدخول العناصر تدريجياً
   بالصفحة (نمط شائع بمكتبات animate.css). لو الاستخدام الفعلي مختلف
   (مثلاً سبينر تحميل)، وضّح لي الشكل وأعدّل الحركة. */
.animated {
  animation: nyx-fade-in-up 0.5s ease both !important;
}

@keyframes nyx-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🟢 [بطاقة رصيد المحفظة] */
.s-wallet-balance-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 179, 214, 0.10), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  border: 1px solid rgba(0, 179, 214, 0.48) !important;
  border-radius: 16px 16px 6px 16px !important;
  color: #5FD3EC !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.40),
    0 0 26px rgba(0, 179, 214, 0.12),
    inset 0 1px 0 rgba(0, 179, 214, 0.10) !important;

  overflow: hidden !important;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

.s-wallet-balance-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 179, 214, 0.72) !important;
}

/* الرقم/الرصيد يبرز بالذهبي */
.s-wallet-balance-card .balance,
.s-wallet-balance-card .amount,
.s-wallet-balance-card strong {
  color: #00B3D6 !important;
  text-shadow: 0 0 10px rgba(0, 179, 214, 0.20) !important;
}

/* 🟢 [عنصر قائمة عام] .s-list-tile-item — يطبّق على كل القوائم المشابهة
   بالمحتوى الرئيسي (غير خاص بودجت الإهداء المنسّق سابقًا) */
.dark #app .main-content .s-list-tile-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 179, 214, 0.06), transparent 48%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0, 179, 214, 0.34) !important;
  border-radius: 14px 14px 5px 14px !important;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(0, 179, 214, 0.08) !important;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

.dark #app .main-content .s-list-tile-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 179, 214, 0.60) !important;
}

/* 🟡 [مفتاح التبديل] .s-toggle-switcher — افترضت بنية شائعة لمفتاح
   التبديل (مسار + حالة تفعيل عبر كلاس/سمة). لو البنية الفعلية مختلفة
   (مثلاً عبر input مخفي بجانبه)، ابعتلي الـ HTML وأضبطها بدقة. */
.s-toggle .s-toggle-switcher {
  background: rgba(0, 179, 214, 0.18) !important;
  border: 1px solid rgba(0, 179, 214, 0.40) !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

.s-toggle.active .s-toggle-switcher,
.s-toggle input:checked + .s-toggle-switcher,
.s-toggle[aria-checked="true"] .s-toggle-switcher {
  background: linear-gradient(90deg, #00B3D6, #5FD3EC) !important;
  border-color: rgba(95, 211, 236, 0.80) !important;
  box-shadow: 0 0 10px rgba(0, 179, 214, 0.30) !important;
}

/* 🟢 [مودال البحث] الجسم الداخلي */
.s-search-modal.s-search-modal-new .s-modal-body {
  background: linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;
  color: #C7DCE6 !important;
  border-top: 1px solid rgba(0, 179, 214, 0.18) !important;
}

/* 🟢 [توست إضافة المنتج] عند النجاح — بطاقة ذهبية الإطار + حركة دخول */
.s-add-product-toast.s-add-product-toast--visible {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 179, 214, 0.10), transparent 45%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0, 179, 214, 0.48) !important;
  border-radius: 14px 14px 5px 14px !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(0, 179, 214, 0.14) !important;

  animation: nyx-toast-in 0.35s ease both !important;
}

@keyframes nyx-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 🟢 [فجوة السلة] رسالة "أضف كذا لتحصل على الشحن المجاني" ونحوها */
.dark salla-basket-gap.s-basket-gap-entry,
.dark .s-basket-gap-entry {
  background: linear-gradient(90deg, rgba(0, 179, 214, 0.10), rgba(0, 60, 122, 0.4)) !important;
  border: 1px solid rgba(0, 179, 214, 0.32) !important;
  border-radius: 12px 12px 4px 12px !important;
  color: #5FD3EC !important;
  padding: 10px 14px !important;
}

/* 🟢 [ودجت الإهداء] نسخة عامة (بدون اشتراط .dark) */
body .s-gifting-widget .s-list-tile-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 179, 214, 0.06), transparent 48%),
    linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;

  color: #5FD3EC !important;
  border: 1px solid rgba(0, 179, 214, 0.38) !important;
  border-radius: 14px 14px 5px 14px !important;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease !important;
}

body .s-gifting-widget .s-list-tile-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 179, 214, 0.65) !important;
}

/* 🟢 [كوبونات السلة] الحاوية */
.s-cart-coupons-wrapper {
  background: linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;
  border: 1px solid rgba(0, 179, 214, 0.32) !important;
  border-radius: 14px 14px 5px 14px !important;
  padding: 12px !important;
  color: #C7DCE6 !important;
}

/* 🟢 [زر تطبيق الكوبون] */
.dark #app .s-cart-coupons-coupon-button button {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95, 211, 236, 0.82) !important;
  border-radius: 10px 10px 4px 10px !important;
  font-weight: 700 !important;

  transition:
    filter 0.25s ease,
    transform 0.2s ease !important;
}

.dark #app .s-cart-coupons-coupon-button button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

/* 🟢 [زر إتمام الطلب] الأبرز بالسلة — تعبئة ذهبية مع توهج أقوى */
.dark #app salla-cart-summary-card #s-cart-summary-card-submit .s-button-element {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95, 211, 236, 0.90) !important;
  border-radius: 12px 12px 4px 12px !important;
  font-weight: 800 !important;

  box-shadow:
    0 8px 22px rgba(0, 179, 214, 0.28),
    0 0 22px rgba(0, 179, 214, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.dark #app salla-cart-summary-card #s-cart-summary-card-submit .s-button-element:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
}

/* 🟢 [حقل الكمية] */
#app.quantity-inputs-old-shape .s-quantity-input-input {
  background: rgba(1, 32, 67, 0.88) !important;
  color: #5FD3EC !important;
  border: 1px solid rgba(0, 179, 214, 0.35) !important;
  border-radius: 8px !important;
  text-align: center !important;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

#app.quantity-inputs-old-shape .s-quantity-input-input:focus {
  border-color: rgba(0, 179, 214, 0.75) !important;
  outline: none !important;
  box-shadow: 0 0 10px rgba(0, 179, 214, 0.15) !important;
}

/* 🟢 [زر أساسي - نمط قديم] .btn--primary — نفس مظهر .s-button-primary لتناسق كامل */
.btn--primary {
  background:
    linear-gradient(135deg, #00B3D6 0%, #5FD3EC 42%, #00B3D6 72%, #036284 100%) !important;
  color: #003C7A !important;
  border: 1px solid rgba(95, 211, 236, 0.85) !important;
  border-radius: 12px 12px 4px 12px !important;
  font-weight: 800 !important;

  transition:
    filter 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease !important;
}

.btn--primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
}

.btn--primary:active {
  transform: scale(0.97) !important;
}

/* 🟢 [قسم الدفع] */
.sections-wrapper > div.section--payment {
  background: linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;
  border: 1px solid rgba(0, 179, 214, 0.30) !important;
  border-radius: 16px 16px 6px 16px !important;
  padding: 16px !important;
}

/* 🔴 [تنبيه] .justify-content-center كلاس محاذاة عام (نمط Bootstrap:
   justify-content:center) يُستخدم على الأرجح بعشرات الأماكن بالموقع.
   أي تنسيق بصري قوي هنا سيؤثر على كل شيء فيه هذا الكلاس. اكتفيت بإضافة
   فراغ بسيط آمن بين العناصر. لو تقصد قسم معيّن، أعطني كلاس أدق له. */
.justify-content-center {
  gap: 8px !important;
}

/* 🟢 [ملخص السلة - سطح المكتب] */
#cart_summary_desktop .cart-summary-main {
  background: linear-gradient(160deg, #003C7A 0%, #054B7F 58%, #012043 100%) !important;
  border: 1px solid rgba(0, 179, 214, 0.36) !important;
  border-radius: 16px 16px 6px 16px !important;
  color: #C7DCE6 !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(0, 179, 214, 0.08) !important;

  padding: 16px !important;
}

/* 🟢 [خلفية الموقع العامة] body.body */
body.body {
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 179, 214, 0.05), transparent 35%),
    radial-gradient(circle at 85% 90%, rgba(0, 179, 214, 0.04), transparent 40%),
    linear-gradient(160deg, #000814 0%, #003C7A 45%, #012043 100%) !important;

  background-attachment: fixed !important;
  min-height: 100vh !important;
}
.s-breadcrumb-wrapper,
.s-breadcrumb-wrapper * {
  visibility: visible !important;
  opacity: 1 !important;
}
/* ============================================================
   عناوين — لون النص ثابت + شريط لمعان متحرك فوقه فقط
   h1: أبيض  |  h2: أخضر  |  h3: ذهبي
   ============================================================ */

@keyframes nex-text-shine {
  0%   { background-position: -180% 0, 0 0; }
  100% { background-position: 180% 0, 0 0; }
}

h2, h3{
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  display: inline-block;
  background-repeat: no-repeat, no-repeat;
  background-size: 55% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nex-text-shine 3.2s ease-in-out infinite;
}

/* ===== h2 — أخضر ثابت + لمعة متحركة ===== */
h2{
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%),
    linear-gradient(#00B3D6, #00B3D6);
  filter: drop-shadow(0 0 8px rgba(0,179,214,0.4));
}

/* ===== h3 — ذهبي ثابت + لمعة متحركة ===== */
h3{
  background-image:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.9) 50%, transparent 65%),
    linear-gradient(#00b3d6, #00b3d6);
  filter: drop-shadow(0 0 8px rgba(0,179,214,0.4));
}
/* ===== تنسيق النصوص .gap-1 و .last:mb-0:last-child ===== */
.gap-1,
.last\:mb-0:last-child{
  font-weight: 900;
  color: #00B3D6;
  text-align: center;
  font-size: 1.15em;
}
/* ============================================================
   هوية نيكس — تنسيق موحّد لعناصر واجهة سلة
   نفس شكل وألوان بطاقات الهوية (أخضر غامق + إطار/لمسات ذهبية)
   ============================================================ */

:root{
  --nex-bg-1: #003C7A;
  --nex-bg-2: #012043;
  --nex-bg-3: #000f24;
  --nex-gold: #00b3d6;
  --nex-gold-light: #5fd3ec;
  --nex-green: #00B3D6;
  --nex-green-light: #5FD3EC;
  --nex-text: #EAF7FB;
  --nex-text-muted: #7FA9BE;
}

/* ============================================================
   1) بطاقة ملخص السلة (السلة السفلية)
   ============================================================ */
.dark #app salla-cart-summary-card .s-cart-summary-card-sheet-wrap,
.dark #app salla-cart-summary-card .s-cart-summary-card-sheet,
.dark #app salla-cart-summary-card .s-cart-summary-card-bar,
.dark #app salla-cart-summary-card .s-cart-summary-card-action{
  background: linear-gradient(160deg, var(--nex-bg-1) 0%, var(--nex-bg-2) 65%, var(--nex-bg-3) 100%) !important;
  border: 1px solid rgba(0,179,214,0.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35), 0 0 14px rgba(0,179,214,0.12) !important;
  color: var(--nex-text) !important;
}

/* ============================================================
   2) بطاقة الكوبونات
   ============================================================ */
.dark #app .s-cart-coupons-card{
  background: linear-gradient(160deg, var(--nex-bg-1) 0%, var(--nex-bg-2) 65%, var(--nex-bg-3) 100%) !important;
  border: 1px solid rgba(0,179,214,0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3) !important;
  color: var(--nex-text) !important;
}

/* ============================================================
   3) عنصر العد التنازلي (كل خانة: أيام/ساعات/دقائق/ثواني)
   ============================================================ */
.dark .s-count-down-item{
  background: linear-gradient(160deg, var(--nex-bg-1) 0%, var(--nex-bg-2) 100%) !important;
  border: 1px solid rgba(0,179,214,0.35) !important;
  border-radius: 12px !important;
  color: var(--nex-gold-light) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(0,179,214,0.15) !important;
}

/* ============================================================
   4) أيقونة الكاش باك
   ============================================================ */
.s-cashback-banner-icon{
  background: linear-gradient(160deg, var(--nex-gold-light), var(--nex-gold)) !important;
  color: #012043 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(0,179,214,0.4) !important;
}

/* ============================================================
   5) الأزرار
   ============================================================ */

/* زر أساسي (تعبئة كاملة ذهبية) */
.btn--primary{
  background: linear-gradient(180deg, var(--nex-gold-light), var(--nex-gold)) !important;
  color: #012043 !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.btn--primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0,179,214,0.35) !important;
}

/* زر أساسي بإطار (Outline) — ذهبي */
.dark .s-button-primary-outline{
  background: transparent !important;
  border: 1.5px solid var(--nex-gold) !important;
  color: var(--nex-gold-light) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.dark .s-button-primary-outline:hover{
  background: linear-gradient(180deg, var(--nex-gold-light), var(--nex-gold)) !important;
  color: #012043 !important;
  transform: translateY(-2px) !important;
}

/* زر ثانوي بإطار فاتح — أخضر (تمييزه عن الذهبي الأساسي) */
.dark #app .main-content .s-button-light-outline:not(.dm-text-sec){
  background: transparent !important;
  border: 1.5px solid var(--nex-green) !important;
  color: var(--nex-green-light) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.dark #app .main-content .s-button-light-outline:not(.dm-text-sec):hover{
  background: rgba(0,179,214,0.15) !important;
  transform: translateY(-2px) !important;
}

/* زر تسجيل الدخول عبر مواقع التواصل */
.s-login-modal-social-btn:is(.dark *){
  background: linear-gradient(160deg, var(--nex-bg-1), var(--nex-bg-2)) !important;
  border: 1px solid rgba(0,179,214,0.3) !important;
  color: var(--nex-text) !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, transform .2s ease !important;
}
.s-login-modal-social-btn:is(.dark *):hover{
  border-color: var(--nex-gold) !important;
  transform: translateY(-2px) !important;
}

/* رابط بإطار داخل مودال تسجيل الدخول */
.s-login-modal-link.link-outline{
  color: var(--nex-gold-light) !important;
  border-bottom: 1px solid var(--nex-gold) !important;
  font-weight: 700 !important;
  transition: color .2s ease, border-color .2s ease !important;
}
.s-login-modal-link.link-outline:hover{
  color: var(--nex-green-light) !important;
  border-color: var(--nex-green) !important;
}

/* نيكس | تنسيقات وصف الباقات — الصقه في CSS المخصص للثيم */

:where(#nxd,#nxd *){box-sizing:border-box;margin:0;padding:0}
#nxd{--navy:#003C7A;--navy2:#054B7F;--deep:#012043;--ink:#010f22;--cy:#00B3D6;--cy2:#5FD3EC;--ice:#BFF3FF;--txt:#C7DCE6;--gold:#FFD36B;--ok:#3DE8A0;
  direction:rtl;width:100%;max-width:640px;margin:0 auto;font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;color:#EAF7FB;line-height:1.6;display:flex;flex-direction:column;gap:14px}
:where(#nxd) svg{display:block}
#nxd .nxd-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#nxd .card{position:relative;overflow:hidden;border-radius:22px;padding:18px;border:1px solid rgba(95,211,236,.22);
  background:radial-gradient(120% 90% at 100% 0%,rgba(0,179,214,.14),transparent 55%),linear-gradient(160deg,#04274d,#011a36 60%,#010f22)}
#nxd .kick{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--cy2);margin-bottom:6px}
#nxd .card h2,#nxd .card h3{font-weight:900;line-height:1.3;color:#fff}
#nxd .card h2{font-size:24px}#nxd .card h3{font-size:19px}
#nxd .hl{background:linear-gradient(180deg,#E9FCFF,#5FD3EC 70%,#00B3D6);-webkit-background-clip:text;background-clip:text;color:transparent}
#nxd p.sub{font-size:13.5px;color:var(--txt);font-weight:500}

/* ===== 1) الهيرو + نيكس يتكلم ===== */
#nxd .hero{display:grid;grid-template-columns:1fr 96px;gap:12px;align-items:center;padding:20px 18px 16px}
#nxd .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:8px}
#nxd .badge.ice{color:#012043;background:linear-gradient(135deg,#F2FDFF,#BFF3FF 50%,#7FDDF2)}
#nxd .badge.gold{color:#2a1c00;background:linear-gradient(135deg,#FFE7A3,#FFD36B 60%,#F2B33D)}
#nxd .card.hero h2{font-size:26px}
#nxd .hero .tag{margin-top:6px;font-size:15px;font-weight:700;color:var(--txt)}
#nxd .hero .tag b{color:var(--cy2)}
#nxd .me{position:relative;width:96px;height:118px}
#nxd .nxd-face{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(0,179,214,.45));animation:nxdBob 3.2s ease-in-out infinite}
#nxd .nxd-face .eyeR{transform-box:fill-box;transform-origin:center;animation:nxdWink 4.8s infinite}
#nxd .nxd-face .nx-wisp{transform-box:fill-box;transform-origin:30% 100%;animation:nxdWisp 2.6s ease-in-out infinite}
@keyframes nxdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes nxdWink{0%,88%,94%,100%{transform:scaleY(1)}90%,92%{transform:scaleY(.08)}}
@keyframes nxdWisp{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
#nxd .say{grid-column:1/-1;position:relative;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:13.5px;font-weight:700;color:#EAF7FB;
  background:rgba(95,211,236,.1);border:1px solid rgba(95,211,236,.28)}
#nxd .say b{color:var(--cy2)}
#nxd .facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#nxd .fact{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:14px;text-align:center;font-size:11.5px;font-weight:800;color:#EAF7FB;
  background:rgba(1,32,67,.6);border:1px solid rgba(95,211,236,.2)}
#nxd .fact .nxd-i{width:20px;height:20px;color:var(--cy2)}

/* ===== 2) زر وضع بلس ===== */
#nxd .sw-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;top:0;right:0}
#nxd .sw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
#nxd .sw{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;cursor:pointer;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(1,32,67,.8);border:1px solid rgba(95,211,236,.3);font-size:12.5px;font-weight:800;color:var(--txt);user-select:none}
#nxd .sw .tr{position:relative;width:46px;height:26px;border-radius:999px;background:#1b2d44;transition:background .3s}
#nxd .sw .tr::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#7f93a8;transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .3s}
#nxd .sw-in:checked ~ .sw-head .sw .tr{background:linear-gradient(90deg,var(--cy),var(--cy2));box-shadow:0 0 14px rgba(0,179,214,.6)}
#nxd .sw-in:checked ~ .sw-head .sw .tr::after{transform:translateX(-20px);background:#fff}
#nxd .sw .on{display:none;color:var(--cy2)}
#nxd .sw-in:checked ~ .sw-head .sw .on{display:inline}
#nxd .sw-in:checked ~ .sw-head .sw .off{display:none}
#nxd .sw-in:not(:checked) ~ .sw-head .sw{animation:nxdNudge 2.2s ease-in-out infinite}
@keyframes nxdNudge{0%,70%,100%{box-shadow:0 0 0 0 rgba(95,211,236,0)}80%{box-shadow:0 0 0 6px rgba(95,211,236,.25)}}
#nxd .rows{display:flex;flex-direction:column;gap:7px}
#nxd .rib{margin:0}
#nxd .rib .pl-sec{border-radius:22px}
#nxd .rw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.45;font-weight:700;color:#8193a6;
  background:rgba(1,15,34,.65);border:1px dashed rgba(127,147,168,.35);transition:all .45s ease}
#nxd .rw .st{margin-right:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(127,147,168,.15);color:#8193a6;transition:all .45s}
#nxd .rw .st .l,#nxd .rw .st .u{align-items:center;gap:4px}
#nxd .rw .st .l{display:inline-flex}#nxd .rw .st .u{display:none}
#nxd .sw-in:checked ~ .rows .rw{color:#EAF7FB;border-style:solid;border-color:rgba(95,211,236,.4);background:linear-gradient(90deg,rgba(0,179,214,.18),rgba(1,32,67,.5))}
#nxd .sw-in:checked ~ .rows .rw .st{color:#012043;background:var(--cy2)}
#nxd .sw-in:checked ~ .rows .rw .st .l{display:none}
#nxd .sw-in:checked ~ .rows .rw .st .u{display:inline-flex}
#nxd .sw-in:checked ~ .rows .rw:nth-child(2){transition-delay:.08s}#nxd .sw-in:checked ~ .rows .rw:nth-child(3){transition-delay:.16s}
#nxd .sw-in:checked ~ .rows .rw:nth-child(4){transition-delay:.24s}#nxd .sw-in:checked ~ .rows .rw:nth-child(5){transition-delay:.32s}
#nxd .rw .nxd-i{width:16px;height:16px}
#nxd .sw-note{margin-top:10px;font-size:12px;font-weight:700;color:var(--txt);text-align:center}
#nxd .sw-note .a{display:inline}#nxd .sw-note .b{display:none;color:var(--cy2)}
#nxd .sw-in:checked ~ .sw-note .a{display:none}#nxd .sw-in:checked ~ .sw-note .b{display:inline}

/* ===== 3) التطبيقات (ثابتة ومزاياها تحتها) ===== */
#nxd .apps{display:flex;flex-direction:column;gap:9px;margin-top:12px}
#nxd .app{border-radius:16px;background:rgba(1,32,67,.55);border:1px solid rgba(95,211,236,.22);padding:10px 12px 12px}
#nxd .app .ah{display:flex;align-items:center;gap:11px;margin-bottom:9px}
#nxd .app img{width:42px;height:42px;border-radius:11px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.35)}
#nxd .app .nm{flex:1;font-size:15.5px;font-weight:900;color:#fff}
#nxd .app .nm b{color:var(--cy2)}
#nxd .app .no{font:900 20px/1 Arial,sans-serif;color:rgba(95,211,236,.18)}
#nxd .app ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#nxd .app li{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;font-weight:600;color:#DDEFF6;line-height:1.5}
#nxd .app li .nxd-i{width:14px;height:14px;margin-top:3px;color:var(--ok);stroke-width:3}
@media (max-width:420px){#nxd .app ul{grid-template-columns:1fr}}

/* ===== فيديو الشرح ===== */
#nxd .vid{position:relative;margin-top:12px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#000;border:1px solid rgba(95,211,236,.35);box-shadow:0 0 22px rgba(0,179,214,.18)}
#nxd .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#nxd .vlink{display:block;margin-top:8px;text-align:center;font-size:12px;font-weight:700;color:var(--cy2)!important;text-decoration:none!important}

/* ===== معلومات مهمة (نص فقط) ===== */
#nxd .info h3{margin-bottom:6px}
#nxd .info ol{list-style:none;counter-reset:q}
#nxd .info li{counter-increment:q;position:relative;padding:10px 30px 10px 0;font-size:13.5px;font-weight:500;color:#DDEFF6;line-height:1.75;border-bottom:1px solid rgba(95,211,236,.12)}
#nxd .info li:last-child{border-bottom:0}
#nxd .info li::before{content:counter(q);position:absolute;right:0;top:11px;width:21px;height:21px;border-radius:7px;font:800 11px/21px Arial,sans-serif;text-align:center;color:var(--cy2);background:rgba(95,211,236,.1)}
#nxd .info li b{color:#fff;font-weight:800}

/* ===== 4) والباقي ===== */
#nxd .rest-h{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
#nxd .big{font:900 40px/1 'Tajawal',sans-serif;direction:ltr}
#nxd .tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#nxd .tile{position:relative;overflow:hidden;padding:14px 12px 13px;border-radius:16px;background:rgba(1,32,67,.6);border:1px solid rgba(95,211,236,.22);min-height:92px}
#nxd .tile .bi{position:absolute;left:-6px;bottom:-8px;width:62px;height:62px;color:rgba(95,211,236,.13);stroke-width:1.4}
#nxd .tile b{position:relative;display:block;font-size:14.5px;font-weight:900;color:#fff}
#nxd .tile span{position:relative;display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--txt)}
#nxd .tile .sm{position:relative;width:30px;height:30px;padding:6px;border-radius:10px;margin-bottom:7px;color:#012043;background:linear-gradient(135deg,var(--ice),var(--cy2))}

/* ===== 5) الهدية ===== */
#nxd .gift{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;color:#2a1c00;
  background:linear-gradient(120deg,#FFE7A3,#FFD36B 55%,#F2B33D);box-shadow:0 10px 26px rgba(255,211,107,.18);position:relative;overflow:hidden}
#nxd .gift::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:nxdSheen 3.4s ease-in-out infinite}
@keyframes nxdSheen{0%,55%{left:-40%}100%{left:140%}}
#nxd .gift .gi{width:46px;height:46px;padding:10px;border-radius:14px;background:#2a1c00;color:#FFD36B}
#nxd .gift small{display:block;font-size:12px;font-weight:800;opacity:.75}
#nxd .gift b{display:block;font-size:16.5px;font-weight:900}
#nxd .gift .free{margin-right:auto;flex-shrink:0;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;background:#2a1c00;color:#FFD36B}

/* ===== 6) الخطوات ===== */
#nxd .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;counter-reset:s}
#nxd .stp{position:relative;padding:12px 8px 10px;border-radius:16px;text-align:center;background:rgba(1,32,67,.6);border:1px solid rgba(95,211,236,.22)}
#nxd .stp .ci{width:40px;height:40px;margin:0 auto 7px;padding:9px;border-radius:50%;color:#012043;background:linear-gradient(135deg,var(--ice),var(--cy2));box-shadow:0 0 16px rgba(0,179,214,.35)}
#nxd .stp b{display:block;font-size:13px;font-weight:900;color:#fff}
#nxd .stp span{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--txt);line-height:1.5}
#nxd .stp::before{counter-increment:s;content:counter(s);position:absolute;top:7px;right:9px;font:900 12px/1 Arial,sans-serif;color:rgba(95,211,236,.45)}

/* ===== 7) مهم + الدعم ===== */
#nxd .note{display:flex;gap:10px;padding:12px 14px;border-radius:16px;font-size:12.5px;font-weight:600;color:var(--txt);background:rgba(255,211,107,.07);border:1px solid rgba(255,211,107,.3)}
#nxd .note .nxd-i{color:var(--gold);width:20px;height:20px;margin-top:2px}
#nxd .note b{color:#fff}
#nxd .help{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;text-decoration:none!important;color:#EAF7FB!important;
  background:linear-gradient(135deg,rgba(0,60,122,.75),rgba(1,32,67,.9));border:1px solid rgba(95,211,236,.35)}
#nxd .help .mf{width:52px;height:64px;flex-shrink:0}
#nxd .help b{display:block;font-size:14.5px;font-weight:900}
#nxd .help span{display:block;font-size:12px;font-weight:600;color:var(--txt)}
#nxd .help .go{margin-right:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;font-size:13px;font-weight:900;color:#012043;background:linear-gradient(135deg,var(--ice),var(--cy2) 55%,var(--cy))}
#nxd .help .go .nxd-i{width:16px;height:16px}

@media (max-width:420px){
  #nxd .hero{grid-template-columns:1fr 78px;padding:16px 14px 14px}
  #nxd .me{width:78px;height:96px}
  #nxd .card.hero h2{font-size:22px}
  #nxd .card{padding:15px 13px}
  #nxd .facts{grid-template-columns:repeat(2,1fr)}
  #nxd .fact{flex-direction:row;justify-content:center;font-size:12px}
  #nxd .sw-head{flex-direction:column;align-items:flex-start}
  #nxd .steps{grid-template-columns:1fr}
  #nxd .stp{display:grid;grid-template-columns:40px 1fr;gap:2px 10px;text-align:right;align-items:center;padding:10px 12px}
  #nxd .stp .ci{grid-row:1/3;margin:0}
  #nxd .stp::before{display:none}
  #nxd .gift{flex-wrap:wrap}
  #nxd .help{flex-wrap:wrap}#nxd .help .go{margin-right:0;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){#nxd *{animation:none!important;transition:none!important}}

/* ===== صندوق الماسية ===== */
#nxd .box-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;top:0;right:0}
#nxd .boxwrap{grid-column:1/-1;position:relative;margin-top:4px}
#nxd .box{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;padding:6px 0 2px;user-select:none}
#nxd .bx{position:relative;width:150px;height:118px}
#nxd .bx .bd{position:absolute;left:12px;right:12px;bottom:0;height:78px;border-radius:10px 10px 14px 14px;
  background:linear-gradient(160deg,#0b5f96,#063a6b 55%,#02234a);border:1.5px solid rgba(95,211,236,.55);box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 0 22px rgba(0,179,214,.25)}
#nxd .bx .bd::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,#7FDDF2,#E9FCFF,#7FDDF2)}
#nxd .bx .lid{position:absolute;left:4px;right:4px;top:22px;height:30px;border-radius:9px;z-index:2;
  background:linear-gradient(160deg,#1180bf,#07467d);border:1.5px solid rgba(95,211,236,.6);transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .5s}
#nxd .bx .lid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,#7FDDF2,#E9FCFF,#7FDDF2)}
#nxd .bx .bow{position:absolute;left:50%;top:2px;width:56px;height:26px;transform:translateX(-50%);z-index:3;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .5s}
#nxd .bx .bow::before,#nxd .bx .bow::after{content:"";position:absolute;bottom:0;width:26px;height:22px;border:5px solid #BFF3FF;border-radius:50% 50% 10% 50%}
#nxd .bx .bow::before{left:0;transform:rotate(-12deg)}#nxd .bx .bow::after{right:0;border-radius:50% 50% 50% 10%;transform:rotate(12deg)}
#nxd .bx .gl{position:absolute;left:50%;top:40px;width:120px;height:80px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(191,243,255,.85),rgba(0,179,214,0));opacity:0;transition:opacity .5s .2s}
#nxd .box-in:not(:checked) ~ .boxwrap .bx{animation:nxdShake 2.6s ease-in-out infinite}
@keyframes nxdShake{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-5deg)}78%{transform:rotate(5deg)}82%{transform:rotate(-3deg)}86%{transform:rotate(0)}}
#nxd .box-in:checked ~ .boxwrap .bx .lid{transform:translateY(-34px) rotate(-14deg);opacity:0}
#nxd .box-in:checked ~ .boxwrap .bx .bow{transform:translate(-50%,-44px) rotate(10deg);opacity:0}
#nxd .box-in:checked ~ .boxwrap .bx .gl{opacity:1}
#nxd .box .cta{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:900;color:#012043;background:linear-gradient(135deg,var(--ice),var(--cy2) 55%,var(--cy));box-shadow:0 8px 20px rgba(0,179,214,.35)}
#nxd .box .cta .nxd-i{width:16px;height:16px}
#nxd .box-in:checked ~ .boxwrap .box .cta{display:none}
#nxd .box-in:checked ~ .boxwrap .box{padding-bottom:0}
#nxd .inside{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease}
#nxd .inside > div{overflow:hidden}
#nxd .box-in:checked ~ .boxwrap .inside{grid-template-rows:1fr}
#nxd .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 10px}
#nxd .stat{padding:10px 4px;border-radius:14px;text-align:center;background:rgba(1,32,67,.65);border:1px solid rgba(95,211,236,.25);opacity:0;transform:translateY(14px);transition:all .5s}
#nxd .stat b{display:block;font-size:17px;font-weight:900;color:#fff;direction:ltr}
#nxd .stat span{display:block;font-size:11px;font-weight:700;color:var(--txt)}
#nxd .gifts-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--gold);margin:4px 0 8px}
#nxd .gifts-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,211,107,.5))}
#nxd .gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#nxd .gft{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,rgba(255,211,107,.16),rgba(1,32,67,.7) 60%);border:1px solid rgba(255,211,107,.45);opacity:0;transform:translateY(16px) scale(.9);transition:all .55s cubic-bezier(.3,1.4,.5,1)}
#nxd .gft img{width:46px;height:46px;border-radius:13px;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.4)}
#nxd .gft b{font-size:12.5px;font-weight:900;color:#fff;line-height:1.35}
#nxd .gft span{font-size:10.5px;font-weight:900;color:#2a1c00;background:linear-gradient(135deg,#FFE7A3,#FFD36B);padding:2px 9px;border-radius:999px}
#nxd .gft::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-18deg);animation:nxdSheen 3.6s ease-in-out infinite}
#nxd .box-in:checked ~ .boxwrap .stat,#nxd .box-in:checked ~ .boxwrap .gft{opacity:1;transform:none}
#nxd .box-in:checked ~ .boxwrap .stat:nth-child(2){transition-delay:.1s}#nxd .box-in:checked ~ .boxwrap .stat:nth-child(3){transition-delay:.2s}
#nxd .box-in:checked ~ .boxwrap .gft:nth-child(1){transition-delay:.3s}#nxd .box-in:checked ~ .boxwrap .gft:nth-child(2){transition-delay:.42s}#nxd .box-in:checked ~ .boxwrap .gft:nth-child(3){transition-delay:.54s}
#nxd .say .b{display:none}
#nxd .box-in:checked ~ .say .a{display:none}#nxd .box-in:checked ~ .say .b{display:inline}

/* ===== قبل/بعد: سناب وميني شات ===== */
#nxd .seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:rgba(1,15,34,.8);border:1px solid rgba(95,211,236,.25);margin:12px 0;position:relative;cursor:pointer}
#nxd .seg span{position:relative;z-index:2;text-align:center;padding:9px 4px;font-size:13px;font-weight:900;color:var(--txt);transition:color .3s}
#nxd .seg::before{content:"";position:absolute;top:4px;bottom:4px;right:4px;width:calc(50% - 4px);border-radius:10px;background:#1b2d44;transition:transform .4s cubic-bezier(.3,1.3,.5,1),background .3s}
#nxd .sw-in:checked ~ .seg::before{transform:translateX(-100%);background:linear-gradient(135deg,var(--cy2),var(--cy));box-shadow:0 0 16px rgba(0,179,214,.5)}
#nxd .sw-in:not(:checked) ~ .seg span:first-child{color:#fff}
#nxd .sw-in:checked ~ .seg span:last-child{color:#012043}
#nxd .sw-in:not(:checked) ~ .seg{animation:nxdNudge 2.2s ease-in-out infinite}
#nxd .grp{margin-top:10px}
#nxd .grp-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:14.5px;font-weight:900;color:#fff}
#nxd .grp-h img{width:30px;height:30px;border-radius:9px}
#nxd .grp-h b{color:var(--cy2)}
#nxd .rw small{display:block;font-weight:600;opacity:.85;font-size:11.5px}

/* ===== زر فعّل كودك ===== */
#nxd .act{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;padding:14px;border-radius:16px;font-size:16px;font-weight:900;color:#012043!important;text-decoration:none!important;
  background:linear-gradient(135deg,var(--ice),var(--cy2) 55%,var(--cy));box-shadow:0 10px 24px rgba(0,179,214,.4);position:relative;overflow:hidden}
#nxd .act::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:nxdSheen 2.8s ease-in-out infinite}
#nxd .act .nxd-i{width:20px;height:20px;stroke-width:2.3}

/* ===== رابط السياسة ===== */
#nxd .pol{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 13px;border-radius:16px;text-decoration:none!important;background:rgba(95,211,236,.08);border:1px solid rgba(95,211,236,.3)}
#nxd .pol .av{display:flex;flex-shrink:0}
#nxd .pol .av img{width:28px;height:28px;border-radius:8px;border:2px solid #02234a;margin-left:-9px;object-fit:cover}
#nxd .pol .av img:last-child{margin-left:0}
#nxd .pol b{display:block;font-size:13.5px;font-weight:900;color:#fff}
#nxd .pol span{display:block;font-size:11.5px;font-weight:600;color:var(--txt)}
#nxd .pol .arr{margin-right:auto;width:30px;height:30px;padding:7px;border-radius:50%;color:#012043;background:var(--cy2)}
/* ===== وما خلصنا ===== */
#nxd .more{background:radial-gradient(90% 70% at 0% 0%,rgba(0,179,214,.22),transparent 60%),linear-gradient(160deg,#04274d,#011a36 60%,#010f22)}
#nxd .more-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
#nxd .more-s{margin:6px 0 12px;font-size:13px;font-weight:600;color:var(--txt)}
#nxd .odo{display:flex;direction:ltr;align-items:flex-end;font:900 40px/1 'Tajawal',sans-serif;filter:drop-shadow(0 0 14px rgba(0,179,214,.45))}
#nxd .odo .sy{color:#BFF3FF;padding:0 1px}
#nxd .odo .dg{display:inline-block;height:40px;overflow:hidden}
#nxd .odo .st{display:flex;flex-direction:column;animation:nxdOdo 2.2s cubic-bezier(.2,.9,.25,1) var(--d) both}
#nxd .odo .st i{font-style:normal;height:40px;line-height:40px;text-align:center;background:linear-gradient(180deg,#E9FCFF,#5FD3EC 70%,#00B3D6);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes nxdOdo{from{transform:translateY(0)}to{transform:translateY(calc(var(--n) * -40px))}}
#nxd .tks{display:flex;flex-direction:column;gap:8px}
#nxd .tk{position:relative;display:grid;grid-template-columns:36px 1fr auto 22px auto;align-items:center;gap:9px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(90deg,rgba(1,32,67,.75),rgba(0,60,122,.45));border:1px solid rgba(95,211,236,.22);overflow:hidden}
#nxd .tk::before,#nxd .tk::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#020d1d;transform:translateY(-50%)}
#nxd .tk::before{right:-8px}#nxd .tk::after{left:-8px}
#nxd .tk .ti{width:36px;height:36px;padding:8px;border-radius:11px;color:#012043;background:linear-gradient(135deg,var(--ice),var(--cy2))}
#nxd .tk .ti .nxd-i{width:20px;height:20px}
#nxd .tk b{font-size:13.5px;font-weight:900;color:#fff;line-height:1.35}
#nxd .tk .was{position:relative;font-size:12px;font-weight:700;color:#8a9bb0;white-space:nowrap}
#nxd .tk .was::after{content:"";position:absolute;right:-2px;left:-2px;top:52%;height:2px;border-radius:2px;background:#ff6b81;transform:scaleX(0);transform-origin:right;animation:nxdStrike 3.6s ease-in-out var(--d) infinite}
@keyframes nxdStrike{0%,8%{transform:scaleX(0)}22%,100%{transform:scaleX(1)}}
#nxd .tk .ar{width:20px;height:20px;fill:none;stroke:var(--cy2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:nxdArr 1.4s ease-in-out infinite}
@keyframes nxdArr{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
#nxd .tk .now{font-size:12.5px;font-weight:900;color:#012043;background:var(--cy2);padding:4px 10px;border-radius:999px;white-space:nowrap;animation:nxdPop 3.6s ease-in-out var(--d) infinite}
@keyframes nxdPop{0%,18%{transform:scale(.85);opacity:.4}26%{transform:scale(1.08);opacity:1}32%,100%{transform:scale(1);opacity:1}}
@media (max-width:420px){
  #nxd .more-h{flex-direction:column;align-items:flex-start}
  #nxd .tk{grid-template-columns:32px 1fr auto;row-gap:6px}
  #nxd .tk .ti{width:32px;height:32px;padding:7px;grid-row:1/3}
  #nxd .tk b{grid-column:2/4}
  #nxd .tk .was{grid-column:2;justify-self:start}
  #nxd .tk .ar{display:none}
  #nxd .tk .now{grid-column:3;grid-row:2}
}
@media (max-width:420px){#nxd .gft b{font-size:11.5px}#nxd .gft img{width:40px;height:40px}}

/* عناوين الوصف تنزل بسطر لحالها (الثيم يخليها inline-block) */
#nxd .card h2,#nxd .card h3{display:block!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#fff!important;-webkit-text-fill-color:#fff!important;animation:none!important}
#nxd .card h2 .hl,#nxd .card h3 .hl{-webkit-text-fill-color:transparent!important;background:linear-gradient(180deg,#E9FCFF,#5FD3EC 70%,#00B3D6)!important;-webkit-background-clip:text!important;background-clip:text!important}
#nxd .kick{display:flex;width:max-content}
/* ===== ملاحظة تحت التطبيق ===== */
#nxd .app .nt{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;color:#FFE7A3;background:rgba(255,211,107,.08);border:1px solid rgba(255,211,107,.3)}
#nxd .app .nt .nxd-i{width:15px;height:15px;color:#FFD36B}
/* ===== الذهبية: بدون صندوق، المحتوى ظاهر على طول ===== */
#nxd .pk-gold .box,#nxd .pk-ipad .box,#nxd .pk-android .box{display:none!important}
#nxd .pk-gold .inside,#nxd .pk-ipad .inside,#nxd .pk-android .inside{grid-template-rows:1fr!important}
#nxd .pk-gold .stat,#nxd .pk-gold .gft,#nxd .pk-ipad .stat,#nxd .pk-ipad .gft,#nxd .pk-android .stat,#nxd .pk-android .gft{opacity:1!important;transform:none!important}
#nxd .pk-gold .stats,#nxd .pk-ipad .stats,#nxd .pk-android .stats{margin-top:4px}
#nxd .pk-gold .say .a,#nxd .pk-ipad .say .a,#nxd .pk-android .say .a{display:none!important}
#nxd .pk-gold .say .b,#nxd .pk-ipad .say .b,#nxd .pk-android .say .b{display:inline!important}
/* ===== لمسة ذهبية للباقة الذهبية ===== */
#nxd .pk-gold .bx .bd::before,#nxd .pk-gold .bx .lid::before{background:linear-gradient(90deg,#F2B33D,#FFE7A3,#F2B33D)}
#nxd .pk-gold .bx .bow::before,#nxd .pk-gold .bx .bow::after{border-color:#FFD36B}

/* ===== منتجات إضافية ===== */
#nxd .hero .lg{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(0,179,214,.45));animation:nxdBob 3.2s ease-in-out infinite}
#nxd .hero .lg.r{border-radius:22px;object-fit:cover}
#nxd .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
#nxd .plan{position:relative;padding:12px 6px;border-radius:14px;text-align:center;background:rgba(1,32,67,.65);border:1px solid rgba(95,211,236,.28)}
#nxd .plan b{display:block;font-size:15px;font-weight:900;color:#fff;direction:rtl}
#nxd .plan span{display:block;margin-top:2px;font-size:11px;font-weight:700;color:var(--txt)}
#nxd .plan::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(95,211,236,.18),transparent 60%);pointer-events:none}
#nxd .plans.u .plan b{direction:ltr;font:900 22px/1.2 Arial,sans-serif;letter-spacing:1px}
#nxd .plans.one{grid-template-columns:1fr}
#nxd .plans.many{grid-template-columns:1fr}
#nxd .plans.many .plan{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right;padding:12px 14px}
#nxd .plans.many .plan b{font-size:14.5px}
#nxd .plans.many .plan span{flex-shrink:0;margin:0;padding:3px 10px;border-radius:999px;background:var(--cy2);color:#012043;font-weight:900}
#nxd .plans.one .plan{padding:16px 10px}
#nxd .plans.one .plan b{font-size:24px}
#nxd .plans-n{margin-top:10px;font-size:12px;font-weight:700;color:var(--txt);text-align:center}
#nxd .fl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
#nxd .fl li{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:13px;font-size:13px;font-weight:700;color:#EAF7FB;line-height:1.55;background:rgba(1,32,67,.6);border:1px solid rgba(95,211,236,.2)}
#nxd .fl li .nxd-i{width:16px;height:16px;margin-top:2px;padding:2px;border-radius:50%;background:var(--cy2);color:#012043;stroke-width:3}
#nxd .inc2{margin-top:12px;padding:12px;border-radius:16px;background:rgba(1,32,67,.6);border:1px solid rgba(95,211,236,.25)}
#nxd .inc2 > b{display:block;font-size:14px;font-weight:900;color:var(--cy2);margin-bottom:10px}
#nxd .inc2 .row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
#nxd .inc2 img{width:46px;height:46px;border-radius:13px;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.35)}
#nxd .inc2 span{display:block;margin-top:5px;font-size:12px;font-weight:800;color:#fff}
#nxd .req{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;font-size:13.5px;font-weight:600;color:#EAF7FB;line-height:1.7;
  background:linear-gradient(120deg,rgba(255,211,107,.14),rgba(1,32,67,.8));border:1px solid rgba(255,211,107,.5)}
#nxd .req .nxd-i{width:34px;height:34px;padding:7px;border-radius:11px;background:#FFD36B;color:#2a1c00}
#nxd .req b{color:#FFE7A3}
@media (max-width:420px){#nxd .fl{grid-template-columns:1fr}#nxd .hero .lg{width:78px;height:78px}}

/* ===== شرائط التطبيقات ===== */

  /* =====================================================
     ألوان هوية نيكس — عدّل من هنا فقط
     السماوي #00B3D6  ·  البنفسجي #0090C8  ·  الكحلي #003C7A
     هذي النسخة تشتغل بـ HTML و CSS فقط (بدون جافاسكربت)
     ===================================================== */
  .pl-sec{
    --cy:#00B3D6; --cy-2:#38D6F5; --cy-soft:#BFF3FF;
    --vi:#0090C8;
    --tile:#0A1A2E; --tile-bd:rgba(191,243,255,.10);
    position:relative; overflow:hidden;
    padding:0 12px 16px;
    margin-top:0;   /* سحب التصميم لفوق — زد الرقم لرفع أكثر (مثلاً -50px) */
    font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
    color:#EEF8FC;
    direction:rtl;
  }
  .pl-sec *{ box-sizing:border-box; }
  .pl-cb{ position:absolute; top:0; right:0; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; }

  .pl-spark{ position:absolute; width:5px; height:5px; border-radius:50%; pointer-events:none; background:var(--cy); box-shadow:0 0 8px var(--cy); opacity:.5; animation:pl-twinkle 4s ease-in-out infinite; }
  .pl-spark.vi{ background:var(--vi); box-shadow:0 0 8px var(--vi); }
  @keyframes pl-twinkle{ 0%,100%{ opacity:.2; } 50%{ opacity:.85; } }

  /* ===== الشرائط ===== */
  .pl-rows{
    position:relative; height:290px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  }
  .pl-row{ position:absolute; left:-15%; right:-15%; direction:ltr; padding:18px 0; overflow:hidden; }
  .pl-row::before{
    content:""; position:absolute; inset:6px 0; pointer-events:none;
    border-top:1px solid rgba(0,179,214,.4); border-bottom:1px solid rgba(0,179,214,.4);
  }
  /* بقعة ضوء بالوسط — التطبيق اللي يمر منها يلمع */
  .pl-row::after{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:240px; margin-left:-120px; pointer-events:none;
    background:radial-gradient(closest-side, rgba(56,214,245,.28), transparent);
  }
  .pl-row.r1{ top:33%; transform:translateY(-50%) rotate(-5deg); z-index:2; }
  .pl-row.r1::before{ background:linear-gradient(90deg,rgba(0,60,122,.1),rgba(0,60,122,.7) 50%,rgba(0,60,122,.1)); }
  .pl-row.rev{ top:70%; transform:translateY(-50%) rotate(4deg); z-index:1; }
  .pl-row.rev::before{ background:linear-gradient(90deg,rgba(0,90,150,.1),rgba(0,90,150,.6) 50%,rgba(0,90,150,.1)); border-color:rgba(0,144,200,.45); }
  .pl-row.rev::after{ background:radial-gradient(closest-side, rgba(0,144,200,.3), transparent); }

  .pl-track{ position:relative; display:flex; gap:26px; width:max-content; padding-right:26px; animation:pl-scroll 46s linear infinite; }
  .pl-row.rev .pl-track{ animation-direction:reverse; animation-duration:52s; }
  .pl-row:hover .pl-track{ animation-play-state:paused; }
  @keyframes pl-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  .pl-tile{
    position:relative; flex-shrink:0;
    width:78px; height:78px; border-radius:22px;
    display:flex; align-items:center; justify-content:center;
    background:var(--tile);
    border:1px solid var(--tile-bd);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 14px rgba(0,0,0,.4);
    cursor:pointer;
    perspective:400px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .pl-tile:hover{ transform:translateY(-4px) scale(1.12); border-color:rgba(56,214,245,.75); box-shadow:0 10px 20px rgba(0,0,0,.45), 0 0 20px var(--glow,rgba(0,179,214,.35)); z-index:3; }

  .pl-ic{
    display:block; width:56px; height:56px; border-radius:15px;
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  @keyframes pl-spin{
    0%{ transform:rotateY(0) scale(1); }
    50%{ transform:rotateY(180deg) scale(1.2); }
    100%{ transform:rotateY(360deg) scale(1); }
  }

  /* ===== بطاقة المزايا ===== */
  .pl-modal{
    position:fixed; inset:0; z-index:99999;
    display:none; align-items:center; justify-content:center;
    padding:16px;
    direction:rtl;
    perspective:1200px;
    animation:pl-fade .3s .45s both;
  }
  .pl-backdrop{ position:absolute; inset:0; cursor:pointer; background:rgba(2,8,16,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  @keyframes pl-fade{ from{ opacity:0; } to{ opacity:1; } }

  .pl-win{
    position:relative; z-index:1;
    width:100%; max-width:430px; max-height:min(86vh,720px);
    border-radius:30px; padding:1.5px;
    background:linear-gradient(160deg,var(--cy-2),rgba(0,179,214,.15) 40%,rgba(0,144,200,.15) 60%,var(--vi));
    box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 40px rgba(0,179,214,.18);
    transform-origin:50% 100%;
    animation:pl-rise .55s .45s cubic-bezier(.2,1.15,.35,1) both;
  }
  @keyframes pl-rise{ from{ transform:rotateX(-18deg) translateY(40px) scale(.92); opacity:0; } to{ transform:none; opacity:1; } }
  .pl-in{
    position:relative; display:flex; flex-direction:column;
    max-height:calc(min(86vh,720px) - 3px);
    border-radius:28.5px; overflow:hidden;
    background:linear-gradient(180deg,#081A30,#050F1D 60%);
  }
  .pl-cover{
    position:relative; flex-shrink:0; height:118px; overflow:hidden;
    background:
      radial-gradient(70% 120% at 50% 110%, var(--app-glow,rgba(0,179,214,.5)), transparent 70%),
      linear-gradient(135deg, rgba(0,144,200,.35), rgba(0,179,214,.25));
  }
  .pl-cover::before{
    content:""; position:absolute; inset:0; opacity:.5;
    background-image:radial-gradient(rgba(191,243,255,.35) 1px, transparent 1.2px);
    background-size:16px 16px;
    -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent);
  }
  .pl-cover::after{
    content:""; position:absolute; top:-40%; bottom:-40%; left:-50%; width:30%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
    transform:skewX(-18deg);
    animation:pl-sheen 5s ease-in-out infinite;
  }
  @keyframes pl-sheen{ 0%{ left:-50%; } 55%,100%{ left:140%; } }

  .pl-close{
    position:absolute; top:14px; right:14px; left:auto; z-index:3; cursor:pointer;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(5,15,29,.55);
    border:1px solid rgba(191,243,255,.3);
    transition:transform .25s ease, background .2s ease;
  }
  .pl-close:hover{ transform:rotate(90deg); background:rgba(0,179,214,.3); }
  .pl-close svg{ width:16px; height:16px; stroke:#fff; stroke-width:2.6; stroke-linecap:round; fill:none; }

  .pl-modal .pl-app{ position:relative; z-index:2; display:flex !important; flex-direction:column; align-items:center; text-align:center; margin-top:-44px; padding:0 22px 14px; flex-shrink:0; float:none; }
  .pl-modal .pl-app h3{ width:100%; }
  .pl-modal .pl-ring{
    position:relative; z-index:3; margin:0 auto !important; float:none !important;
    display:inline-block; padding:3px; border-radius:26px;
    background:linear-gradient(135deg,var(--cy-2),var(--vi));
    box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 24px var(--app-glow,rgba(0,179,214,.4));
    animation:pl-pop .6s .65s cubic-bezier(.2,1.4,.4,1) both;
  }
  .pl-ring .pl-ic{ width:80px; height:80px; border-radius:23px; background-color:#0A1A2E; }
  @keyframes pl-pop{ from{ transform:scale(.4) rotate(-20deg); opacity:0; } to{ transform:none; opacity:1; } }

  .pl-app h3{ margin:12px 0 8px; font-size:22px; font-weight:800; color:#fff; }
  .pl-count{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    font-size:12.5px; font-weight:800; color:var(--cy-soft);
    background:rgba(0,179,214,.14); border:1px solid rgba(0,179,214,.4);
  }
  .pl-count svg{ width:14px; height:14px; fill:var(--cy-2); }

  .pl-prog{ height:3px; margin:14px 22px 0; border-radius:3px; background:rgba(191,243,255,.1); overflow:hidden; flex-shrink:0; }
  .pl-prog i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--cy),var(--vi)); margin-right:0; }
  @keyframes pl-grow{ from{ width:0; } to{ width:100%; } }

  .pl-list{
    list-style:none; margin:0; padding:14px 18px 20px;
    display:flex; flex-direction:column; gap:8px;
    overflow-y:auto; flex:1; min-height:0;
    scrollbar-width:thin; scrollbar-color:var(--cy) transparent;
  }
  .pl-list::-webkit-scrollbar{ width:6px; }
  .pl-list::-webkit-scrollbar-thumb{ background:var(--cy); border-radius:6px; }
  .pl-list li{
    display:flex; align-items:flex-start; gap:10px;
    padding:11px 12px; border-radius:14px;
    background:rgba(191,243,255,.04);
    border:1px solid rgba(191,243,255,.07);
    font-size:14px; line-height:1.65; color:#E3F3F9;
    animation:pl-item .3s ease both;
  }
  /* النص ينكتب من اليمين لليسار */
  .pl-list li .pl-t{ flex:1; min-width:0; animation:pl-type .45s steps(22) both; animation-delay:inherit; }
  @keyframes pl-item{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:none; } }
  @keyframes pl-type{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
  .pl-chk{
    flex-shrink:0; width:22px; height:22px; margin-top:1px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--cy),var(--vi));
    box-shadow:0 0 10px rgba(0,179,214,.45);
  }
  .pl-chk svg{ width:12px; height:12px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }

  .pl-list li:nth-child(1){ animation-delay:0.95s; }
  .pl-list li:nth-child(2){ animation-delay:1.27s; }
  .pl-list li:nth-child(3){ animation-delay:1.59s; }
  .pl-list li:nth-child(4){ animation-delay:1.91s; }
  .pl-list li:nth-child(5){ animation-delay:2.23s; }
  .pl-list li:nth-child(6){ animation-delay:2.55s; }
  .pl-list li:nth-child(7){ animation-delay:2.87s; }
  .pl-list li:nth-child(8){ animation-delay:3.19s; }
  .pl-list li:nth-child(9){ animation-delay:3.51s; }
  .pl-list li:nth-child(10){ animation-delay:3.83s; }
  .pl-list li:nth-child(11){ animation-delay:4.15s; }
  .pl-list li:nth-child(12){ animation-delay:4.47s; }
  .pl-list li:nth-child(13){ animation-delay:4.79s; }
  .pl-list li:nth-child(14){ animation-delay:5.11s; }
  .pl-list li:nth-child(15){ animation-delay:5.43s; }
  .pl-list li:nth-child(16){ animation-delay:5.75s; }
  .pl-list li:nth-child(17){ animation-delay:6.07s; }
  .pl-list li:nth-child(18){ animation-delay:6.39s; }
  #plc-0:checked ~ .nx-panel .pl-rows label[for="plc-0"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-0:checked ~ .pl-modals #plm-0{ display:flex; }
  #plm-0{ --app-glow:rgba(225,48,108,.45); }
  #plm-0 .pl-prog i{ animation:pl-grow 5.76s 0.95s linear both; }
  #plc-1:checked ~ .nx-panel .pl-rows label[for="plc-1"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-1:checked ~ .pl-modals #plm-1{ display:flex; }
  #plm-1{ --app-glow:rgba(255,214,0,.45); }
  #plm-1 .pl-prog i{ animation:pl-grow 3.20s 0.95s linear both; }
  #plc-2:checked ~ .nx-panel .pl-rows label[for="plc-2"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-2:checked ~ .pl-modals #plm-2{ display:flex; }
  #plm-2{ --app-glow:rgba(37,244,238,.45); }
  #plm-2 .pl-prog i{ animation:pl-grow 2.56s 0.95s linear both; }
  #plc-3:checked ~ .nx-panel .pl-rows label[for="plc-3"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-3:checked ~ .pl-modals #plm-3{ display:flex; }
  #plm-3{ --app-glow:rgba(37,211,102,.45); }
  #plm-3 .pl-prog i{ animation:pl-grow 3.20s 0.95s linear both; }
  #plc-4:checked ~ .nx-panel .pl-rows label[for="plc-4"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-4:checked ~ .pl-modals #plm-4{ display:flex; }
  #plm-4{ --app-glow:rgba(255,0,0,.45); }
  #plm-4 .pl-prog i{ animation:pl-grow 2.88s 0.95s linear both; }
  #plc-5:checked ~ .nx-panel .pl-rows label[for="plc-5"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-5:checked ~ .pl-modals #plm-5{ display:flex; }
  #plm-5{ --app-glow:rgba(96,140,200,.45); }
  #plm-5 .pl-prog i{ animation:pl-grow 1.60s 0.95s linear both; }
  #plc-6:checked ~ .nx-panel .pl-rows label[for="plc-6"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-6:checked ~ .pl-modals #plm-6{ display:flex; }
  #plm-6{ --app-glow:rgba(255,138,20,.45); }
  #plm-6 .pl-prog i{ animation:pl-grow 1.28s 0.95s linear both; }
  #plc-7:checked ~ .nx-panel .pl-rows label[for="plc-7"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-7:checked ~ .pl-modals #plm-7{ display:flex; }
  #plm-7{ --app-glow:rgba(214,180,120,.45); }
  #plm-7 .pl-prog i{ animation:pl-grow 1.28s 0.95s linear both; }
  #plc-8:checked ~ .nx-panel .pl-rows label[for="plc-8"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-8:checked ~ .pl-modals #plm-8{ display:flex; }
  #plm-8{ --app-glow:rgba(160,90,255,.45); }
  #plm-8 .pl-prog i{ animation:pl-grow 1.60s 0.95s linear both; }
  #plc-9:checked ~ .nx-panel .pl-rows label[for="plc-9"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-9:checked ~ .pl-modals #plm-9{ display:flex; }
  #plm-9{ --app-glow:rgba(60,90,170,.5); }
  #plm-9 .pl-prog i{ animation:pl-grow 1.60s 0.95s linear both; }
  #plc-10:checked ~ .nx-panel .pl-rows label[for="plc-10"] .pl-ic{ animation:pl-spin .6s cubic-bezier(.45,.05,.3,1); }
  #plc-10:checked ~ .pl-modals #plm-10{ display:flex; }
  #plm-10{ --app-glow:rgba(255,255,255,.3); }
  #plm-10 .pl-prog i{ animation:pl-grow 2.24s 0.95s linear both; }


  /* =====================================================
     واجهة المتجر الفخمة
     ===================================================== */
  .nx-panel{
    position:relative; overflow:hidden; isolation:isolate;
    max-width:1180px; margin:0 auto;
    background:transparent;
  }
  .nx-top{
    display:grid; grid-template-columns:1fr 380px; grid-template-areas:'copy stage' 'stats stage'; align-items:center; column-gap:16px; row-gap:18px;
    padding:0 54px 6px;
  }
  .nx-copy{ grid-area:copy; text-align:right; align-self:end; }
  /* شارة التوثيق */
  .nx-badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:5px 14px 5px 6px; border-radius:999px;
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border:1px solid rgba(191,243,255,.22);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    animation:nx-up .7s .1s both;
  }
  .nx-sbc{
    flex-shrink:0; width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff;
    box-shadow:0 0 0 3px rgba(0,144,200,.25), 0 4px 10px rgba(0,0,0,.3);
  }
  .nx-sbc img{ display:block; width:30px; height:auto; }
  .nx-vt{ display:flex; flex-direction:column; line-height:1.3; text-align:right; }
  .nx-vt b{ font-size:12px; font-weight:800; color:#fff; white-space:nowrap; }
  .nx-vt small{ font-size:10px; color:#9DB4C4; white-space:nowrap; }
  .nx-vok{ flex-shrink:0; width:22px; height:22px; }
  .nx-vok path{ fill:#1D9BF0; }
  .nx-vok path.ok{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

  /* العنوان — سطرين ثابتين */
  .nx-h{
    margin:18px 0 12px;
    font-size:clamp(26px, 4.4vw, 50px); font-weight:900; line-height:1.18; letter-spacing:-.5px; color:#fff;
    text-shadow:0 6px 30px rgba(0,0,0,.35);
    animation:nx-up .8s .2s both;
  }
  .nx-h .l1, .nx-h .l2{ display:block; white-space:nowrap; }
  .nx-h em{
    font-style:normal;
    background:linear-gradient(90deg,#38D6F5,#E8FBFF 40%,#7FDBFF 70%,#38D6F5);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:nx-shine 6s linear infinite;
  }
  @keyframes nx-shine{ to{ background-position:250% 50%; } }
  @keyframes nx-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .nx-p{ margin:0; max-width:440px; font-size:14.5px; line-height:1.9; color:#9DB4C4; animation:nx-up .8s .35s both; }

  /* مربعات المميزات */
  .nx-stats{ grid-area:stats; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:6px; }
  .nx-stat{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:12px;
    padding:14px 14px;
    border-radius:18px;
    background:linear-gradient(160deg,rgba(191,243,255,.07),rgba(0,144,200,.04));
    border:1px solid rgba(191,243,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    animation:nx-up .7s both;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .nx-stat:nth-child(1){ animation-delay:.45s; }
  .nx-stat:nth-child(2){ animation-delay:.55s; }
  .nx-stat:nth-child(3){ animation-delay:.65s; }
  .nx-stat::before{
    content:""; position:absolute; top:0; right:18px; left:18px; height:1px;
    background:linear-gradient(90deg,transparent,#38D6F5,#0090C8,transparent);
    opacity:.8;
  }
  .nx-stat:hover{ transform:translateY(-3px); border-color:rgba(56,214,245,.45); box-shadow:0 12px 26px rgba(0,0,0,.3), 0 0 20px rgba(0,179,214,.15); }
  .nx-si{
    flex-shrink:0; width:42px; height:42px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#00B3D6,#0090C8);
    box-shadow:0 6px 16px rgba(0,179,214,.35);
  }
  .nx-si svg{ width:21px; height:21px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .nx-stat:nth-child(2) .nx-si svg{ fill:#fff; stroke:none; }
  .nx-st{ display:flex; flex-direction:column; min-width:0; text-align:right; line-height:1.35; }
  .nx-st b{ font-size:15.5px; font-weight:900; color:#fff; }
  .nx-st small{ font-size:11.5px; color:#8FB0C4; }

  /* المسرح: الشخصية فوق منصة مضيئة */
  .nx-stage{ grid-area:stage; position:relative; height:380px; }
  .nx-beam{
    position:absolute; left:50%; bottom:60px; width:300px; height:340px; margin-left:-150px;
    background:linear-gradient(0deg,rgba(56,214,245,.28),rgba(0,144,200,.08) 60%,transparent);
    clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);
    filter:blur(6px);
    animation:nx-beam 4.4s ease-in-out infinite;
  }
  @keyframes nx-beam{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
  .nx-podium{ position:absolute; left:50%; bottom:6px; width:320px; margin-left:-160px; }
  .nx-podium svg{ display:block; width:100%; height:auto; overflow:visible; }
  .nx-ring{ animation:nx-dash 6s linear infinite; }
  @keyframes nx-dash{ to{ stroke-dashoffset:-150; } }
  .nx-host{ position:absolute; left:50%; bottom:54px; width:248px; height:301px; margin-left:-124px; }
  .nx-host{ animation:nx-float 4.4s ease-in-out infinite; }
  .nx-host .nx-char{ filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(0,179,214,.25)); }
  .nx-char{ display:block; width:100%; height:100%; overflow:visible; }
  @keyframes nx-float{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-10px) rotate(1.5deg); } }
  .nx-hey{
    position:absolute; left:80%; top:59.5%; right:auto;
    margin-top:-18px;
    display:grid; place-items:center;
    padding:8px 15px; border-radius:16px;
    font-size:14px; font-weight:800; color:#06223A;
    background:linear-gradient(135deg,#E8FBFF,#BFF3FF);
    box-shadow:0 10px 22px rgba(0,0,0,.35), 0 0 16px rgba(56,214,245,.35);
    animation:nx-pop .6s .9s cubic-bezier(.2,1.4,.4,1) both;
    transform-origin:0 50%;
  }
  @keyframes nx-pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }
  /* الترحيبات تتقلب وحدة بعد الثانية */
  .nx-hey .g{
    grid-area:1 / 1; white-space:nowrap;
    opacity:0; transform:rotateX(90deg);
    animation:nx-greet 15.600000000000001s infinite;
  }
  .nx-hey .g:nth-child(1){ animation-delay:0.9s; }
  .nx-hey .g:nth-child(2){ animation-delay:3.5s; }
  .nx-hey .g:nth-child(3){ animation-delay:6.1s; }
  .nx-hey .g:nth-child(4){ animation-delay:8.7s; }
  .nx-hey .g:nth-child(5){ animation-delay:11.3s; }
  .nx-hey .g:nth-child(6){ animation-delay:13.9s; }
  @keyframes nx-greet{
    0%{ opacity:0; transform:translateY(8px) rotateX(70deg); }
    2.0%,14.2%{ opacity:1; transform:none; }
    16.7%,100%{ opacity:0; transform:translateY(-8px) rotateX(-70deg); }
  }
  @keyframes nx-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  /* ذيل الفقاعة باتجاه الفم */
  .nx-hey::before{
    content:""; position:absolute; left:-7px; top:50%; margin-top:-6px;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
    border-right:9px solid #E8FBFF;
    filter:drop-shadow(-2px 0 2px rgba(0,0,0,.2));
  }
  .nx-motes i{
    position:absolute; bottom:60px; width:4px; height:4px; border-radius:50%;
    background:#5FE6FF; box-shadow:0 0 8px #5FE6FF; opacity:0;
    animation:nx-mote 5s linear infinite;
  }
  .nx-motes i:nth-child(1){ left:38%; animation-delay:0s; }
  .nx-motes i:nth-child(2){ left:58%; animation-delay:.9s; background:#7FDBFF; box-shadow:0 0 8px #7FDBFF; }
  .nx-motes i:nth-child(3){ left:46%; animation-delay:1.8s; width:3px; height:3px; }
  .nx-motes i:nth-child(4){ left:64%; animation-delay:2.6s; }
  .nx-motes i:nth-child(5){ left:33%; animation-delay:3.4s; background:#7FDBFF; box-shadow:0 0 8px #7FDBFF; }
  .nx-motes i:nth-child(6){ left:52%; animation-delay:4.2s; width:3px; height:3px; }
  @keyframes nx-mote{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 100%{ transform:translateY(-290px); opacity:0; } }

  /* أجزاء الشخصية */
  .nx-ground{ transform-box:fill-box; transform-origin:center; animation:nx-ground 4.4s ease-in-out infinite; }
  @keyframes nx-ground{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.72); opacity:.5; } }
  .nx-eyes{ transform-box:fill-box; transform-origin:center; animation:nx-blink 5s infinite; }
  @keyframes nx-blink{ 0%,46%,52%,100%{ transform:scaleY(1); } 49%{ transform:scaleY(.08); } }
  .nx-cape{ transform-box:fill-box; transform-origin:50% 0; animation:nx-cape 3s ease-in-out infinite; }
  @keyframes nx-cape{ 0%,100%{ transform:skewX(0) scaleY(1); } 50%{ transform:skewX(-4deg) scaleY(1.04); } }
  .nx-body{ transform-box:fill-box; transform-origin:50% 90%; animation:nx-breathe 4.4s ease-in-out infinite; }
  @keyframes nx-breathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(.985,1.02); } }
  .nx-wisp{ transform-box:fill-box; transform-origin:30% 100%; animation:nx-wisp 3.2s ease-in-out infinite; }
  @keyframes nx-wisp{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-7deg); } }
  .nx-drop{ animation:nx-drop 3.6s ease-in-out infinite; }
  .nx-drop.d2{ animation-delay:.6s; animation-duration:3s; }
  @keyframes nx-drop{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-3px,-5px); } }
  .nx-mouth{ transform-box:fill-box; transform-origin:center; animation:nx-talk 2.6s .9s infinite; }
  @keyframes nx-talk{
    0%,30%,100%{ transform:scale(1,1); }
    5%{ transform:scale(.85,2.4); }
    10%{ transform:scale(1.05,1.2); }
    15%{ transform:scale(.9,2.1); }
    21%{ transform:scale(1,1.3); }
  }
  .nx-arm{ transform-box:view-box; transform-origin:46px 113px; animation:nx-wave 2.8s ease-in-out infinite; }
  @keyframes nx-wave{
    0%,55%,100%{ transform:rotate(0); }
    8%,24%,40%{ transform:rotate(-22deg); }
    16%,32%{ transform:rotate(10deg); }
  }

  /* التنويه — كبسولة بإطار متدرج يدور + يد تضغط على تطبيق */
  .nx-hint{
    position:relative; z-index:3; isolation:isolate; overflow:hidden;
    width:max-content; max-width:calc(100% - 28px);
    margin:6px auto -4px; padding:1.5px;
    border-radius:999px;
    box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 30px rgba(0,179,214,.18);
    animation:nx-up .8s .7s both;
  }
  .nx-hint::before{
    content:""; position:absolute; top:50%; left:50%; z-index:-1;
    width:200%; aspect-ratio:1; transform:translate(-50%,-50%);
    background:conic-gradient(from 0deg, #38D6F5, rgba(56,214,245,.1) 25%, #0090C8 50%, rgba(0,144,200,.1) 75%, #38D6F5);
    animation:nx-spin 4s linear infinite;
  }
  @keyframes nx-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  .nx-hint-in{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:14px;
    padding:9px 10px 9px 22px;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(6,22,42,.96),rgba(4,30,52,.96));
  }
  .nx-hint-in::after{
    content:""; position:absolute; top:0; bottom:0; left:-40%; width:28%;
    background:linear-gradient(100deg,transparent,rgba(191,243,255,.14),transparent);
    transform:skewX(-18deg);
    animation:pl-sheen 3.6s 1.6s ease-in-out infinite;
  }

  /* مشهد صغير: تطبيق ويد تضغط عليه */
  .nx-demo{ position:relative; flex-shrink:0; width:46px; height:46px; }
  .nx-demo-tile{
    position:absolute; inset:5px;
    display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:6px;
    border-radius:11px;
    background:linear-gradient(135deg,#00B3D6,#0090C8);
    box-shadow:0 0 14px rgba(56,214,245,.45);
    animation:nx-tile-press 2s ease-in-out infinite;
  }
  .nx-demo-tile i{ border-radius:3px; background:rgba(255,255,255,.85); }
  .nx-demo-tile i:nth-child(2), .nx-demo-tile i:nth-child(3){ background:rgba(255,255,255,.45); }
  @keyframes nx-tile-press{ 0%,28%,52%,100%{ transform:scale(1); } 36%{ transform:scale(.86); } }
  .nx-demo-ring{
    position:absolute; inset:5px; border-radius:11px;
    border:2px solid #5FE6FF; opacity:0;
    animation:nx-tile-ring 2s ease-out infinite;
  }
  @keyframes nx-tile-ring{ 0%,34%{ opacity:0; transform:scale(1); } 38%{ opacity:.9; } 75%,100%{ opacity:0; transform:scale(1.55); } }
  .nx-demo-hand{
    position:absolute; right:-8px; bottom:-10px; width:26px; height:26px;
    fill:#fff; stroke:#06223A; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
    animation:nx-hand 2s ease-in-out infinite;
  }
  @keyframes nx-hand{
    0%,100%{ transform:translate(6px,6px) rotate(-8deg); }
    30%{ transform:translate(-4px,-6px) rotate(0); }
    36%{ transform:translate(-4px,-3px) scale(.92); }
    48%{ transform:translate(-4px,-6px); }
  }

  .nx-hint-txt{ display:flex; flex-direction:column; line-height:1.35; text-align:right; }
  .nx-hint-txt b{ font-size:15.5px; font-weight:900; color:#fff; }
  .nx-hint-txt small{
    font-size:12.5px; font-weight:700;
    background:linear-gradient(90deg,#38D6F5,#BFF3FF,#7FDBFF,#38D6F5);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:nx-shine 5s linear infinite;
  }
  .nx-hint-go{
    flex-shrink:0; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(56,214,245,.12);
    border:1px solid rgba(56,214,245,.45);
  }
  .nx-hint-go svg{ width:18px; height:18px; fill:none; stroke:#5FE6FF; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; animation:nx-go 1.6s ease-in-out infinite; }
  @keyframes nx-go{ 0%,100%{ transform:translateY(-3px); opacity:.6; } 50%{ transform:translateY(3px); opacity:1; } }

  @media (max-width:820px){
    .nx-top{ grid-template-columns:1fr 270px; padding:0 26px 0; }
    .nx-h{ font-size:38px; }
    .nx-stat{ flex-direction:column; text-align:center; }
    .nx-st{ text-align:center; }
    .nx-stage{ height:300px; }
    .nx-host{ width:184px; height:224px; margin-left:-92px; bottom:42px; }
    .nx-podium{ width:240px; margin-left:-120px; }
    .nx-beam{ width:230px; height:260px; margin-left:-115px; bottom:46px; }
  }
  @media (max-width:520px){
    .nx-top{ grid-template-columns:1fr 150px; gap:4px; padding:0 14px 0; }
    .nx-top{ grid-template-areas:'copy stage' 'stats stats'; row-gap:12px; }
    .nx-badge{ gap:6px; padding:3px 8px 3px 3px; max-width:100%; }
    .nx-sbc{ width:28px; height:28px; }
    .nx-sbc img{ width:20px; }
    .nx-vt b{ font-size:10px; }
    .nx-vt small{ font-size:8.5px; }
    .nx-vok{ width:14px; height:14px; }
    .nx-h{ font-size:27px; margin:12px 0 8px; }
    .nx-p{ font-size:12px; line-height:1.75; }
    .nx-stats{ gap:8px; margin-top:0; }
    .nx-stat{ flex-direction:column; text-align:center; gap:7px; padding:12px 6px; border-radius:15px; }
    .nx-st{ text-align:center; }
    .nx-si{ width:36px; height:36px; border-radius:11px; }
    .nx-si svg{ width:18px; height:18px; }
    .nx-st b{ font-size:13px; }
    .nx-st small{ font-size:10px; }
    .nx-stage{ height:220px; align-self:start; }
    .nx-host{ width:128px; height:155px; margin-left:-64px; bottom:32px; }
    .nx-podium{ width:160px; margin-left:-80px; bottom:4px; }
    .nx-beam{ width:150px; height:190px; margin-left:-75px; bottom:30px; }
    .nx-hey{ left:76%; font-size:9.5px; padding:4px 8px; margin-top:-12px; border-radius:11px; }
    .nx-hey::before{ left:-6px; border-right-width:7px; border-top-width:5px; border-bottom-width:5px; margin-top:-5px; }
    .nx-motes i{ bottom:40px; }
    .nx-hint{ margin-top:10px; }
    .nx-hint-in{ gap:10px; padding:7px 8px 7px 16px; }
    .nx-demo{ width:38px; height:38px; }
    .nx-hint-txt b{ font-size:13.5px; }
    .nx-hint-txt small{ font-size:11px; }
    .nx-hint-go{ width:32px; height:32px; }
  }

  /* الشخصية تطل من بطاقة المزايا */
  .nx-peek{
    position:absolute; left:16px; right:auto; bottom:-30px; width:70px; height:85px; z-index:1;
    animation:nx-peek .7s 1s cubic-bezier(.2,1.4,.4,1) both;
  }
  @keyframes nx-peek{ from{ transform:translateY(70px); } to{ transform:none; } }
  .nx-say{
    position:absolute; left:14px; right:auto; top:14px; z-index:1;
    padding:5px 10px; border-radius:12px 12px 12px 2px;
    font-size:11.5px; font-weight:800; color:#06223A; background:#BFF3FF;
    box-shadow:0 6px 14px rgba(0,0,0,.3);
    animation:nx-pop .5s 1.5s cubic-bezier(.2,1.4,.4,1) both;
  }

  @media (max-width:520px){
    .nx-guide{ right:auto; left:3%; top:auto; bottom:-4px; margin-top:0; width:86px; height:104px; }
    .nx-bubble{ right:auto; left:82px; top:50px; width:184px; height:36px; padding:0 12px; border-radius:16px 16px 16px 4px; transform-origin:0 100%; }
    .nx-msg{ inset:0 12px; font-size:11.5px; }
  }

  /* الجوال: البطاقة تطلع من تحت */
  @media (max-width:520px){
    .pl-modal{ align-items:flex-end; padding:0; }
    .pl-win{ max-width:none; border-radius:30px 30px 0 0; padding:1.5px 1.5px 0; animation-name:pl-sheet; }
    .pl-in{ border-radius:28.5px 28.5px 0 0; max-height:88vh; }
    .pl-win::before{ content:""; position:absolute; top:9px; left:50%; z-index:4; width:42px; height:4px; margin-left:-21px; border-radius:4px; background:rgba(255,255,255,.45); }
  }
  @keyframes pl-sheet{ from{ transform:translateY(100%); } to{ transform:none; } }

  @media (min-width:640px){
    .pl-tile{ width:84px; height:84px; border-radius:24px; }
    .pl-tile .pl-ic{ width:60px; height:60px; }
    .pl-rows{ height:360px; }
    .pl-row.r1{ top:27%; }
    .pl-row.rev{ top:75%; }
  }
  @media (max-width:420px){
    .pl-tile{ width:68px; height:68px; border-radius:19px; }
    .pl-tile .pl-ic{ width:48px; height:48px; border-radius:13px; }
    .pl-rows{ height:280px; }
    .pl-track{ gap:20px; padding-right:20px; }
    .pl-row.r1{ transform:translateY(-50%) rotate(-7deg); }
    .pl-row.rev{ transform:translateY(-50%) rotate(6deg); }
  }

  @media (prefers-reduced-motion: reduce){
    .pl-sec *{ animation-duration:.01s !important; animation-delay:0s !important; }
    .pl-track{ animation:none !important; }
    .nx-hey .g{ animation:none !important; }
    .nx-hey .g:first-child{ opacity:1; transform:none; }

  }

/* =========================================================
   🟢 [إصلاح] منع السحب الجانبي وتزحزح الصفحة يمين ويسار
   أي عنصر أعرض من الشاشة ينقص بدل ما يسحب الصفحة كلها
   ========================================================= */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip !important; }   /* أفضل: ما يخرب الهيدر الثابت */
}
body { position: relative; overscroll-behavior-x: none; }
img, video, iframe, canvas, table { max-width: 100%; }