/**
 * Reforma Booking Page — layout + Reforma Forms overrides.
 *
 * Targets:
 *   .reforma-booking-hero        — hero section
 *   .reforma-booking-layout      — two-column wrapper (form + sidebar)
 *   .reforma-booking-form-inner  — left column (form)
 *   .reforma-booking-sidebar     — right column (order summary)
 *   .reforma-booking-form-wrap   — injected via Reforma Forms cssClassName setting
 *
 * Figma reference: book-appointement (Figma ID 50:872).
 * Palette: brand-gold #a07c42, forest #29514c, peach #fff0e6, ink-plum #3e273b, card-heading #402800.
 */

/* =========================================================
   Page-level two-column layout
   ========================================================= */
.reforma-booking-layout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 48px;
	align-items: start;
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 32px 80px;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.reforma-booking-layout {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 32px 20px 64px;
	}
}

@media (max-width: 600px) {
	.reforma-booking-layout {
		padding: 24px 16px 48px;
	}
}

/* =========================================================
   Hero section
   ========================================================= */
.reforma-booking-hero {
	background-color: var(--wp--preset--color--page, #f9f5f0);
	padding: 48px 32px 32px !important;
}

.reforma-booking-hero h1 {
	font-family: "Playfair Display", Georgia, serif;
	color: #402800;
	margin-bottom: 12px;
}

.reforma-booking-breadcrumb {
	margin-bottom: 20px;
}

/* =========================================================
   Reforma Forms field overrides — match Figma input style
   rounded pill inputs, muted-plum labels & placeholders
   ========================================================= */
.reforma-booking-form-wrap .ff-el-group,
.reforma-booking-form-inner .ff-el-group {
	margin-bottom: 24px;
}

.reforma-booking-form-wrap .ff-el-form-control,
.reforma-booking-form-inner .ff-el-form-control {
	width: 100%;
	height: 56px;
	padding: 0 20px;
	border: 1px solid rgba(156, 117, 53, 0.18);
	border-radius: 32px;
	background: #ffffff;
	color: #3e273b;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.reforma-booking-form-wrap .ff-el-form-control:focus,
.reforma-booking-form-inner .ff-el-form-control:focus {
	outline: none;
	border-color: #a07c42;
	box-shadow: 0 0 0 3px rgba(160, 124, 66, 0.12);
}

.reforma-booking-form-wrap .ff-el-form-control::placeholder,
.reforma-booking-form-inner .ff-el-form-control::placeholder {
	color: rgba(62, 39, 59, 0.45);
}

/* Textarea */
.reforma-booking-form-wrap textarea.ff-el-form-control,
.reforma-booking-form-inner textarea.ff-el-form-control {
	height: auto;
	min-height: 120px;
	padding: 16px 20px;
	border-radius: 18px;
	resize: vertical;
}

/* Select */
.reforma-booking-form-wrap select.ff-el-form-control,
.reforma-booking-form-inner select.ff-el-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 44px;
	cursor: pointer;
}

/* Date input */
.reforma-booking-form-wrap input[type="date"].ff-el-form-control,
.reforma-booking-form-inner input[type="date"].ff-el-form-control {
	cursor: pointer;
}

/* Labels */
.reforma-booking-form-wrap .ff-el-input--label label,
.reforma-booking-form-inner .ff-el-input--label label {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	color: #402800;
	margin-bottom: 8px;
	display: block;
}

/* Two-column row (name fields, date/time) */
.reforma-booking-form-wrap .ff-el-section-title,
.reforma-booking-form-wrap .ff-t-container .ff-t-cell,
.reforma-booking-form-inner .ff-t-container .ff-t-cell {
	padding: 0 8px;
	box-sizing: border-box;
}

.reforma-booking-form-wrap .ff-t-container,
.reforma-booking-form-inner .ff-t-container {
	display: flex;
	gap: 16px;
}

.reforma-booking-form-wrap .ff-t-container .ff-t-cell,
.reforma-booking-form-inner .ff-t-container .ff-t-cell {
	flex: 1;
	padding: 0;
}

@media (max-width: 600px) {
	.reforma-booking-form-wrap .ff-t-container,
	.reforma-booking-form-inner .ff-t-container {
		flex-direction: column;
		gap: 0;
	}
}

/* Error messages */
.reforma-booking-form-wrap .error,
.reforma-booking-form-inner .error {
	color: #c0392b;
	font-size: 13px;
	margin-top: 4px;
}

/* Submit button */
.reforma-booking-form-wrap .ff-btn-submit,
.reforma-booking-form-inner .ff-btn-submit,
.reforma-booking-submit-btn {
	display: block;
	width: 100%;
	height: 60px;
	background: linear-gradient(90deg, #9c7839 0%, #825a14 100%);
	color: #ffffff !important;
	border: none;
	border-radius: 0 30px 0 30px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.reforma-booking-form-wrap .ff-btn-submit:hover,
.reforma-booking-form-inner .ff-btn-submit:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Success message */
.reforma-booking-form-wrap .ff_submission_msg,
.reforma-booking-form-inner .ff_submission_msg {
	padding: 20px 24px;
	background: #f0faf5;
	border: 1px solid #29514c;
	border-radius: 12px;
	color: #29514c;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 16px;
}

/* =========================================================
   Order Summary sidebar card
   ========================================================= */
.reforma-order-summary-card {
	background: #ffffff;
	border: 1px solid rgba(156, 117, 53, 0.15);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(62, 39, 59, 0.06);
	position: sticky;
	top: 120px;
}

.reforma-summary-header {
	background: #29514c;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 24px;
	text-align: center;
}

.reforma-summary-body {
	padding: 24px;
}

.reforma-summary-question {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: rgba(62, 39, 59, 0.6);
	margin-bottom: 16px;
	font-style: italic;
}

.reforma-plan-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.reforma-plan-thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
}

.reforma-plan-details {
	flex: 1;
	min-width: 0;
}

.reforma-plan-name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 14px;
	font-weight: 700;
	color: #402800;
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.reforma-plan-type {
	font-size: 12px;
	color: rgba(62, 39, 59, 0.5);
	margin: 0;
	font-family: "Poppins", sans-serif;
}

.reforma-plan-pricing {
	text-align: right;
	flex-shrink: 0;
}

.reforma-plan-was {
	font-size: 12px;
	color: rgba(62, 39, 59, 0.45);
	text-decoration: line-through;
	margin: 0;
	font-family: "Poppins", sans-serif;
}

.reforma-plan-now {
	font-size: 20px;
	font-weight: 700;
	color: #a07c42;
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
}

.reforma-plan-per {
	font-size: 11px;
	color: rgba(62, 39, 59, 0.5);
	margin: 0;
	font-family: "Poppins", sans-serif;
}

.reforma-benefits-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.reforma-benefit-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: #3e273b;
	border-bottom: 1px solid rgba(156, 117, 53, 0.08);
}

.reforma-benefit-item:last-child {
	border-bottom: none;
}

.reforma-benefit-emoji,
.reforma-benefit-check {
	font-size: 16px;
	width: 24px;
	text-align: center;
	flex-shrink: 0;
}

.reforma-benefit-check {
	color: #29514c;
	font-weight: 700;
}

.reforma-summary-divider {
	border: none;
	border-top: 1px solid rgba(156, 117, 53, 0.15);
	margin: 16px 0;
}

.reforma-summary-trust {
	background: #29514c;
	border-radius: 12px;
	padding: 16px 20px;
	text-align: center;
}

.reforma-summary-trust__stat {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px;
}

.reforma-summary-trust__label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	font-family: "Poppins", sans-serif;
	margin: 0 0 4px;
}

