/* =====================================================
   Nano Bamboo Full Custom CSS
   Brand Colors + Saudi Font + Splash Logo + Normal Header Logo
===================================================== */


/*------------------ Saudi Official Font -------------------*/
body,
*:not(i)
{
    font-family: 'Saudi', 'SaudiWeb', Arial, sans-serif !important;
}
/*----------------- End of Saudi Official Font ---------------*/


:root
{
    --primary-color: #2F6B4F !important;        /* Bamboo Green */
    --secondary-color: #37B8A6 !important;      /* Nano Turquoise */
    --cream-color: #F5F1E8 !important;          /* Soft Bamboo Cream */
    --font-color: #1F2A24 !important;           /* Deep Natural Charcoal */
    --white-color: #FFFFFF !important;

    --linear-gradient: linear-gradient(to left, var(--primary-color), var(--secondary-color)) !important;
    --soft-gradient: linear-gradient(135deg, #F5F1E8 0%, #FFFFFF 45%, #EAF7F4 100%) !important;
    --card-shadow: 0 8px 24px rgba(31, 42, 36, 0.08);

    /* Nano Bamboo Loading Logo - New Image */
    --splash-logo-url: url(https://cdn.files.salla.network/theme/1052465712/7f5729bc-22aa-444b-b190-afa71ed29bc3.webp);
}


/*------------------- Global Style ------------------*/
body,
.s-block--logos-slider,
.s-block--features
{
    background: var(--cream-color) !important;
    color: var(--font-color) !important;
}

a
{
    transition: all .25s ease-in-out;
}

img
{
    transition: all .25s ease-in-out;
}
/*--------------- End of Global Style ---------------*/


/*------------------- Splash Screen / Loading Page ------------------*/
.index::before
{
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid var(--secondary-color) !important;
    background: var(--white-color) var(--splash-logo-url);
    position: fixed;
    z-index: 9999999999999 !important;
    transform: scale(0);
    background-size: 26% !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: splash;
    animation-duration: 1.6s;
}
/*--------------- End of Splash Screen ---------------*/


/*---------------------- Header ----------------------*/
.s-header,
.main-nav-container,
.store-header
{
    background: var(--white-color) !important;
    box-shadow: 0 4px 18px rgba(31, 42, 36, 0.06);
}

.s-cart-summary-total,
.s-user-menu-trigger,
.sicon-shopping-bag,
.sicon-user-circle,
.sicon-menu
{
    color: var(--primary-color) !important;
}
/*------------------ End of Header -------------------*/


/*---------------------- Banner ----------------------*/
.banner--fixed img
{
    margin-top: 15px;
    position: relative;
    animation: up-down 8s ease infinite;
    border-radius: 18px;
}
/*------------------ End of Banner -------------------*/


/*-------------------- Categories --------------------*/
.banner-square .rounded-full
{
    background: var(--white-color) !important;
    box-shadow: var(--card-shadow);
}

.banner-square .rounded-full:hover
{
    transform: scale(1.04);
    margin: 10px auto;
    border: 1px solid var(--secondary-color);
}
/*---------------- End of Categories -----------------*/


/*--------------------- Section Titles ---------------------*/
.s-block__title h2,
.angel-feature h4,
.s-slider-block__title h2
{
    color: var(--font-color);
    font-size: 1.35rem;
    font-weight: 700 !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: var(--primary-color);
    text-transform: none;
    background-image: linear-gradient(
        -225deg,
        var(--primary-color) 0%,
        var(--secondary-color) 50%,
        var(--font-color) 100%
    );
    background-size: 200% auto;
    animation: textclip 8s linear infinite;
    padding: 5px 0;
}

.s-block__title p,
.s-slider-block__title p
{
    color: var(--font-color) !important;
    opacity: .8;
}
/*----------------- End of Section Titles ------------------*/


/*--------------------- Highlight Sections ---------------------*/
section:nth-of-type(5)
{
    background:
        linear-gradient(0deg, var(--cream-color), rgba(245, 241, 232, 0) 100%),
        linear-gradient(90deg, rgba(47, 107, 79, 0.16), rgba(55, 184, 166, 0) 90.71%),
        linear-gradient(180deg, rgba(55, 184, 166, 0.12), var(--cream-color) 70.71%);
    border-radius: 24px;
}

section:nth-of-type(11)
{
    background:
        linear-gradient(0deg, var(--white-color), rgba(255, 255, 255, 0) 100%),
        linear-gradient(90deg, rgba(55, 184, 166, 0.16), rgba(47, 107, 79, 0) 90.71%),
        linear-gradient(180deg, rgba(47, 107, 79, 0.12), var(--white-color) 70.71%);
    border-radius: 24px;
}

section:nth-of-type(5) .s-block__title h2,
section:nth-of-type(5) .s-slider-block__title h2
{
    -webkit-text-fill-color: var(--primary-color);
    background-size: 200% auto;
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
}

section:nth-of-type(11) .s-block__title h2,
section:nth-of-type(11) .s-slider-block__title h2
{
    -webkit-text-fill-color: var(--secondary-color);
    background-size: 200% auto;
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
}
/*----------------- End of Highlight Sections ------------------*/


/*--------------------- Products ---------------------*/
.s-product-card-entry
{
    background: var(--white-color) !important;
    border-radius: 18px !important;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border: 1px solid rgba(47, 107, 79, 0.08);
}

.s-product-card-entry:hover
{
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(31, 42, 36, 0.12);
    border-color: rgba(55, 184, 166, 0.35);
}

.s-product-card-content-title.font-primary a
{
    color: var(--font-color) !important;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1.7;
}

.s-product-card-brand,
.s-product-card-category
{
    color: var(--white-color) !important;
    font-size: 11px;
    font-weight: 700 !important;
    background-color: var(--primary-color);
    border-radius: 8px;
    padding: 3px 7px;
}

.s-product-card-price,
.s-product-card-sale-price h4
{
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.s-product-card-content-footer salla-add-product-button .s-button-primary,
.s-product-card-content salla-add-product-button .s-button-primary
{
    color: var(--white-color) !important;
    background: var(--primary-color) !important;
    border-radius: 12px !important;
    border: none !important;
}

.s-product-card-content-footer salla-add-product-button .s-button-primary:hover,
.s-product-card-content salla-add-product-button .s-button-primary:hover
{
    background: var(--secondary-color) !important;
    color: var(--font-color) !important;
}

.s-product-card-content salla-add-product-button .s-button-text
{
    color: var(--white-color) !important;
}

.s-product-card-wishlist-btn
{
    color: var(--primary-color) !important;
    font-size: 16px;
    font-weight: 700 !important;
    background: rgba(245, 241, 232, .9) !important;
    border-radius: 50%;
}

.s-quantity-input-button svg
{
    fill: var(--font-color) !important;
}

.vertical-lines
{
    background: var(--secondary-color);
}
/*----------------- End of Products ------------------*/


/*----------------- Products Details -----------------*/
.product-single
{
    background: var(--white-color) !important;
}

.product-single .text-gray-400
{
    color: var(--secondary-color) !important;
}

.s-block--payment
{
    background-color: var(--cream-color) !important;
    border-radius: 18px;
    border: 1px solid rgba(47, 107, 79, .12);
}

.tabs .tab-trigger.is-active,
.product-single salla-add-product-button .s-button-text,
.s-button-primary,
.s-button-primary:hover,
.s-button-primary-outline,
.s-button-primary-outline:hover
{
    color: var(--white-color) !important;
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 12px !important;
}

.s-button-primary:hover,
.s-button-primary-outline:hover
{
    background: var(--secondary-color) !important;
    color: var(--font-color) !important;
    border-color: var(--secondary-color) !important;
}

.tabs__product .tab-trigger
{
    color: var(--font-color) !important;
}

.tabs__product .tab-trigger.is-active
{
    color: var(--primary-color) !important;
    border-color: var(--secondary-color) !important;
}

.s-count-down-md .s-count-down-item
{
    color: var(--font-color);
    background: var(--cream-color);
    border: 1px solid rgba(55, 184, 166, .35);
    border-radius: 12px;
}
/*------------- End of Products Details --------------*/


/*----------------------- Cart -----------------------*/
.cart .leading-6 a
{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 700 !important;
}

.cart .text-gray-400
{
    color: var(--secondary-color) !important;
    font-size: 16px;
    font-weight: 700 !important;
}

.cart .btn--wishlist,
.cart .btn--wishlist:hover
{
    color: var(--white-color);
    background: var(--primary-color);
    border-radius: 12px;
}
/*------------------- End of Cart --------------------*/


/*-------------------- Buttons / Borders --------------------*/
.border-transparent
{
    color: var(--primary-color);
    background: transparent !important;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
}

.sicon-add::before
{
    color: var(--primary-color) !important;
}
/*---------------- End of Buttons / Borders -----------------*/


/*------------------- FAQs -------------------*/
.faq-container .faq-item
{
    background-color: var(--white-color) !important;
    border-radius: 16px;
    border: 1px solid rgba(47, 107, 79, .12);
    box-shadow: var(--card-shadow);
}

.faq-container:hover .faq-item
{
    background-color: var(--cream-color) !important;
}

.s-block--faqs .faqs-list input + div label
{
    color: var(--font-color);
    font-weight: 700 !important;
}

.faq-container .mb-6
{
    color: var(--primary-color) !important;
    font-size: 15px;
    font-weight: 700 !important;
}
/*--------------- End of FAQs ----------------*/


/*--------------------- Features ---------------------*/
.angel-feature
{
    background: var(--white-color) !important;
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(47, 107, 79, 0.08);
}

.angel-feature h4
{
    font-size: 20px !important;
    color: var(--primary-color) !important;
}

.angel-feature p
{
    color: var(--font-color);
    font-size: 16px !important;
    font-weight: 400 !important;
    opacity: .85;
}
/*----------------- End of Features ------------------*/


/*---------------------- Footer ----------------------*/
.store-footer
{
    color: var(--white-color) !important;
    background: linear-gradient(135deg, #1F2A24 0%, #2F6B4F 55%, #37B8A6 100%) !important;
    margin-top: 2rem;
}

.store-footer .footer-container .logo-footer .foo
{
    max-height: 75px;
    max-width: 75%;
    background: var(--white-color) !important;
    border-radius: 14px;
    padding: 6px;
}

.store-footer h3
{
    color: var(--white-color) !important;
    text-align: center !important;
    font-weight: 700 !important;
}

.footer-middle .footer-list a
{
    text-align: center !important;
    color: var(--white-color) !important;
}

.store-footer .contact-links a,
.store-footer .contact-links a:hover
{
    color: var(--white-color) !important;
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
}

.bubble-show:hover .bubble
{
    color: var(--white-color) !important;
}

.store-footer .text-gray-400
{
    color: var(--white-color) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
/*------------------ End of Footer -------------------*/


/*------------------ WhatsApp Icon -------------------*/
.sicon-whatsapp2::after
{
    content: "\E917";
    text-align: center;
    cursor: pointer;
    background: #25D366;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0px;
    color: var(--white-color);
    box-shadow: #00000022 1.5px 1.5px 5px;
    width: 0px;
    height: 0px;
    border-radius: 27.5px;
    position: fixed;
    bottom: 25px;
    right: 15px;
    transform: rotate(360);
    transition: all .2s ease-in-out;
    margin-bottom: 0px !important;
}

body[style] .sicon-whatsapp2::after,
body[cz-shortcut-listen="true"] .sicon-whatsapp2::after,
i.sicon-whatsapp2::after
{
    width: 56px;
    height: 56px;
    border-radius: 32.5px;
    font-size: 30px;
    box-shadow: #0000006b 2px 2px 8px;
}

.sicon-whatsapp2:after:hover
{
    border-radius: 0;
    border: 0;
    width: 180px;
    height: 60px;
}

.sicon-whatsapp2:hover::after
{
    content: "حاب نساعدك؟ 😃";
    width: 210px !important;
    animation: trns 1s;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
/*-------------- End of WhatsApp Icon ----------------*/


/* =====================================================
   Normal Header Logo Fix
===================================================== */

/* ضبط ارتفاع الهيدر بشكل طبيعي */
.s-header,
.s-header__wrapper,
.s-header__inner,
.main-nav-container,
.navbar,
.store-header
{
    min-height: 72px !important;
    height: 72px !important;
    overflow: visible !important;
}

/* منع قص اللوجو بدون تكبير مبالغ فيه */
header,
.s-header,
.s-header *,
.main-nav-container,
.main-nav-container *
{
    overflow: visible !important;
}

/* حاوية اللوجو الطبيعية */
.s-header__logo,
.s-header-logo,
.store-logo,
.navbar-brand,
.logo
{
    width: auto !important;
    max-width: 250px !important;
    min-width: auto !important;
    height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* حجم صورة اللوجو الطبيعي */
.s-header__logo img,
.s-header-logo img,
.store-logo img,
.navbar-brand img,
.logo img,
header img[src*="nano"],
header img[src*="bamboo"],
header img[alt*="Nano"],
header img[alt*="Bamboo"],
header img[alt*="نانو"],
header img[alt*="بامبو"],
.s-header img
{
    width: auto !important;
    max-width: 230px !important;
    min-width: auto !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    transform: none !important;
    transform-origin: center center !important;
}

/* ضبط تمركز الهيدر */
.main-nav-container .container,
.s-header .container,
.s-header__inner
{
    align-items: center !important;
}


/*------------------ Mobile Screens ------------------*/
@media only screen and (max-width: 767px)
{
    .index::before
    {
       background-size: 54% !important;
    }

    .s-header,
    .s-header__wrapper,
    .s-header__inner,
    .main-nav-container,
    .navbar,
    .store-header
    {
        min-height: 64px !important;
        height: 64px !important;
        overflow: visible !important;
    }

    .s-header__logo,
    .s-header-logo,
    .store-logo,
    .navbar-brand,
    .logo
    {
        width: auto !important;
        max-width: 185px !important;
        min-width: auto !important;
        height: 56px !important;
        max-height: 56px !important;
    }

    .s-header__logo img,
    .s-header-logo img,
    .store-logo img,
    .navbar-brand img,
    .logo img,
    header img[src*="nano"],
    header img[src*="bamboo"],
    header img[alt*="Nano"],
    header img[alt*="Bamboo"],
    header img[alt*="نانو"],
    header img[alt*="بامبو"],
    .s-header img
    {
        width: auto !important;
        max-width: 170px !important;
        min-width: auto !important;
        height: auto !important;
        max-height: 44px !important;
        transform: none !important;
    }

    .sidemenu-link .md\:me-4
    {
        border-radius: 8px !important;
    }

    .s-block__title h2,
    .angel-feature h4,
    .s-slider-block__title h2
    {
        font-size: 1.15rem;
    }

    .angel-feature h4
    {
        font-size: 18px !important;
    }

    .angel-feature p
    {
        font-size: 15px !important;
    }

    .store-footer::before
    {
        height: 120px;
        margin: -120px 0 0;
    }

    .sicon-whatsapp2::after
    {
        margin-bottom: 45px !important;
    }
}
/*-------------- End of Mobile Screens ---------------*/


/*------------------- Animations ---------------------*/
@keyframes scale
{
    0%,100%
    {
        transform: scale(1);
        opacity: 1;
    }

    50%
    {
        transform: scale(.9);
        opacity: .7;
    }
}

@keyframes splash
{
  0%
  {
    transform: scale(1);
  }

  20%
  {
    transform: scale(1);
  }

  80%
  {
    transform: scale(1);
  }

  100%
  {
    transform: scale(0);
  }
}

@keyframes up-down
{
    0%, 100%
    {
        top: 0;
    }

    50%
    {
        top: -18px;
    }
}

@keyframes textclip
{
    100%
    {
        background-position: 200% center;
    }
}

@keyframes color-change
{
    0%
    {
        background-color: var(--secondary-color);
    }

    50%
    {
        background-color: var(--primary-color);
    }

    100%
    {
        background: var(--linear-gradient) !important;
    }
}

@keyframes trns
{
    0%
    {
        color: #ffffff00;
    }

    100%
    {
        color: #ffffff99;
    }
}

@keyframes ShineAnimation
{
    0%
    {
      background-repeat: no-repeat;
      background-image: -webkit-linear-gradient(
        top left,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.0) 45%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.5) 52%,
        rgba(255, 255, 255, 0.0) 57%,
        rgba(255, 255, 255, 0.0) 100%
      );
      background-position: -250px -250px;
      background-size: 600px 600px;
    }

    100%
    {
      background-repeat: no-repeat;
      background-position: 250px 250px;
    }
}
/*----------------- End of Animations ----------------*/