/* ============================================
   NEFR STORY — Custom Theme CSS
   Elite Theme / EasyOrders
   Built from real HTML structure
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --gold:        #c9a84c;
  --gold-light:  #e8d9a0;
  --gold-dark:   #9a7a2e;
  --gold-shine:  #f5e6a3;
  --black:       #080808;
  --black-mid:   #0d0d0d;
  --black-soft:  #141414;
  --black-card:  #1a1a1a;
  --off-white:   #f5f0e8;
  --text-muted:  #7a7060;
  --border-gold: rgba(201,168,76,0.2);
  --font-heading:'Cinzel', serif;
  --font-display:'Cinzel Decorative', serif;
  --font-body:   'Cormorant Garamond', serif;
}

/* ============================================
   GLOBAL
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--black) !important;
  color: var(--off-white) !important;
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em;
}

a { text-decoration: none !important; }
::selection { background: rgba(201,168,76,0.25); color: var(--off-white); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black-mid); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================
   1. ANNOUNCEMENT BAR — "THREADS OF IDENTITY"
   Class: .ps-announce
   ============================================ */
.ps-announce {
  background: var(--black-mid) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

.ps-announce-inner,
.ps-announce-simple {
  background: transparent !important;
  color: var(--gold-light) !important;
  font-family: var(--font-heading) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 8px 16px !important;
}

.ps-announce span {
  color: var(--gold-light) !important;
  font-family: var(--font-heading) !important;
}

/* ============================================
   2. HEADER — Class: .ps-header
   Icons: .ps-icon-btn, .ps-icon-image
   Search: .search-btn
   Lang: .lang-btn, #header-lang-btn
   Cart: .cart-btn
   ============================================ */
.ps-header {
  background: var(--black-mid) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-gold) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.ps-header-inner {
  background: transparent !important;
  background-image: none !important;
}

/* All icon buttons — white */
.ps-icon-btn {
  background: transparent !important;
  color: #ffffff !important;
}

/* Search & Cart — images rendered as SVG files, apply filter to make white */
.ps-icon-image {
  filter: brightness(0) invert(1) !important;
}

/* Language icon — SVG with stroke="currentColor" */
.ps-lang-icon {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.lang-btn {
  color: #ffffff !important;
}

.cart-btn {
  color: #ffffff !important;
}

.search-btn {
  color: #ffffff !important;
}

/* Cart count badge */
.ps-cart-count {
  background: var(--gold) !important;
  color: var(--black) !important;
  font-family: var(--font-heading) !important;
  font-size: 9px !important;
}

/* ============================================
   3. LOGO + "NEFR STORY" TEXT
   Class: .ps-logo
   ============================================ */
.ps-logo img {
  height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.2)) !important;
}

/* Inject "NEFR STORY" after logo */
.ps-logo::after {
  content: "NEFR STORY";
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  letter-spacing: 4px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 12px !important;
}

/* Header spacer — remove empty space below header */
.ps-theme-layout-spacer {
  display: none !important;
}

/* ============================================
   4. LANGUAGE DROPDOWN
   ============================================ */
