/*
 * Vijgeboomsdrift Tickets: front end.
 * Defaults follow the Vijgeboomsdrift site design (Elementor kit 14). Any of these
 * variables can still be changed from Elementor custom CSS if the brand changes.
 */
.vbdt-picker, .vbdt-badge, .vbdt-button, .vbdt-events, .vbdt-no-events, .vbdt-countdown {
	--vbdt-gold: #ae9a65;           /* primary accent */
	--vbdt-brown: #76694b;          /* dark gold */
	--vbdt-cream: #f7f5e9;          /* page background */
	--vbdt-sand: #e0d7bf;           /* alternate background */
	--vbdt-charcoal: #383737;       /* dark sections, body text */
	--vbdt-night: #252423;          /* darkest */
	--vbdt-card: #ffffff;
	--vbdt-muted: #5e5a55;          /* muted text on white */
	--vbdt-dots: rgba(174, 154, 101, .55);
	--vbdt-radius: 22px;
	--vbdt-radius-small: 14px;
	--vbdt-shadow: 0 24px 50px -30px rgba(56, 55, 55, .35);
	--vbdt-font-display: "Vidaloka", Georgia, "Times New Roman", serif;
	--vbdt-font-body: "Poppins", "Segoe UI", system-ui, sans-serif;
	--vbdt-error: #9b2c2c;
	/* Older names, kept so existing overrides keep working. */
	--vbdt-ink: var(--vbdt-charcoal);
	--vbdt-paper: var(--vbdt-cream);
	--vbdt-accent: var(--vbdt-brown);
	--vbdt-accent-light: var(--vbdt-gold);
	--vbdt-taken: var(--vbdt-sand);
	--vbdt-line: rgba(56, 55, 55, .14);
}

/* ---------- Layout ---------- */
/* No container query on the picker itself: inside Elementor's flex containers Chrome then measured
   its height at the wrong width and the picker spilled over the widgets below it on phones.
   picker.js sets is-roomy (600px+) and is-wide (900px+) from the picker's real width instead. */
.vbdt-picker { width: 100%; margin: 16px 0; color: var(--vbdt-charcoal); font-family: var(--vbdt-font-body); }
.vbdt-layout { display: grid; gap: 28px; }
.vbdt-main, .vbdt-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.vbdt-main:empty { display: none; }
/* Wide spaces: plan on the left (never wider than 760px, so tall portrait plans stay manageable),
   colour key and basket on the right, staying in view while scrolling the plan.
   Narrow spaces stay stacked: plan, then key, then basket. */
.vbdt-picker.is-wide .vbdt-layout.has-plan { grid-template-columns: minmax(0, 760px) minmax(300px, 390px); justify-content: center; align-items: start; column-gap: 44px; }
.vbdt-picker.is-wide .vbdt-layout.has-plan > .vbdt-side { position: sticky; top: 120px; }
.vbdt-head:empty { display: none; }

/* ---------- Headings and small text ---------- */
.vbdt-picker .vbdt-title { margin: 0 0 6px; font-family: var(--vbdt-font-display); font-weight: 400; font-size: 1.5em; line-height: 1.15; letter-spacing: 2px; text-transform: uppercase; color: inherit; }
.vbdt-hint { margin: 0; font-size: 14px; color: var(--vbdt-muted); }
.vbdt-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--vbdt-sand); }

/* ---------- Floor plan ---------- */
.vbdt-plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; background: var(--vbdt-card); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); }
/* The plan always fits the screen width; markers shrink with it (see the table markers below). */
.vbdt-plan { position: relative; min-width: 0; container-type: inline-size; }
.vbdt-picker:not(.is-roomy) .vbdt-plan-scroll { padding: 8px; }
body .vbdt-picker .vbdt-plan img { display: block; width: 100%; max-width: none; height: auto; border: 0; border-radius: var(--vbdt-radius-small); box-shadow: none; }

