/**
 * Mobile UI: tab bar, compact header, filter drawer, safe areas
 */

/* Viewport / notch safe areas */
@supports (padding-top: env(safe-area-inset-top)) {
	.site-header {
		padding-top: env(safe-area-inset-top);
	}
}

body.has-mobile-tab-bar {
	--mobile-tab-height: 56px;
	padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px));
}

body.has-mobile-tab-bar .yunfanzhi-sticky-cart {
	bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px));
}

/* Mobile bottom tab bar */
.yunfanzhi-mobile-tab-bar {
	display: none;
}

@media (max-width: 768px) {
	.yunfanzhi-mobile-tab-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background: var(--color-bg);
		border-top: 1px solid var(--color-border);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
	}

	.mobile-tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 56px;
		padding: 6px 4px;
		font-size: 11px;
		font-weight: 500;
		color: var(--color-text-muted, #64748b);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.mobile-tab-item.is-active {
		color: var(--color-primary);
	}

	.mobile-tab-icon-wrap {
		position: relative;
		display: inline-flex;
	}

	.mobile-tab-badge {
		position: absolute;
		top: -4px;
		right: -8px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--color-accent, #ea580c);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	body.has-mobile-saved-tab .yunfanzhi-mobile-tab-bar.has-saved-tab .mobile-tab-item {
		font-size: 10px;
		padding: 6px 2px;
		gap: 1px;
	}

	body.has-mobile-saved-tab .yunfanzhi-mobile-tab-bar.has-saved-tab .mobile-tab-item svg {
		width: 20px;
		height: 20px;
	}

	.mobile-tab-badge--saved {
		background: var(--color-primary, #0d9488);
	}

	/* Hide redundant top navigation when bottom tab bar is active */
	body.has-mobile-tab-bar.has-hide-mobile-header-nav .main-navigation {
		display: none !important;
	}

	body.has-mobile-tab-bar.has-hide-mobile-header-nav .header-account,
	body.has-mobile-tab-bar.has-hide-mobile-header-nav .header-cart-wrap {
		display: none !important;
	}

	body.has-mobile-tab-bar.has-hide-mobile-header-nav .header-main-inner {
		flex-wrap: nowrap;
	}

	/* Hide entire site header on mobile when bottom tab bar is active */
	body.has-mobile-tab-bar.has-mobile-hidden-header #masthead {
		display: none !important;
	}

	body.has-mobile-tab-bar.has-mobile-hidden-header {
		--header-height: 0px;
		padding-top: env(safe-area-inset-top, 0px);
	}

	body.has-mobile-tab-bar.has-mobile-hidden-header .site-main {
		padding-top: 0;
	}

	body.has-mobile-tab-bar.has-mobile-hidden-header .yunfanzhi-support-widget {
		top: auto;
	}

	/* Hide site footer + floating support when bottom tab bar is active */
	body.has-mobile-tab-bar .marketplace-site-footer {
		display: none;
	}

	body.has-mobile-tab-bar .yunfanzhi-support-widget {
		display: none !important;
	}

	/* Legacy compact header helper */
	body.has-compact-mobile-header .header-action-mobile-hide {
		display: none !important;
	}

	/* Mobile search toggle — icon only on small screens */
	body.has-mobile-search-toggle .header-search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--color-text);
		cursor: pointer;
	}

	body.has-mobile-search-toggle .header-search {
		display: none;
		width: 100%;
		order: 5;
	}

	body.has-mobile-search-toggle .header-search.is-open {
		display: flex;
		margin-top: 4px;
	}

	body.has-mobile-search-toggle .header-search.is-open input[type="search"] {
		width: 100%;
		flex: 1;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Shop filter drawer */
	.shop-toolbar-mobile {
		display: none;
		margin-bottom: 16px;
	}

	body.yunfanzhi-has-shop-sidebar .shop-toolbar-mobile {
		display: block;
	}

	.yunfanzhi-has-shop-sidebar .shop-sidebar {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		width: min(320px, 88vw);
		margin: 0;
		padding: 16px;
		background: var(--color-bg);
		border-left: 1px solid var(--color-border);
		box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		visibility: hidden;
	}

	body.filter-drawer-open .shop-sidebar {
		transform: translateX(0);
		visibility: visible;
	}

	.shop-filter-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--color-border);
	}

	.shop-filter-drawer-header h2 {
		margin: 0;
		font-size: 16px;
	}

	.shop-filter-drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		background: var(--color-bg-alt);
		border-radius: var(--radius-md);
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.shop-filter-drawer-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(15, 23, 42, 0.45);
	}

	body:not(.filter-drawer-open) .shop-filter-drawer-backdrop {
		display: none !important;
	}

	body.filter-drawer-open {
		overflow: hidden;
	}

	/* Hide sidebar in document flow on mobile (drawer only) */
	.yunfanzhi-has-shop-sidebar .shop-layout.has-sidebar .shop-sidebar {
		margin-bottom: 0;
	}

	.yunfanzhi-has-shop-sidebar .shop-layout.has-sidebar {
		display: block;
	}

	/* Product card touch targets */
	.woocommerce ul.products li.product .button {
		min-height: 44px;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.shop-filter-drawer-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
	}
}