/* The lang dropdown rendered by the theme */
[id*="lang-menu"],
[class*="lang-menu"],
[class*="ps-lang-dropdown"],
[class*="language-dropdown"] {
  background: var(--black-card) !important;
  border: 1px solid var(--border-gold) !important;
  min-width: 160px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

[id*="lang-menu"] a,
[id*="lang-menu"] li,
[id*="lang-menu"] button,
[class*="lang-menu"] a,
[class*="lang-menu"] li,
[class*="ps-lang-dropdown"] a,
[class*="ps-lang-dropdown"] li {
  color: var(--gold-light) !important;
  font-family: var(--font-heading) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  white-space: nowrap !important;
  padding: 10px 20px !important;
  display: block !important;
  background: transparent !important;
}

[id*="lang-menu"] a:hover,
[class*="lang-menu"] a:hover {
  background: rgba(201,168,76,0.08) !important;
  color: var(--gold) !important;
}

/* ============================================
   5. MAIN CONTENT
   ============================================ */
main.container_class,
.content_container {
  background: var(--black) !important;
}

/* ============================================
   6. WHITE SECTIONS — keep white as requested
   "فئات المنتجات" & "تسوق حسب الفئة"
   Class: .home_section_container
   ============================================ */
.home_section_container {
  background-color: #ffffff !important;
  padding: 48px 40px !important;
  border-radius: 0 !important;
}

.home_section_container h3,
.home_section_container h2 {
  color: #111111 !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 2px !important;
}

.home_section_container p,
.home_section_container p.description {
  color: #444444 !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
}

/* ============================================
   7. PRODUCT CARDS
   ============================================ */
.ps-plist-card,
.ps-pgrid-card {
  background: var(--black-card) !important;
  border: 1px solid var(--border-gold) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ps-plist-card:hover,
.ps-pgrid-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(201,168,76,0.1) !important;
  border-color: var(--gold) !important;
}

.ps-plist-name,
.ps-pgrid-name {
  font-family: var(--font-heading) !important;
  color: var(--gold-light) !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}

.ps-plist-price-current,
.ps-pgrid-price-current {
  color: var(--gold) !important;
  font-family: var(--font-heading) !important;
}

.ps-plist-price-old,
.ps-pgrid-price-old {
  color: var(--text-muted) !important;
  text-decoration: line-through !important;
}

/* ============================================
   8. FOOTER — Class: .ps-footer
   ============================================ */
.ps-footer {
  background: var(--black-mid) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-gold) !important;
  padding: 32px 48px 20px !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.ps-footer-inner {
  background: transparent !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ps-footer-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 48px !important;
  flex-wrap: wrap !important;
}

/* Hide footer logo */
.ps-footer-logo {
  display: none !important;
}

/* ============================================
   9. NEWSLETTER — exact confirmed classes
   ============================================ */
.ps-footer-subscribe-col {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 480px !important;
  width: 100% !important;
  flex: 1 !important;
}

.ps-footer-heading {
  font-family: var(--font-heading) !important;
  color: var(--gold) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  display: block !important;
}

.ps-footer-subscribe-form,
.footer-subscribe-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  border: 1px solid var(--border-gold) !important;
  overflow: hidden !important;
  background: transparent !important;
  height: 44px !important;
}

.ps-footer-subscribe-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 !important;
  background: var(--black-soft) !important;
  min-width: 0 !important;
  height: 44px !important;
}

/* Hide envelope icon */
.ps-footer-subscribe-icon {
  display: none !important;
}

.ps-footer-subscribe-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  padding: 0 16px !important;
  height: 44px !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ps-footer-subscribe-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.ps-footer-subscribe-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.ps-footer-subscribe-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gold) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 0 22px !important;
  height: 44px !important;
  min-width: 160px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.3s ease !important;
  pointer-events: all !important;
  position: relative !important;
  z-index: 5 !important;
}

.ps-footer-subscribe-btn:hover {
  background: var(--gold-shine) !important;
}

/* ============================================
   10. FOOTER META ROW — social icons, payments
   ============================================ */
.ps-footer-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(201,168,76,0.1) !important;
}

.ps-footer-social-img {
  filter: brightness(0) invert(0.5) !important;
  transition: filter 0.3s ease !important;
  width: 18px !important;
  height: 18px !important;
}

.ps-footer-socials a:hover .ps-footer-social-img {
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg) !important;
}

/* Hide payment logos */
.ps-footer-brand-payments {
  display: none !important;
}

/* ============================================
   11. FOOTER DIVIDER
   ============================================ */
.ps-footer-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent) !important;
  margin: 20px 0 12px !important;
}

/* ============================================
   12. FOOTER BOTTOM — copyright left, powered right
   Class: .ps-footer-bottom
   ============================================ */
.ps-footer-bottom {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ps-footer-copy {
  text-align: left !important;
  color: var(--text-muted) !important;
  font-family: var(--font-heading) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.ps-footer-powered {
  text-align: right !important;
  color: var(--text-muted) !important;
  font-family: var(--font-heading) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.ps-footer-powered a {
  color: var(--gold) !important;
  font-family: var(--font-heading) !important;
}

/* ============================================
   13. MOBILE MENU — Class: .ps-mobile-menu
   ============================================ */
.ps-mobile-menu,
.ps-mobile-overlay {
  background: var(--black-mid) !important;
}

.ps-mobile-link {
  color: var(--gold-light) !important;
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

.ps-mobile-link:hover {
  color: var(--gold) !important;
}

.ps-mobile-close img,
.ps-mobile-row-icon {
  filter: brightness(0) invert(0.7) !important;
}

.ps-mobile-logo img {
  height: 36px !important;
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.2)) !important;
}

/* ============================================
   14. WHATSAPP BUTTON
   ============================================ */
a[href*="wa.me"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

a[href*="wa.me"]:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(37,211,102,0.55) !important;
}

/* ============================================
   15. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .ps-footer {
    padding: 24px 20px 16px !important;
  }

  .ps-footer-main {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .ps-footer-subscribe-btn {
    min-width: 120px !important;
    font-size: 8px !important;
  }

  .ps-logo::after {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-left: 8px !important;
  }

  .ps-footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .ps-footer-copy,
  .ps-footer-powered {
    text-align: center !important;
  }
}

/* ============================================
   FIXES — Header separation + Input size
   ============================================ */

/* Separate announcement bar from header clearly */
.ps-announce {
  position: relative !important;
  z-index: 1001 !important;
  display: block !important;
  width: 100% !important;
}

.ps-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  margin-top: 0 !important;
}

/* The theme is stacking them — force them into a proper column via the wrapper */
.ps-theme {
  display: flex !important;
  flex-direction: column !important;
}

/* Announcement bar must sit ABOVE header visually, not overlap */
.ps-announce {
  order: -1 !important;
  position: relative !important;
  top: auto !important;
}

/* Make the logo wrapper not overlap announcement bar text */
.ps-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0 !important;
}

