/**
 * Styles the shared booking panel (Widget B standalone, Widget A's right
 * column) plus Widget A's gallery/details layout. Deliberately inherits the
 * host theme's font-family/colors by default (no font-family declared here)
 * since this renders on client storefronts, not our own admin dashboard —
 * only structure, spacing, and functional state colors (available/limited/
 * full/selected) are opinionated.
 */

/**
 * Two stacked, separate blocks — NOT one column containing the other. The
 * gallery is a full-width block on its own; the two-column split (details
 * left, booking panel right) is a second block below it with its own
 * padding. Confirmed against the live reference page (2026-07-28): the
 * booking panel does not run alongside the gallery, it starts at the same
 * vertical position as the title, below the gallery.
 */
/* Javan, 2026-08-03: "the default font for all the front end should be
   Mulish" — overrides this file's original "inherit whatever font the host
   theme uses" decision (see the file-level docblock above) on explicit
   request. Loaded via the sbe-google-fonts-mulish stylesheet, already
   enqueued by enqueue_widget() for every page using either of these two
   widgets. Set once on each top-level root (.sbe-widget-a, .sbe-widget-agg,
   .sbe-widget below) and inherited by every child — none of them declare
   their own font-family. */
.sbe-widget-a,
.sbe-widget-agg {
	font-family: "Mulish", sans-serif;
}

.sbe-widget-a {
	max-width: 1200px;
	margin: 0 auto;
	/* Javan, 2026-08-26: "in desktop and tablet mode add padding top and
	   bottom 5%" — the >900px default; overridden to 10% below on mobile. */
	padding-top: 5%;
	padding-bottom: 5%;
}

/* Auto-rendered experience single page only (SBE_Widget_Experience_Booking::
   maybe_add_auto_render_body_class()) — the theme's own (empty/non-visual)
   title element is hidden here since .sbe-widget-a__title below already
   shows the experience name; left untouched everywhere else on the site,
   including the manually-built "Book X Experience" pages (Javan,
   2026-08-26: "do not include the page-header"). */
.sbe-auto-rendered-experience .page-header {
	display: none;
}

/* The actual visible "page header" (Javan meant this one — a dark hero bar
   with the experience name, confirmed live 2026-08-26 to be Elementor's own
   Page Title widget living inside the shared header template, not the
   theme's `.page-header` above) — hides just that one row of the header
   (title bar only, not the logo/nav rows around it) via :has() rather than
   Elementor's auto-generated per-element class, which isn't stable across
   edits to the header template. Scoped the same way, so every other page
   keeps its title bar. */
.sbe-auto-rendered-experience .elementor-location-header .e-con:has( > .elementor-widget-theme-page-title ) {
	display: none;
}

/* Javan, 2026-08-26: "in mobile mode set .sbe-widget-a padding-top: 10%;
   padding-bottom: 10%;" */
@media ( max-width: 900px ) {
	.sbe-widget-a {
		padding-top: 10%;
		padding-bottom: 10%;
	}
}

.sbe-widget-a__body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	padding: 32px;
}

/* Grid items default to min-width:auto, so without this a fixed-width
   descendant anywhere inside either column (e.g. the booking panel's
   496px .sbe-widget) sets a floor on the whole grid track, overflowing the
   page horizontally on mobile even after grid-template-columns collapses
   to 1fr below (Javan, 2026-08-02 mobile pass). */
.sbe-widget-a__body > * {
	min-width: 0;
}

/* Location map (Sprint 7.10) — a full-width block below the two-column body, matching its 32px horizontal padding. Only rendered server-side when both a Location and a Google Maps API key (Settings page) are set. */
.sbe-widget-a__section--map {
	padding: 0 32px 32px;
}

/* .sbe-widget-a__body lost this same 32px on mobile already (2026-08-02) —
   matches it here too so the map still lines up with the content above it
   (Javan, 2026-08-03: "on mobile remove this .sbe-widget-a__section--map...
   padding"). */
@media ( max-width: 900px ) {
	.sbe-widget-a__section--map {
		padding: 0;
	}
}

.sbe-widget-a__map {
	width: 100%;
	height: 280px;
	border: 0;
	border-radius: 8px;
	display: block;
}

/**
 * Whole-component skeleton (gallery + details + booking panel) — SB
 * Experience Booking shares one loading state across all of it rather than
 * the booking panel alone flashing in separately from an already-visible
 * gallery/details column.
 */
.sbe-widget-a__skeleton-gallery {
	width: 100%;
	height: 450px;
	border-radius: 8px;
	background: linear-gradient( 90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63% );
	background-size: 400% 100%;
	animation: sbe-skeleton-shimmer 1.4s ease infinite;
}

.sbe-widget-a__skeleton-body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	padding: 32px;
}

@media ( max-width: 900px ) {
	.sbe-widget-a__skeleton-body {
		grid-template-columns: 1fr;
	}
}

.sbe-widget-a__skeleton-left .sbe-widget__skeleton-bar--heading {
	width: 220px;
	height: 28px;
}

.sbe-widget-a__skeleton-left .sbe-widget__skeleton-bar--row {
	height: 16px;
	margin-bottom: 10px;
}

.sbe-widget-a__skeleton-right {
	max-width: 496px;
	padding: 16px;
	border-radius: 5px;
}

@media ( max-width: 900px ) {
	.sbe-widget-a__body {
		grid-template-columns: 1fr;
		padding: 0;
	}
}

/**
 * Exact grid from the reference widget's own CSS (inspected 2026-07-28):
 * a 2-row/4-column grid, image 1 spans the left half across both rows,
 * images 2 and 3 each take one right-half quarter (stacked). Matches for
 * the common 3-image case; with fewer images the later grid-areas are
 * simply empty rather than reflowing — an acceptable simplification, the
 * reference's own widget dynamically rewrites these rules per image count
 * via JS, which is out of scope here.
 */
.sbe-widget-a__gallery {
	position: relative;
	margin: 0;
	width: 100%;
	height: 450px;
	overflow: hidden;
	border-radius: 8px;
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr;
	gap: 8px;
	cursor: pointer;
}

.sbe-widget-a__gallery-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

/* Ancestor+own-class compound selector, same fix as the SweetAlert2 popup
   (Sprint 7.9) — the theme's own [type="button"] rule ships with
   !important at (0,1,0) specificity, so a lone-class !important selector
   only wins if it happens to load after the theme's stylesheet. A genuine
   2-class selector (0,2,0) wins on specificity alone, regardless of load
   order. */
.sbe-widget-a__gallery .sbe-widget-a__gallery-badge {
	background: #fff !important;
	color: #1f2937 !important;
}

.sbe-widget-a__gallery .sbe-widget-a__gallery-badge:hover {
	background: #f3f4f6 !important;
	color: #1f2937 !important;
}

