/* ======================================================
   KESSAA FINAL THEME - HARD OVERRIDE
   Primary Purple: #6F5BAE
   Light Lavender Background: #F5F2FF
   Text: #222222
   White: #FFFFFF
   WhatsApp: #25D366
====================================================== */

:root {
  --kessaa-primary: #6F5BAE;
  --kessaa-primary-dark: #5F4BA2;
  --kessaa-bg: #F5F2FF;
  --kessaa-white: #FFFFFF;
  --kessaa-text: #222222;
  --kessaa-muted: #666666;
  --kessaa-border: rgba(111, 91, 174, 0.18);
  --whatsapp-green: #25D366;
}

/* ======================================================
   1) GLOBAL BACKGROUND - كل خلفيات الموقع
====================================================== */

html,
body,
#__next,
#root,
.app,
.app_container,
.layout,
.layout_container,
.page,
.page_container,
.page_content,
.content,
.content_container,
main,
section,
article,
aside,
.home_container,
.home_page,
.category_page,
.categories_page,
.collections_page,
.products_page,
.product_page,
.cart_page,
.checkout_page,
.thank_you_page,
.thankyou_page,
.success_page,
.payment_page,
.shipping_page,
.container,
.container_class,
.home_products_grid_container,
.products_grid_container,
.category_products_grid_container,
.checkout_container,
.cart_container,
order_success_container,
.order_success_container {
  background-color: var(--kessaa-bg) !important;
  color: var(--kessaa-text) !important;
}

/* منع أي فراغ أبيض عام */
body > div,
body > div > div,
main > div,
section > div {
  background-color: var(--kessaa-bg) !important;
}

/* ======================================================
   2) HEADER - الهيدر بنفس لون الفوتر
====================================================== */

header,
.default_header,
.header,
.navbar,
.navbar_container,
.header_container,
.default_header_container,
.store_header,
.store_header_container,
.header-wrapper,
.header_wrapper,
.site_header,
.main_header,
.top_header {
  background-color: var(--kessaa-primary) !important;
  color: var(--kessaa-white) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(111, 91, 174, 0.18) !important;
}

/* كل ما داخل الهيدر */
header *,
.default_header *,
.header *,
.navbar *,
.navbar_container *,
.header_container *,
.default_header_container *,
.store_header *,
.store_header_container *,
.header-wrapper *,
.header_wrapper *,
.site_header *,
.main_header *,
.top_header * {
  background-color: transparent !important;
  color: var(--kessaa-white) !important;
}

/* روابط وأيقونات الهيدر */
header a,
.default_header a,
.header a,
.navbar a,
.header_container a,
.default_header_container a,
.store_header a {
  color: var(--kessaa-white) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

header svg,
.default_header svg,
.header svg,
.navbar svg,
.header_container svg,
.default_header_container svg {
  color: var(--kessaa-white) !important;
  stroke: var(--kessaa-white) !important;
  fill: none !important;
}

/* ======================================================
   3) CATEGORY BAR UNDER HEADER
   البار اللي تحت اللوجو / تحت الهيدر
   خلفيته لافندر فاتح
====================================================== */

nav,
.menu,
.main_menu,
.categories_nav,
.categories_bar,
.category_bar,
.default_categories,
.default_categories_bar,
.default_header_categories,
.header_categories,
.header_menu,
.navigation,
.navigation_bar,
.nav_menu,
.store_categories,
.store_categories_menu,
.mobile_categories,
.desktop_categories {
  background-color: var(--kessaa-bg) !important;
  color: var(--kessaa-text) !important;
  border-bottom: 1px solid var(--kessaa-border) !important;
  box-shadow: none !important;
}

/* كل الطبقات الداخلية لبار الأقسام */
nav *,
.menu *,
.main_menu *,
.categories_nav *,
.categories_bar *,
category_bar *,
.category_bar *,
.default_categories *,
.default_categories_bar *,
.default_header_categories *,
.header_categories *,
.header_menu *,
.navigation *,
.navigation_bar *,
.nav_menu *,
.store_categories *,
.store_categories_menu *,
.mobile_categories *,
.desktop_categories * {
  background-color: transparent !important;
  color: var(--kessaa-text) !important;
}

/* روابط الأقسام */
nav a,
.menu a,
.main_menu a,
.categories_nav a,
.categories_bar a,
.category_bar a,
.default_categories a,
.default_categories_bar a,
.default_header_categories a,
.header_categories a,
.header_menu a,
.navigation a,
.navigation_bar a,
.nav_menu a,
.store_categories a,
.store_categories_menu a,
.mobile_categories a,
.desktop_categories a {
  color: var(--kessaa-text) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transition: all 0.25s ease !important;
  font-weight: 700 !important;
}

/* إلغاء الـ underline الأبيض */
nav a::after,
.menu a::after,
.main_menu a::after,
.categories_nav a::after,
.categories_bar a::after,
.category_bar a::after,
.default_categories a::after,
.default_categories_bar a::after,
.default_header_categories a::after,
.header_categories a::after,
.header_menu a::after,
.navigation a::after,
.navigation_bar a::after,
.nav_menu a::after,
.store_categories a::after,
.store_categories_menu a::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: none !important;
}

