/* ===== ثيم دارك كامل لمتجر القيمينق - معدل ومبسط ===== */
:root {
--main-bg: #0a0a0f;
--secondary-bg: #141420;
--card-bg: #1a1a2e;
--accent-color: #00C4D6;
--accent-glow: rgba(0, 196, 214, 0.3);
--text-primary: #ffffff;
--text-secondary: #b0b0c0;
--border-color: #2a2a3c;
}
/* ===== تطبيق أساسي بدون !important مفرط ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--main-bg) !important;
color: var(--text-primary) !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
min-height: 100vh;
}
/* ===== الهيكل الأساسي ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: var(--main-bg);
}
/* ===== الهيدر ===== */
header {
background: var(--secondary-bg) !important;
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
color: var(--accent-color) !important;
font-size: 1.5rem;
font-weight: bold;
}
/* ===== المحتوى الرئيسي ===== */
.main-content {
background: var(--main-bg);
padding: 2rem 0;
min-height: 60vh;
}
/* ===== البطاقات ===== */
.card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
transition: all 0.3s ease;
}
.card:hover {
border-color: var(--accent-color) !important;
box-shadow: 0 4px 15px var(--accent-glow);
}
/* ===== العناوين ===== */
h1 {
color: var(--accent-color) !important;
font-size: 2rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.5rem;
}
h2 {
color: var(--text-primary) !important;
font-size: 1.5rem;
margin: 1rem 0;
}
h3 {
color: var(--text-secondary) !important;
font-size: 1.2rem;
margin: 0.8rem 0;
}
/* ===== النصوص ===== */
p {
color: var(--text-primary) !important;
margin: 0.5rem 0;
}
/* ===== القوائم ===== */
ul, ol {
margin: 1rem 0;
padding-left: 2rem;
}
li {
color: var(--text-primary) !important;
margin: 0.3rem 0;
}
/* ===== الأزرار ===== */
button, .btn {
background: var(--accent-color) !important;
color: #000 !important;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.3rem;
}
button:hover, .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--accent-glow);
}
/* ===== حقول الإدخال ===== */
input, textarea, select {
background: var(--secondary-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
padding: 0.8rem;
border-radius: 6px;
margin: 0.3rem 0;
width: 100%;
max-width: 400px;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--accent-color) !important;
box-shadow: 0 0 8px var(--accent-glow);
}
/* ===== الجداول ===== */
table {
background: var(--card-bg) !important;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
margin: 1rem 0;
width: 100%;
}
th, td {
background: var(--card-bg) !important;
border: 1px solid var(--border-color);
padding: 1rem;
color: var(--text-primary) !important;
}
th {
background: var(--secondary-bg) !important;
color: var(--accent-color) !important;
font-weight: 600;
}
/* ===== الروابط ===== */
a {
color: var(--accent-color) !important;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--text-primary) !important;
text-decoration: underline;
}
/* ===== الفوتر ===== */
footer {
background: var(--secondary-bg) !important;
border-top: 1px solid var(--border-color);
padding: 2rem 0;
margin-top: 3rem;
color: var(--text-secondary) !important;
text-align: center;
}
/* ===== شبكة المنتجات ===== */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.product-card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.product-card:hover {
border-color: var(--accent-color) !important;
transform: translateY(-5px);
box-shadow: 0 8px 25px var(--accent-glow);
}
/* ===== الأسعار ===== */
.price {
color: var(--accent-color) !important;
font-size: 1.5rem;
font-weight: bold;
margin: 0.5rem 0;
}
/* ===== شريط التمرير ===== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--main-bg);
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #0099AA;
}
/* ===== التعديل الجديد: إخفاء الخط في عداد الكمية وإظهار الأسهم فقط ===== */
.quantity-input, .qty-input,
input[type="number"],
input[type="text"][class*="quantity"],
input[class*="qty"] {
color: transparent !important;
text-shadow: none !important;
background: var(--secondary-bg) !important;
border: 2px solid var(--accent-color) !important;
border-radius: 8px !important;
padding: 10px !important;
width: 60px !important;
text-align: center !important;
font-size: 1rem !important;
caret-color: var(--accent-color) !important;
}
/* عند التركيز يظهر الرقم مؤقتاً */
.quantity-input:focus, .qty-input:focus,
input[type="number"]:focus,
input[type="text"][class*="quantity"]:focus {
color: var(--accent-color) !important;
background: var(--main-bg) !important;
}
/* إظهار الأسهم فقط */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
opacity: 1 !important;
background: var(--accent-color) !important;
border-radius: 4px !important;
margin: 0 2px !important;
height: 20px !important;
width: 20px !important;
}
/* تحسين مظهر أزرار الكمية */
.quantity-btn, .qty-btn,
button[class*="quantity"],
button[class*="qty"] {
background: var(--accent-color) !important;
color: #000 !important;
border: 2px solid #000 !important;
border-radius: 50% !important;
width: 35px !important;
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 800 !important;
font-size: 1.2rem !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 3px 10px var(--accent-glow) !important;
margin: 0 5px !important;
}
.quantity-btn:hover, .qty-btn:hover {
transform: scale(1.15) !important;
box-shadow: 0 5px 20px var(--accent-glow) !important;
}
/* تحسين حاوية الكمية */
.quantity-controls, .qty-controls,
div[class*="quantity"],
div[class*="qty"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 1rem 0 !important;
background: transparent !important;
}
/* إخفاء النص في عداد السلة إذا كان موجوداً */
.cart-count, .basket-count {
color: transparent !important;
}
.cart-count::after, .basket-count::after {
content: "" !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background: var(--accent-color) !important;
border-radius: 50% !important;
border: 2px solid #000 !important;
}
/* حلول إضافية لمختلف أنواع حقول الإدخال */
input[type="number"] {
-moz-appearance: textfield !important;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* تنسيق خاص لحقل العدد في الصورة */
input {
color: transparent !important;
caret-color: var(--accent-color) !important;
}
/* عند الكتابة يظهر النص مؤقتاً */
input:not(:placeholder-shown) {
color: var(--accent-color) !important;
}
/* تحسين المظهر العام للعداد */
.quantity-wrapper {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 15px 0 !important;
}
/* إضافة تأثيرات مرئية للأسهم */
.quantity-btn.decrease::before {
content: "−" !important;
}
.quantity-btn.increase::before {
content: "+" !important;
}
/* حل بديل باستخدام CSS فقط */
.quantity-hidden {
position: relative !important;
}
.quantity-hidden input {
color: transparent !important;
}
.quantity-hidden::after {
content: "4" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
color: var(--accent-color) !important;
font-weight: bold !important;
pointer-events: none !important;
}
/* ===== التجاوب ===== */
@media (max-width: 768px) {
.container {
padding: 10px;
}

.products-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

h1 {
font-size: 1.5rem;
}

h2 {
font-size: 1.3rem;
}
/* تعديلات responsive للكمية */
.quantity-input, .qty-input {
width: 50px !important;
padding: 8px !important;
}
.quantity-btn, .qty-btn {
width: 30px !important;
height: 30px !important;
font-size: 1rem !important;
}
}
/* ===== تأكيد تطبيق الألوان على العناصر الشائعة ===== */
div, section, article, main, aside, nav {
background-color: var(--main-bg) !important;
color: var(--text-primary) !important;
}
/* ===== إصلاح مشكلة الخلفيات البيضاء ===== */
[style*="background-color: white"],
[style*="background: white"],
[style*="background-color: #fff"],
[style*="background: #fff"],
[style*="background-color: #ffffff"],
[style*="background: #ffffff"] {
background-color: var(--main-bg) !important;
color: var(--text-primary) !important;
}
/* ===== إصلاح مشكلة النصوص السوداء ===== */
[style*="color: black"],
[style*="color: #000"],
[style*="color: #000000"] {
color: var(--text-primary) !important;
}