/* =========================
   SNOOZE — THEME CUSTOM CSS
   ========================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Inter:wght@300;400;500;600&family=Poppins:wght@300;400;500;600&family=Tajawal:wght@300;400;500;700&display=swap');

/* Base */
body { margin: 0; color: #2c2c2c; }

/* Headings — EN */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4 {
  font-family: 'Playfair Display', serif !important; font-weight: 500; letter-spacing:.5px;
}
/* Body — EN */
html[lang="en"] body, html[lang="en"] p, html[lang="en"] li, html[lang="en"] span {
  font-family: 'Inter','Poppins',sans-serif !important; font-weight:300; line-height:1.6;
}
/* Headings — AR */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: 'Tajawal',sans-serif !important; font-weight:700; letter-spacing:.3px;
}
/* Body — AR */
html[lang="ar"] body, html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] span {
  font-family: 'Tajawal',sans-serif !important; font-weight:400; line-height:1.7;
}

/* Striped navbar (desktop & mobile) */
.navbar {
  background: repeating-linear-gradient(90deg,#fff,#fff 40px,#dce3ee 40px,#dce3ee 80px);
  color:#2c2c2c; border-bottom:1px solid #ddd;
}
/* Navbar links & icons */
.navbar a, .navbar .nav-link { color:#2c2c2c !important; font-weight:500; }
.navbar a:hover, .navbar .nav-link:hover { opacity:.8; }

/* Remove theme separators/shadows */
.navbar, header, .site-header, .navbar::before, .navbar::after {
  border-bottom:none !important; box-shadow:none !important; margin-bottom:0 !important;
}
.navbar-seperator,.navbar-separator,.nav-separator,.navbar__separator,.header-separator,
.navbar + .navbar-seperator,.navbar + .navbar-separator,.navbar + .nav-separator {
  display:none !important; height:0 !important; border:0 !important; box-shadow:none !important;
}

/* Remove first-section gap under header */
main, .app-inner, .content, .page-content { padding-top:0 !important; }
main > section:first-child, .app-inner > section:first-child,
.content > section:first-child, .page-content > section:first-child {
  margin-top:0 !important; border-top:0 !important;
}

/* Hide weird "Remained -1" badge (if present) */
span.bg-primary.text-white { display:none !important; }

/* Language button — shared look (desktop + mobile) */
.lang-currency-switcher {
  border:none !important; box-shadow:none !important; background:transparent !important;
  padding:0 !important;
}
.lang-currency-switcher svg { opacity:.75; }
.lang-currency-switcher:hover svg { opacity:1; }

/* =======================================================
   MOBILE HEADER — single source of truth (desktop unchanged)
   ======================================================= */
@media (max-width: 768px) {
  /* Make navbar container a positioning context */
  #navbar .container { position:relative; min-height:64px; }

  /* Ensure first row has height for tap targets */
  #navbar .container > div[class*="flex"][class*="items-center"] { min-height:64px; }

  /* Center the logo perfectly 
  #navbar img.main-logo-image,
  #navbar .main-logo-image,
  #navbar a[href*="/brand"] img {
    position:absolute !important; left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
    max-height:36px !important; height:36px !important; width:auto !important;
    z-index:2; pointer-events:none;
  }
*/
  /* Burger button pinned to start side */
  #navbar a.mobile-menu-toggle {
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    z-index:3; line-height:1;
  }
  html[dir="ltr"] #navbar a.mobile-menu-toggle { left:12px; right:auto; }
  html[dir="rtl"] #navbar a.mobile-menu-toggle { right:12px; left:auto; }

  /* Actions (cart/account/lang) pinned to end side */
  #navbar .container > div [class*="items-center"][class*="w-full"] {
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    display:inline-flex !important; align-items:center; gap:10px;
    z-index:3; width:auto !important;
  }
  html[dir="ltr"] #navbar .container > div [class*="items-center"][class*="w-full"] { right:12px; left:auto; }
  html[dir="rtl"] #navbar .container > div [class*="items-center"][class*="w-full"] { left:12px; right:auto; }

  /* Language button sits inside actions group, subtle */
  .lang-currency-switcher { position:static !important; z-index:1 !important; }

  /* Optional: unify icon size */
  #navbar .container svg { width:22px; height:22px; }
}

/* =======================================================
   MOBILE HEADER — final override (desktop unchanged)
   Targets the elements from your screenshots:
   - burger: a.mobile-menu-toggle
   - logo: img.transparent-logo / any img[class*="logo"]
   - actions: div.flex.items-center.gap-8  (cart/account/lang)
   ======================================================= */
