/**
 * Styles for the embeddable widget, loaded by sbe-embed-loader.js via a
 * <link> tag it injects. Booking Calendar and Product/Experience Page
 * embeds reuse the real sbe-widget.css instead (Sprint 7.5.1 — they render
 * the actual on-site component, not a separate reimplementation), so this
 * file only ever needs to cover: the error placeholder shown if a fetch
 * fails, the shared skeleton shown for every embed type from first paint
 * until its real markup arrives, and the Product/Experience List renderer,
 * which has no on-site equivalent component to reuse and so stays a small
 * self-contained renderer here.
 */
.sbe-embed__error {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	padding: 24px;
	text-align: center;
	color: #6b7280;
}

.sbe-embed__no-slots {
	font-size: 12px;
	color: #6b7280;
}

/* ---------- Product/Experience List — true 1:1 port of the reference
   "card-21" component (21st.dev/@ravikatiyar162/components/card-21),
   read directly from its own compiled DOM/Tailwind classes rather than
   approximated — gradient/glow/CTA-bar formulas, hover animations, and
   spacing all match. One deliberate departure (Javan, after live-testing
   the reference's per-card `themeColor`): every card uses a fixed black
   tint instead, regardless of the experience's own color. ---------- */
.sbe-embed--list {
	/* Javan, 2026-08-03: "the default font for all the front end should be
	   Mulish" — loaded via the sbe-google-fonts-mulish stylesheet, enqueued
	   as a style dependency of the List widget (class-sbe-widget-experience-
	   list.php) and, for the embed, loaded by sbe-embed-loader.js's
	   renderList() the same way renderRealComponent() already loads it for
	   the other two embed types. */
	font-family: "Mulish", sans-serif;
	max-width: 1100px;
}

/* ---------- Search + Filters toolbar (2026-07-31, Javan: "allow the
   option to enable of disable search and filter functionality") ----------
   Facets are limited to what this plugin actually has structured data for
   — Experience type / Physical difficulty level / Categories / Price /
   Date / Time / Available space — not the reference's Country/City/
   Operator, which don't map to any field here.

   Every rule below that sets ANY property on a bare `input`/`button`/
   `select`/`svg` element carries `!important`, not just colors — found
   live testing 2026-08-01 that a color-only `!important` pass wasn't
   enough: the theme's own `input`/`button` base styles were still
   winning on padding/width/height/border-radius (e.g. the filter toggle
   rendered as a 50x44 rounded-rectangle with 8px/16px padding instead of
   a 44x44 circle with none), which is what was actually causing the
   search icon to overlap the placeholder text — the input's own
   padding-left was losing to the theme's `input` padding, not a sizing
   issue with the icon itself. Same recurring "theme CSS beats plugin
   CSS" category of bug already hit elsewhere in this project — just
   needed applying to layout properties too, not only color/background/
   border.

   A second round (also 2026-08-01) found `!important` alone still
   wasn't enough on button backgrounds specifically (Clear/Apply/filter
   toggle all rendered in the theme's own dark maroon accent instead of
   this panel's intended colors) — meaning the theme's own button rule is
   ALSO `!important`, so the tie is broken by specificity, not just
   presence of `!important`. Every selector below that touched a
   `button`/`input` background is now written as `.class.class`
   (repeating the same class) to double its specificity without
   requiring any particular DOM ancestor — the standard technique for
   robustly beating an unknown, equally-`!important` theme rule. */
