/* =================================================================
   Boutique Appointments — frontend form (phase 4 shell)

   Values copied from zoppi theme's Rolex styles for visual fidelity:
   - Primary green:  #127749  (hover #006039)
   - Secondary text: #452c1e  (Rolex brown)
   - Beige bg:       #f5f3eb
   - Pill button radius: 9999px
   - Pixel polish lands in phase 5.
   ================================================================= */

.boutique-appt {
	/* Colour + type tokens read from rolexboutique-geneve.com via computed styles. */
	--ba-green:         #127749;
	--ba-green-dark:    #006039;
	--ba-brown:         #452c1e;  /* title colour (Rolex brown) */
	--ba-text:          #212121;  /* body text everywhere on the page */
	--ba-text-muted:    #212121;  /* Rolex uses a single text colour, not muted */
	--ba-bg:            transparent;  /* let the host .site-main bg show through */
	--ba-bg-card:       #ffffff;
	--ba-border:        rgba(33, 33, 33, 0.18);
	--ba-error:         #be0100;
	--ba-font:          "Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif;

	background: var(--ba-bg) !important;
	color: var(--ba-text) !important;
	font-family: var(--ba-font) !important;
	font-weight: 400 !important;  /* matches Rolex reference body weight */
	padding: 0 0 96px !important;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
}

.boutique-appt__step {
	padding: 0 15px;               /* matches .container padding */
	max-width: 760px;
	margin: 0 auto;
}

/* Step 1 (purpose selection) gets a wider container so the two type cards
   spread out — per feedback (~1100px). The header lead stays capped at 560px
   (see .boutique-appt__lead) so body copy keeps a readable measure. */
.boutique-appt__step--1 {
	max-width: 1100px;
}

/* Banner image — full viewport width, escapes the .container wrapper
   via the classic negative-margin trick so the image spans the page
   edge-to-edge regardless of the surrounding chrome container width. */
.boutique-appt__banner {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	height: 540px;
	background-size: cover;
	background-position: center;
	background-color: #2a221d;
}
.boutique-appt,
.boutique-appt *,
.boutique-appt *::before,
.boutique-appt *::after {
	box-sizing: border-box !important;
}

/* Accessibility: visible keyboard-focus indicator for ALL interactive elements.
   Cross-cutting audit caught that there was no replacement for the default
   browser focus ring, leaving keyboard users with no visible focus state. */
.boutique-appt button:focus-visible,
.boutique-appt a:focus-visible,
.boutique-appt input:focus-visible,
.boutique-appt select:focus-visible,
.boutique-appt textarea:focus-visible,
.boutique-appt [tabindex]:focus-visible {
	outline: 2px solid var(--ba-green) !important;
	outline-offset: 2px !important;
}
/* On inputs (no border around the box), use a brown bottom-border thickening on focus
   to match the reference's underline emphasis. Keep the green outline only for buttons + selects. */
.boutique-appt .boutique-appt__field input:focus-visible,
.boutique-appt .boutique-appt__field textarea:focus-visible {
	outline: none !important;
	border-bottom-width: 2px !important;
	border-bottom-color: var(--ba-brown) !important;
}

/* -------------------------------------------------------------------
   Theme-defense reset — themes routinely style `button`, `input`, `h2`,
   `p`, etc. globally. Neutralise their visual properties so our pills,
   day cards, headings, and form fields render predictably across any
   theme, including block themes like Twenty Twenty-Five that drive
   typography from CSS custom properties.
   ------------------------------------------------------------------- */
.boutique-appt h1,
.boutique-appt h2,
.boutique-appt h3,
.boutique-appt h4,
.boutique-appt p,
.boutique-appt label,
.boutique-appt form,
.boutique-appt fieldset,
.boutique-appt legend {
	font-family: inherit !important;
}
.boutique-appt form,
.boutique-appt fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.boutique-appt button,
.boutique-appt input,
.boutique-appt select,
.boutique-appt textarea,
.boutique-appt a {
	background: none !important;
	color: inherit !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	font: inherit !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	min-height: 0 !important;
	width: auto !important;
}
.boutique-appt button {
	cursor: pointer;
}
.boutique-appt button[disabled] {
	cursor: not-allowed;
}

