/* ==========================================================
   Farida Stores - FINAL CLEAN THEME V5
   EasyOrders Safe CSS
   Goal: one-piece sticky navy header, visible gold nav pills,
   clean footer, no product-card damage, no duplicate custom bars.
   ========================================================== */

:root {
  --fs-navy: #0E1828;
  --fs-gold: #FFBD59;
  --fs-gold-dark: #D4A437;
  --fs-ivory: #FBF7F1;
  --fs-white: #FFFFFF;
  --fs-black: #202020;
  --fs-muted: #6B7280;
  --fs-border: rgba(255, 189, 89, 0.35);
}

/* ==========================================================
   00) REMOVE OLD MANUAL UI BLOCKS / OLD PATCHES
   ========================================================== */
.fs-offer-strip,
.fs-rights-strip,
.fs-copyright-bar,
.fs-custom-nav,
.fs-theme-toggle {
  display: none !important;
}

/* ==========================================================
   01) SITE BACKGROUND - DO NOT TARGET CHECKOUT FORMS
   ========================================================== */
html,
body,
#__next,
#__next > div,
main,
#__next main {
  background-color: var(--fs-ivory) !important;
}

/* keep white blocks/cards naturally white */
.bg-white,
[class*="bg-white"] {
  /* do not force all white blocks to ivory; checkout and cards need white */
}

/* ==========================================================
   02) ONE-PIECE STICKY HEADER
   ========================================================== */
header,
.default_header,
.sphinx_header {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background-color: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--fs-gold) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  overflow: visible !important;
}

/* integrated promo line inside the same header block */
header::before,
.default_header::before,
.sphinx_header::before {
  content: "♥ عروض يومية على منتجات مختارة + شحن مجاني على بعض المنتجات من Farida Stores ♥";
  display: block !important;
  width: 100% !important;
  background-color: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  text-align: center !important;
  padding: 7px 12px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid rgba(255,189,89,0.35) !important;
  box-sizing: border-box !important;
  direction: rtl !important;
}

