/**
 * Location: /assets/css/offcanvas-style/offcanvas-style.css
 * Purpose:
 * - Frontend CSS for Offcanvas settings.
 * - Values are applied through CSS variables set by /assets/js/offcanvas-style/offcanvas-style.js.
 *
 * Related PHP:
 * - /inc/features/offcanvas-style/offcanvas-style.php
 *
 * @package SuntechMallVPro
 */

/* ==========================================================================
   Offcanvas Style Variables
   ========================================================================== */

.stm-oc,
.stm-oc-toggle {
	--stm-os-toggle-w-desktop: 40px;
	--stm-os-toggle-h-desktop: 40px;
	--stm-os-toggle-w-tablet: 34px;
	--stm-os-toggle-h-tablet: 34px;
	--stm-os-toggle-w-mobile: 30px;
	--stm-os-toggle-h-mobile: 30px;

	--stm-os-toggle-bg: #ffffff;
	--stm-os-toggle-icon: #111827;
	--stm-os-toggle-border: #e5e7eb;
	--stm-os-toggle-radius: 10px;

	--stm-os-panel-width: 320px;
	--stm-os-panel-max-width: 86vw;
	--stm-os-panel-bg: #ffffff;
	--stm-os-panel-text: #0f172a;
	--stm-os-panel-muted: #64748b;
	--stm-os-panel-border: #e5e7eb;

	--stm-os-overlay-color: #020617;
	--stm-os-overlay-opacity: 0.55;

	--stm-os-head-bg: #ffffff;
	--stm-os-head-text: #0f172a;
	--stm-os-head-height: 64px;

	--stm-os-close-bg: #ffffff;
	--stm-os-close-text: #111827;
	--stm-os-close-border: #e5e7eb;
	--stm-os-close-radius: 10px;

	--stm-os-item-bg: #ffffff;
	--stm-os-item-text: #0f172a;
	--stm-os-item-hover-bg: #ff7a00;
	--stm-os-item-hover-text: #ffffff;
	--stm-os-item-radius: 12px;
	--stm-os-item-padding-y: 11px;
	--stm-os-item-padding-x: 12px;

	--stm-os-submenu-border: #e5e7eb;
	--stm-os-submenu-indent: 10px;
	--stm-os-focus-color: #ff7a00;
}

/* ==========================================================================
   Toggle Button
   ========================================================================== */

.stm-oc-toggle {
	width: var(--stm-os-toggle-w-desktop);
	height: var(--stm-os-toggle-h-desktop);
	border-color: var(--stm-os-toggle-border);
	border-radius: var(--stm-os-toggle-radius);
	background: var(--stm-os-toggle-bg);
	box-shadow: none;
}

.stm-oc-toggle:not(.stm-offcanvas-style--toggle-border) {
	border-color: transparent !important;
}

.stm-oc-toggle__icon {
	background-image:
		linear-gradient(var(--stm-os-toggle-icon), var(--stm-os-toggle-icon)),
		linear-gradient(var(--stm-os-toggle-icon), var(--stm-os-toggle-icon)),
		linear-gradient(var(--stm-os-toggle-icon), var(--stm-os-toggle-icon));
}

.stm-oc-toggle:hover {
	border-color: var(--stm-os-toggle-border);
}

.stm-oc-toggle:focus-visible {
	outline: 2px solid var(--stm-os-focus-color);
	outline-offset: 2px;
}

/* ==========================================================================
   Panel Shell
   ========================================================================== */

/*
 * Safe overlay override:
 * Core offcanvas.css uses a hardcoded dark background.
 * This selector keeps the open/close behavior untouched and only lets
 * Offcanvas Settings control overlay color + opacity.
 */
.stm-oc .stm-oc__overlay,
body .stm-oc .stm-oc__overlay {
	background: var(--stm-os-overlay-color) !important;
	opacity: var(--stm-os-overlay-opacity) !important;
}

.stm-oc__panel {
	width: var(--stm-os-panel-width);
	max-width: var(--stm-os-panel-max-width);
	background: var(--stm-os-panel-bg);
	color: var(--stm-os-panel-text);
	box-shadow: none;
}

.stm-oc.stm-offcanvas-style--panel-shadow .stm-oc__panel {
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   Panel Header
   ========================================================================== */

.stm-oc__head {
	min-height: var(--stm-os-head-height);
	padding-top: 0;
	padding-bottom: 0;
	background: var(--stm-os-head-bg);
	border-bottom-color: var(--stm-os-panel-border);
}

.stm-oc__title {
	color: var(--stm-os-head-text);
}

.stm-oc__close {
	border-color: var(--stm-os-close-border);
	border-radius: var(--stm-os-close-radius);
	background: var(--stm-os-close-bg);
	color: var(--stm-os-close-text);
}

.stm-oc__close:hover {
	border-color: var(--stm-os-close-border);
}

.stm-oc__close:focus-visible {
	outline: 2px solid var(--stm-os-focus-color);
	outline-offset: 2px;
}

/* ==========================================================================
   Navigation / Menu Items
   ========================================================================== */

.stm-oc__nav {
	color: var(--stm-os-panel-text);
}

.stm-oc__link,
.stm-oc__parent {
	padding: var(--stm-os-item-padding-y) var(--stm-os-item-padding-x);
	border-radius: var(--stm-os-item-radius);
	background: var(--stm-os-item-bg);
	color: var(--stm-os-item-text);
}

.stm-oc__link:hover,
.stm-oc__parent:hover,
.stm-oc__item:hover > .stm-oc__link,
.stm-oc__item:hover > .stm-oc__parent {
	background: var(--stm-os-item-hover-bg);
	color: var(--stm-os-item-hover-text);
}

.stm-oc__link:focus-visible,
.stm-oc__parent:focus-visible {
	outline: 2px solid var(--stm-os-focus-color);
	outline-offset: 2px;
	background: var(--stm-os-item-hover-bg);
	color: var(--stm-os-item-hover-text);
}

.stm-oc__sub {
	padding-left: var(--stm-os-submenu-indent);
	border-left-color: var(--stm-os-submenu-border);
}

.stm-oc__sub .stm-oc__link {
	color: var(--stm-os-item-text);
}

.stm-oc__sub .stm-oc__link:hover,
.stm-oc__sub .stm-oc__link:focus-visible {
	background: var(--stm-os-item-hover-bg);
	color: var(--stm-os-item-hover-text);
}

.stm-oc__note {
	color: var(--stm-os-panel-muted);
}

/* ==========================================================================
   Behavior States
   ========================================================================== */

.stm-offcanvas-style--disabled,
.stm-offcanvas-style--disabled .stm-oc__panel,
.stm-offcanvas-style--disabled .stm-oc__overlay {
	display: none !important;
}

body.stm-offcanvas-style-disabled .stm-oc-toggle {
	display: none !important;
}

/* ==========================================================================
   Responsive Toggle Sizes
   ========================================================================== */

@media (max-width: 1024px) {
	.stm-oc-toggle {
		width: var(--stm-os-toggle-w-tablet);
		height: var(--stm-os-toggle-h-tablet);
	}
}

@media (max-width: 480px) {
	.stm-oc-toggle {
		width: var(--stm-os-toggle-w-mobile);
		height: var(--stm-os-toggle-h-mobile);
	}
}