/*
 * Bookly Pro's step-by-step form, reskinned from the outside.
 *
 * CSS ONLY (WPS-031 non-goals): nothing here edits a Bookly template, script or
 * PHP file, and nothing in this file is loaded anywhere Bookly's own shortcode is
 * not also rendered - it follows the shortcode, not a template, so
 * inc/assets.php enqueues it by sypsena_page_has_bookly_widget() rather than by
 * is_page().
 *
 * Selectors below are taken from the plugin's own rendered markup on
 * dev.atnaujinksypsena.lt (Bookly Pro 28.1, re-confirmed 2026-09-06 for the
 * WPS-106 rules at the foot of this file; Step-by-step Appearance with the
 * Svelte calendar switched on - "Show calendar" in Appearance -> Time), not
 * guessed from the plugin's source: a class name that does not exist in the DOM
 * the visitor gets is a rule that silently does nothing, which is worse than an
 * obviously broken one.
 *
 * NEARLY EVERY COLOUR, BACKGROUND AND BORDER DECLARATION BELOW CARRIES
 * !important, and that is a measured decision, not habit. This stylesheet
 * already loads LAST (after bookly-main.css, Bootstrap and Tailwind), so a
 * plain declaration of equal-or-higher specificity should win the cascade on
 * its own - and the first version of this file relied on exactly that. It did
 * not work: injected on the built page, a plain `.bookly-next-step.bookly-btn {
 * background-color: purple }` left the button its default Bookly blue.
 * `bookly-main.css`'s own `.bookly-form .bookly-btn` rule sets
 * `background-color: var(--bookly-main-color) !important` - confirmed by
 * reading `CSSStyleRule.style.getPropertyPriority()` off the live stylesheet,
 * not guessed from behaviour. The plugin's single admin colour picker
 * (Appearance's colour swatch field) has to win over its OWN more specific
 * per-component rules, so its author reached for !important throughout rather
 * than fight specificity component by component - the same trade-off this file
 * now makes one level up. Where a property was checked and found NOT to carry
 * !important upstream (the form fields' border-color, for one), it is left
 * plain here on purpose, so a later reader can tell measured-necessary apart
 * from copy-pasted-defensively.
 *
 * The one exception that is not about !important: the calendar's month-nav
 * buttons also fight an inline style attribute for their box dimensions, which
 * !important is the only thing that reaches past regardless of specificity. See
 * the comment at that rule.
 *
 * WHAT IS DELIBERATELY LEFT ALONE, and why it is not a gap (WPS-128, option 1,
 * Andrius 2026-09-27: robust over pixel-exact):
 *
 *   - Anything that only Bookly's DOM structure or a `bookly:` Tailwind utility
 *     class could reach - the gaps between calendar rows, the neighbouring
 *     month's day cells, the calendar's inner padding. A Bookly update is free
 *     to reshuffle those, so styling them would break silently. Every rule here
 *     targets a hook Bookly names itself, and scripts/qa/qa-bookly-contract.mjs
 *     lists them all and reports a missing one on dev after each update.
 *   - Text Bookly does not print: a legend under the calendar, a "taken" label
 *     on a booked time, a hint under the times. The Storybook page was redrawn
 *     without them rather than faking them in CSS content (not translatable).
 *   - The "1. " before each step name, which Bookly's template writes.
 */

/* ---------------------------------------------------------------------------
 * Root
 */

.bookly-css-root {
	color: var( --text-body );
	font-family: var( --font-sans );
}

/* ---------------------------------------------------------------------------
 * Private invitation and follow-up summary
 */

.rl-private-invitation,
.rl-private-booking {
	max-width: 760px;
	padding-block: var( --space-6 );
}

.rl-private-invitation > p,
.rl-private-booking > p {
	max-width: 62ch;
}

.rl-private-invitation__open {
	min-width: 44px;
	min-height: 44px;
	margin-block: var( --space-3 );
	padding: 12px 20px;
	background: var( --color-ink );
	border: 0;
	border-radius: var( --radius-pill );
	color: var( --color-surface );
	font: inherit;
	font-weight: var( --fw-bold );
	cursor: pointer;
}

.rl-private-invitation__open:focus-visible {
	outline: 3px solid var( --focus-ring );
	outline-offset: 3px;
}

.rl-private-invitation__open:disabled {
	cursor: wait;
	opacity: 0.72;
}