/* Mobile: gallery becomes a Swiper carousel — auto slide + infinite loop,
   dots synced to whichever image is current (Javan, 2026-08-03: "it should
   have auto slide and infinite loop", dots "should be visible across the
   entire slider", not just parked over the first image). A hand-rolled
   scroll-snap carousel (the previous approach) has no reasonable way to
   autoplay or loop, so this gallery now joins the List widget in using
   Swiper — already a project dependency, not a new one. initGalleryCarousel()
   in sbe-widget.js moves each <img> into a .swiper-slide and injects the
   .swiper root (.sbe-widget-a__gallery-swiper) as the gallery's own first
   child, only below this same 900px breakpoint; grid-area assignments below
   have no effect once display becomes block, so the per-count nth-child
   rules don't need overriding. */
@media ( max-width: 900px ) {
	.sbe-widget-a__gallery {
		display: block;
	}
}

.sbe-widget-a__gallery-swiper {
	width: 100%;
	height: 100%;
}

.sbe-widget-a__gallery-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.sbe-widget-a__gallery-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: none;
	padding: 1px 15px;
	background: rgba( 255, 255, 255, 0.5 ) !important;
	cursor: pointer;
}

.sbe-widget-a__gallery-dot.is-active {
	background: #fff !important;
}

.sbe-widget-a__gallery img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	border-radius: 5px;
}

/* 3 images: one big left (both rows) + two stacked on the right. */
.sbe-widget-a__gallery--count-3 img:nth-child( 1 ) {
	grid-area: 1 / 1 / 3 / 3;
}

.sbe-widget-a__gallery--count-3 img:nth-child( 2 ) {
	grid-area: 1 / 3 / 2 / 5;
}

.sbe-widget-a__gallery--count-3 img:nth-child( 3 ) {
	grid-area: 2 / 3 / 3 / 5;
}

/* 2 images: even left/right halves, each full height. */
.sbe-widget-a__gallery--count-2 img:nth-child( 1 ) {
	grid-area: 1 / 1 / 3 / 3;
}

.sbe-widget-a__gallery--count-2 img:nth-child( 2 ) {
	grid-area: 1 / 3 / 3 / 5;
}

/* 1 image: fills the whole container. */
.sbe-widget-a__gallery--count-1 img:nth-child( 1 ) {
	grid-area: 1 / 1 / 3 / 5;
}

/* 4 images: even 2x2 grid of equal quadrants. */
.sbe-widget-a__gallery--count-4 img:nth-child( 1 ) {
	grid-area: 1 / 1 / 2 / 3;
}

.sbe-widget-a__gallery--count-4 img:nth-child( 2 ) {
	grid-area: 1 / 3 / 2 / 5;
}

.sbe-widget-a__gallery--count-4 img:nth-child( 3 ) {
	grid-area: 2 / 1 / 3 / 3;
}

.sbe-widget-a__gallery--count-4 img:nth-child( 4 ) {
	grid-area: 2 / 3 / 3 / 5;
}

.sbe-widget-a__title {
	font-size: 28px;
	margin: 16px 0 8px;
}

/* Same primary-CTA look as .sbe-widget__add-to-cart (background/hover
   colors, accent var) — a second entry point into the same booking flow,
   not a visually distinct one. */
/* Base look — width/padding/margin/typography/colors below are all also
   exposed as Elementor Style controls (Book Now Button section) with
   matching defaults, so this stays correct even before any control is
   touched (same "hardcoded default mirrors the Elementor control default"
   pattern as the List widget's Card Width). Full-width block by default,
   not inline-block (Javan, 2026-08-03: "set to be full width"). Hidden on
   desktop (Javan, 2026-08-03: "should not be visible on desktop") — it's a
   mobile-only shortcut down to the calendar section below; on desktop that
   section is already in view without scrolling. */
.sbe-widget-a__book-now {
	display: none;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	margin: 0 0 16px;
	cursor: pointer;
}

.sbe-widget-a__book-now:hover {
	background: var( --sbe-accent-hover, #164a9e ) !important;
	color: #fff !important;
}

@media ( max-width: 900px ) {
	.sbe-widget-a__book-now {
		display: block;
	}
}

.sbe-widget-a__meta {
	display: flex;
	gap: 16px;
	color: #6b7280;
	font-size: 14px;
	margin-bottom: 16px;
}

.sbe-widget-a__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sbe-widget-a__meta-icon {
	font-size: 14px;
	line-height: 1;
}

.sbe-widget-a__meta-icon--circle {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1.5px solid #6b7280;
	border-radius: 50%;
}

/**
 * Neither had any spacing rule at all before — they sat back-to-back with
 * no gap since a theme reset zeroed out default <p>/<div> margins. This
 * bottom margin is also exposed as a responsive Elementor Style control
 * (Short Description — Spacing Below, Javan 2026-08-03: "allow the admin
 * the ability to increase the spacing between the experience short
 * description and description"), same default value as here so it's
 * correct even before that control is touched.
 */
.sbe-widget-a__short-description {
	margin: 0 0 16px;
}

.sbe-widget-a__description {
	margin-bottom: 16px;
}

.sbe-widget-a__description p {
	margin: 0 0 12px;
}

.sbe-widget-a__description p:last-child {
	margin-bottom: 0;
}

.sbe-widget-a__bullets {
	margin: 0;
	padding-left: 20px;
}

.sbe-widget-a__section {
	margin-top: 28px;
}

.sbe-widget-a__section-heading {
	display: block;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
}

.sbe-widget-a__info-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px 24px;
}

