/* Mayam World – المحرك العام للثيمات. يُحمّل في كل صفحة واجهة. */
:root {
    --mayam-accent-2: #991b1b;
    --mayam-accent-soft: rgba(220, 38, 38, .12);
    --mayam-on-accent: #ffffff;
    --mayam-slider-start:#3b1119;
    --mayam-slider-end:#17111a;
}

html[data-theme="mayamin"] body, body[data-theme="mayamin"] {
    --bg-color:#fafafa; --surface-color:#ffffff; --text-main:#262626; --text-muted:#697386; --border-color:#dbe1ea; --primary-color:#dc2626; --mayam-accent-2:#991b1b; --mayam-accent-soft:rgba(220,38,38,.12); --mayam-slider-start:#5f1822; --mayam-slider-end:#171827;
}
html[data-theme="ocean"] body, body[data-theme="ocean"] {
    --bg-color:#edf8ff; --surface-color:#ffffff; --text-main:#10233d; --text-muted:#5c728e; --border-color:#b8e1f5; --primary-color:#0284c7; --mayam-accent-2:#075985; --mayam-accent-soft:rgba(2,132,199,.13); --mayam-slider-start:#075985; --mayam-slider-end:#062b45;
}
html[data-theme="glass"] body, body[data-theme="glass"] {
    --bg-color:#f1e9e1; --surface-color:rgba(255,255,255,.72); --text-main:#30231e; --text-muted:#806e65; --border-color:rgba(255,255,255,.82); --primary-color:#9f1239; --mayam-accent-2:#701a32; --mayam-accent-soft:rgba(159,18,57,.12); --mayam-slider-start:#6e2440; --mayam-slider-end:#291722;
}
html[data-theme="neon"] body, body[data-theme="neon"] {
    --bg-color:#090d18; --surface-color:#111827; --text-main:#e5f1ff; --text-muted:#92a6c3; --border-color:#273755; --primary-color:#22b8ff; --mayam-accent-2:#6366f1; --mayam-accent-soft:rgba(34,184,255,.16); --mayam-slider-start:#0a3f63; --mayam-slider-end:#17124b;
}
html[data-theme="3d"] body, body[data-theme="3d"] {
    --bg-color:#e5eaf1; --surface-color:#e5eaf1; --text-main:#2c3a4c; --text-muted:#718096; --border-color:transparent; --primary-color:#d9233a; --mayam-accent-2:#991b2e; --mayam-accent-soft:rgba(217,35,58,.12); --mayam-slider-start:#4a6077; --mayam-slider-end:#263546;
    --shadow-sm:5px 5px 10px #c1cad7, -5px -5px 10px #ffffff;
    --shadow-md:9px 9px 18px #c1cad7, -9px -9px 18px #ffffff;
    --shadow-inset:inset 4px 4px 8px #c1cad7, inset -4px -4px 8px #ffffff;
}

