/* =========================================================
SOFT WAVES – MASTER CSS (نسخة نهائية نظيفة)
الألوان: أزرق + تركوازي فقط
========================================================= */

:root {
--site-blue: #15468A;
--site-blue-dark: #10396F;
--site-blue-light: #3E70B5;
--site-turquoise: #2CA390;
--site-turquoise-light: #9ED6CA;
--site-turquoise-soft: #DDF3EE;
--site-white: #FFFFFF;

/* ظلال بألوان المتجر */
--shadow-blue-soft: 0 8px 24px rgba(21, 70, 138, 0.08);
--shadow-blue: 0 8px 24px rgba(21, 70, 138, 0.12);
--shadow-turquoise-soft: 0 8px 22px rgba(44, 163, 144, 0.10);
--shadow-turquoise: 0 8px 22px rgba(44, 163, 144, 0.18);
}

/* =========================================================
GLOBAL – SELECTION + SCROLLBAR
========================================================= */

::selection {
background: var(--site-blue);
color: var(--site-turquoise-light);
}

::-webkit-scrollbar {
width: 0.2rem !important;
}
::-webkit-scrollbar-track {
background: var(--site-blue);
}
::-webkit-scrollbar-thumb {
background: var(--site-turquoise-light);
border-radius: 33px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--site-turquoise);
}

html {
scrollbar-color: var(--site-turquoise-light) var(--site-blue);
scrollbar-width: thin !important;
}

/* =========================================================
PRODUCT CARDS – CLEAN
========================================================= */

.s-product-card-entry {
position: relative;
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.9s ease;
}

.s-product-card-entry:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-blue-soft);
}

.s-product-card-entry .s-product-card-image {
position: relative;
overflow: hidden;
}

.s-product-card-entry::before,
.s-product-card-entry::after,
custom-salla-product-card::before,
custom-salla-product-card::after {
display: none !important;
content: none !important;
}

.s-product-card-entry .s-product-card-image img {
transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-product-card-entry .s-product-card-image:hover img {
transform: scale(1.01);
}

.s-product-card-content,
.s-product-card-content > div {
background: var(--site-white) !important;
}

.s-product-card-content .s-product-card-content-main h3 a,
.s-product-card-entry
.s-product-card-content
.s-product-card-content-main
.s-product-card-content-title
a {
display: block !important;
height: 3rem !important;
max-height: 3rem !important;
font-size: 12px !important;
line-height: 17px !important;
overflow: hidden !important;
transition: color 0.5s ease;
}

.s-product-card-entry:hover .s-product-card-content-title a {
color: var(--site-blue) !important;
}

.s-product-card-content salla-add-product-button salla-button button {
margin: 0.8rem auto !important;
border-radius: 1rem !important;
transition:
transform 0.7s ease,
background-color 0.7s ease,
box-shadow 0.7s ease;
}

.s-product-card-content salla-add-product-button salla-button button:hover {
transform: translateY(-1px);
background: var(--site-blue-dark) !important;
box-shadow: var(--shadow-blue);
}

.s-product-card-image > salla-button button {
background: var(--site-white) !important;
transition:
transform 0.6s ease,
background-color 0.6s ease,
box-shadow 0.6s ease;
}

.s-product-card-image > salla-button button:hover {
background: var(--site-turquoise-soft) !important;
transform: scale(1.03);
box-shadow: var(--shadow-turquoise-soft);
}

.s-products-slider-card custom-salla-product-card {
background: var(--site-white) !important;
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.9s ease;
}

.s-products-slider-card custom-salla-product-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-blue-soft);
}

/* =========================================================
INSTAGRAM + FEATURE CARDS
========================================================= */

.sokar-instagram-post,
.sokar-feature-card {
position: relative;
overflow: hidden;
display: block;
}

.sokar-instagram-feed .sokar-instagram-post img {
display: block;
width: 100%;
height: 100%;
object-fit: contain !important;
transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sokar-instagram-post::before,
.sokar-feature-card::before {
content: "";
position: absolute;
top: 0;
left: -180%;
width: 38%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(158, 214, 202, 0.04) 40%,
rgba(158, 214, 202, 0.13) 50%,
rgba(158, 214, 202, 0.04) 60%,
transparent 100%
);
transform: skewX(-18deg);
transition: left 2s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 5;
pointer-events: none;
}

.sokar-instagram-post::after,
.sokar-feature-card::after {
content: "";
position: absolute;
top: 0;
left: -180%;
width: 1px;
height: 100%;
background: rgba(44, 163, 144, 0.16);
transform: skewX(-18deg);
transition: left 2s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 6;
pointer-events: none;
}

