/* calendar.css — public events calendar page (standalone — not in the bundle) */

/* Reserve scrollbar space so the calendar doesn't shift left/right when
   the right panel grows tall enough to require a scrollbar.
   `scrollbar-gutter: stable` keeps space reserved without showing a bar when
   content fits; `overflow-y: scroll` is the older-browser fallback. */
html {
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

/* .s-calendar-top inherits the light-blue + wave SVG background from .s-page-top
   in app.css. Both the title heading and the calendar grid live inside this
   single section so the background runs continuously behind them.

   IMPORTANT: app.css sets `section { display: flex; flex-direction: row;
   justify-content: center; }` globally — that flex-row layout would put our
   .wrapper (title) and .calendar-wrap (grid) side by side. Override to block
   so they stack vertically. Extra bottom padding gives the calendar grid
   breathing room before the footer. */
.s-calendar-top {
	display: block;
	padding-bottom: 80px;
}
.s-calendar-top .title { color: #1b3b50; }

/* The global .wrapper rule (app.css) doesn't auto-center on wide viewports
   (no margin:0 auto). Center it here so the title sits directly above the
   calendar grid. */
.s-calendar-top > .wrapper {
	margin-left: auto;
	margin-right: auto;
}

.calendar-wrap {
	max-width: 1280px;            /* tighter container — events panel no longer sprawls */
	margin: 40px auto 0;          /* 40px gap from the title above */
	padding: 0 24px;
	display: flex;
	align-items: flex-start;
	gap: 0;                       /* gap handled via right-panel margin so calc is exact */
	box-sizing: border-box;
	width: 100%;
}
.cal-card {
	flex: 0 0 360px;              /* narrower calendar */
	width: 360px;
	max-width: 360px;
	box-sizing: border-box;
}
/* Right panel — explicit width derived from parent.
   Width is constant for a given viewport, NEVER varies with content. */
.cal-events {
	flex: 0 0 calc(100% - 360px - 28px);
	width: calc(100% - 360px - 28px);
	max-width: calc(100% - 360px - 28px);
	min-width: 0;
	margin-left: 28px;
	box-sizing: border-box;
}
/* Below 1000px there isn't enough room for a useful side-by-side. Stack
   vertically: calendar on top centered, events panel below at full width. */
@media (max-width: 1000px) {
	.calendar-wrap { flex-direction: column; }
	.cal-card      { flex: 0 0 auto; width: 100%; max-width: 360px; align-self: center; margin: 0; }
	.cal-events    { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 24px 0 0; }
}

/* ---------- calendar card ---------- */

.cal-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(20, 60, 100, .08);
	padding: 22px 22px 26px;
	align-self: start;
}

.cal-head {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	margin-bottom: 18px;
}

.cal-nav {
	background: transparent;
	border: 0;
	font-size: 26px;
	color: #1b3b50;
	cursor: pointer;
	width: 36px; height: 36px;
	border-radius: 50%;
	transition: background .15s ease;
	line-height: 1;
}
.cal-nav:hover { background: #f0f5f8; }

.cal-month {
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: #1b3b50;
	letter-spacing: .3px;
}

.cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 8px;
}
.cal-weekdays span {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #4b6f82;
	letter-spacing: .5px;
}
.cal-weekdays span.we { color: #F0621A; }

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

.cal-day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 16px;
	color: #1b3b50;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, color .15s ease;
}
.cal-day .d { line-height: 1; }
.cal-day .dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px; height: 6px;
	border-radius: 50%;
	background: transparent;
}
.cal-day.has-events .dot { background: #F0621A; }

.cal-day.is-off { color: #b6c3cc; }
.cal-day.is-weekend { color: #F0621A; }
.cal-day.is-weekend.is-off { color: #e8b9a3; }
.cal-day:hover { background: #f1f6f9; }

.cal-day.is-today { box-shadow: inset 0 0 0 2px #F0621A; }

.cal-day.is-selected {
	background: #F0621A;
	color: #fff !important;
	box-shadow: none;
}
/* dot is only visible if the cell has events — including when selected.
   (without .has-events scoping, every selected cell shows a white dot.) */
.cal-day.is-selected.has-events .dot { background: #fff; }

/* ---------- events panel ---------- */

.cal-events {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(20, 60, 100, .08);
	padding: 24px 26px;
	/* height follows content — no forced min-height = no blank space at bottom */
	min-width: 0;
	box-sizing: border-box;
}
.cal-card { box-sizing: border-box; }

.cal-events-head h3 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: #1b3b50;
	text-transform: capitalize;
}

.cal-events-empty {
	text-align: left;
	color: #4b6f82;
	font-size: 15px;
	line-height: 1.5;
}
.cal-events-empty h3 {
	color: #1b3b50;
	font-size: 20px;
	margin: 0 0 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}
.cal-events-empty p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.5;
	color: #4b6f82;
}
.cal-events-empty .muse { color: #F0621A; font-weight: 700; }

/* Custom compact bullet list — overrides any inherited ring/big-bullet
   styling from app.css. Small solid orange dot + 14px text. */
.cal-events-empty ul.empty-list,
.cal-events-empty .empty-list {
	list-style: none;
	padding: 0;
	margin: 6px 0 14px 0;
}
.cal-events-empty .empty-list li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: #3a5266;
	list-style: none;
	/* The site's app.css renders bullets as a base64 SVG background-image on
	   every <li>. We're providing our own dot via ::before — kill the SVG. */
	background: none;
	background-image: none;
	display: block;
}
.cal-events-empty .empty-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #F0621A;
	box-shadow: none;
	border: 0;
}
.cal-events-empty .empty-list li::marker { content: ''; }
.cal-events-empty .btn-apply,
.cal-events-empty .js--request {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 36px;
	background: #F0621A;
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	font-size: 13px;
}

/* Loading overlay — keeps existing content visible (faded), spinner on top.
   Avoids any width "flash" when switching dates. */
.cal-events.is-loading {
	position: relative;
	pointer-events: none;
}
.cal-events.is-loading > * {
	opacity: .35;
	transition: opacity .15s ease;
}
.cal-events.is-loading::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 36px; height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid #eef0f5;
	border-top-color: #F0621A;
	border-radius: 50%;
	animation: cal-spin .7s linear infinite;
	opacity: 1;
}
@keyframes cal-spin { to { transform: rotate(360deg); } }

/* ---------- event accordion card ---------- */

.event-card {
	background: #fff;
	border: 1px solid #e2e6ee;
	border-radius: 14px;
	margin-bottom: 14px;
	transition: box-shadow .15s ease;
	overflow-wrap: break-word;
}
.event-card:hover { box-shadow: 0 4px 14px rgba(20, 60, 100, .08); }

/* --- header (always visible) --- */
.event-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 22px;
	cursor: pointer;
	user-select: none;
}
.event-title {
	color: #F0621A;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	line-height: 1.2;
	flex: 1;
	min-width: 0;
}
/* chevron drawn with two strokes via inline mask; rotates on open */
.event-chevron {
	width: 22px; height: 14px;
	flex-shrink: 0;
	background: #F0621A;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 11 11 20 2'/></svg>") center / contain no-repeat;
	mask:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 11 11 20 2'/></svg>") center / contain no-repeat;
	transition: transform .2s ease;
}
.event-card.is-open .event-chevron { transform: rotate(180deg); }

/* --- expandable body — grid-rows trick (no max-height) --- */
.event-card-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .22s ease;
}
.event-card-body-inner {
	overflow: hidden;
	min-height: 0;
}
.event-card.is-open .event-card-body { grid-template-rows: 1fr; }

.event-desc {
	padding: 0 22px 14px;
	font-size: 14px;
	color: #3a5266;
	line-height: 1.55;
}

/* --- bottom block: one 4×2 grid ---
   8 children placed in row-major order:
     Row 1 (cells 1-4): clock · hourglass · pin · user
     Row 2 (cells 5-8): tier-baby · tier-child · tier-adult · submit button
   Missing data is rendered as a `.meta-empty` placeholder so columns always
   align between the two rows.
*/
.event-bottom {
	padding: 0 22px 22px;
}
.event-meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	row-gap: 14px;
	column-gap: 0;
	min-width: 0;
}
/* Column-4 chips never have a right divider (they sit at the row edge). */
.event-meta > .meta-item:nth-child(4n) {
	border-right: 0;
	padding-right: 0;
}
/* (Previously removed the divider on the chip directly before the submit
   button — restored on request so there's a separator between the last
   tier chip and the button.) */
