/* Add custom CSS styles below */

/* Styles for section and category titles */
/* Centers the text, sets font size, and adds top/bottom padding for various h2 elements */
.categories h2,
.sections h2,
.testimonials-slider.s-slider-wrapper.s-slider-horizontal.hydrated div.s-slider-block__title div.s-slider-block__title-right h2 {
    text-align: center;
    font-size: 2rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* Specific text-center h2 with different bottom padding */
/* Centers text, sets font size, adds top padding, and zero bottom padding */
h2.text-center {
    text-align: center;
    font-size: 2rem;
    padding-top: 3rem;
    padding-bottom: 0rem;
}

/* Pseudo-element after the testimonials slider title */
/* Adds a block element after the title with specific text content and styling */
.testimonials-slider.s-slider-wrapper.s-slider-horizontal.hydrated div.s-slider-block__title div.s-slider-block__title-right h2::after {
    display: block;
    content: "وجهتك الأولى لتأثيث منزلك بأرقى التصاميم"; /* Arabic text content */
    text-align: center;
    padding-top: 1rem;
    font-size: 1.5rem;
    font-weight: normal !important; /* Ensures normal font weight */
}

/* Background for the first child div within testimonials slider */
/* Sets the background color to white */
#testimonials-4-slider > div:nth-child(1) {
    background: white;
}

/* Specific section background and padding */
/* Sets a light grey background and removes top padding for the 8th section block */
section.s-block:nth-child(8) {
    background: #c0c0b447; /* Light grey with transparency */
    padding-top: 0px;
}

/* Background and padding for the squares slider container */
/* Sets a light grey background and adds top/bottom padding */
#squares-3 .s-slider-container {
    background: #c0c0b447; /* Light grey with transparency */
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Fills SVG icons with white within a specific slider structure */
/* Changes the fill color of SVG elements to white */
#slider-with-bg-2 > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) svg {
    fill: white !important; /* Ensures white fill */
}

/* Styles for the vertical centered slider navigation */
/* Sets the width of the navigation element */
.s-slider-v-centered .s-slider-block__title-nav {
    width: 108%;
}

/* Styles for feature elements within the 'features' section */
/* Arranges feature items in a column with spacing and padding */
.features .angel-feature {
    flex-direction: column;
    row-gap: 20px;
    padding: 20px;
}

/* Sets the height of lord-icon elements to 100% */
lord-icon {
    height: 100%;
}

/* Adds bottom padding to the categories section */
.categories {
    padding-bottom: 2rem;
}

/* Ensures the first child div of testimonials slider is displayed as a block */
#testimonials-4-slider > div:nth-child(1) {
    display: block;
}

/* Centers elements with the class 'maaroof' */
.maaroof {
    margin: auto;
    text-align: center;
}

/* Sets aspect ratio for loaded product images */
/* Ensures product images maintain an 8/8 aspect ratio */
.s-product-card-image img.loaded {
    aspect-ratio: 8/8 !important; /* Ensures specific aspect ratio */
}

/* Sets max-width for the container class */
.container {
    max-width: 1440px;
}

/* Sets text color for primary buttons to white */
.s-button-primary,
.btn-primary {
    color: white;
}

/* Sets text color for a specific add product button to white */
/* Targets a specific button within a product form and ensures white text color */
#product-1903258819 > div.main-content.mob\:container.w-full.md\:w-1\/2.md\:pb-16 > form > section > div > salla-add-product-button > div > salla-button > button {
    Color: white !important; /* Ensures white text color */
}

/* Sets text color for active tab triggers to black */
.tabs .tab-trigger.is-active {
    color: black !important; /* Ensures black text color */
}

/* Styles for Salla advertisement block */
/* Sets background color and text color for the advertisement block */
.salla-advertisement {
    background-color: #3b3b3b !important; /* Dark grey background */
    color: white !important; /* White text color */
}

/* Styles for language selector */
/* Prevents inversion filter and sets button text color to black */
.language-selector-custom {
    filter: invert(0);
}

.language-selector-custom .s-button-primary {
    color: black !important; /* Ensures black text color */
}

.language-selector-custom .s-button-wrap {
    color: black !important; /* Ensures black text color */
}

/* Sets text color for inactive tab triggers to white */
.tab-trigger {
    color: white !important; /* Ensures white text color */
}