/* ---------- Step visibility ---------- */
.boutique-appt__step { display: none; }
.boutique-appt__step.is-active { display: block; }

/* ---------- Back link ---------- */
/* Container reserves the same vertical space on every step (even step 1 & 5,
   which have no back button) — mirrors the Rolex reference's
   .rolex-step__back-container so step transitions don't jolt the layout. */
.boutique-appt__back-container {
	display: flex;
	align-items: center;
	height: max(10vh, 90px);
}
.boutique-appt .boutique-appt__back {
	font-family: var(--ba-font) !important;
	color: var(--ba-text) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 10px 20px 10px 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	line-height: normal !important;
}
.boutique-appt__back-icon {
	width: 12px;
	height: 12px;
	transform: rotate(180deg);
	fill: currentColor;
	flex-shrink: 0;
}

/* ---------- Header block ---------- */
.boutique-appt__header {
	text-align: center;
	margin-bottom: 32px;
}

.boutique-appt__eyebrow {
	font-family: var(--ba-font) !important;
	font-size: 24px !important;        /* P0 fix: was 12px — matches reference .rolex-body1 */
	line-height: 28.8px !important;    /* P0 fix: was 14.64 — proportional */
	font-weight: 400 !important;
	color: var(--ba-brown) !important; /* P0 fix: was --ba-text grey — reference uses brown */
	margin: 0 !important;
	text-transform: none !important;
}
.boutique-appt__header p.boutique-appt__eyebrow { margin-bottom: 0 !important; }

.boutique-appt .boutique-appt__title {
	font-family: var(--ba-font) !important;
	font-size: 50px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: var(--ba-brown) !important;
	margin: 0 !important;
	letter-spacing: normal !important;
}

/* Track the page heading (.rolex-template h1 / .headline50) so the form title
   matches the title above the form at every breakpoint: 50 → 42 → 36 → 30. */
@media screen and (max-width: 1440px) {
	.boutique-appt .boutique-appt__title { font-size: 42px !important; }
}
@media screen and (max-width: 1024px) {
	.boutique-appt .boutique-appt__title { font-size: 36px !important; }
}
@media screen and (max-width: 767px) {
	.boutique-appt .boutique-appt__title { font-size: 30px !important; }
}

.boutique-appt__lead,
.boutique-appt__sub {
	font-family: var(--ba-font) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	font-weight: 400 !important;   /* P1 fix: was 300 — reference uses regular weight */
	color: var(--ba-text) !important;
	max-width: 560px;
	margin: 30px auto 0 !important;
}
/* SUPPORT-19123 #2/#3: subtitle leads render at regular weight on every step
   (step-4 "Wir nutzen diese Informationen…" + step-5 "Bitte stellen Sie sich…").
   Reverses the QA#1 bold override per client feedback + the Rolex reference. */
.boutique-appt__sub { text-align: center; }  /* SUPPORT-19123 #8: centre the cancel-page help line */
/* Step 3 picker (week paginator + day grid + time grid + actions) is narrow;
   header stays full width so the title/eyebrow can breathe. */
.boutique-appt__step--3 .boutique-appt__week-paginator,
.boutique-appt__step--3 .boutique-appt__day-grid,
.boutique-appt__step--3 .boutique-appt__instruction,
.boutique-appt__step--3 .boutique-appt__time-grid,
.boutique-appt__step--3 .boutique-appt__actions {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.boutique-appt__instruction {
	font-family: var(--ba-font) !important;
	font-size: 20px !important;
	line-height: 32px !important;
	font-weight: 700 !important;
	color: var(--ba-text) !important;
	margin: 30px 0 0 !important;
}
.boutique-appt__instruction--center { text-align: center; }

/* Step 3 "Select an available time" prompt. Kept smaller than the Step 1
   instruction (targeted via [data-time-instruction] so Step 1 keeps 20/32/700),
   but per Lukas feedback 2026-06 it must be BOLD + CENTERED (an earlier pass had
   set it to weight 400 to match the reference .rolex-legend1 — client overrides). */
.boutique-appt .boutique-appt__instruction[data-time-instruction] {
	font-size: 16px !important;
	line-height: 17.6px !important;
	font-weight: 700 !important;
	text-align: center !important;
	/* SUPPORT-19123 #1: `auto` left/right margins centre the 400px block. The
	   previous `0` margins (with !important) pinned the block left, so the
	   centred text still sat to the left of the day/time grids. */
	margin: 24px auto 16px !important;
}

/* ---------- Step 1 type cards ---------- */
.boutique-appt__type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 32px;
	align-items: start;
}

