/* Nizva Mobile Navbar */
:root {
  --nizva-blue: #007aff;
  --nizva-blue-soft: rgba(0, 122, 255, .1);
  --nizva-z: 999999;
  --nizva-text: #1c1c1e;
  --nizva-muted: rgba(60, 60, 67, .55);
}

.nizva-mobile-navbar {
  display: none;
  position: fixed;
  inset-inline: 14px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: var(--nizva-z);
  direction: rtl;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
  contain: layout style;
}

.nizva-mobile-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  pointer-events: auto;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .nizva-mobile-navbar__inner {
    background: rgba(255, 255, 255, .65);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

.nizva-mobile-navbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border: 0;
  background: transparent;
  color: var(--nizva-muted);
  text-decoration: none;
  cursor: pointer;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.nizva-mobile-navbar__item.is-active { color: var(--nizva-blue); }

.nizva-mobile-navbar__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 12px;
}

.nizva-mobile-navbar__item.is-active .nizva-mobile-navbar__icon-wrap {
  background: var(--nizva-blue-soft);
}

.nizva-mobile-navbar__icon { width: 20px; height: 20px; }
.nizva-mobile-navbar__label { font-size: 9px; font-weight: 500; }

.nizva-mobile-navbar__badge {
  position: absolute;
  top: -1px;
  left: -1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--nizva-blue);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.nizva-mobile-navbar__badge[hidden] { display: none !important; }

/* پرش آیکن سبد بعد از افزودن محصول */
.nizva-mobile-navbar__item[data-nav="cart"].is-cart-bounce .nizva-mobile-navbar__icon-wrap,
.nizva-mobile-navbar__icon-wrap.is-cart-bounce {
  animation: nizva-cart-bounce .7s cubic-bezier(.22, 1.2, .36, 1);
}

.nizva-mobile-navbar__item[data-nav="cart"].is-cart-bounce .nizva-mobile-navbar__badge {
  animation: nizva-badge-pop .55s ease;
}

@keyframes nizva-cart-bounce {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-14px) scale(1.12); }
  45% { transform: translateY(-4px) scale(1.05); }
  65% { transform: translateY(-10px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes nizva-badge-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.nizva-categories-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--nizva-z);
  background: rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  contain: strict;
}

.nizva-categories-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nizva-categories-overlay__close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(35vw - 28px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--nizva-text);
  cursor: pointer;
}

.nizva-categories-overlay__close svg { width: 18px; height: 18px; }

.nizva-categories-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65vw;
  max-width: 100%;
  z-index: var(--nizva-z);
  display: flex;
  flex-direction: column;
  direction: rtl;
  background: #fff;
  border-radius: 24px 0 0 24px;
  box-shadow: -8px 0 28px rgba(0, 0, 0, .08);
  transform: translate3d(100%, 0, 0);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  overflow: hidden;
  contain: layout paint style;
}

@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  .nizva-categories-panel {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

.nizva-categories-panel.is-open { transform: translate3d(0, 0, 0); }

.nizva-categories-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 12px;
  -webkit-overflow-scrolling: touch;
}

.nizva-categories-panel__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
  min-height: 48px;
}

.nizva-categories-panel__logo-img {
  display: block;
  max-height: 64px;
  max-width: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.nizva-categories-panel__logo--text {
  font-size: 20px;
  font-weight: 800;
  color: var(--nizva-blue);
}

.nizva-categories-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nizva-categories-panel__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--nizva-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.nizva-categories-panel__cat.is-active {
  background: #fff;
  color: var(--nizva-blue);
  font-weight: 600;
}

.nizva-categories-panel__cat-visual {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--nizva-blue);
}

.nizva-categories-panel__cat-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nizva-categories-panel__cat-visual svg { width: 22px; height: 22px; }

.nizva-categories-panel__divider {
  height: 1px;
  margin: 0 4px 8px;
  background: rgba(0, 122, 255, .12);
}

.nizva-categories-panel__quick-wrap {
  flex-shrink: 0;
  padding: 0 20px 10px;
}

.nizva-categories-panel__quick {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nizva-categories-panel__quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--nizva-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.nizva-categories-panel__quick-item.is-active,
.nizva-categories-panel__quick-item:active {
  background: rgba(255, 255, 255, .55);
  color: var(--nizva-blue);
}

.nizva-categories-panel__quick-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nizva-blue);
}

.nizva-categories-panel__quick-icon svg { width: 20px; height: 20px; }

.nizva-categories-panel__empty {
  margin: 12px 0;
  text-align: center;
  color: var(--nizva-muted);
  font-size: 12px;
}

.nizva-categories-panel__footer {
  flex-shrink: 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.nizva-banner-slider { position: relative; content-visibility: auto; }
.nizva-banner-slider__slide { display: none; }
.nizva-banner-slider__slide.is-active { display: block; }

.nizva-categories-panel__banner-link {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
}

.nizva-categories-panel__banner-link img {
  display: block;
  width: 100%;
  height: auto;
}

.nizva-banner-slider__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 10px 0 0;
}

.nizva-banner-slider__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 122, 255, .22);
  cursor: pointer;
}

.nizva-banner-slider__dot.is-active {
  width: 14px;
  background: var(--nizva-blue);
}

body.nizva-no-scroll {
  overflow: hidden;
  touch-action: none;
}

@media (max-width: 768px) {
  .nizva-mobile-navbar { display: block; }
  body.nizva-has-mobile-navbar {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