.sokar-instagram-post:hover::before,
.sokar-feature-card:hover::before {
left: 180%;
}
.sokar-instagram-post:hover::after,
.sokar-feature-card:hover::after {
left: 180%;
}

.sokar-instagram-post:hover img {
transform: scale(1.012);
}

/* =========================================================
TESTIMONIALS
========================================================= */

.s-reviews-testimonial {
background: var(--site-white) !important;
border: 1px solid var(--site-turquoise-light) !important;
border-radius: 0.8rem !important;
transition:
transform 0.8s ease,
box-shadow 0.8s ease,
border-color 0.8s ease;
}

.s-reviews-testimonial:hover {
transform: translateY(-2px);
border-color: var(--site-turquoise) !important;
box-shadow: var(--shadow-turquoise-soft);
}

/* =========================================================
PRODUCT OPTIONS
========================================================= */

.s-product-options-grid-mode input + div {
background: var(--site-blue) !important;
color: var(--site-turquoise-light) !important;
fill: var(--site-turquoise-light) !important;
}

.s-product-options-grid-mode input:checked + div {
background: var(--site-blue) !important;
color: var(--site-turquoise-light) !important;
fill: var(--site-turquoise-light) !important;
}

/* =========================================================
TABS + SLIDER TITLES
========================================================= */

.s-block--tabs-produtcs .tab-trigger,
.s-slider-block__title-right {
color: var(--site-blue) !important;
fill: var(--site-blue) !important;
}

.s-block.s-block--testimonials.s-block--custom-testimonials > div > div > h1 {
font-size: 1rem !important;
text-align: center !important;
margin: auto !important;
}

#featured-products-style2-7,
section.s-block.s-block-tabs.s-block--tabs-produtcs {
background: white !important;
}

/* =========================================================
BACKGROUNDS
========================================================= */

#main-content > div > div > salla-search > div > div > .s-search-input-wrapper > input,
.s-product-card-image > salla-button button,
.s-comments.s-comments-product,
.s-slider-block__title > div > div > button,
.sokar-main-content.main-content > form > section,
salla-product-options,
.sokar-main-content > div.mb-4.flex,
.s-product-card-content,
.s-product-card-content > div {
background: var(--color-background) !important;
}

/* =========================================================
DECORATIVE – خط + دائرة (بدون تكرار)
========================================================= */

.featured-categories-grid > div > div.flex.flex-col.gap-2.mb-8::after,
.sokar-before-and-after .sokar-before-and-after-header::after,
.sokar-text-with-photo .flex.flex-col > div::after,
.s-block.s-block--testimonials > div > div > h1::after,
.s-slider-block__title-right > h2::after,
.w-full.h-full.mb-4 > div > h2::after,
.w-full.h-full.mb-8 > div > h2::after,
.sokar-categories div.flex.flex-col::after,
.text-center.mb-16 > h2::after,
.s-reviews-header::after {
content: "";
display: block;
width: 90px;
height: 8px;
margin: 0.6rem auto 0;

background:
radial-gradient(
circle at center,
var(--site-turquoise) 3.5px,
transparent 4px
) right center / 8px 8px no-repeat,
linear-gradient(
90deg,
var(--site-blue) 0%,
var(--site-turquoise) 100%
) left center / 78px 2px no-repeat;

border-radius: 2px;
}

/* =========================================================
TESTIMONIALS HEADER – اللون + منع القص
========================================================= */

/* الـh2 نفسه (s-reviews-header) */
.s-reviews-header {
color: var(--site-blue) !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
display: block !important;
overflow: visible !important;
}

/* الحاويات الأب – منع القص */
.s-reviews-header-wrapper,
.s-reviews-container,
.s-block--custom-testimonials {
overflow: visible !important;
}

/* توسيط العناوين الجديدة */
.text-center.mb-16 > h2,
.s-slider-block__title > div.s-slider-block__title-right {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
display: block !important;
}

.s-slider-block__title {
justify-content: center !important;
text-align: center !important;
}

.s-slider-block__title-left {
display: none !important;
}

/* =========================================================
NAVIGATION
========================================================= */

.sokar-store-header nav {
padding: 1rem !important;
}

.sokar-store-header .sokar-main-nav-container .main-menu li {
position: relative !important;
padding: 8px 14px !important;
margin: 0 4px !important;
transition: all 0.4s ease !important;
}

.sokar-store-header .sokar-main-nav-container .main-menu li a {
position: relative !important;
display: inline-block !important;
padding: 0 !important;
z-index: 2 !important;
transition: color 0.3s ease !important;
color: var(--site-blue) !important;
}

