/* ==========================================================================
   Eiman Smart Filters — Premium Design System
   Every color/radius/shadow below reads from a CSS custom property set by
   includes/class-design-system.php. Nothing here is hardcoded — swap the
   Appearance preset in wp-admin and the entire UI restyles with zero CSS
   edits. Fallback values (2nd arg of var()) mirror the "gold" default preset.
   ========================================================================== */

.eiman-sf-widget, .eiman-sf-archive, .eiman-sf-by-location, .eiman-sf-live-preview-frame {
	--_primary: var(--eiman-sf-primary, #C9A15A);
	--_secondary: var(--eiman-sf-secondary, #1A1A1A);
	--_accent: var(--eiman-sf-accent, #E7C687);
	--_bg: var(--eiman-sf-bg, #0F0F10);
	--_card-bg: var(--eiman-sf-card-bg, #17171A);
	--_sidebar-bg: var(--eiman-sf-sidebar-bg, #141416);
	--_filter-bg: var(--eiman-sf-filter-bg, #141416);
	--_text: var(--eiman-sf-text, #F5F1E8);
	--_text-muted: var(--eiman-sf-text-muted, #A9A398);
	--_border: var(--eiman-sf-border, #2A2A2E);
	--_btn-text: var(--eiman-sf-btn-text, #1A1A1A);
	--_hover: var(--eiman-sf-hover, #E7C687);
	--_active: var(--eiman-sf-active, #C9A15A);
	--_radius: var(--eiman-sf-radius, 16px);
	--_radius-sm: var(--eiman-sf-radius-sm, 10px);
	--_radius-pill: var(--eiman-sf-radius-pill, 999px);
	--_shadow: var(--eiman-sf-shadow, 0 8px 24px rgba(0,0,0,.10));
	--_blur: var(--eiman-sf-blur, 14px);
	font-family: inherit;
	color: var(--_text);
}

.eiman-sf-widget *, .eiman-sf-archive *, .eiman-sf-live-preview-frame * { box-sizing: border-box; }

.eiman-sf-section-title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--_text);
}

/* Premium category cards (spec §3) */
.eiman-sf-cat-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.eiman-sf-cat-card {
	position: relative;
	height: 150px;
	border-radius: var(--_radius);
	border: 1px solid var(--_border);
	background-color: var(--_card-bg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	color: #fff;
	box-shadow: var(--_shadow);
	transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}

.eiman-sf-cat-card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
}

.eiman-sf-cat-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.eiman-sf-cat-card:active { transform: translateY(-1px) scale(.99); }

.eiman-sf-cat-card.is-active {
	border-color: var(--_active);
	box-shadow: 0 0 0 2px var(--_active), 0 16px 40px rgba(0,0,0,.22);
}

.eiman-sf-cat-card-icon {
	position: relative; z-index: 1;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	border-radius: var(--_radius-pill);
	background: rgba(255,255,255,.16);
	backdrop-filter: blur(var(--_blur));
	-webkit-backdrop-filter: blur(var(--_blur));
}

.eiman-sf-cat-card-name { position: relative; z-index: 1; font-weight: 700; font-size: .95rem; text-align: center; }
.eiman-sf-cat-card-count {
	position: relative; z-index: 1;
	font-size: .72rem; font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--_radius-pill);
	background: rgba(255,255,255,.18);
}

/* Filter panel (spec §4) — glass, sticky, accordion */
.eiman-sf-panel {
	background: color-mix(in srgb, var(--_filter-bg) 88%, transparent);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	backdrop-filter: blur(var(--_blur));
	-webkit-backdrop-filter: blur(var(--_blur));
	box-shadow: var(--_shadow);
	padding: 18px;
	margin-bottom: 18px;
}

.eiman-sf-panel.is-sticky { position: sticky; top: 12px; z-index: 30; }

.eiman-sf-accordion-section { border-bottom: 1px solid var(--_border); padding: 14px 0; }
.eiman-sf-accordion-section:last-child { border-bottom: none; }

.eiman-sf-accordion-trigger {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between;
	background: none; border: none; cursor: pointer;
	font-size: 1rem; font-weight: 700; color: var(--_text);
	padding: 4px 0;
}

.eiman-sf-accordion-trigger .eiman-sf-chevron { transition: transform .25s ease; color: var(--_primary); }
.eiman-sf-accordion-section.is-open .eiman-sf-chevron { transform: rotate(180deg); }

.eiman-sf-accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.eiman-sf-accordion-section.is-open .eiman-sf-accordion-body { grid-template-rows: 1fr; }
.eiman-sf-accordion-body > div { overflow: hidden; padding-top: 12px; }

.eiman-sf-button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.eiman-sf-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	border-radius: var(--_radius-pill);
	border: 1px solid var(--_border);
	background: transparent;
	color: var(--_text);
	font-size: .88rem; font-weight: 600;
	cursor: pointer;
	transition: all .22s ease;
}
.eiman-sf-btn:hover { border-color: var(--_hover); color: var(--_hover); }
.eiman-sf-btn.is-active, .eiman-sf-btn-all.is-active { background: var(--_primary); border-color: var(--_primary); color: var(--_btn-text); }
.eiman-sf-count { opacity: .75; font-weight: 500; }
.eiman-sf-icon { font-size: 1em; }

/* Price slider */
.eiman-sf-price-slider-wrap { padding: 6px 4px 0; }
.eiman-sf-price-values { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; color: var(--_text); }
.eiman-sf-price-slider { position: relative; height: 4px; border-radius: var(--_radius-pill); background: var(--_border); margin: 18px 6px 8px; }
.eiman-sf-price-slider-fill { position: absolute; height: 100%; background: var(--_primary); border-radius: var(--_radius-pill); }
.eiman-sf-price-slider input[type="range"] {
	position: absolute; top: 50%; left: 0; width: 100%;
	transform: translateY(-50%);
	appearance: none; -webkit-appearance: none;
	background: transparent; pointer-events: none; margin: 0;
}
.eiman-sf-price-slider input[type="range"]::-webkit-slider-thumb {
	appearance: none; -webkit-appearance: none;
	pointer-events: all;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--_primary);
	border: 3px solid var(--_btn-text, #fff);
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	cursor: pointer;
}
.eiman-sf-price-slider input[type="range"]::-moz-range-thumb {
	pointer-events: all;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--_primary);
	border: 3px solid var(--_btn-text, #fff);
	cursor: pointer;
}
.eiman-sf-price-caption { font-size: .8rem; color: var(--_text-muted); margin-top: 8px; }

/* Sort / toolbar / active chips (spec §6) */
.eiman-sf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eiman-sf-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eiman-sf-results-count { font-weight: 700; color: var(--_text); }
.eiman-sf-results-count .eiman-sf-count-num { color: var(--_primary); }

.eiman-sf-sort select { border-radius: var(--_radius-pill); border: 1px solid var(--_border); background: var(--_card-bg); color: var(--_text); padding: 8px 14px; font-weight: 600; }

.eiman-sf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eiman-sf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--_radius-pill); background: var(--_card-bg); border: 1px solid var(--_border); font-size: .82rem; font-weight: 600; }
.eiman-sf-chip button { background: none; border: none; color: var(--_text-muted); cursor: pointer; line-height: 1; padding: 0; }
.eiman-sf-chip-clear-all { background: none; border: none; color: var(--_primary); font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Premium buttons (spec §5) */
.eiman-sf-btn-primary, .eiman-sf-btn-card, button[data-eiman-sf-apply] {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px;
	border-radius: var(--_radius-pill);
	border: none;
	background: linear-gradient(135deg, var(--_primary), var(--_accent));
	color: var(--_btn-text);
	font-weight: 700; font-size: .95rem;
	cursor: pointer;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--_primary) 45%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.eiman-sf-btn-primary:hover, .eiman-sf-btn-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--_primary) 55%, transparent); }
.eiman-sf-btn-primary:active { transform: translateY(0); }
.eiman-sf-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.eiman-sf-btn-secondary {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 24px;
	border-radius: var(--_radius-pill);
	border: 1.5px solid var(--_border);
	background: transparent;
	color: var(--_text);
	font-weight: 700; font-size: .95rem;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.eiman-sf-btn-secondary:hover { border-color: var(--_primary); color: var(--_primary); }
.eiman-sf-btn-card { padding: 9px 18px; font-size: .85rem; box-shadow: none; }

.eiman-sf-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: eiman-sf-ripple .55s ease-out; pointer-events: none; }
@keyframes eiman-sf-ripple { to { transform: scale(3); opacity: 0; } }

.eiman-sf-btn-primary.is-loading { color: transparent; pointer-events: none; }
.eiman-sf-btn-primary.is-loading::after {
	content: ""; position: absolute; width: 18px; height: 18px;
	border: 2px solid var(--_btn-text); border-top-color: transparent;
	border-radius: 50%; animation: eiman-sf-spin .6s linear infinite;
}

/* Tour card grid (premium) */
.eiman-sf-grid-premium { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }

.eiman-sf-card {
	position: relative;
	background: var(--_card-bg);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	overflow: hidden;
	box-shadow: var(--_shadow);
	transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
	opacity: 0; animation: eiman-sf-fade-up .45s ease forwards;
}
.eiman-sf-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.22); }

.eiman-sf-card-media { position: relative; display: block; aspect-ratio: 4/3; background: var(--_sidebar-bg); overflow: hidden; }
.eiman-sf-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.eiman-sf-card:hover .eiman-sf-card-media img { transform: scale(1.06); }
.eiman-sf-card-media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--_sidebar-bg), var(--_border)); }

