/* =========================================================================
   LedSof Billboards — plugin styles
   ---------------------------------
   The map shortcode (.ls-*) reuses styles from the parent site's ledsof.css.
   This file only ships:
     · pin "available" / "occupied" color modifier (avoids hardcoded color)
     · billboard-detail card body (.bb-mc-*) since its DOM differs from the
       homepage map's project card (.ls-mc-*)
     · preview tool (.bb-preview)
     · dates form + modal (.bb-dates)
     · admin-side helpers also live here in case they're needed on the
       front end (e.g. for previewing in the customizer)

   Everything is scoped to .ledsof-bb-* or .bb-* — no generic selectors.
   ========================================================================= */

/* CSS-variable bridge: read from the parent site if defined, fall back to
   the values on the homepage map's inline <style>. */
:where(.ledsof-bb-map, .ledsof-bb-preview, .ledsof-bb-dates, .bb-dates-modal) {
	--bb-bg:       var(--ls-bg, #0b0b0d);
	--bb-fg:       var(--ls-text, #e9e8e4);
	--bb-text-mid: var(--ls-text-mid, #b7b6b0);
	--bb-mute:     var(--ls-text-mute, #7a7974);
	--bb-line:     var(--ls-line, rgba(255,255,255,0.06));
	--bb-line2:    var(--ls-line-strong, rgba(255,255,255,0.12));
	--bb-accent:   var(--ls-accent, #ff5a3c);
	--bb-card-bg:  rgba(11,11,13,0.94);
	--bb-mono:     var(--ls-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	--bb-sans:     var(--ls-font-body, "Inter Tight", "Inter", system-ui, sans-serif);
	--bb-display:  var(--ls-font-display, "Inter Tight", "Inter", system-ui, sans-serif);
	color: var(--bb-fg);
}

/* Native <option> menus open with the OS chrome. With our dark theme,
   inheriting the form's white-on-transparent makes the menu unreadable —
   force explicit dark-on-white for the dropdown panel itself. */
.ledsof-bb-map select option,
.ledsof-bb-preview select option,
.ledsof-bb-dates select option,
.bb-dates-modal select option,
.ledsof-bb-map select optgroup,
.ledsof-bb-preview select optgroup,
.ledsof-bb-dates select optgroup,
.bb-dates-modal select optgroup {
	background: #ffffff;
	color: #0b0b0d;
}

/* Universal hide for anything we mark `hidden` inside our scopes — beats
   theme rules like `.col > div { display: block }`. */
.ledsof-bb-map [hidden],
.ledsof-bb-preview [hidden],
.ledsof-bb-dates [hidden],
.bb-dates-modal [hidden] { display: none !important; }

.ledsof-bb-empty {
	color: var(--bb-mute);
	font-family: var(--bb-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 20px 0;
}

/* =========================================================================
   Map widget — comprehensive default styling.
   Scoped to `.ledsof-bb-map.bb-map-block` (the wrapper has both classes per
   the template) so specificity is 0,0,2,0 — enough to defeat most theme
   rules. CSS variables fall back to plugin defaults but pick up `--ls-*`
   from the parent site if defined.
   ========================================================================= */
.ledsof-bb-map.bb-map-block {
	max-width: 1360px;
	margin: 0 auto;
	color: var(--bb-fg);
	font-family: var(--bb-sans);
}
.ledsof-bb-map .bb-map-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	gap: 20px;
	flex-wrap: wrap;
}
.ledsof-bb-map .bb-map-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ledsof-bb-map .bb-fchip {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.08);
	color: var(--bb-text-mid);
	padding: 10px 16px;
	font-family: var(--bb-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .2s;
}
.ledsof-bb-map .bb-fchip:hover { color: var(--bb-fg); border-color: rgba(255,255,255,0.18); }
.ledsof-bb-map .bb-fchip.on    { color: var(--bb-fg); border-color: var(--bb-fg); }
.ledsof-bb-map .bb-fchip__n    { opacity: 0.65; }

.ledsof-bb-map .bb-map-stage {
	position: relative;
	aspect-ratio: 16/10;
	background: var(--bb-bg);
	border: 1px solid var(--bb-line);
}
.ledsof-bb-map .bb-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.ledsof-bb-map .ls-bg-path {
	/* Land must read clearly against the black "sea" — otherwise coastal pins
	   (which sit right on the coast) look like they're floating in water. It
	   brightens progressively as you zoom, where the distinction matters most. */
	fill: rgba(255,255,255,0.09);
	stroke: var(--bb-accent);
	stroke-width: 1.2;
	stroke-dasharray: 3 2;
	/* Keep the coastline a crisp constant-width line at any zoom instead of a
	   thick scaled band (dashes also stay a constant screen size). */
	vector-effect: non-scaling-stroke;
}
.ledsof-bb-map .bb-map-svg.bb-zoomed   .ls-bg-path { fill: rgba(255,255,255,0.13); }
.ledsof-bb-map .bb-map-svg.bb-zoom-deep .ls-bg-path { fill: rgba(255,255,255,0.17); }
.ledsof-bb-map .ls-mlabel {
	font-family: var(--bb-mono);
	font-size: 8px;
	letter-spacing: 0.18em;
	fill: var(--bb-mute);
}

.ledsof-bb-map .ls-pin                      { cursor: pointer; }
.ledsof-bb-map .ls-pin__halo                { fill: var(--bb-accent); opacity: 0; transform-origin: center; transform-box: fill-box; }
.ledsof-bb-map .ls-pin__dot                 { fill: var(--bb-accent); transition: r .2s, fill .2s; }
.ledsof-bb-map .ls-pin:hover .ls-pin__dot   { r: 7; }
.ledsof-bb-map .ls-pin.active .ls-pin__halo { animation: ledsof-bb-pulse 2.4s infinite ease-out; }
/* The pulse ring's radius scales with the zoom, so at zoom it balloons into a
   big translucent blob. Drop it once zoomed — the card, list highlight and the
   dot already mark the active pin. */
.ledsof-bb-map .bb-map-svg.bb-zoomed .ls-pin.active .ls-pin__halo { animation: none; opacity: 0; }
.ledsof-bb-map .ls-pin.dim                  { opacity: 0.18; }

/* "Occupied" billboards render in muted gray instead of accent orange. */
.ledsof-bb-map .ls-pin--occupied .ls-pin__dot,
.ledsof-bb-map .ls-pin--occupied .ls-pin__halo,
.ledsof-bb-map .ls-pin--taken    .ls-pin__dot,
.ledsof-bb-map .ls-pin--taken    .ls-pin__halo { fill: var(--bb-mute); }
.ledsof-bb-map .ls-pin--avail    .ls-pin__dot,
.ledsof-bb-map .ls-pin--avail    .ls-pin__halo { fill: var(--bb-accent); }

/* Marker clusters (dense areas at low zoom). */
.ledsof-bb-map .ls-cluster { cursor: pointer; }
.ledsof-bb-map .ls-cluster__bg {
	fill: var(--bb-accent);
	stroke: var(--bb-bg);
	stroke-width: 2;
	transition: fill .15s;
}
.ledsof-bb-map .ls-cluster[data-occupied] .ls-cluster__bg { fill: var(--bb-mute); }
.ledsof-bb-map .ls-cluster:hover .ls-cluster__bg { fill: var(--bb-fg); }
.ledsof-bb-map .ls-cluster__n {
	fill: var(--bb-bg);
	font-family: var(--bb-mono), ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	pointer-events: none;
}

/* Spiderfy: co-located billboards (same address, two-sided screens, etc.) can
   never separate by zooming, so a click fans them out on connector legs — each
   leg is its own clickable pin. Built in JS in the .ls-spider layer. */
.ledsof-bb-map .ls-cluster.is-spider .ls-cluster__bg { fill: var(--bb-mute); opacity: 0.4; }
.ledsof-bb-map .ls-cluster.is-spider .ls-cluster__n  { opacity: 0.5; }
.ledsof-bb-map .ls-spider-line {
	stroke: var(--bb-accent);
	stroke-width: 1;
	stroke-opacity: 0.55;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}
.ledsof-bb-map .ls-spider-leg { cursor: pointer; }
.ledsof-bb-map .ls-spider-leg .ls-pin__halo { opacity: 0.2; }
.ledsof-bb-map .ls-spider-leg .ls-pin__dot  { stroke: var(--bb-bg); stroke-width: 1.5; }
.ledsof-bb-map .ls-spider-leg { animation: ledsof-bb-spider-in .16s ease-out; }
@keyframes ledsof-bb-spider-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* In-view list overlay (appears on the map's left edge when zoomed in). */
.ledsof-bb-map .bb-map-list {
	position: absolute;
	top: 14px;
	left: 14px;
	/* Stop above the zoom controls (bottom-left) so the list never covers them. */
	bottom: 132px;
	z-index: 6;
	width: 244px;
	max-width: calc(100% - 120px);
	display: flex;
	flex-direction: column;
	background: var(--bb-card-bg, rgba(11, 11, 13, 0.94));
	border: 1px solid var(--bb-line2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.ledsof-bb-map .bb-map-list[hidden] { display: none; }
.bb-map-list__head {
	flex: none;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bb-line);
	font-family: var(--bb-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.bb-map-list__items {
	list-style: none;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
}
.ledsof-bb-map .bb-map-list__item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-fg);
	font-family: var(--bb-sans);
	font-size: 12px;
	line-height: 1.3;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s, color .15s;
}
.ledsof-bb-map .bb-map-list__item:hover { background: rgba(255, 255, 255, 0.06); }
.ledsof-bb-map .bb-map-list__item.is-active { background: var(--bb-accent); color: var(--bb-bg); }
.bb-map-list__item .c {
	display: block;
	margin-bottom: 2px;
	font-family: var(--bb-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.ledsof-bb-map .bb-map-list__item.is-active .c { color: var(--bb-bg); opacity: 0.75; }
.bb-map-list__empty {
	padding: 12px;
	color: var(--bb-mute);
	font-family: var(--bb-mono);
	font-size: 10.5px;
}
@media (max-width: 700px) {
	.ledsof-bb-map .bb-map-list { display: none !important; }
	/* Phones swap the map for the searchable list — the stage keeps only the card. */
	.ledsof-bb-map .bb-map-svg,
	.ledsof-bb-map .bb-map-zoom { display: none !important; }
	.ledsof-bb-map .bb-map-stage { aspect-ratio: auto !important; border: none; background: transparent; }
	.ledsof-bb-map .bb-map-mobile { display: block; }
}

/* ─── Mobile list (replaces the map below 700px) ─── */
.bb-map-mobile { display: none; }
.ledsof-bb-map .bb-msearch {
	width: 100%;
	padding: 12px 14px;
	background: var(--bb-panel, #131316);
	border: 1px solid var(--bb-line2);
	color: var(--bb-ink);
	font-family: var(--bb-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.ledsof-bb-map .bb-msearch:focus { border-color: rgba(255, 255, 255, 0.25); }
.ledsof-bb-map .bb-msearch::placeholder {
	color: var(--bb-mute);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ledsof-bb-map .bb-mlist {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	max-height: 55vh;
	overflow: auto;
	border: 1px solid var(--bb-line);
	background: var(--bb-bg);
	-webkit-overflow-scrolling: touch;
}
.ledsof-bb-map .bb-mlist li { margin: 0; }
.ledsof-bb-map .bb-mlist__city {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 14px;
	background: var(--bb-panel, #131316);
	border-bottom: 1px solid var(--bb-line);
	font-family: var(--bb-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.ledsof-bb-map .bb-mlist .bb-map-list__item { border-bottom: 1px solid var(--bb-line); }
.ledsof-bb-map .bb-mlist__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 10px;
	background: var(--bb-accent);
	box-shadow: 0 0 6px rgba(255, 90, 60, 0.7);
	vertical-align: 1px;
}
.ledsof-bb-map .bb-mlist__dot--occ { background: var(--bb-mute); box-shadow: none; }
.ledsof-bb-map .bb-mlist .bb-map-list__item.is-active .bb-mlist__dot { background: var(--bb-bg); box-shadow: none; }

@keyframes ledsof-bb-pulse {
	0%   { opacity: 0.5; transform: scale(0.6); }
	100% { opacity: 0;   transform: scale(2.6); }
}

/* ─── Detail card ─── */
.ledsof-bb-map .bb-map-card {
	position: absolute;
	right: 18px; bottom: 18px;
	width: 300px;
	background: var(--bb-card-bg);
	border: 1px solid var(--bb-line2);
	backdrop-filter: blur(8px);
	padding: 0;
	font-family: var(--bb-sans);
	transition: opacity .25s;
}
.ledsof-bb-map .bb-mc-photo {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	background:
		radial-gradient(ellipse at center, rgba(255,90,60,0.10) 0%, transparent 60%),
		repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.02) 14px 28px),
		#0d0d10;
	border-bottom: 1px solid var(--bb-line);
	margin: 0;
}
.ledsof-bb-map .bb-mc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ledsof-bb-map .bb-mc-tag {
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-mute);
	padding: 18px 22px 0;
}
.ledsof-bb-map .bb-mc-title {
	font-family: var(--bb-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--bb-fg);
	padding: 6px 22px 0;
	margin: 0;
	line-height: 1.3;
}
.ledsof-bb-map .bb-mc-loc {
	font-size: 13px;
	color: var(--bb-text-mid);
	padding: 6px 22px 16px;
}
.ledsof-bb-map .bb-mc-gmaps {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 22px 16px;
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-mute);
	text-decoration: none;
	border-bottom: 1px solid var(--bb-line2);
	padding-bottom: 2px;
	width: fit-content;
	transition: color .2s, border-color .2s;
}
.ledsof-bb-map .bb-mc-gmaps:hover {
	color: var(--bb-fg);
	border-bottom-color: var(--bb-accent);
	text-decoration: none;
}
.ledsof-bb-map .bb-mc-rows {
	margin: 0;
	padding: 0 22px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--bb-line);
}
.ledsof-bb-map .bb-mc-rows > div {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--bb-line);
	font-size: 12px;
	gap: 12px;
}
.ledsof-bb-map .bb-mc-rows > div:last-child { border-bottom: none; }
.ledsof-bb-map .bb-mc-rows .l {
	color: var(--bb-mute);
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ledsof-bb-map .bb-mc-rows .v {
	color: var(--bb-fg);
	text-align: right;
	font-family: var(--bb-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
}
.ledsof-bb-map .bb-mc-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 16px 22px 22px;
}
/* Single-button case (only Provery дати) — span full width. */
.ledsof-bb-map .bb-mc-cta > .bb-mc-btn:only-child { grid-column: 1 / -1; }
.ledsof-bb-map .bb-mc-btn,
.ledsof-bb-map a.bb-mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	font-family: var(--bb-sans);
	font-size: 11px;
	letter-spacing: 0.02em;
	border: 1px solid var(--bb-line2);
	color: var(--bb-fg);
	background: transparent;
	text-decoration: none;
	transition: all .2s;
	cursor: pointer;
}
.ledsof-bb-map a.bb-mc-btn:hover,
.ledsof-bb-map .bb-mc-btn:hover {
	background: var(--bb-fg);
	color: var(--bb-bg);
	border-color: var(--bb-fg);
	text-decoration: none;
}
.ledsof-bb-map a.bb-mc-btn--primary,
.ledsof-bb-map .bb-mc-btn--primary {
	background: var(--bb-accent);
	color: var(--bb-bg);
	border-color: var(--bb-accent);
}
.ledsof-bb-map a.bb-mc-btn--primary:hover,
.ledsof-bb-map .bb-mc-btn--primary:hover {
	background: transparent;
	color: var(--bb-accent);
	border-color: var(--bb-accent);
}
.ledsof-bb-map .bb-mc-btn .arr        { transition: transform .2s; display: inline-block; }
.ledsof-bb-map .bb-mc-btn:hover .arr  { transform: translateX(3px); }

/* Theme/Elementor-kit link rules (underline, global link color) leak into the
   CTA anchor and the gmaps link — win the fight explicitly. */
.ledsof-bb-map a.bb-mc-btn,
.ledsof-bb-map a.bb-mc-btn:hover,
.ledsof-bb-map a.bb-mc-btn:focus,
.ledsof-bb-map a.bb-mc-btn:visited {
	text-decoration: none !important;
	border-bottom-width: 1px; /* keep the box border, kill theme underline-as-border */
}
.ledsof-bb-map a.bb-mc-btn--primary,
.ledsof-bb-map a.bb-mc-btn--primary:visited {
	color: var(--bb-bg) !important;
}
.ledsof-bb-map a.bb-mc-btn--primary:hover,
.ledsof-bb-map a.bb-mc-btn--primary:focus {
	color: var(--bb-accent) !important;
}
.ledsof-bb-map a.bb-mc-gmaps,
.ledsof-bb-map a.bb-mc-gmaps:visited {
	color: var(--bb-text-mid) !important;
	text-decoration: none !important;
}
.ledsof-bb-map a.bb-mc-gmaps:hover { color: var(--bb-accent) !important; }

/* --- Map zoom & pan ----------------------------------------------------- */
/* Only the small dot captures clicks; the 14px halo used to swallow taps
   meant for neighboring pins in dense clusters. */
.ledsof-bb-map .ls-pin__halo { pointer-events: none; }

.ledsof-bb-map .bb-map-zoom {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 0;
	z-index: 5;
}
.ledsof-bb-map .bb-zoom-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: var(--bb-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--bb-fg);
	background: var(--bb-card-bg);
	border: 1px solid var(--bb-line2);
	cursor: pointer;
	transition: all .2s;
	user-select: none;
}
.ledsof-bb-map .bb-zoom-btn + .bb-zoom-btn { border-top: 0; }
.ledsof-bb-map .bb-zoom-btn:hover {
	background: var(--bb-fg);
	color: var(--bb-bg);
	border-color: var(--bb-fg);
}
.ledsof-bb-map .bb-zoom-btn:disabled {
	opacity: 0.3;
	cursor: default;
	background: var(--bb-card-bg);
	color: var(--bb-fg);
	border-color: var(--bb-line2);
}
.ledsof-bb-map .bb-map-svg.bb-zoomed {
	cursor: grab;
	touch-action: none; /* pan the map, not the page, while zoomed */
	-webkit-user-select: none;
	user-select: none;
}
.ledsof-bb-map .bb-map-svg.bb-panning { cursor: grabbing; }
/* City labels lose meaning (and legibility) once zoomed in — fade them out. */
.ledsof-bb-map .ls-mlabel { transition: opacity .25s; }
.ledsof-bb-map .bb-map-svg.bb-zoom-deep .ls-mlabel { opacity: 0; }

@media (max-width: 700px) {
	.ledsof-bb-map .bb-map-card { position: static; width: auto; margin-top: 16px; }
	.ledsof-bb-map .bb-mc-photo { aspect-ratio: 16/9; }
}


/* ─── Preview tool ─── */
.ledsof-bb-preview {
	background: var(--bb-bg);
	border: 1px solid var(--bb-line);
	padding: 22px;
	font-family: var(--bb-sans);
	max-width: 1200px;
	margin: 0 auto;
}
.bb-preview__form { display: grid; gap: 18px; }
.bb-preview__upload {
	border: 1px dashed var(--bb-line2);
	padding: 28px 22px;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
	text-align: center;
}
.bb-preview__upload.is-dragover {
	border-color: var(--bb-accent);
	background: rgba(255,90,60,0.05);
}
.bb-preview__upload-tag {
	font-family: var(--bb-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	color: var(--bb-mute);
	margin-bottom: 12px;
}
.bb-preview__upload-msg { color: var(--bb-fg); font-size: 14px; margin-bottom: 6px; }
.bb-preview__upload-or { color: var(--bb-mute); font-size: 11px; margin: 8px 0; font-family: var(--bb-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.bb-preview__pick {
	background: transparent;
	border: 1px solid var(--bb-fg);
	color: var(--bb-fg);
	font-family: var(--bb-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 18px;
	cursor: pointer;
	transition: all .2s;
}
.bb-preview__pick:hover { background: var(--bb-fg); color: var(--bb-bg); }
.bb-preview__filename {
	margin-top: 12px;
	font-family: var(--bb-mono);
	font-size: 11px;
	color: var(--bb-mute);
	word-break: break-all;
}

.bb-preview__select { display: grid; gap: 6px; }
.bb-preview__label {
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.bb-preview__select select,
.bb-preview__select input[type="email"] {
	background: transparent;
	border: 1px solid var(--bb-line2);
	color: var(--bb-fg);
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--bb-sans);
	width: 100%;
}
.bb-preview__select input[aria-invalid="true"] { border-color: var(--bb-accent); }
.bb-preview__err {
	display: block;
	margin-top: 4px;
	font-family: var(--bb-mono);
	font-size: 10.5px;
	color: var(--bb-accent);
	min-height: 14px;
}

.bb-preview__cta { display: flex; }
.bb-preview__submit {
	background: var(--bb-accent);
	color: var(--bb-bg);
	border: 1px solid var(--bb-accent);
	font-family: var(--bb-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 13px 22px;
	cursor: pointer;
	transition: opacity .2s;
}
.bb-preview__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: transparent;
	color: var(--bb-mute);
	border-color: var(--bb-line2);
}
.bb-preview__submit .arr { margin-left: 6px; }

.bb-preview__feedback {
	min-height: 20px;
	font-family: var(--bb-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--bb-mute);
}
.bb-preview__feedback.is-error { color: var(--bb-accent); }

.bb-preview__result { display: grid; gap: 14px; }
.bb-preview__result-stage {
	width: 100%;
	background: var(--bb-bg);
	border: 1px solid var(--bb-line);
	overflow: hidden;
	position: relative;
}
.bb-preview__result-stage img { display: block; width: 100%; height: auto; }
.bb-preview__caption {
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.bb-preview__actions { display: flex; gap: 10px; }
.bb-preview__share, .bb-preview__reset {
	background: transparent;
	border: 1px solid var(--bb-line2);
	color: var(--bb-fg);
	font-family: var(--bb-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 16px;
	cursor: pointer;
	transition: all .2s;
}
.bb-preview__share:hover, .bb-preview__reset:hover { border-color: var(--bb-fg); }
.bb-preview__share { color: var(--bb-accent); border-color: var(--bb-accent); }
.bb-preview__share:hover { background: var(--bb-accent); color: var(--bb-bg); }


/* ─── Dates form ─── */
.ledsof-bb-dates { font-family: var(--bb-sans); max-width: 760px; }
.bb-dates__form { display: grid; gap: 16px; }
.bb-dates__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .bb-dates__row { grid-template-columns: 1fr; } }
.bb-dates__field { display: grid; gap: 6px; }
.bb-dates__label {
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
.bb-dates__field input,
.bb-dates__field select,
.bb-dates__field textarea {
	background: transparent;
	border: 1px solid var(--bb-line2);
	color: var(--bb-fg);
	padding: 11px 12px;
	font-size: 14px;
	font-family: var(--bb-sans);
	width: 100%;
}
.bb-dates__field [aria-invalid="true"] { border-color: var(--bb-accent); }
.bb-dates__err {
	font-family: var(--bb-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: var(--bb-accent);
	min-height: 14px;
}
.bb-dates__cta { display: flex; }
.bb-dates__submit {
	background: var(--bb-accent);
	color: var(--bb-bg);
	border: 1px solid var(--bb-accent);
	font-family: var(--bb-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 13px 22px;
	cursor: pointer;
	transition: opacity .2s;
}
.bb-dates__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.bb-dates__submit .arr { margin-left: 6px; }
.bb-dates__feedback {
	min-height: 18px;
	font-family: var(--bb-mono);
	font-size: 11px;
	color: var(--bb-mute);
}
.bb-dates__feedback.is-error { color: var(--bb-accent); }
.bb-dates__success {
	border: 1px solid var(--bb-line2);
	padding: 28px 24px;
	display: grid;
	gap: 14px;
	justify-items: start;
	align-items: start;
	text-align: left;
}
.bb-dates__success-msg {
	color: var(--bb-fg);
	font-size: 15px;
	line-height: 1.5;
}
.bb-dates__check-wrap {
	display: inline-flex;
	width: 64px;
	height: 64px;
}
.bb-dates__check {
	width: 64px;
	height: 64px;
	display: block;
}
.bb-dates__check-circle {
	stroke-dasharray: 176;
	stroke-dashoffset: 176;
	transform-origin: 50% 50%;
}
.bb-dates__check-mark {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
}
.bb-dates__success:not([hidden]) .bb-dates__check-circle {
	animation: ledsof-bb-circle .55s cubic-bezier(.65,.05,.36,1) forwards;
}
.bb-dates__success:not([hidden]) .bb-dates__check-mark {
	animation: ledsof-bb-mark .35s .45s cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes ledsof-bb-circle {
	to { stroke-dashoffset: 0; }
}
@keyframes ledsof-bb-mark {
	to { stroke-dashoffset: 0; }
}
.bb-dates__reset {
	background: transparent;
	border: 1px solid var(--bb-line2);
	color: var(--bb-fg);
	font-family: var(--bb-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 16px;
	cursor: pointer;
	transition: all .2s;
	justify-self: start;
}
.bb-dates__reset:hover { background: var(--bb-fg); color: var(--bb-bg); border-color: var(--bb-fg); }


/* ─── Dates modal ─── */
dialog.ledsof-bb-dates-modal {
	border: 1px solid var(--bb-line2);
	background: var(--bb-bg);
	color: var(--bb-fg);
	padding: 0;
	width: min(680px, 92vw);
	max-height: 92vh;
}
dialog.ledsof-bb-dates-modal::backdrop {
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
}
.bb-dates-modal__inner {
	padding: 28px 28px 24px;
	position: relative;
}
.bb-dates-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: transparent;
	border: none;
	color: var(--bb-mute);
	font-size: 24px;
	cursor: pointer;
	padding: 4px 8px;
}
.bb-dates-modal__close:hover { color: var(--bb-fg); }
.bb-dates-modal__title {
	font-family: var(--bb-sans);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -0.015em;
	margin: 0 0 18px;
}

/* ─── Custom date picker ─── */
.bb-dp { position: relative; }
.ledsof-bb-dates .bb-dp__trigger,
.bb-dates-modal .bb-dp__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 11px 12px;
	background: transparent;
	border: 1px solid var(--bb-line2);
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-fg);
	font-family: var(--bb-sans);
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s;
}
.ledsof-bb-dates .bb-dp__trigger:hover,
.bb-dates-modal .bb-dp__trigger:hover { border-color: var(--bb-mute); }
.ledsof-bb-dates .bb-dp__trigger[aria-expanded="true"],
.bb-dates-modal .bb-dp__trigger[aria-expanded="true"] { border-color: var(--bb-accent); }
.bb-dp:has(input[aria-invalid="true"]) .bb-dp__trigger { border-color: var(--bb-accent); }
.bb-dp__value {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-dp__value:empty::before {
	content: attr(data-placeholder);
	color: var(--bb-mute);
}
.bb-dp__cal { flex: none; color: var(--bb-mute); }
.bb-dp__trigger[aria-expanded="true"] .bb-dp__cal { color: var(--bb-accent); }

.bb-dp__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	width: 300px;
	max-width: min(300px, calc(100vw - 32px));
	padding: 14px;
	background: var(--bb-bg);
	border: 1px solid var(--bb-line2);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.bb-dp__panel.is-flip-up { top: auto; bottom: calc(100% + 6px); }
.bb-dp__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}
.bb-dp__title {
	font-family: var(--bb-sans);
	font-size: 14px;
	letter-spacing: 0.01em;
	color: var(--bb-fg);
}
.ledsof-bb-dates .bb-dp__nav,
.bb-dates-modal .bb-dp__nav {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bb-line2);
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-fg);
	font-family: var(--bb-sans);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: all .2s;
}
.ledsof-bb-dates .bb-dp__nav:hover,
.bb-dates-modal .bb-dp__nav:hover {
	background: var(--bb-fg);
	color: var(--bb-bg);
	border-color: var(--bb-fg);
}
.bb-dp__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.bb-dp__weekdays { margin-bottom: 6px; }
.bb-dp__weekdays span {
	text-align: center;
	font-family: var(--bb-mono);
	font-size: 9.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-mute);
	padding: 4px 0;
}
.ledsof-bb-dates .bb-dp__day,
.bb-dates-modal .bb-dp__day {
	aspect-ratio: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-fg);
	font-family: var(--bb-mono);
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s, color .15s, border-color .15s;
}
.ledsof-bb-dates .bb-dp__day:hover:not(.is-disabled):not(.is-empty),
.bb-dates-modal .bb-dp__day:hover:not(.is-disabled):not(.is-empty) {
	border-color: var(--bb-accent);
}
.bb-dp__day.is-empty { cursor: default; }
.ledsof-bb-dates .bb-dp__day.is-disabled,
.bb-dates-modal .bb-dp__day.is-disabled {
	color: rgba(255, 255, 255, 0.16);
	cursor: default;
}
.ledsof-bb-dates .bb-dp__day.is-today,
.bb-dates-modal .bb-dp__day.is-today { color: var(--bb-accent); }
.bb-dp__day.is-in-range { background: rgba(255, 90, 60, 0.12); }
.ledsof-bb-dates .bb-dp__day.is-selected,
.bb-dates-modal .bb-dp__day.is-selected {
	background: var(--bb-accent);
	color: var(--bb-bg);
	border-color: var(--bb-accent);
	font-weight: 600;
}
.bb-dp__day:focus-visible {
	outline: 1px solid var(--bb-accent);
	outline-offset: -2px;
}
.bb-dp__foot {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
}
.ledsof-bb-dates .bb-dp__clear,
.ledsof-bb-dates .bb-dp__today,
.bb-dates-modal .bb-dp__clear,
.bb-dates-modal .bb-dp__today {
	padding: 4px 2px;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--bb-mute);
	font-family: var(--bb-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .2s;
}
.ledsof-bb-dates .bb-dp__clear:hover,
.ledsof-bb-dates .bb-dp__today:hover,
.bb-dates-modal .bb-dp__clear:hover,
.bb-dates-modal .bb-dp__today:hover { color: var(--bb-accent); }