/* 1. Logo Correction - Giving it "Breathing Room" */
.navbar-brand img, 
.store-logo img, 
.header-logo img {
    max-height: 110px !important; /* Increased from 70px to make it visible */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain;
    padding: 1px 0; /* Adds vertical space so it doesn't look cramped */
    transition: transform 0.3s ease;
}

/* 2. Header Container - Adjusting the Gold Line */
.flex.items-stretch.justify-between.relative {
    padding: 5px 0;
    background: #ffffff;
    /* This creates a very subtle separator, not a thick distracting line */
    border-bottom: 1px solid #f0f0f0; 
}

/* 3. Menu Items - The "Short Underline" Fix */
.main-menu li {
    margin: 0 15px; /* Space between menu items */
}

.main-menu li a {
    position: relative;
    display: inline-block; /* CRITICAL: This keeps the underline the width of the text ONLY */
    font-weight: 600;
    font-size: 16px;
    color: #0c4c4d !important; /* Your Brand Teal */
    padding-bottom: 8px; /* Space between text and the underline */
    text-decoration: none !important;
}

/* The Hover Underline - Now scoped to the link width */
.main-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 50%; /* Start from center for a nice animation */
    transform: translateX(-50%);
    background-color: #b9975b; /* Your Brand Gold */
    transition: width 0.3s ease;
}

.main-menu li a:hover::after {
    width: 100%; /* Expands only to the width of the word */
}

.main-menu li a:hover {
    color: #b9975b !important;
}

/* 4. Cart & User Icons - Alignment */
.header-icons-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 65px !important;
    }
}




/* --- FOOTER GENERAL STYLING --- */
.store-footer {
    background-color: #fcfcfc !important; /* Very light clean grey/white */
    border-top: 3px solid #0c4c4d; /* Brand Teal top border for authority */
    padding-top: 50px !important;
    padding-bottom: 20px !important;
}

/* Footer Headings (تواصل معنا، روابط مهمة، الخ) */
.footer-title, 
.store-footer h3, 
.store-footer h4 {
    color: #0c4c4d !important; /* Brand Teal */
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
    position: relative;
    display: inline-block;
}

/* Optional: Small gold line under footer titles */
.footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #b9975b; /* Brand Gold */
    margin-top: 5px;
}

/* --- FOOTER LINKS & TEXT --- */
.footer-links a, 
.store-footer p, 
.store-footer span {
    color: #4b5563 !important; /* Soft professional grey */
    font-size: 15px !important;
    line-height: 1.8;
    transition: all 0.3s ease;
}

/* Hover effect for footer links - Matching the header */
.footer-links a:hover {
    color: #b9975b !important; /* Brand Gold */
    padding-right: 5px; /* Subtle movement effect for Arabic */
}

/* Social Media Icons Styling */
.footer-social-icons a {
    background-color: #f3f4f6 !important;
    color: #0c4c4d !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.footer-social-icons a:hover {
    background-color: #0c4c4d !important;
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* --- BOTTOM COPYRIGHT BAR --- */
.footer-bottom {
    background-color: #0c4c4d !important; /* Brand Teal Background */
    padding: 15px 0 !important;
    margin-top: 40px;
}

.footer-bottom p, 
.footer-bottom span, 
.footer-bottom div {
    color: #ffffff !important; /* Pure white text */
    font-size: 14px !important;
    font-weight: 400;
}

/* License Icon / Logo at the bottom */
.footer-bottom img {
    filter: brightness(0) invert(1); /* Makes the small icons white to match text */
    opacity: 0.8;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .store-footer {
        text-align: center; /* Centered layout looks better on mobile */
    }
    .footer-title::after {
        margin: 5px auto 0; /* Center the gold line */
    }
}




/* --- تنسيق العناوين الرئيسية في الصفحة --- */
.main-title, .section-title, .product-slider-title {
    color: #0c4c4d !important; /* لون البراند الأخضر */
    font-weight: 800 !important;
    text-align: right;
    margin-bottom: 30px !important;
    position: relative;
    display: inline-block;
}

/* إضافة الخط الذهبي تحت العناوين ليتناسب مع الهيدر */
.main-title::after, .section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #b9975b; /* ذهبي */
    margin-top: 10px;
}

/* --- تنسيق بطاقة المنتج (Product Card) --- */
.product-card {
    border-radius: 15px !important;
    overflow: hidden;
    transition: all 0.3s ease !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(12, 76, 77, 0.1) !important;
    border-color: #b9975b !important;
}

