/*
 * The booking page.
 *
 * Everything here is the mockup's layout for the parts this page draws itself -
 * hero, trust cards, mini FAQ. The Bookly widget's own reskin lives in
 * bookly.css, loaded alongside this file only on this page; splitting the two
 * keeps a plugin-facing stylesheet reusable the day another page embeds the same
 * shortcode (WPS-032), without this file's ordinary page rules following it there.
 *
 * MOBILE FIRST WITH NO BREAKPOINT OF OUR OWN, same as kontaktai.css: every band
 * is one column or an auto-fit grid that folds on its own.
 */

/* ---------------------------------------------------------------------------
 * Hero
 */

.rl-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp( 24px, 4vw, 44px ) clamp( 14px, 2vw, 22px );
	gap: 10px;
	text-align: center;
}

.rl-hero__title {
	max-width: 720px;
	margin: 0;
	font-size: clamp( 28px, 4.4vw, 44px );
	line-height: var( --lh-tight );
	letter-spacing: var( --ls-display );
	text-wrap: pretty;
}

.rl-hero__note {
	display: inline-flex;
	align-items: center;
	margin: 0;
	gap: var( --space-2 );
	color: var( --text-body );
	font-size: clamp( 15px, 1.9vw, 18px );
}

.rl-hero__note .material-symbols-outlined {
	color: var( --color-green-ink );
	font-size: 20px;
}

/* ---------------------------------------------------------------------------
 * Booking widget card
 *
 * The card is ours; the "live indicator" line reads directly from the mockup and
 * sits above Bookly's own first screen so the page keeps that promise even before
 * the plugin's JavaScript has painted anything.
 */

.rl-booking {
	padding-block: 0 clamp( 20px, 3vw, 32px );
}

/*
 * No max-width of its own: the card is a direct child of .container.rl-booking,
 * so it fills the same width .rl-hero and .rl-trust already use below it. The
 * 1000px this carried before left the card visibly narrower than the sections
 * above and below it on the same page - Andrius's finding on dev (2026-08-28).
 */
.rl-booking__card {
	padding: clamp( 20px, 3.5vw, 40px );
	background: var( --surface-card );
	border-radius: clamp( 20px, 2.5vw, 28px );
	box-shadow: var( --shadow-card );
}

.rl-booking__live {
	display: flex;
	align-items: center;
	margin: 0 0 clamp( 16px, 2.5vw, 22px );
	gap: var( --space-2 );
	color: var( --color-green-ink );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
}

/*
 * The promotion's coupon, said out loud above the form (WPS-085). The code is
 * filled into Bookly's own field by main.js once the payment step draws it;
 * this line is what tells the visitor that happened, and what lets them type
 * it themselves if it did not. Same wash as the GBT icon boxes, same caption
 * size as the live-slots line beside it.
 */
.rl-coupon {
	display: flex;
	align-items: flex-start;
	gap: var( --space-2 );
	margin: 0 0 clamp( 16px, 2.5vw, 22px );
	padding: 10px 14px;
	background: var( --tint-ice );
	border-radius: var( --radius-md );
	color: var( --text-heading );
	font-size: var( --fs-caption );
	line-height: 1.5;
}

.rl-coupon .material-symbols-outlined {
	flex-shrink: 0;
	color: var( --color-accent-text );
	font-size: 20px;
}

.rl-coupon__code {
	font-weight: var( --fw-black );
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/*
 * The mockup's "live" dot is a third green the palette does not carry as a raw
 * value (neither --color-green-ink's 5.72:1 nor --color-mint-ink's 4.54:1 -
 * this is a fill, not text, so contrast is not the question the palette
 * answers here). Snapped to the nearest palette member the same way
 * kontaktai.css already snapped its three - a bare hex outside tokens.css is
 * G4 regardless of whether the source is a fill or a comment, so the shade is
 * traded rather than the token bypassed.
 */
.rl-booking__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	background: var( --color-green-ink );
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba( 46, 93, 52, 0.14 );
}

/* ---------------------------------------------------------------------------
 * The visit summary above the form (WPS-123)
 *
 * The one place on this page that states the price (invariant I2), drawn like
 * the booking card's own summary (components.css .bcard__summary): same
 * eyebrow, visit name, patient time and price, so the card a visitor tapped
 * and the page it opened read as one thing.
 */
