/* =========================================================================
 * Sabeny Mobile Menu — slide-out drawer matching the client screenshot.
 *
 * Two render modes:
 *   1. Inside an Elementor popup → the popup owns the chrome/backdrop;
 *      the drawer renders inline, full-height, no fixed-positioning.
 *   2. Standalone (printed via wp_footer) → drawer is a fixed right-anchored
 *      panel with its own backdrop.
 *
 * The accordion uses a horizontal sliding "track" with two stacked panels.
 * Each panel takes 100% of the drawer width; the track is 200% wide and
 * shifts left by 50% when a sub-panel is active. This avoids any
 * position:absolute height collapses inside the popup container.
 * ========================================================================= */

/* ---- BASE shell ------------------------------------------------- */
.sbn-mm {
	background: #fff;
	font-family: inherit;
	color: var(--sbn-ink, #0F172A);
}

/* Defensive reset — Elementor + theme styles love to clobber link colour,
 * underlines, and button chrome. Scope reset to the drawer only. */
.sbn-mm,
.sbn-mm * {
	box-sizing: border-box;
}
.sbn-mm a {
	text-decoration: none !important;
	color: inherit;
	background: none;
}
.sbn-mm button {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}
.sbn-mm ul,
.sbn-mm li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sbn-mm h2,
.sbn-mm h3 {
	margin: 0;
	padding: 0;
}

/* Standalone (printed via wp_footer): turn into a fixed right-edge drawer */
.sbn-mm--standalone {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .28s ease;
	z-index: 9999;
	box-shadow: -8px 0 24px rgba(15,23,42,.08);
}
.sbn-mm--standalone[aria-hidden="false"] { transform: translateX(0); }

/* Backdrop only when running standalone */
.sbn-mm--standalone-backdrop {
	position: fixed; inset: 0;
	background: rgba(15,23,42,.45);
	z-index: 9998;
	opacity: 0; pointer-events: none;
	transition: opacity .25s ease;
}
.sbn-mm--standalone-backdrop[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

/* Any non-standalone instance (Elementor popup, page widget, sidebar, etc.)
 * must NOT inherit any drawer translation or fixed positioning. The base
 * .sbn-mm already has no positioning/transform, so this just guards
 * against stray Elementor wrappers that might leak transforms in. */
.sbn-mm:not(.sbn-mm--standalone) {
	position: static;
	transform: none;
	width: 100%;
	box-shadow: none;
}

/* Kill the popup's body / column / section padding & margin so the drawer
 * hugs the top edge of the popup window. Elementor wraps shortcode widgets
 * in .elementor-section → .elementor-column → .elementor-widget; each layer
 * can add its own gutter.
 *
 * SCOPING NOTE: these selectors used to be unscoped (.elementor-popup-modal
 * any descendant), which broke other popups on the site (e.g. the side
 * cart's hover-bridge disappeared so the cart hid when you moved off the
 * basket icon). Now scoped to ONLY popups that actually contain our
 * .sbn-mm drawer via :has(). Modern browsers all support :has(); the
 * fallback below covers older ones by limiting to direct ancestry. */
.elementor-popup-modal:has(.sbn-mm) .dialog-message,
.elementor-popup-modal:has(.sbn-mm) .dialog-lightbox-message,
.dialog-widget-content:has(.sbn-mm) .dialog-message {
	padding: 0 !important;
}
.elementor-popup-modal:has(.sbn-mm) .elementor-section,
.elementor-popup-modal:has(.sbn-mm) .elementor-column,
.elementor-popup-modal:has(.sbn-mm) .elementor-widget,
.elementor-popup-modal:has(.sbn-mm) .elementor-widget-shortcode,
.elementor-popup-modal:has(.sbn-mm) .elementor-widget-shortcode .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Belt-and-braces — drawer itself can't have a stray top margin. */
.sbn-mm { margin-top: 0; }

/* ---------- HEAD ---------- */
.sbn-mm__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px;
	min-height: 60px;
}
.sbn-mm__logo {
	display: inline-flex; align-items: center;
	text-decoration: none;
	line-height: 1;
}
.sbn-mm__logo img {
	display: block;
	height: 44px;       /* 20% bigger than the previous 36px */
	width: auto;
	max-width: 220px;
}
.sbn-mm__close {
	width: 36px; height: 36px;
	background: #F1F5F9; border: 0; border-radius: 50%;
	color: var(--sbn-ink, #0F172A);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.sbn-mm__close:focus,
.sbn-mm__close:focus-visible,
.sbn-mm__close:active { outline: 0 !important; box-shadow: none !important; }
.sbn-mm__close svg { width: 16px; height: 16px; }

/* Elementor popup also injects its own × in some setups — kill its focus
 * ring too while the popup is hosting our drawer. */
.elementor-popup-modal .dialog-close-button:focus,
.elementor-popup-modal .dialog-close-button:focus-visible,
.elementor-popup-modal .dialog-lightbox-close-button:focus,
.elementor-popup-modal .dialog-lightbox-close-button:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

/* ---------- SIGN IN ROW ---------- */
.sbn-mm__split {
	display: flex;
	border-top: 1px solid #E5E7EB;
	border-bottom: 1px solid #E5E7EB;
}
.sbn-mm__split-cell {
	flex: 1 1 auto;
	display: flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 14px;
	color: var(--sbn-teal, #0F766E);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}
.sbn-mm__split-cell + .sbn-mm__split-cell { border-left: 1px solid #E5E7EB; }
.sbn-mm__split-cell svg { width: 18px; height: 18px; }
.sbn-mm__split-cell:hover { background: #F8FAFC; }

/* Special Offers cell — red accent to match the in-list offers row */
.sbn-mm__split-cell--offers { color: #DC2626; }
.sbn-mm__split-cell--offers:hover { background: #FEF2F2; }

/* ---------- PANELS (single inline list) ---------- */
.sbn-mm__panels { background: #fff; }
.sbn-mm__panel  { background: #fff; }
/* Sub panel from the old slide-implementation is hidden — accordion now
 * lives inline within each parent <li>. */
.sbn-mm__panel--sub { display: none !important; }

/* ---------- INLINE ACCORDION ---------- */
.sbn-mm__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #FAFAFA;
	border-top: 1px solid #F1F5F9;
}
.sbn-mm__sub[hidden] { display: none; }
.sbn-mm__row--sub {
	padding-left: 38px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}
/* Chevron rotates 180° when its parent is expanded */
.sbn-mm__row--toggle .sbn-mm__chev {
	transition: transform .2s ease;
}
.sbn-mm__item.is-expanded > .sbn-mm__row--toggle .sbn-mm__chev {
	transform: rotate(180deg);
}
/* The "Shop all <X>" pseudo-row gets a slight tint to set it apart */
.sbn-mm__item--all > .sbn-mm__row--sub {
	color: var(--sbn-teal, #0F766E) !important;
	font-weight: 600 !important;
}

/* List */
.sbn-mm__list { list-style: none; margin: 0; padding: 0; }
.sbn-mm__item { border-bottom: 1px solid #F1F5F9; }

/* Each row is a single <a> wrapping the label (and optional chevron-button).
 * Tapping anywhere except the chevron navigates to the page. */
.sbn-mm__row {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%;
	padding: 12px 20px;
	color: var(--sbn-ink, #0F172A) !important;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.3;
}
.sbn-mm__row:hover,
.sbn-mm__row:focus,
.sbn-mm__row:active {
	background: #F8FAFC;
	color: var(--sbn-ink, #0F172A) !important;
}
.sbn-mm__row-label { flex: 1 1 auto; }

/* Chevron expander — its own button, only this tap area opens the sub-panel */
.sbn-mm__chev-btn {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 36px;
	margin: -8px -10px -8px 0;   /* expand tap target without shifting layout */
	background: none; border: 0;
	cursor: pointer;
	color: #94A3B8;
	flex-shrink: 0;
}
.sbn-mm__chev-btn:hover { color: var(--sbn-ink, #0F172A); }
.sbn-mm__chev { width: 14px; height: 14px; transform: rotate(-90deg); }

/* Active state */
.sbn-mm__item.is-active > .sbn-mm__row { color: #16A34A !important; }
.sbn-mm__item.is-active > .sbn-mm__row .sbn-mm__chev-btn { color: #16A34A; }

/* "All <parent>" pseudo-row inside sub-panel */
.sbn-mm__item--all > .sbn-mm__row { font-weight: 600; color: var(--sbn-teal, #0F766E) !important; }

/* Sub panel header */
.sbn-mm__sub-head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid #F1F5F9;
	background: #FAFAFA;
}
.sbn-mm__sub-back {
	width: 32px; height: 32px;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 50%;
	color: var(--sbn-ink, #0F172A);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.sbn-mm__sub-back svg { width: 14px; height: 14px; }
.sbn-mm__sub-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: var(--sbn-ink, #0F172A);
}

/* ---------- PHONE ---------- */
.sbn-mm__phone {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 22px;
	background: #F8FAFC;
	border-top: 1px solid #E5E7EB;
	text-decoration: none;
	color: var(--sbn-ink, #0F172A);
}
.sbn-mm__phone svg { width: 22px; height: 22px; color: var(--sbn-ink-2, #334155); flex-shrink: 0; }
.sbn-mm__phone-body { display: flex; flex-direction: column; line-height: 1.2; }
.sbn-mm__phone-body strong { font-size: 18px; font-weight: 700; }
.sbn-mm__phone-body small  { font-size: 12px; color: var(--sbn-ink-2, #334155); margin-top: 2px; }

/* ---------- FLOATING BACK PILL ---------- */
.sbn-mm__floating-back {
	position: fixed;
	right: 24px; bottom: 24px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px;
	background: #0F172A; color: #fff;
	border: 0; border-radius: 999px;
	font-size: 14px; font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(15,23,42,.25);
	z-index: 10001;
}
.sbn-mm__floating-back svg { width: 14px; height: 14px; }
/* Hide by default. JS adds .is-shown when the sub-panel is active. */
.sbn-mm__floating-back { display: none !important; }
.sbn-mm__floating-back.is-shown { display: inline-flex !important; }