/**
 * My Bookings - User (VX) widget styles.
 *
 * Master-palette driven (same system as the other VX widgets): every colour derives
 * from a small set of CSS variables, so a one-click preset or a single palette change
 * re-themes the whole widget. Font FAMILY is left to inherit; sizing/layout live here.
 * Everything is scoped under `.vxb-my-bookings` and resolves from our own variables, so
 * the widget wins over theme/Kit globals while staying contrast-safe on light + dark.
 */

.vxb-my-bookings[v-cloak] { display: none; }

:where( .vxb-my-bookings button ) { border: 0; }

.vxb-my-bookings .ts-btn-2 {
	background: var( --vxb-accent );
	border: 1px solid var( --vxb-accent );
	color: var( --vxb-on-accent );
}
.vxb-my-bookings .ts-btn-1 {
	background: var( --vxb-bg );
	border: 1px solid var( --vxb-border );
	color: var( --vxb-text );
}

/* ── Base variables = the "Minimal" preset. ── */
.vxb-my-bookings {
	--vxb-text: #1f2937;
	--vxb-muted: #6b7280;
	--vxb-border: #e5e7eb;
	--vxb-bg-soft: #f9fafb;
	--vxb-bg: #ffffff;
	--vxb-accent: var( --ts-accent-1, #1f7a54 );
	--vxb-on-accent: #ffffff;
	--vxb-radius: 12px;
	--vxb-row-gap: 8px;
	--vxb-thumb: var( --vxb-accent );

	--vxb-completed: #1e7e45;
	--vxb-pending: #b45309;
	--vxb-canceled: #b42318;
	--vxb-refunded: var( --vxb-muted );

	--vxb-st-completed-bg: color-mix( in srgb, var( --vxb-completed ) 14%, var( --vxb-bg ) ); --vxb-st-completed-fg: var( --vxb-completed );
	--vxb-st-pending-bg: color-mix( in srgb, var( --vxb-pending ) 14%, var( --vxb-bg ) );     --vxb-st-pending-fg: var( --vxb-pending );
	--vxb-st-canceled-bg: color-mix( in srgb, var( --vxb-canceled ) 14%, var( --vxb-bg ) );   --vxb-st-canceled-fg: var( --vxb-canceled );
	--vxb-st-refunded-bg: color-mix( in srgb, var( --vxb-muted ) 12%, var( --vxb-bg ) );      --vxb-st-refunded-fg: var( --vxb-muted );
	--vxb-st-neutral-bg: color-mix( in srgb, var( --vxb-muted ) 12%, var( --vxb-bg ) );       --vxb-st-neutral-fg: var( --vxb-muted );

	--vxb-pill-active-bg: var( --vxb-accent );
	--vxb-pill-active-fg: var( --vxb-on-accent );

	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	color: var( --vxb-text );
}

.vxb-preset-soft .vxb-my-bookings {
	--vxb-accent: #1d9e75; --vxb-bg: #fbfaf7; --vxb-bg-soft: #f3efe8;
	--vxb-text: #33302a; --vxb-muted: #8c8579; --vxb-border: #ece6db; --vxb-radius: 16px;
}
.vxb-preset-bold .vxb-my-bookings {
	--vxb-accent: #534ab7; --vxb-bg: #ffffff; --vxb-bg-soft: #f1f0fb;
	--vxb-text: #1c1830; --vxb-muted: #6f6a86; --vxb-border: #e2e0f0; --vxb-radius: 18px;
}
.vxb-preset-midnight .vxb-my-bookings {
	--vxb-accent: #8f86e6; --vxb-on-accent: #14121f; --vxb-bg: #1b1d24; --vxb-bg-soft: #23262f;
	--vxb-text: #eef0f5; --vxb-muted: #9aa1b1; --vxb-border: #313542;
	--vxb-completed: #5dcaa5; --vxb-pending: #efaf52; --vxb-canceled: #e86a6a; --vxb-radius: 12px;
}
.vxb-preset-activity-rush .vxb-my-bookings {
	--vxb-accent: #c0fa1e; --vxb-on-accent: #121416; --vxb-bg: #1c1e22; --vxb-bg-soft: #25272d;
	--vxb-text: #fafafa; --vxb-muted: #a1a4aa; --vxb-border: #30333a;
	--vxb-completed: #5dcaa5; --vxb-pending: #efaf52; --vxb-canceled: #f0616a; --vxb-radius: 12px;
}
.vxb-preset-midnight .vxb-my-bookings,
.vxb-preset-activity-rush .vxb-my-bookings {
	--vxb-st-completed-bg: color-mix( in srgb, var( --vxb-completed ) 22%, var( --vxb-bg ) );
	--vxb-st-pending-bg: color-mix( in srgb, var( --vxb-pending ) 22%, var( --vxb-bg ) );
	--vxb-st-canceled-bg: color-mix( in srgb, var( --vxb-canceled ) 22%, var( --vxb-bg ) );
}
.vxb-density-compact .vxb-my-bookings { --vxb-row-gap: 5px; gap: 12px; }

/* ── Header ── */
.vxb-my-bookings .vxb-mb-head h2 { margin: 0 0 4px; color: var( --vxb-text ); }
.vxb-my-bookings .vxb-mb-head p { margin: 0; color: var( --vxb-muted ); }

/* ── Stats ── */
.vxb-my-bookings .vxb-stats { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; }
.vxb-my-bookings .vxb-stat { background: var( --vxb-bg-soft ); border-radius: var( --vxb-radius ); padding: 12px 14px; min-width: 0; }
.vxb-my-bookings .vxb-stat-label { display: block; font-size: 12px; color: var( --vxb-muted ); }
.vxb-my-bookings .vxb-stat-value { display: block; font-size: 22px; font-weight: 600; margin-top: 3px; color: var( --vxb-text ); }
.vxb-my-bookings .vxb-stat-next { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }

/* ── Filter bar ── */
.vxb-my-bookings .vxb-filterbar {
	display: flex; flex-direction: column; gap: 12px;
	background: var( --vxb-bg ); border: 1px solid var( --vxb-border );
	border-radius: var( --vxb-radius ); padding: 12px;
}
.vxb-my-bookings .vxb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vxb-my-bookings .vxb-search-box {
	flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 12px; background: var( --vxb-bg-soft );
	border: 1px solid var( --vxb-border ); border-radius: var( --vxb-radius );
}
.vxb-my-bookings .vxb-search-icon { flex: 0 0 auto; color: var( --vxb-muted ); }
/* Colour is set explicitly (and scoped) so Voxel's `.ts-form input` rule can't drag it
   to a dark value on dark presets. `-webkit-text-fill-color` counters WebKit's own fill. */
.vxb-my-bookings .vxb-search-input {
	flex: 1; min-width: 0; border: 0; background: none; font: inherit; outline: none;
	color: var( --vxb-text );
	-webkit-text-fill-color: var( --vxb-text );
}
.vxb-my-bookings .vxb-search-input::placeholder { color: var( --vxb-muted ); -webkit-text-fill-color: var( --vxb-muted ); opacity: 1; }
/* Clear the placeholder on focus so the cursor is obviously ready for input. */
.vxb-my-bookings .vxb-search-input:focus::placeholder { color: transparent; -webkit-text-fill-color: transparent; }

.vxb-my-bookings .vxb-filter {
	height: 40px; padding: 0 14px; border: 1px solid var( --vxb-border );
	border-radius: var( --vxb-radius ); background: var( --vxb-bg ); font: inherit; color: inherit;
	flex: 1 1 150px; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.vxb-my-bookings select.vxb-filter {
	-webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.vxb-my-bookings select.vxb-filter:focus { border-color: var( --vxb-accent ); outline: none; }
/* Force readable text on the filter controls too (beats Voxel's `.ts-form input/select`). */
.vxb-my-bookings .vxb-filter { color: var( --vxb-text ); -webkit-text-fill-color: var( --vxb-text ); }
.vxb-my-bookings .vxb-date { cursor: pointer; -webkit-text-fill-color: currentColor; }
.vxb-preset-midnight .vxb-my-bookings .vxb-date,
.vxb-preset-activity-rush .vxb-my-bookings .vxb-date { color-scheme: dark; }
.vxb-my-bookings .vxb-daterow { display: flex; gap: 10px; flex: 1 1 100%; min-width: 0; }
/* Scoped + margins reset so Voxel's `.ts-form label` can't force display:block (which
   kills the flex gap) or add its own label spacing. */
.vxb-my-bookings .vxb-datefield { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.vxb-my-bookings .vxb-datefield-label { font-size: 11px; font-weight: 400; line-height: 1.3; color: var( --vxb-muted ); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; padding: 0; }
/* `flex: none` cancels the base `.vxb-filter` `flex: 1 1 150px`, whose 150px basis would
   otherwise become the field HEIGHT inside the column-flex date field (and grow taller). */
.vxb-my-bookings .vxb-datefield .vxb-filter { flex: none; width: 100%; height: 44px; cursor: pointer; margin: 0; }

/* Desktop: filters dissolve inline; re-form as a sheet on mobile. */
.vxb-my-bookings .vxb-filters, .vxb-my-bookings .vxb-filters-body { display: contents; }
.vxb-my-bookings .vxb-filters-head, .vxb-my-bookings .vxb-filters-apply, .vxb-my-bookings .vxb-filters-backdrop, .vxb-my-bookings .vxb-filters-toggle { display: none; }

/* Sort */
.vxb-my-bookings .vxb-sort { position: relative; margin-left: auto; }
.vxb-my-bookings .vxb-sort-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0;
	background: none; color: inherit; font: inherit; font-size: 0.9em; opacity: 0.7; cursor: pointer;
}
.vxb-my-bookings .vxb-sort-btn:hover { opacity: 1; }
.vxb-my-bookings .vxb-sort-caret { width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate( 45deg ); opacity: 0.6; }
.vxb-my-bookings .vxb-sort-menu {
	position: absolute; top: calc( 100% + 6px ); right: 0; z-index: 20; min-width: 200px;
	margin: 0; padding: 6px; list-style: none; background: var( --vxb-bg );
	border: 1px solid var( --vxb-border ); border-radius: 10px; box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.16 );
}
.vxb-my-bookings .vxb-sort-option { padding: 9px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.vxb-my-bookings .vxb-sort-option:hover { background: var( --vxb-bg-soft ); }
.vxb-my-bookings .vxb-sort-option-active { color: var( --vxb-accent ); font-weight: 500; }

/* Pills */
.vxb-my-bookings .vxb-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vxb-my-bookings .vxb-pill {
	display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px;
	padding: 5px 11px; border-radius: 20px; border: 1px solid var( --vxb-border );
	background: var( --vxb-bg ); color: var( --vxb-muted ); cursor: pointer;
}
.vxb-my-bookings .vxb-pill-on { background: var( --vxb-pill-active-bg ); border-color: var( --vxb-pill-active-bg ); color: var( --vxb-pill-active-fg ); }
.vxb-my-bookings .vxb-pill-count { opacity: 0.7; font-size: 0.92em; }
.vxb-my-bookings .vxb-more { position: relative; }
.vxb-my-bookings .vxb-more-caret { width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate( 45deg ); opacity: 0.6; }
.vxb-my-bookings .vxb-more-menu {
	position: absolute; top: calc( 100% + 6px ); left: 0; z-index: 20; min-width: 180px; margin: 0; padding: 6px; list-style: none;
	background: var( --vxb-bg ); border: 1px solid var( --vxb-border ); border-radius: 10px; box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.16 );
}
.vxb-my-bookings .vxb-more-option { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.vxb-my-bookings .vxb-more-option:hover { background: var( --vxb-bg-soft ); }
.vxb-my-bookings .vxb-more-option-active { color: var( --vxb-accent ); }
.vxb-my-bookings .vxb-more-count { opacity: 0.6; }

/* ── List ── */
.vxb-my-bookings .vxb-list { display: flex; flex-direction: column; gap: 16px; transition: opacity 0.15s ease; }
.vxb-my-bookings .vxb-list.vxb-pending { opacity: 0.55; pointer-events: none; }
.vxb-my-bookings .vxb-state { padding: 40px 20px; text-align: center; color: var( --vxb-muted ); background: var( --vxb-bg ); border: 1px solid var( --vxb-border ); border-radius: var( --vxb-radius ); }

.vxb-my-bookings .vxb-group-head { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 7px; }
.vxb-my-bookings .vxb-group-head > span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var( --vxb-muted ); }
.vxb-my-bookings .vxb-group-count { font-size: 12px; color: var( --vxb-muted ); }
.vxb-my-bookings .vxb-group + .vxb-group { margin-top: 4px; }

/* ── Date view ──
   The date header carries more than the period one (weekday, date, sometimes a
   Today/Tomorrow chip), so it needs an explicit gap and a `margin-left: auto` count
   instead of the space-between above. */
.vxb-my-bookings .vxb-group-head--date { gap: 8px; justify-content: flex-start; }
.vxb-my-bookings .vxb-group-head--date .vxb-group-count { margin-left: auto; }
.vxb-my-bookings .vxb-group-dow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var( --vxb-muted ); }
.vxb-my-bookings .vxb-group-date { font-size: 12px; font-weight: 600; color: var( --vxb-text ); font-variant-numeric: tabular-nums; }
.vxb-my-bookings .vxb-group-rel {
	/* Chip, so it reads as a note on the date rather than part of it. */
	font-size: 11px; font-weight: 600; line-height: 1.5;
	color: var( --vxb-accent );
	border: 1px solid color-mix( in srgb, var( --vxb-accent ) 40%, transparent );
	border-radius: 20px;
	padding: 0 8px;
}

/* Month rule: only rendered where the list crosses into a new month. */
.vxb-my-bookings .vxb-month-rule {
	display: flex; align-items: center; gap: 12px;
	margin: 8px 2px 10px;
	font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
	color: var( --vxb-muted );
}
.vxb-my-bookings .vxb-month-rule::after { content: ""; flex: 1; height: 1px; background: var( --vxb-border ); }
.vxb-my-bookings .vxb-group:first-child .vxb-month-rule { margin-top: 0; }

/* ── View switch ── */
.vxb-my-bookings .vxb-view {
	display: inline-flex;
	border: 1px solid var( --vxb-border );
	border-radius: var( --vxb-radius );
	overflow: hidden;
	flex: 0 0 auto;
}
.vxb-my-bookings .vxb-view-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px;
	border: 0;
	background: var( --vxb-bg );
	color: var( --vxb-muted );
	font: inherit;
	font-size: 0.86em;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}