.boutique-appt .boutique-appt__type-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: block !important;
	transition: opacity 0.15s ease !important;
	text-align: left !important;
	width: 100% !important;
}
.boutique-appt .boutique-appt__type-card { cursor: pointer !important; }
.boutique-appt .boutique-appt__type-card.is-selected .boutique-appt__type-image {
	box-shadow: 0 0 0 3px var(--ba-green) !important;
}

.boutique-appt__type-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;             /* P1 fix: was 4/3 — matches reference 480×320 image */
	background-color: #2a221d;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: transform 0.3s ease, opacity 0.2s ease, box-shadow 0.15s ease !important;
}

.boutique-appt__type-tag {
	display: block;
	font-family: var(--ba-font) !important;
	font-size: 16px !important;       /* P1 fix: was 14px — matches reference .rolex-legend1 */
	font-weight: 700 !important;      /* P0 fix: was 400 — reference uses --bold variant */
	line-height: 17.6px !important;   /* P1 fix: was 20px — proportional to 16px */
	color: var(--ba-text) !important;
	padding: 0 !important;
	margin: 10px 0 0 !important;
}
.boutique-appt__type-caption {
	display: block;
	font-family: var(--ba-font) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 28.8px !important;
	color: var(--ba-text) !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 90%;
}

/* ---------- Step 3: week paginator + day grid + times ---------- */
.boutique-appt__week-paginator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}
.boutique-appt .boutique-appt__week-nav {
	font-size: 20px !important;
	width: 32px !important;
	height: 32px !important;
	color: var(--ba-text) !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}
.boutique-appt .boutique-appt__week-nav:hover { background: rgba(0,0,0,0.05) !important; }
.boutique-appt__week-nav-icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
	flex-shrink: 0;
}
.boutique-appt__week-nav-icon--prev { transform: rotate(180deg); }
.boutique-appt__week-range {
	font-size: 16px;          /* cross-cutting fix: was 14px — matches reference .rolex-legend1--bold (16/17.6/700) */
	line-height: 17.6px;
	font-weight: 700;         /* was 600 */
	letter-spacing: 0.02em;
	color: var(--ba-text);
	min-width: 180px;
	text-align: center;
}

