/**
 * HyperMarket M3 — layout.css
 * Bottom Nav دقیقاً مطابق تصویر + پاپ‌آپ محصول
 */

/* ══ WOODMART / THEME OVERRIDE ══ */
.wd-header,.woodmart-top-bar,.woodmart-sticky-header,.woodmart-header-main,
.wd-header-main,.site-header,#site-header,#masthead,.header-main { display:none !important; }
.woodmart-footer,.site-footer,#site-footer,.woodmart-bottom-bar,.wd-footer { display:none !important; }
.hm-top-bar, .hm-bnav { display:flex !important; }

/* ══ BASE ══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { background:#f6f6f6; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:#f6f6f6; color:#222; direction:rtl;
  max-width:430px; margin:0 auto;
  min-height:100dvh; overflow-x:hidden; position:relative;
}
body.woodmart-body, body.woocommerce, body.woocommerce-page { background:#f6f6f6 !important; }
.hm-main { padding-top:72px; padding-bottom:112px; min-height:100dvh; }

/* ════ FADE TOP / BOTTOM — رنگ دقیق پس‌زمینه ════ */
.hm-fade-top {
  position:fixed;
  top:64px; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px;
  height:40px;
  background:linear-gradient(to bottom,
    rgba(246,246,246,1)  0%,
    rgba(246,246,246,.6) 60%,
    rgba(246,246,246,0)  100%);
  z-index:997; pointer-events:none;
  /* scroll-reveal */
  opacity:0;
  transition:opacity 200ms ease;
}
.hm-fade-top.is-vis { opacity:1; }

.hm-fade-bottom {
  position:fixed;
  /* bottom:0 — solid از پایین تا بالای ناوبری، fade بالاش */
  bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px;
  /* ناوبری 72px از پایین — fade 36px بالاتر از اون */
  height:108px;
  background:linear-gradient(to bottom,
    rgba(246,246,246,0)  0%,
    rgba(246,246,246,.8) 33%,
    rgba(246,246,246,1)  66%,
    rgba(246,246,246,1)  100%);
  z-index:997; pointer-events:none;
}