/* --- تنسيق أسعار المنتجات --- */
.product-price {
    color: #b9975b !important; /* ذهبي */
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* --- تنسيق زر "إضافة للسلة" و "احجز الآن" --- */
.s-button-btn-primary, 
.product-card .btn-add-to-cart,
.product-card .btn-booking {
    background-color: #0c4c4d !important; /* أخضر البراند */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: 0.3s all ease;
}

.s-button-btn-primary:hover {
    background-color: #b9975b !important; /* يتحول للذهبي عند التمرير */
    box-shadow: 0 5px 15px rgba(185, 151, 91, 0.3) !important;
}

/* --- تنسيق القسم الخاص بـ "مميزات المتجر / الجمعية" --- */
.store-features {
    background-color: #f9fafa !important;
    padding: 40px 0;
    border-radius: 20px;
}

.feature-item h3 {
    color: #0c4c4d !important;
    font-size: 16px !important;
}

.feature-item i {
    color: #b9975b !important; /* أيقونات ذهبية */
}

/* --- 1. تنسيق قسم "عن الجمعية" المحدث --- */
.s-block-simple-section {
    padding: 40px 0 !important;
}

.s-block-simple-section__content {
    background: #fcfcfc !important; 
    padding: 45px !important;
    border-right: 6px solid #b9975b !important; /* الخط الذهبي */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    margin: 0 auto !important;
    text-align: right !important;
}

.s-block-simple-section__title {
    color: #0c4c4d !important; /* أخضر الجمعية */
    font-weight: 800 !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
}

.s-block-simple-section__subtitle {
    color: #4b5563 !important;
    line-height: 2 !important;
    font-size: 18px !important;
}

/* --- 2. تنسيق بطاقة المنتج (Product Card) المحدث --- */
.s-product-card-entry {
    border: 1px solid #f1f1f1 !important;
    border-radius: 15px !important;
    overflow: hidden;
    transition: all 0.4s ease !important;
    background: #ffffff !important;
    padding-bottom: 15px !important;
}

.s-product-card-entry:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(12, 76, 77, 0.08) !important;
    border-color: #b9975b !important; /* تغيير الإطار للذهبي عند التمرير */
}

/* تنسيق عنوان المنتج داخل البطاقة */
.s-product-card-content-title a {
    color: #0c4c4d !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-decoration: none !important;
}

/* تنسيق السعر */
.s-product-card-price {
    color: #b9975b !important; /* لون ذهبي للسعر */
    font-weight: 800 !important;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- 3. تنسيق الأزرار (إضافة للسلة / احجز الآن) --- */
.s-product-card-content-footer .s-button-element {
    background-color: #0c4c4d !important; /* أخضر براند الجمعية */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    height: 45px !important;
    font-weight: 600 !important;
    transition: 0.3s all ease !important;
}

.s-product-card-content-footer .s-button-element:hover {
    background-color: #b9975b !important; /* يتحول للذهبي عند التمرير */
    box-shadow: 0 4px 12px rgba(185, 151, 91, 0.3) !important;
}

/* أيقونة السلة داخل الزر */
.s-product-card-content-footer .s-button-element i {
    color: #ffffff !important;
    margin-left: 8px;
}

/* --- 4. تحسين الصور في المتجر --- */
.s-product-card-image img {
    transition: transform 0.5s ease !important;
}

.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.05); /* زوم خفيف للصورة عند التمرير */
}

/* زر المفضلة (القلب) */
.s-product-card-wishlist-btn button {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #0c4c4d !important;
}


/* --- تنسيق قسم "عن الجمعية" المحدث (Text Content Bundle) --- */

/* 1. الحاوية الكبرى للقسم */
.s-block--bundle-text-content {
    background: #ffffff !important;
    padding: 60px 0 !important; /* مساحة واسعة للراحة البصرية */
}

/* 2. استهداف المكون الداخلي */
.s-block-simple-section {
    max-width: 1140px !important;
    margin: 0 auto !important;
    background: #fcfcfc !important;
    padding: 50px !important;
    border-right: 8px solid #b9975b !important; /* الخط الذهبي المميز */
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 3. تنسيق العنوان الكبير */
.s-block-simple-section h2, 
.s-block-simple-section__title {
    color: #0c4c4d !important; /* أخضر الجمعية */
    font-weight: 800 !important;
    font-size: 32px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* 4. تنسيق النص التفصيلي */
.s-block-simple-section p, 
.s-block-simple-section__subtitle {
    color: #4b5563 !important; /* رمادي غامق احترافي */
    font-size: 19px !important;
    line-height: 2 !important; /* تباعد مريح للأسطر */
    margin: 0 !important;
    text-align: justify !important; /* محاذاة النص ليعطي شكلاً رسمياً */
}

/* --- تحسينات العرض على الجوال --- */
@media (max-width: 768px) {
    .s-block--bundle-text-content {
        padding: 30px 15px !important;
    }
    .s-block-simple-section {
        padding: 30px 20px !important;
        border-right-width: 5px !important;
    }
    .s-block-simple-section h2 {
        font-size: 24px !important;
    }
    .s-block-simple-section p {
        font-size: 16px !important;
    }
}