.rl-private-invitation__status {
	min-height: 1.5em;
}

.rl-private-invitation__error {
	display: flex;
	align-items: flex-start;
	gap: var( --space-2 );
	margin-block: var( --space-3 );
	padding: 12px 14px;
	border-inline-start: 3px solid var( --color-danger );
	border-radius: 0 var( --radius-md ) var( --radius-md ) 0;
	background: var( --color-danger-bg );
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-relaxed );
}

.rl-private-invitation__error[hidden] {
	display: none;
}

.rl-private-invitation__error > .material-symbols-outlined {
	flex: 0 0 auto;
	color: var( --color-danger-text );
	font-size: 20px;
	line-height: 1.2;
}

.rl-private-invitation__error p {
	margin: 0 0 var( --space-2 );
}

.rl-private-invitation__error strong {
	color: var( --text-heading );
}

.rl-private-invitation__error a {
	color: var( --text-link );
	font-weight: var( --fw-bold );
}

.rl-private-invitation__fallback {
	display: inline-block;
	min-height: 44px;
	padding-block: 10px;
}

.rl-private-booking__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
	margin-block: var( --space-4 );
	padding: var( --space-4 );
	background: var( --surface-card );
	border: 1px solid var( --border-hairline );
	border-radius: var( --radius-lg );
}

.rl-private-booking__summary p {
	margin: 0;
}

.rl-private-booking__service {
	font-weight: var( --fw-bold );
}

/* ---------------------------------------------------------------------------
 * Progress tracker (WPS-128)
 *
 * Bookly prints two trackers - the labelled `.bookly-progress-tracker` and the
 * bare `ol.bookly-stepper` - and swaps the first for the second on narrow
 * screens. The Storybook page draws the labelled one at every width, a circle
 * above each name: a check on a step already left, a filled circle on the
 * current one (the last `.active`). The "1. " before each name is Bookly's own
 * template, so the circle carries no second number. The step count is not
 * fixed - dev shows five with the home-care products step after Time - so the
 * steps share the row equally and a long name wraps between words. Only Bookly's named hooks
 * are used (scripts/qa/qa-bookly-contract.mjs checks they still exist).
 */
.bookly-form ol.bookly-stepper {
	display: none !important;
}

.bookly-form .bookly-progress-tracker {
	display: flex !important;
	justify-content: space-between;
	gap: 4px;
	margin: 0 0 var( --space-4 );
	font-size: 12px;
	font-weight: var( --fw-bold );
	line-height: 1.25;
	text-align: center;
}

.bookly-form .bookly-progress-tracker > div {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var( --text-meta ) !important;
	white-space: normal !important;
}

.bookly-form .bookly-progress-tracker > div::before {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	background: var( --surface-card );
	border: 2px solid var( --border-hairline );
	border-radius: 50%;
	content: "";
	color: var( --color-surface );
	font-family: var( --font-icon );
	font-size: 17px;
	font-weight: 400;
}

.bookly-form .bookly-progress-tracker > div.active::before {
	background: var( --color-ink );
	border-color: var( --color-ink );
	content: "check";
}

.bookly-form .bookly-progress-tracker > div.active:not( :has( + div.active ) )::before {
	background: var( --color-accent-strong );
	border-color: var( --color-accent-strong );
	box-shadow: 0 0 0 4px var( --tint-ice-deep );
	content: "";
}

.bookly-form .bookly-progress-tracker > div.active:not( :has( + div.active ) ) {
	color: var( --text-link ) !important;
}

.bookly-form .bookly-progress-tracker .step {
	display: none !important;
}

/* On a phone five names do not fit side by side: only the current step keeps
 * its name, the others keep their circle (the circle has its own font size). */
