/* ==========================================================
   FURNI SEARCH v1.2 – MEGAMENU WYSZUKIWARKI
   Palette: #111 (contrast), #a17c44 (brand), #fff (base)
   Font: Manrope (inherited from theme)
   ========================================================== */

/* ----- CSS VARIABLES ----- */
:root {
	--furni-search-brand: #a17c44;
	--furni-search-brand-light: #c9a66b;
	--furni-search-brand-bg: rgba(161, 124, 68, 0.08);
	--furni-search-text: #111;
	--furni-search-text-secondary: #686868;
	--furni-search-bg: #fff;
	--furni-search-border: #e8e5e0;
	--furni-search-radius: 8px;
	--furni-search-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
	--furni-search-max-width: 960px;
	--furni-search-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================
   WP BLOCK THEME RESET
   Twenty Twenty-Five .is-layout-constrained applies:
     max-width: 645px; margin-left: auto !important;
     margin-right: auto !important;
   on descendant elements. We must nuke all of that.
   ========================================================== */
.furni-search-modal,
.furni-search-modal *,
.furni-search-overlay {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
}

/* Restore centering ONLY on modal-inner (needs auto margins) */
.furni-search-modal .furni-search-modal-inner {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Restore specific margins we actually need */
.furni-search-modal .furni-search-section-title {
	margin-bottom: 16px !important;
}

.furni-search-modal .furni-search-footer {
	margin-top: 24px !important;
}

.furni-search-modal .furni-search-product-price {
	margin-top: 6px !important;
}

/* =========================
   TOGGLE BUTTON (HEADER NAV)
========================= */
.furni-search-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 8px 10px;
	margin-right: 20px !important;
	margin-left: 0 !important;
	border-radius: var(--furni-search-radius);
	transition: color var(--furni-search-transition), background var(--furni-search-transition);
	vertical-align: middle;
	line-height: 1;
	flex-shrink: 0;
}

.furni-search-toggle:hover {
	color: var(--furni-search-brand);
	background: var(--furni-search-brand-bg);
}

.furni-search-toggle-label {
	font-size: 14px;
	font-weight: 500;
}

.furni-search-icon {
	display: block;
	flex-shrink: 0;
}

/* =========================
   OVERLAY
========================= */
.furni-search-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--furni-search-transition);
	z-index: 99998;
}

body.furni-search-open .furni-search-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* =========================
   MODAL
========================= */
.furni-search-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity var(--furni-search-transition), transform var(--furni-search-transition);
	box-sizing: border-box !important;
}

body.furni-search-open .furni-search-modal {
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0);
}

body.admin-bar .furni-search-modal {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar .furni-search-modal {
		top: 46px !important;
	}
}

.furni-search-modal .furni-search-modal-inner {
	background: var(--furni-search-bg);
	width: calc(100vw - 32px) !important;
	max-width: var(--furni-search-max-width) !important;
	border-radius: 0 0 16px 16px;
	box-shadow: var(--furni-search-shadow);
	max-height: 85vh;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

@media (min-width: 1100px) {
	.furni-search-modal .furni-search-modal-inner {
		max-width: 1060px !important;
	}
}

/* =========================
   HEADER – INPUT
========================= */
.furni-search-modal .furni-search-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 12px;
	padding: 20px 24px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border-bottom: 1px solid var(--furni-search-border);
}

.furni-search-modal .furni-search-input-wrap {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center;
	gap: 12px;
	background: #f7f6f3;
	border-radius: var(--furni-search-radius);
	padding: 0 16px !important;
	width: auto !important;
	transition: box-shadow var(--furni-search-transition);
}

.furni-search-input-wrap:focus-within {
	box-shadow: 0 0 0 2px var(--furni-search-brand-light);
}

.furni-search-input-icon {
	flex-shrink: 0;
	color: var(--furni-search-text-secondary);
}