.boutique-appt__day-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 50px 0;
}
.boutique-appt .boutique-appt__day {
	background: var(--ba-bg-card) !important;
	border: 0 !important;
	border-radius: 1px !important;     /* P1 fix: was 4px — reference uses near-square corners */
	padding: 10px 20px !important;     /* P1 fix: was 14px 8px — matches reference */
	font-size: 16px !important;        /* P1 fix: was inherited 20px */
	line-height: 17.6px !important;    /* P1 fix: was 24px */
	font-weight: 400 !important;       /* P1 fix: was 300 */
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100% !important;
}
.boutique-appt .boutique-appt__day.is-selected {
	background: var(--ba-brown) !important;       /* P0 fix: was outline-only — reference uses brown fill */
	color: #fff !important;
}
.boutique-appt .boutique-appt__day.is-selected .boutique-appt__day-number,
.boutique-appt .boutique-appt__day.is-selected .boutique-appt__day-name { color: #fff !important; }
.boutique-appt .boutique-appt__day.is-closed { opacity: 0.35 !important; cursor: not-allowed !important; }
.boutique-appt__day-number {
	display: block;
	font-size: 16px !important;        /* P1 fix: was 18px */
	font-weight: 700 !important;       /* P1 fix: was 600 */
	color: var(--ba-text) !important;  /* P1 fix: was brown — reference uses default text colour */
}
.boutique-appt__day-name {
	display: block;
	font-size: 16px !important;        /* P1 fix: was 12px — was fading visually */
	font-weight: 400 !important;       /* P1 fix: was 300 */
	color: var(--ba-text-muted) !important;
	text-transform: capitalize !important;
}

.boutique-appt__time-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 40px;
}
.boutique-appt .boutique-appt__time {
	background: var(--ba-bg-card) !important;
	border: 0 !important;
	border-radius: 9999px !important;                /* full pill ✓ */
	padding: 7px 20px !important;                    /* P1 fix: was 8×18 — matches reference */
	font-size: 16px !important;                      /* P1 fix: was 14px */
	line-height: 17.6px !important;                  /* P1 fix: was 1.4 (=19.6 at 14px) */
	font-weight: 700 !important;                     /* P1 fix: was 600 — reference uses bold */
	color: var(--ba-text) !important;
	min-width: 120px;                                /* widen pills toward reference 156px */
}
.boutique-appt .boutique-appt__time:hover { border-color: var(--ba-brown) !important; color: var(--ba-brown) !important; }  /* P0: hover matches selected colour */
.boutique-appt .boutique-appt__time.is-selected {
	background: var(--ba-brown) !important;          /* P0 fix: was --ba-green — reference uses brown for selected data */
	border-color: var(--ba-brown) !important;
	color: #fff !important;
}

.boutique-appt__loading,
.boutique-appt__error {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--ba-text-muted);
	font-size: 14px;
	padding: 24px 0;
}

/* ---------- Step 4 form ---------- */
.boutique-appt__form { margin-top: 24px; }

.boutique-appt__row {
	display: flex;
	gap: 24px;
	margin-bottom: 24px;
}

/* P0 fix: CF7 wraps every row's content in a single <p>, which kills the .boutique-appt__row
   flex layout (only 1 child = no columns). Make the inner <p> the actual flex container
   and hide the auto-inserted <br>s between fields. Restores 3-col/2-col rows. */
.boutique-appt .boutique-appt__row > p {
	display: flex !important;
	gap: 24px !important;
	margin: 0 !important;
	width: 100% !important;
	align-items: flex-end !important;
}
.boutique-appt .boutique-appt__row > p > br { display: none !important; }
.boutique-appt .boutique-appt__row--name > p > .boutique-appt__field--title,
.boutique-appt__row--name .boutique-appt__field--title { flex: 0 0 115px; }
.boutique-appt .boutique-appt__row--name > p > .boutique-appt__field,
.boutique-appt .boutique-appt__row--phone > p > .boutique-appt__field { flex: 1 1 0 !important; min-width: 0; }
.boutique-appt .boutique-appt__row--phone > p > .boutique-appt__field--phone-code,
.boutique-appt__row--phone .boutique-appt__field--phone-code { flex: 0 0 115px; }

.boutique-appt__field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.boutique-appt__field-label {
	color: #452c1e !important;
	opacity: 0.5 !important;
	line-height: 1.1 !important;
	font-size: 16px !important;
	font-weight: bold !important;
	letter-spacing: 0.02em;
	margin-bottom: 6px !important;
}
.boutique-appt__field-note {
	font-size: 13px;
	color: var(--ba-text-muted);
	margin: -8px 0 16px;
}
.boutique-appt .boutique-appt__field input[type="text"],
.boutique-appt .boutique-appt__field input[type="email"],
.boutique-appt .boutique-appt__field input[type="tel"],
.boutique-appt .boutique-appt__field select {
	font-size: 20px !important;        /* P1 fix: was 18px — matches reference */
	font-weight: 400 !important;       /* P1 fix: was 600 — reference uses regular weight */
	border: 0 !important;
	border-bottom: 1px solid var(--ba-brown) !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 7px 0 !important;         /* P1 fix: was 8px — matches reference */
	outline: none !important;
	color: var(--ba-text) !important;
	width: 100% !important;
	line-height: 1.2 !important;       /* tighter than the previous 1.4 */
}
.boutique-appt__field.has-error input,
.boutique-appt__field.has-error select { border-bottom-color: var(--ba-error); }