.sbe-embed__list-toolbar {
	position: relative; /* anchors .sbe-embed__list-filters below */
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.sbe-embed__list-search {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

/* Direct child only — the clear button's own "×" svg below is nested one
   level deeper (inside .sbe-embed__list-search-clear), so it must NOT
   inherit this rule's absolute left:14px positioning meant for the search
   icon. */
.sbe-embed__list-search > svg {
	position: absolute;
	left: 14px;
	top: 50%;
	/* Absolutely-positioned children ignore the flex parent's
	   align-items — found live testing 2026-07-31 that the icon wasn't
	   actually vertically centered (it only looked right by accident at
	   one viewport width). Centered explicitly instead. Width/height are
	   `!important` because a bare SVG width="18" HTML attribute loses to
	   any theme stylesheet rule targeting `svg`, even without !important
	   on the theme's side — a real, observed collision (icon rendering
	   oversized and overlapping the placeholder text). */
	transform: translateY( -50% );
	width: 18px !important;
	height: 18px !important;
	color: #6b7280 !important;
	/* `color` alone (relied on via the SVG's own `stroke="currentColor"`)
	   wasn't enough — found live testing 2026-08-01 that the theme forces
	   `stroke`/`fill` directly on `svg` elements site-wide, which beats
	   `currentColor` resolution regardless of `color`. Overriding `stroke`
	   directly here is what actually wins. */
	stroke: #6b7280 !important;
	fill: none !important;
	pointer-events: none;
}

.sbe-embed__list-search-input.sbe-embed__list-search-input {
	width: 100% !important;
	height: 44px !important;
	padding: 0 40px 0 40px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	color: #111827 !important;
	background: #fff !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.sbe-embed__list-search-input:focus {
	outline: none !important;
	border-color: #9ca3af !important;
}

/* "×" clear button (Javan, 2026-08-26: "add a clear button that
   clears/reset the search bar search filter") — shown/hidden via JS
   toggling the `hidden` attribute based on whether the input has text. */
.sbe-embed__list-search-clear.sbe-embed__list-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY( -50% );
	width: 24px !important;
	height: 24px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50%;
	background: transparent !important;
	color: #6b7280;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The base rule's `display: flex` (needed to beat theme !important wars,
   same reasoning as every other doubled-class selector in this file) has
   higher specificity than the browser's own `[hidden]{display:none}` UA
   rule, so it would otherwise win and show the button even while `hidden`
   is set — pin it back down explicitly. */
.sbe-embed__list-search-clear[hidden] {
	display: none !important;
}

.sbe-embed__list-search-clear:hover {
	background: #f3f4f6 !important;
	color: #111827;
}

.sbe-embed__list-search-clear svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor !important;
	pointer-events: none;
}

.sbe-embed__list-filter-toggle.sbe-embed__list-filter-toggle {
	flex: 0 0 auto;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid #d1d5db !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #374151 !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.sbe-embed__list-filter-toggle svg {
	width: 18px !important;
	height: 18px !important;
	/* Same reasoning as the search icon above — the theme forces
	   `stroke`/`fill` on `svg` elements directly, which `color` alone
	   can't override since it beats `currentColor` resolution. */
	stroke: #374151 !important;
	fill: none !important;
}

.sbe-embed__list-filter-toggle.sbe-embed__list-filter-toggle:hover {
	background: #f9fafb !important;
	border-color: #d1d5db !important;
	color: #374151 !important;
}

.sbe-embed__list-filter-toggle:hover svg {
	stroke: #374151 !important;
}

.sbe-embed__list-filter-toggle.is-active.is-active {
	background: #111827 !important;
	border-color: #111827 !important;
	color: #fff !important;
}

.sbe-embed__list-filter-toggle.is-active svg {
	stroke: #fff !important;
}

/* Absolutely positioned overlay, not part of normal flow — found live
   testing 2026-07-31 that opening the panel was pushing the card grid
   down the page instead of floating above it. */
.sbe-embed__list-filters {
	position: absolute !important;
	top: calc( 100% + 8px ) !important;
	right: 0 !important;
	left: 0 !important;
	bottom: auto !important;
	z-index: 999 !important;
	width: auto !important;
	max-width: none !important;
	max-height: 70vh !important;
	overflow-y: auto !important;
	margin: 0 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.16 ) !important;
}

.sbe-embed__list-filters-group {
	padding: 16px 20px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e5e7eb;
}

.sbe-embed__list-filters-group h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: #111827 !important;
}

.sbe-embed__list-filters-option {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding: 4px 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #374151 !important;
	cursor: pointer;
}

.sbe-embed__list-filters-option input {
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	accent-color: #111827;
}

.sbe-embed__list-filters-count {
	margin-left: auto;
	color: #9ca3af !important;
	font-size: 13px !important;
}

.sbe-embed__list-filters-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
}

.sbe-embed__list-filters-row + .sbe-embed__list-filters-row {
	margin-top: 10px;
}

.sbe-embed__list-filters-row label {
	flex: 0 0 auto;
	font-size: 13px;
	color: #374151 !important;
}

/* "Additional Filters" toggle (2026-08-01, Javan: first "the additional
   feature[s] button" as a disclosure, then corrected — "the additional
   filters should be a toggle filter", after the disclosure button
   rendered as a solid theme-colored bar just like Clear/Apply did) —
   Experience type / Physical difficulty are finer-grained than
   Date/Price/Categories, so they're opt-in via this switch instead of
   always shown. Same track/thumb component as the admin's own `.sbe-toggle`
   (Create Experience's "Additional Options" toggle), rebuilt under this
   file's own class names since sbe-admin.css isn't loaded on the frontend. */