.rl-summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 var( --space-4 );
	padding: 14px 16px;
	background: var( --tint-sky-soft );
	border-radius: var( --radius-md );
	gap: var( --space-3 );
}

.rl-summary__what {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 3px;
}

.rl-summary__what p,
.rl-summary__price {
	margin: 0;
}

.rl-summary__who {
	color: var( --text-link );
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
}

.rl-summary__service {
	color: var( --text-heading );
	font-size: 18px;
	font-weight: var( --fw-black );
	line-height: 1.25;
}

.rl-summary__time {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var( --text-meta );
	font-size: var( --fs-caption );
}

.rl-summary__time .material-symbols-outlined {
	font-size: 20px;
}

.rl-summary__price {
	color: var( --text-link );
	font-size: var( --fs-price );
	font-weight: var( --fw-black );
	line-height: 1;
	white-space: nowrap;
	text-align: right;
}

/* ---------------------------------------------------------------------------
 * Trust blocks
 */

.rl-trust {
	padding-block: 0 clamp( 24px, 3.5vw, 40px );
}

.rl-trust__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 220px ), 1fr ) );
	gap: clamp( 12px, 2vw, 16px );
}

.rl-trust__card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 10px;
	background: var( --surface-card );
	border-radius: var( --radius-md );
	box-shadow: var( --shadow-hairline );
}

.rl-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 50%;
}

.rl-trust__icon--blue {
	background: var( --tint-ice );
	color: var( --color-accent-text );
}

.rl-trust__icon--green {
	background: var( --color-green );
	color: var( --color-green-ink );
}

.rl-trust__icon .material-symbols-outlined {
	font-size: 21px;
}

.rl-trust__title {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
}

.rl-trust__text {
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-meta );
	line-height: var( --lh-relaxed );
}

/* ---------------------------------------------------------------------------
 * Mini FAQ
 *
 * Three native <details> elements rather than the mockup's scripted accordion -
 * page-rezervuoti-laika.php explains why. The chevron is a single "add" glyph
 * that rotates to read as a close mark on [open]; the browser's own marker is
 * removed in both engines so this one glyph is the only affordance.
 */

.rl-faq {
	padding-block: 0 clamp( 48px, 7vw, 80px );
}

.rl-faq__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 clamp( 14px, 2vw, 20px );
	gap: var( --space-4 );
}

.rl-faq__head h2 {
	margin: 0;
	font-size: clamp( 22px, 3vw, 30px );
	line-height: 1.14;
	letter-spacing: var( --ls-display );
}

.rl-faq__all {
	display: inline-flex;
	align-items: center;
	margin-block: -12px;
	padding-block: 12px;
	gap: 6px;
	color: var( --text-link );
	font-size: var( --fs-caption );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.rl-faq__all .material-symbols-outlined {
	font-size: 18px;
}

.rl-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rl-faq__item {
	background: var( --surface-card );
	border-radius: var( --radius-md );
	box-shadow: var( --shadow-hairline );
	overflow: hidden;
}

.rl-faq__question {
	display: flex;
	align-items: center;
	list-style: none;
	padding: clamp( 16px, 2.2vw, 20px ) clamp( 18px, 2.4vw, 24px );
	gap: var( --space-4 );
	color: var( --text-heading );
	font-size: clamp( 15.5px, 1.9vw, 17px );
	font-weight: var( --fw-bold );
	line-height: 1.4;
	cursor: pointer;
	text-wrap: pretty;
}

.rl-faq__question::-webkit-details-marker {
	display: none;
}

.rl-faq__question:hover {
	background: var( --surface-page );
}

.rl-faq__question::after {
	flex-shrink: 0;
	margin-left: auto;
	content: 'add';
	font-family: var( --font-icon );
	font-size: 20px;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	transition: transform var( --dur ) var( --ease );
}

.rl-faq__item[open] .rl-faq__question::after {
	transform: rotate( 45deg );
}

.rl-faq__answer {
	padding: 0 clamp( 18px, 2.4vw, 24px ) clamp( 16px, 2.2vw, 20px );
	color: var( --text-body );
	font-size: clamp( 14.5px, 1.7vw, 15.5px );
	line-height: 1.66;
	text-wrap: pretty;
}