.sbe-widget-a__info-key {
	color: #1f2937;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}

.sbe-widget-a__info-value {
	color: #6b7280;
	font-size: 14px;
}

.sbe-widget-a__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sbe-widget-a__category-chip {
	background: #eff6ff;
	color: var( --sbe-accent, #1d57c7 );
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 12px;
}

/* ---------------- Booking panel (shared by both widgets) ---------------- */

/* Exact values from the reference widget's own panel container CSS (2026-07-28). */
.sbe-widget {
	font-family: "Mulish", sans-serif;
	overflow: hidden;
	min-width: 496px;
	max-width: 496px;
	padding: 16px;
	margin-left: auto;
	margin-right: auto;
	color: #34404e;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

/* The fixed 496px above is desktop-only — below that, it's wider than the
   viewport itself and forces the whole page to scroll horizontally (Javan,
   2026-08-02, mobile pass: "absolutely be no horizontal scroll on the
   pages... content must fit on the screen"). Relaxes to fill its container
   instead, same 900px breakpoint used everywhere else this widget already
   reflows for mobile (.sbe-widget-a__body, .sbe-widget-a__skeleton-body). */
@media ( max-width: 900px ) {
	.sbe-widget {
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}
}

/* Shown briefly while an embedded widget's Add to Cart navigates the
   visitor to the real site's cart — full-viewport so it's visible
   regardless of where on the foreign page the embed itself sits. */
.sbe-widget-embed-redirect-notice {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background: rgba(255, 255, 255, 0.96);
	font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	color: #1f2937;
}

.sbe-widget-a .sbe-widget {
	position: sticky;
	top: 20px;
}

/**
 * Skeleton loader — the panel stays in this placeholder state until the
 * first month's calendar data has actually loaded (not just once the DOM/
 * CSS is ready), per Javan: it should only disappear once the JS has
 * loaded the calendar's resources, not show an empty/half-built panel
 * while that request is in flight.
 */
.sbe-widget__skeleton-bar {
	border-radius: 4px;
	background: linear-gradient( 90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63% );
	background-size: 400% 100%;
	animation: sbe-skeleton-shimmer 1.4s ease infinite;
}

.sbe-widget__skeleton-bar--heading {
	width: 140px;
	height: 20px;
	margin-bottom: 20px;
}

.sbe-widget__skeleton-bar--row {
	width: 100%;
	height: 40px;
	margin-bottom: 28px;
}

.sbe-widget__skeleton-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.sbe-widget__skeleton-cell {
	aspect-ratio: 1;
	border-radius: 6px;
	background: linear-gradient( 90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63% );
	background-size: 400% 100%;
	animation: sbe-skeleton-shimmer 1.4s ease infinite;
}

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

/* Exact values from the reference widget's own heading/underline CSS (2026-07-28). */
.sbe-widget__heading {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #34404e;
	margin: 0 0 20px;
}

.sbe-widget__heading-bar {
	display: block;
	width: 42px;
	height: 6px;
	margin-top: 8px;
	background: var( --sbe-accent, #1d57c7 );
	border-radius: 13px;
}

/* "No fixed schedule" experience's bottom CTA (SBE_Elementor::render_booking_panel())
   — the participants/calendar sections above render completely normally; only this
   final block swaps for one without a bookable date. A separate class from
   .sbe-widget__add-to-cart on purpose, not just a styling choice — sbe-widget.js
   unconditionally binds a click handler to .sbe-widget__add-to-cart that calls
   addToCart() (which expects a selected date/participants), so reusing that class
   here would fire that handler on every click alongside the plain link navigation. */
/* Javan, 2026-08-26: "center the amount and make it stand out more and add
   padding between it and the button" */
.sbe-widget__contact-price {
	margin: 0 0 20px;
	text-align: center;
	color: var( --sbe-accent, #1d57c7 );
	font-size: 24px;
	font-weight: 700;
}

.sbe-widget .sbe-widget__contact-cta {
	display: flex;
	width: 100%;
	padding: 12px;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 6px;
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.sbe-widget .sbe-widget__contact-cta:hover {
	background: var( --sbe-accent-hover, #164a9e ) !important;
}

.sbe-widget__participants,
.sbe-widget__date,
.sbe-widget__summary {
	margin-bottom: 20px;
}

.sbe-widget__category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
}

.sbe-widget__category-title {
	font-size: 14px;
	font-weight: 700;
	color: #34404e;
}

.sbe-widget__category-sub {
	font-size: 13px;
	color: #6b7280;
	margin-top: 2px;
}

.sbe-widget__stepper {
	display: flex;
	align-items: center;
}

/**
 * Every interactive control below is prefixed with the `.sbe-widget`
 * ancestor (rather than relying on the bare class alone), AND every
 * background/color declaration on them carries `!important`. Two separate
 * theme rules were found live fighting our own styling: WordPress's
 * theme.json global-styles rule (`[type="button"], [type="submit"] {
 * background-color: ... !important; }`) forces a background on every button
 * on the site, `!important` and all — normal-priority CSS loses to it
 * regardless of specificity, so the specificity-only fix from the first
 * pass (bumping our selectors to `.sbe-widget .foo`) wasn't actually enough
 * on its own; only found this on the SECOND live test, once real date data
 * made the difference between "all cells look the same" (first test, mostly
 * empty availability) and "available cells still look the same as empty
 * ones" (second test, with real available dates) visible.
 */

/* Exact values from the reference widget's own stepper button CSS (2026-07-28). */
.sbe-widget .sbe-widget__stepper-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 8px;
	font-size: 30px;
	font-weight: 400;
	border-radius: 100%;
	border: 1px solid var( --sbe-accent, #1d57c7 ) !important;
	background: transparent !important;
	color: var( --sbe-accent, #1d57c7 ) !important;
	cursor: pointer;
	line-height: 1;
}

.sbe-widget .sbe-widget__stepper-btn i {
	font-size: 12px;
}

.sbe-widget .sbe-widget__stepper-btn:hover {
	background: #eff6ff !important;
}

.sbe-widget .sbe-widget__stepper-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sbe-widget .sbe-widget__stepper-btn:disabled:hover {
	background: transparent !important;
}

/* Exact values from the reference widget's own participant-count CSS (2026-07-28). */
.sbe-widget__stepper-value {
	display: inline-block;
	min-width: 32px;
	margin: 0 8px;
	font-size: 16px;
	font-weight: 400;
	color: #34404e;
	text-align: center;
}

.sbe-widget__calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.sbe-widget .sbe-widget__cal-prev,
.sbe-widget .sbe-widget__cal-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --sbe-accent, #1d57c7 ) !important;
	background: transparent !important;
	color: var( --sbe-accent, #1d57c7 ) !important;
	font-size: 12px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__cal-prev:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/**
 * The month/year jump dropdown — clicking the label toggles a scrollable
 * list of the next 12 months (from today, not from whatever month happens
 * to be showing) so a customer can jump ahead without repeatedly clicking
 * the next-month arrow.
 */
.sbe-widget__cal-month-picker {
	position: relative;
}

.sbe-widget .sbe-widget__cal-label-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: transparent !important;
	cursor: pointer;
	padding: 4px;
}

.sbe-widget__cal-label {
	font-weight: 700;
	font-size: 15px;
	color: #34404e;
}

.sbe-widget .sbe-widget__cal-label-btn i {
	font-size: 11px;
	color: var( --sbe-accent, #1d57c7 ) !important;
	transition: transform 0.15s ease;
}

.sbe-widget .sbe-widget__cal-label-btn.is-open i {
	transform: rotate( 180deg );
}

.sbe-widget__cal-month-list {
	position: absolute;
	top: calc( 100% + 4px );
	left: 50%;
	transform: translateX( -50% );
	z-index: 20;
	width: 160px;
	max-height: 180px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	padding: 4px 0;
}

.sbe-widget .sbe-widget__cal-month-item {
	display: block;
	width: 100%;
	text-align: center;
	padding: 6px 12px;
	border: none;
	background: transparent !important;
	color: #6b7280 !important;
	font-size: 13px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__cal-month-item:hover {
	background: #f3f4f6 !important;
}

.sbe-widget .sbe-widget__cal-month-item.is-current {
	background: #f3f4f6 !important;
	color: #34404e !important;
	font-weight: 700;
}

.sbe-widget__cal-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	margin-bottom: 4px;
}

.sbe-widget__cal-weekdays span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #9ca3af !important;
	text-transform: uppercase;
}

.sbe-widget__calendar-grid {
	display: grid;
	/* minmax(0, 1fr), not the bare 1fr equivalent — grid items default to
	   min-width:auto, so without this a cell's own content (e.g. the price
	   line) sets a floor wider than the shrunk mobile column, overflowing
	   the whole grid horizontally instead of the cell just wrapping/clipping. */
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 4px;
}

.sbe-widget .sbe-widget__cal-cell {
	position: relative;
	aspect-ratio: 1;
	border: none;
	background: transparent !important;
	border-radius: 6px;
	cursor: default;
	font-size: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	color: #1f2937 !important;
}

.sbe-widget .sbe-widget__cal-cell-price {
	font-size: 9px;
	font-weight: 400;
	color: #6b7280;
}

.sbe-widget .sbe-widget__cal-cell--blank {
	visibility: hidden;
}

/* Exact values from the reference widget's own past/current-date CSS (2026-07-28). */
.sbe-widget .sbe-widget__cal-cell--none,
.sbe-widget .sbe-widget__cal-cell--past {
	font-weight: 300;
	color: rgba( 52, 64, 78, 0.4 ) !important;
}

.sbe-widget .sbe-widget__cal-cell--today .sbe-widget__cal-cell-num {
	font-weight: 800;
}

/**
 * Matches the reference: an available/limited date isn't filled solid, it
 * keeps a plain white cell with bold dark text and a small triangular
 * ribbon in the top-right corner (green for available, amber for limited).
 */
.sbe-widget .sbe-widget__cal-cell--available,
.sbe-widget .sbe-widget__cal-cell--limited {
	cursor: pointer;
	color: #1f2937 !important;
	font-weight: 700;
}

.sbe-widget .sbe-widget__cal-cell--available::before,
.sbe-widget .sbe-widget__cal-cell--limited::before {
	content: '';
	position: absolute;
	top: 3px;
	right: 3px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 9px 0;
	border-color: transparent #22c55e transparent transparent;
}

.sbe-widget .sbe-widget__cal-cell--limited::before {
	border-color: transparent #f59e0b transparent transparent;
}

.sbe-widget .sbe-widget__cal-cell--full {
	color: #9ca3af !important;
	text-decoration: line-through;
}

.sbe-widget .sbe-widget__cal-cell--available:hover,
.sbe-widget .sbe-widget__cal-cell--limited:hover {
	background: #eff6ff !important;
}

.sbe-widget .sbe-widget__cal-cell.is-selected {
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
}

.sbe-widget .sbe-widget__cal-cell.is-selected .sbe-widget__cal-cell-price {
	color: #dbeafe;
}

/**
 * Date/time view swap: picking a date replaces the calendar entirely with
 * this compact view (date header + time picker + a link back), matching
 * the reference exactly rather than showing both stacked at once.
 */
.sbe-widget .sbe-widget__selected-date-header {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: transparent !important;
	color: #34404e !important;
	font-size: 18px;
	font-weight: 700;
	padding: 0;
	margin-bottom: 8px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__selected-date-header i {
	font-size: 14px;
	color: var( --sbe-accent, #1d57c7 ) !important;
}

.sbe-widget__date-time-view .sbe-widget__heading-bar {
	margin-bottom: 16px;
}

.sbe-widget__time-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #34404e;
	margin: 0 0 8px;
}

/**
 * Custom time-picker dropdown (matches the reference exactly, screenshot
 * 2026-07-28) — not a native <select>, mirrors the same trigger-button +
 * absolute-list pattern as the month-jump dropdown above.
 */
.sbe-widget__time-picker {
	position: relative;
}

.sbe-widget .sbe-widget__time-picker-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 55px;
	border: 1px solid #e5e7eb !important;
	background: #fff !important;
	color: #1f2937 !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 16px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__time-picker-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sbe-widget .sbe-widget__time-picker-btn i:first-child {
	color: var( --sbe-accent, #1d57c7 ) !important;
	font-size: 13px;
}

.sbe-widget__time-picker-label {
	flex: 1;
	text-align: left;
}

.sbe-widget .sbe-widget__time-picker-chevron {
	font-size: 11px;
	color: var( --sbe-accent, #1d57c7 ) !important;
	transition: transform 0.15s ease;
}

.sbe-widget .sbe-widget__time-picker-btn.is-open .sbe-widget__time-picker-chevron {
	transform: rotate( 180deg );
}

.sbe-widget__time-picker-list {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	padding: 4px 0;
}

.sbe-widget .sbe-widget__time-picker-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	border: none;
	background: transparent !important;
	color: var( --sbe-accent, #1d57c7 ) !important;
	font-size: 14px;
	padding: 8px 12px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__time-picker-item:hover:not( :disabled ) {
	background: #f3f4f6 !important;
}

.sbe-widget .sbe-widget__time-picker-item:disabled {
	color: #9ca3af !important;
	cursor: not-allowed;
}

.sbe-widget .sbe-widget__time-picker-item.is-selected {
	background: #f3f4f6 !important;
	font-weight: 600;
}

.sbe-widget .sbe-widget__back-to-calendar {
	display: flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent !important;
	color: var( --sbe-accent, #1d57c7 ) !important;
	font-size: 13px;
	padding: 0;
	margin-top: 10px;
	cursor: pointer;
}

.sbe-widget .sbe-widget__back-to-calendar i {
	font-size: 10px;
}

/**
 * Rate confirmation card shown once a valid time + participant count are
 * chosen, matching the reference widget's step-2 card: rate title + price,
 * a "Selected" badge pinned to the top-right corner, and a couple of info
 * lines (capacity limit, cancellation policy).
 */
.sbe-widget__rate-card {
	position: relative;
	background: #f9fafb;
	border: 1px solid var( --sbe-accent, #1d57c7 );
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 20px;
}

.sbe-widget__rate-card-badge {
	position: absolute;
	top: -10px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var( --sbe-accent, #1d57c7 );
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 10px;
}

.sbe-widget__rate-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 14px;
	color: #1f2937;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #e5e7eb;
}

.sbe-widget__rate-card-price {
	color: #1f2937;
}

.sbe-widget__rate-card-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #6b7280;
	padding: 3px 0;
}

.sbe-widget__rate-card-line i {
	width: 14px;
	font-size: 12px;
	text-align: center;
	flex-shrink: 0;
}

.sbe-widget__rate-card-line--info i {
	color: var( --sbe-accent, #1d57c7 );
}

.sbe-widget__rate-card-line--policy i {
	color: #9ca3af;
}

.sbe-widget__rate-card-bullets {
	list-style: disc;
	margin: 0 0 0 34px;
	padding: 0;
	font-size: 12px;
	color: #6b7280;
}

/**
 * Cinema-ticket-style Booking Summary, converted 1:1 from a reference
 * design Javan supplied directly (SCSS, "Startup Cinema" movie ticket:
 * red header clip + grey body on the left, a dashed-notch stub with an
 * "eye" logo, a big total, and a barcode flourish on the right). Applied
 * literally per his instruction — same structure, same colors ($red
 * #e84c3d / $grey #ecedef / $black #343434), same notch/eye/barcode
 * technique — with only the data-bearing fields swapped for booking
 * content instead of movie-ticket content: .title→experience, .name
 * (relabeled "date")→selected date, .seat (relabeled "guests")→
 * participant count, .time→selected time, cardRight .number (relabeled
 * "total")→price. Static chrome (h1 brand line, barcode) kept as-is
 * since it isn't booking data to substitute. The eye icon and the red/
 * grey card background were removed per Javan (2026-07-29): ticket-left
 * is now an unfilled card with its own border instead of a gradient
 * fill, so `.sbe-widget__ticket-brand` was recolored to the widget's
 * accent (was white, meant to sit on the now-removed red background).
 */
.sbe-widget__summary-card {
	display: flex;
	width: 100%;
	overflow: visible;
}

.sbe-widget__ticket-left,
.sbe-widget__ticket-right {
	position: relative;
	padding: 16px;
}

.sbe-widget__ticket-left {
	flex: 0 0 71%;
	background: #dee9ff30;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding-top: 30px;
	border: 1px solid #e5e7eb;
}

.sbe-widget__ticket-right {
	flex: 0 0 29%;
	background: #1d57c7;
	border-left: 3px dashed #fff;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbe-widget__ticket-right::before,
.sbe-widget__ticket-right::after {
	content: '';
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	left: -8px;
}

.sbe-widget__ticket-right::before {
	top: -6px;
}

.sbe-widget__ticket-right::after {
	bottom: -6px;
}

.sbe-widget__ticket-brand {
	font-size: 16px;
	margin: 0 0 10px;
	color: var( --sbe-accent, #1d57c7 );
}

.sbe-widget__ticket-brand span {
	font-weight: 400;
}

.sbe-widget__ticket-field {
	text-transform: uppercase;
	font-weight: 400;
}

.sbe-widget__ticket-field h2 {
	font-size: 14px;
	color: #525252;
	margin: 0;
}

.sbe-widget__ticket-field span {
	font-size: 11px;
	color: #a2aeae;
}

.sbe-widget__ticket-field--title {
	margin-top: 14px;
}

.sbe-widget__ticket-field--date {
	margin-top: 10px;
}

.sbe-widget__ticket-field--guests,
.sbe-widget__ticket-field--time {
	margin-top: 10px;
	float: left;
}

.sbe-widget__ticket-field--time {
	margin-left: 16px;
}

.sbe-widget__ticket-number {
	text-align: center;
	text-transform: uppercase;
}

.sbe-widget__ticket-number h3 {
	color: #ffffff;
	margin: 0;
	font-size: 26px;
}

.sbe-widget__ticket-number span {
	display: block;
	color: #a2aeae;
	font-size: 11px;
}

.sbe-widget .sbe-widget__add-to-cart {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 6px;
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 0.15s ease;
}

.sbe-widget .sbe-widget__add-to-cart:hover:not( :disabled ) {
	background: var( --sbe-accent-hover, #164a9e ) !important;
}

/**
 * Elementor's icon control can render either a classic `<i class="fas ...">`
 * glyph or an inline `<svg class="e-font-icon-svg ...">` depending on
 * library/version — the SVG form has no intrinsic size constraint of its
 * own and relies on Elementor's own frontend CSS (`.e-font-icon-svg {
 * width: 1em; ... }`) to stay icon-sized, which isn't guaranteed to be
 * loaded in every context. Confirmed live (2026-07-29): without this, the
 * cart icon rendered at ~350px wide, blowing out the whole button.
 */
.sbe-widget .sbe-widget__add-to-cart i,
.sbe-widget .sbe-widget__add-to-cart svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: inherit;
	fill: currentColor;
}

.sbe-widget .sbe-widget__add-to-cart:disabled {
	background: #d1d5db !important;
	color: #6b7280 !important;
	cursor: not-allowed;
}

/* ---------------- SB Bookings Calendar (aggregate grid, Sprint 7.9) ---------------- */

/* Escapes the single-experience panel's fixed 496px width — this widget is a
   full-width grid, not a narrow booking panel. `overflow: visible` so the
   view dropdown (position: absolute) isn't clipped by the base `.sbe-widget`
   rule above. Font is Mulish specifically for this calendar (Javan,
   2026-07-29) — reuses the same Google Fonts handle already loaded for the
   admin dashboard (`sbe-google-fonts-mulish`), not a new font load. */
.sbe-widget.sbe-widget-agg {
	min-width: 0;
	max-width: 100%;
	width: 100%;
	overflow: visible;
	font-family: "Mulish Fonts", "Mulish", sans-serif;
	padding: 20px;
}

/* Found live (2026-07-30): the view-mode dropdown, group-toggle, and generic
   nav below all set their own `display` unconditionally, which — since an
   author stylesheet rule always beats the browser's UA default `[hidden] {
   display: none }` regardless of matching specificity — meant the JS setting
   `.hidden = true` on any of them (closing the Day/Week/Month dropdown,
   hiding By Time/By Experience and the generic nav in Month view) had no
   visible effect at all. `!important` here guarantees `[hidden]` always wins. */
.sbe-widget-agg [hidden] {
	display: none !important;
}

/* Size control (Javan, 2026-07-30) — Default keeps the original fill-the-container
   behavior unchanged; Medium/Large cap it to a fixed centered width instead, for use
   in a full-width section where an uncapped calendar would otherwise stretch too wide. */
.sbe-widget.sbe-widget-agg.sbe-widget-agg--size-medium {
	max-width: 900px;
	margin: 0 auto;
}

.sbe-widget.sbe-widget-agg.sbe-widget-agg--size-large {
	max-width: 1200px;
	margin: 0 auto;
}

.sbe-widget-agg__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.sbe-widget-agg__nav {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	font-size: 15px;
	margin-right: auto;
}

.sbe-widget .sbe-widget-agg__nav-prev,
.sbe-widget .sbe-widget-agg__nav-next {
	background: #fff !important;
	color: #1f2937 !important;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.sbe-widget .sbe-widget-agg__nav-prev:disabled {
	color: #d1d5db !important;
	cursor: not-allowed;
}

.sbe-widget-agg__view-dropdown {
	position: relative;
}

.sbe-widget .sbe-widget-agg__view-btn,
.sbe-widget .sbe-widget-agg__group-btn {
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sbe-widget-agg__view-list {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	display: flex;
	flex-direction: column;
	min-width: 130px;
	overflow: hidden;
	padding: 4px;
}

.sbe-widget .sbe-widget-agg__view-item {
	background: #fff !important;
	color: #1f2937 !important;
	border: none;
	border-radius: 6px;
	text-align: left;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.sbe-widget .sbe-widget-agg__view-item:hover,
.sbe-widget .sbe-widget-agg__view-item.is-active {
	background: #f3f4f6 !important;
}

.sbe-widget-agg__group-toggle {
	display: flex;
	gap: 6px;
}

.sbe-widget .sbe-widget-agg__group-btn.is-active {
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
}

.sbe-widget-agg__view-hint {
	color: #9ca3af;
	font-size: 12px;
	margin: -6px 0 10px;
}

.sbe-widget-agg__summary {
	color: #6b7280;
	font-size: 13px;
	margin: 0 0 16px;
}

.sbe-widget-agg__grid-wrap {
	overflow-x: auto;
	border: 1px solid #eceef1;
	border-radius: 12px;
	padding: 40px;
}

@media ( max-width: 700px ) {
	.sbe-widget-agg__grid-wrap {
		padding: 12px;
	}
}

.sbe-widget-agg__empty {
	color: #6b7280;
	font-size: 13px;
	padding: 20px;
}

/* ---- Day/Week grid (row-per-experience or row-per-time × N day columns) ----
   Desktop only — below AggregateCalendar.MOBILE_BREAKPOINT (700px, matches
   the media query here) the JS renders .sbe-widget-agg__mobile-day sections
   instead (see renderMobileDayList()), never this grid, so there's nothing
   to make responsive here: a label column + N date columns at a 140px
   minimum each cannot fit a phone screen without either horizontal scroll
   or illegibly-shrunk cells, so mobile gets a different shape for the same
   data rather than a squeezed version of this one (Javan, 2026-08-02). */
.sbe-widget-agg__grid {
	display: grid;
	grid-template-columns: 170px repeat( var( --sbe-agg-cols, 7 ), minmax( 140px, 1fr ) );
	min-width: max-content;
}

/* ---- Mobile day list (renderMobileDayList()) — one stacked section per
   date, each date's chips listed vertically, full-width, no columns at all. ---- */

.sbe-widget-agg__mobile-day {
	margin-bottom: 20px;
}

.sbe-widget-agg__mobile-day:last-child {
	margin-bottom: 0;
}

.sbe-widget-agg__mobile-day-label {
	font-weight: 700;
	font-size: 13px;
	color: #374151;
	background: #fafbfc;
	border: 1px solid #eceef1;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
}

.sbe-widget-agg__mobile-day-label--today {
	background: #eef2ff;
	border-color: #c7d2fe;
}

.sbe-widget-agg__mobile-day-chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbe-widget-agg__grid--cols-1 { --sbe-agg-cols: 1; }
.sbe-widget-agg__grid--cols-7 { --sbe-agg-cols: 7; }

.sbe-widget-agg__cell {
	border-bottom: 1px solid #eceef1;
	border-right: 1px solid #eceef1;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbe-widget-agg__cell--head {
	background: #fafbfc;
	font-weight: 700;
	font-size: 12px;
	color: #374151;
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	padding: 14px 10px;
}

.sbe-widget-agg__cell--head.sbe-widget-agg__cell--today {
	background: #eef2ff;
}

.sbe-widget-agg__day-name {
	text-transform: uppercase;
	color: #9ca3af;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sbe-widget-agg__cell--row-label {
	background: #fafbfc;
	font-weight: 700;
	font-size: 13.5px;
	display: flex;
	align-items: center;
}

/* ---- Departure chips (shared by grid + month views) ---- */

/**
 * Color-coded like Bokun's own reference calendar — a full tinted card in the
 * experience's color (not just a thin left border), set via CSS custom
 * properties rather than inline background/color directly so the
 * `!important` still needed to beat the theme's `[type="button"]` rule (see
 * the big comment above .sbe-widget .sbe-widget__stepper-btn) can win the
 * cascade fight while still reading a per-experience value instead of
 * flattening every chip to one hardcoded color.
 */
.sbe-widget .sbe-widget-agg__chip {
	background: var( --sbe-chip-tint, #f3f4f6 ) !important;
	color: var( --sbe-chip-color, #1f2937 ) !important;
	border: none;
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 12px;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.sbe-widget-agg__chip-time {
	font-weight: 700;
	font-size: 13px;
}

.sbe-widget-agg__chip-name {
	font-weight: 600;
	opacity: 0.85;
}

.sbe-widget-agg__chip-count {
	opacity: 0.75;
}

.sbe-widget-agg__chip-bar {
	height: 4px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.08 );
	overflow: hidden;
	margin-top: 2px;
}

.sbe-widget-agg__chip-bar span {
	display: block;
	height: 100%;
	background: var( --sbe-chip-color, #10b981 );
}

.sbe-widget-agg__chip--full {
	opacity: 0.55;
}

.sbe-widget-agg__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 8px;
	flex-shrink: 0;
}

/**
 * Month view (Javan, 2026-07-29: "reuse the same calendar used on SB
 * Booking Experience") renders `.sbe-widget__calendar*` markup directly —
 * the exact same classes the single-experience `Widget` uses for its own
 * month calendar, styled earlier in this file (see ".sbe-widget__calendar-header"
 * and everything under it). No bespoke `.sbe-widget-agg__month-*` CSS needed
 * here at all; that's the whole point of reusing it verbatim. One addition:
 * a max-width + centering, scoped to this widget only (doesn't touch the
 * shared `.sbe-widget__calendar` rule itself) — that calendar has no width
 * of its own, it just fills whatever panel it's in; the single-experience
 * widget's panel is a fixed 496px, but this widget is full-width, and
 * letting 7 `aspect-ratio: 1` cells stretch edge-to-edge would blow the day
 * cells up far larger than the reference ever shows them.
 */
.sbe-widget-agg .sbe-widget__calendar {
	max-width: 700px;
	margin: 0 auto;
}

.sbe-widget-agg .sbe-widget__cal-label {
	font-size: 20px;
}

.sbe-widget-agg .sbe-widget__cal-cell {
	font-size: 16px;
}

.sbe-widget-agg .sbe-widget__cal-cell-price {
	font-size: 12px;
}

.sbe-widget-agg .sbe-widget__cal-prev,
.sbe-widget-agg .sbe-widget__cal-next {
	width: 36px;
	height: 36px;
	font-size: 14px;
}


/**
 * Custom modal (day-list + departure detail popups) — matches the admin
 * screens' own `.sbe-modal` pattern (rounded white card, dark overlay,
 * header row with a plain gray × on the right) rather than continuing to
 * rely on SweetAlert2, whose own popup chrome wasn't rendering correctly on
 * the frontend and whose built-in close button fell victim to the same
 * theme.json `[type="button"]` override bug hit elsewhere in this project.
 * Every button here gets `!important` for that same reason — unlike the
 * admin's identical-looking modal, this one renders on the public frontend
 * where that theme rule is actually live.
 */
.sbe-widget-agg__modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 17, 24, 39, 0.5 );
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
	z-index: 100001;
}

.sbe-widget-agg__modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.18 );
	width: 100%;
	max-width: 440px;
	padding: 24px;
	font-family: "Mulish Fonts", "Mulish", sans-serif;
	text-align: left;
}

.sbe-widget-agg__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.sbe-widget-agg__modal-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sbe-widget-agg__modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: #111827;
}

.sbe-widget-agg__modal .sbe-widget-agg__modal-back {
	background: none !important;
	border: 0;
	font-size: 16px;
	color: #6b7280 !important;
	cursor: pointer;
	flex-shrink: 0;
	padding: 4px;
	display: flex;
	align-items: center;
}

.sbe-widget-agg__modal .sbe-widget-agg__modal-back:hover {
	color: #111827 !important;
}

/**
 * Boosted to a real 2-class ancestor selector (`.sbe-widget-agg__modal
 * .sbe-widget-agg__modal-close`, specificity 0,2,0) instead of a lone class
 * — a plain single-class `!important` rule tied on specificity with the
 * theme's `[type="button"]` rule (also 0,1,0) and still lost, so this no
 * longer gambles on stylesheet load order to win that tie. `.sbe-widget-agg__modal`
 * is a real ancestor here (this modal is appended to <body>, outside
 * `.sbe-widget` — a `.sbe-widget`-prefixed selector would never match, same
 * reasoning as the gallery lightbox below, just with a different available
 * ancestor).
 */
.sbe-widget-agg__modal .sbe-widget-agg__modal-close {
	background: none !important;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #6b7280 !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sbe-widget-agg__modal-cta {
	margin: 0 0 12px;
	font-size: 13px;
	color: #6b7280;
}

.sbe-widget-agg__modal-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.sbe-widget-agg__modal .sbe-widget-agg__day-list-item {
	background: #fff !important;
	color: #1f2937 !important;
	border: 1px solid #e5e7eb;
	border-left-width: 4px;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.sbe-widget-agg__modal .sbe-widget-agg__day-list-item:hover {
	background: #f3f4f6 !important;
}

.sbe-widget-agg__popup-excerpt {
	color: #6b7280;
	font-size: 13px;
	margin: 0 0 10px !important;
}

.sbe-widget-agg__popup-datetime {
	font-size: 13px;
	margin-bottom: 8px;
}

.sbe-widget-agg__popup-price {
	font-weight: 700;
	color: var( --sbe-accent, #1d57c7 );
	margin-bottom: 10px;
}

.sbe-widget-agg__popup-availability {
	margin-bottom: 16px;
}

.sbe-widget-agg__popup-availability span {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 4px;
}

.sbe-widget-agg__modal .sbe-widget-agg__book-btn {
	background: var( --sbe-accent, #1d57c7 ) !important;
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	width: 100%;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sbe-widget-agg__modal .sbe-widget-agg__book-btn:hover:not( :disabled ) {
	background: var( --sbe-accent-hover, #164a9e ) !important;
}

.sbe-widget-agg__modal .sbe-widget-agg__book-btn:disabled {
	background: #d1d5db !important;
	color: #6b7280 !important;
	cursor: not-allowed;
}

/**
 * Gallery lightbox slider — a single overlay instance shared by every
 * `.sbe-widget-a__gallery` on the page (appended to <body> once per
 * gallery by public/js/sbe-widget.js), not scoped inside `.sbe-widget-a`
 * since it renders above everything, outside the widget's own box.
 */
.sbe-widget-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.85 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.sbe-widget-lightbox--open {
	opacity: 1;
	visibility: visible;
}

.sbe-widget-lightbox__image {
	max-width: 88vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 4px;
}

/* Selectors qualified with the .sbe-widget-lightbox ancestor (not just the
   button's own class) to out-specificity the theme's global button-color
   rule on a same-specificity/!important tie — this lightbox is appended
   directly to <body>, outside .sbe-widget, so it doesn't get the ancestor
   scoping that already protects every other button in the widget (Javan,
   live-tested 2026-08-01: close/prev/next still rendering theme maroon). */
.sbe-widget-lightbox .sbe-widget-lightbox__close,
.sbe-widget-lightbox .sbe-widget-lightbox__prev,
.sbe-widget-lightbox .sbe-widget-lightbox__next {
	position: absolute;
	background: rgba( 255, 255, 255, 0.12 ) !important;
	color: #fff !important;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbe-widget-lightbox .sbe-widget-lightbox__close:hover,
.sbe-widget-lightbox .sbe-widget-lightbox__prev:hover,
.sbe-widget-lightbox .sbe-widget-lightbox__next:hover {
	background: rgba( 255, 255, 255, 0.25 ) !important;
}

.sbe-widget-lightbox__close {
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 1;
}

.sbe-widget-lightbox__prev,
.sbe-widget-lightbox__next {
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	font-size: 18px;
}

.sbe-widget-lightbox__prev {
	left: 20px;
}

.sbe-widget-lightbox__next {
	right: 20px;
}

body.sbe-widget-lightbox-lock {
	overflow: hidden;
}

/**
 * SB Order Summary widget (Javan, 2026-08-04) — mostly relies on
 * WooCommerce's own `.woocommerce-order`/`order_details`/order-table CSS
 * classes (already styled by WooCommerce's core stylesheet and whatever
 * the active theme adds on top), so there isn't much to add here beyond
 * font/spacing and the no-order placeholder state.
 */
.sbe-order-summary {
	font-family: "Mulish", sans-serif;
}

.sbe-order-summary__placeholder {
	margin: 40px 0;
	padding: 24px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
}

/**
 * Custom Thank You Page redesign (Javan, 2026-08-25 — "design it like"
 * plugins.yithemes.com/yith-custom-thank-you-page-for-woocommerce's live
 * demo). Teal for the order-data section headings, orange for the
 * upsell/share section headings — matches the reference's own two-tone
 * heading scheme. WooCommerce's own order-details/order-details-customer
 * templates keep their default markup/classes (untouched, so taxes/coupons/
 * refunds never drift out of sync) — this only restyles them.
 *
 * Confirmed against the live reference's own computed styles (2026-08-25):
 * the thank-you message is `text-align: center` (`.has-text-align-center`
 * there), the order-meta list is centered with each line stacked, and
 * "Customer details" is left-aligned — matched exactly below.
 *
 * `!important` throughout this block is deliberate, not sloppy — found live
 * (2026-08-25) that this site ALSO has the real "YITH Custom Thank You Page
 * for WooCommerce Premium" plugin active, whose own CSS targets these exact
 * same standard WooCommerce class names (.woocommerce-order-overview,
 * .order_details, etc. — reused here on purpose for WooCommerce/theme
 * compatibility) and was winning several properties in the cascade (e.g.
 * `li { display: inline-block }` beat this stylesheet's `display: block`
 * even though text-align: center was winning — confirmed via
 * getComputedStyle() in the Elementor editor iframe). Only classes unique to
 * this widget (`.sbe-order-summary__*`) are exempt — nothing else styles those.
 */
.sbe-order-summary .woocommerce-thankyou-order-received {
	text-align: center !important;
}

.sbe-order-summary .woocommerce-order-overview {
	text-align: center !important;
	list-style: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

.sbe-order-summary .woocommerce-order-overview li {
	display: block !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	border: none !important;
	font-size: 14px !important;
}

.sbe-order-summary__hero-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 24px;
}

.sbe-order-summary__section-title {
	color: #16a689;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 32px 0 16px;
}

.sbe-order-summary__section-title--center {
	text-align: center;
}

.sbe-order-summary__item-thumb,
.sbe-order-summary__sample-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.sbe-order-summary__item-thumb img,
.sbe-order-summary__sample-item img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.sbe-order-summary__accent-title {
	color: #e8901c;
	font-size: 18px;
	font-weight: 700;
	margin: 40px 0 20px;
	text-align: center;
}

/**
 * Reference has no per-row grid/zebra striping at all — clean rows with
 * generous vertical space, a single rule under the header, another single
 * rule between the last item and the Subtotal/Payment method/Total block
 * (rendered as plain label/value lines, not more table grid), and only the
 * final Total row colored/bold. Overrides the active theme's own
 * shop_table/order_details styling (zebra background, per-cell borders),
 * which is where those came from by default.
 */
.sbe-order-summary .woocommerce-table.order_details {
	width: 100% !important;
	border-collapse: collapse !important;
}

.sbe-order-summary .woocommerce-table.order_details thead th {
	padding: 8px 0 16px !important;
	border: none !important;
	/* Typography left un-!important so the theme's own table styling and the
	   SB Order Summary widget's Elementor style controls can override it. */
	font-weight: 700;
}

/**
 * Column alignment is set per-column, not blanket on every th: only the
 * product-name column (header + body cells) is left-aligned; the Total
 * column keeps its right alignment from the `td:last-child` rule below.
 * The product-name body cell also lays out its thumbnail + title in a row.
 */
.sbe-order-summary .woocommerce-table.order_details .woocommerce-table__product-name.product-name {
	text-align: left !important;
}

.sbe-order-summary .woocommerce-table.order_details th.woocommerce-table__product-table.product-total {
	text-align: right !important;
}

.sbe-order-summary .woocommerce-table.order_details td.woocommerce-table__product-name.product-name {
	display: flex !important;
	gap: 10px;
	align-items: center;
}

/**
 * Theme's own table zebra striping (`table tbody>tr:nth-child(odd)>td,
 * table tbody>tr:nth-child(odd)>th { background-color: hsla(0,0%,50%,.071) }`)
 * targets odd rows specifically via the `>` child combinator — this
 * stylesheet's earlier blanket `tbody tr` override didn't match that exact
 * selector shape closely enough to reliably beat it everywhere, so it's
 * neutralized directly here instead.
 */
.sbe-order-summary .woocommerce-table.order_details tbody > tr:nth-child(odd) > td,
.sbe-order-summary .woocommerce-table.order_details tbody > tr:nth-child(odd) > th {
	background-color: transparent !important;
}

.sbe-order-summary .woocommerce-table.order_details tbody tr,
.sbe-order-summary .woocommerce-table.order_details tbody tr:nth-child(2n) {
	background: transparent !important;
}

.sbe-order-summary .woocommerce-table.order_details tbody td {
	padding: 30px 0 !important;
	border: none !important;
	text-align: left !important;
}

.sbe-order-summary .woocommerce-table.order_details tbody td:last-child {
	text-align: right !important;
}

.sbe-order-summary .woocommerce-table.order_details tfoot {
	border-top: 1px solid #000000 !important;
}

.sbe-order-summary .woocommerce-table.order_details tfoot th,
.sbe-order-summary .woocommerce-table.order_details tfoot td {
	padding: 10px 0 !important;
	border: none !important;
	text-align: left !important;
	/* Typography left un-!important — overridable by the theme and by the
	   SB Order Summary widget's Elementor style controls. */
	font-weight: 400;
}

.sbe-order-summary .woocommerce-table.order_details tfoot td {
	text-align: right !important;
}

.sbe-order-summary .woocommerce-table.order_details tfoot tr:last-child th,
.sbe-order-summary .woocommerce-table.order_details tfoot tr:last-child td {
	/* Default emphasis for the final (Total) row — kept overridable (no
	   !important) so the widget's Elementor "Totals & Payment Method" style
	   controls can change it. */
	color: #16a689;
	font-weight: 700;
}

.sbe-order-summary__customer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
}

.sbe-order-summary__customer {
	flex: 2 1 320px;
}

.sbe-order-summary__help {
	flex: 1 1 220px;
	background: #f4f6f7;
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	align-self: flex-start;
}

.sbe-order-summary__help-heading {
	font-weight: 700;
	margin: 0 0 12px;
}

.sbe-order-summary__help-phone {
	display: block;
	color: #16a689;
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.sbe-order-summary__upsells .sbe-embed__list-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/**
 * WooCommerce Products / Categories / All sources render through
 * WooCommerce's own content-product.php template part (real Add to Cart,
 * price/sale badges) inside a plain <ul class="products"> — the theme's own
 * woocommerce.css usually lays that out, but this widget can render outside
 * a normal shop-loop context, so a self-contained flex fallback keeps it
 * matching the experience cards' grid regardless of theme.
 */
.sbe-order-summary__product-grid.products {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbe-order-summary__product-grid.products li.product {
	width: 220px;
	text-align: center;
}

.sbe-order-summary__share {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #ececec;
	border-radius: 8px;
}

.sbe-order-summary__share-image {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.sbe-order-summary__share-body {
	flex: 1 1 240px;
}

.sbe-order-summary__share-title {
	font-weight: 700;
	margin: 0 0 12px;
}

.sbe-order-summary__share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/**
 * color/text-decoration are !important because the active theme's generic
 * `a:hover` rule (turns links black, underlined) otherwise wins on hover —
 * found live (2026-08-25, "on hover the share button turns to black").
 * Hover dims the same background color via filter instead of swapping to a
 * separate darker color per network, so text stays white throughout.
 */
.sbe-order-summary__share-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	color: #fff !important;
	transition: filter 0.15s ease;
}

.sbe-order-summary__share-btn:hover,
.sbe-order-summary__share-btn:focus {
	color: #fff !important;
	text-decoration: none !important;
	filter: brightness(85%);
}

.sbe-order-summary__share-btn--facebook { background: #1877f2; }
.sbe-order-summary__share-btn--twitter { background: #1da1f2; }
.sbe-order-summary__share-btn--pinterest { background: #e60023; }
.sbe-order-summary__share-btn--whatsapp { background: #25d366; }

@media (max-width: 640px) {
	.sbe-order-summary__customer-row {
		flex-direction: column;
	}
}