/* =====================================================
MTJR COINS - WHITE PAGE + DARK NEON PURPLE HEADER/FOOTER
===================================================== */
:root{
--mtjr-white: #ffffff;
--mtjr-text-dark: #1b2233;
--mtjr-text-soft: #6a7285;
--mtjr-purple-1: #2f005f;
--mtjr-purple-2: #4c0aa1;
--mtjr-purple-3: #6c1cff;
--mtjr-purple-4: #9b5cff;
--mtjr-neon-blue: #00d1ff;
--mtjr-border-soft: rgba(0,0,0,0.08);
--mtjr-shadow-soft: 0 10px 24px rgba(0,0,0,0.10);
--mtjr-radius-lg: 18px;
--mtjr-radius-xl: 24px;
}
/* ===== خلفية الصفحة كاملة بيضاء ===== */
body,
#app,
.main-content,
.app-inner,
.store-page,
main,
section,
.content-wrapper,
.inner-page {
background: #ffffff !important;
color: var(--mtjr-text-dark) !important;
}
/* ===== الهيدر البنفسجي ===== */
header,
.store-header,
.main-header,
.navbar,
.header-wrapper,
.top-navbar,
.topbar,
.salla-theme_announcement-bar,
.s-block--announcement,
.announcement-bar {
background:
linear-gradient(90deg, var(--mtjr-purple-1) 0%, var(--mtjr-purple-2) 45%, var(--mtjr-purple-3) 100%) !important;
color: #ffffff !important;
border: 0 !important;
box-shadow:
0 8px 24px rgba(76, 10, 161, 0.28),
0 0 18px rgba(0, 209, 255, 0.08) !important;
}
/* ===== نصوص الشريط البنفسجي فقط ===== */
.top-navbar *,
.topbar *,
.salla-theme_announcement-bar *,
.s-block--announcement *,
.announcement-bar * {
color: #ffffff !important;
}
/* ===== البحث ===== */
.search-form input,
.search-wrapper input,
.search-input input,
.search input,
input[type="search"] {
background: linear-gradient(180deg, #0d1430 0%, #101935 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(155, 92, 255, 0.24) !important;
border-radius: 22px !important;
min-height: 56px !important;
box-shadow:
0 10px 22px rgba(0,0,0,0.12),
0 0 16px rgba(108, 28, 255, 0.12) !important;
}
.search-form input::placeholder,
.search-wrapper input::placeholder,
.search-input input::placeholder,
.search input::placeholder,
input[type="search"]::placeholder {
color: rgba(255,255,255,0.48) !important;
}
.search-form input:focus,
.search-wrapper input:focus,
.search-input input:focus,
.search input:focus,
input[type="search"]:focus {
outline: none !important;
border-color: rgba(155, 92, 255, 0.45) !important;
box-shadow:
0 0 0 4px rgba(108, 28, 255, 0.08),
0 12px 28px rgba(0,0,0,0.14) !important;
}
/* ===== زر اللغة / العملة فقط ===== */
.currency-select,
.lang-currency,
.dropdown--currency,
.dropdown--language,
.header-btn,
.header-item .btn {
background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08)) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 22px !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important;
}
/* ===== الشعار ===== /
.logo img,
.store-logo img,
img[alt="logo"],
img[alt*="Logo"] {
border-radius: 18px !important;
box-shadow:
0 8px 20px rgba(76, 10, 161, 0.14),
0 0 0 1px rgba(155, 92, 255, 0.12) !important;
}
/* ===== عناوين الأقسام داخل الصفحة البيضاء ===== */
h1, h2, h3, h4,
.section-title,
.section--title,
.block-title,
.section-header h2 {
color: var(--mtjr-text-dark) !important;
}
/* ===== النصوص داخل الصفحة البيضاء ===== */
p, li, span, small {
color: inherit;
}
/* ===== البطاقات والمنتجات على خلفية بيضاء ===== */
.product,
.product-entry,
.s-product-card,
.product-card,
.card,
.category-card,
.feature-box,
.banner-entry {
background: #ffffff !important;
border: 1px solid var(--mtjr-border-soft) !important;
border-radius: 22px !important;
box-shadow: var(--mtjr-shadow-soft) !important;
overflow: hidden !important;
}
/* ===== صور المنتجات ===== */
.product img,
.product-entry img,
.s-product-card img,
.product-card img {
border-radius: 18px !important;
}
/* ===== أسماء المنتجات ===== */
.product .name,
.product-entry .name,
.s-product-card .name,
.product-card .name,
.product h3,
.product h4,
.product .title {
color: var(--mtjr-text-dark) !important;
font-weight: 800 !important;
line-height: 1.7 !important;
}
/* ===== الأسعار ===== */
.price,
.product-price,
.s-product-card-price,
.product .amount,
.product .sale-price,
.product .price-wrapper .sale-price {
color: #5b2ca0 !important;
font-weight: 900 !important;
}
/* ===== زر السلة داكن ===== */
.s-button-primary,
.btn-primary,
button.add_to_cart,
.add-to-cart-btn,
.product form button,
.product .btn,
.product .s-button-btn {
background: linear-gradient(180deg, #162038 0%, #101827 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(18, 24, 39, 0.95) !important;
border-radius: 18px !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
opacity: 1 !important;
}
.s-button-primary *,
.btn-primary *,
button.add_to_cart *,
.add-to-cart-btn *,
.product form button *,
.product .btn *,
.product .s-button-btn * {
color: #ffffff !important;
stroke: #ffffff !important;
opacity: 1 !important;
}
/* ===== مربع المفضلة داكن ===== /
.product .favorite-btn,
.product .wishlist-btn,
.s-product-card-wishlist,
.product-card .wishlist,
.product .btn--wishlist,
button[aria-label="favorite"],
button[aria-label*="wishlist"],
button[title*="المفضلة"],
button[title*="wishlist"] {
background: rgba(22, 32, 56, 0.92) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
}
.product .favorite-btn svg,
.product .wishlist-btn svg,
.s-product-card-wishlist svg,
.product-card .wishlist svg,
.product .btn--wishlist svg,
button[aria-label*="favorite"] svg,
button[aria-label*="wishlist"] svg,
.product .favorite-btn i,
.product .wishlist-btn i,
.s-product-card-wishlist i,
.product-card .wishlist i {
color: #ffffff !important;
stroke: #ffffff !important;
fill: transparent !important;
}
/* ===== القوائم المنسدلة ===== */
.dropdown-menu,
.s-dropdown-list,
[role="menu"],
.dropdown-content {
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 18px !important;
box-shadow: 0 16px 34px rgba(0,0,0,0.12) !important;
}
.dropdown-menu a,
.s-dropdown-list a,
[role="menu"] a,
.dropdown-content a {
color: var(--mtjr-text-dark) !important;
}
/* ===== الفوتر بنفسجي غامق نيون ===== */
footer,
.store-footer,
.footer {
background:
linear-gradient(90deg, #220044 0%, #3b0677 45%, #5e16c8 100%) !important;
color: rgba(255,255,255,0.86) !important;
border-top: 0 !important;
box-shadow: 0 -8px 24px rgba(76, 10, 161, 0.22) !important;
}
footer h2,
footer h3,
footer h4,
footer .title,
footer p,
footer span,
footer li,
footer small {
color: #ffffff !important;
}
footer a {
color: rgba(255,255,255,0.88) !important;
}
footer a:hover {
color: #ffffff !important;
}
/* ===== أيقونات الفوتر ===== */
footer .icon,
footer .social a,
footer .contact-icon {
border-radius: 50% !important;
}
/* ===== واتساب ===== /
a[href="wa.me"],
a[href*="whatsapp"] {
box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}
/* ===== الجوال ===== */
@media (max-width: 768px) {
.search-form input,
.search-wrapper input,
.search-input input,
.search input,
input[type="search"] {
min-height: 52px !important;
border-radius: 18px !important;
font-size: 18px !important;
}
.product,
.product-entry,
.s-product-card,
.product-card,
.card {
border-radius: 18px !important;
}
}
/* تغيير خلفية الجزء الداخلي من الفوتر بدون المساس ببرمجة الثيم */
footer .container,
.store-footer .container,
.footer .container,
footer .footer-inner,
.store-footer .footer-inner,
.footer .footer-inner,
footer .footer-main,
.store-footer .footer-main,
.footer .footer-main,
footer .footer-wrapper,
.store-footer .footer-wrapper,
.footer .footer-wrapper {
background: linear-gradient(180deg, #16032f 0%, #2a0654 45%, #45108a 100%) !important;
}
/* إبقاء البلوكات الداخلية شفافة حتى يظهر اللون الجديد */
footer section,
footer .s-block,
footer .footer-section,
.store-footer section,
.store-footer .s-block,
.store-footer .footer-section,
.footer section,
.footer .s-block,
.footer .footer-section {
background: transparent !important;
}
footer > div,
.store-footer > div,
.footer > div,
footer .copyright,
.store-footer .copyright,
.footer .copyright,
footer .sub-footer,
.store-footer .sub-footer,
.footer .sub-footer,
footer .footer-bottom,
.store-footer .footer-bottom,
.footer .footer-bottom {
background: linear-gradient(180deg, #18032f 0%, #320664 100%) !important;
color: #ffffff !important;
border-top: 0 !important;
}