/* الوضع الداكن يحافظ على لون الثيم المختار بدلاً من تحويل كل الثيمات إلى أحمر. */
html[data-dark="true"][data-theme="mayamin"] body, html[data-dark="true"] body[data-theme="mayamin"] { --bg-color:#0d1117; --surface-color:#161b22; --text-main:#e6edf3; --text-muted:#9ba9b7; --border-color:#30363d; --primary-color:#ff5264; --mayam-accent-2:#b91c36; --mayam-slider-start:#601823; --mayam-slider-end:#161826; }
html[data-dark="true"][data-theme="ocean"] body, html[data-dark="true"] body[data-theme="ocean"] { --bg-color:#071925; --surface-color:#0d2534; --text-main:#e6f7ff; --text-muted:#9fc2d3; --border-color:#20465a; --primary-color:#38bdf8; --mayam-accent-2:#0284c7; --mayam-slider-start:#075078; --mayam-slider-end:#062039; }
html[data-dark="true"][data-theme="glass"] body, html[data-dark="true"] body[data-theme="glass"] { --bg-color:#1b1516; --surface-color:rgba(42,31,34,.92); --text-main:#fff0f2; --text-muted:#d3afb6; --border-color:#593d43; --primary-color:#fb7185; --mayam-accent-2:#be123c; --mayam-slider-start:#732240; --mayam-slider-end:#25151e; }
html[data-dark="true"][data-theme="neon"] body, html[data-dark="true"] body[data-theme="neon"] { --bg-color:#050711; --surface-color:#0c1222; --text-main:#ebf6ff; --text-muted:#9fb4d1; --border-color:#26395c; --primary-color:#4cc9ff; --mayam-accent-2:#818cf8; --mayam-slider-start:#084d76; --mayam-slider-end:#15114f; }
html[data-dark="true"][data-theme="3d"] body, html[data-dark="true"] body[data-theme="3d"] { --bg-color:#121820; --surface-color:#19222c; --text-main:#edf2f7; --text-muted:#a5b3c1; --border-color:#2d3b49; --primary-color:#fb7185; --mayam-accent-2:#e11d48; --mayam-slider-start:#4e6076; --mayam-slider-end:#202c39; --shadow-sm:5px 5px 12px #090c10, -4px -4px 10px #263340; --shadow-md:9px 9px 18px #090c10, -8px -8px 16px #263340; }

html.mayam-theme-ready, html.mayam-theme-ready body { background:var(--bg-color); color:var(--text-main); transition:background-color .28s ease, color .28s ease; }

/* أي مكوّن عام يأخذ ألوان الثيم، حتى الصفحات ذات الـCSS المختلف. */
html.mayam-theme-ready header,
html.mayam-theme-ready .bottom-nav,
html.mayam-theme-ready .chat-launch-menu,
html.mayam-theme-ready .community-chat-box,
html.mayam-theme-ready .mayam-chat-box,
html.mayam-theme-ready .comments-box,
html.mayam-theme-ready .rewards-content,
html.mayam-theme-ready .order-fullscreen-modal,
html.mayam-theme-ready .cart-item,
html.mayam-theme-ready .cart-summary-section,
html.mayam-theme-ready .product-card,
html.mayam-theme-ready .category-card,
html.mayam-theme-ready .action-card,
html.mayam-theme-ready .profile-header,
html.mayam-theme-ready .profile-theme-section { background-color:var(--surface-color); border-color:var(--border-color); color:var(--text-main); }

html.mayam-theme-ready .bottom-nav-center-btn,
html.mayam-theme-ready .chat-launcher,
html.mayam-theme-ready .community-chat-header,
html.mayam-theme-ready .mayam-chat-header,
html.mayam-theme-ready .mayam-chat-footer button,
html.mayam-theme-ready .user-message { background:linear-gradient(135deg, var(--primary-color), var(--mayam-accent-2)) !important; }
html.mayam-theme-ready .chat-launcher { border-color:var(--surface-color); }
html.mayam-theme-ready .community-chat-body,
html.mayam-theme-ready .mayam-chat-body { background:radial-gradient(circle at 90% 0, var(--mayam-accent-soft), transparent 30%), var(--bg-color); }
html.mayam-theme-ready .community-chat-input,
html.mayam-theme-ready .mayam-chat-footer,
html.mayam-theme-ready .comments-input-area { background:color-mix(in srgb, var(--surface-color) 94%, transparent); border-color:var(--border-color); }
html.mayam-theme-ready .community-chat-input textarea,
html.mayam-theme-ready .mayam-chat-footer input,
html.mayam-theme-ready .comments-input-area input { background:var(--bg-color); color:var(--text-main); border-color:var(--border-color); }
html.mayam-theme-ready .chat-menu-item:hover { color:var(--primary-color); background:var(--mayam-accent-soft); }
html.mayam-theme-ready .chat-menu-item .menu-icon,
html.mayam-theme-ready .chat-menu-item.ai .menu-icon { background:linear-gradient(135deg, var(--primary-color), var(--mayam-accent-2)); }

/* الثيم ثلاثي الأبعاد يطبّق على الواجهة والشات والقائمة أيضاً. */
html[data-theme="3d"].mayam-theme-ready .bottom-nav,
html[data-theme="3d"].mayam-theme-ready header,
html[data-theme="3d"].mayam-theme-ready .chat-launch-menu,
html[data-theme="3d"].mayam-theme-ready .community-chat-box,
html[data-theme="3d"].mayam-theme-ready .mayam-chat-box,
html[data-theme="3d"].mayam-theme-ready .product-card,
html[data-theme="3d"].mayam-theme-ready .cart-item,
html[data-theme="3d"].mayam-theme-ready .cart-summary-section,
html[data-theme="3d"].mayam-theme-ready .action-card,
html[data-theme="3d"].mayam-theme-ready .profile-header,
html[data-theme="3d"].mayam-theme-ready .profile-theme-section { border:0; box-shadow:var(--shadow-md); }
html[data-theme="3d"].mayam-theme-ready .bottom-nav-center-btn { color:var(--primary-color); background:var(--surface-color) !important; border-color:var(--surface-color); box-shadow:var(--shadow-sm); }
html[data-theme="3d"].mayam-theme-ready .community-chat-body,
html[data-theme="3d"].mayam-theme-ready .mayam-chat-body { background:var(--bg-color); }

/* يلوّن حركة الإطار في القائمة الطافية بظل الثيم المختار. */
html[data-theme="ocean"] .bottom-nav-orbit { filter:hue-rotate(155deg) saturate(1.15); }
html[data-theme="glass"] .bottom-nav-orbit { filter:hue-rotate(320deg) saturate(.85); }

/* السلايدر العام: يحافظ على الصورة كاملة في الهاتف والحاسوب بلا قص.
   صمّم البنرات الجديدة على 1600×700px (نسبة 16:7) لأفضل نتيجة. */
html.mayam-theme-ready .top-slider-container {
    aspect-ratio:16 / 7 !important;
    background:
        radial-gradient(circle at 75% 10%, color-mix(in srgb, var(--primary-color) 45%, transparent), transparent 47%),
        linear-gradient(135deg, var(--mayam-slider-start), var(--mayam-slider-end)) !important;
}
/* الصورة الشفافة تكون داخل هذه الطبقة، لذلك لا نترك لوناً أسود ثابتاً خلفها. */
html.mayam-theme-ready .top-slider .store-showcase-slide {
    background:
        radial-gradient(circle at 75% 10%, color-mix(in srgb, var(--primary-color) 45%, transparent), transparent 47%),
        linear-gradient(135deg, var(--mayam-slider-start), var(--mayam-slider-end)) !important;
}
html.mayam-theme-ready .top-slider > a {
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
html.mayam-theme-ready .top-slider img,
html.mayam-theme-ready .top-slider .store-showcase-media,
html.mayam-theme-ready .top-slider .store-showcase-video-poster {
    object-fit:contain !important;
    object-position:center center;
    background:transparent !important;
}

@media (max-width:600px) {
    html.mayam-theme-ready .top-slider-container {
        border-radius:18px;
    }
}
html[data-theme="neon"] .bottom-nav-orbit { filter:hue-rotate(175deg) saturate(1.5) brightness(1.13); }
html[data-theme="3d"] .bottom-nav-orbit { opacity:.72; filter:saturate(.7); }