.reforma-summary-trust__meta {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	font-family: "Poppins", sans-serif;
	margin: 0;
}

/* =========================================================
   Mobile: sidebar moves below form
   ========================================================= */
@media (max-width: 1024px) {
	.reforma-order-summary-card {
		position: static;
	}
}

@media (max-width: 600px) {
	.reforma-order-summary-card {
		border-radius: 16px;
	}

	.reforma-summary-body {
		padding: 16px;
	}

	.reforma-booking-form-wrap .ff-el-form-control,
	.reforma-booking-form-inner .ff-el-form-control {
		height: 52px;
	}
}

/* =========================================================
   v2.10.286 — Consultation booking page (per-doctor FluentBooking)
   ========================================================= */
.reforma-consult-page{max-width:1120px;margin:0 auto;padding:48px 24px 88px;}
.reforma-consult-head{text-align:center;margin-bottom:34px;}
.reforma-consult-crumbs{display:flex;gap:8px;justify-content:center;align-items:center;font-size:14px;color:var(--wp--preset--color--ink-soft,#5b5b5b);margin-bottom:18px;flex-wrap:wrap;}
.reforma-consult-crumbs a{color:inherit;text-decoration:none;}
.reforma-consult-crumbs a:hover{color:var(--wp--preset--color--brand-gold,#a07c42);}
.reforma-consult-crumbs strong{color:var(--wp--preset--color--brand-gold,#a07c42);font-weight:600;}
.reforma-consult-title{font-family:"Playfair Display",Georgia,serif;color:#402800;font-size:clamp(28px,1.4vw+20px,42px);line-height:1.12;margin:0 0 10px;}
.reforma-consult-sub{color:var(--wp--preset--color--ink-soft,#5b5b5b);max-width:580px;margin:0 auto 12px;line-height:1.6;}
.reforma-consult-allspecialists{display:inline-block;color:var(--wp--preset--color--brand-gold,#a07c42);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;}
.reforma-consult-widget{background:#fff;border:1px solid oklch(90% 0.01 90 / 0.7);border-radius:22px;padding:22px;box-shadow:0 30px 60px -34px oklch(40% 0.05 70 / 0.4);max-width:980px;margin:0 auto;}
.reforma-consult-widget .fcal_cal_wrap,.reforma-consult-widget .reforma_booking_app{margin:0 auto;width:100%;}
.reforma-consult-empty{text-align:center;color:var(--wp--preset--color--ink-soft,#5b5b5b);padding:40px 16px;}
@media (max-width:600px){.reforma-consult-page{padding:32px 14px 56px;}.reforma-consult-widget{padding:14px;border-radius:18px;}}

/* =========================================================
   v2.10.297 — booking figma-parity 2026-06-07
   Source-verified against Figma node 50:872 (book-appointement)
   Scope: .reforma-booking-hero only (page-scoped, no cross-page regression)
   ========================================================= */

/* (1) Hero H1 -> serif display family.
   Root cause: pattern-decorations.css L8756 ".wp-block-heading{font-family:body !important}"
   wins by !important over the plain rule above. Override page-scoped + !important.
   Figma: all heading text uses the serif display family (Fraunces/TRY Vesterbro). */
.reforma-booking-hero h1,
.reforma-booking-hero h1.wp-block-heading {
	font-family: var(--wp--preset--font-family--display), "Playfair Display", Georgia, serif !important;
}

/* (2) Breadcrumb trail -> faint gold-tint pill, serif text (Figma 50:966).
   Figma pill bg rgba(156,120,58,0.12), radius 999px; link text muted taupe
   rgb(164,152,130); current crumb dark gold-ink rgb(64,40,0) bold; serif family. */
.reforma-booking-hero .reforma-breadcrumb-trail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(156, 120, 58, 0.12);
	border-radius: 999px;
	padding: 9px 18px;
	margin: 0 0 0 var(--wp--preset--spacing--40);
	opacity: 1;
	font-family: var(--wp--preset--font-family--display), "Playfair Display", Georgia, serif;
	font-size: 14px;
	line-height: 1;
}
.reforma-booking-hero .reforma-breadcrumb-trail .reforma-bc-link {
	color: rgb(164, 152, 130);
	font-weight: 600;
	text-decoration: none;
	font-family: inherit;
}
.reforma-booking-hero .reforma-breadcrumb-trail .reforma-bc-link:hover {
	color: rgb(64, 40, 0);
}
.reforma-booking-hero .reforma-breadcrumb-trail .reforma-bc-sep {
	color: rgba(64, 40, 0, 0.45);
	font-weight: 400;
}
.reforma-booking-hero .reforma-breadcrumb-trail .reforma-bc-current {
	color: rgb(64, 40, 0);
	font-weight: 700;
}

/* (3) Back button "‹ Back" was gold text on gold fill (invisible blob).
   Make the is-style-outline variation real: transparent bg + 1px gold border + gold text.
   (Figma's redesign has no back control; keeping the live affordance but visible.) */
.reforma-booking-hero .reforma-back-btn .wp-block-button__link,
.reforma-booking-hero .reforma-back-btn.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--brand-gold, #a07c42) !important;
	border: 1px solid var(--wp--preset--color--brand-gold, #a07c42) !important;
	font-family: var(--wp--preset--font-family--display), "Playfair Display", Georgia, serif;
	font-weight: 600;
}
.reforma-booking-hero .reforma-back-btn .wp-block-button__link:hover,
.reforma-booking-hero .reforma-back-btn.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(156, 120, 58, 0.12) !important;
	color: rgb(64, 40, 0) !important;
}

/* (4) Submit button label 17px -> 20px (Figma "Confirm order" Playfair 700 20px).
   Gradient + asymmetric radius already match. */
.reforma-booking-form-wrap .ff-btn-submit,
.reforma-booking-form-inner .ff-btn-submit,
.reforma-booking-submit-btn {
	font-size: 20px;
}

/* (5) Form labels 15px -> 16px (Figma labels 16px/700 serif). */
.reforma-booking-form-wrap .ff-el-input--label label,
.reforma-booking-form-inner .ff-el-input--label label {
	font-size: 16px;
}

/* =========================================================
   v2.10.309 — Booking Figma "Treatment Details" sidebar + 2-col FAQ
   2026-06-07
   Source-verified against Figma node 50:872 (book-appointement):
     - sidebar  node 64:823 (Group 147 → orange "Treatment Details" card)
     - FAQ band node 50:936 ("Need Answers? We've Got You Covered!")
   Scope: TREATMENT sidebar (.reforma-order-summary-card--treatment) +
          .reforma-booking-faq only. Product Order Summary untouched.
   Later block — these rules win over the base sidebar styling above.
   ========================================================= */

/* --- Treatment Details card: gold stroke + orange header (Figma) --- */
.reforma-order-summary-card--treatment {
	border: 1px solid rgb(156, 120, 58);
}

.reforma-order-summary-card--treatment .reforma-summary-header {
	background: rgb(242, 84, 36);
	color: #ffffff;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 500;
	text-align: left;
	padding: 14px 24px;
	border-radius: 0 24px 0 0;
}

/* Detail image — full-bleed band under the header (Figma ~420×175). */
.reforma-order-summary-card--treatment .reforma-treatment-media {
	line-height: 0;
}

.reforma-order-summary-card--treatment .reforma-treatment-image {
	display: block;
	width: 100%;
	height: 175px;
	object-fit: cover;
}

.reforma-order-summary-card--treatment .reforma-summary-body {
	padding: 20px 24px 24px;
}

/* Eyebrow + name (Figma serif, rgb(64,40,0)). */
.reforma-order-summary-card--treatment .reforma-treatment-eyebrow {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 15px;
	font-weight: 400;
	color: #402800;
	margin: 0 0 2px;
	text-transform: capitalize;
}

.reforma-order-summary-card--treatment .reforma-treatment-name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	color: #402800;
	margin: 0 0 12px;
	line-height: 1.2;
}

/* Chip row — short clinic-relevant tags with `|` dividers (Figma layout). */
.reforma-order-summary-card--treatment .reforma-treatment-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
}

.reforma-order-summary-card--treatment .reforma-treatment-chip {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	color: #3e273b;
	white-space: nowrap;
}

.reforma-order-summary-card--treatment .reforma-treatment-chip-sep {
	color: rgba(156, 120, 58, 0.55);
	font-size: 13px;
	line-height: 1;
}

/* =========================================================
   FAQ band — Figma 50:936 (2 columns: intro + accordion)
   ========================================================= */
.reforma-booking-faq {
	max-width: 1320px;
	margin: 0 auto;
	padding: 8px 32px 88px;
	box-sizing: border-box;
}

.reforma-booking-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
	gap: 64px;
	align-items: start;
}

.reforma-booking-faq__heading {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: clamp(34px, 3vw + 10px, 52px);
	line-height: 1.12;
	color: #402800;
	margin: 0 0 18px;
}

.reforma-booking-faq__lede {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(62, 39, 59, 0.72);
	margin: 0 0 24px;
	max-width: 460px;
}

/* "Contact us" gold pill with asymmetric corner + arrow (site CTA signature). */
.reforma-booking-faq__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #a07c42;
	color: #ffffff;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	padding: 13px 26px;
	border-radius: 999px 999px 999px 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.reforma-booking-faq__cta:hover {
	background: #8a6a37;
	transform: translateY(-1px);
}

.reforma-booking-faq__cta-arrow {
	font-size: 18px;
	line-height: 1;
}

/* Accordion column. */
.reforma-booking-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.reforma-booking-faq__item {
	background: #ffffff;
	border: 1px solid rgba(156, 120, 58, 0.18);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.reforma-booking-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	padding: 22px 26px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	color: #402800;
}

.reforma-booking-faq__q::-webkit-details-marker { display: none; }

/* +/- icon built with CSS so no glyph dependency. */
.reforma-booking-faq__icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}
.reforma-booking-faq__icon::before,
.reforma-booking-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: currentColor;
}
.reforma-booking-faq__icon::before { width: 14px; height: 2px; }
.reforma-booking-faq__icon::after  { width: 2px; height: 14px; transition: opacity 0.2s ease; }

.reforma-booking-faq__a {
	padding: 0 26px 22px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(62, 39, 59, 0.78);
}
.reforma-booking-faq__a p { margin: 0; }

/* Open state — first/active item is solid green with white text (Figma). */
.reforma-booking-faq__item[open] {
	background: rgb(41, 81, 76);
	border-color: rgb(41, 81, 76);
}
.reforma-booking-faq__item[open] .reforma-booking-faq__q { color: #ffffff; }
.reforma-booking-faq__item[open] .reforma-booking-faq__a { color: rgba(255, 255, 255, 0.85); }
.reforma-booking-faq__item[open] .reforma-booking-faq__icon::after { opacity: 0; } /* + -> - */

/* --- Responsive --- */
@media (max-width: 1024px) {
	.reforma-booking-faq__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.reforma-booking-faq {
		padding: 8px 20px 64px;
	}
}

@media (max-width: 600px) {
	.reforma-booking-faq {
		padding: 8px 16px 48px;
	}
	.reforma-booking-faq__q {
		font-size: 16px;
		padding: 18px 18px;
	}
	.reforma-booking-faq__a {
		padding: 0 18px 18px;
	}
	.reforma-order-summary-card--treatment .reforma-treatment-image {
		height: 200px;
	}
}

/* v2.10.310 — booking treatment card + faq figma refinements 2026-06-07 */
.reforma-order-summary-card--treatment{border-radius:24px !important}
.reforma-order-summary-card--treatment .reforma-summary-header{text-align:center !important}
.reforma-booking-faq__heading{font-size:48px !important}

/* v2.10.311 — card radius higher-specificity + readtime pill color 2026-06-07 */
.reforma-booking-sidebar-col .reforma-order-summary-card--treatment{border-radius:24px !important}

/* v2.10.318 — booking page Figma-parity: white bg + input refinements 2026-06-07
   Figma node 50:872 root fill = SOLID #FFFFFF (zero bluish fills in the node).
   The light-blue oklch(97.7% 0.017 240) on .reforma-booking-hero + .reforma-booking-layout
   was set by an earlier "Figma Rectangle 12" pass in pattern-decorations.css:10663-10666;
   the current authoritative audit (scope/6-booking-page.md §1) confirms Figma is pure white.
   This block loads after pattern-decorations.css (dep order) so equal-specificity + !important wins.
   Page-scoped only: does NOT touch the global --wp--preset--color--page preset, home, header, or footer. */
.reforma-booking-hero,
.reforma-booking-layout {
	background-color: #ffffff !important;
}

/* Input refinements (G2 height 52px, G3 placeholder #A08298) — low-risk, fields unchanged */
.reforma-booking-form-wrap .ff-el-form-control,
.reforma-booking-form-inner .ff-el-form-control {
	height: 52px;
}
.reforma-booking-form-wrap textarea.ff-el-form-control,
.reforma-booking-form-inner textarea.ff-el-form-control {
	height: auto;
}
.reforma-booking-form-wrap .ff-el-form-control::placeholder,
.reforma-booking-form-inner .ff-el-form-control::placeholder {
	color: #a08298;
}

/* =========================================================
   Sectionised booking form — Figma 50:872 "book-appointement"
   (sectionise layout). Scoped to .reforma-booking-form--sections
   so it only restyles the DOM-restructured card layout.
   Card: "Billing Address" legend (sans 16/700 #3e273b) + field grid +
   soft-shadow inputs (no hard border) + gold "Confirm order" button.
   ========================================================= */

/* Card shell */
.reforma-booking-form--sections .reforma-bform-card {
	background: transparent;
	margin: 0 0 28px;
}
.reforma-booking-form--sections .reforma-bform-card-header {
	margin-bottom: 20px;
}
.reforma-booking-form--sections .reforma-bform-card-legend {
	margin: 0;
	font-family: "Poppins", system-ui, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: #3e273b;
	letter-spacing: 0;
}

/* Field grid inside the card body — keep the native two-column rows,
   stack single fields full-width with consistent 24px rhythm. */
.reforma-booking-form--sections .reforma-bform-card-body .ff-el-group {
	margin-bottom: 24px;
}
.reforma-booking-form--sections .reforma-bform-card-body > .ff-el-group:last-child,
.reforma-booking-form--sections .reforma-bform-card-body > .ff-t-container:last-child {
	margin-bottom: 0;
}

/* Two-column rows (First/Last, State/City) — 12px gap per Figma 04-full-name */
.reforma-booking-form--sections .ff-t-container.ff-column-container,
.reforma-booking-form--sections .reforma-field-row {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}
.reforma-booking-form--sections .ff-t-container.ff-column-container .ff-t-cell,
.reforma-booking-form--sections .reforma-field-row .ff-t-cell {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}
.reforma-booking-form--sections .ff-t-container .ff-el-group {
	margin-bottom: 0;
}

/* Labels — sans-serif bold #4f404b, above input, 16px Figma left pad (04-full-name) */
.reforma-booking-form--sections .ff-el-input--label label {
	font-family: "Poppins", system-ui, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.36;
	color: #4f404b;
	margin: 0 0 12px;
	padding-left: 16px;
	display: block;
}

/* Inputs — white bg, 32px radius, soft shadow (Figma box-shadow 0 0 8px #00000014),
   NO hard border. Height 52px, 16px padding. */
.reforma-booking-form--sections .ff-el-form-control {
	width: 100%;
	height: 52px;
	padding: 16px;
	border: 1px solid transparent;
	border-radius: 32px;
	background: #ffffff;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
	color: #3e273b;
	font-family: "Poppins", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.reforma-booking-form--sections .ff-el-form-control::placeholder {
	color: #a08298;
	font-weight: 400;
	opacity: 1;
}
.reforma-booking-form--sections .ff-el-form-control:focus {
	outline: none;
	border-color: #a07c42;
	box-shadow: 0 0 0 3px rgba(160, 124, 66, 0.14), 0 0 8px 0 rgba(0, 0, 0, 0.08);
}

/* Textarea (notes) — taller, same soft-shadow language */
.reforma-booking-form--sections textarea.ff-el-form-control {
	height: auto;
	min-height: 110px;
	border-radius: 20px;
	resize: vertical;
}

/* Select (preferred time) — gold chevron, soft-shadow base */
.reforma-booking-form--sections select.ff-el-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a07c42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}

/* Honeypot — hidden but present (spam trap) */
.reforma-booking-form--sections .ff-hpsf-container {
	position: absolute !important;
	left: -9999px !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* "Confirm order →" button — gold gradient, asymmetric radius 0 30 0 30,
   Playfair 20/700 white, height 60 (Figma 09-frame-238914 / 52:1055). */
.reforma-booking-form--sections .reforma-confirm-btn,
.reforma-booking-form--sections .ff-btn-submit {
	display: block;
	width: 100%;
	height: 60px;
	margin-top: 4px;
	background: linear-gradient(90deg, #9c7839 0%, #825a14 100%);
	color: #ffffff !important;
	border: none;
	border-radius: 0 30px 0 30px;
	font-family: "Playfair Display", "Fraunces", Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
}
.reforma-booking-form--sections .reforma-submit-wrap,
.reforma-booking-form--sections .ff_submit_btn_wrapper {
	text-align: left;
	margin-bottom: 0;
}
.reforma-booking-form--sections .reforma-confirm-btn:hover,
.reforma-booking-form--sections .ff-btn-submit:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

/* Mobile — two-column rows stack */
@media (max-width: 600px) {
	.reforma-booking-form--sections .ff-t-container.ff-column-container,
	.reforma-booking-form--sections .reforma-field-row {
		flex-direction: column;
		gap: 0;
	}
	.reforma-booking-form--sections .ff-t-container .ff-el-group {
		margin-bottom: 24px;
	}
}

/* v2.10.332 — booking summary sidebar STICKY (both /booking/ + /treatment-booking/) 2026-06-08 */
@media (min-width:1024px){
  .reforma-booking-layout .reforma-booking-sidebar-col{position:sticky !important;top:104px !important;align-self:flex-start !important;height:-moz-fit-content !important;height:fit-content !important;}
}