/* Hover على الأقسام = مستطيل بنفسجي */
nav a:hover,
.menu a:hover,
.main_menu a:hover,
.categories_nav a:hover,
.categories_bar a:hover,
.category_bar a:hover,
.default_categories a:hover,
.default_categories_bar a:hover,
.default_header_categories a:hover,
.header_categories a:hover,
.header_menu a:hover,
.navigation a:hover,
.navigation_bar a:hover,
.nav_menu a:hover,
.store_categories a:hover,
.store_categories_menu a:hover,
.mobile_categories a:hover,
.desktop_categories a:hover {
  background-color: var(--kessaa-primary) !important;
  color: var(--kessaa-white) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* القسم النشط */
nav a.active,
nav a[aria-current="page"],
.menu a.active,
.menu a[aria-current="page"],
.categories_bar a.active,
.categories_bar a[aria-current="page"],
.category_bar a.active,
.category_bar a[aria-current="page"],
.default_categories a.active,
.default_categories a[aria-current="page"],
.header_categories a.active,
.header_categories a[aria-current="page"],
.navigation a.active,
.navigation a[aria-current="page"] {
  background-color: var(--kessaa-primary) !important;
  color: var(--kessaa-white) !important;
  border-bottom: none !important;
}

/* ======================================================
   4) PRODUCT CARDS
   خلفية كروت المنتجات وخلفية التيكست
====================================================== */

.default_product_list_card,
.home_products_grid_card,
.products_grid_card,
.product_card,
.product-list-card,
.product_card_container,
.category_product_card {
  background-color: var(--kessaa-bg) !important;
  color: var(--kessaa-text) !important;
  border: 1px solid var(--kessaa-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(111, 91, 174, 0.08) !important;
  overflow: hidden !important;
}

/* خلفية منطقة بيانات المنتج */
.default_product_list_card div,
.home_products_grid_card div,
.products_grid_card div,
.product_card div,
.product-list-card div,
.product_card_container div,
.category_product_card div {
  background-color: var(--kessaa-bg) !important;
}

/* الصور نفسها تفضل بيضاء/نظيفة لو لها كونتينر */
.default_product_list_card img,
.home_products_grid_card img,
.products_grid_card img,
.product_card img,
.product-list-card img,
.product_card_container img,
.category_product_card img {
  background-color: var(--kessaa-white) !important;
}

/* اسم وسعر المنتج */
.product_name,
.product_title,
.card_title,
.default_product_list_card .product_name,
.home_products_grid_card .product_name,
.products_grid_card .product_name {
  color: var(--kessaa-text) !important;
  background-color: var(--kessaa-bg) !important;
  font-weight: 700 !important;
}

.product_price,
.price,
.card_price,
.default_product_list_card .product_price,
.home_products_grid_card .product_price,
.products_grid_card .product_price {
  color: var(--kessaa-primary) !important;
  background-color: var(--kessaa-bg) !important;
  font-weight: 800 !important;
}

/* ======================================================
   5) PRODUCT DETAILS / CART / CHECKOUT / THANK YOU
====================================================== */

.product_details,
.product_details_container,
.product_info,
.product_description,
.product_content,
.cart_container,
.cart_page,
.cart_items,
.cart_item,
.checkout_container,
.checkout_page,
.checkout_card,
.order_summary,
.summary_card,
.thank_you_page,
.thankyou_page,
.success_page,
.order_success_container {
  background-color: var(--kessaa-bg) !important;
  color: var(--kessaa-text) !important;
}

/* النصوص داخل الصفحات */
.product_details *,
.product_details_container *,
.product_info *,
.product_description *,
.product_content *,
.cart_container *,
.checkout_container *,
thank_you_page *,
.thank_you_page *,
.thankyou_page *,
.success_page *,
.order_success_container * {
  color: var(--kessaa-text) !important;
}

/* ======================================================
   6) TITLES
====================================================== */

.home_section_top_title,
.section_title,
.category_title,
.page_title,
.products_title,
.product_page_title {
  color: var(--kessaa-primary) !important;
  background-color: transparent !important;
  font-weight: 800 !important;
}

/* ======================================================
   7) BUTTONS / ADD TO CART
====================================================== */

button,
.checkout_btn,
.add_to_cart_btn,
.form_checkout_btn,
.buy_now_btn,
.cart_btn,
.product_add_to_cart_btn,
.submit_btn,
.btn-primary,
.primary_btn,
a.button,
a.btn {
  background-color: var(--kessaa-primary) !important;
  color: var(--kessaa-white) !important;
  border: 1px solid var(--kessaa-primary) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

/* النص داخل الأزرار */
button *,
.checkout_btn *,
.add_to_cart_btn *,
.form_checkout_btn *,
.buy_now_btn *,
.cart_btn *,
.product_add_to_cart_btn *,
.submit_btn *,
.btn-primary *,
.primary_btn *,
a.button *,
a.btn * {
  color: var(--kessaa-white) !important;
}

/* Hover الأزرار */
button:hover,
.checkout_btn:hover,
.add_to_cart_btn:hover,
.form_checkout_btn:hover,
.buy_now_btn:hover,
.cart_btn:hover,
.product_add_to_cart_btn:hover,
.submit_btn:hover,
.btn-primary:hover,
.primary_btn:hover,
a.button:hover,
a.btn:hover {
  background-color: var(--kessaa-primary-dark) !important;
  border-color: var(--kessaa-primary-dark) !important;
  color: var(--kessaa-white) !important;
}

/* ======================================================
   8) INPUTS
====================================================== */

input,
textarea,
select,
.global_input,
.global_textarea {
  background-color: var(--kessaa-white) !important;
  color: var(--kessaa-text) !important;
  border: 1px solid rgba(111, 91, 174, 0.35) !important;
  border-radius: 8px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--kessaa-muted) !important;
}

/* ======================================================
   9) FOOTER
====================================================== */

footer,
.default_footer,
.footer,
.footer_container,
.store_footer {
  background-color: var(--kessaa-primary) !important;
  color: var(--kessaa-white) !important;
}

footer *,
.default_footer *,
.footer *,
.footer_container *,
.store_footer * {
  background-color: transparent !important;
  color: var(--kessaa-white) !important;
}

footer a,
.default_footer a,
.footer a,
.footer_container a,
.store_footer a,
.default_footer_link {
  color: var(--kessaa-white) !important;
  text-decoration: none !important;
}

footer a:hover,
.default_footer a:hover,
.footer a:hover,
.footer_container a:hover,
.store_footer a:hover,
.default_footer_link:hover {
  color: var(--kessaa-bg) !important;
}

/* ======================================================
   10) SLIDER
====================================================== */

.swiper,
.swiper-wrapper,
.swiper-slide {
  background-color: var(--kessaa-bg) !important;
}

.swiper-pagination-bullet {
  background-color: rgba(111, 91, 174, 0.35) !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--kessaa-primary) !important;
}

/* ======================================================
   11) WHATSAPP FLOATING BUTTON - يرجع أخضر
====================================================== */

#chat-widget-wa {
  background: transparent !important;
  background-color: transparent !important;
  z-index: 9999999 !important;
}