.eiman-sf-badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: var(--_radius-pill); font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff; }
.eiman-sf-badge-sale { background: #D13B3B; }
.eiman-sf-badge-featured { background: var(--_primary); color: var(--_btn-text); }

.eiman-sf-wishlist {
	position: absolute; top: 10px; right: 10px;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(20,20,20,.45); backdrop-filter: blur(6px);
	border: none; color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.eiman-sf-wishlist:hover { background: rgba(20,20,20,.7); transform: scale(1.08); }

.eiman-sf-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.eiman-sf-card-meta { font-size: .78rem; color: var(--_text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.eiman-sf-dot { margin: 0 4px; }
.eiman-sf-card-title { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; }
.eiman-sf-card-title a { color: var(--_text); text-decoration: none; }
.eiman-sf-card-title a:hover { color: var(--_primary); }
.eiman-sf-card-rating { font-size: .85rem; color: var(--_primary); }

.eiman-sf-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.eiman-sf-card-price { display: flex; flex-direction: column; line-height: 1.2; }
.eiman-sf-price-label { font-size: .72rem; color: var(--_text-muted); }
.eiman-sf-price-value { font-size: 1.15rem; font-weight: 800; color: var(--_text); }
.eiman-sf-price-per { font-size: .7rem; color: var(--_text-muted); }
.eiman-sf-card-price-hidden { visibility: hidden; }

@keyframes eiman-sf-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eiman-sf-spin { to { transform: rotate(360deg); } }

/* Skeleton loading (spec §6) */
.eiman-sf-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.eiman-sf-skeleton-card { border-radius: var(--_radius); overflow: hidden; background: var(--_card-bg); border: 1px solid var(--_border); }
.eiman-sf-skeleton-media { aspect-ratio: 4/3; }
.eiman-sf-skeleton-line { height: 12px; margin: 14px 16px; border-radius: 6px; }
.eiman-sf-skeleton-line.short { width: 40%; }
.eiman-sf-skeleton-media, .eiman-sf-skeleton-line {
	background: linear-gradient(100deg, var(--_border) 20%, color-mix(in srgb, var(--_border) 50%, var(--_card-bg)) 40%, var(--_border) 60%);
	background-size: 200% 100%;
	animation: eiman-sf-shimmer 1.4s ease-in-out infinite;
}
@keyframes eiman-sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty state (spec §6) */
.eiman-sf-empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--_text-muted); }
.eiman-sf-empty-state svg { color: var(--_primary); margin-bottom: 14px; }
.eiman-sf-empty-state h3 { color: var(--_text); font-size: 1.2rem; margin: 0 0 6px; }
.eiman-sf-empty-state p { margin: 0 0 18px; }

.eiman-sf-results { position: relative; }
.eiman-sf-results.is-updating .eiman-sf-grid-premium,
.eiman-sf-results.is-updating .eiman-sf-grid { opacity: .35; filter: blur(1px); transition: opacity .2s ease, filter .2s ease; pointer-events: none; }

.eiman-sf-loading { display: none; }

.eiman-sf-card-row.eiman-sf-swipe { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.eiman-sf-card-row.eiman-sf-swipe .eiman-sf-card, .eiman-sf-card-row.eiman-sf-swipe .card-item { flex: 0 0 270px; scroll-snap-align: start; }

/* Sticky mobile Apply bar + floating filter button + bottom sheet (spec §7) */
.eiman-sf-mobile-fab {
	display: none;
	position: fixed; right: 18px; bottom: 24px; z-index: 60;
	width: 58px; height: 58px; border-radius: 50%;
	background: linear-gradient(135deg, var(--_primary), var(--_accent));
	color: var(--_btn-text);
	align-items: center; justify-content: center;
	border: none; box-shadow: 0 12px 28px color-mix(in srgb, var(--_primary) 50%, transparent);
	cursor: pointer;
}
.eiman-sf-mobile-fab .eiman-sf-fab-badge {
	position: absolute; top: -4px; right: -4px;
	background: var(--_secondary); color: var(--_text);
	font-size: .68rem; font-weight: 800;
	width: 20px; height: 20px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

.eiman-sf-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; opacity: 0; transition: opacity .25s ease; }
.eiman-sf-sheet-backdrop.is-open { display: block; opacity: 1; }

.eiman-sf-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
	max-height: 86vh;
	background: var(--_bg);
	border-radius: 22px 22px 0 0;
	border: 1px solid var(--_border);
	box-shadow: 0 -20px 50px rgba(0,0,0,.35);
	transform: translateY(100%);
	transition: transform .32s cubic-bezier(.2,.9,.25,1);
	display: flex; flex-direction: column;
}
.eiman-sf-sheet.is-open { transform: translateY(0); }
.eiman-sf-sheet-handle { width: 42px; height: 5px; border-radius: var(--_radius-pill); background: var(--_border); margin: 10px auto 0; }
.eiman-sf-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.eiman-sf-sheet-header h3 { margin: 0; font-size: 1.1rem; }
.eiman-sf-sheet-close { background: none; border: none; color: var(--_text-muted); font-size: 1.4rem; cursor: pointer; }
.eiman-sf-sheet-body { padding: 8px 18px 18px; overflow-y: auto; }
.eiman-sf-sheet-footer {
	position: sticky; bottom: 0;
	background: var(--_bg);
	border-top: 1px solid var(--_border);
	padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
	display: flex; gap: 10px;
}
.eiman-sf-sheet-footer .eiman-sf-btn-primary { flex: 1; }

/* Archive page */
.eiman-sf-archive-header { margin-bottom: 22px; }
.eiman-sf-archive-title { font-size: 2rem; font-weight: 800; margin: 0 0 6px; }
.eiman-sf-view-all { color: var(--_primary); text-decoration: none; font-weight: 700; font-size: .88rem; }

/* Responsive */
@media (max-width: 782px) {
	.eiman-sf-cat-row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
	.eiman-sf-cat-card { height: 120px; }
	.eiman-sf-grid-premium, .eiman-sf-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); gap: 14px; }
	.eiman-sf-widget > .eiman-sf-section > .eiman-sf-panel { display: none; }
	.eiman-sf-mobile-fab { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.eiman-sf-card, .eiman-sf-cat-card, .eiman-sf-btn-primary, .eiman-sf-sheet, .eiman-sf-card-media img {
		animation: none !important; transition: none !important;
	}
}

.eiman-sf-widget button:focus-visible,
.eiman-sf-widget a:focus-visible,
.eiman-sf-widget input:focus-visible,
.eiman-sf-widget select:focus-visible {
	outline: 2px solid var(--_primary);
	outline-offset: 2px;
}