.furni-search-modal .furni-search-input {
	flex: 1 1 auto !important;
	border: none !important;
	background: none !important;
	font-size: 16px;
	font-family: inherit;
	font-weight: 500;
	color: var(--furni-search-text);
	padding: 14px 0 !important;
	outline: none;
	min-width: 0;
	width: auto !important;
}

.furni-search-input::placeholder {
	color: var(--furni-search-text-secondary);
	font-weight: 400;
}

.furni-search-input::-webkit-search-cancel-button,
.furni-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.furni-search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--furni-search-text-secondary);
	border-radius: 50%;
	transition: color var(--furni-search-transition), background var(--furni-search-transition);
}

.furni-search-clear:hover {
	color: var(--furni-search-text);
	background: rgba(0, 0, 0, 0.06);
}

.furni-search-clear.is-visible {
	display: flex;
}

.furni-search-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--furni-search-border);
	border-radius: var(--furni-search-radius);
	cursor: pointer;
	color: var(--furni-search-text-secondary);
	transition: color var(--furni-search-transition), border-color var(--furni-search-transition), background var(--furni-search-transition);
}

.furni-search-close:hover {
	color: var(--furni-search-text);
	border-color: var(--furni-search-text);
	background: #f7f6f3;
}

/* =========================
   BODY – STATES
========================= */
.furni-search-modal .furni-search-body {
	overflow-y: auto !important;
	overscroll-behavior: contain;
	padding: 24px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.furni-search-body > [data-state] {
	display: none !important;
}

.furni-search-body > [data-state].is-active {
	display: block !important;
}

/* ----- HINT ----- */
.furni-search-hint {
	text-align: center;
	padding: 40px 20px;
}

.furni-search-hint p {
	color: var(--furni-search-text-secondary);
	font-size: 15px;
}

/* ----- SKELETON LOADER ----- */
@keyframes furniSearchShimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

.furni-search-modal .furni-search-skeleton-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	width: 100% !important;
}

.furni-search-skeleton-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.furni-search-skeleton-img {
	aspect-ratio: 1;
	border-radius: var(--furni-search-radius);
	background: linear-gradient(90deg, #f0ede8 25%, #e8e5e0 50%, #f0ede8 75%);
	background-size: 800px 100%;
	animation: furniSearchShimmer 1.6s ease infinite;
}

.furni-search-skeleton-text {
	height: 14px;
	border-radius: 4px;
	width: 85%;
	background: linear-gradient(90deg, #f0ede8 25%, #e8e5e0 50%, #f0ede8 75%);
	background-size: 800px 100%;
	animation: furniSearchShimmer 1.6s ease infinite;
}

.furni-search-skeleton-text.short {
	width: 55%;
}

/* ----- EMPTY STATE ----- */
.furni-search-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--furni-search-text-secondary);
}

.furni-search-empty svg {
	opacity: 0.4;
}

.furni-search-empty-text {
	font-size: 15px;
}

/* =========================
   RESULTS – FULL-WIDTH LAYOUT
   Kategorie = pilulki u gory,
   Produkty = pelna szerokosc ponizej.
========================= */
.furni-search-modal .furni-search-results-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ----- SECTION TITLE ----- */
.furni-search-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--furni-search-text-secondary);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--furni-search-border);
}

/* ----- CATEGORIES (horizontal pills) ----- */
.furni-search-categories {
	width: 100% !important;
}

.furni-search-category-list {
	list-style: none;
	padding: 0;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.furni-search-category-list li {
	margin: 0;
}

.furni-search-category-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 20px;
	text-decoration: none;
	color: var(--furni-search-text);
	font-size: 13px;
	font-weight: 500;
	background: #f7f6f3;
	transition: background var(--furni-search-transition), color var(--furni-search-transition);
}

.furni-search-category-link:hover {
	background: var(--furni-search-brand-bg);
	color: var(--furni-search-brand);
}

.furni-search-category-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--furni-search-text-secondary);
	background: rgba(0, 0, 0, 0.06);
	padding: 1px 7px;
	border-radius: 10px;
	min-width: 20px;
	text-align: center;
}

