/*
 * VendoBooking — booking widget.
 *
 * Looks like the rest of a Vendofy shop: colours come from Vendofy's global palette
 * (Vendofy → Ustawienia globalne: --vendo-color-primary / -secondary / -surface), the main
 * button copies Vendofy's "Dodaj do koszyka" (--vendo-btn-cart-*), the font is Vendofy's base
 * font. Without Vendofy the fallbacks apply. Tokens can be overridden, e.g.:
 *   .vrez-widget { --vrez-accent: #2d4a3e; }
 */

.vrez-widget,
.vrez-choose-wrap,
.vrez-hold-banner {
	--vrez-accent: var(--vendo-color-primary, #1e3b3a);
	--vrez-accent-hover: var(--vendo-color-secondary, #16302f);
	--vrez-accent-text: #ffffff;
	--vrez-tint: var(--vendo-color-surface, #e6efec);
	--vrez-tint-strong: color-mix(in srgb, var(--vrez-accent) 18%, var(--vrez-tint));
	--vrez-line: rgba(0, 0, 0, 0.12);
	--vrez-muted: rgba(0, 0, 0, 0.58);
	--vrez-surface: transparent;
	--vrez-error: #9b2c2c;
	--vrez-error-bg: #fbeaea;
	--vrez-success: #1e5b3a;
	--vrez-success-bg: #e5f2ea;
	--vrez-focus: var(--vrez-accent);
}

.vrez-widget {
	font: inherit;
	/* Vendofy's base font when present (an undefined variable leaves the inherited font). */
	font-family: var(--vendo-font-base-family);
	color: inherit;
	line-height: 1.5;
	margin: 1.25em 0;
	/* Always as wide as its place (up to 46rem) — never shrinking or growing with the content
	   (a builder column is often a flex box that would size it to what is inside). */
	width: 100%;
	max-width: 46rem;
	box-sizing: border-box;
	font-variant-numeric: tabular-nums;
}

/* The calendar in place of Vendofy's buttons: Vendofy's flex wrapper takes the full width. */
.vendo-product-buttons.vrez-vendofy-calendar {
	display: block;
	width: 100%;
}

/* The self-service panel usually sits alone on a wide page: center it. */
.vrez-widget.vrez-manage {
	margin-left: auto;
	margin-right: auto;
}

/* No-JS hint whose <noscript> was stripped (output filtered by wp_kses_post). */
.vrez-widget > .vrez-nojs {
	display: none;
}

.vrez-widget *,
.vrez-widget *::before,
.vrez-widget *::after {
	box-sizing: border-box;
}

.vrez-widget:not(.is-ready) {
	min-height: 6rem;
}

.vrez-widget .vrez-card {
	border: 1px solid var(--vrez-line);
	border-radius: 14px;
	background: var(--vrez-surface);
}

.vrez-widget .vrez-section {
	padding: 1.1rem 1.25rem;
}

.vrez-widget .vrez-section + .vrez-section {
	border-top: 1px solid var(--vrez-line);
}

.vrez-widget .vrez-heading {
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 0.75rem;
	padding: 0;
	color: inherit;
}

/* Reset theme button styles inside the widget. */
.vrez-widget button {
	/* Themes often keep button text on one line (Hello Elementor: white-space: nowrap) — a long
	   label (the summary button, an address under "W gabinecie") ran out of the button. */
	white-space: normal;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vrez-widget button:disabled {
	cursor: default;
}

.vrez-widget button:focus-visible,
.vrez-widget a:focus-visible {
	outline: 2px solid var(--vrez-focus);
	outline-offset: 2px;
}

/* ── Who ───────────────────────────────────────────────────────────────── */

.vrez-widget .vrez-people {
	display: grid;
	gap: 0.5rem;
}

.vrez-widget .vrez-person {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	width: 100%;
	text-align: left;
	padding: 0.75rem;
	background: transparent;
	border: 1px solid var(--vrez-line);
	border-radius: 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vrez-widget .vrez-person:hover {
	border-color: var(--vrez-accent);
	background: var(--vrez-tint);
}

.vrez-widget .vrez-person__photo,
.vrez-widget .vrez-who__photo {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--vrez-tint);
}

.vrez-widget .vrez-person__photo--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--vrez-accent);
}

.vrez-widget .vrez-person__text,
.vrez-widget .vrez-who__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vrez-widget .vrez-person__name,
.vrez-widget .vrez-who__name {
	font-weight: 600;
}

.vrez-widget .vrez-person__title,
.vrez-widget .vrez-who__title {
	color: var(--vrez-muted);
	font-size: 0.9375rem;
}

.vrez-widget .vrez-person__bio {
	color: var(--vrez-muted);
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vrez-widget .vrez-who {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.vrez-widget .vrez-who__photo {
	width: 3rem;
	height: 3rem;
}

.vrez-widget .vrez-who .vrez-link {
	margin-left: auto;
}

.vrez-widget .vrez-link {
	background: none;
	border: 0;
	padding: 0.25rem 0;
	color: var(--vrez-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.9375rem;
}

/* ── How ───────────────────────────────────────────────────────────────── */

.vrez-widget .vrez-mode {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.5rem;
}

.vrez-widget .vrez-mode__btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	text-align: left;
	padding: 0.75rem 0.9rem;
	background: transparent;
	border: 1px solid var(--vrez-line);
	border-radius: 10px;
}

.vrez-widget .vrez-mode__btn:hover {
	border-color: var(--vrez-accent);
}

.vrez-widget .vrez-mode__btn.is-selected {
	border-color: var(--vrez-accent);
	box-shadow: inset 0 0 0 1px var(--vrez-accent);
	background: var(--vrez-tint);
}

.vrez-widget .vrez-mode__label {
	font-weight: 600;
}

.vrez-widget .vrez-mode__sub {
	color: var(--vrez-muted);
	font-size: 0.875rem;
}

/* ── When ──────────────────────────────────────────────────────────────── */

.vrez-widget .vrez-picker__body {
	display: grid;
	gap: 1.25rem;
}

/* Days on the left, hours in a column on the right — when the calendar itself is wide enough
   (its own width, not the screen's: widget.js sets .is-wide at 34rem). Narrower (a phone, a narrow
   builder column): the hours go under the calendar, one under another. */
.vrez-widget.is-wide .vrez-picker__body {
	grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 10.5rem);
	gap: 1.75rem;
	align-items: start;
}

.vrez-widget.is-wide .vrez-cal__day {
	max-width: 2.75rem;
}

/* Beside the calendar the column is narrow: slimmer hours keep it close to the calendar's height. */
.vrez-widget.is-wide .vrez-time {
	padding: 0.55rem 0.5rem;
}

/* Before a day is picked: a hint in the hours column; under the calendar it would only push
   the page down. */
.vrez-widget:not(.is-wide) .vrez-times .vrez-hint {
	display: none;
}

.vrez-widget .vrez-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.vrez-widget .vrez-cal__month {
	font-weight: 600;
}

.vrez-widget .vrez-cal__month::first-letter {
	text-transform: uppercase;
}

.vrez-widget .vrez-cal__arrow {
	/* An SVG chevron centred with flex — a text "‹ ›" sat off-centre in many fonts. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--vrez-line);
	background: transparent;
	line-height: 0;
	padding: 0;
}

.vrez-widget .vrez-cal__arrow svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.vrez-widget .vrez-cal__arrow:not(:disabled):hover {
	border-color: var(--vrez-accent);
}

.vrez-widget .vrez-cal__arrow:disabled {
	opacity: 0.35;
}

.vrez-widget .vrez-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
	text-align: center;
}

.vrez-widget .vrez-cal__wd {
	font-size: 0.75rem;
	color: var(--vrez-muted);
	padding: 0.25rem 0;
}

.vrez-widget .vrez-cal__day {
	aspect-ratio: 1;
	width: 100%;
	max-width: 2.6rem;
	justify-self: center;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--vrez-muted);
	opacity: 0.55;
	font-size: 0.9375rem;
}

.vrez-widget .vrez-cal__day.is-available {
	background: var(--vrez-tint);
	color: inherit;
	opacity: 1;
	font-weight: 600;
}

.vrez-widget .vrez-cal__day.is-available:hover {
	background: var(--vrez-tint-strong);
}

.vrez-widget .vrez-cal__day.is-selected {
	background: var(--vrez-accent);
	color: var(--vrez-accent-text);
}

.vrez-widget .vrez-times__date {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.vrez-widget .vrez-times__date::first-letter {
	text-transform: uppercase;
}

.vrez-widget .vrez-times__list {
	/* Hours one under another (beside the calendar or, on a phone, under it). */
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.vrez-widget .vrez-time {
	display: block;
	width: 100%;
	flex: 0 0 auto;
	text-align: center;
	padding: 0.7rem 0.5rem;
	border-radius: 8px;
	border: 1px solid var(--vrez-line);
	background: transparent;
	font-weight: 500;
}

.vrez-widget .vrez-time:hover {
	border-color: var(--vrez-accent);
}

.vrez-widget .vrez-time.is-selected {
	background: var(--vrez-accent);
	border-color: var(--vrez-accent);
	color: var(--vrez-accent-text);
}

/* ── Theme button states ───────────────────────────────────────────────── */
/* Themes style every button on :hover / :focus / :active (often white text on their own colour).
   The calendar's buttons keep their own colours in every state — before, the hours and the month
   arrows turned white on a transparent background on hover. ".vrez-card" lifts these rules above
   typical theme selectors (e.g. ".site button:hover"); the chosen day / hour / visit type come
   after, so they keep their colours under the pointer too. */
.vrez-widget .vrez-card .vrez-cal__arrow:hover,
.vrez-widget .vrez-card .vrez-cal__arrow:focus,
.vrez-widget .vrez-card .vrez-cal__arrow:active,
.vrez-widget .vrez-card .vrez-time:hover,
.vrez-widget .vrez-card .vrez-time:focus,
.vrez-widget .vrez-card .vrez-time:active,
.vrez-widget .vrez-card .vrez-mode__btn:hover,
.vrez-widget .vrez-card .vrez-mode__btn:focus,
.vrez-widget .vrez-card .vrez-mode__btn:active {
	color: inherit;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.vrez-widget .vrez-card .vrez-cal__arrow:not(:disabled):hover,
.vrez-widget .vrez-card .vrez-time:hover,
.vrez-widget .vrez-card .vrez-mode__btn:hover {
	border-color: var(--vrez-accent);
}

.vrez-widget .vrez-card .vrez-cal__day:hover,
.vrez-widget .vrez-card .vrez-cal__day:focus,
.vrez-widget .vrez-card .vrez-cal__day:active {
	color: var(--vrez-muted);
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.vrez-widget .vrez-card .vrez-cal__day.is-available:hover,
.vrez-widget .vrez-card .vrez-cal__day.is-available:focus,
.vrez-widget .vrez-card .vrez-cal__day.is-available:active {
	color: inherit;
	background: var(--vrez-tint);
}

.vrez-widget .vrez-card .vrez-cal__day.is-available:hover {
	background: var(--vrez-tint-strong);
}

.vrez-widget .vrez-card .vrez-person:hover,
.vrez-widget .vrez-card .vrez-person:focus,
.vrez-widget .vrez-card .vrez-person:active {
	color: inherit;
	background: var(--vrez-tint);
	border-color: var(--vrez-accent);
	box-shadow: none;
	text-decoration: none;
}

.vrez-widget .vrez-card .vrez-link:hover,
.vrez-widget .vrez-card .vrez-link:focus,
.vrez-widget .vrez-card .vrez-link:active {
	color: var(--vrez-accent);
	background: none;
	box-shadow: none;
}

.vrez-widget .vrez-card .vrez-cal__day.is-selected,
.vrez-widget .vrez-card .vrez-cal__day.is-selected:hover,
.vrez-widget .vrez-card .vrez-cal__day.is-selected:focus,
.vrez-widget .vrez-card .vrez-cal__day.is-selected:active,
.vrez-widget .vrez-card .vrez-time.is-selected,
.vrez-widget .vrez-card .vrez-time.is-selected:hover,
.vrez-widget .vrez-card .vrez-time.is-selected:focus,
.vrez-widget .vrez-card .vrez-time.is-selected:active {
	color: var(--vrez-accent-text);
	background: var(--vrez-accent);
	border-color: var(--vrez-accent);
}

.vrez-widget .vrez-card .vrez-mode__btn.is-selected,
.vrez-widget .vrez-card .vrez-mode__btn.is-selected:hover,
.vrez-widget .vrez-card .vrez-mode__btn.is-selected:focus,
.vrez-widget .vrez-card .vrez-mode__btn.is-selected:active {
	color: inherit;
	background: var(--vrez-tint);
	border-color: var(--vrez-accent);
	box-shadow: inset 0 0 0 1px var(--vrez-accent);
}

.vrez-widget .vrez-hint,
.vrez-widget .vrez-empty,
.vrez-widget .vrez-status {
	color: var(--vrez-muted);
	margin: 0;
	font-size: 0.9375rem;
}

.vrez-widget .vrez-status:empty {
	display: none;
}

/* ── Summary ───────────────────────────────────────────────────────────── */

.vrez-widget .vrez-summary__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1rem;
}

.vrez-widget .vrez-summary__list dt {
	color: var(--vrez-muted);
	font-weight: 400;
}

.vrez-widget .vrez-summary__list dd {
	margin: 0;
}

.vrez-widget .vrez-summary__price {
	font-weight: 600;
}

/* Main button = Vendofy's "Dodaj do koszyka" (same variables, same proportions). */
.vrez-widget .vrez-cta,
.vrez-choose-wrap .vrez-choose {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	min-height: 50px;
	padding: 0.75rem 1.5rem;
	border-style: solid;
	border-width: var(--vendo-btn-cart-border-width, 0);
	border-color: var(--vendo-btn-cart-border-color, var(--vrez-accent));
	border-radius: var(--vendo-btn-cart-border-radius, 10px);
	background: var(--vendo-btn-cart-bg, var(--vrez-accent));
	color: var(--vendo-btn-cart-color, var(--vrez-accent-text));
	font-family: var(--vendo-btn-cart-family);
	font-weight: var(--vendo-btn-cart-weight, 600);
	font-size: var(--vendo-btn-cart-size, 1rem);
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.vrez-widget .vrez-cta {
	width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.vrez-widget .vrez-cta:hover,
.vrez-widget .vrez-cta:focus-visible,
.vrez-choose-wrap .vrez-choose:hover,
.vrez-choose-wrap .vrez-choose:focus-visible {
	background: var(--vendo-btn-cart-bg-hover, var(--vrez-accent-hover));
	border-color: var(--vendo-btn-cart-border-color-hover, var(--vrez-accent-hover));
	color: var(--vendo-btn-cart-color-hover, var(--vrez-accent-text));
	text-decoration: none;
}

.vrez-widget .vrez-cta:disabled {
	filter: saturate(0.4);
	opacity: 0.8;
}

.vrez-widget .vrez-cta--link {
	width: auto;
	margin-top: 0.25rem;
}

.vrez-widget .vrez-note {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var(--vrez-muted);
}

.vrez-widget .vrez-pre {
	white-space: pre-line;
}

.vrez-widget .vrez-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vrez-widget .vrez-btn {
	padding: 0.65rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--vrez-accent);
	background: transparent;
	color: var(--vrez-accent);
	font-weight: 600;
}

.vrez-widget .vrez-btn--quiet {
	border-color: var(--vrez-line);
	color: inherit;
	font-weight: 500;
}

.vrez-widget .vrez-confirm {
	margin: 1rem 0 0.5rem;
}

.vrez-widget .vrez-message {
	display: none;
	margin: 0;
	padding: 0.8rem 1.25rem;
	font-size: 0.9375rem;
	border-top: 1px solid var(--vrez-line);
}

.vrez-widget .vrez-message.is-visible {
	display: block;
}

.vrez-widget .vrez-message--error {
	background: var(--vrez-error-bg);
	color: var(--vrez-error);
}

.vrez-widget .vrez-message--success {
	background: var(--vrez-success-bg);
	color: var(--vrez-success);
}

.vrez-widget .vrez-card > .vrez-message:last-child {
	border-radius: 0 0 13px 13px;
}

@media (max-width: 420px) {
	.vrez-widget .vrez-section {
		padding: 1rem;
	}
	.vrez-widget .vrez-summary__list {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
	.vrez-widget .vrez-summary__list dd {
		margin-bottom: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vrez-widget * {
		transition: none !important;
	}
}

/* ── Checkout countdown ────────────────────────────────────────────────── */

.vrez-hold-banner {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	border: 1px solid var(--vrez-tint-strong);
	background: var(--vrez-tint);
	color: var(--vendo-color-text, #1e3b3a);
	font-family: var(--vendo-font-base-family);
	font-size: 0.9375rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* Vendofy checkout: the banner sits in Vendofy's band above the two columns (.vendo-slot-bar). */
.vrez-slot-bar .vrez-hold-banner {
	margin: 0;
	border-radius: 8px;
}

.vrez-hold-banner.is-expired {
	border-color: #f1c9c9;
	background: #fbeaea;
	color: #9b2c2c;
}

/* Vendofy order summary lays item details out in one line ("Termin: … · Wizyta: …"), but the
   WooCommerce template wraps every value in <p>, which would put each one on its own line. */
.scl-item-meta dl.variation dd p {
	display: inline;
	margin: 0;
}

.vrez-loop-button {
	white-space: nowrap;
}

/* "Wybierz termin" in place of the buy buttons of a booking product (theme template or
   Vendofy [vendo_product_buttons]); hidden by integration.js when the page has no calendar. */
.vrez-choose-wrap {
	margin: 0 0 1em;
}

.vrez-vendofy-buttons .vrez-choose-wrap {
	margin: 0;
}

.vrez-choose-wrap .vrez-choose {
	min-width: 160px;
	padding: 0 24px;
	height: 50px;
}

.vrez-choose-wrap[hidden] {
	display: none !important;
}

/* "Wybierz termin" without [vendo_booking] on the page: the calendar opens right under the
   button (integration.js). Full width also in a flex row of the page builder. */
.vrez-fallback {
	display: block;
	width: 100%;
	flex: 1 1 100%;
	min-width: 0;
	margin: 1rem 0 0;
}

.vrez-fallback[hidden] {
	display: none !important;
}