/**
 * DAF Marketplace — Header Offcanvas
 * Location: /wp-content/plugins/daf-marketplace/assets/css/header/header-offcanvas.css
 *
 * Purpose:
 * - Style the premium mobile/tablet off-canvas menu.
 * - Keep off-canvas styling isolated from header-mobile.css.
 * - Match the DAF Marketplace mobile drawer design language.
 * - Keep 20x20 offcanvas SVG icons visually centered inside soft icon boxes.
 * - Keep offcanvas colors consistent across all pages/themes.
 * - Force offcanvas above WordPress admin bar and all theme layers.
 */

:root {
	--daf-mp-offcanvas-green: #7fb238;
	--daf-mp-offcanvas-green-hover: #72a332;
	--daf-mp-offcanvas-green-light: #f5faef;
	--daf-mp-offcanvas-green-soft: rgba(127, 178, 56, 0.11);
	--daf-mp-offcanvas-green-border: rgba(127, 178, 56, 0.35);
	--daf-mp-offcanvas-text: #0f172a;
	--daf-mp-offcanvas-muted: #64748b;
	--daf-mp-offcanvas-faint: #94a3b8;
	--daf-mp-offcanvas-line: #e8eef5;
	--daf-mp-offcanvas-soft-line: #eef2f7;
	--daf-mp-offcanvas-white: #ffffff;
	--daf-mp-offcanvas-z: 2147483647;
}

.daf-mp-lock-scroll {
	overflow: hidden !important;
}

.daf-mp-offcanvas[hidden] {
	display: none !important;
}

.daf-mp-offcanvas {
	position: fixed !important;
	inset: 0 !important;
	z-index: var(--daf-mp-offcanvas-z) !important;
	display: block !important;
	pointer-events: none !important;
	color: var(--daf-mp-offcanvas-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	isolation: isolate !important;
}

.daf-mp-offcanvas *,
.daf-mp-offcanvas *::before,
.daf-mp-offcanvas *::after {
	box-sizing: border-box !important;
}

.daf-mp-offcanvas__overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: calc(var(--daf-mp-offcanvas-z) - 2) !important;
	background: rgba(15, 23, 42, 0.58) !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0 !important;
	pointer-events: auto !important;
	transition: opacity 0.24s ease !important;
}

.daf-mp-mobile-open .daf-mp-offcanvas__overlay {
	opacity: 1 !important;
}

.daf-mp-offcanvas__dialog {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: calc(var(--daf-mp-offcanvas-z) - 1) !important;
	width: min(86vw, 380px) !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	background: var(--daf-mp-offcanvas-white) !important;
	border-radius: 0 22px 22px 0 !important;
	box-shadow: 24px 0 70px rgba(15, 23, 42, 0.22) !important;
	transform: translateX(-104%) !important;
	transition: transform 0.28s cubic-bezier(0.2, 0.78, 0.28, 1) !important;
	overflow: hidden !important;
	pointer-events: auto !important;
	will-change: transform !important;
}

.daf-mp-mobile-open .daf-mp-offcanvas__dialog {
	transform: translateX(0) !important;
}

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

.daf-mp-offcanvas__header {
	flex: 0 0 auto !important;
	min-height: 72px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	padding: 16px 18px !important;
	border-bottom: 1px solid var(--daf-mp-offcanvas-line) !important;
	background: var(--daf-mp-offcanvas-white) !important;
}