@media (min-width: 769px) {
	.shop-filter-drawer-header,
	.shop-filter-drawer-close,
	.shop-toolbar-mobile,
	.shop-filter-drawer-backdrop {
		display: none !important;
	}
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.yunfanzhi-mobile-tab-bar {
		padding-bottom: env(safe-area-inset-bottom);
	}

	body.has-mobile-tab-bar {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}
}

/* Trust / help pages — mobile reading mode (minimal chrome) */
.marketplace-trust-mobile-bar {
	display: none;
}

@media (max-width: 768px) {
	body.is-trust-mobile-reading #masthead {
		display: none !important;
	}

	body.is-trust-mobile-reading .site-footer {
		display: none !important;
	}

	body.is-trust-mobile-reading .yunfanzhi-support-widget {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	body.is-trust-mobile-reading .marketplace-trust-mobile-bar {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		align-items: center;
		gap: 8px;
		position: sticky;
		top: 0;
		z-index: 120;
		margin: -8px calc(-1 * var(--site-shell-gutter, 16px)) 12px;
		padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px;
		border-bottom: 1px solid var(--color-border, #e2e8f0);
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(8px);
	}

	body.is-trust-mobile-reading .marketplace-trust-mobile-bar__back,
	body.is-trust-mobile-reading .marketplace-trust-mobile-bar__home {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 999px;
		color: var(--color-text, #101828);
		text-decoration: none;
	}

	body.is-trust-mobile-reading .marketplace-trust-mobile-bar__title {
		margin: 0;
		overflow: hidden;
		color: var(--color-text, #101828);
		font-size: 15px;
		font-weight: 800;
		line-height: 1.3;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.is-trust-mobile-reading .marketplace-trust-page,
	body.is-trust-mobile-reading .page-about,
	body.is-trust-mobile-reading .page-company,
	body.is-trust-mobile-reading .page-faq,
	body.is-trust-mobile-reading .page-shipping-policy,
	body.is-trust-mobile-reading .page-returns-policy,
	body.is-trust-mobile-reading .page-guest-aftersales,
	body.is-trust-mobile-reading .page-trust-generic {
		padding-top: 8px;
		padding-bottom: 24px;
	}

	body.is-trust-mobile-reading .marketplace-trust-nav {
		margin-bottom: 4px;
	}

	body.is-trust-mobile-reading .policy-page-article .page-header,
	body.is-trust-mobile-reading .marketplace-trust-header {
		padding-top: 18px;
	}

	body.is-trust-mobile-reading .marketplace-trust-kicker {
		display: none;
	}
}

[data-theme="dark"] body.is-trust-mobile-reading .marketplace-trust-mobile-bar {
	background: rgba(15, 23, 42, 0.96);
}