.boutique-appt__store-info {
	background: rgba(0,0,0,0.02);
	border-radius: 4px;
	padding: 20px 24px;
	margin: 8px 0 24px;
}
.boutique-appt__store-info > div { margin-bottom: 12px; }
.boutique-appt__store-info > div:last-child { margin-bottom: 0; }
.boutique-appt__store-info p {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ba-text);
}

.boutique-appt__required-note {
	font-size: 13px;
	color: var(--ba-text-muted);
	margin: 16px 0 8px;
}

.boutique-appt__consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--ba-text);
	margin-bottom: 12px;
}
.boutique-appt__consent a { color: var(--ba-text); text-decoration: underline; }
.boutique-appt__consent.has-error { color: var(--ba-error); }

/* Custom round checkbox — matches the Rolex reference (hollow circle by
   default, filled green with a white tick when checked). Applies both to
   the fallback .boutique-appt__consent block and to CF7-rendered checkboxes. */
.boutique-appt__consent input[type="checkbox"],
.boutique-appt .wpcf7-list-item input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	border: 1.5px solid var(--ba-text) !important;
	border-radius: 50% !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.boutique-appt__consent input[type="checkbox"]:checked,
.boutique-appt .wpcf7-list-item input[type="checkbox"]:checked {
	background: var(--ba-green) !important;
	border-color: var(--ba-green) !important;
}
.boutique-appt__consent input[type="checkbox"]:checked::after,
.boutique-appt .wpcf7-list-item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 45%;
	width: 10px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* CF7-rendered consent block (uses wpcf7 list-item structure) — align inline */
.boutique-appt .wpcf7-checkbox .wpcf7-list-item {
	display: block;
	margin: 0 0 12px;
}
.boutique-appt .wpcf7-checkbox .wpcf7-list-item label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	color: var(--ba-text);
}
.boutique-appt .wpcf7-checkbox .wpcf7-list-item-label a { color: var(--ba-green) !important; font-weight: 700; text-decoration: none; }

/* Hide CF7's bottom summary message — inline per-field errors already cover it. */
.boutique-appt .wpcf7-response-output { display: none !important; }

/* ---------- Buttons ---------- */
.boutique-appt__actions { text-align: center; margin-top: 32px; }

