/*
 * Free consultation form ([drift_consultation]).
 *
 * Two equal-height boxes side by side: the calendar, times and chosen call on
 * the left; "Your details" (a two-column grid of fields) and the button on
 * the right. Both boxes use the site's calendar frame (.db-wc-booking-fields
 * + style classes). On narrow screens everything stacks in one column.
 *
 * Themes style bare elements (paragraph padding, input colours, label case)
 * very differently, so the form uses plain <div>s for structure and gives its
 * fields one consistent look with enough specificity to hold against theme
 * element rules.
 */

.db-consultation {
	--db-consultation-accent: var(--db-accent, #0f766e);
	--db-consultation-input-radius: 8px;
	--db-consultation-gap: 14px;
	width: 100%;
	box-sizing: border-box;
	margin: 32px 0 64px;
	/* The two boxes sit side by side only when the area is wide enough (see below). */
	container: db-consultation / inline-size;
}

/* First thing in its block (e.g. the page builder text block): the block's own spacing applies. */
.db-consultation:first-child {
	margin-top: 0;
}

/* Themes pad paragraphs (e.g. "#content p { padding: .7em }"); never inside the form or its cards. */
.db-consultation p {
	padding: 0 !important;
}

.db-consultation-form {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Text and ticked points above the calendar (Free Consultation tab).
 * Shown while booking only.
 * ------------------------------------------------------------------------- */

.db-consultation-intro {
	margin: 0 0 32px;
	text-align: center;
}

.db-consultation-intro[hidden] {
	display: none;
}

.db-consultation-intro-text {
	max-width: 760px;
	margin: 0 auto 18px;
}

.db-consultation-intro-text p {
	max-width: 720px;
	margin: 0 auto 12px !important;
}

.db-consultation-intro-text p:last-child {
	margin-bottom: 0 !important;
}

.db-consultation-points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-consultation-points li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-consultation-points li::before {
	content: '\2713';
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--db-consultation-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Two equal-height boxes.
 * ------------------------------------------------------------------------- */

.db-consultation-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px;
	align-items: stretch;
}

.db-consultation-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.db-consultation-col > .db-wc-booking-fields {
	flex: 1 1 auto;
	margin: 0;
}

/* Left box: calendar card, times card and the chosen call stack to the full width. */
.db-consultation-col-calendar > .db-wc-booking-fields,
.db-consultation-col-calendar .db-frontend-booking-shell,
.db-consultation-col-calendar .db-frontend-booking-stage.is-visible {
	display: flex;
	flex-direction: column;
	/* Calendar styles set grid alignment here; in a column it would shrink the cards sideways. */
	align-items: stretch;
	justify-content: flex-start;
}

.db-consultation-col-calendar .db-frontend-booking-shell,
.db-consultation-col-calendar .db-frontend-booking-stage.is-visible {
	flex: 1 1 auto;
}

.db-consultation-col-calendar .db-frontend-booking-stage.is-visible > * {
	width: auto;
	max-width: none;
	align-self: stretch;
}

/* The times card takes up any small height difference between the two boxes. */
.db-consultation-col-calendar .db-availability-panel:not([hidden]) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.db-consultation-col-calendar .db-availability-panel-card {
	flex: 1 1 auto;
	align-content: start;
}

/* The chosen call (a prompt until a time is picked), styled as a card like the times card. */
.db-consultation-selected.db-availability-panel-card {
	display: block;
	flex: 0 0 auto;
	margin-top: 0.6rem;
	padding: 12px 14px;
	border-left: 3px solid var(--db-consultation-accent);
	color: var(--db-ink, #173233);
	font-size: 15px;
	line-height: 1.45;
}

.db-consultation-selected-label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--db-muted, #5d7273);
}

.db-consultation-selected-value {
	font-weight: 600;
}

/* Calendar styles colour every card border; the chosen call keeps its accent edge. */
.db-consultation .db-wc-booking-fields .db-consultation-selected.db-availability-panel-card {
	border-left: 3px solid var(--db-consultation-accent);
}

.db-consultation .db-wc-booking-fields .db-consultation-selected.db-availability-panel-card.is-empty {
	border-left-color: var(--db-border-strong, #d2d8d8);
}

.db-consultation-selected.is-empty .db-consultation-selected-value {
	font-weight: 400;
	color: var(--db-muted, #5d7273);
}

/* Right box: details card fills the box, button at the bottom. */
.db-consultation-details > .db-availability-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.db-consultation-details .db-availability-panel-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
}

.db-consultation-details .db-availability-panel-title {
	margin: 0 0 12px;
}

/* Moving a call: the right-hand card holds only a summary and the button, so it keeps its natural height. */
.db-consultation-col-details.is-reschedule > .db-wc-booking-fields {
	flex: 0 0 auto;
}

.db-consultation-col-details.is-reschedule .db-consultation-actions {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Fields: one two-column grid, Add-On questions included.
 * ------------------------------------------------------------------------- */

.db-consultation-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--db-consultation-gap) 12px;
	margin: 0 0 18px;
}

/* The questions' own wrappers drop out so each question is a grid cell. */
.db-consultation-fields .db-product-addons,
.db-consultation-fields .db-product-addons-groups,
.db-consultation-fields .db-product-addons-group,
.db-consultation-fields .db-product-addons-fields {
	display: contents;
}

.db-consultation-field,
.db-consultation-fields .db-product-addon-field {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Long answers and choice lists take the full width. */
.db-consultation-fields .db-product-addon-field.type-long_text,
.db-consultation-fields .db-product-addon-field.type-checkbox,
.db-consultation-fields .db-product-addon-field.type-radio,
.db-consultation-fields .db-product-addon-field.type-heading,
.db-consultation-fields .db-product-addon-field.type-file,
.db-consultation-fields .db-product-addons-group-title,
.db-consultation-fields .db-product-addons-group-description {
	grid-column: 1 / -1;
}

/* Side-by-side boxes line up even when one label wraps onto two lines:
   each label sits directly above its own box, at the bottom of the row. */
.db-consultation-field,
.db-consultation-fields .db-product-addon-field {
	justify-content: flex-end;
}

/* A narrow details box (e.g. a slim content column) gets one field per row. */
@container (max-width: 440px) {
	.db-consultation-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-consultation-fields > *,
	.db-consultation-fields .db-product-addon-field {
		grid-column: 1 / -1;
	}
}

/* Phone on its own (no questions): full width rather than half a row. */
.db-consultation-fields > .db-consultation-field:nth-child(3):last-child {
	grid-column: 1 / -1;
}

.db-consultation-field label,
.db-consultation-fields .db-consultation-question-label,
.db-consultation-fields .db-product-addon-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
}

.db-consultation-fields .db-product-addon-description {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--db-muted, #5d7273);
}

.db-consultation-required {
	color: var(--db-consultation-accent);
}

.db-consultation-optional {
	font-weight: 400;
	color: var(--db-muted, #5d7273);
}

/* One input look for every field, whatever the theme does to bare inputs. */
.db-consultation .db-consultation-details input[type="text"],
.db-consultation .db-consultation-details input[type="email"],
.db-consultation .db-consultation-details input[type="tel"],
.db-consultation .db-consultation-details input[type="number"],
.db-consultation .db-consultation-details input[type="date"],
.db-consultation .db-consultation-details select,
.db-consultation .db-consultation-details textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--db-border-strong, #d2d8d8);
	border-radius: var(--db-consultation-input-radius);
	background: #fff;
	box-shadow: none;
	color: var(--db-ink, #173233);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.db-consultation .db-consultation-details textarea {
	min-height: 110px;
	resize: vertical;
}

.db-consultation .db-consultation-details input:focus,
.db-consultation .db-consultation-details select:focus,
.db-consultation .db-consultation-details textarea:focus {
	border-color: var(--db-consultation-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--db-consultation-accent);
}

.db-consultation-details.db-calendar-corners-square {
	--db-consultation-input-radius: 0;
}

/* A free call never shows add-on prices or totals. */
.db-consultation .db-product-addon-label-price,
.db-consultation .db-product-addon-choice-price,
.db-consultation .db-product-addon-price-control,
.db-consultation [data-db-addons-summary] {
	display: none !important;
}

/* Off-screen spam trap; real visitors never see it. */
.db-consultation-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
 * Button, note, errors.
 * ------------------------------------------------------------------------- */

.db-consultation-actions {
	margin-top: auto;
}

.db-consultation-actions .db-consultation-submit {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
}

/*
 * Default button look for themes that do not style buttons outside the shop.
 * Zero-specificity (:where) so the theme's own button colour always wins.
 */
:where(.db-consultation) :where(.db-consultation-submit, .db-consultation-buttons .button) {
	padding: 12px 22px;
	border: 0;
	border-radius: 0;
	background: var(--db-accent, #0f766e);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

/* Until a time is picked: same colour (as the product pages show it), just not clickable. */
.db-consultation .db-consultation-submit[disabled] {
	opacity: 1;
	cursor: not-allowed;
}

.db-consultation-note {
	margin: 10px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--db-muted, #5d7273);
}

.db-consultation-error {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--db-danger-soft, #fde9df);
	color: var(--db-danger, #c2410c);
	font-size: 14px;
	line-height: 1.5;
}

.db-consultation-error[hidden] {
	display: none;
}

.db-consultation-current {
	margin: 0 0 10px;
	font-size: 1.05rem;
	line-height: 1.4;
	font-weight: 600;
}

.db-consultation-current-label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--db-muted, #5d7273);
}

.db-consultation-help {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--db-muted, #5d7273);
}

/* ---------------------------------------------------------------------------
 * Confirmation, change/cancel and notice cards: one centred card.
 * ------------------------------------------------------------------------- */

.db-consultation-manage,
.db-consultation-result {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.db-consultation-card {
	margin: 0;
}

.db-consultation-card .db-availability-panel {
	margin: 0;
}

.db-consultation-card .db-availability-panel-card {
	display: block;
	padding: 30px 28px;
}

.db-consultation-card .db-availability-panel-title {
	margin: 0 0 6px;
}

/* Inside the cards everything reads left-aligned, notes included. */
.db-consultation-card .db-consultation-note {
	text-align: left;
}

.db-consultation-card p {
	margin: 0 0 10px !important;
	font-size: 15px;
	line-height: 1.6;
}

.db-consultation-card p.db-consultation-when,
.db-consultation-when {
	margin: 4px 0 0 !important;
	font-size: 21px;
	line-height: 1.35;
	color: var(--db-ink, #173233);
}

.db-consultation-nowrap {
	white-space: nowrap;
}

.db-consultation-card p.db-consultation-meta {
	margin: 6px 0 0 !important;
	color: var(--db-muted, #5d7273);
}

.db-consultation-card p.db-consultation-how {
	margin: 18px 0 0 !important;
}

/* The joining link: a quiet panel with a Copy link button. */
.db-consultation-link {
	margin: 22px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--db-consultation-accent);
	background: #f4f6f6;
}

.db-consultation-link-label,
.db-consultation-next-title {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--db-muted, #5d7273);
}

.db-consultation-link-line {
	display: flex;
	align-items: center;
	gap: 14px;
}

.db-consultation-link-url {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	color: var(--db-ink, #173233);
	user-select: all;
	cursor: text;
}

.db-consultation-card p.db-consultation-link-pending {
	margin: 0 !important;
	font-size: 14px;
}

.db-consultation .button.db-consultation-copy {
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 16px !important;
	font-size: 11px !important;
	letter-spacing: 0.14em;
	line-height: 1.2 !important;
	white-space: nowrap;
}

/* What happens next. */
.db-consultation-next-title {
	margin: 24px 0 10px;
}

.db-consultation-next {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: db-consultation-step;
}

.db-consultation-next li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 36px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--db-ink, #173233);
	list-style: none;
	counter-increment: db-consultation-step;
}

.db-consultation-next li::before {
	content: counter(db-consultation-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--db-consultation-accent);
	color: var(--db-consultation-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

.db-consultation-card .db-consultation-note {
	margin-top: 14px;
	font-size: 14px;
}

.db-consultation-when.is-cancelled {
	text-decoration: line-through;
	color: var(--db-muted, #5d7273);
}

.db-consultation-tick {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 42px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var(--db-consultation-accent);
}

.db-consultation-tick::after {
	content: '';
	position: absolute;
	left: 15px;
	top: 9px;
	width: 9px;
	height: 18px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.db-consultation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.db-consultation-buttons .button {
	margin: 0;
	text-align: center;
}

/* The site's main button colour stays on the main action (Join, Book); the
   other actions take the calendar's available-day colour, Cancel is black. */
.db-consultation .button.db-consultation-secondary {
	border-color: var(--db-consultation-second, #677a63) !important;
	background: var(--db-consultation-second, #677a63) !important;
	box-shadow: none !important;
	color: var(--db-consultation-second-text, #fff) !important;
}

.db-consultation .button.db-consultation-dark {
	border-color: #000 !important;
	background: #000 !important;
	box-shadow: none !important;
	color: #fff !important;
}

.db-consultation .button.db-consultation-secondary:hover,
.db-consultation .button.db-consultation-dark:hover {
	filter: brightness(0.9);
}

.db-consultation .button.db-consultation-copy.is-copied {
	border-color: #3a7d44 !important;
	background: #3a7d44 !important;
}

.db-consultation-setup-notice {
	padding: 10px 14px !important;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
}

/* One thin line round every chat card on every screen: the box has no inner
   padding and the cards inside it no border of their own (the chosen call
   keeps its accent edge). */
.db-consultation .db-wc-booking-fields {
	padding: 0;
}

.db-consultation .db-wc-booking-fields .db-frontend-calendar-card,
.db-consultation .db-wc-booking-fields .db-availability-panel-card:not(.db-consultation-selected) {
	border-color: transparent;
}

.db-consultation .db-wc-booking-fields .db-consultation-selected.db-availability-panel-card {
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

/* A narrow content area (slim theme column): the boxes stack instead of squeezing side by side. */
@container db-consultation (max-width: 819px) {
	.db-consultation-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * Phones and narrow columns: one column.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.db-consultation {
		margin: 20px 0 40px;
	}

	.db-consultation-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.db-consultation-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.db-consultation-fields > *,
	.db-consultation-fields .db-product-addon-field {
		grid-column: 1 / -1;
	}

	.db-consultation-card .db-availability-panel-card {
		padding: 24px 20px;
	}

	.db-consultation-card p.db-consultation-when,
	.db-consultation-when {
		font-size: 19px;
	}

	.db-consultation-buttons .button {
		width: 100%;
	}

	.db-consultation-points {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		width: max-content;
		max-width: 100%;
		margin: 0 auto;
	}

	.db-consultation-link-line {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.db-consultation-link-url {
		display: -webkit-box;
		white-space: normal;
		word-break: break-all;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.db-consultation .button.db-consultation-copy {
		width: 100%;
		padding: 10px 16px !important;
	}
}