.daf-mp-offcanvas__branding {
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.daf-mp-offcanvas__branding .daf-mp-header-logo,
.daf-mp-offcanvas__branding .daf-mp-header-logo a {
	display: inline-flex !important;
	align-items: center !important;
	min-width: 0 !important;
	text-decoration: none !important;
	color: var(--daf-mp-offcanvas-text) !important;
}

.daf-mp-offcanvas__branding .daf-mp-header-logo__image {
	max-height: 34px !important;
	width: auto !important;
	display: block !important;
}

.daf-mp-offcanvas__branding .daf-mp-header-logo__text {
	color: var(--daf-mp-offcanvas-text) !important;
	font-size: 21px !important;
	font-weight: 850 !important;
	letter-spacing: -0.035em !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.daf-mp-offcanvas__close {
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 13px !important;
	background: var(--daf-mp-offcanvas-white) !important;
	color: var(--daf-mp-offcanvas-text) !important;
	cursor: pointer !important;
	line-height: 1 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.daf-mp-offcanvas__close:hover,
.daf-mp-offcanvas__close:focus {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	color: var(--daf-mp-offcanvas-green) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.daf-mp-offcanvas__close svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* ==========================================================================
   Content
   ========================================================================== */

.daf-mp-offcanvas__content {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	padding: 16px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
	background:
		linear-gradient(180deg, rgba(127, 178, 56, 0.06) 0%, rgba(255, 255, 255, 0) 230px),
		var(--daf-mp-offcanvas-white) !important;
}

.daf-mp-offcanvas__content::-webkit-scrollbar {
	width: 6px !important;
}

.daf-mp-offcanvas__content::-webkit-scrollbar-track {
	background: transparent !important;
}

.daf-mp-offcanvas__content::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.5) !important;
	border-radius: 999px !important;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.daf-mp-offcanvas__profile {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px !important;
	border: 1px solid var(--daf-mp-offcanvas-line) !important;
	border-radius: 18px !important;
	background: #f8fbf5 !important;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.daf-mp-offcanvas__avatar {
	position: relative !important;
	flex: 0 0 auto !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 17px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--daf-mp-offcanvas-white) !important;
	border: 1px solid rgba(127, 178, 56, 0.24) !important;
	overflow: visible !important;
	box-shadow: 0 10px 22px rgba(127, 178, 56, 0.12) !important;
}

.daf-mp-offcanvas__avatar img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 16px !important;
	object-fit: cover !important;
	display: block !important;
}

.daf-mp-offcanvas__avatar span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	font-weight: 850 !important;
	color: var(--daf-mp-offcanvas-green) !important;
	line-height: 1 !important;
}

.daf-mp-offcanvas__avatar i {
	position: absolute !important;
	right: -2px !important;
	bottom: -2px !important;
	width: 13px !important;
	height: 13px !important;
	border: 2px solid var(--daf-mp-offcanvas-white) !important;
	border-radius: 50% !important;
	background: var(--daf-mp-offcanvas-green) !important;
	box-shadow: 0 0 0 3px rgba(127, 178, 56, 0.18) !important;
}

.daf-mp-offcanvas__profile-meta {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.daf-mp-offcanvas__profile-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	margin-bottom: 3px !important;
}