.sokar-store-header .sokar-main-nav-container .main-menu li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 2px solid var(--site-turquoise-light);
border-bottom: 2px solid var(--site-turquoise-light);
border-radius: 6px;
transform: scaleY(1.5);
opacity: 0;
transition: all 0.4s ease;
z-index: 1;
pointer-events: none;
}

.sokar-store-header .sokar-main-nav-container .main-menu li::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--site-white);
border-radius: 6px;
transform: scale(0);
opacity: 0;
transition: all 0.4s ease;
z-index: 0;
pointer-events: none;
}

.sokar-store-header .sokar-main-nav-container .main-menu li:hover::before {
transform: scaleY(1);
opacity: 1;
}

.sokar-store-header .sokar-main-nav-container .main-menu li:hover::after {
transform: scale(1);
opacity: 1;
}

.sokar-store-header
.sokar-main-nav-container
.mobile-menu
.main-menu
li
a:hover::before,
.sokar-store-header
.sokar-main-nav-container
.mobile-menu
.main-menu
li
a:hover::after {
opacity: 0 !important;
}

/* =========================================================
CATEGORIES
========================================================= */

.sokar-categories-section div a {
transition: all 0.5s ease !important;
}

.sokar-categories-section div a img {
transition: all 0.5s ease !important;
background: transparent !important;
object-fit: fill !important;
background-size: cover !important;
}

.sokar-categories > div > div {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 40% !important;
max-width: 40% !important;
justify-content: center !important;
margin: auto !important;
}

/* =========================================================
SIZE GUIDE
========================================================= */

.sokar-size-guide-advanced table tbody *,
.sokar-size-guide-advanced table tbody tr,
.sokar-size-guide-advanced table tbody tr td {
color: var(--site-blue) !important;
fill: var(--site-blue) !important;
}

.sokar-size-guide-advanced
.rounded-lg
.size-guide-table-advanced
> div
> table
> tbody
> tr
> td,
#height-help-advanced-6 {
color: var(--site-turquoise) !important;
}

/* =========================================================
FOOTER – نصوص بيضة، هوفر تركوازي على الكلمة فقط
========================================================= */

footer,
footer .store-footer__inner,
footer .sokar-store-footer__inner,
footer .store-footer__inner salla-menu,
footer .store-footer__inner salla-menu:hover,
footer .sokar-store-footer__inner salla-menu,
footer .sokar-store-footer__inner salla-menu:hover,
footer .store-footer__inner salla-contacts,
footer .store-footer__inner salla-contacts:hover,
footer .sokar-store-footer__inner salla-contacts,
footer .sokar-store-footer__inner salla-contacts:hover {
color: #ffffff !important;
}

footer .store-footer__inner salla-menu a,
footer .store-footer__inner salla-contacts a,
footer .store-footer__inner salla-contacts .s-contacts-item,
footer .store-footer__inner salla-contacts .s-contacts-item *,
footer .sokar-store-footer__inner salla-menu a,
footer .sokar-store-footer__inner salla-contacts a,
footer .sokar-store-footer__inner salla-contacts .s-contacts-item,
footer .sokar-store-footer__inner salla-contacts .s-contacts-item *,
.sokar-store-footer .sokar-store-footer__inner salla-menu a,
.sokar-store-footer .sokar-store-footer__inner salla-contacts .s-contacts-item,
.sokar-store-footer
.sokar-store-footer__inner
salla-contacts
.s-contacts-item
.unicode {
color: #ffffff !important;
transition: color 0.5s ease !important;
}

footer .store-footer__inner salla-menu:hover a:not(:hover),
footer .store-footer__inner salla-contacts:hover a:not(:hover),
footer .sokar-store-footer__inner salla-menu:hover a:not(:hover),
footer .sokar-store-footer__inner salla-contacts:hover a:not(:hover),
footer
.store-footer__inner
salla-contacts:hover
.s-contacts-item:not(:hover),
footer
.store-footer__inner
salla-contacts:hover
.s-contacts-item:not(:hover)
*,
footer
.sokar-store-footer__inner
salla-contacts:hover
.s-contacts-item:not(:hover),
footer
.sokar-store-footer__inner
salla-contacts:hover
.s-contacts-item:not(:hover)
* {
color: #ffffff !important;
}