/* Empty placeholder cell — keeps the grid shape, otherwise invisible. */
.meta-empty {
	border: 0 !important;
	padding: 0;
	min-height: 0;
}

/* --- single meta item: orange-circle icon + label/value stack ---
   Subtle vertical divider between items (1px line on the right, except last).
   Items shrink rather than wrap — text-overflow ellipsis on .meta-value
   handles the case where the panel is too narrow for full labels. */
.meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* Uniform horizontal padding on every chip so the orange icons sit at
	   the same X position within each grid column — i.e., column-aligned
	   across both rows. */
	padding: 0 14px;
	border-right: 1px solid #e6ebef;
}
.meta-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	background-color: #F0621A;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
/* SVG icons inline — Feather-style, white stroke on orange circle */
.ic-clock      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>"); }
.ic-hourglass  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3 H18'/><path d='M6 21 H18'/><path d='M6 3 V7 L12 12 L18 7 V3'/><path d='M6 21 V17 L12 12 L18 17 V21'/></svg>"); }
.ic-route      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18 C8 18 8 6 12 6 S16 18 20 18'/></svg>"); }
.ic-pin        { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='2.5'/></svg>"); }
.ic-user       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='8' r='3.5'/></svg>"); }
.ic-ticket     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8 V6 A2 2 0 0 1 6 4 H18 A2 2 0 0 1 20 6 V8 A2 2 0 0 0 20 12 V16 A2 2 0 0 1 18 18 H6 A2 2 0 0 1 4 16 V12 A2 2 0 0 0 4 8 Z'/><path d='M12 4 V8'/><path d='M12 12 V14'/><path d='M12 18 V16'/></svg>"); }
/* Tier face icons — three distinct smileys for the pricing rows */
.ic-tier-baby  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='9' cy='10.5' r='.8' fill='white' stroke='none'/><circle cx='15' cy='10.5' r='.8' fill='white' stroke='none'/><path d='M9 15c1 1.2 4 1.2 5.5 0'/></svg>"); }
.ic-tier-child { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M7 8.5c1.5-2 3-2.5 5-2.5s3.5.5 5 2.5'/><circle cx='9' cy='12.5' r='.9' fill='white' stroke='none'/><circle cx='15' cy='12.5' r='.9' fill='white' stroke='none'/><path d='M9 16c1 1.2 4 1.2 5.5 0'/></svg>"); }
.ic-tier-adult { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='9' cy='11' r='1.8'/><circle cx='15' cy='11' r='1.8'/><path d='M10.8 11h2.4'/><path d='M9 16c1 1.2 4 1.2 5.5 0'/></svg>"); }

.meta-body { display: flex; flex-direction: column; min-width: 0; }
.meta-label {
	color: #F0621A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.meta-value {
	color: #1b3b50;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tappable "Місце Зустрічі" — only present when admin entered coords for
   the event. Inherits the meta-value typography but adds a tiny "↗" hint
   and a brand-orange hover. Increase the tap target via padding. */
.meta-value .meta-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed #c2d1da;
	padding-bottom: 1px;
	transition: color .12s ease, border-color .12s ease;
}
.meta-value .meta-link:hover,
.meta-value .meta-link:focus-visible {
	color: #F0621A;
	border-bottom-color: #F0621A;
	text-decoration: none;
}
.meta-value .meta-link-ext {
	font-size: 10px;
	opacity: .65;
	margin-left: 2px;
	vertical-align: super;
}

/* Submit button — occupies cell 8 of the grid (col 4, row 2). Its left edge
   lines up with the icon in the chip directly above (col 4, row 1), which
   sits at 14px from cell-left (the chip's padding-left). */
.event-actions {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 14px;
}
.event-apply {
	display: inline-block;
	padding: 9px 16px;
	background: #F0621A;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	transition: background .15s ease;
	white-space: nowrap;
}
.event-apply:hover { background: #d9521a; text-decoration: none; }

/* Price as orange button-style chip — legacy fallback when only a single
   adult price is set. Sits in its grid cell at natural width (not stretched). */
.meta-item.is-price {
	background: #F0621A;
	color: #fff;
	border: 0;
	border-right: 0;
	border-radius: 8px;
	padding: 10px 18px;
	margin-left: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .8px;
	white-space: nowrap;
	justify-self: start;
}

.event-soldout {
	display: inline-block;
	padding: 9px 14px;
	background: #eef0f5;
	color: #8a93a8;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	border-radius: 6px;
}
.is-soldout .event-title { opacity: .7; }

/* --- mobile / stacked: collapse the 4×2 grid to a single column ---
   Empty placeholders are hidden so the column doesn't have blank gaps.
   Submit button becomes full-width at the bottom. */
@media (max-width: 720px) {
	.event-card-head { padding: 14px 18px; }
	.event-desc      { padding: 0 18px 12px; }
	.event-bottom    { padding: 0 18px 18px; }
	.event-meta      { grid-template-columns: 1fr; row-gap: 8px; }
	.meta-item       { padding: 0; border-right: 0; }
	.meta-item.is-price { padding: 8px 14px; margin-left: 0; }
	.meta-empty      { display: none; }
	.event-actions   { padding-left: 0; }
	.event-apply     { display: block; width: 100%; text-align: center; padding: 14px 16px; }
	.event-title     { font-size: 15px; }
}

/* ============================================================
   Low-seats badge — small pill in the event card title row
   ============================================================ */
.event-seats-low {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 8px;
	background: #fff4ec;
	color: #c84a10;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	border: 1px solid #f9c8a8;
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}

/* ============================================================
   Booking-application modal
   ============================================================
   Overlay covers the viewport. Dialog is a centered card with sections
   for contact / participants / payment / consent. Mobile becomes
   full-screen with safe-area padding. */

.bk-modal[hidden] { display: none !important; }
.bk-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;            /* tighter so the dialog has more vertical room */
	box-sizing: border-box;
}

/* app.css globally sets `input { appearance: none }` which makes native
   checkboxes + radios render as invisible 13×13 boxes. Restore native chrome
   for inputs inside the modal so the consent checkbox and the payment-method
   radios are visible. Scoped to .bk-modal so the override never leaks out. */
.bk-modal input[type="checkbox"],
.bk-modal input[type="radio"] {
	-webkit-appearance: auto;
	   -moz-appearance: auto;
	        appearance: auto;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	accent-color: #F0621A;
	flex-shrink: 0;
}
.bk-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 30, 50, .55);
	backdrop-filter: blur(2px);
}
.bk-dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	padding: 28px 32px 28px;
	box-sizing: border-box;
}
.bk-close {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: #6b7585;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .15s ease, color .15s ease;
}
.bk-close:hover { background: #f1f4f8; color: #1b3b50; }

.bk-head { margin-bottom: 22px; }
.bk-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #F0621A;
	margin-bottom: 6px;
}
.bk-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: #1b3b50;
}
.bk-event-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4b5871;
}
.bk-event-meta .bk-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #cfd5e0;
}
.bk-seats {
	margin-top: 10px;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
.bk-seats.is-low {
	background: #fff4ec;
	color: #c84a10;
	border: 1px solid #f9c8a8;
}
.bk-seats.is-sold {
	background: #eef0f5;
	color: #8a93a8;
	border: 1px solid #d8dde6;
}

.bk-section {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eef1f5;
}
.bk-section:last-of-type { border-bottom: 0; }
.bk-section-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #6b7585;
	margin-bottom: 12px;
}