.ps-logo::after {
  content: "NEFR STORY" !important;
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #c9a84c !important;
  letter-spacing: 4px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 12px !important;
  line-height: 1 !important;
}

/* Email input — wider and taller */
.ps-footer-subscribe-input {
  height: 52px !important;
  font-size: 16px !important;
  padding: 0 20px !important;
  min-width: 220px !important;
}

.ps-footer-subscribe-form,
.footer-subscribe-form {
  height: 52px !important;
}

.ps-footer-subscribe-field {
  height: 52px !important;
}

.ps-footer-subscribe-btn {
  height: 52px !important;
  min-width: 180px !important;
  font-size: 10px !important;
}


/* ============================================
   EMAIL INPUT — white background, larger
   ============================================ */

.ps-footer-subscribe-form,
.footer-subscribe-form {
  height: 56px !important;
  border: 1px solid var(--border-gold) !important;
}

.ps-footer-subscribe-field {
  height: 56px !important;
  background: #ffffff !important;
  flex: 2 !important;
}

.ps-footer-subscribe-input {
  height: 56px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 15px !important;
  padding: 0 20px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.ps-footer-subscribe-input::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

.ps-footer-subscribe-btn {
  height: 56px !important;
  min-width: 130px !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
}


/* ============================================
   EMAIL INPUT — final fix
   ============================================ */

.ps-footer-subscribe-icon,
.ps-footer-subscribe-icon img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.ps-footer-subscribe-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
}

.ps-footer-subscribe-input {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 15px !important;
  padding: 0 20px !important;
  height: 56px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ps-footer-subscribe-btn {
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}


/* ============================================
   BUTTON TEXT — "Subscribe" only via CSS
   ============================================ */
.ps-footer-subscribe-btn {
  font-size: 0 !important;
}

.ps-footer-subscribe-btn::after {
  content: "SUBSCRIBE" !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--black) !important;
}



/* ============================================
   PAGE BACKGROUND — white (body only, not cards/header)
   ============================================ */

/* Only target the outer page background, not components */
.ps-page-wrapper,
.ps-content-wrapper,
[class*="ps-page-body"],
[class*="ps-layout-content"] {
  background-color: #ffffff !important;
}

/* The section wrapper that sits directly on the page */
.ps-section,
[class*="ps-section-wrapper"],
[class*="ps-home-section"]:not(.home_section_container) {
  background-color: #ffffff !important;
}

/* Section heading text — keep gold on white */
.ps-section h2,
.ps-section h3,
[class*="ps-section"] h2,
[class*="ps-section"] h3 {
  color: var(--gold) !important;
}


/* ============================================
   PAGE BACKGROUND — white (exact classes)
   ============================================ */

.container_class,
.content_container {
  background-color: #ffffff !important;
}

.ps-featured,
.ps-sr-scope {
  background: #ffffff !important;
  background-color: #ffffff !important;
}


/* ============================================
   FOOTER — force back to black (overriding white)
   ============================================ */

.ps-footer,
.ps-footer.ps-sr-scope,
footer.ps-footer {
  background: var(--black-mid) !important;
  background-color: var(--black-mid) !important;
}

.ps-footer * {
  background-color: transparent !important;
}

.ps-footer-subscribe-col {
  background: transparent !important;
}

.ps-footer-subscribe-field {
  background: #ffffff !important;
}


/* Newsletter heading — larger font */
.ps-footer-heading {
  font-size: 12px !important;
}