/* =========================================
   NEW LOOK CLINIC
   SAUDI NATIONAL DAY 96
   FINAL LIGHT THEME + FIXED TOP BAR
   ========================================= */

:root{
  --nl-green:#0a6a4c;
  --nl-green-dark:#07523c;
  --nl-green-soft:#edf7ef;
  --nl-green-soft-2:#f6fbf7;

  --nl-gold:#c9a45c;
  --nl-gold-light:#e4c98d;

  --nl-cream:#fbf8f2;
  --nl-white:#ffffff;

  --nl-text:#163b31;
  --nl-text-soft:#6f756f;
  --nl-border:#e8dfd2;
}

/* =========================================
   GENERAL BACKGROUND
   ========================================= */

html,
body,
main,
.page-wrapper,
.store-page,
.main-content,
.page-content,
.content-wrapper,
[class*="main-content"],
[class*="content-wrapper"]{
  background:
    linear-gradient(
      180deg,
      #f8fbf7 0%,
      #eef7ef 42%,
      #f7f3ea 100%
    ) !important;

  color:var(--nl-text) !important;
}

/* =========================================
   GLOBAL TEXT
   ========================================= */

body{
  color:var(--nl-text) !important;
}

p,
span,
div,
small,
li,
label{
  color:inherit;
}

.subtitle,
.description,
small,
.text-muted{
  color:var(--nl-text-soft) !important;
}

/* =========================================
   TITLES
   ========================================= */

h1,
h2,
h3,
h4,
h5,
.section-title,
.title{
  color:var(--nl-green-dark) !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

/* =========================================
   HEADER
   ========================================= */

header,
.site-header,
.store-header,
.main-header,
.header,
[class*="header"]{
  background:#fffdf8 !important;
  background-color:#fffdf8 !important;

  border-bottom:
    1px solid rgba(201,164,92,.35) !important;

  box-shadow:
    0 4px 16px rgba(0,0,0,.05) !important;

  opacity:1 !important;

  z-index:99999 !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

header > div,
.site-header > div,
.store-header > div,
.main-header > div,
[class*="header"] > div{
  background:#fffdf8 !important;
}

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

nav,
.navbar,
.main-menu,
.navigation,
.nav-menu,
[class*="navbar"],
[class*="navigation"],
[class*="menu"]{
  background:#fffdf8 !important;
  background-color:#fffdf8 !important;

  opacity:1 !important;

  z-index:99999 !important;

  border-bottom:
    1px solid rgba(201,164,92,.30) !important;

  box-shadow:
    0 3px 10px rgba(0,0,0,.03) !important;
}

nav ul,
nav li,
.navbar > div,
.main-menu > div,
.navigation > div{
  background:transparent !important;
}

header a,
nav a,
.navbar a,
.main-menu a,
.navigation a,
.nav-menu a,
[class*="menu"] a,
[class*="nav"] a{
  color:var(--nl-green-dark) !important;
  font-weight:700 !important;
  transition:.25s ease !important;
}

header a:hover,
nav a:hover,
.navbar a:hover,
.main-menu a:hover,
.navigation a:hover{
  color:var(--nl-gold) !important;
}

/* =========================================
   MAIN SECTIONS
   ========================================= */

section{
  position:relative;
  background:transparent !important;
}

.products-section,
.categories-section,
.featured-products,
.collection-section,
.home-section,
.content-section{
  background:
    linear-gradient(
      180deg,
      #fffefd 0%,
      #fbf8f2 100%
    ) !important;

  border:
    1px solid var(--nl-border) !important;

  border-radius:20px !important;

  padding:24px !important;

  margin-bottom:24px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.04) !important;

  overflow:hidden !important;
}

/* =========================================
   PRODUCT / CATEGORY CARDS
   ========================================= */

.product-card,
.product-item,
.product-block,
.category-card,
.card{
  background:#fffdfa !important;

  border:
    1px solid #e7dece !important;

  border-radius:16px !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.05) !important;

  overflow:hidden !important;

  transition:all .25s ease !important;
}

.product-card:hover,
.product-item:hover,
.product-block:hover,
.category-card:hover,
.card:hover{
  transform:translateY(-3px) !important;

  border-color:
    rgba(201,164,92,.8) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.08) !important;
}

/* =========================================
   CARD TEXT
   ========================================= */

.product-card h1,
.product-card h2,
.product-card h3,
.product-card h4,
.product-card p,