@media ( max-width: 559px ) {

	.bookly-form .bookly-progress-tracker > div:not( .active ),
	.bookly-form .bookly-progress-tracker > div.active:has( + div.active ) {
		font-size: 0;
	}

	.bookly-form .bookly-progress-tracker > div.active:not( :has( + div.active ) ) {
		white-space: nowrap !important;
	}
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * .bookly-btn is the base for every button Bookly prints - Next, the Done
 * step's "Nauja rezervacija", a future payment button - so it defaults to the
 * primary (ink) treatment and only .bookly-back-step / .bookly-btn-cancel are
 * pulled back to secondary. Confirmed in the rendered markup that Bookly does
 * NOT give its own "primary" actions a shared class of their own beyond
 * .bookly-btn - .bookly-next-step and .bookly-btn-submit exist too, but
 * "Nauja rezervacija" on the Done step carries neither, only
 * .bookly-nav-btn.bookly-btn.
 *
 * THE .bookly-form PREFIX ON EVERY COLOUR RULE BELOW IS THE SAME SPECIFICITY
 * FIX AS THE CALENDAR BUTTONS AND THE TIME PILLS ABOVE, learned the hard way:
 * a first version of this section wrote a bare `.bookly-btn { ... !important
 * }`, which matched, but LOST to Bookly's own
 * `.bookly-form .bookly-btn { background-color: var(--bookly-main-color)
 * !important }` on specificity (two classes beat one) even though this
 * stylesheet loads later - confirmed by reloading the built page and reading
 * computed styles, not assumed from the earlier calendar case. `.bookly-form`
 * is a real, confirmed ancestor (the same class the form-field rules below
 * already key off), so matching its two-class shape wins outright rather than
 * relying on load order to break a tie that specificity settles first.
 */

/*
 * min-height, not !important on height: Bookly's own `.bookly-btn { height:
 * auto !important }` sets no fixed height at all, so a plain min-height is not
 * fighting anything - it is simply the one box-sizing lever nobody upstream has
 * already claimed. Needed because measured on the built page at 390 px:
 * Bookly's own padding (9px 18px !important) plus its 17px line-height
 * !important renders the Next/Back buttons at 35px, under the 44px floor this
 * page's every other control clears (I8.2). display:flex centres the label
 * inside the taller box without touching Bookly's own padding or line-height
 * declarations.
 */
.bookly-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: var( --radius-pill );
	font-family: var( --font-sans );
	font-weight: var( --fw-bold );
	letter-spacing: 0;
	text-transform: none;
	transition:
		background var( --dur ) var( --ease ),
		border-color var( --dur ) var( --ease ),
		color var( --dur ) var( --ease );
}

.bookly-form .bookly-btn,
.bookly-form .bookly-btn-submit {
	background: var( --action-primary ) !important;
	border-color: var( --action-primary ) !important;
	color: var( --color-surface ) !important;
}

.bookly-form .bookly-btn:hover,
.bookly-form .bookly-btn-submit:hover {
	background: var( --action-primary-hover ) !important;
	border-color: var( --action-primary-hover ) !important;
}

/*
 * THE PILL ABOVE WAS A DEAD DECLARATION UNTIL WPS-109. `.bookly-btn` has asked
 * for var( --radius-pill ) since this file was written, and Bookly's own
 * `.bookly-form .bookly-btn` overrode it the whole time - measured on dev
 * 2026-09-06, every button in the form rendered at 4px while this stylesheet
 * said 999px. Nobody saw it because nothing compared the two: the rule looked
 * right in review and lost in the browser, the same way the ATGAL border did in
 * WPS-107.
 *
 * It surfaced when the theme had a back button of its own beside Bookly's
 * (removed in WPS-123). 4px is not on this site's shape scale at all, so the
 * fix went where the defect is - the two-class form of the selector, which is
 * what beats Bookly's own.
 *
 * text-transform is left alone deliberately. The same rule above declares
 * `none` and loses to Bookly in exactly the same way, so the buttons still
 * shout TOLIAU where the design canon writes sentence case - but that is a
 * change to the words on screen rather than the shape of a box, and it belongs
 * to a decision of Andrius's, not to a bug fix. Written up in
 * docs/bookly-auditas.md.
 */
.bookly-form .bookly-btn,
.bookly-form .bookly-btn-submit,
.bookly-form .bookly-back-step.bookly-btn,
.bookly-form .bookly-btn-cancel {
	border-radius: var( --radius-pill ) !important;
}

/*
 * border, not border-color (WPS-107): Andrius reported the button gone again
 * after WPS-106's colour fix, and this time it really was invisible, not
 * mislabelled. `.bookly-btn { border-width: 0 !important }` in bookly-main.css
 * left this rule a colour with nothing to paint - measured on dev,
 * getPropertyValue('border') came back "0px none rgb(214, 218, 225)". The
 * shorthand sets width and style alongside the colour this rule already held,
 * matching TOLIAU's own visible edge rather than only fixing what shows on a
 * white background against a white card. Deliberately different from TOLIAU
 * regardless: a secondary action gets a border where a primary one does not,
 * and this fix only makes the secondary button's border visible at all.
 */
