/*
 * WP Nav Pro — Mobile Header & Drawer Styles
 * M3 Navigation Drawer spec + panel stack slide system.
 */

/* ─── Mobile header bar ───────────────────────────────────────────────────── */
.wnp-header-mobile {
  position: relative;
  z-index: var(--wnp-z-index);
  width: 100%;
  background: var(--wnp-surface);
  border-bottom: 1px solid var(--wnp-outline);
  flex-direction: column;
}

.wnp-header-mobile.wnp-sticky {
  position: sticky;
  top: 0;
}

.wnp-header-mobile__inner {
  display: flex;
  align-items: center;
  min-height: var(--wnp-height-mobile);
  padding: var(--wnp-padding-y, 0px) 16px;
  justify-content: space-between;
}

/* Logo — left by default */
.wnp-header-mobile .wnp-logo-wrap {
  flex-shrink: 0;
}

.wnp-header-mobile .wnp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.wnp-header-mobile .wnp-logo__img {
  max-height: calc(var(--wnp-logo-height) * 0.8);
  width: auto;
  display: block;
}

.wnp-header-mobile .wnp-logo__text {
  font-size: 16px;
  font-weight: 700;
  color: var(--wnp-primary);
  white-space: nowrap;
}

/* Utils row */
.wnp-mobile-utils {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Icon buttons */
.wnp-header-mobile .wnp-icon-btn {
  position: relative;
  flex-shrink: 0;
  width: var(--wnp-mobile-icon-btn, 34px);
  height: var(--wnp-mobile-icon-btn, 34px);
  border-radius: var(--wnp-shape-full);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wnp-on-surface);
  text-decoration: none;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-header-mobile .wnp-icon-btn:hover {
  background: var(--wnp-primary-hover);
}

/* Hamburger */
.wnp-hamburger {
  width: 40px;
  height: 40px;
  border-radius: var(--wnp-shape-full);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-hamburger:hover {
  background: var(--wnp-primary-hover);
}

.wnp-hamburger__line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--wnp-on-surface);
  border-radius: 2px;
  transition:
    transform var(--wnp-dur-md) var(--wnp-ease),
    opacity var(--wnp-dur-md) var(--wnp-ease),
    width var(--wnp-dur-md) var(--wnp-ease);
}

/* Animated X state when drawer open */
.wnp-hamburger[aria-expanded="true"] .wnp-hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.wnp-hamburger[aria-expanded="true"] .wnp-hamburger__line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.wnp-hamburger[aria-expanded="true"] .wnp-hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Scrim ───────────────────────────────────────────────────────────────── */
.wnp-scrim {
  position: fixed;
  inset: 0;
  background: var(--wnp-scrim);
  z-index: calc(var(--wnp-z-index) + 10);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-scrim.wnp-scrim--visible {
  opacity: 1;
  pointer-events: all;
}

/* ─── Drawer shell ────────────────────────────────────────────────────────── */
.wnp-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--wnp-drawer-width);
  background: var(--wnp-surface);
  z-index: calc(var(--wnp-z-index) + 20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;

  /* M3 shape: rounded on the open edge only */
  border-radius: 0 24px 24px 0;

  /* Elevation 1 (resting state per M3 spec) */
  box-shadow: var(--wnp-elev-2);
}

/* Left drawer (default) */
.wnp-drawer--left {
  left: 0;
  right: auto;
  border-radius: 0 24px 24px 0;
  transform: translateX(-100%);
  transition: transform var(--wnp-dur-lg) var(--wnp-ease);
}

/* Right drawer */
.wnp-drawer--right {
  right: 0;
  left: auto;
  border-radius: 24px 0 0 24px;
  transform: translateX(100%);
  transition: transform var(--wnp-dur-lg) var(--wnp-ease);
}

/* Open state */
.wnp-drawer--left.wnp-drawer--open,
.wnp-drawer--right.wnp-drawer--open {
  transform: translateX(0);
}

/* ─── Drawer header ───────────────────────────────────────────────────────── */
.wnp-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 12px 16px;
  border-bottom: 1px solid var(--wnp-outline);
  flex-shrink: 0;
}