@media (max-width: 768px) {

  /* Make navbar container a positioning context */
  #navbar .container { position: relative; min-height: 64px; }
  #navbar .container > div[class*="flex"][class*="items-center"] { min-height: 64px; }

  /* ---- Center the logo (covers transparent + any logo image) ---- 
  #navbar img.transparent-logo,
  #navbar img.main-logo-image,
  #navbar img[class*="logo"],
  #navbar a[href*="/brand"] img {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
    z-index: 2;
    pointer-events: none;
  }
*/
  /* ---- Burger pinned to the start side ---- */
  #navbar a.mobile-menu-toggle,
  #navbar a[href="#mobile-menu"] {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3;
    line-height: 1;
  }
  html[dir="ltr"] #navbar a.mobile-menu-toggle,
  html[dir="ltr"] #navbar a[href="#mobile-menu"] { left: 12px; right: auto; }
  html[dir="rtl"] #navbar a.mobile-menu-toggle,
  html[dir="rtl"] #navbar a[href="#mobile-menu"] { right: 12px; left: auto; }

  /* ---- Actions (cart / account / language) pinned to end side ---- */
  #navbar .container > div.flex.justify-between.items-center.h-20 > div.flex.items-center.gap-8,
  #navbar .container > div [class*="items-center"][class*="w-full"] {  /* fallback */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    z-index: 3;
    width: auto !important;
  }
  html[dir="ltr"] #navbar .container > div.flex.justify-between.items-center.h-20 > div.flex.items-center.gap-8,
  html[dir="ltr"] #navbar .container > div [class*="items-center"][class*="w-full"] { right: 12px; left: auto; }
  html[dir="rtl"] #navbar .container > div.flex.justify-between.items-center.h-20 > div.flex.items-center.gap-8,
  html[dir="rtl"] #navbar .container > div [class*="items-center"][class*="w-full"] { left: 12px; right: auto; }

  /* Language button: keep subtle, don’t float elsewhere on mobile */
  .lang-currency-switcher {
    position: static !important;   /* lives inside actions group */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    z-index: 1 !important;         /* below cart/menu taps */
  }
  .lang-currency-switcher svg { opacity: .75; }
  .lang-currency-switcher:hover svg { opacity: 1; }

  /* Icon sizing for consistency */
  #navbar .container svg,
  #navbar .navbar-cart-icon { width: 22px; height: 22px; }
}

/* ===== Mobile: unhide logo + language & raise z-index ===== */
@media (max-width: 768px) {
  /* Many Salla themes set these as `hidden md:inline-flex` */
  #navbar a[href*="/brand"],
  #navbar .lang-currency-switcher {
    display: inline-flex !important;       /* make them visible on mobile */
    align-items: center;
  }
  #navbar img[class*="logo"] {
    display: block !important;             /* ensure the image itself renders */
  }

  /* Keep them above the video/header bg */
  #navbar a.mobile-menu-toggle { z-index: 1003 !important; }
  #navbar .container > div [class*="items-center"] { z-index: 1002 !important; } /* actions group */
  #navbar .lang-currency-switcher { z-index: 1001 !important; }
  #navbar img[class*="logo"] { z-index: 1000 !important; }  /* centered logo */
}

/* ===== MOBILE: force-show the header logo (theme hides it with `hidden md:block`) ===== */
@media (max-width: 768px) {
  /* Unhide the logo link and the image itself */
  #navbar a[href*="/brand"],
  #navbar a[href="/"],
  #navbar .logo { display: inline-flex !important; align-items: center; }

  /* If the theme uses "transparent-logo" or "main-logo-image", unhide both */
  #navbar img.transparent-logo,
  #navbar img.main-logo-image,
  #navbar img[class*="logo"] {
    display: block !important;            /* override `hidden` */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Keep our centering + stacking above the hero/video */
  #navbar img.transparent-logo,
  #navbar img.main-logo-image,
  #navbar img[class*="logo"] {
    position: absolute !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 36px !important; height: 36px !important; width: auto !important;
    z-index: 1000 !important;   /* below icons, above bg */
    pointer-events: none;
  }
}

/* ===== FINAL: fix mobile logo visibility & centering ===== */
@media (max-width: 768px) {
  /* Unhide the logo LINK itself (themes often use `hidden md:inline-flex`) */
  #navbar a[href="/"],
  #navbar a[href*="/brand"],
  #navbar .logo,
  #navbar .store-logo {
    display: inline-flex !important;
    align-items: center;
  }

  /* Prefer the colored logo by default */
  #navbar img.main-logo-image {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* If the theme adds a transparent/white logo, hide it unless navbar is transparent on index */
  #navbar img.transparent-logo { display: none !important; }
  .index #navbar.navbar--transparent img.transparent-logo { display: block !important; }
  .index #navbar.navbar--transparent img.main-logo-image { display: none !important; }

  /* Center whichever logo is showing */
  #navbar img.main-logo-image,
  #navbar img.transparent-logo,
  #navbar img[class*="logo"] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
    z-index: 1000 !important;   /* below icons, above background */
    pointer-events: none;
  }
}



THE LOGO ISNTN SHOWING