#chat-widget-wa,
#chat-widget-wa * {
  background-image: none !important;
}

/* الزر نفسه */
#chat-widget-wa > div,
#chat-widget-wa div[style] {
  background: var(--whatsapp-green) !important;
  background-color: var(--whatsapp-green) !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28) !important;
}

/* النص والأيقونة داخل زر الواتساب */
#chat-widget-wa > div *,
#chat-widget-wa div[style] *,
#chat-widget-wa svg,
#chat-widget-wa svg *,
#chat-widget-wa path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Hover الواتساب */
#chat-widget-wa:hover > div,
#chat-widget-wa:hover div[style] {
  background: #1EBE5D !important;
  background-color: #1EBE5D !important;
  color: #FFFFFF !important;
}

/* منع كود الأزرار العام من ضرب الواتساب */
#chat-widget-wa button,
#chat-widget-wa a,
#chat-widget-wa .btn,
#chat-widget-wa .button {
  background-color: var(--whatsapp-green) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* ======================================================
   KESSAA FIX: CATEGORY BAR UNDER HEADER
   يخلي بار الأقسام لافندر فاتح وليس بنفسجي
====================================================== */

/* استهداف البار اللي تحت الهيدر مباشرة */
header + div,
.default_header + div,
.header + div,
.store_header + div,
.site_header + div,
.main_header + div {
  background-color: #F5F2FF !important;
  color: #222222 !important;
  border-bottom: 1px solid rgba(111, 91, 174, 0.18) !important;
  box-shadow: none !important;
}