/* Styles for the tagline element */
/* Adds a top border, padding, centers text, and sets font size */
.tagline {
    border-top: solid 1px #99998799; /* Light grey border with transparency */
    padding: 2rem;
    text-align: center;
    font-size: 1.3rem;
}

/* Styles for wishlist buttons in product cards */
/* Positions wishlist buttons absolutely and removes filter inversion */
.swiper-wrapper.s-slider-swiper-wrapper div.s-products-slider-card.swiper-slide .s-product-card-vertical div.s-product-card-content div.s-product-card-content-footer.rounded-none salla-button.s-product-card-wishlist-btn.animated.s-button-wrap.hydrated,
.s-products-list-wrapper .s-product-card-vertical div.s-product-card-content div.s-product-card-content-footer.rounded-none salla-button.s-product-card-wishlist-btn.animated.s-button-wrap.hydrated {
    position: absolute;
    top: 10px;
    right: 7px;
    filter: invert(0);
}

/* Sets position for custom product cards and slider cards */
custom-salla-product-card {
    position: relative
}

.s-products-slider-card {
    position: relative;
}

/* Hover effect for product cards */
/* Adds a box shadow and increases z-index on hover */
.s-products-slider-card:hover,
.s-product-card-entry:hover {
    z-index: 99;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5.2px; /* Subtle box shadow */
}

/* Adds a bottom border to the features section */
.features {
    border-bottom: 2px solid #C7C7BB; /* Grey border */
}

/* Styles for review and description tab triggers */
/* Sets text color to white */
.tab-trigger.reveiws-tab,
.tab-trigger.description-tab {
    color: white;
}

/* Styles for angel feature layout */
/* Sets display to flex and direction to row */
.angel-feature {
    display: flex;
    flex-direction: row;
}

/* Adds top and bottom padding to the footer top section */
.footer-top {
    padding-top: 28px !important; /* Ensures padding */
    padding-bottom: 20px !important; /* Ensures padding */
}

/* Removes max-width constraint for store links */
.store-links-items a {
    max-width: initial !important; /* Removes max-width */
}

/* Sets font size for contact link icons */
.contact-links .sicon-mail,
.contact-links .sicon-whatsapp2 {
    font-size: xx-large;
}

/* Changes color of footer middle links on hover */
.footer-middle a:hover {
    color: #c8c8bc !important; /* Light grey color on hover */
}

/* Adds bottom padding to the logos slider block */
.s-block--logos-slider {
    padding-bottom: 3rem;
}

/* Sets color for price wrapper heading */
.price-wrapper h4 {
    color: #999987 !important; /* Grey color */
}

/* Aligns product footer items to the end */
.product-footer {
    align-items: flex-end;
}

/* Sets color for line-through price */
.line-through.leading-4 {
    color: red;
}

/* Styles for header elements */
/* Sets background color and bottom border for header and related containers */
header,
.main-nav-container .bg-white .container,
.inner.bg-white.da-bgm {
    background-color: white !important; /* White background */
    border-bottom: #c8c8bc; /* Grey bottom border */
}

/* Hides the 'follow' heading */
h3.follow {
    display: none;
}

/* Removes filter inversion for specific header elements */
/* Ensures elements like justify-start, cart, user icon are not inverted */
.main-nav-container .bg-white .container .justify-start,
.main-nav-container .bg-white .container .justify-end .header-cart,
.main-nav-container .bg-white .container .justify-end .s-button-wrap,
.main-nav-container .bg-white .container .justify-end .sicon-user {
    filter: invert(0);
}

/* Sets color for social label bubble */
.social-label.bubble {
    color: white;
}

/* Login custom branding styles */
/* Prevents inversion filter for light logo */
img.logo-light {
    filter: invert(0) !important; /* Prevents inversion */
}

/* Adds bottom padding to a specific light logo */
img.logo-light.foo {
    padding-bottom: 1rem;
}