.sbe-embed__list-filters-more-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 20px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e5e7eb;
}

.sbe-embed__list-filters-more-label {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #111827 !important;
}

.sbe-embed__list-toggle {
	position: relative;
	display: inline-flex !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sbe-embed__list-toggle input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.sbe-embed__list-toggle-track {
	display: block;
	width: 36px;
	height: 20px;
	background: #d1d5db !important;
	border-radius: 999px !important;
	position: relative;
	transition: background-color 0.15s ease;
}

.sbe-embed__list-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.15s ease;
}

.sbe-embed__list-toggle input:checked ~ .sbe-embed__list-toggle-track {
	background: #111827 !important;
}

.sbe-embed__list-toggle input:checked ~ .sbe-embed__list-toggle-track .sbe-embed__list-toggle-thumb {
	transform: translateX( 16px );
}

.sbe-embed__list-filters-row.sbe-embed__list-filters-row input,
.sbe-embed__list-filters-row.sbe-embed__list-filters-row select {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px !important;
	padding: 0 10px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	color: #111827 !important;
	background: #fff !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.sbe-embed__list-filters-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
}

.sbe-embed__list-filters-clear.sbe-embed__list-filters-clear {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #2563eb !important;
	font-size: 14px !important;
	cursor: pointer;
}

.sbe-embed__list-filters-apply.sbe-embed__list-filters-apply {
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	margin: 0 !important;
	background: #111827 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	cursor: pointer;
}

/* ---------- Skeleton loading state (2026-07-31, Javan: "both the slider
   and card is not using the skeleton load") — shown while the embed's
   markup fetch is in flight, and (Slider mode only, on-site included)
   until the Swiper CDN bundle has actually loaded and initialized —
   masks the brief unstyled flash of un-arranged slides that would
   otherwise show before Swiper's own CSS/JS are ready. Same shimmer
   animation as .sbe-widget__skeleton-cell elsewhere in this plugin. */
.sbe-embed__list-skeleton {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.sbe-embed__list-skeleton-card {
	width: 320px;
	height: 450px;
	border-radius: 16px;
	background: linear-gradient( 90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63% );
	background-size: 400% 100%;
	animation: sbe-embed-skeleton-shimmer 1.4s ease infinite;
}

@keyframes sbe-embed-skeleton-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.sbe-embed__swiper-skeleton-wrap {
	position: relative;
}

.sbe-embed__swiper-skeleton-wrap .sbe-embed__list-skeleton {
	flex-wrap: nowrap;
	overflow: hidden;
}

.sbe-embed__swiper-skeleton-wrap[data-sbe-swiper-ready] .sbe-embed__list-skeleton {
	display: none;
}

.sbe-embed__swiper-skeleton-wrap:not( [data-sbe-swiper-ready] ) .sbe-embed__swiper {
	display: none;
}

.sbe-embed__list-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.sbe-embed__list-grid .sbe-embed__list-card {
	width: 320px;
	border-radius: 20px;
	overflow: hidden !important;
}

.sbe-embed__list-card,
.sbe-embed__list-card:hover,
.sbe-embed__list-card:visited,
.sbe-embed__list-card:focus {
	/* The arrow icon's `stroke="currentColor"` resolves against this — kept
	   even though the text elements below now also force their own color,
	   since currentColor has nothing else to inherit from otherwise. */
	color: #fff !important;
}

.sbe-embed__list-card {
	position: relative;
	display: block;
	height: 450px;
	border-radius: 16px; /* rounded-2xl */
	overflow: hidden;
	text-decoration: none;
	background-color: #111827;
	/* Resting-state glow — replaces the reference's shadow-lg, which its
	   own inline box-shadow style already overrides. Fixed black, not
	   theme-colored (see block comment above). */
	box-shadow: 0 0 40px -15px rgba( 0, 0, 0, 0.5 );
	transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out;
	/* Found live testing 2026-07-30: without a forced compositing layer,
	   Chromium re-rasterizes this element's border-radius clip incorrectly
	   partway through the hover scale transform, showing square corners
	   for the duration of the animation. Standard fix for "overflow:hidden
	   + border-radius + transform:scale" — forces the browser to composite
	   this element as a stable layer from the start instead of only on
	   the transform trigger. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.sbe-embed__list-card:hover {
	transform: scale( 1.05 );
	box-shadow: 0 0 60px -15px rgba( 0, 0, 0, 0.6 );
}

.sbe-embed__list-card-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 500ms ease-in-out;
}

.sbe-embed__list-card:hover .sbe-embed__list-card-image {
	transform: scale( 1.1 );
}

.sbe-embed__list-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, hsl( 0deg 0% 0% / 90% ), hsl( 0deg 0% 0% / 60% ) 30%, transparent 60% );
	pointer-events: none;
}

.sbe-embed__list-card-body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 24px; /* p-6 */
}

/* Found live testing 2026-07-30 (twice — the first fix, redeclaring color
   on the anchor's own pseudo-classes, wasn't enough): the host page's own
   theme still won on hover, meaning its rule targets these text elements
   more specifically than just `a:hover`. `!important` directly on each
   text element itself, in every state, is the only thing that reliably
   beats an arbitrary embedding page's own CSS — same category of fix as
   the recurring `[type="button"]` theme-override bug elsewhere in this
   plugin. */
.sbe-embed__list-card-title,
.sbe-embed__list-card:hover .sbe-embed__list-card-title,
.sbe-embed__list-card:visited .sbe-embed__list-card-title,
.sbe-embed__list-card:focus .sbe-embed__list-card-title {
	color: #fff !important;
}

.sbe-embed__list-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.sbe-embed__list-card-badge {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba( 255, 255, 255, 0.9 ) !important;
	background: rgba( 255, 255, 255, 0.18 );
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}

.sbe-embed__list-card-meta {
	margin: 4px 0 0;
	font-size: 14px; /* text-sm */
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.8 ) !important;
}