footer .store-footer__inner salla-menu a:hover,
footer .store-footer__inner salla-contacts a:hover,
footer .store-footer__inner salla-contacts .s-contacts-item:hover,
footer .store-footer__inner salla-contacts .s-contacts-item:hover *,
footer .sokar-store-footer__inner salla-menu a:hover,
footer .sokar-store-footer__inner salla-contacts a:hover,
footer .sokar-store-footer__inner salla-contacts .s-contacts-item:hover,
footer .sokar-store-footer__inner salla-contacts .s-contacts-item:hover *,
.sokar-store-footer .sokar-store-footer__inner salla-menu a:hover,
.sokar-store-footer .sokar-store-footer__inner salla-contacts .s-contacts-item:hover,
.sokar-store-footer
.sokar-store-footer__inner
salla-contacts
.s-contacts-item:hover
.unicode {
color: var(--site-turquoise-light) !important;
}

.sokar-store-header .header-search .s-search-input-wrapper .s-search-icon-wrap .s-search-icon svg,
.store-footer__inner > div > div > a > h2,
.store-footer__inner > div > div > div.flex > salla-trust-badges div {
color: var(--site-turquoise) !important;
fill: var(--site-turquoise) !important;
}

footer .sokar-store-footer__inner salla-social > ul > li > a,
#app
> div.app-inner.flex.flex-col.min-h-full
> footer
.sokar-store-footer__inner
salla-social
> ul
> li
> a {
background: linear-gradient(
135deg,
var(--site-turquoise-light) 0%,
var(--site-turquoise) 100%
) !important;
color: #ffffff !important;
transition:
background 0.6s ease,
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s ease !important;
}

footer .sokar-store-footer__inner salla-social > ul > li > a:hover,
#app
> div.app-inner.flex.flex-col.min-h-full
> footer
.sokar-store-footer__inner
salla-social
> ul
> li
> a:hover {
background: linear-gradient(
135deg,
var(--site-turquoise) 0%,
var(--site-blue) 100%
) !important;
transform: translateY(-5px) !important;
box-shadow: 0 8px 20px rgba(44, 163, 144, 0.35) !important;
}

/* =========================================================
ZINA BANNER
========================================================= */

.zina-banner {
transition: all 0.8s ease !important;
transform: scale(0.999) !important;
}

/* =========================================================
MISC BLOCKS
========================================================= */

.sokar-banner-with-text {
padding: 2rem !important;
}

.sokar-photo-text.py-0.block.block
> div
> div
> div
> div
> a.sokar-photo-text-btn-second {
min-height: unset !important;
height: unset !important;
}

.sokar-photo-text > div > div {
max-width: 90% !important;
width: 90% !important;
margin: auto !important;
}

#height-help-advanced-11,
.text-gray-500 {
color: #6B7280 !important;
}

/* =========================================================
MOBILE MENU
========================================================= */

@media (max-width: 768px) {
.mobile-menu {
background: var(--site-blue) !important;
color: var(--site-turquoise-light) !important;
}
.sokar-store-header .sokar-main-nav-container .mobile-menu .main-menu li a {
color: var(--site-turquoise-light) !important;
}
}

/* =========================================================
CATEGORIES SLIDER – MOBILE
========================================================= */

@media (max-width: 768px) {
.sokar-categories-slide,
.sokar-slider-categories .aspect-square,
.sokar-slider-categories .sokar-categories-slide {
width: 6.5rem !important;
min-width: 6.5rem !important;
margin: 0.1rem !important;
}
.sokar-slider-categories a h4 {
font-size: 0.9rem !important;
}
}

/* =========================================================
VIDEO BLOCK
========================================================= */

@media (min-width: 768px) {
.sokar-video {
display: block !important;
}
}

@media (max-width: 767px) {
.sokar-video {
display: none !important;
}
}

/* =========================================================
HOVER LIFT – WHY US / FAQ
========================================================= */

#sokar-why-us-326788718 .hover-lift:hover {
box-shadow: 0 25px 50px -12px rgba(21, 70, 138, 0.28) !important;
}

.sokar-faq .sokar-faq-item,
.s-reviews-testimonial,
.sokar-feature-card {
box-shadow:
0 10px 15px -3px rgba(21, 70, 138, 0.18),
0 4px 6px -4px rgba(44, 163, 144, 0.22) !important;
}

/* *** */

#sokar-stats-1107703235 > div > div > div ,.sokar-stats-bar > div > div > div {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}



.featured-categories-grid > div > div.flex.flex-col.gap-2.mb-8 h2,
.sokar-before-and-after .sokar-before-and-after-header,
.sokar-before-and-after .sokar-before-and-after-header h2,
.sokar-text-with-photo .flex.flex-col > div h2,
.s-block.s-block--testimonials > div > div > h1,
.s-slider-block__title-right > h2,
.w-full.h-full.mb-4 > div > h2,
.w-full.h-full.mb-8 > div > h2,
.sokar-categories div.flex.flex-col h2,
.text-center.mb-16 > h2,
.s-reviews-header {
font-size: 1.8rem !important;
}