.vxb-my-bookings .vxb-view-btn + .vxb-view-btn { border-left: 1px solid var( --vxb-border ); }
.vxb-my-bookings .vxb-view-btn:hover { color: var( --vxb-text ); }
.vxb-my-bookings .vxb-view-btn[aria-pressed="true"] {
	background: var( --vxb-accent );
	color: var( --vxb-on-accent );
	font-weight: 600;
}
.vxb-my-bookings .vxb-view-btn svg { flex: 0 0 auto; }

.vxb-my-bookings .vxb-row {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: var( --vxb-row-gap );
	background: var( --vxb-bg ); border: 1px solid var( --vxb-border ); border-radius: var( --vxb-radius ); cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.vxb-my-bookings .vxb-row:hover { border-color: var( --vxb-accent ); }
.vxb-my-bookings .vxb-row-canceled { opacity: 0.66; }
.vxb-my-bookings .vxb-row-canceled .vxb-row-name { text-decoration: line-through; }

.vxb-my-bookings .vxb-thumb {
	width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: color-mix( in srgb, var( --vxb-thumb ) 14%, var( --vxb-bg ) ); color: var( --vxb-thumb );
}
.vxb-my-bookings .vxb-thumb-lg { width: 44px; height: 44px; }

.vxb-my-bookings .vxb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vxb-my-bookings .vxb-row-name { font-weight: 500; font-size: 14px; color: var( --vxb-text ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vxb-my-bookings .vxb-row-sub { font-size: 12.5px; color: var( --vxb-muted ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vxb-my-bookings .vxb-row-right { text-align: right; flex: 0 0 auto; white-space: nowrap; }
.vxb-my-bookings .vxb-row-when { display: block; font-size: 12.5px; color: var( --vxb-muted ); }
.vxb-my-bookings .vxb-row-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.vxb-my-bookings .vxb-row-total { font-weight: 500; font-size: 13px; color: var( --vxb-text ); }
.vxb-my-bookings .vxb-row-chev { flex: 0 0 auto; color: var( --vxb-muted ); display: inline-flex; }

.vxb-my-bookings .vxb-pill.vxb-st-completed { background: var( --vxb-st-completed-bg ); color: var( --vxb-st-completed-fg ); border: 0; }
.vxb-my-bookings .vxb-pill.vxb-st-pending   { background: var( --vxb-st-pending-bg );   color: var( --vxb-st-pending-fg );   border: 0; }
.vxb-my-bookings .vxb-pill.vxb-st-canceled  { background: var( --vxb-st-canceled-bg );  color: var( --vxb-st-canceled-fg );  border: 0; }
.vxb-my-bookings .vxb-pill.vxb-st-refunded  { background: var( --vxb-st-refunded-bg );  color: var( --vxb-st-refunded-fg );  border: 0; }
.vxb-my-bookings .vxb-pill.vxb-st-neutral   { background: var( --vxb-st-neutral-bg );   color: var( --vxb-st-neutral-fg );   border: 0; }
/* Non-interactive status pills inside rows / panel. */
.vxb-my-bookings .vxb-row .vxb-pill, .vxb-my-bookings .vxb-panel .vxb-pill { cursor: default; padding: 2px 9px; font-size: 11px; }

/* ── Pagination ── */
.vxb-my-bookings .vxb-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vxb-my-bookings .vxb-page-btn {
	height: 38px; padding: 0 16px; border: 1px solid var( --vxb-border ); border-radius: var( --vxb-radius );
	background: var( --vxb-bg ); color: var( --vxb-text ); font: inherit; cursor: pointer;
}
.vxb-my-bookings .vxb-page-btn:disabled { opacity: 0.5; cursor: default; }
.vxb-my-bookings .vxb-page-info { font-size: 13px; color: var( --vxb-muted ); }

/* ── Toast ── */
.vxb-my-bookings .vxb-toast {
	position: fixed; left: 50%; bottom: 28px; transform: translateX( -50% ); z-index: 100080;
	padding: 12px 18px; border-radius: 10px; font-size: 14px; color: #fff; background: var( --vxb-completed );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.25 );
}
.vxb-my-bookings .vxb-toast-error { background: var( --vxb-canceled ); }
.vxb-my-bookings .vxb-toast-enter-active, .vxb-my-bookings .vxb-toast-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.vxb-my-bookings .vxb-toast-enter-from, .vxb-my-bookings .vxb-toast-leave-to { opacity: 0; transform: translate( -50%, 10px ); }

/* ── Detail panel ── */
.vxb-my-bookings .vxb-panel-overlay { position: fixed; inset: 0; z-index: 100060; background: rgba( 0, 0, 0, 0.45 ); }
.vxb-my-bookings .vxb-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100070; width: 420px; max-width: 92vw;
	display: flex; flex-direction: column; background: var( --vxb-bg ); color: var( --vxb-text );
	border-left: 1px solid var( --vxb-border ); box-shadow: -16px 0 40px rgba( 0, 0, 0, 0.18 );
	transform: translateX( 100% ); transition: transform 0.25s ease;
}
.vxb-my-bookings .vxb-panel-open { transform: translateX( 0 ); }
.vxb-my-bookings .vxb-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var( --vxb-border ); }
.vxb-my-bookings .vxb-panel-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.vxb-my-bookings .vxb-panel-head-text strong { font-size: 15px; font-weight: 500; }
.vxb-my-bookings .vxb-panel-close { background: none; color: var( --vxb-muted ); cursor: pointer; display: inline-flex; padding: 4px; }
.vxb-my-bookings .vxb-panel-body { padding: 6px 18px 4px; overflow-y: auto; flex: 1; }
.vxb-my-bookings .vxb-panel-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var( --vxb-border ); font-size: 13.5px; }
.vxb-my-bookings .vxb-panel-row:last-child { border-bottom: 0; }
.vxb-my-bookings .vxb-panel-label { color: var( --vxb-muted ); flex: 0 0 auto; }
.vxb-my-bookings .vxb-panel-row > :last-child { text-align: right; min-width: 0; word-break: break-word; }
.vxb-my-bookings .vxb-panel-row a { color: var( --vxb-accent ); }
.vxb-my-bookings .vxb-panel-total { font-weight: 600; }
.vxb-my-bookings .vxb-panel-comments { flex-direction: column; }
.vxb-my-bookings .vxb-panel-comments > :last-child { text-align: left; }
.vxb-my-bookings .vxb-panel-foot { padding: 14px 18px calc( 18px + env( safe-area-inset-bottom, 0px ) ); border-top: 1px solid var( --vxb-border ); display: flex; flex-direction: column; gap: 8px; }
.vxb-my-bookings .vxb-panel-foot .vxb-panel-label { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; margin-bottom: 2px; }
.vxb-my-bookings .vxb-panel-foot .ts-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 42px; border-radius: var( --vxb-radius );
	font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.vxb-my-bookings .vxb-action-danger { color: var( --vxb-canceled ); border-color: color-mix( in srgb, var( --vxb-canceled ) 40%, var( --vxb-border ) ); background: transparent; }
.vxb-my-bookings .vxb-actions-loading { color: var( --vxb-muted ); font-size: 13px; }
.vxb-my-bookings .vxb-actions-error { color: var( --vxb-canceled ); font-size: 13px; margin: 0; }

/* ── Responsive ── */
@media ( max-width: 600px ) {
	.vxb-my-bookings .vxb-stats { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.vxb-my-bookings .vxb-stat:last-child { grid-column: span 2; }
	.vxb-my-bookings .vxb-stat-next { font-size: 14px; }

	.vxb-my-bookings .vxb-search-box { flex: 1 1 100%; order: -1; }
	.vxb-my-bookings .vxb-sort { margin-left: 0; }

	/* Full width and split evenly — the switch is a primary control on a phone, and both
	   halves need to be a comfortable thumb target. */
	.vxb-my-bookings .vxb-view { display: flex; width: 100%; order: 10; }
	.vxb-my-bookings .vxb-view-btn { flex: 1 1 0; justify-content: center; padding: 9px 11px; }

	/* Sticky date headers: on a long single-column list it's easy to scroll past a
	   boundary and lose track of which day you're reading. Only in date view — the period
	   buckets are few and far apart enough not to need it. */
	.vxb-my-bookings .vxb-group-head--date {
		position: sticky;
		top: 0;
		z-index: 2;
		/* Sticky over a transparent background would let rows show through as they pass. */
		background: var( --vxb-bg-soft );
		padding: 7px 10px;
		margin: 0 0 7px;
		border-radius: var( --vxb-radius );
	}

	.vxb-my-bookings .vxb-filters-toggle {
		display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; font: inherit; font-size: 13px;
		color: var( --vxb-text ); background: var( --vxb-bg-soft ); border: 1px solid var( --vxb-border ); border-radius: var( --vxb-radius ); cursor: pointer;
	}
	.vxb-my-bookings .vxb-filters-badge { background: var( --vxb-accent ); color: var( --vxb-on-accent ); border-radius: 20px; font-size: 11px; padding: 1px 7px; }

	.vxb-my-bookings .vxb-filters {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100060; max-height: 85vh; overflow-y: auto;
		padding: 18px 18px calc( 18px + env( safe-area-inset-bottom, 0px ) );
		background: var( --vxb-modal-bg, var( --vxb-bg ) ); border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 40px rgba( 0, 0, 0, 0.25 ); transform: translateY( 100% ); transition: transform 0.25s ease;
	}
	.vxb-my-bookings .vxb-filters.vxb-filters-open { transform: translateY( 0 ); }
	.vxb-my-bookings .vxb-filters-body { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
	.vxb-my-bookings .vxb-filters-body .vxb-filter { width: 100%; height: 46px; }
	.vxb-my-bookings .vxb-daterow { flex: none; width: 100%; flex-direction: column; gap: 12px; }
	.vxb-my-bookings .vxb-datefield { flex: none; width: 100%; }
	.vxb-my-bookings .vxb-filters-head { display: flex; align-items: center; justify-content: space-between; }
	.vxb-my-bookings .vxb-filters-head strong { font-size: 15px; }
	.vxb-my-bookings .vxb-filters-close { font-size: 26px; line-height: 1; background: none; color: var( --vxb-muted ); cursor: pointer; padding: 0 4px; }
	.vxb-my-bookings .vxb-filters-apply { display: block; width: 100%; height: 46px; background: var( --vxb-accent ); color: var( --vxb-on-accent ); border-radius: var( --vxb-radius ); font: inherit; font-weight: 500; cursor: pointer; }
	.vxb-my-bookings .vxb-filters-backdrop { display: block; position: fixed; inset: 0; z-index: 100055; background: rgba( 0, 0, 0, 0.45 ); }

	.vxb-my-bookings .vxb-panel { width: 100%; max-width: 100%; border-left: 0; border-radius: 18px 18px 0 0; top: auto; height: 90vh; transform: translateY( 100% ); }
	.vxb-my-bookings .vxb-panel-open { transform: translateY( 0 ); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE (≤600px) — rows and panel
   ═══════════════════════════════════════════════════════════════════════════
   Appended last and scoped to .vxb-my-bookings, so it beats both the base
   rules above and Elementor's Kit (which styles bare `button`/`a`/`p` at
   0-1-1 and out-guns a lone class).
   ═══════════════════════════════════════════════════════════════════════════ */
@media ( max-width: 600px ) {

	/* ── List row: the same two-line grid as Vendor Bookings ─────────────────
	   This row already split left/right, but .vxb-row-right is sized to its
	   content and the status pill carries a localized label ("Εκκρεμεί
	   πληρωμή") — so it still ate the width the listing title needed. Same
	   four-column, two-row shape as the vendor list, so both read alike:

	       [icon] Listing ....................... 40 €
	              14:00–15:00 · Booked with X  [pill]

	   `display: contents` dissolves the .vxb-row-right / .vxb-row-meta
	   wrappers into this grid so their children can be placed directly. */
	.vxb-my-bookings .vxb-row {
		display: grid;
		grid-template-columns: auto auto minmax( 0, 1fr ) auto;
		grid-template-areas:
			"thumb name name  total"
			"thumb when sub   status";
		column-gap: 8px;
		row-gap: 2px;
		align-items: center;
		padding: 10px 12px;
	}

	.vxb-my-bookings .vxb-row > .vxb-thumb { grid-area: thumb; align-self: center; }
	.vxb-my-bookings .vxb-row-main { display: contents; }
	.vxb-my-bookings .vxb-row-right { display: contents; }
	.vxb-my-bookings .vxb-row-meta { display: contents; }
	.vxb-my-bookings .vxb-row-name { grid-area: name; }
	.vxb-my-bookings .vxb-row-sub  { grid-area: sub; }
	/* Time for a timeslot booking, but rowWhen() falls back to the whole summary for a
	   date range — bound it so a long value can't starve the listing title beside it. */
	.vxb-my-bookings .vxb-row-when {
		grid-area: when;
		display: block;
		max-width: 45vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.vxb-my-bookings .vxb-row .vxb-pill { grid-area: status; justify-self: end; margin-top: 0; }
	.vxb-my-bookings .vxb-row-total { grid-area: total; justify-self: end; }

	/* The row is tappable; the chevron only costs the name ~26px. */
	.vxb-my-bookings .vxb-row-chev { display: none; }

	.vxb-my-bookings .vxb-row-sub::before {
		content: "·";
		margin-right: 5px;
		color: var( --vxb-muted );
	}

	/* ── Panel: size to content, not to the viewport ─────────────────────────
	   `height: 90vh` meant a booking with four details still opened a sheet
	   covering the whole screen, most of it empty. */
	.vxb-my-bookings .vxb-panel {
		height: auto;
		max-height: 90vh;
	}

	/* ── Panel: two-column body ──────────────────────────────────────────────
	   `align-content: start` is REQUIRED, not cosmetic: .vxb-panel-body is
	   `flex: 1` inside a full-height sheet, so without it the grid stretches its
	   rows to fill the sheet and every field becomes a ~90px tall cell. */
	.vxb-my-bookings .vxb-panel-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: dense;
		align-content: start;
		gap: 8px;
		padding: 12px 14px;
	}

	/* Each field is its own bounded block: label and value share a left edge and
	   sit tight together, with the space BETWEEN fields instead of inside them. */
	.vxb-my-bookings .vxb-panel-row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* Still required here (unlike Vendor Bookings, whose base no longer sets it):
		   this widget's desktop field IS a one-line `label | value` row, so its base
		   `justify-content: space-between` is load-bearing there. Once the field is
		   stacked, that same value works down the COLUMN axis and pushes the label
		   and its value apart inside a stretched cell. */
		justify-content: flex-start;
		gap: 2px;
		padding: 7px 9px;
		min-width: 0;
		background: var( --vxb-bg-soft );
		border: 1px solid var( --vxb-border );
		border-radius: 8px;
	}

	.vxb-my-bookings .vxb-panel-label {
		font-size: 11px;
		line-height: 1.3;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.vxb-my-bookings .vxb-panel-row > * {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Undo this widget's own `text-align: right` on the value — correct for the
	   desktop `label | value` row, wrong once the field is stacked, where it floats
	   the value away from the label above it. Matches the base rule's selector
	   exactly (`> :last-child`, not `> *`) so it wins on source order rather than
	   needing !important to out-muscle the extra pseudo-class. */
	.vxb-my-bookings .vxb-panel-row > :last-child {
		text-align: left;
	}

	.vxb-my-bookings .vxb-panel-row--wide,
	.vxb-my-bookings .vxb-panel-comments { grid-column: 1 / -1; }

	/* ── Panel: two-column actions ───────────────────────────────────────── */
	.vxb-my-bookings .vxb-panel-foot {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 12px 16px calc( 12px + env( safe-area-inset-bottom, 0px ) );
	}

	.vxb-my-bookings .vxb-panel-foot .ts-btn {
		width: 100% !important;
		height: auto !important;
		min-height: 42px !important;
		padding: 8px 10px !important;
		white-space: normal !important;
		line-height: 1.25 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}

	.vxb-my-bookings .vxb-panel-foot > .vxb-panel-label,
	.vxb-my-bookings .vxb-panel-foot > .vxb-actions-error,
	.vxb-my-bookings .vxb-panel-foot > .vxb-actions-loading { grid-column: 1 / -1; }

	/* Cancelling is irreversible for a customer too — own row, last, never a
	   half-width neighbour of "Add to calendar". */
	.vxb-my-bookings .vxb-panel-foot .vxb-action-danger {
		grid-column: 1 / -1;
		order: 99;
	}
}

/* The injected empty-Today note (see groupsByDate): quiet, not an error — the date
   header above it is the information, this only explains the silence. */
.vxb-my-bookings .vxb-group-empty {
	margin: 0;
	padding: 13px 4px 17px;
	color: var(--vxb-muted);
	font-size: 0.875rem;
}

/* "Added by the studio" — this reservation was entered by the vendor, not by the
   customer, so their own list explains where it came from. A quiet marker, not a
   status: it describes the booking's origin, not its state. */
.vxb-my-bookings .vxb-row-tag {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var( --vxb-accent );
	background: color-mix( in srgb, var( --vxb-accent ) 12%, transparent );
}