.wnp-drawer__header .wnp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.wnp-drawer__header .wnp-logo__img {
  max-height: calc(var(--wnp-logo-height) * 0.75);
  width: auto;
}

.wnp-drawer__header .wnp-logo__text {
  font-size: 15px;
  font-weight: 700;
  color: var(--wnp-primary);
}

.wnp-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: var(--wnp-shape-full);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wnp-on-surface);
  flex-shrink: 0;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-drawer__close:hover {
  background: var(--wnp-primary-hover);
}

/* ─── Panel stack ─────────────────────────────────────────────────────────── */
.wnp-panel-stack {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Each panel fills the stack container — use ID scope to beat theme resets */
#wnp-panel-stack > .wnp-panel,
.wnp-panel-stack > .wnp-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  background: var(--wnp-surface);

  /* Off-screen right by default */
  transform: translateX(100%);
  transition: transform var(--wnp-dur-md) var(--wnp-ease);

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--wnp-outline) transparent;
}

#wnp-panel-stack > .wnp-panel::-webkit-scrollbar,
.wnp-panel-stack > .wnp-panel::-webkit-scrollbar       { width: 3px; }
#wnp-panel-stack > .wnp-panel::-webkit-scrollbar-thumb,
.wnp-panel-stack > .wnp-panel::-webkit-scrollbar-thumb { background: var(--wnp-outline); border-radius: 2px; }

/* Active panel — on screen */
#wnp-panel-stack > .wnp-panel--active,
.wnp-panel-stack > .wnp-panel--active {
  transform: translateX(0);
}

/* Previous panel — pushed left (M3 parallax) */
#wnp-panel-stack > .wnp-panel--prev,
.wnp-panel-stack > .wnp-panel--prev {
  transform: translateX(-30%);
  pointer-events: none;
}

/* Root panel starts on-screen */
#wnp-panel-stack > .wnp-panel--root,
.wnp-panel-stack > .wnp-panel--root {
  transform: translateX(0);
}

/* ─── Panel nav list ──────────────────────────────────────────────────────── */
.wnp-panel-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Panel back button */
.wnp-panel-back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--wnp-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wnp-outline);
  margin-bottom: 6px;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-panel-back svg {
  color: currentColor;
  flex-shrink: 0;
}

.wnp-panel-back:hover {
  background: var(--wnp-primary-active);
}

/* ─── Drawer nav items ────────────────────────────────────────────────────── */

/* Shared styles for both links and buttons */
.wnp-drawer-link,
.wnp-drawer-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  width: 100%;
  font-size: var(--wnp-mobile-nav-size);
  font-weight: 500;
  text-transform: var(--wnp-transform);
  color: var(--wnp-on-surface);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;

  /* M3: full-width with right-side inset for active indicator */
  border-radius: 0 var(--wnp-shape-full) var(--wnp-shape-full) 0;
  margin-right: 12px;
  transition:
    background var(--wnp-dur-md) var(--wnp-ease),
    color var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-drawer-link:hover,
.wnp-drawer-btn:hover {
  background: var(--wnp-primary-active);
}

/* Active state */
.wnp-drawer-item--active .wnp-drawer-link,
.wnp-drawer-item--active .wnp-drawer-btn {
  background: var(--wnp-primary-container);
  color: var(--wnp-primary);
  font-weight: 600;
}

/* Right chevron on parent items */
.wnp-drawer-btn .wnp-icon,
.wnp-drawer-btn svg {
  opacity: 0.5;
  flex-shrink: 0;
  color: currentColor;
}

/* ─── Drawer footer ───────────────────────────────────────────────────────── */
.wnp-drawer__footer {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--wnp-outline);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CTA */
.wnp-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  background: var(--wnp-primary);
  color: var(--wnp-on-primary);
  border-radius: var(--wnp-btn-radius, var(--wnp-shape-full));
  font-size: var(--wnp-cta-size);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-drawer-cta:hover {
  background: var(--wnp-primary-dark);
}

/* Footer utils row (WPML + currency) */
.wnp-drawer__footer-utils {
  display: flex;
  gap: 8px;
}