.sbe-embed__list-card-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px; /* mt-8 */
	padding: 12px 16px; /* py-3 px-4 */
	border-radius: 8px; /* rounded-lg */
	background: rgba( 0, 0, 0, 0.2 );
	border: 1px solid rgba( 0, 0, 0, 0.3 );
	-webkit-backdrop-filter: blur( 12px ); /* backdrop-blur-md */
	backdrop-filter: blur( 12px );
	transition: background 300ms, border-color 300ms;
}

.sbe-embed__list-card:hover .sbe-embed__list-card-cta {
	background: rgba( 0, 0, 0, 0.4 );
	border-color: rgba( 0, 0, 0, 0.5 );
}

.sbe-embed__list-card-cta span {
	font-size: 14px; /* text-sm */
	font-weight: 600;
	letter-spacing: 0.025em;
	color: #fff !important;
	transition: color 300ms;
}

.sbe-embed__list-card-arrow {
	width: 16px; /* h-4 w-4 */
	height: 16px;
	flex-shrink: 0;
	transition: transform 300ms, color 300ms;
}

.sbe-embed__list-card:hover .sbe-embed__list-card-arrow {
	transform: translateX( 4px ); /* translate-x-1 */
}

/**
 * Solid white/black inversion specifically on hovering the card body (title +
 * meta + CTA), not the same trigger as the darker-glass hover above —
 * Javan, 2026-08-25: "when i hover the sbe-embed__list-card-body the
 * sbe-embed__list-card-cta should change to solid white and the text and
 * icon solid black."
 */
.sbe-embed__list-card-body:hover .sbe-embed__list-card-cta {
	background: #fff;
	border-color: #fff;
}

.sbe-embed__list-card-body:hover .sbe-embed__list-card-cta span {
	color: #000 !important;
}

.sbe-embed__list-card-body:hover .sbe-embed__list-card-arrow {
	color: #000;
}

.sbe-embed__swiper {
	padding-bottom: 34px;
}

.sbe-embed__swiper .swiper-slide {
	width: 320px;
	height: auto;
	border-radius: 20px;
	overflow: hidden !important;
}

/* Elementor's Card Width control (sbe_card_width) sets this same 320px
   (or whatever's configured) at every breakpoint via its own inline
   {{WRAPPER}} style, which isn't responsive-aware — on mobile that left a
   sliver of the next card peeking in on the right, off-center (Javan,
   2026-08-03: "on mobile only one slide[] per should be in view and the
   cards should be centered and display block"). !important is needed to
   beat that inline style regardless of source order, same reasoning as
   every other Elementor-inline-vs-theme override in this plugin. Since
   .sbe-embed__list-card has no width of its own in slider mode (block,
   fills its .swiper-slide parent), forcing the slide itself to the full
   available width is enough to make the card fill it too — one slide,
   centered because it's the only thing visible, no separate centering
   rule needed. */
@media ( max-width: 700px ) {
	.sbe-embed__swiper .swiper-slide {
		width: 100% !important;
	}
}

.sbe-embed__swiper .swiper-slide .sbe-embed__list-card {
	height: 450px;
}