/* ══════════════════════════════════════════════
   FLOATING HEADER
══════════════════════════════════════════════ */
.hm-top-bar {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; z-index:999;
  padding:10px 12px;
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.hm-top-bar__circle {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.60);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 16px rgba(0,0,0,0.13);
  border:0.2px solid rgba(0,0,0,0.18);
  display:grid; place-items:center;
  pointer-events:all; flex-shrink:0; cursor:pointer;
  position:relative; transition:transform .15s;
  color:#333; text-decoration:none;
}
.hm-top-bar__circle:active { transform:scale(.91); }
.hm-top-bar__circle .material-symbols-rounded { font-size:22px; }
.hm-top-bar__circle-badge {
  position:absolute; top:5px; right:5px;
  width:8px; height:8px; border-radius:50%;
  background:#e8380d; border:1.5px solid #fff;
}
.hm-top-bar__capsule {
  flex:1; height:44px;
  background:rgba(255,255,255,0.60);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 16px rgba(0,0,0,0.13);
  border:0.2px solid rgba(0,0,0,0.18);
  border-radius:22px; padding:0 12px;
  display:flex; align-items:center; gap:4px;
  pointer-events:all; cursor:pointer;
  overflow:hidden; font-family:inherit;
  transition:box-shadow .2s;
}
.hm-top-bar__capsule-label { font-size:10px; color:#aaa; white-space:nowrap; flex-shrink:0; }
.hm-top-bar__capsule-val { flex:1; font-size:12px; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hm-top-bar__capsule-arrow { font-size:16px; color:#bbb; flex-shrink:0; }

/* ══════════════════════════════════════════════
   BOTTOM NAV — کپسول مطابق تصویر
   دایره سرچ مجزا + کپسول با ۳ آیتم
   آیتم selected = pill خاکستری داخل کپسول
══════════════════════════════════════════════ */

.hm-bnav {
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  z-index:999;
  /* بدون background خودش — فقط اجزا داخلی background دارن */
  padding:0;
  pointer-events:none;
  width:auto;
}
.hm-bnav > * { pointer-events:all; }

/* دایره سرچ مجزا — سمت راست */
.hm-bnav__search-circle {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 20px rgba(0,0,0,.13),0 1px 6px rgba(0,0,0,.06);
  border:0.2px solid rgba(0,0,0,0.18);
  display:grid; place-items:center;
  cursor:pointer; color:#555;
  flex-shrink:0;
  transition:background .15s,color .15s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.hm-bnav__search-circle:active { transform:scale(.91); background:#FFC107; color:#333; }
.hm-bnav__search-circle .material-symbols-rounded {
  font-size:26px;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* کپسول اصلی */
.hm-bnav__pill {
  display:flex; align-items:center;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 24px rgba(0,0,0,.13),0 1px 6px rgba(0,0,0,.06);
  border:0.2px solid rgba(0,0,0,0.18);
  border-radius:99px;
  padding:6px 8px;
  gap:6px;
  height:58px;
  position:relative; /* مرجع indicator */
}

/* آیتم داخل کپسول */
.hm-bnav__pill-item {
  display:flex; align-items:center; justify-content:center;
  width:52px; height:46px;
  border-radius:99px;
  color:#bbb; text-decoration:none; cursor:pointer;
  transition:color .18s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
  flex-shrink:0; /* به صورت طبیعی بالای indicator چون indicator اول در DOM میاد */
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
  background:transparent !important; /* background دیگه روی خود آیتم نیست */
}
.hm-bnav__pill-item .material-symbols-rounded {
  font-size:26px;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  transition:font-variation-settings .18s ease;
}
.hm-bnav__pill-item.is-on {
  color:#111;
}
.hm-bnav__pill-item.is-on .material-symbols-rounded {
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}
/* ── لحظه کلیک: فشردگی مینیمال برای حس واکنش فوری ── */
.hm-bnav__pill-item:active {
  transform:scale(.88);
}

/* ── کپسول indicator — زیر آیتم‌ها سر می‌خوره ──
   موقعیت/سایز با left/top/width/height از JS تنظیم میشه
   (مطمئن‌تر از transform دستی در RTL) */
.hm-bnav__indicator {
  position:absolute;
  top:0; left:0; /* مقدار واقعی رو JS ست می‌کنه */
  border-radius:99px;
  background:rgba(0,0,0,0.10);
  z-index:0;
  pointer-events:none;
  transition:left .32s cubic-bezier(.22,1,.36,1),
             top .32s cubic-bezier(.22,1,.36,1),
             width .32s cubic-bezier(.22,1,.36,1);
  opacity:0;
}
.hm-bnav__indicator.is-ready {
  opacity:1;
}

/* badge سبد */
.hm-bnav__badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #e8380d; color: #fff;
  font-size: 9px; font-weight: 800;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
  font-family: 'Vazirmatn', sans-serif;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
}
@keyframes hm-badge-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.35); }
  80%  { transform: scale(0.92); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes hm-badge-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  60%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.hm-bnav__badge--pop  { animation: hm-badge-pop  0.35s cubic-bezier(.34,1.56,.64,1) forwards; }
.hm-bnav__badge--bump { animation: hm-badge-bump 0.3s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ══════════════════════════════════════════════
   MOBILE SEARCH BAR
══════════════════════════════════════════════ */
.hm-msearch {
  position:fixed; top:68px; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:406px;
  z-index:998; background:#fff;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.14);
  overflow:hidden;
  animation:hm-slide-down .3s cubic-bezier(.25,1,.5,1);
}
@keyframes hm-slide-down {
  from{opacity:0;transform:translateX(-50%) translateY(-10px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.hm-msearch[hidden]{display:none!important}
.hm-msearch__inner {
  display:flex; align-items:center; gap:8px;
  padding:0 12px; height:50px;
}
.hm-msearch__inner .material-symbols-rounded{font-size:20px;color:#aaa}
.hm-msearch__inner input{flex:1;border:none;background:transparent;font-size:13px;font-family:inherit;color:#222;outline:none}
.hm-msearch__inner button{border:none;background:none;cursor:pointer;color:#888;padding:4px}

/* ══ PRODUCT POPUP — جمع‌وجور ══ */
.hm-popup {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:flex-end; justify-content:center;
}
.hm-popup[hidden]{display:none!important}
.hm-popup__bd {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.hm-popup.is-open .hm-popup__bd {
  opacity:1;
  pointer-events:all;
}
.hm-popup__sheet {
  position:relative; z-index:1;
  width:100%; max-width:430px;
  background:#fff; border-radius:24px 24px 0 0;
  max-height:70dvh;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.25,1,.5,1);
  box-shadow:0 -6px 32px rgba(0,0,0,.16);
}
.hm-popup.is-open .hm-popup__sheet { transform:translateY(0); }

/* هدر — فقط دکمه × */
.hm-popup__top {
  display:flex; align-items:center; justify-content:flex-start;
  padding:12px 14px 4px; flex-shrink:0;
}
.hm-popup__close {
  width:32px; height:32px; border-radius:50%;
  background:#f5f5f5; border:none;
  display:grid; place-items:center; cursor:pointer; color:#555;
}
.hm-popup__close .material-symbols-rounded { font-size:18px; }

/* skeleton */
.hm-popup__skeleton { padding:16px; flex-shrink:0; }
.hm-popup__sk-img { width:120px; height:120px; border-radius:14px; background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:hm-sk 1.4s infinite; margin:0 auto 12px; }
.hm-popup__sk-line { height:13px; border-radius:6px; background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:hm-sk 1.4s infinite; margin-bottom:8px; }
@keyframes hm-sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* بدنه اسکرول */
.hm-popup__body { flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.hm-popup__body::-webkit-scrollbar{display:none}
.hm-popup__body[hidden]{display:none!important}

/* تصویر مربعی — متناسب با عرض شیت */
.hm-popup__img-wrap {
  width:calc(100% - 28px);
  aspect-ratio:1;
  max-height:200px;
  border-radius:16px; background:#f8f8f8;
  overflow:hidden; margin:0 auto 0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #f0f0f0; flex-shrink:0;
}
.hm-popup__img-wrap img { width:100%; height:100%; object-fit:contain; }

/* thumbnails */
.hm-popup__thumbs {
  display:flex; gap:5px; justify-content:center;
  overflow-x:auto; scrollbar-width:none;
  padding:6px 14px 4px;
}
.hm-popup__thumbs::-webkit-scrollbar{display:none}
.hm-popup__thumb {
  width:32px; height:32px; flex-shrink:0;
  border-radius:6px; background:#f5f5f5; overflow:hidden;
  cursor:pointer; border:2px solid transparent; transition:border-color .18s;
}
.hm-popup__thumb.active { border-color:#FFC107; }
.hm-popup__thumb img { width:100%; height:100%; object-fit:contain; }

/* اطلاعات */
.hm-popup__info { padding:6px 14px 4px; }
.hm-popup__title { font-size:14px; font-weight:700; color:#222; line-height:1.35; margin-bottom:7px; }

.hm-popup__attrs {
  display:flex; align-items:stretch;
  border:1px solid #f0f0f0; border-radius:10px; overflow:hidden; margin-bottom:8px;
}
.hm-popup__attr { flex:1; padding:7px 10px; display:flex; flex-direction:column; gap:2px; }
.hm-popup__attr-l { font-size:9.5px; color:#aaa; }
.hm-popup__attr-v { font-size:11px; font-weight:600; color:#333; }
.hm-popup__attr-sep { width:1px; background:#f0f0f0; }

/* صرفه‌جویی */
.hm-popup__saving {
  font-size:11.5px; font-weight:600; color:#16a34a;
  background:#f0fff4; border-radius:8px;
  padding:6px 10px; margin:2px 0; text-align:center;
  display:flex; align-items:center; gap:4px; justify-content:center;
}
.hm-popup__saving::before { content:'🎉'; }

/* footer */
.hm-popup__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 16px; border-top:1px solid #f5f5f5;
  flex-shrink:0; gap:12px;
}
.hm-popup__price-col { display:flex; flex-direction:column; gap:1px; }
.hm-popup__old { font-size:11px; color:#ccc; text-decoration:line-through; direction:rtl; display:block; }
.hm-popup__price-row { display:flex; align-items:baseline; gap:4px; }
.hm-popup__price { font-size:19px; font-weight:800; color:#222; direction:rtl; }
.hm-popup__unit { font-size:11px; color:#888; }
.hm-popup__disc-badge {
  background:#fff0f0; color:#e8380d; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:7px;
}
.hm-popup__add-btn {
  background:#e8380d; color:#fff; border:none; border-radius:14px;
  padding:12px 22px; font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; flex-shrink:0;
  box-shadow:0 4px 12px rgba(232,56,13,.3);
  transition:transform .15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.hm-popup__add-btn:active { transform:scale(.95); }
.hm-popup__add-btn:disabled { background:#ccc; box-shadow:none; cursor:default; }

/* ── Qty Pill داخل پاپ‌آپ (بزرگ‌تر از pill کارت) ── */
.hm-popup-pill {
  display:flex; align-items:center;
  border-radius:99px; overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  height:44px; flex-shrink:0;
  touch-action:manipulation; user-select:none;
}
.hm-popup-pill__btn {
  width:44px; height:44px;
  background:transparent; border:none;
  font-size:22px; font-weight:700;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  flex-shrink:0;
}
.hm-popup-pill__btn:disabled { opacity:.45; cursor:wait; }
.hm-popup-pill__n {
  font-size:16px; font-weight:800;
  min-width:32px; text-align:center;
}
.hm-popup__action { display:flex; align-items:center; flex-shrink:0; }

/* ══ SNACKBAR ══ */
.hm-snackbar {
  position:fixed; bottom:90px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:rgba(28,28,28,.94); color:#fff;
  font-size:12px; font-weight:500; padding:10px 20px;
  border-radius:99px; opacity:0;
  transition:opacity .28s,transform .28s cubic-bezier(.25,1,.5,1);
  z-index:9999; white-space:nowrap; pointer-events:none;
  max-width:calc(100% - 48px);
}
.hm-snackbar--visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* divider حذف شد — در homepage.css تنظیم شده */

/* ══ دکمه برگشت به بالا ══ */
.hm-scroll-top {
  position:fixed;
  bottom:90px;
  left:14px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 16px rgba(0,0,0,0.14);
  display:grid; place-items:center;
  cursor:pointer; color:#444;
  z-index:800;
  transition:opacity .25s, transform .25s;
  opacity:0; pointer-events:none;
  transform:translateY(10px);
}
.hm-scroll-top.show {
  opacity:1; pointer-events:all;
  transform:translateY(0);
}
.hm-scroll-top:active { transform:scale(.9); }
.hm-scroll-top .material-symbols-rounded { font-size:24px; }

.hm-announce__text {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
  line-height: 1.4;
}
.hm-announce__close {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: #666;
}
.hm-announce__close .material-symbols-rounded { font-size: 16px; }

/* ══ (Location Permission Sheet حذف شد —
   GPS اکنون فقط با اقدام صریح کاربر در address.js گرفته می‌شود) ══ */

/* ══ BACK TO TOP — گوشه چپ پایین ══ */
.hm-back-top {
  position: fixed;
  bottom: 96px;          /* بالای bottom nav */
  left: 16px;            /* گوشه چپ — نه وسط */
  right: auto;
  transform: none;       /* هیچ translate نداره */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 3px 14px rgba(0,0,0,0.14);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 800;
  color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s, visibility .28s, transform .28s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.hm-back-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.hm-back-top .material-symbols-rounded { font-size: 22px; }
.hm-back-top:active { transform: scale(.88); }

/* ══ BUTTONS — گوشه کاملاً گرد Material You M3 ══ */
/* همه دکمه‌های WooCommerce و theme */
.hm-btn,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input[type=submit],
.woocommerce-cart .wc-proceed-to-checkout a,
button[type=submit]:not(.pi-copy):not(.pi-copy-btn):not(.hm-back-top):not(.hm-bnav__search-circle):not(.hm-top-bar__circle):not(.hm-top-bar__back):not(.hm-qty-control__btn) {
  border-radius: 99px !important;
}
/* کارت‌ها و input ها — گوشه ملایم‌تر نه کاملاً گرد */
.hm-btn--tonal,
.hm-btn--outline,
.hm-auth-form__submit:not(.hm-auth-form__submit--full),
.hm-cart-coupon__apply,
.pi-submit,
.pi-login__btn,
.hm-checkout-section,
.hm-cart-items,
.hm-cart-totals,
.hm-orders-list,
.hm-profile__section,
.hm-profile__quick-card {
  border-radius: 16px !important;
}
/* pill shape برای دکمه‌های اصلی action */
.hm-auth-form__submit,
.hm-popup__add-btn,
.hm-cart-totals .hm-btn--filled,
.wc-proceed-to-checkout a.checkout-button {
  border-radius: 99px !important;
}

/* عنوان صفحات داخلی — فقط وسط‌چین */
.hm-top-bar__title-capsule { justify-content:center; pointer-events:none; cursor:default; }
.hm-top-bar__title-text { font-size:14px; font-weight:700; color:#1a1a2e; }

/* ══ fade — دارک مود ══ */
html.hm-dark .hm-fade-top {
  background:linear-gradient(to bottom,
    rgba(15,15,15,1)  0%,
    rgba(15,15,15,.6) 60%,
    rgba(15,15,15,0)  100%);
}
html.hm-dark .hm-fade-bottom {
  background:linear-gradient(to bottom,
    rgba(15,15,15,0)  0%,
    rgba(15,15,15,.8) 33%,
    rgba(15,15,15,1)  66%,
    rgba(15,15,15,1)  100%);
}