.bookly-form .bookly-back-step.bookly-btn,
.bookly-form .bookly-btn-cancel {
	background: var( --surface-card ) !important;
	border: 1px solid var( --border-control ) !important;
	color: var( --text-heading ) !important;
}

.bookly-form .bookly-back-step.bookly-btn:hover,
.bookly-form .bookly-btn-cancel:hover {
	border-color: var( --color-accent ) !important;
	color: var( --text-link ) !important;
}

/* ---------------------------------------------------------------------------
 * Form fields
 *
 * Labels: Bookly forces their colour to the same configurable accent the
 * buttons use (`.bookly-form-group > label { color: var(--bookly-main-color)
 * !important }`, confirmed the same way as the buttons above) - which already
 * lands on this project's brand blue since WPS-030, so it is left alone rather
 * than fought back to ink. Size and weight are not !important upstream and take
 * normally.
 */

.bookly-form-group label {
	font-size: 13px;
	font-weight: 600;
}

/*
 * min-height: 44px is not fighting Bookly's own sizing here either. Its inputs
 * carry `height: auto !important` (no fixed value to beat) and its selects
 * carry only `padding: 5px 6px 4px 6px !important` - measured at 390 px, both
 * render at 30px, under the floor invariant I8.2 asks for. box-sizing keeps
 * the added height from also widening the box past its border.
 */
.bookly-form input[type="text"],
.bookly-form input[type="tel"],
.bookly-form input[type="email"],
.bookly-form input[type="number"],
.bookly-form input[type="password"],
.bookly-form select,
.bookly-form textarea {
	box-sizing: border-box;
	min-height: 44px;
	border-color: var( --tint-line-strong );
	border-radius: var( --radius-sm );
	color: var( --text-heading );
	font-family: var( --font-sans );
}

.bookly-form input[type="text"]:focus,
.bookly-form input[type="tel"]:focus,
.bookly-form input[type="email"]:focus,
.bookly-form select:focus,
.bookly-form textarea:focus {
	border-color: var( --color-accent );
}

/* The consent checkboxes: plain, unclassed native inputs in the rendered
 * markup, so accent-color is the one safe lever without reaching for the
 * kontaktai.css transparent-overlay technique this control does not need.
 *
 * "Bookly already sizes its own hit area", this comment said until WPS-106
 * measured it: 13x13 at 390 px, inside a label box 16px tall. It sizes
 * nothing. The width and height below are the visible mark; the 44px target
 * is the label around it, at the foot of this file with the rest of the
 * WPS-106 rules and the :has() that keeps it off the notes field. */
.bookly-custom-field-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	accent-color: var( --color-accent );
}

/* ---------------------------------------------------------------------------
 * Extras
 */

.bookly-extras-item {
	border-color: var( --border-control ) !important;
	border-radius: var( --radius-lg );
	font-family: var( --font-sans );
}

/*
 * The selected-state marker lands on the inner .bookly-extras-thumb, not on
 * .bookly-extras-item itself - confirmed in the rendered markup after clicking
 * the chip. An .bookly-extras-item.bookly-extras-selected selector (the first
 * version of this rule) compiles without error and matches nothing, which is
 * exactly the silent-failure this file's header warns against.
 */
.bookly-extras-item .bookly-extras-thumb.bookly-extras-selected {
	background: var( --tint-ice ) !important;
	border-color: var( --color-accent ) !important;
}

/* ---------------------------------------------------------------------------
 * Time step: calendar
 */

/*
 * The .bookly-css-root prefix is not decorative - it is the specificity fix.
 * Tailwind's own utilities here are compiled as `.bookly-css-root .bookly\:h-10
 * { height: ... !important }` and `.bookly-css-root .bookly\:border-none
 * { border: none !important }` (read off tailwind.css's CSSOM, priority
 * confirmed as "important" both times). A one-class selector loses that fight
 * even with !important of its own, because when both sides are !important the
 * tie goes to specificity first and only THEN to source order - this file's
 * general rule ("equal specificity, later stylesheet wins") does not apply once
 * both declarations carry the same weight. Matching the two-class shape wins on
 * specificity outright, with this stylesheet's later position settling nothing
 * that was not already settled.
 */
.bookly-css-root .bookly-calendar-left-button-mark,
.bookly-css-root .bookly-calendar-right-button-mark {
	width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	border: 1px solid var( --border-control ) !important;
	border-radius: 50% !important;
}

