/**
 * KOSTUM Mobile Bottom Bar – frontend styles (mobile only).
 * Palette aligned with kostum.by / OceanWP: #232323 text, #818a91 muted, #e5e5e5 borders.
 */

:root {
	--kmb-bar-height: 64px;
	--kmb-bar-bg: #ffffff;
	--kmb-bar-border: #e5e5e5;
	--kmb-bar-text: #232323;
	--kmb-bar-muted: #818a91;
	--kmb-bar-accent: #232323;
	--kmb-bar-hover-bg: rgba(237, 237, 237, 0.55);
	--kmb-bar-active-bg: rgba(237, 237, 237, 0.85);
	--kmb-bar-badge-bg: #c0392b;
	--kmb-bar-badge-text: #ffffff;
	--kmb-bar-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
	body.has-kostum-mobile-bar {
		padding-bottom: 0 !important;
	}

	.kmb-bar,
	.kmb-search-overlay {
		display: none !important;
	}
}

@media (max-width: 767px) {
	body.has-kostum-mobile-bar {
		padding-bottom: calc(var(--kmb-bar-height) + env(safe-area-inset-bottom, 0px));
	}

	.kmb-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: 0;
		min-height: var(--kmb-bar-height);
		padding: 0 2px env(safe-area-inset-bottom, 0px);
		background: var(--kmb-bar-bg);
		border-top: 1px solid var(--kmb-bar-border);
		box-shadow: var(--kmb-bar-shadow);
	}

	.kmb-bar__item {
		flex: 1 1 25%;
		max-width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: var(--kmb-bar-height);
		padding: 7px 2px 9px;
		border: 0;
		background: transparent;
		color: var(--kmb-bar-text);
		text-decoration: none;
		font: inherit;
		cursor: pointer;
		border-radius: 0;
		transition: background-color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.kmb-bar__item:hover,
	.kmb-bar__item:focus-visible {
		background: var(--kmb-bar-hover-bg);
		outline: none;
	}

	.kmb-bar__item:active {
		background: var(--kmb-bar-active-bg);
		opacity: 1;
	}

	.kmb-bar__item--address {
		background: transparent;
		color: var(--kmb-bar-text);
	}

	.kmb-bar__item--address:hover,
	.kmb-bar__item--address:focus-visible {
		background: rgba(255, 255, 255, 0.72);
	}

	.kmb-bar__item--address:active {
		background: var(--kmb-bar-active-bg);
	}

	.kmb-bar__icon-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.kmb-bar__icon {
		width: 22px;
		height: 22px;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.kmb-bar__label {
		font-size: 10px;
		line-height: 1.2;
		color: var(--kmb-bar-muted);
		white-space: nowrap;
		letter-spacing: 0.01em;
	}

	.kmb-cart-badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--kmb-bar-badge-bg);
		color: var(--kmb-bar-badge-text);
		font-size: 10px;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
	}

	.kmb-cart-badge--hidden {
		display: none;
	}

	.kmb-search-overlay {
		position: fixed;
		inset: 0;
		z-index: 10000;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 16px;
		padding-top: calc(16px + env(safe-area-inset-top, 0px));
	}

	.kmb-search-overlay[hidden] {
		display: none !important;
	}

	.kmb-search-overlay__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
	}

	.kmb-search-overlay__panel {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 560px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
		padding: 16px;
	}

	.kmb-search-overlay__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.kmb-search-overlay__title {
		margin: 0;
		font-size: 18px;
		line-height: 1.3;
		color: var(--kmb-bar-accent);
	}

	.kmb-search-overlay__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 999px;
		background: #ededed;
		color: var(--kmb-bar-accent);
		cursor: pointer;
	}

	.kmb-icon--close {
		width: 18px;
		height: 18px;
	}

	.kmb-search-form {
		display: flex;
		gap: 8px;
	}

	.kmb-search-form__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		font-size: 16px;
	}

	.kmb-search-form__submit {
		flex: 0 0 auto;
		height: 44px;
		padding: 0 16px;
		border: 0;
		border-radius: 8px;
		background: var(--kmb-bar-accent);
		color: #ffffff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	body.kmb-search-open {
		overflow: hidden;
	}

	/* OceanWP scroll-to-top: lift above fixed bottom bar */
	body.has-kostum-mobile-bar #scroll-top {
		bottom: calc(var(--kmb-bar-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 9998;
	}
}