/* Legend */
.vbdt-keys { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 20px; background: var(--vbdt-card); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); font-size: 13px; color: var(--vbdt-muted); }
.vbdt-keys span { display: inline-flex; align-items: center; gap: 8px; }
.vbdt-key { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vbdt-brown); background: var(--vbdt-card); }
.vbdt-key.is-selected { background: var(--vbdt-gold); border-color: var(--vbdt-brown); }
.vbdt-key.is-mine { background: var(--vbdt-brown); border-color: var(--vbdt-brown); }
.vbdt-key.is-taken { background: var(--vbdt-sand); border-color: var(--vbdt-sand); }
.vbdt-key.is-vip { box-shadow: 0 0 0 2px var(--vbdt-card), 0 0 0 4px var(--vbdt-gold); }
.vbdt-key.has-group { flex: none; width: 20px; height: 20px; border-width: 3px; border-color: var(--vbdt-group); background: #fff; background: color-mix(in srgb, var(--vbdt-group) 20%, #fff); }

/* Price per group, under the colour key */
.vbdt-group-key { display: grid; gap: 12px; padding: 16px 20px; background: var(--vbdt-card); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); }
.vbdt-picker .vbdt-group-key-title { margin: 0; font-family: var(--vbdt-font-display); font-weight: 400; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--vbdt-brown); }
.vbdt-group-row { display: flex; align-items: flex-start; gap: 12px; }
.vbdt-group-row .vbdt-key { margin-top: 2px; }
.vbdt-group-text { display: grid; gap: 1px; font-size: 14px; color: var(--vbdt-charcoal); }
.vbdt-group-text strong { font-weight: 600; }
.vbdt-group-price { color: var(--vbdt-muted); }
.vbdt-group-note { font-size: 12.5px; color: var(--vbdt-brown); }

/* ---------- Seats box (pops up for single-seat tables) ---------- */
.vbdt-popover { position: absolute; z-index: 5; transform: translate(26px, -50%); width: 236px; display: grid; gap: 10px; padding: 20px; background: var(--vbdt-card); color: var(--vbdt-charcoal); border-radius: var(--vbdt-radius); box-shadow: 0 24px 50px -20px rgba(56, 55, 55, .45); font-size: 14px; }
.vbdt-popover.is-left { transform: translate(calc(-100% - 26px), -50%); }
.vbdt-popover > strong { font-family: var(--vbdt-font-display); font-weight: 400; font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; }
.vbdt-pop-meta { color: var(--vbdt-muted); font-size: 13px; }
.vbdt-pop-q { font-weight: 600; font-size: 13px; }

/* ---------- Basket (dark panel) ---------- */
.vbdt-basket { display: grid; gap: 16px; padding: 30px 28px; background: var(--vbdt-charcoal); color: var(--vbdt-cream); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); }
.vbdt-basket .vbdt-title { color: var(--vbdt-gold); font-size: 22px; letter-spacing: 3px; margin: 0; }
.vbdt-lines { display: grid; gap: 0; }
/* Menu-style rows: name in Vidaloka, price in gold, dotted line underneath */
.vbdt-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dotted var(--vbdt-dots); font-variant-numeric: tabular-nums; }
.vbdt-line--standing { padding-top: 4px; }
.vbdt-line-label { display: grid; gap: 3px; min-width: 0; }
.vbdt-line-name { font-family: var(--vbdt-font-display); font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vbdt-cream); }
.vbdt-line-label small { font-size: 12.5px; color: var(--vbdt-sand); }
.vbdt-line-price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--vbdt-font-display); font-size: 17px; letter-spacing: 1px; color: var(--vbdt-gold); }
.vbdt-empty { margin: 0; padding: 12px 0; border-bottom: 1px dotted var(--vbdt-dots); font-size: 14px; color: var(--vbdt-sand); }
.vbdt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2px; }
.vbdt-total span { font-family: var(--vbdt-font-display); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--vbdt-cream); }
.vbdt-total strong { font-family: var(--vbdt-font-display); font-weight: 400; font-size: 30px; letter-spacing: 1px; color: var(--vbdt-gold); font-variant-numeric: tabular-nums; }
/* "Your tables are kept for 15 minutes" */
.vbdt-hold { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--vbdt-radius-small); background: rgba(174, 154, 101, .14); color: var(--vbdt-cream); }
.vbdt-hold::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--vbdt-gold); background: linear-gradient(var(--vbdt-gold), var(--vbdt-gold)) 50% 22% / 2px 5px no-repeat, linear-gradient(var(--vbdt-gold), var(--vbdt-gold)) 66% 50% / 5px 2px no-repeat; box-sizing: border-box; }

/* Messages */
.vbdt-message { margin: 0; }
.vbdt-message:empty { display: none; }
.vbdt-message--error { padding: 12px 14px; border-radius: var(--vbdt-radius-small); background: var(--vbdt-cream); color: var(--vbdt-error); font-size: 14px; }

/* ---------- Status badges (loop cards, event page) ---------- */
.vbdt-badge { display: inline-block; padding: 7px 14px; border: 1px solid var(--vbdt-gold); border-radius: 30px; font: 600 11px/1 var(--vbdt-font-body); letter-spacing: .16em; text-transform: uppercase; color: inherit; }
.vbdt-badge--few { background: var(--vbdt-gold); border-color: var(--vbdt-gold); color: var(--vbdt-night); }
.vbdt-badge--soldout { background: var(--vbdt-charcoal); border-color: var(--vbdt-charcoal); color: var(--vbdt-cream); }
.vbdt-badge--past { opacity: .7; }