/* every direct header container must keep same navy, no internal split */
header > div,
.default_header > div,
.sphinx_header > div,
.default_header_container,
.sphinx_header_container,
header nav,
.default_header nav,
.sphinx_header nav,
header [class*="container"],
.default_header [class*="container"],
.sphinx_header [class*="container"] {
  background-color: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* remove internal divider lines inside header */
header *,
.default_header *,
.sphinx_header * {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Header row spacing */
.sphinx_header_container,
.default_header_container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ==========================================================
   03) HEADER LOGO - BIGGER AND STRONGER
   ========================================================== */
.sphinx_header_logo,
.default_header_logo,
header a[href="/"],
header a[href="https://faridastores.com"],
header a[href="https://faridastores.com/"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 190px !important;
  min-width: 190px !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.sphinx_header_logo img,
.default_header_logo img,
header a[href="/"] img,
header img[alt*="Farida"],
header img[alt*="farida"],
header img[alt*="Logo"],
header img[alt*="logo"] {
  display: block !important;
  width: auto !important;
  height: 72px !important;
  max-height: 72px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: transparent !important;
}

/* ==========================================================
   04) HEADER NAV LINKS AS CLEAR GOLD BLOCKS
   ========================================================== */
header nav a,
.default_header nav a,
.sphinx_header nav a,
header [class*="menu"] a,
.default_header [class*="menu"] a,
.sphinx_header [class*="menu"] a {
  color: var(--fs-white) !important;
  background-color: rgba(255,189,89,0.10) !important;
  border: 1px solid rgba(255,189,89,0.55) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  margin: 0 4px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

header nav a:hover,
.default_header nav a:hover,
.sphinx_header nav a:hover,
header [class*="menu"] a:hover,
.default_header [class*="menu"] a:hover,
.sphinx_header [class*="menu"] a:hover {
  color: var(--fs-black) !important;
  background-color: var(--fs-gold) !important;
  border-color: var(--fs-gold) !important;
}

/* header text */
header a,
.default_header a,
.sphinx_header a,
header span,
.default_header span,
.sphinx_header span,
header p,
.default_header p,
.sphinx_header p {
  color: var(--fs-white) !important;
  font-weight: 800 !important;
}

/* header icons */
header svg,
.default_header svg,
.sphinx_header svg {
  color: var(--fs-gold) !important;
  stroke: var(--fs-gold) !important;
}

header button,
.default_header button,
.sphinx_header button,
header a[aria-label],
.default_header a[aria-label],
.sphinx_header a[aria-label] {
  background: transparent !important;
  color: var(--fs-gold) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   05) SEARCH - ICON ONLY TO MATCH PREMIUM HEADER
   ========================================================== */
header input,
.default_header input,
.sphinx_header input {
  display: none !important;
}

header form,
.default_header form,
.sphinx_header form,
header [class*="search"],
.default_header [class*="search"],
.sphinx_header [class*="search"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

header form button,
.default_header form button,
.sphinx_header form button,
header button[type="submit"],
.default_header button[type="submit"],
.sphinx_header button[type="submit"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--fs-gold) !important;
  border: 1px solid rgba(255,189,89,0.55) !important;
  padding: 0 !important;
}

/* ==========================================================
   06) PRODUCTS - CLEAN RESET, NO UGLY BORDERS
   ========================================================== */
.default_product_list_card,
.home_products_grid_card,
.products_grid_card,
.category_products_grid_card,
main [data-product-id] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.default_product_list_card:hover,
.home_products_grid_card:hover,
.products_grid_card:hover,
.category_products_grid_card:hover,
main [data-product-id]:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.default_product_img,
.default_product_preview_img,
.sphinx_product_img,
.default_product_list_card img,
.home_products_grid_card img,
.products_grid_card img,
.category_products_grid_card img,
main [data-product-id] img {
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Product text only */
.product_name,
.default_product_list_card h3,
.home_products_grid_card h3,
.products_grid_card h3,
.category_products_grid_card h3 {
  color: var(--fs-black) !important;
  font-weight: 700 !important;
}

.product_price,
.product_price_container,
.default_product_list_card [class*="price"],
.home_products_grid_card [class*="price"],
.products_grid_card [class*="price"],
.category_products_grid_card [class*="price"] {
  color: #E94B1B !important;
  font-weight: 900 !important;
}

del,
.line-through {
  color: rgba(32,32,32,0.35) !important;
}

/* Buttons clean, not oversized */
.add_to_cart_btn,
main [data-product-id] button {
  background-color: var(--fs-black) !important;
  color: var(--fs-white) !important;
  border: 1px solid var(--fs-black) !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
  transition: all 0.2s ease !important;
}

.add_to_cart_btn:hover,
main [data-product-id] button:hover {
  background-color: var(--fs-gold) !important;
  color: var(--fs-black) !important;
  border-color: var(--fs-gold) !important;
}

/* Sale badge */
.badge,
.sale,
.discount,
[class*="discount"] {
  background-color: #E94B1B !important;
  color: #FFFFFF !important;
}

/* ==========================================================
   07) FOOTER - CLEAN, ONE COPYRIGHT ONLY
   ========================================================== */
footer,
.default_footer,
.site-footer {
  background-color: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  border-top: 3px solid var(--fs-gold) !important;
  box-shadow: none !important;
}

footer *,
.default_footer *,
.site-footer * {
  color: var(--fs-white) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer strong,
.default_footer h1,
.default_footer h2,
.default_footer h3,
.default_footer h4,
.default_footer strong {
  color: var(--fs-gold) !important;
}

footer a,
.default_footer a,
.site-footer a {
  color: var(--fs-white) !important;
  text-decoration: none !important;
}

footer a:hover,
.default_footer a:hover,
.site-footer a:hover {
  color: var(--fs-gold) !important;
}

footer svg,
.default_footer svg,
.site-footer svg {
  color: var(--fs-gold) !important;
  stroke: var(--fs-gold) !important;
}

.default_footer_social_link,
footer .default_footer_social_link,
footer a[aria-label],
footer button[aria-label] {
  background-color: var(--fs-gold) !important;
  color: var(--fs-black) !important;
  border-radius: 50% !important;
}

.default_footer_social_link svg,
footer .default_footer_social_link svg,
footer a[aria-label] svg,
footer button[aria-label] svg {
  color: var(--fs-black) !important;
  stroke: var(--fs-black) !important;
  fill: currentColor !important;
}

/* footer logo bigger but controlled */
footer img,
.default_footer img,
.site-footer img {
  max-height: 78px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Hide old custom rights line if still present by class */
.fs-rights-strip,
.fs-copyright-bar {
  display: none !important;
}

/* Hide EasyOrders powered links only */
a[href*="easy-orders"],
a[href*="easyorders"],
[href*="easy-orders"],
[href*="easyorders"] {
  display: none !important;
}

/* ==========================================================
   08) SCROLLBAR
   ========================================================== */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--fs-ivory);
}

::-webkit-scrollbar-thumb {
  background-color: var(--fs-gold);
  border-radius: 999px;
  border: 3px solid var(--fs-ivory);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--fs-gold-dark);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--fs-gold) var(--fs-ivory);
}

/* ==========================================================
   09) MOBILE
   ========================================================== */
@media (max-width: 768px) {
  header::before,
  .default_header::before,
  .sphinx_header::before {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  .sphinx_header_logo,
  .default_header_logo,
  header a[href="/"] {
    width: 130px !important;
    min-width: 130px !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  .sphinx_header_logo img,
  .default_header_logo img,
  header a[href="/"] img,
  header img[alt*="Farida"],
  header img[alt*="Logo"] {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 130px !important;
  }

  header nav a,
  .default_header nav a,
  .sphinx_header nav a,
  header [class*="menu"] a {
    padding: 7px 12px !important;
    font-size: 13px !important;
    margin: 3px !important;
  }
}