.product-item h1,
.product-item h2,
.product-item h3,
.product-item h4,
.product-item p,

.product-block h1,
.product-block h2,
.product-block h3,
.product-block p,

.category-card h1,
.category-card h2,
.category-card h3,
.category-card p,

.card h1,
.card h2,
.card h3,
.card h4,
.card p{
  color:var(--nl-text) !important;
  text-shadow:none !important;
}

/* =========================================
   PRODUCT IMAGES
   ========================================= */

.product-card img,
.product-item img,
.product-block img,
.category-card img,
.card img{
  border-radius:12px !important;
}

/* =========================================
   PRICES
   ========================================= */

.price,
.product-price,
.sale-price,
.current-price{
  color:var(--nl-green) !important;
  font-weight:800 !important;
}

.old-price,
.regular-price,
.compare-price{
  color:#a1978d !important;
}

/* =========================================
   BUTTONS
   ========================================= */

button,
.btn,
.button,
.btn-primary,
[type="submit"],
.add-to-cart,
.cart-btn{
  background:
    linear-gradient(
      135deg,
      #0a6a4c 0%,
      #07523c 100%
    ) !important;

  color:#ffffff !important;

  -webkit-text-fill-color:#ffffff !important;

  border:
    1px solid var(--nl-gold) !important;

  border-radius:14px !important;

  padding:12px 20px !important;

  font-weight:800 !important;

  box-shadow:
    0 8px 18px rgba(10,106,76,.18) !important;

  transition:all .25s ease !important;
}

button:hover,
.btn:hover,
.button:hover,
.btn-primary:hover,
[type="submit"]:hover,
.add-to-cart:hover,
.cart-btn:hover{
  background:
    linear-gradient(
      135deg,
      #0d7b58 0%,
      #0a6a4c 100%
    ) !important;

  color:#ffffff !important;

  -webkit-text-fill-color:#ffffff !important;

  border-color:
    var(--nl-gold-light) !important;

  transform:translateY(-2px) !important;

  box-shadow:
    0 12px 22px rgba(10,106,76,.24) !important;
}

.add-to-cart,
.cart-btn,
button[name*="cart"],
[class*="cart"] button{
  min-height:48px !important;
  font-size:17px !important;
}

/* =========================================
   SECONDARY BUTTONS
   ========================================= */

.btn-secondary,
.secondary-btn,
.outline-btn{
  background:#fffdfa !important;

  color:var(--nl-green-dark) !important;

  -webkit-text-fill-color:
    var(--nl-green-dark) !important;

  border:
    1px solid var(--nl-gold) !important;
}

/* =========================================
   BADGES
   ========================================= */

.badge,
.discount-badge,
.sale-badge,
.offer-badge{
  background:var(--nl-green) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:1px solid var(--nl-gold) !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  font-weight:700 !important;
}

/* =========================================
   INPUTS
   ========================================= */

input,
textarea,
select{
  background:#ffffff !important;
  color:var(--nl-text) !important;
  -webkit-text-fill-color:var(--nl-text) !important;
  border:1px solid #e6ddd0 !important;
  border-radius:11px !important;
}

input:focus,
textarea:focus,
select:focus{
  outline:none !important;
  border-color:var(--nl-green) !important;
  box-shadow:
    0 0 0 3px rgba(10,106,76,.08) !important;
}

/* =========================================
   ICONS
   ========================================= */

svg,
.icon{
  color:var(--nl-green) !important;
}

header svg,
header .icon,
nav svg,
nav .icon,
[class*="cart"],
[class*="search"],
[class*="account"],
[class*="user"]{
  color:var(--nl-green-dark) !important;
}

/* =========================================
   HERO / BANNER
   ========================================= */

.hero-wrapper,
.banner-wrapper,
.slider-wrapper,
[class*="banner"],
[class*="slider"],
[class*="hero"]{
  border-radius:14px !important;
  overflow:hidden !important;
}

/* =========================================
   FOOTER
   ========================================= */

footer,
.site-footer,
.store-footer{
  background:
    linear-gradient(
      135deg,
      var(--nl-green-dark),
      var(--nl-green)
    ) !important;

  color:#ffffff !important;

  border-top:
    2px solid var(--nl-gold) !important;
}

footer *,
.site-footer *,
.store-footer *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

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

