/* ============================================================
   Metta Pic v14.4 — Final polish
   Solid navy header · popup hidden · mobile sticky 82% · buttons
   ============================================================ */

/* ---- HEADER solid navy (override any capsule leftovers) ---- */
html body .site-header,
html body #siteHeader,
html body[data-page] .site-header,
html body .site-header.scrolled {
  background: #07152f !important;
  background-color: #07152f !important;
  color: #fff !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 12px 40px rgba(7, 21, 47, 0.28) !important;
}
html body .site-header .brand,
html body .site-header .header-actions {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body .site-header .desktop-nav a {
  color: rgba(255, 255, 255, 0.92) !important;
}
html body .site-header .desktop-nav a:hover,
html body .site-header .desktop-nav a.active {
  color: #ff6b35 !important;
}
html body .site-header .brand strong,
html body .site-header .brand small,
html body .site-header .header-login-btn {
  color: #fff !important;
}
html body .site-header .brand-logo {
  filter: brightness(0) invert(1) !important;
}
html body .site-header .header-actions a,
html body .site-header .header-cart,
html body .site-header .header-icon,
html body .site-header .menu-toggle {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}
html body .site-header .header-actions svg,
html body .site-header .header-cart svg {
  stroke: #fff !important;
  color: #fff !important;
}
html body .site-header .menu-toggle span {
  background: #fff !important;
}
/* Dropdown navy + white text */
html body .nav-dropdown-menu,
html body .desktop-nav .sub-menu,
html body .site-header .sub-menu {
  background: #07152f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}
html body .nav-dropdown-menu a,
html body .desktop-nav .sub-menu a {
  color: #fff !important;
}
html body .nav-dropdown-menu a:hover {
  color: #ff6b35 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ---- QUICK CHECKOUT: fully hidden until open ---- */
#mpQckOverlay,
#mpQckSheet,
.mp-qck-overlay,
.mp-qck-sheet {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
#mpQckOverlay[hidden],
#mpQckSheet[hidden] {
  display: none !important;
}
/* When opened via JS (is-open + not hidden) */
#mpQckOverlay.is-open,
.mp-qck-overlay.is-open {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
#mpQckSheet.is-open,
.mp-qck-sheet.is-open {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ---- Size checkboxes: navy, NO shadow ---- */
.mp-size-item input:checked + .mp-size-box,
.mp-size-item.is-active .mp-size-box,
.mp-variants .mp-size-item:has(input:checked),
.mp-variants .mp-size-item.is-active,
.mp-bl-choice input:checked + span,
.mp-option-choice input:checked + .mp-option-box {
  background: #07152f !important;
  border-color: #07152f !important;
  color: #fff !important;
  box-shadow: none !important;
}
.mp-size-box,
.mp-bl-choice span {
  box-shadow: none !important;
}

/* ---- Custom order section buttons: white bg, navy text ---- */
.mp-custom-order .mp-btn,
.mp-custom-action .mp-btn,
.mp-custom-action a.mp-btn-light,
.mp-custom-action a.mp-btn-outline-light,
.mp-custom-box .mp-btn,
.mp-custom-box a {
  background: #fff !important;
  color: #07152f !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 14px 22px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  max-width: 280px !important;
  width: 100% !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mp-custom-order .mp-btn:hover,
.mp-custom-action .mp-btn:hover {
  background: #ff6b35 !important;
  color: #fff !important;
}
.mp-custom-action {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
  max-width: 300px !important;
}

/* ---- Final CTA "برای دیوار بعدی" — real buttons ---- */
.mp-final2-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 24px !important;
}
.mp-final2-actions .mp-btn,
.mp-final2-actions .mp-btn-light,
.mp-final2-actions .mp-btn-outline-light,
.mp-final2-box .mp-btn {
  background: #fff !important;
  color: #07152f !important;
  border: 2px solid #fff !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  padding: 14px 28px !important;
  min-width: 180px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  text-decoration: none !important;
  transition: background .2s, color .2s, transform .15s !important;
}
.mp-final2-actions .mp-btn-outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
}
.mp-final2-actions .mp-btn:hover,
.mp-final2-actions .mp-btn-light:hover {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.mp-final2-actions .mp-btn-outline-light:hover {
  background: #fff !important;
  color: #07152f !important;
  border-color: #fff !important;
}

/* Hide hero "مشاهده همه" if any leftover */
.mp-hero-feature-all {
  display: none !important;
}

/* Hero horizontal card discount badge */
.mp-hero2-hcard-off {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: #ff6b35 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  z-index: 2 !important;
  min-width: 36px !important;
}
.mp-hero2-hcard-off.is-hidden,
.mp-hero2-hcard-off[hidden] {
  display: none !important;
}
.mp-hero2-hcard-img {
  position: relative !important;
}

/* ---- Mobile sticky price ~82% width ---- */
@media (max-width: 900px) {
  .mp-sticky-price {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 82% !important;
    max-width: 82vw !important;
    bottom: 72px !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .mp-sticky-price.is-show {
    transform: translateX(-50%) !important;
  }
  .mp-sticky-price-inner {
    padding: 8px 10px !important;
  }
}

/* Price typing colors (fixed + floating) */
.mp-price-typing.mp-price-up {
  color: #16a34a !important;
}
.mp-price-typing.mp-price-down {
  color: #dc2626 !important;
}
#mpVariantTotal.mp-price-typing.mp-price-up,
.mp-var-total .mp-price-typing.mp-price-up {
  color: #4ade80 !important;
}
#mpVariantTotal.mp-price-typing.mp-price-down,
.mp-var-total .mp-price-typing.mp-price-down {
  color: #f87171 !important;
}
#mpStickyPriceVal.mp-price-typing.mp-price-up {
  color: #16a34a !important;
}
#mpStickyPriceVal.mp-price-typing.mp-price-down {
  color: #dc2626 !important;
}