.bookly-calendar-dates-mark .fw-bold {
	color: var( --text-meta );
	font-size: var( --fs-meta );
	font-weight: var( --fw-bold );
}

/* Month/year label, e.g. "Rgp 2026". */
.bookly-calendar-controls-mark {
	color: var( --text-heading );
	font-weight: var( --fw-bold );
}

/* ---------------------------------------------------------------------------
 * Time step: slots
 *
 * A real <button> in the rendered markup (verified: no Tailwind utilities on
 * it), so no !important is needed - but Bookly's own default border-radius
 * rule is `.bookly-columnizer .bookly-hour` (confirmed in the CSSOM, not
 * !important), which already outranks a bare `.bookly-hour` on specificity
 * alone. Matching the two-class shape with the real ancestor class, rather
 * than reaching for !important, is the same fix the calendar-button comment
 * above explains for the important case - here neither side is important, so
 * specificity alone decides and this settles it without raising the stakes.
 */

/*
 * min-height again, the same lever as .bookly-btn above and for the same
 * reason: measured on the built page at 390 px, Bookly's own
 * `.bookly-columnizer .bookly-day, .bookly-columnizer .bookly-hour { height:
 * 36px }` (not !important) renders both the day buttons and the time pills at
 * 36px in the mobile day-list layout the "Show calendar" Time step falls back
 * to on narrow screens - under the 44px floor. min-height does not need to win
 * any cascade fight against Bookly's `height: 36px`: the two are different
 * properties, and the CSS box model already takes the larger of the two as the
 * used height, so this applies regardless of which rule "wins" for `height`
 * itself. .bookly-day is included here for the same measured reason, even
 * though nothing else in this file styles it - the calendar's grid cells
 * proper are left alone (see this file's header), but THIS list layout's day
 * button is a real <button>, not a Tailwind-utility cell, and fixing its
 * height costs nothing else.
 */
.bookly-columnizer .bookly-hour,
.bookly-columnizer .bookly-day {
	min-height: 44px;
}

.bookly-columnizer .bookly-hour {
	border: 1px solid var( --border-control );
	border-radius: var( --radius-pill );
	color: var( --text-heading );
	font-family: var( --font-sans );
	font-weight: var( --fw-bold );
	transition:
		background var( --dur ) var( --ease ),
		border-color var( --dur ) var( --ease );
}

.bookly-columnizer .bookly-hour:hover {
	border-color: var( --color-accent );
}

/*
 * No lingering "selected" state to style: clicking a slot submits it and moves
 * straight to Details (confirmed by walking the built form), so the only
 * feedback a visitor sees between click and navigation is the focus ring
 * base.css already draws on every <button>. An earlier version of this rule
 * targeted `.bookly-hour.active`, which never appears in the rendered markup -
 * exactly the silent-failure shape this file's header warns against, caught by
 * checking the element's className after a real click rather than assuming the
 * class existed.
 */

.bookly-hour-icon {
	color: inherit;
}
/* ---------------------------------------------------------------------------
 * Things the plugin paints wrong for this site (WPS-106, extended WPS-107)
 *
 * Every rule below was read off the live CSSOM on dev - selector, value AND
 * getPropertyPriority() - rather than inferred from how the page looks.
 * WPS-107 re-measured this section after WPS-106 shipped it: the back button
 * needed a second, unrelated fix (a missing border, not the label colour this
 * section already answered), and the consent checkbox's error state needed
 * two more properties once a real submission was walked at 390px instead of
 * just checked for a matching selector.
 */

/*
 * THE BACK BUTTON WAS INVISIBLE, NOT MISSING - Andrius reported it as gone
 * from the form (2026-09-06), which is what an invisible label looks like.
 * Measured: the button itself already took this file's ink, but its label came
 * out white on white - computed color rgb(255,255,255) on background
 * rgb(255,255,255), a contrast ratio of 1:1.
 *
 * The cause is a selector this file's own button rules never touched.
 * bookly-main.css declares `.bookly-btn, .bookly-btn > span { color: white
 * !important }` - the second half of that pair paints the inner
 * `span.ladda-label` DIRECTLY, so recolouring the button changes nothing the
 * eye can see: the label does not inherit a colour it is given one. Matching
 * the same child shape at higher specificity is what reaches it.
 *
 * Ladda's own stylesheet is not the culprit and needed no answer: its
 * `.ladda-button { color: white }` carries no !important and already loses to
 * the button rules above.
 */