.daf-mp-offcanvas__profile-row strong {
	min-width: 0 !important;
	color: var(--daf-mp-offcanvas-text) !important;
	font-size: 15px !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.daf-mp-offcanvas__profile-row span {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 20px !important;
	padding: 0 8px !important;
	border-radius: 999px !important;
	background: var(--daf-mp-offcanvas-green) !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

.daf-mp-offcanvas__profile-meta p {
	margin: 0 !important;
	color: var(--daf-mp-offcanvas-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.daf-mp-offcanvas__stats {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 7px !important;
	margin: 12px 0 14px !important;
}

.daf-mp-offcanvas__stat {
	min-width: 0 !important;
	min-height: 58px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px 4px !important;
	border: 1px solid var(--daf-mp-offcanvas-line) !important;
	border-radius: 15px !important;
	background: var(--daf-mp-offcanvas-white) !important;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important;
}

.daf-mp-offcanvas__stat strong {
	color: var(--daf-mp-offcanvas-text) !important;
	font-size: 16px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
}

.daf-mp-offcanvas__stat span {
	margin-top: 5px !important;
	color: var(--daf-mp-offcanvas-muted) !important;
	font-size: 10px !important;
	font-weight: 750 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

/* ==========================================================================
   Sections + Links
   ========================================================================== */

.daf-mp-offcanvas__section {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 8px 0 !important;
	border-top: 1px solid var(--daf-mp-offcanvas-soft-line) !important;
}

.daf-mp-offcanvas__section--main {
	border-top: 0 !important;
	padding-top: 0 !important;
}

.daf-mp-offcanvas__section-title {
	margin: 10px 0 6px !important;
	color: var(--daf-mp-offcanvas-faint) !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
}

/*
 * Link color lock:
 * Strong specificity and !important prevent theme/page global anchor CSS
 * from turning offcanvas labels blue on non-front pages.
 */
.daf-mp-offcanvas .daf-mp-offcanvas__link,
.daf-mp-offcanvas .daf-mp-offcanvas__link:link,
.daf-mp-offcanvas .daf-mp-offcanvas__link:visited,
.daf-mp-offcanvas .daf-mp-offcanvas__link:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__link:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__link:active {
	min-height: 44px !important;
	display: grid !important;
	grid-template-columns: 36px minmax(0, 1fr) 18px !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 7px 9px 7px 7px !important;
	border-radius: 14px !important;
	color: var(--daf-mp-offcanvas-text) !important;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__link:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__link:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__link.is-current,
.daf-mp-offcanvas .daf-mp-offcanvas__link[aria-current="page"] {
	background: var(--daf-mp-offcanvas-green-light) !important;
	color: var(--daf-mp-offcanvas-text) !important;
	text-decoration: none !important;
	transform: translateX(2px) !important;
}

/*
 * Icon box:
 * Center the visible SVG artwork inside a fixed premium green box.
 * This block intentionally avoids nested absolute layout noise because theme CSS
 * and uneven SVG path weight can visually push icons off-center.
 */
.daf-mp-offcanvas__link-icon {
	position: relative !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border-radius: 12px !important;
	background: var(--daf-mp-offcanvas-green-soft) !important;
	color: var(--daf-mp-offcanvas-green) !important;
	line-height: 1 !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/*
 * SVG center lock:
 * Keep the 20x20 SVG canvas centered, then apply tiny optical corrections
 * per icon where the SVG artwork itself is naturally heavier on one side.
 */
.daf-mp-offcanvas__link-icon svg,
.daf-mp-offcanvas__link-icon .daf-mp-offcanvas__svg {
	position: static !important;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: currentColor !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	overflow: visible !important;
	transform: translate3d(0, 0, 0) !important;
	transform-origin: 50% 50% !important;
	box-sizing: border-box !important;
}

.daf-mp-offcanvas__link-icon img,
.daf-mp-offcanvas__link-icon > span,
.daf-mp-offcanvas__link-icon > i {
	position: static !important;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: currentColor !important;
	line-height: 1 !important;
	object-fit: contain !important;
	transform: translate3d(0, 0, 0) !important;
	transform-origin: 50% 50% !important;
	box-sizing: border-box !important;
}

.daf-mp-offcanvas__link-icon svg path,
.daf-mp-offcanvas__link-icon svg rect,
.daf-mp-offcanvas__link-icon svg circle,
.daf-mp-offcanvas__link-icon svg line,
.daf-mp-offcanvas__link-icon svg polyline {
	vector-effect: non-scaling-stroke !important;
}

/*
 * Per-icon optical tuning:
 * These corrections move only the visible SVG artwork by 0.5px to 1px where needed.
 * They do not change the icon box layout.
 */
.daf-mp-offcanvas__link-icon[data-icon="home"] svg {
	transform: translate3d(0, -0.5px, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="marketplace"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="docs"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="blog"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="categories"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="dashboard"] svg {
	transform: translate3d(0, -0.5px, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="account"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="orders"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="downloads"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="wishlist"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="compare"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-icon[data-icon="support"] svg {
	transform: translate3d(0, 0, 0) !important;
}

.daf-mp-offcanvas__link-label {
	min-width: 0 !important;
	color: var(--daf-mp-offcanvas-text) !important;
	font-size: 14px !important;
	font-weight: 750 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-decoration: none !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__link:hover .daf-mp-offcanvas__link-label,
.daf-mp-offcanvas .daf-mp-offcanvas__link:focus .daf-mp-offcanvas__link-label,
.daf-mp-offcanvas .daf-mp-offcanvas__link.is-current .daf-mp-offcanvas__link-label,
.daf-mp-offcanvas .daf-mp-offcanvas__link[aria-current="page"] .daf-mp-offcanvas__link-label {
	color: var(--daf-mp-offcanvas-text) !important;
	text-decoration: none !important;
}

.daf-mp-offcanvas__link-chevron {
	width: 18px !important;
	height: 18px !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #94a3b8 !important;
	line-height: 1 !important;
}

.daf-mp-offcanvas__link-chevron svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.daf-mp-offcanvas__cta {
	display: flex !important;
	flex-direction: column !important;
	gap: 9px !important;
	padding: 14px 0 2px !important;
	border-top: 1px solid var(--daf-mp-offcanvas-soft-line) !important;
	margin-top: 8px !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:link,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:visited,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:active,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:link,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:visited,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:active {
	min-height: 46px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	border-radius: 15px !important;
	font-size: 14px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:link,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:visited {
	background: var(--daf-mp-offcanvas-green) !important;
	color: #ffffff !important;
	border: 1px solid var(--daf-mp-offcanvas-green) !important;
	box-shadow: 0 14px 26px rgba(127, 178, 56, 0.24) !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-primary:active {
	background: var(--daf-mp-offcanvas-green-hover) !important;
	border-color: var(--daf-mp-offcanvas-green-hover) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 16px 30px rgba(127, 178, 56, 0.3) !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:link,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:visited {
	border: 1px solid var(--daf-mp-offcanvas-green-border) !important;
	background: var(--daf-mp-offcanvas-white) !important;
	color: #6f9f2f !important;
}

.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:hover,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:focus,
.daf-mp-offcanvas .daf-mp-offcanvas__cta-secondary:active {
	background: var(--daf-mp-offcanvas-green-light) !important;
	border-color: rgba(127, 178, 56, 0.56) !important;
	color: #5f8e25 !important;
	transform: translateY(-1px) !important;
}

.daf-mp-offcanvas__cta-primary span,
.daf-mp-offcanvas__cta-secondary span {
	width: 20px !important;
	height: 20px !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

.daf-mp-offcanvas__cta-primary svg,
.daf-mp-offcanvas__cta-secondary svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	fill: none !important;
	stroke: currentColor !important;
}

/*
 * Compatibility with old mobile panel class names.
 */
.daf-mp-mobile-panel__dialog.daf-mp-offcanvas__dialog {
	max-width: none !important;
	background: var(--daf-mp-offcanvas-white) !important;
}

/* WordPress admin bar should never appear above offcanvas */
body.daf-mp-lock-scroll #wpadminbar {
	z-index: 1 !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
	.daf-mp-offcanvas__dialog {
		width: min(78vw, 410px) !important;
	}

	.daf-mp-offcanvas__header {
		min-height: 76px !important;
		padding: 17px 20px !important;
	}

	.daf-mp-offcanvas__content {
		padding: 18px !important;
	}
}

@media (max-width: 767px) {
	.daf-mp-offcanvas__dialog {
		width: min(88vw, 360px) !important;
		border-radius: 0 20px 20px 0 !important;
	}

	.daf-mp-offcanvas__header {
		min-height: 66px !important;
		padding: 13px 15px !important;
	}

	.daf-mp-offcanvas__content {
		padding: 14px !important;
	}

	.daf-mp-offcanvas__profile {
		padding: 11px !important;
		border-radius: 17px !important;
	}

	.daf-mp-offcanvas__avatar {
		width: 48px !important;
		height: 48px !important;
		border-radius: 16px !important;
	}

	.daf-mp-offcanvas__avatar img {
		border-radius: 15px !important;
	}

	.daf-mp-offcanvas__stats {
		gap: 6px !important;
	}

	.daf-mp-offcanvas__stat {
		min-height: 55px !important;
		border-radius: 14px !important;
	}

	.daf-mp-offcanvas__stat strong {
		font-size: 15px !important;
	}

	.daf-mp-offcanvas__stat span {
		font-size: 9.5px !important;
	}

	.daf-mp-offcanvas .daf-mp-offcanvas__link,
	.daf-mp-offcanvas .daf-mp-offcanvas__link:link,
	.daf-mp-offcanvas .daf-mp-offcanvas__link:visited,
	.daf-mp-offcanvas .daf-mp-offcanvas__link:hover,
	.daf-mp-offcanvas .daf-mp-offcanvas__link:focus,
	.daf-mp-offcanvas .daf-mp-offcanvas__link:active {
		min-height: 43px !important;
		grid-template-columns: 34px minmax(0, 1fr) 18px !important;
		gap: 9px !important;
	}

	.daf-mp-offcanvas__link-icon {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		border-radius: 12px !important;
	}

		.daf-mp-offcanvas__link-icon svg,
	.daf-mp-offcanvas__link-icon .daf-mp-offcanvas__svg,
	.daf-mp-offcanvas__link-icon img,
	.daf-mp-offcanvas__link-icon > span,
	.daf-mp-offcanvas__link-icon > i {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		min-height: 20px !important;
		max-width: 20px !important;
		max-height: 20px !important;
	}
}

@media (max-width: 389px) {
	.daf-mp-offcanvas__dialog {
		width: min(92vw, 330px) !important;
	}

	.daf-mp-offcanvas__content {
		padding: 12px !important;
	}

	.daf-mp-offcanvas__profile-row {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 5px !important;
	}

	.daf-mp-offcanvas__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.daf-mp-offcanvas__stat {
		min-height: 52px !important;
	}
}

@media (max-width: 340px) {
	.daf-mp-offcanvas__dialog {
		width: calc(100vw - 18px) !important;
		border-radius: 0 16px 16px 0 !important;
	}

	.daf-mp-offcanvas__header {
		padding-inline: 12px !important;
	}

	.daf-mp-offcanvas__content {
		padding: 10px !important;
	}
}