.bk-field {
	display: block;
	margin-bottom: 12px;
}
.bk-field:last-child { margin-bottom: 0; }
.bk-label {
	display: block;
	font-size: 12px;
	color: #4b5871;
	margin-bottom: 5px;
	font-weight: 600;
}
.bk-field input[type="text"],
.bk-field input[type="tel"],
.bk-field input[type="email"],
.bk-field input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #d6dce5;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #1b3b50;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-field input:focus {
	outline: none;
	border-color: #F0621A;
	box-shadow: 0 0 0 3px rgba(240, 98, 26, .15);
}
.bk-field.is-disabled { opacity: .55; }
.bk-field.is-disabled input { background: #f5f7fa; cursor: not-allowed; }
.bk-hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #8a93a8;
}

.bk-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.bk-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.bk-total {
	margin-top: 14px;
	padding: 10px 14px;
	background: #f8f9fc;
	border-radius: 8px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 14px;
}
.bk-total-label { color: #4b5871; font-weight: 600; }
.bk-total-value { color: #1b3b50; font-weight: 800; font-size: 20px; }
.bk-total-was { color: #8a93a8; text-decoration: line-through; margin-left: 8px; font-size: 13px; }
.bk-discount-line {
	margin-top: 6px;
	padding: 6px 12px;
	background: #DEF7E0;
	border-radius: 6px;
	font-size: 12px;
	color: #2D7233;
	font-weight: 600;
}
.bk-discount-line strong { font-weight: 800; }

/* Promocode field — collapsed behind a "+ Маю промокод" toggle so it
   doesn't dominate the booking form. Most customers don't have a code. */
.bk-promo-details {
	margin: 12px 0 0;
	background: #f8f9fc;
	border: 1px solid #eef1f5;
	border-radius: 8px;
	padding: 8px 12px;
}
.bk-promo-details summary {
	cursor: pointer;
	user-select: none;
	color: #F0621A;
	font-size: 12px;
	font-weight: 600;
	list-style: none;
}
.bk-promo-details summary::-webkit-details-marker { display: none; }
.bk-promo-details summary::marker             { display: none; }
.bk-promo-details[open] summary { margin-bottom: 8px; color: #1B3B50; }

.bk-promo { display: flex; gap: 6px; }
.bk-promo input {
	flex: 1;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid #d6dce5;
	border-radius: 6px;
	font: inherit;
	font-size: 13px;
	font-family: 'SF Mono', 'Menlo', monospace;
	background: #fff;
	color: #1b3b50;
}
.bk-promo input:focus {
	outline: none;
	border-color: #F0621A;
	box-shadow: 0 0 0 2px rgba(240,98,26,.12);
}
.bk-promo-btn {
	padding: 0 14px;
	background: #1B3B50;
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
}
.bk-promo-btn:hover:not(:disabled) { background: #0f2937; }
.bk-promo-btn:disabled { background: #7d8b9b; cursor: wait; }
.bk-promo-result {
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}
.bk-promo-result-ok  { background: #DEF7E0; color: #2D7233; }
.bk-promo-result-err { background: #fff0eb; color: #c44a36; }

.bk-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #d6dce5;
	border-radius: 8px;
	margin-bottom: 8px;
	font-size: 14px;
	color: #1b3b50;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.bk-radio:hover { border-color: #F0621A; }
.bk-radio input { accent-color: #F0621A; }
.bk-radio:has(input:checked) {
	border-color: #F0621A;
	background: #fff7f0;
}

.bk-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #4b5871;
	margin-bottom: 14px;
}
.bk-consent input { margin-top: 3px; accent-color: #F0621A; }
.bk-consent a { color: #F0621A; text-decoration: underline; }

.bk-error {
	margin-bottom: 12px;
	padding: 10px 12px;
	background: #fdecea;
	color: #b3261e;
	border: 1px solid #f7c4c0;
	border-radius: 8px;
	font-size: 13px;
}

.bk-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
}
.bk-submit.btn-primary {
	flex: 0 1 auto;
	padding: 12px 22px;
	background: #F0621A;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease;
}
.bk-submit.btn-primary:hover { background: #d9521a; }
.bk-submit.btn-primary:disabled { background: #f5b693; cursor: wait; }
.bk-cancel.btn-link {
	color: #4b5871;
	font-size: 13px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px 10px;
}
.bk-cancel.btn-link:hover { color: #1b3b50; text-decoration: underline; }

/* ============================================================
   Booking success — "Дякуємо за бронювання" celebration screen
   ============================================================
   When this is the visible state, the dialog drops its inner padding so
   the success block fills edge-to-edge and the decorative SVGs reach
   the modal's corners. The dialog also gets the cream background.       */

.bk-dialog:has(> .bk-success:not([hidden])) {
	padding: 0;
	background: #FFF8F0;
	max-width: 620px;
	/* IMPORTANT: do NOT set overflow:hidden here — the base .bk-dialog rule
	   relies on overflow-y:auto + max-height: calc(100vh - 48px) for content
	   that exceeds the viewport. Decoration clipping happens on .bk-success
	   itself (which has overflow:hidden) so the blobs/scribbles still don't
	   leak out of the rounded corner. */
}
/* Move the X close button out from behind the decorations on success.
   The dialog's existing .bk-close stays in the top-right corner. */
.bk-dialog:has(> .bk-success:not([hidden])) .bk-close {
	background: #ffffffcc;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	z-index: 5;
}

.bk-success {
	position: relative;
	/* Compact padding so the celebration fits a typical laptop viewport
	   (≈720-768px) without scroll, while still keeping breathing room
	   around the decorations and the X close button. */
	padding: 30px 36px 24px;
	text-align: center;
	overflow: hidden;
	border-radius: inherit;
	background:
		radial-gradient(ellipse at 18% 88%, #BFE0F2 0%, transparent 32%),
		radial-gradient(ellipse at 88% 18%, #F0621A1A 0%, transparent 28%),
		#FFF8F0;
}

/* --- decorative layer (scribbles, dashes, blobs) ----------------- */

.bk-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.bk-deco svg {
	position: absolute;
	display: block;
}
.bk-blob { opacity: .55; }
.bk-blob-tl { top: -50px;  left: -70px;  width: 220px; height: 200px; }
.bk-blob-bl { bottom: -30px; left: -50px;  width: 160px; height: 140px; }
.bk-blob-br { bottom: -60px; right: -70px; width: 240px; height: 200px; opacity: .85; }

.bk-scribble-tl { top: 12px; left: 14px;  width: 100px; height: 70px; opacity: .85; }
.bk-scribble-tr { top: 32px; right: 60px; width: 200px; height: 60px; opacity: .8; }
.bk-scribble-br { bottom: 56px; right: 12px; width: 130px; height: 100px; opacity: .85; }

.bk-dashes-l  { top: 38%;  left: 8px;   width: 32px; height: 80px; }
.bk-dashes-r  { top: 42%;  right: 10px; width: 56px; height: 120px; }
.bk-dashes-bl { bottom: 12px; left: 110px; width: 60px; height: 90px; opacity: .75; }

/* --- content layer ------------------------------------------------ */

.bk-success-content {
	position: relative;
	z-index: 1;
}

.bk-success-logo {
	display: block;
	width: 96px;
	height: auto;
	margin: 0 auto 10px;
	animation: bk-fade-down .5s ease both;
}
@keyframes bk-fade-down {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bk-success-title {
	position: relative;
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	color: #1B3B50;
	letter-spacing: -0.2px;
}
.bk-success-sparkles {
	position: absolute;
	left: 12px;
	top: -4px;
	width: 36px;
	height: 36px;
	animation: bk-sparkle-spin 4s ease-in-out infinite;
}
.bk-success-sparkles svg { width: 100%; height: 100%; }
@keyframes bk-sparkle-spin {
	0%, 100% { transform: rotate(-8deg) scale(1); }
	50%      { transform: rotate(8deg)  scale(1.08); }
}
.bk-title-text { display: inline-block; }
.bk-brush {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	padding-bottom: 6px;
}
.bk-brush::after {
	content: '';
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: -2px;
	height: 10px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 50 1 100 5 T 198 6' stroke='%23F0621A' stroke-width='4.5' fill='none' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.bk-success-lead {
	margin: 0 0 8px;
	color: #4b5871;
	font-size: 14px;
	line-height: 1.45;
}

.bk-success-status {
	display: inline-block;
	margin: 0 0 4px;
	padding: 6px 12px;
	background: rgba(255, 244, 236, 0.85);
	color: #a64512;
	border: 1px solid #f9c8a8;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.35;
	max-width: 100%;
	box-sizing: border-box;
}
.bk-success-status:empty { display: none; }

.bk-wave {
	display: block;
	width: 180px;
	height: 14px;
	margin: 8px auto 10px;
}

.bk-socials-eyebrow {
	margin: 0 auto 10px;
	color: #4b5871;
	font-size: 13px;
	line-height: 1.4;
	max-width: 380px;
}
.bk-socials-eyebrow strong {
	color: #F0621A;
	font-weight: 800;
}

.bk-socials {
	max-width: 420px;
	margin: 0 auto 14px;
	text-align: left;
}

.bk-social {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	margin-bottom: 8px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(20, 60, 100, .06);
	text-decoration: none;
	color: #1B3B50;
	transition: transform .15s ease, box-shadow .15s ease;
}
.bk-social:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(20, 60, 100, .12);
	text-decoration: none;
}
.bk-social:last-child { margin-bottom: 0; }
/* Telegram card has two lines of text so it's a rounded rect, not pill */
.bk-social-tg { border-radius: 18px; align-items: flex-start; padding: 10px 14px; }

.bk-social-icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.bk-social-ig .bk-social-icon {
	background: linear-gradient(135deg, #feda77 0%, #f58529 25%, #dd2a7b 55%, #8134af 95%);
}
.bk-social-fb .bk-social-icon { background: #1877f2; }
.bk-social-tg .bk-social-icon { background: #2AABEE; }

.bk-social-label {
	flex: 1;
	font-size: 14px;
	font-weight: 800;
	color: #1B3B50;
	min-width: 0;
}

.bk-social-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.bk-social-body strong {
	font-size: 14px;
	font-weight: 800;
	color: #1B3B50;
	line-height: 1.2;
}
.bk-social-body small {
	font-size: 11.5px;
	color: #5a6779;
	margin-top: 2px;
	line-height: 1.35;
}

.bk-social-chev {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #F0621A;
	background: #FFF4EC;
	margin-left: 2px;
}
.bk-social-tg .bk-social-chev { color: #2AABEE; background: #E8F5FD; align-self: center; }
.bk-social-fb .bk-social-chev { color: #1877f2; background: #E8F0FE; }

.bk-success-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 30px;
	margin-top: 2px;
	background: #F0621A;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .3px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
	box-shadow: 0 6px 20px rgba(240, 98, 26, .25);
}
.bk-success-cta svg { width: 18px; height: 18px; }
.bk-success-cta:hover {
	background: #d9521a;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(240, 98, 26, .35);
}
.bk-success-cta:active { transform: translateY(0); }

@media (max-width: 600px) {
	.bk-success { padding: 44px 24px 32px; }
	.bk-success-logo { width: 112px; margin-bottom: 14px; }
	.bk-success-title { font-size: 22px; }
	.bk-success-sparkles { width: 36px; height: 36px; left: 0; top: -6px; }
	.bk-success-lead { font-size: 14px; }
	.bk-socials { max-width: 100%; }
	.bk-social { padding: 10px 14px; }
	.bk-social-tg { padding: 12px 14px; }
	.bk-social-icon { flex: 0 0 40px; width: 40px; height: 40px; }
	.bk-social-label,
	.bk-social-body strong { font-size: 14px; }
	.bk-success-cta { padding: 13px 28px; font-size: 14px; }

	/* Tone decorations down on small screens so they don't crowd content */
	.bk-scribble-tr { width: 130px; right: 36px; top: 18px; opacity: .55; }
	.bk-scribble-tl { width: 70px;  top: 8px;  left: 6px; opacity: .55; }
	.bk-scribble-br { width: 90px;  bottom: 110px; right: 4px; opacity: .55; }
	.bk-dashes-l, .bk-dashes-r { display: none; }
	.bk-dashes-bl { display: none; }
	.bk-blob-tl { width: 140px; height: 130px; opacity: .4; }
	.bk-blob-br { width: 160px; height: 140px; opacity: .7; }
	.bk-blob-bl { display: none; }
}

@media (max-width: 600px) {
	.bk-modal { padding: 0; }
	.bk-dialog {
		max-width: 100%;
		max-height: 100vh;
		min-height: 100vh;
		border-radius: 0;
		padding: 22px 18px 28px;
	}
	.bk-row, .bk-row-3 { grid-template-columns: 1fr; }
	.bk-actions { flex-direction: column-reverse; align-items: stretch; }
	.bk-submit.btn-primary { width: 100%; }
	.bk-cancel.btn-link { width: 100%; text-align: center; }
}