.wnp-drawer__footer-utils .wnp-wpml-slot,
.wnp-drawer__footer-utils .wnp-currency-slot,
.wnp-drawer__footer-utils .wnp-lang-slot {
  flex: 1;
}

/* Only one switcher showing — center it instead of stretching to full width */
.wnp-drawer__footer-utils > :only-child {
  flex: 0 1 auto;
  margin: 0 auto;
}

.wnp-drawer__footer-utils .wnp-util-pill {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  padding: 7px 10px;
  border-color: var(--wnp-outline);
}

/* Social row */
.wnp-social-row {
  display: grid;
  grid-template-columns: repeat(var(--wnp-social-cols, 5), 1fr);
  gap: 6px;
  border-radius: var(--wnp-shape-large);
  background: var(--wnp-primary);
}

.wnp-social-btn {
  aspect-ratio: 1 / 1;
  border: none;
  background: var(--wnp-social-icon-bg, var(--wnp-primary));
  color: var(--wnp-social-icon-color, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--wnp-shape-full);
  transition: background var(--wnp-dur-md) var(--wnp-ease);
}

.wnp-social-btn i {
  font-size: var(--wnp-icon-size, 18px);
  line-height: 1;
  color: inherit;
}

.wnp-social-btn:hover {
  background: var(--wnp-primary-dark, var(--wnp-primary));
  opacity: 0.88;
}

/* Custom footer block */
.wnp-drawer__footer-custom {
  font-size: 13px;
  color: var(--wnp-on-surface-variant);
}

/* No menu message */
.wnp-drawer-no-menu {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--wnp-on-surface-variant);
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wnp-drawer,
  .wnp-panel,
  .wnp-scrim,
  .wnp-hamburger__line {
    transition-duration: 10ms !important;
  }
}

/* Mobile icon SVG size */
.wnp-header-mobile .wnp-icon-btn svg {
  width: var(--wnp-mobile-icon-svg, 20px);
  height: var(--wnp-mobile-icon-svg, 20px);
  flex-shrink: 0;
}

/* ─── WC Account Portal (WAP) trigger integration ──────────────────────── */

.wnp-header-mobile .wnp-wap-trigger-wrap {
  display: inline-flex;
  align-items: center;
}

.wnp-header-mobile .wap-nw-trigger,
.wnp-header-mobile .wap-account-trigger {
  width: var(--wnp-mobile-icon-btn, 34px) !important;
  height: var(--wnp-mobile-icon-btn, 34px) !important;
  --wap-nw-icon-sz: var(--wnp-mobile-icon-btn, 34px);
  border-radius: var(--wnp-shape-full) !important;
  color: var(--wnp-on-surface) !important;
  transition: background var(--wnp-dur-md) var(--wnp-ease) !important;
}

.wnp-header-mobile .wap-nw-trigger:hover,
.wnp-header-mobile .wap-account-trigger:hover {
  background: var(--wnp-primary-hover) !important;
}

.wnp-header-mobile .wap-nw-trigger .wap-nw-avatar {
  width: calc(var(--wnp-mobile-icon-btn, 34px) - 8px) !important;
  height: calc(var(--wnp-mobile-icon-btn, 34px) - 8px) !important;
  font-size: calc(var(--wnp-mobile-icon-btn, 34px) * 0.36) !important;
}

.wnp-header-mobile .wap-nw-trigger svg {
  width: var(--wnp-mobile-icon-svg, 20px) !important;
  height: var(--wnp-mobile-icon-svg, 20px) !important;
}

/* ─── Currency Switcher slot (mobile drawer) ─────────────────────────────── */
.wnp-currency-slot {
  display: inline-flex;
  align-items: center;
}
.wnp-currency-slot--mobile > * {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--wnp-shape-full);
  border: 1.5px solid var(--wnp-outline);
  font-size: 13px;
  font-weight: 600;
  color: var(--wnp-on-surface);
  cursor: pointer;
  white-space: nowrap;
}

