/* استيراد خط Cairo من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/* تطبيق الخط على الموقع بالكامل */
body, h1, h2, h3, h4, h5, h6, p, a, span, .store-footer {
    font-family: 'Cairo', sans-serif !important;
}




.store-footer {
    font-family: 'Cairo', sans-serif !important;
    background-color: ##86817d!important; /* لون خلفية داكن */
    color: #86817d!important; /* نص أبيض ليتناسب مع الخلفية */
}


.footer-is-light .store-footer {
    --tw-bg-opacity: 1;
    /* background-color: rgb(0 123 245); */
    background-color: rgb(225 225 225);
    --tw-text-opacity: 1;
    color: rgb(0 57 149);
    color: rgb(0 98 255);
}

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(229, 231, 235);
}

element.style {
    height: 85px;
}
/* البنر الي فوق */
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    background-color: rgba(223, 221, 220, var(--tw-bg-opacity, 0));
}
/* لون الخلفية كاملة */
body {
    --tw-bg-opacity: 1;
    background-color: rgba(223, 221, 220, var(--tw-bg-opacity, 1));
}


.s-slider-v-centered .s-slider-block__title-nav button {
    pointer-events: auto;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(254, 119, 7);
    background-color: rgb(254, 119, 7);
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.0);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 10px 15px -3px #d1d5db, 0 4px 6px -4px #d1d5db;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
    --tw-shadow-color: #d1d5db;
    --tw-shadow: var(--tw-shadow-colored);
}



salla-slider.details-slider .swiper-slide {
    position: relative;
    border-radius: 0.375rem;
    --tw-bg-opacity: 0;
    background-color: rgba(255, 255, 255, 0);
    background-color: rgb(223, 221, 220);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(1px + 0px) #2563eb, 0 0 rgba(0,0,0,0);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
    --tw-ring-inset: inset;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(243, 244, 246, var(--tw-ring-opacity, 1));
}



.s-comments-product {
    margin-bottom: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(7 25 63);
    background-color: rgb(223 221 220);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.footer-is-light .store-footer .store-footer__inner {
    --tw-border-opacity: 1;
    border-bottom-color: rgba(229, 231, 235, 1);
    border-bottom-color: rgb(199 201 205);
    --tw-bg-opacity: 1;
    background-color: rgb(123 126 133);
    background-color: rgb(223 221 220);
}
.s-quantity-input-button {
    width: 2.75rem;
    fill: #ff7900;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.s-button-primary {
    border-width: 1px;
    border-color: #414042;
    border-color: #fe7707;
    background-color: #414042;
    background-color: #ff7b00;
    color: #ff6767;
    color: #ffffff;
}


.s-button-primary-outline {
    fill: #414042;
    fill: #ff7a00;
    color: #ff7a00;
    color: #ff7900;
}

.s-button-primary-outline:hover {
    background-color: #414042;
    background-color: #8f98cd;
    fill: #ff6767;
    fill: #8f98cd;
    color: #ff6767;
    color: #ffffff;
}


.s-quantity-input-input {
    width: 3rem;
    border-width: 4px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, 1);
    border-color: rgb(255 123 0);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    font-weight: 700;
    --tw-shadow: 0 0 rgba(0,0,0,0);
    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

salla-slider.details-slider .s-slider-container {
    border-radius: 0.375rem;
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgb(222 220 219);
}

[type='text'], input:where(:not([type])), [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #dfdddc;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 rgba(0,0,0,0);
}

.s-quantity-input-container {
    display: flex;
    height: 2.5rem;
    align-items: stretch;
    justify-content: space-around;
    border-radius: 0.375rem;
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

salla-slider.details-slider .swiper-slide {
    position: relative;
    border-radius: 0.375rem;
    --tw-bg-opacity: 0;
    background-color: rgba(255, 255, 255, 0);
    background-color: rgb(223 221 220);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(1px + 0px) #2563eb, 0 0 rgba(0,0,0,0);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
    --tw-ring-inset: inset;
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(223 221 220);
}


.s-button-light-outline {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgb(223 221 220);
    fill: #ff7b00;
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, 1);
    color: rgb(255 123 0);
}
.s-button-outline {
    border-width: 0;
    border-color: currentColor;
}

.text-primary {
    color: #414042;
    color: #ff7b00;
}

.s-button-primary:hover {
    background-color: #dfdddc;
}

.s-button-primary {
    border-width: 1px;
    border-color: #414042;
    border-color: #fe7707;
    background-color: #414042;
    background-color: #ff7b00;
    color: #ff6767;
    color: #ffffff;
}


.s-block--slider-with-bg {
    margin-top: 2rem;
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgb(223 221 220);
    padding-bottom: 2rem;
}

element.style {


.btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-width: 1px;
    color: #ffffff;
}}