.bookly-form .bookly-back-step.bookly-btn > span,
.bookly-form .bookly-btn-cancel > span {
	color: var( --text-heading ) !important;
}

.bookly-form .bookly-back-step.bookly-btn:hover > span,
.bookly-form .bookly-btn-cancel:hover > span {
	color: var( --text-link ) !important;
}

/*
 * ERRORS WERE PAINTED IN THE BRAND COLOUR, NOT AN ERROR COLOUR. Bookly routes
 * its error text through the same Appearance swatch as its labels and its
 * progress tracker - `.bookly-form .bookly-form-group > label, .bookly-form
 * .bookly-label-error, ... { color: var(--bookly-main-color) !important }` -
 * so every validation line under a field arrived in this site's accent blue,
 * the same colour the field labels above them already carry.
 *
 * That is wrong twice. It reads as a hint rather than a mistake, and at
 * 3.27:1 on white it does not clear the 4.5:1 this project holds body text to.
 * --color-danger-text is the token the theme's own error lines already use
 * (rezervuoti-laika.css's waiting-list error, kontaktai.css, prisijungti.css)
 * and measures 5.48:1 on white.
 *
 * !important and the two-class shape are both required: the upstream rule
 * carries !important, and once both sides do, specificity decides before
 * source order.
 *
 * margin-top ANSWERS A SEPARATE DEFECT (WPS-107): with a single-option
 * Checkbox Group the error text read as floating well clear of the checkbox
 * it belongs to, not merely close to it. The 5px here is not the cause - it
 * is the trailing <br>'s doing, fixed below - but reading Bookly's own value
 * off the CSSOM (bookly-main.css, no !important) turned up a second, smaller
 * contributor worth trimming while this rule is already open. No !important:
 * the upstream declaration carries none and this stylesheet loads later, so a
 * plain value wins on source order alone, same principle this file's header
 * asks for wherever it holds.
 */
.bookly-form .bookly-label-error {
	margin-top: 3px;
	color: var( --color-danger-text ) !important;
}

/*
 * THE TRAILING <br> IS THE ACTUAL DISTANCE, NOT THE 5px ABOVE (WPS-107).
 * Bookly prints a Checkbox Group as one <label> per option followed by its own
 * <br>, so a group with more than one option needs every one of them to keep
 * each option on its own line. With a SINGLE option - both custom fields here
 * have exactly one - that pattern leaves one dead <br> with nothing after it
 * but the error text, and measured on dev it is 17px tall: the real gap
 * between the checkbox's own label and "Privaloma" below it, confirmed by
 * reading the element's own getBoundingClientRect() before and after hiding
 * it. :last-child only, and scoped to .bookly-form-group rather than the
 * <label> itself - a group of two or more options still prints a <br> between
 * each pair, and only the FINAL one in the group is ever the dead one.
 */
.bookly-form .bookly-form-group br:last-child {
	display: none;
}

/*
 * The field itself, same story: `border: 2px solid var(--bookly-main-color)
 * !important`. Only the colour is answered here - the 2px and the solid stay
 * Bookly's, because the thicker edge is the right emphasis for an error and
 * overriding the shorthand would throw it away for nothing. Longhand against
 * shorthand is not a fight: the cascade resolves border-color on its own, and
 * at equal specificity this stylesheet loads later.
 */
.bookly-form input[type="text"].bookly-error,
.bookly-form input[type="tel"].bookly-error,
.bookly-form input[type="email"].bookly-error,
.bookly-form input[type="number"].bookly-error,
.bookly-form select.bookly-error,
.bookly-form textarea.bookly-error {
	border-color: var( --color-danger ) !important;
}