/* ─── Remove border from currency/language switcher pills on mobile ────── */
/* WCCS and other switcher plugins add their own borders — reset them here  */
.wnp-currency-slot--mobile *,
.wnp-lang-slot--mobile * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   RTL — Mobile Header & Drawer
════════════════════════════════════════════════════════════════════ */

/* Mobile header bar: flex row reverses automatically in [dir="rtl"] */

/* Hamburger lines: no change needed (symmetric) */

/* Drawer: in RTL default side is right (slides from left by default)
   The mobile_drawer_side setting controls this — users pick in admin.
   We flip the transform direction here for RTL when side = left. */

[dir="rtl"] .wnp-drawer--left,
.wnp-rtl    .wnp-drawer--left {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

[dir="rtl"] .wnp-drawer--left.wnp-drawer--open,
.wnp-rtl    .wnp-drawer--left.wnp-drawer--open {
  transform: translateX(0);
}

[dir="rtl"] .wnp-drawer--right,
.wnp-rtl    .wnp-drawer--right {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

[dir="rtl"] .wnp-drawer--right.wnp-drawer--open,
.wnp-rtl    .wnp-drawer--right.wnp-drawer--open {
  transform: translateX(0);
}

/* Back button chevron: flip direction */
[dir="rtl"] .wnp-panel-back svg,
.wnp-rtl    .wnp-panel-back svg {
  transform: scaleX(-1);
}

/* Panel-stack slides: flip translateX direction for RTL */
[dir="rtl"] .wnp-panel,
.wnp-rtl    .wnp-panel {
  transform: translateX(-100%);
}

[dir="rtl"] .wnp-panel--active,
.wnp-rtl    .wnp-panel--active {
  transform: translateX(0);
}

[dir="rtl"] .wnp-panel--prev,
.wnp-rtl    .wnp-panel--prev {
  transform: translateX(30%);
}

/* Sub-menu chevron on parent items: flip */
[dir="rtl"] .wnp-drawer-btn svg,
.wnp-rtl    .wnp-drawer-btn svg {
  transform: scaleX(-1);
}

/* Mobile CTA arrow */
[dir="rtl"] .wnp-drawer-cta svg,
.wnp-rtl    .wnp-drawer-cta svg {
  transform: scaleX(-1);
}

/* Text alignment for nav items */
[dir="rtl"] .wnp-panel-nav__item a,
[dir="rtl"] .wnp-panel-nav__item button,
.wnp-rtl    .wnp-panel-nav__item a,
.wnp-rtl    .wnp-panel-nav__item button {
  text-align: right;
}


/* ─── ACSS 3 & 4 isolation ─────────────────────────────────────────────────
 * Mirror of desktop isolation — see header-desktop.css for full notes.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Mobile icon buttons */
.wp-nav-pro-header .wnp-icon-btn,
.wp-nav-pro-header .wnp-search-btn,
.wp-nav-pro-header .wnp-menu-toggle {
  min-inline-size: unset;
  inline-size: var(--wnp-mobile-icon-btn, 34px);
  padding-block: 0;
  padding-inline: 0;
  background: transparent;
  color: inherit;
  border-width: 0;
  border-style: none;
  border-radius: 50%;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}

/* Panel back / drawer close buttons */
.wp-nav-pro-header .wnp-panel-back,
.wp-nav-pro-header .wnp-cart-sheet__close,
.wp-nav-pro-header .wnp-drawer-btn {
  min-inline-size: unset;
  inline-size: auto;
  padding-inline: 16px;
  border-width: 0;
  border-style: none;
  border-radius: 0;
  text-transform: uppercase; /* restore our own value */
}

/* Social icon links: prevent ACSS bg--* contextual link-color overrides */
.wp-nav-pro-header .wnp-social-btn,
.wp-nav-pro-header .wnp-social-btn:hover {
  color: var(--wnp-social-icon-color, #fff);
  text-decoration: none;
}

/* Social row: undo any ACSS min-width on individual icon buttons */
.wp-nav-pro-header .wnp-social-btn {
  min-inline-size: unset;
  inline-size: auto;
  aspect-ratio: 1 / 1;
  padding-block: 0;
  padding-inline: 0;
  border-width: 0;
  border-style: none;
}