.boutique-appt .boutique-appt__btn {
	font-family: var(--ba-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	padding: 11px 30px !important;
	border-radius: 40px !important;
	border: 1px solid transparent !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
.boutique-appt .boutique-appt__btn--primary {
	background: var(--ba-green) !important;
	border-color: var(--ba-green) !important;
	color: #fff !important;
}
.boutique-appt .boutique-appt__btn--primary:hover { background: var(--ba-green-dark) !important; border-color: var(--ba-green-dark) !important; }
.boutique-appt__check-icon {
	width: 13px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
	vertical-align: middle;
}
.boutique-appt .boutique-appt__btn--primary:hover .boutique-appt__check-icon { fill: #000 !important; }
.boutique-appt__next-icon {
	width: 13px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
	vertical-align: middle;
}

/* P1 fix: CF7 submit (Confirm your request) was getting fz=14 fw=700 pad=0px 30px from
   theme defaults — force it into the same green-pill spec as our other primary CTAs. */
.boutique-appt .wpcf7-submit.boutique-appt__btn,
.boutique-appt input.wpcf7-submit {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	padding: 11px 30px !important;
	height: auto !important;
}
.boutique-appt .boutique-appt__btn:disabled,
.boutique-appt .boutique-appt__btn[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* ---------- Confirmation (step 5) ---------- */
/* Wrapper centres a narrow column; the white card holds only the details,
   the calendar link + buttons sit below it (Rolex reference layout). */
.boutique-appt__confirmation {
	max-width: 520px;
	margin: 32px auto;
	text-align: left;
}
.boutique-appt__confirmation-card {
	background: var(--ba-bg-card);
	border: none;
	border-radius: 0;
	padding: 40px 48px;
	text-align: left;
}
/* Stacked label-above-value rows, left-aligned — matches the Rolex reference. */
.boutique-appt__confirmation-row {
	display: block;
	padding: 0;
	margin-bottom: 24px;
}
.boutique-appt__confirmation-row:last-child { margin-bottom: 0; }
.boutique-appt__confirmation-label {
	display: block;
	color: var(--ba-brown);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
}
.boutique-appt__confirmation-value {
	display: block;
	color: var(--ba-text-muted);
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
}

.boutique-appt__confirmation-heading {
	margin: 0 0 28px;
	color: var(--ba-brown);
	font-family: var(--ba-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}

/* Secondary action links (e.g. add-to-calendar) — below the card, indented to
   line up with the card's inner content. */
.boutique-appt__confirmation-extras {
	margin-top: 24px;
	padding-left: 0;             /* SUPPORT-19123 #4: flush with the card's left edge (per reference) */
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
.boutique-appt .boutique-appt__confirmation-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ba-green) !important;
	font-size: 14px !important;  /* beats the `.boutique-appt a { font-size: inherit !important }` reset */
	font-weight: 500;
	text-decoration: none !important;
}
.boutique-appt .boutique-appt__confirmation-link:hover { text-decoration: underline !important; }
.boutique-appt__confirmation-link svg { flex-shrink: 0; width: 14px; height: 14px; }

.boutique-appt__confirmation-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
	margin-top: 40px;
}
.boutique-appt .boutique-appt__btn--text {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--ba-green) !important;
	text-decoration: none !important;
}
.boutique-appt .boutique-appt__btn--text:hover { text-decoration: underline !important; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	.boutique-appt { padding: 40px 16px 64px; }
	.boutique-appt__day-grid { grid-template-columns: repeat(3, 1fr); }
	.boutique-appt__row { flex-wrap: wrap; }

	/* Lukas feedback #5 — match the live Rolex mobile layout (agendaRolex CSS,
	   fetched 2026-06-16): step-1 cards stay 2-up on mobile (.agenda-service is
	   flex, never stacks) with a PORTRAIT image (aspect-ratio 781/1000 at base,
	   flipping to 3/2 landscape via the desktop rule above 600px). The caption
	   shrinks to suit the ~half-width card — consistent with Rolex's mobile-first
	   type scaling (sizes step up at >=768px). */
	.boutique-appt .boutique-appt__type-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
	.boutique-appt .boutique-appt__type-image { aspect-ratio: 781 / 1000 !important; }
	.boutique-appt .boutique-appt__type-tag { font-size: 14px !important; }
	.boutique-appt .boutique-appt__type-caption { font-size: 18px !important; line-height: 22px !important; max-width: 100% !important; }

	/* Lukas feedback #2 — time pills overflowed: 3×120px min-width + gaps > 375px
	   viewport and got clipped. Drop the min-width so the 3-col grid fits. */
	.boutique-appt .boutique-appt__time { min-width: 0 !important; }

	/* Lukas feedback #3 — Vorname/Nachname squashed on mobile. The real form is
	   CF7-rendered, so the row's flex container is the injected <p> (not the
	   .boutique-appt__row), which never wrapped. Let it wrap and stack the
	   Anrede/Vorname/Nachname fields full-width. */
	.boutique-appt .boutique-appt__row > p { flex-wrap: wrap !important; }
	.boutique-appt .boutique-appt__row--name > p > .boutique-appt__field,
	.boutique-appt .boutique-appt__row--name > p > .boutique-appt__field--title,
	.boutique-appt .boutique-appt__row--name .boutique-appt__field,
	.boutique-appt .boutique-appt__row--name .boutique-appt__field--title {
		flex: 1 1 100% !important;
	}
}