.furni-search-category-link:hover .furni-search-category-count {
	background: var(--furni-search-brand);
	color: #fff;
}

/* ----- PRODUCT GRID (full width) ----- */
.furni-search-products {
	width: 100% !important;
	min-width: 0 !important;
}

.furni-search-modal .furni-search-product-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	width: 100% !important;
}

/* ----- PRODUCT CARD ----- */
.furni-search-product-card {
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none;
	color: var(--furni-search-text);
	border-radius: var(--furni-search-radius);
	overflow: hidden;
	transition: transform var(--furni-search-transition), box-shadow var(--furni-search-transition);
}

.furni-search-product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.furni-search-product-img-wrap {
	position: relative !important;
	aspect-ratio: 1 !important;
	overflow: hidden !important;
	border-radius: var(--furni-search-radius);
	background: #f7f6f3;
	width: 100% !important;
}

.furni-search-modal .furni-search-product-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
	transition: transform 0.4s ease;
}

.furni-search-product-card:hover .furni-search-product-img {
	transform: scale(1.06);
}

.furni-search-product-category {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 4px;
	color: var(--furni-search-text-secondary);
}

.furni-search-product-info {
	padding: 12px 4px 4px;
}

.furni-search-product-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.furni-search-product-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--furni-search-brand);
}

.furni-search-product-price del {
	color: var(--furni-search-text-secondary);
	font-weight: 400;
	font-size: 13px;
}

.furni-search-product-price ins {
	text-decoration: none;
}

/* ----- FOOTER – VIEW ALL ----- */
.furni-search-footer {
	padding-top: 20px;
	border-top: 1px solid var(--furni-search-border);
	text-align: center;
}

.furni-search-view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background: var(--furni-search-text);
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--furni-search-radius);
	transition: background var(--furni-search-transition), transform var(--furni-search-transition);
}

.furni-search-view-all:hover {
	background: var(--furni-search-brand);
	transform: translateY(-1px);
}

.furni-search-view-all::after {
	content: "\2192";
	font-size: 16px;
}

/* =========================
   BODY LOCK
   iOS Safari ignores overflow:hidden on body alone,
   so we lock both html AND body and kill overscroll.
========================= */
html.furni-search-open,
body.furni-search-open {
	overflow: hidden !important;
	height: 100% !important;
	overscroll-behavior: none !important;
	touch-action: none !important;
	-webkit-overflow-scrolling: auto !important;
}

/* Keep touch-action on the modal body so IT can scroll */
body.furni-search-open .furni-search-body {
	touch-action: pan-y !important;
	-webkit-overflow-scrolling: touch !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
	.furni-search-modal .furni-search-product-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.furni-search-modal .furni-search-skeleton-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.furni-search-skeleton-card:nth-child(4) {
		display: none;
	}
}

@media (max-width: 700px) {
	.furni-search-modal .furni-search-modal-inner {
		border-radius: 0;
		max-height: 100dvh;
		width: 100vw !important;
	}

	.furni-search-modal .furni-search-header {
		padding: 16px !important;
	}

	.furni-search-modal .furni-search-body {
		padding: 16px !important;
	}

	.furni-search-modal .furni-search-product-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.furni-search-modal .furni-search-skeleton-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.furni-search-skeleton-card:nth-child(3),
	.furni-search-skeleton-card:nth-child(4) {
		display: none;
	}

	.furni-search-section-title {
		font-size: 10px;
	}
}

@media (max-width: 400px) {
	.furni-search-modal .furni-search-input {
		font-size: 15px;
	}

	.furni-search-product-name {
		font-size: 12px;
	}

	.furni-search-product-price {
		font-size: 12px;
	}
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
	.furni-search-modal,
	.furni-search-overlay,
	.furni-search-product-card,
	.furni-search-product-img,
	.furni-search-view-all {
		transition: none;
	}

	.furni-search-skeleton-img,
	.furni-search-skeleton-text {
		animation: none;
	}
}