/* كل العناصر داخله */
header + div *,
.default_header + div *,
.header + div *,
.store_header + div *,
.site_header + div *,
.main_header + div * {
  background-color: transparent !important;
  color: #222222 !important;
}

/* روابط الأقسام داخل البار */
header + div a,
.default_header + div a,
.header + div a,
.store_header + div a,
.site_header + div a,
.main_header + div a {
  color: #222222 !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

/* إلغاء الخط الأبيض */
header + div a::after,
.default_header + div a::after,
.header + div a::after,
.store_header + div a::after,
.site_header + div a::after,
.main_header + div a::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: none !important;
}

/* Hover مستطيل بنفسجي */
header + div a:hover,
.default_header + div a:hover,
.header + div a:hover,
.store_header + div a:hover,
.site_header + div a:hover,
.main_header + div a:hover {
  background-color: #6F5BAE !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* القسم النشط */
header + div a.active,
header + div a[aria-current="page"],
.default_header + div a.active,
.default_header + div a[aria-current="page"],
.header + div a.active,
.header + div a[aria-current="page"],
.store_header + div a.active,
.store_header + div a[aria-current="page"],
.site_header + div a.active,
.site_header + div a[aria-current="page"],
.main_header + div a.active,
.main_header + div a[aria-current="page"] {
  background-color: #6F5BAE !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
}

/* ======================================================
   KESSAA FINAL SMALL FIX
   Category bar hover = Lavender on Purple Header
====================================================== */

/* روابط بار الأقسام */
nav a:hover,
.menu a:hover,
.main_menu a:hover,
.categories_nav a:hover,
.categories_bar a:hover,
.category_bar a:hover,
.default_categories a:hover,
.default_categories_bar a:hover,
.default_header_categories a:hover,
.header_categories a:hover,
.header_menu a:hover,
.navigation a:hover,
.navigation_bar a:hover,
.nav_menu a:hover,
.store_categories a:hover,
.store_categories_menu a:hover,
.mobile_categories a:hover,
.desktop_categories a:hover,
header + div a:hover,
.default_header + div a:hover,
.header + div a:hover,
.store_header + div a:hover,
.site_header + div a:hover,
.main_header + div a:hover {
  background-color: #F5F2FF !important;
  color: #6F5BAE !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* لو القسم النشط واخد بنفسجي، خليه لافندر برضو */
nav a.active,
nav a[aria-current="page"],
.menu a.active,
.menu a[aria-current="page"],
.categories_bar a.active,
.categories_bar a[aria-current="page"],
.category_bar a.active,
.category_bar a[aria-current="page"],
.default_categories a.active,
.default_categories a[aria-current="page"],
.header_categories a.active,
.header_categories a[aria-current="page"],
.navigation a.active,
.navigation a[aria-current="page"],
header + div a.active,
header + div a[aria-current="page"],
.default_header + div a.active,
.default_header + div a[aria-current="page"],
.header + div a.active,
.header + div a[aria-current="page"] {
  background-color: #F5F2FF !important;
  color: #6F5BAE !important;
  border-bottom: none !important;
}

/* مخصوص للبار اللي كلاسه Tailwind */
.h-full.w-full.flex.justify-center.items-center.gap-8 a:hover,
.h-full.w-full.flex.justify-center.items-center.gap-8 a.hover\:underline:hover {
  background-color: #F5F2FF !important;
  color: #6F5BAE !important;
  text-decoration: none !important;
  border-bottom: none !important;
}