/*
 * A checkbox has no border to redden - Bookly's reset leaves it at
 * currentcolor, which measured as plain body ink and said nothing at all. An
 * outline is the one mark that reads as "this one" without moving anything
 * around it, which matters here: the two custom fields are the BDAR consent
 * and the receipt consent, and an unticked consent is the most common way this
 * form refuses to submit.
 *
 * !important, AND THE FIRST VERSION OF THIS RULE DID NOT CARRY IT - which made
 * it exactly the silent no-op this file's header warns about. The selector
 * matched (element.matches() confirmed it) and painted nothing, because
 * bookly-main.css turns outlines off across its whole form:
 * `.bookly-form input[type="text"], ... input[type="checkbox"], ...
 * { outline: none !important }`. Importance beats specificity, so a plain
 * declaration here could not win however specific it got. Measured on the
 * built page 2026-09-06 by submitting the details step empty and reading the
 * checkbox back: outline-style came out "none" while the rule sat there
 * looking correct.
 *
 * accent-color IS A SEPARATE DEFECT FROM THE OUTLINE (WPS-107). The outline
 * above says "look here"; the checkbox's own fill still painted brand blue
 * once ticked, which is the wrong colour for a field the visitor is being
 * asked to go back and fix. No !important needed: this selector already adds
 * one more class than this file's own default accent-color rule above, so it
 * wins on specificity regardless of source order - confirmed live on dev
 * before writing it here, the same way every rule in this section is.
 */
.bookly-form .bookly-custom-field-row input[type="checkbox"].bookly-error {
	accent-color: var( --color-danger );
	outline: 2px solid var( --color-danger ) !important;
	outline-offset: 2px;
}


/*
 * THE PRIVACY-POLICY LINK DID NOT LOOK LIKE A LINK. The consent label carries
 * real markup (Bookly allows HTML in a custom field's label - confirmed on dev
 * 2026-09-06), but Bookly's reset flattens it: `.bookly-css-root a { color:
 * inherit }`, so the link came out in body ink with no underline, measured
 * rgb(63,72,81) and text-decoration-line: none.
 *
 * No !important here, and that is the measured part: the upstream declaration
 * carries none, so a two-class selector beats its one-class one on specificity
 * alone. The file's header asks that plain-where-plain-suffices be visible, so
 * a later reader can tell the necessary !important above from habit.
 */
.bookly-form .bookly-custom-field-row a {
	color: var( --text-link );
	text-decoration: underline;
}

.bookly-form .bookly-custom-field-row a:hover {
	color: var( --color-accent-strong );
}

/*
 * The consent rows' own hit area. Measured at 390 px on dev, walking the real
 * form: the input is 13x13 and its label box 39px and 16px tall - all three
 * under the 44px floor (I8.2), on the one control that has to be ticked
 * deliberately rather than by accident.
 *
 * :has() rather than a blanket label rule, because this container also holds
 * the notes textarea's own label, which is not a target and should not grow a
 * 44px box. It is the same selector kainos.css, testas.css and
 * dovanu-kuponai.css already use here, and it degrades in exactly the right
 * direction: a browser without it simply leaves today's layout alone.
 */
.bookly-form .bookly-custom-field-row label:has( input[type="checkbox"] ) {
	display: flex;
	align-items: flex-start;
	min-height: 44px;
	padding-block: var( --space-2 );
	gap: var( --space-2 );
}

/*
 * The payment step's own radio, found by the same walk and the same measure:
 * 13x13 inside a label of its own. It carries a different class and a
 * different ancestor from the consent boxes, so it needs its own pair of rules
 * rather than a widened selector - `.bookly-payment-nav` is the confirmed
 * container (read off the rendered markup, 2026-09-06).
 *
 * There is only one payment method today ("Atsiskaitysiu vietoje"), so this
 * costs nothing now and stops the next one from arriving under the floor.
 */
.bookly-form .bookly-payment-nav label:has( input.bookly-js-payment ) {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: var( --space-2 );
}

.bookly-form input.bookly-js-payment {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	accent-color: var( --color-accent );
}

/* ---------------------------------------------------------------------------
 * Time step (WPS-128, option 1: Andrius 2026-09-27)
 *
 * Only hooks Bookly names itself and keeps across releases: the step's info
 * box (`.bookly-box`, the Time step info text set in Appearance),
 * `.bookly-slot-calendar`, the calendar's `-mark` classes, the `disabled`
 * attribute on a day without free time, `.bookly-column`, `.bookly-day`,
 * `.bookly-hour` and `.booked`. Nothing names the calendar's DOM structure or
 * a `bookly:` utility class, so a Bookly update can only remove a hook - which
 * scripts/qa/qa-bookly-contract.mjs reports on dev before the update goes live.
 * The Storybook page draws exactly what these hooks can reach.
 */
/* Only on the Time step: the later steps' info texts are sentences, not headings. */
.bookly-form:has( .bookly-time-step ) > .bookly-box:not( .bookly-label-error ):not( .bookly-nav-steps ) {
	margin: 0 0 var( --space-3 );
	color: var( --text-heading );
	font-size: 16px;
	font-weight: var( --fw-bold );
	line-height: 1.4;
}

