/* Add custom CSS styles below */

@font-face {
    font-family: 'LamaSans';
    src: url('https://codopia.io/clients/thawbsaghiri.sa/LamaSans-BoldCondensed.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.tala-special-product .sicon-check {
    display: none !important;
}

div.main-content.w-full.md\:w-2\/4.md\:pb-16 > form > section.bg-white.p-5.rounded-md.mb-5 > div > salla-button > button {
    color: #414042 !important;
}

#salla-product-size-guide-modal > div.s-modal-wrapper > div > salla-tabs > div > div.s-tabs-header > salla-tab-header:nth-child(1) > div {
    background-color: #414042 !important;
    color: white !important;
}

.s-tabs-active {
    background-color: #414042 !important;
    color: white !important;
}

#btn-show-more {
    color: #414042 !important;
}

.tala-card salla-add-product-button {
    display: none !important;
}

.s-login-modal-link {
    color: #414042 !important;
}

#app > div > nav > div > div.tala-menu.z-50.lg\:relative.nav-menu.lg\:translate-x-0.-translate-x-full.absolute.left-0.top-0.h-screen.w-full.py-12.px-8.flex.flex-col.justify-between.gap-5.overflow-auto.lg\:px-4.lg\:py-2.duration-300.displayMenu {
    position: fixed !important;
}

#app > div > nav > div > div.tala-menu.z-50.lg\:relative.nav-menu.lg\:translate-x-0.-translate-x-full.absolute.left-0.top-0.h-screen.w-full.py-12.px-8.flex.flex-col.justify-between.gap-5.overflow-auto.lg\:px-4.lg\:py-2.duration-300.displayMenu > ul {
    padding: 0 !important;
}

#app > div > nav > div > div.tala-menu.z-50.lg\:relative.nav-menu.lg\:translate-x-0.-translate-x-full.absolute.left-0.top-0.h-screen.w-full.py-12.px-8.flex.flex-col.justify-between.gap-5.overflow-auto.lg\:px-4.lg\:py-2.duration-300.displayMenu > div {
    height: 100% !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > div > div.container.lg\:mb-24 > div > div > div > div.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 > div > salla-button > button {
    color: #414042 !important;
}

.tala-title ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.tala-title ul li {
    white-space: nowrap;
    align-items: center;
}

.main-content {
    display: flex;
    flex-direction: column-reverse;
}

.s-button-element.s-button-btn {
    background: black !important;
    color: white !important;
}

@media (max-width: 1023px) {
    html, body {
        padding-top:40px !important;
    }

    nav.tala-header {
        position: fixed !important;
        z-index: 100;
    }

    .tala-icon-search, .tala-icon-shooping-bag,.tala-icon-user,.tala-icon-menu,.s-user-menu-trigger {
        padding-bottom: 0rem;
        border-bottom-width: 0px;
    }

    .tala-header img {
        margin-bottom:10px;
    }

    .tala-header > div.flex.w-full.h-24 {
        height:2rem;
    }
    
    body.modal-is-open .sticky-buy-button-container {
        display: none !important;
    }

    /* Styles for the outer full-screen search overlay */
 /*.page-search {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999 !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
    }

    .page-search > div:nth-child(1) {
        width: 100% !important;
        max-height: 40vh !important;
        height: auto !important;
        overflow-y: auto !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: white !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        box-sizing: border-box !important;
        transform: translateY(0) !important;
    }

    .page-search .my-6.w-8\/12 {
        width: auto !important;
        max-width: 120px !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
    }

    .page-search .my-12 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    body.search-active {
        overflow: hidden !important;
    }

    .page-search.visible + body {
        overflow: hidden !important;
    }

    .page-search label.flex.justify-between {
        padding-top: 0 !important;
    }*/
} 

.video-content > div[style*="margin-top: 2rem;"] > a {
    font-size: 24px !important;
    border-radius:50px;
    background:#D8BAB2;
  color: #9F735F;
  font-weight: bold;
   font-family: 'LamaSans';
   padding-top:13px !important;
}

.tala-button{
 color:#D8BAB2 !important;
  background: #9F735F !important;
font-size: 24px !important;
font-weight: bold;
 font-family: 'LamaSans';
 padding-top:20px;
}

/* Base styles for the sticky button container */
.sticky-buy-button-container {
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    width: 90%;
    max-width: 400px;
}

/* Default to LTR (English) positioning - centered or right */
/* This will apply when no specific language class is added or for English */
.sticky-buy-button-container.lang-en {
    left: 50%;
    transform: translateX(-50%); /* For centering on smaller screens */
}

/* For Arabic (RTL) positioning - centered or left */
.sticky-buy-button-container.lang-ar {
    left: 50%;
    transform: translateX(-50%); /* For centering on smaller screens */
}

/* Media query for larger screens (e.g., desktop)*/  

/* @media (min-width: 1024px) {
   .sticky-buy-button-container.lang-en {
        left: unset; 
        right: 32px; 
        transform: none; 
        width: auto;
        min-width: 150px;
    }
    .sticky-buy-button-container.lang-ar {
        right: unset;
        left: 32px; 
        transform: none;
        width: auto;
        min-width: 150px;
    }
}
*/

 @media (min-width: 1024px) {
   .sticky-buy-button-container.lang-en {
       display:none;
    }
    .sticky-buy-button-container.lang-ar {
        display:none;
    }
}


/* Existing button styling (no change here for positioning) */
.buy-now-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: #000000; /* Black background as per image */
    color: #FFFFFF; /* White text as per image */
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 50px; /* Highly rounded corners for a pill shape */
    transition: background-color 0.3s ease;
    font-family: 'LamaSans';
}

.buy-now-button:hover {
    background-color: #333333; /* Slightly lighter black on hover */
}

/* --- Styles for the Hero Section Button --- */
#hero-shop-now-button {
    padding: 18px 40px;
    font-size: 24px;
    font-weight: bold;
    background-color: #77A2B3;
    color: #ffff;
    border-radius: 0;
    transition: none;
    text-align: center;
    text-decoration: none;
    font-family: 'LamaSans';
    margin-top: 50px;
    border-radius:50px;
    padding-top:22px;
}

.s-add-product-button-main .s-product-options-grid-mode input:checked + div {
    background-color: black !important;
}

.video-content h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* A subtle shadow: 2px horizontal, 2px vertical, 4px blur, 50% black */
}

.video-content h3 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* A lighter shadow for the subheading */
}

.s-product-options-grid-mode input:checked + div{
    background-color: black !important;
    color: white !important;
}

.product-single salla-mini-checkout-widget {
  display: none;
}

.product-single salla-quick-order {
  display: none;
}

.tala-categories{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.tala-categories > div {
  border-radius:10px;
}

.tala-categories .relative.overflow-hidden p {
  background:none;
}