/* Styles for login modal header icon */
/* Removes border/radius and sets background image for the login modal header icon */
.s-modal-header-inner .s-login-modal-header-icon {
    border: none !important; /* Removes border */
    border-radius: 0; /* Removes border radius */
    background: url(https://cdn.salla.sa/XaeeA/WA6FvzP0wpzoyhwEb5c0sqSgKbiRycHOtdXTeWX0.png); /* Sets background image */
    background-size: contain; /* Contains background image */
    background-repeat: no-repeat; /* Prevents repeating background image */
    background-position: center; /* Centers background image */
    width: 200px !important; /* Sets width */
    height: 60px !important; /* Sets height */
    margin-top: 10px !important; /* Adds top margin */
}

/* Hides SVG elements within the modal header inner */
.s-modal-header-inner svg {
    display: none;
}

/* Sets column count for store links items */
.store-links-items {
    column-count: 1 !important; /* Sets column count to 1 */
    -moz-columns: 1 !important; /* Sets column count for Firefox */
}

/* Custom borders */
/* Sets border color for product card entry to white */
.s-product-card-entry {
    border-color: white !important; /* Ensures white border color */
}

/* Styles for logos slider items */
/* Removes border radius and border for rounded elements within logos slider */
.s-block--logos-slider .swiper-slide .rounded-md {
    border-radius: 0px; /* Removes border radius */
    border: none; /* Removes border */
}

/* Sets background for logos slider block to transparent */
.s-block--logos-slider {
    background: transparent;
}

/* Header navigation hides */
/* Hides the language selector in the header */
.justify-end .lang {
    display: none;
}

/* Header navigation aligns */
/* Allows flex items in header justification classes to grow */
.justify-start,
.justify-end,
.justify-center {
    flex: 1;
}

/* Stretches footer container */
/* Removes padding and max-width constraints for the footer container */
.store-footer .container {
    padding-left: initial; /* Resets left padding */
    padding-right: initial; /* Resets right padding */
    max-width: none; /* Removes max-width constraint */
}

/* Footer colorations */
/* Sets background and border color for footer top */
.footer-top {
    background: #c8c8bc; /* Light grey background */
    border-color: #c8c8bc !important; /* Ensures light grey border color */
}

/* Styles for footer middle */
/* Sets background, display, justification, border color, alignment, and text color */
.footer-middle {
    background: #3b3b3b; /* Dark grey background */
    display: flex;
    justify-content: space-around !important; /* Distributes space around items */
    border-color: #3b3b3b !important; /* Ensures dark grey border color */
    align-items: flex-start; /* Aligns items to the start */
    color: white; /* White text color */
}

/* Sets color for footer middle headings to white */
.footer-middle h3 {
    color: white;
}

/* Styles for specific links within the footer middle */
/* Removes border radius, border, background, and sets text color to white */
div.shrink-0:nth-child(3) > div:nth-child(2) > a:nth-child(1),
div.shrink-0:nth-child(3) > div:nth-child(2) > a:nth-child(2) {
    border-radius: 0px; /* Removes border radius */
    border: transparent; /* Removes border */
    background: transparent; /* Removes background */
    color: white; /* White text color */
}

/* Removes top margin for the store footer */
.store-footer {
    margin-top: 0px;
}

/* Styles for footer bottom */
/* Sets background and adds left/right padding */
.footer-bottom {
    background: #3b3b3b; /* Dark grey background */
    padding-left: 20px;
    padding-right: 20px;
}

/* Styles for centered content in footer bottom */
/* Sets display to flex and justifies content to the start */
.footer-bottom .justify-center {
    display: flex;
    justify-content: flex-start; /* Justifies content to the start */
}

/* Header colorations */
/* Sets background color for the store header */
.store-header .bg-white {
    background: #000 !important; /* Black background */
}

/* Padding for product sliders */
/* Adds padding to various product slider wrappers */
#best-offers-4-slider .swiper-wrapper,
#best-offers-2-slider .swiper-wrapper,
#best-offers-5-slider .swiper-wrapper,
#best-offers-6-slider .swiper-wrapper,
#best-offers-7-slider .swiper-wrapper {
    padding: 0.625rem;
}

/* Styles for flex container within Salla advertisement */
/* Sets display, direction, and alignment for flex items */
.salla-advertisement .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Sets text color for primary buttons within modal body to white */
.s-modal-body .s-button-primary {
    color: white;
}

/* Adds margin to large header buttons */
.is_large .header-btn {
    margin: 10px;
}

/* Inverts filter for footer logo */
.logo-footer {
    filter: invert(1);
}

/* Pagination styles for logos slider */
/* Resets position and ensures display as block */
.s-block--logos-slider .swiper-pagination {
    position: initial !important; /* Resets position */
    display: block; /* Ensures display as block */
}

/* Media Queries */