/* ---------- Fallback list [vbdt_upcoming_events] ---------- */
.vbdt-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; font-family: var(--vbdt-font-body); }
.vbdt-event-card { display: grid; gap: 12px; align-content: start; padding-bottom: 22px; background: var(--vbdt-card); color: var(--vbdt-charcoal); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); overflow: hidden; }
.vbdt-event-card > *:not(a:first-child) { margin-inline: 22px; }
.vbdt-event-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.vbdt-event-card h3 { margin: 0; font-family: var(--vbdt-font-display); font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
.vbdt-event-card h3 a { color: inherit; text-decoration: none; }
.vbdt-event-card .vbdt-meta { margin: 0; font-size: 14px; color: var(--vbdt-muted); }
.vbdt-event-card .vbdt-badge, .vbdt-event-card .vbdt-button { justify-self: start; }
.vbdt-no-events { font-family: var(--vbdt-font-body); }

/* ---------- Buttons and controls ----------
   Elementor kits and themes style every <button> and link. The rules below carry
   more weight (body + class) so the plugin always keeps its own look. */
body .vbdt-picker button { font-family: var(--vbdt-font-body); text-decoration: none; box-shadow: none; }

/* Leaf button, primary: gold with night text, cream on hover (Add to cart) */
body .vbdt-picker button.vbdt-button, body a.vbdt-button, body span.vbdt-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 15px 30px; border: 0; border-radius: 100px 40px 100px 100px; background: var(--vbdt-gold); color: var(--vbdt-night); font-family: var(--vbdt-font-body); font-weight: 500; font-size: 13px; line-height: 1.2; letter-spacing: 2.2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
body .vbdt-picker button.vbdt-button:hover:not(:disabled), body .vbdt-picker button.vbdt-button:focus-visible { background: var(--vbdt-cream); color: var(--vbdt-night); }
body .vbdt-picker button.vbdt-button:disabled { opacity: .45; cursor: not-allowed; }
body .vbdt-picker button.vbdt-add { width: 100%; }

/* Leaf button, solid: brown with cream text, charcoal on hover (links to event pages, organiser links, "Done") */
body a.vbdt-button, body .vbdt-picker button.vbdt-button--small { background: var(--vbdt-brown); color: var(--vbdt-cream); }
body a.vbdt-button:hover, body a.vbdt-button:focus-visible, body .vbdt-picker button.vbdt-button--small:hover { background: var(--vbdt-charcoal); color: var(--vbdt-cream); }
body .vbdt-picker button.vbdt-button--small { padding: 12px 22px; font-size: 12px; }
body span.vbdt-button--disabled { background: var(--vbdt-sand); color: var(--vbdt-muted); cursor: not-allowed; }

/* −/+ pill (standing tickets, seats box) */
.vbdt-stepper { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--vbdt-gold); border-radius: 30px; overflow: hidden; }
body .vbdt-picker .vbdt-stepper button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 18px; line-height: 40px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
body .vbdt-picker .vbdt-stepper button:hover:not(:disabled), body .vbdt-picker .vbdt-stepper button:focus-visible { background: var(--vbdt-gold); color: var(--vbdt-night); }
body .vbdt-picker .vbdt-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.vbdt-stepper output { min-width: 34px; text-align: center; font-family: var(--vbdt-font-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.vbdt-popover .vbdt-stepper { color: var(--vbdt-charcoal); justify-self: start; }

/* Remove (×) next to a line */
body .vbdt-picker button.vbdt-remove { width: 26px; height: 26px; padding: 0; border: 1px solid var(--vbdt-dots); border-radius: 50%; background: transparent; color: var(--vbdt-sand); font-size: 15px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
body .vbdt-picker button.vbdt-remove:hover, body .vbdt-picker button.vbdt-remove:focus-visible { background: var(--vbdt-gold); border-color: var(--vbdt-gold); color: var(--vbdt-night); }

/* ---------- Table markers on the plan ---------- */
body .vbdt-picker button.vbdt-table { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 32px; height: 32px; padding: 0 4px; border: 2px solid var(--vbdt-brown); border-radius: 999px; background: var(--vbdt-card); color: var(--vbdt-charcoal); font: 600 12px/1 var(--vbdt-font-body); letter-spacing: 0; text-transform: none; box-shadow: 0 6px 14px -6px rgba(37, 36, 35, .55); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
/* Markers shrink with the plan so tightly packed tables (like the Spoegwolf outdoor layout) never overlap. */
@supports (width: 1cqw) {
	body .vbdt-picker button.vbdt-table { min-width: clamp(18px, 4.4cqw, 32px); height: clamp(18px, 4.4cqw, 32px); padding: 0 2px; border-width: clamp(1.5px, .3cqw, 2px); font-size: clamp(9px, 2cqw, 12px); }
}
/* Price groups: the group's colour as the marker's ring and a light tint inside. Selected, in-cart and taken states below still win. */
body .vbdt-picker button.vbdt-table.has-group { border-color: var(--vbdt-group); background: #fff; background: color-mix(in srgb, var(--vbdt-group) 20%, #fff); }
body .vbdt-picker button.vbdt-table:hover:not(:disabled) { background: var(--vbdt-cream); color: var(--vbdt-night); border-color: var(--vbdt-gold); }
body .vbdt-picker button.vbdt-table:focus-visible { outline: 3px solid var(--vbdt-gold); outline-offset: 2px; }
body .vbdt-picker button.vbdt-table.is-seats { border-style: dashed; }
body .vbdt-picker button.vbdt-table.is-vip { box-shadow: 0 0 0 2px var(--vbdt-card), 0 0 0 4px var(--vbdt-gold), 0 6px 14px -6px rgba(37, 36, 35, .55); }
body .vbdt-picker button.vbdt-table.is-selected, body .vbdt-picker button.vbdt-table.is-selected:hover { background: var(--vbdt-gold); border-color: var(--vbdt-brown); color: var(--vbdt-night); }
body .vbdt-picker button.vbdt-table.is-mine, body .vbdt-picker button.vbdt-table.is-mine:hover { background: var(--vbdt-brown); border-color: var(--vbdt-brown); color: var(--vbdt-cream); cursor: default; }
body .vbdt-picker button.vbdt-table.is-taken, body .vbdt-picker button.vbdt-table.is-taken:hover { background: var(--vbdt-sand); border-color: var(--vbdt-sand); color: rgba(56, 55, 55, .45); box-shadow: none; cursor: not-allowed; }
.vbdt-count { position: absolute; top: -9px; right: -9px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: var(--vbdt-night); color: var(--vbdt-cream); font-size: 11px; line-height: 18px; }

/* ---------- Event closed / organiser ---------- */
.vbdt-picker--closed p { margin: 0; padding: 22px 26px; border-radius: var(--vbdt-radius); background: var(--vbdt-card); box-shadow: var(--vbdt-shadow); font-family: var(--vbdt-font-display); letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Cart and checkout: reservation countdown ---------- */
.vbdt-countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 28px; padding: 16px 22px; background: var(--vbdt-charcoal); color: var(--vbdt-cream); border-radius: var(--vbdt-radius); box-shadow: var(--vbdt-shadow); font-family: var(--vbdt-font-body); font-size: 15px; line-height: 1.4; }
.vbdt-countdown__icon { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--vbdt-gold); box-sizing: border-box; background: linear-gradient(var(--vbdt-gold), var(--vbdt-gold)) 50% 24% / 2px 6px no-repeat, linear-gradient(var(--vbdt-gold), var(--vbdt-gold)) 68% 50% / 6px 2px no-repeat; }
.vbdt-countdown__text { flex: 1 1 220px; }
.vbdt-countdown__clock { font-family: var(--vbdt-font-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 1.5px; color: var(--vbdt-gold); font-variant-numeric: tabular-nums; }
.vbdt-countdown.is-low { background: var(--vbdt-brown); }
.vbdt-countdown.is-low .vbdt-countdown__clock { color: var(--vbdt-cream); }
.vbdt-countdown.is-expired { background: var(--vbdt-card); color: var(--vbdt-charcoal); box-shadow: inset 0 0 0 1px var(--vbdt-gold), var(--vbdt-shadow); }
.vbdt-countdown.is-expired .vbdt-countdown__icon { border-color: var(--vbdt-brown); background: linear-gradient(var(--vbdt-brown), var(--vbdt-brown)) 50% 24% / 2px 6px no-repeat, linear-gradient(var(--vbdt-brown), var(--vbdt-brown)) 68% 50% / 6px 2px no-repeat; }
.vbdt-countdown__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .vbdt-countdown button.vbdt-countdown__refresh { padding: 12px 24px; border: 0; border-radius: 100px 40px 100px 100px; background: var(--vbdt-brown); color: var(--vbdt-cream); font-family: var(--vbdt-font-body); font-weight: 500; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; cursor: pointer; transition: background-color .25s ease; }
body .vbdt-countdown button.vbdt-countdown__refresh:hover, body .vbdt-countdown button.vbdt-countdown__refresh:focus-visible { background: var(--vbdt-charcoal); color: var(--vbdt-cream); }

/* ---------- Cart and checkout: ticket lines under the event name ---------- */
.wc-block-components-product-details__event-date .wc-block-components-product-details__name,
.wc-block-components-product-details__tickets .wc-block-components-product-details__name { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .85em; color: #76694b; }

@media (prefers-reduced-motion: reduce) {
	body .vbdt-picker button, body a.vbdt-button { transition: none; }
}