.bookly-css-root .bookly-slot-calendar {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 0 var( --space-4 ) !important;
}

.bookly-css-root .bookly-calendar-middle-button-mark {
	color: var( --text-heading ) !important;
	font-size: 15px !important;
	font-weight: var( --fw-bold ) !important;
}

.bookly-css-root .bookly-calendar-left-button-mark,
.bookly-css-root .bookly-calendar-right-button-mark {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	color: var( --text-heading ) !important;
}

/* The calendar sits on the page card itself, without its own frame. */
.bookly-css-root .bookly-panel-mark {
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Every day of the shown month: a taller tile with room for the dot. */
.bookly-css-root .bookly-calendar-current-month-mark {
	position: relative;
	height: 48px !important;
	margin: 2px !important;
	border: 1px solid var( --border-control ) !important;
	border-radius: var( --radius-sm ) !important;
	font-weight: var( --fw-bold );
}

/* A free day's number in heading ink rather than the accent; the chosen day
 * keeps Bookly's accent fill (`bg-bookly`), which carries no `text-bookly`. */
.bookly-css-root .bookly-calendar-current-month-mark.text-bookly:not( [disabled="true"] ) {
	background: var( --surface-card ) !important;
	color: var( --text-heading ) !important;
}

/* A day without free time: flat and quiet, but still legible (Bookly's own
 * 50 % opacity took the number under the contrast floor). */
.bookly-css-root .bookly-calendar-current-month-mark[disabled="true"] {
	background: var( --tint-mist ) !important;
	border-color: var( --tint-mist ) !important;
	color: var( --text-meta ) !important;
	font-weight: var( --fw-medium );
	opacity: 1 !important;
}

/* A day with free time: a green dot under the number. Svelte always writes the
 * attribute, as disabled="true" or disabled="false", so the value is the hook. */
.bookly-css-root .bookly-calendar-current-month-mark:not( [disabled="true"] )::after {
	position: absolute;
	bottom: 6px;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var( --color-green-ink );
	border-radius: 50%;
	content: "";
	transform: translateX( -50% );
}

/*
 * The chosen day's name, then its times as tiles, three to a row on a phone.
 * The grid sits on `.bookly-time-screen`: Bookly puts the day and its times in
 * a `.bookly-column` inside it on some layouts (measured locally at 390 px)
 * and straight inside it on others (dev, Pro 10.5, 1728 px), so a column, when
 * there is one, steps out of the way and its buttons join the same grid.
 */
/* Bookly writes a pixel width and side margins on the Time step itself (254 px
 * on a 390 px phone, measured on dev); the times take the form's full width. */
.bookly-form .bookly-time-step {
	float: none !important;
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.bookly-form .bookly-time-step .bookly-time-screen {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
	gap: 8px;
	width: 100% !important;
}

.bookly-form .bookly-time-step .bookly-time-screen > .bookly-column {
	display: contents !important;
}

/* On the Time step - the first step this site shows - Bookly's back button only
 * reloads the same step (measured on dev 2026-09-27), so it is not drawn. */
.bookly-form:has( .bookly-time-step ) .bookly-nav-steps .bookly-back-step {
	display: none !important;
}

.bookly-form .bookly-columnizer .bookly-day {
	grid-column: 1 / -1;
	min-height: 0;
	margin: 0 0 2px;
	padding: 0;
	background: none !important;
	border: 0 !important;
	color: var( --text-heading ) !important;
	font-size: 15px;
	font-weight: var( --fw-bold );
	text-align: left;
}

.bookly-form .bookly-columnizer .bookly-hour {
	width: auto !important;
	min-height: 52px;
	margin: 0 !important;
	border-radius: var( --radius-md );
	font-size: 16px;
}

.bookly-form .bookly-columnizer .bookly-hour .bookly-time-main {
	font-size: 16px;
	font-weight: var( --fw-bold );
}

.bookly-form .bookly-columnizer .bookly-hour .bookly-hour-icon {
	display: none;
}

.bookly-form .bookly-columnizer .bookly-hour.booked {
	background: var( --tint-mist ) !important;
	border-color: var( --tint-mist ) !important;
	color: var( --text-meta ) !important;
	text-decoration: line-through;
}