/* Styles for extra large screens (>= 1280px) */
@media (min-width: 1280px) {

    /* Margin and box shadow for custom product cards within a specific slider */
    #slider-with-bg-2 > div:nth-child(2) custom-salla-product-card {
        margin: 10px;
        -webkit-box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Webkit box shadow */
        -moz-box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Mozilla box shadow */
        box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Standard box shadow */
    }

    /* Bottom margin for slider swiper wrapper */
    #slider-with-bg-2 > div:nth-child(2) .s-slider-swiper-wrapper {
        margin-bottom: 30px;
    }

    /* Sets max-width, width, and centers specific slider elements */
    #testimonials-4-slider > div:nth-child(2),
    #swiper-wrapper-b11ec161a11ddbd10 {
        max-width: 1280px;
        width: 1280px;
        margin: auto; /* Centers the element */
    }

    /* Sets max-width and width to 100vw for specific section blocks and divs */
    section.s-block:nth-child(8),
    section.s-block:nth-child(8) > div:nth-child(1),
    #testimonials-4-slider > div:nth-child(1) {
        max-width: 100vw;
        width: 100vw;
    }

    /* Sets max-width and width to 100vw for other specific section blocks and divs */
    section.s-block:nth-child(7),
    section.s-block:nth-child(7) > div:nth-child(1),
    section.s-block:nth-child(7) > div:nth-child(1) > div:nth-child(1) {
        max-width: 100vw;
        width: 100vw;
    }

    /* Sets width and centers the squares slider swiper wrapper */
    #squares-3 .s-slider-swiper-wrapper {
        width: 1280px;
        margin: auto; /* Centers the element */
    }
}

/* Styles for medium screens (>= 640px) */
@media (min-width: 640px) {

    /* Adds left and right padding to slider elements */
    salla-slider[type]:not(.hydrated) > div > div,
    salla-slider[type]:not(.hydrated) .swiper > div > div > div,
    .carousel-slider .swiper-wrapper > div {
        padding-left: 25px;
        padding-right: 25px;
    }

    /* Sets width for product slider cards */
    .s-products-slider-card {
        width: 25% !important; /* Ensures width */
    }

    /* Sets grid template columns for product list wrapper */
    .s-products-list-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Creates a 4-column grid */
    }
}

/* Styles for small screens (<= 640px) */
@media (max-width: 640px) {

    /* Sets width for product slider cards within a specific slider */
    #slider-with-bg-2 > div:nth-child(2) .s-products-slider-card {
        width: 70%;
    }

    /* Adds margin to banner square images */
    #squares-1 .banner-square .box-img {
        margin: 15px !important; /* Ensures margin */
    }

    /* Removes left padding for specific testimonials slider div */
    #testimonials-4-slider > div:nth-child(1) > div:nth-child(1) {
        padding-left: 0px;
    }

    /* Removes left padding for h2 within specific testimonials slider div */
    #testimonials-4-slider > div:nth-child(1) > div:nth-child(1) h2 {
        padding-left: 0px;
    }

    /* Removes left and right padding for a specific section block div */
    section.s-block:nth-child(8) > div:nth-child(1) {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Sets max-width for elements with class 'max--4' within brandscarousel */
    .brandscarousel .max--4 {
        max-width: 40%;
    }

    /* Margin and box shadow for custom product cards within a specific slider */
    #slider-with-bg-2 > div:nth-child(2) custom-salla-product-card {
        margin: 5px;
        -webkit-box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Webkit box shadow */
        -moz-box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Mozilla box shadow */
        box-shadow: 5px 5px 20px 3px rgba(0, 0, 0, 0.28); /* Standard box shadow */
    }

    /* Bottom margin for slider swiper wrapper */
    #slider-with-bg-2 > div:nth-child(2) .s-slider-swiper-wrapper {
        margin-bottom: 30px;
    }
}

/* Styles for extra small screens (<= 479px) */
@media(max-width: 479px) {

    /* Positions wishlist button absolutely and inverts filter */
    .products-container.gird-view .product-entry--vertical salla-button.btn--wishlist {
        position: absolute;
        top: -150px;
        right: 15px;
        filter: invert(1); /* Inverts filter */
    }

    /* Centers items in the footer middle */
    .footer-middle {
        align-items: center;
    }

    /* Hides the language selector */
    .language-selector-custom {
        display: none;
    }

    /* Resets margin for large header buttons */
    .is_large .header-btn {
        margin: initial; /* Resets margin */
    }
}

/* Styles for screens <= 1024px */
@media (max-width: 1024px) {

    /* Hides elements with class 'headerbuttonprojects' */
    .headerbuttonprojects {
        display: none;
    }
}