/* ===== الخلفية العامة مع زخارف قرآنية أوضح ===== */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: transparent;
    background-image: 
        radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 11px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 11px),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><text x="0" y="20" font-size="16" fill="rgba(255,255,255,0.08)">۝</text></svg>');
    background-repeat: repeat;
    background-size: 50px 50px, 50px 50px, 50px 50px, 40px 40px; 
    z-index: 0;
}

/* ===== البسملة أسفل خانة البحث ===== */
header::after {
    content: "﷽";
    display: block;
    text-align: center;
    font-size: 50px; /* أكبر وأكثر وضوحًا */
    color: rgba(255, 255, 255, 0.3); /* أفتح قليلًا */
    margin: 20px 0; 
    z-index: 9999;
    position: relative; 
    pointer-events: none; 
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 0.5s;
}

/* صورة تحت البسملة */
.main-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
    margin-top: 10px;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}
.main-image.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* نصوص كل العناصر باللون الأبيض */
* {
    color: #ffffff !important;
    background-color: unset !important;
}

/* الهيدر والشريط العلوي */
header, .navbar, .top-bar {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-bottom: 1px solid #CFA544 !important;
}
header a, .navbar a, .top-bar a {
    color: #ffffff !important;
}

/* البطاقات والمكونات الداخلية */
.product-card, .product-item, .s-product-card,
.review-card, .testimonial-card, .customer-review,
.features-card, .feature-item,
.section, .page, .content, .s-card,
.container, .wrapper {
    background: #1a1a1a !important; 
    border: 2px solid #CFA544 !important; 
    color: #ffffff !important; 
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 40px;
    position: relative; 
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s forwards;
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}
.product-card::after, .product-item::after, .s-product-card::after,
.review-card::after, .testimonial-card::after, .customer-review::after,
.features-card::after, .feature-item::after,
.section::after, .page::after, .content::after, .s-card::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(135deg, #1a1a1a 70%, #CFA544 100%) !important;
    border-radius: 50% 50% 0 0;
}
.product-card img, .product-item img, .s-product-card img {
    border: 2px solid #CFA544 !important;
    border-radius: 10px !important;
    display: block;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card img:hover, .product-item img:hover, .s-product-card img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(207,165,68,0.5);
}
.product-card:hover, .product-item:hover, .s-product-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* الفوتر */
footer {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 70%, #CFA544 100%) !important;
    text-align: center;
    padding: 50px 20px 20px 20px;
    color: #ffffff !important;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 0.5s;
}

/* زر الشراء */
button, .btn, .btn-buy, .s-btn {
    background-color: #1a1a1a !important; 
    color: #ffffff !important;
    border: 2px solid #CFA544 !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 0 10px rgba(207,165,68,0.4) !important;
    transition: all 0.3s ease !important;
}
button:hover, .btn:hover, .btn-buy:hover {
    background: linear-gradient(135deg, #CFA544, #FFD700, #CFA544);
    background-size: 200% 200%;
    animation: shine 1.5s infinite;
    color: #ffffff !important;
}
@keyframes shine { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }

/* ظهور تدريجي للبسملة والفوتر */
@keyframes fadeIn { to { opacity: 1; } }

/* تمركز منتجات الصفحة الرئيسية */
.home .product-list, .home .products-grid, .home .product-wrapper, .home .container, .home .wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}
.home .product-card, .home .product-item, .home .s-product-card { flex: 0 0 auto !important; }

/* شاشة التحميل */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}
#loading-screen img {
    width: 80%;
    max-width: 600px;
    animation: blink 1.5s ease-in-out forwards;
}
@keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* شعار ثابت أسفل المتجر */
.bottom-logo-static {
    display: block;
    width: 50%;
    max-width: 400px;
    margin: 50px auto 0 auto;
    position: relative;
}