@media(max-width:768px){

  html,
  body,
  main,
  .page-wrapper,
  .store-page{
    background:
      linear-gradient(
        180deg,
        #f8fbf7 0%,
        #eef7ef 48%,
        #f7f3ea 100%
      ) !important;
  }

  header,
  .site-header,
  .store-header,
  .main-header,
  [class*="header"],
  nav,
  .navbar,
  .main-menu{
    background:#fffdf8 !important;
    background-color:#fffdf8 !important;
  }

  .products-section,
  .categories-section,
  .featured-products,
  .collection-section,
  .home-section,
  .content-section{
    padding:16px !important;
    border-radius:14px !important;
    margin-bottom:16px !important;
  }

  .product-card,
  .product-item,
  .product-block,
  .category-card,
  .card{
    border-radius:13px !important;
  }

  button,
  .btn,
  .button,
  .btn-primary,
  [type="submit"],
  .add-to-cart,
  .cart-btn{
    border-radius:11px !important;
    padding:10px 16px !important;
    font-size:15px !important;
  }
}


/* =====================================================
   FINAL OVERRIDE
   الشريط المتحرك العلوي - أبيض واضح مهما كان ستايل القالب
   مهم: لازم الجزء ده يفضل آخر حاجة في ملف CSS
   ===================================================== */

.topbar,
.top-bar,
.announcement-bar,
.announcement,
.marquee,
.ticker,
[class*="announcement"],
[class*="Announcement"],
[class*="marquee"],
[class*="Marquee"],
[class*="ticker"],
[class*="Ticker"],
[class*="notice"],
[class*="Notice"],
[class*="promo"],
[class*="Promo"],
[class*="message-bar"],
[class*="top-message"]{
  color:#ffffff !important;
}

/* إجبار كل عنصر داخل الشريط على الأبيض */

.topbar *,
.top-bar *,
.announcement-bar *,
.announcement *,
.marquee *,
.ticker *,
[class*="announcement"] *,
[class*="Announcement"] *,
[class*="marquee"] *,
[class*="Marquee"] *,
[class*="ticker"] *,
[class*="Ticker"] *,
[class*="notice"] *,
[class*="Notice"] *,
[class*="promo"] *,
[class*="Promo"] *,
[class*="message-bar"] *,
[class*="top-message"] *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* روابط */

.topbar a,
.top-bar a,
.announcement-bar a,
.announcement a,
.marquee a,
.ticker a,
[class*="announcement"] a,
[class*="marquee"] a,
[class*="ticker"] a,
[class*="notice"] a,
[class*="promo"] a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* spans */

.topbar span,
.top-bar span,
.announcement-bar span,
.announcement span,
.marquee span,
.ticker span,
[class*="announcement"] span,
[class*="marquee"] span,
[class*="ticker"] span,
[class*="notice"] span,
[class*="promo"] span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Paragraph */

.topbar p,
.top-bar p,
.announcement-bar p,
.announcement p,
.marquee p,
.ticker p,
[class*="announcement"] p,
[class*="marquee"] p,
[class*="ticker"] p,
[class*="notice"] p,
[class*="promo"] p{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* لو النص موجود داخل div */

.topbar div,
.top-bar div,
.announcement-bar div,
.announcement div,
.marquee div,
.ticker div,
[class*="announcement"] div,
[class*="marquee"] div,
[class*="ticker"] div,
[class*="notice"] div,
[class*="promo"] div{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* SVG / ICON */

.topbar svg,
.top-bar svg,
.announcement-bar svg,
.announcement svg,
.marquee svg,
.ticker svg,
[class*="announcement"] svg,
[class*="marquee"] svg,
[class*="ticker"] svg{
  color:#ffffff !important;
  fill:#ffffff !important;
  stroke:#ffffff !important;
}

/* إزالة أي opacity موروثة */

.topbar,
.topbar *,
.top-bar,
.top-bar *,
.announcement-bar,
.announcement-bar *,
.marquee,
.marquee *,
.ticker,
.ticker *{
  opacity:1 !important;
  filter:none !important;
}


/* =========================================
   لو الشريط خلفيته سوداء مثل الصورة الحالية
   نخليه فاخر وواضح
   ========================================= */

.topbar,
.top-bar,
.announcement-bar,
.announcement,
.marquee,
.ticker,
[class*="announcement"],
[class*="marquee"],
[class*="ticker"]{
  background:#07523c !important;
  background-color:#07523c !important;

  border-bottom:
    1px solid #c9a45c !important;
}