/*
 * Plan finder.
 *
 * Every token falls back to a literal, so the block still looks deliberate if
 * the Codigo LaVie theme is not the active theme. Logical properties only.
 */

.codigo-plan-finder {
	--plan-ink: var(--wp--preset--color--ink, #022253);
	--plan-cream: var(--wp--preset--color--cream, #fff3eb);
	--plan-aqua: var(--wp--preset--color--aqua, #76dedf);
	--plan-spring: var(--wp--preset--color--spring, #0abc8a);
	--plan-radius: var(--wp--custom--radius--md, 18px);
	--plan-divider: var(--wp--custom--divider, rgba(2, 34, 83, 0.13));
	--plan-muted: var(--wp--custom--ink--soft, rgba(2, 34, 83, 0.62));

	/* The card is the block's own surface, not the pattern's. The band it sits
	   in is tinted, so without this the quiz reads as loose text on colour. */
	background-color: var(--wp--preset--color--base, #fff);
	border-radius: var(--wp--custom--radius--lg, 28px);
	box-shadow: var(--wp--preset--shadow--sm, 0 1px 3px rgba(2, 34, 83, 0.07));
	/* The reserved height below is the design's outer measurement. Without this
	   the padding is added on top of it and the card carries 68px of dead space
	   under every question. */
	box-sizing: border-box;
	color: var(--plan-ink);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	/* Holds the card's height steady as the stepper swaps a two-up question
	   for a stacked one, so the band does not jump under the pointer. */
	min-block-size: 520px;
	padding: var(--wp--preset--spacing--50, 34px);
}

/* Once the split has collapsed the card is full width and the reserved height
   is only dead space. */
@media (max-width: 1024px) {
	.codigo-plan-finder {
		min-block-size: 0;
	}
}

@media (max-width: 640px) {
	.codigo-plan-finder {
		padding: 22px;
	}
}

/* The stepper swaps steps with the `hidden` attribute, and several parts of the
   card carry a class-level `display` that would otherwise beat the UA sheet's
   `[hidden] { display: none }`. State it once here so every swap holds. */
.codigo-plan-finder [hidden] {
	display: none !important;
}

/* The one progress row the stepper drives. Server-hidden: without the script
   every question is on the page at once and each legend states its own count. */
.codigo-plan-finder__progress {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	justify-content: space-between;
	margin-block-end: 1.5rem;
}

.codigo-plan-finder__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.codigo-plan-finder__step + .codigo-plan-finder__step {
	margin-block-start: 2rem;
}

/* Once enhanced, only one step is in the flow at a time. */
.codigo-plan-finder.is-enhanced .codigo-plan-finder__step + .codigo-plan-finder__step {
	margin-block-start: 0;
}

/* Each step is a different element, so unhiding one starts the animation from
   scratch — the question fades up while the dots slide underneath it. */
@keyframes codigo-plan-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.codigo-plan-finder.is-enhanced .codigo-plan-finder__step,
.codigo-plan-finder.is-enhanced .codigo-plan-finder__result {
	animation: codigo-plan-step-in 0.24s ease-out both;
}

.codigo-plan-finder__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.codigo-plan-finder__legend {
	display: block;
	margin-block-end: 1.25rem;
	padding: 0;
}

/* The stepper's own progress row states the count once, above the card, so the
   per-question label would be a second reading of the same fact. */
.codigo-plan-finder.is-enhanced .codigo-plan-finder__count--static {
	display: none;
}

.codigo-plan-finder__count--static {
	display: block;
	margin-block-end: 1rem;
}

.codigo-plan-finder__count {
	color: var(--plan-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.codigo-plan-finder__dots {
	align-items: center;
	display: flex;
	gap: 6px;
}

.codigo-plan-finder__dot {
	background: var(--plan-divider);
	block-size: 7px;
	border-radius: 999px;
	inline-size: 7px;
	transition: inline-size 0.2s, background 0.2s;
}

.codigo-plan-finder__dot.is-reached {
	background: var(--plan-aqua);
}

/* The step you are on reads as a bar rather than a dot. */
.codigo-plan-finder__dot.is-current {
	inline-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.codigo-plan-finder__dot {
		transition: none;
	}

	.codigo-plan-finder.is-enhanced .codigo-plan-finder__step,
	.codigo-plan-finder.is-enhanced .codigo-plan-finder__result {
		animation: none;
	}
}

.codigo-plan-finder__question {
	display: block;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.15;
}

.codigo-plan-finder__options {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: 1fr 1fr;
}

/* Options with a second line get the full width. */
.codigo-plan-finder__options.is-stacked {
	grid-template-columns: 1fr;
}

/* Only a card as narrow as a phone drops the short question to one column;
   the design keeps it two-up everywhere above that. */
@container (max-width: 400px) {
	.codigo-plan-finder__options {
		grid-template-columns: 1fr;
	}
}

.codigo-plan-finder__option {
	background: var(--plan-cream);
	border: 1.5px solid transparent;
	border-radius: var(--plan-radius);
	cursor: pointer;
	display: grid;
	gap: 0.3125rem;
	padding: 1.125rem 1.25rem;
	transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.codigo-plan-finder__option:hover {
	background: var(--wp--preset--color--aqua-tint, #e4f8f8);
	border-color: var(--plan-aqua);
}

/* The radio itself is visually hidden but stays focusable and announced. */
.codigo-plan-finder__option input {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.codigo-plan-finder__option:has( input:checked ) {
	background: var(--plan-ink);
	border-color: var(--plan-ink);
	color: #fff;
}

.codigo-plan-finder__option:has( input:focus-visible ) {
	outline: 2px solid var(--plan-spring);
	outline-offset: 2px;
}

.codigo-plan-finder__option-label {
	font-weight: 700;
}

.codigo-plan-finder__option-sub {
	font-size: 0.875rem;
	opacity: 0.75;
}

/* The clinic options put their soonest slot on the trailing edge, level with
   the pair of lines beside it. */
.codigo-plan-finder__option:has( .codigo-plan-finder__option-meta ) {
	align-items: center;
	column-gap: 0.875rem;
	grid-template-columns: 1fr auto;
}

.codigo-plan-finder__option-meta {
	color: var(--plan-spring);
	font-size: 0.875rem;
	font-weight: 700;
	grid-column: 2;
	grid-row: 1 / -1;
}

/* Green on the near-black selected state fails contrast; the fill carries it. */
.codigo-plan-finder__option:has( input:checked ) .codigo-plan-finder__option-meta {
	color: inherit;
}

/* The form owns the card's column while a question is up, so the back button
   sits under the options rather than being pushed to the card's base. */
.codigo-plan-finder.is-enhanced .codigo-plan-finder__form {
	display: flex;
	flex-direction: column;
}

.codigo-plan-finder__actions {
	margin-block-start: 1.5rem;
}

/* The site's `.btn`, restated. The theme owns this for core buttons, but the
   block ships its own controls and must still look deliberate under another
   theme — hence the literal fallback behind every token. */
.codigo-plan-finder__submit,
.codigo-plan-finder__cta,
.codigo-plan-finder__call,
.codigo-plan-finder__back,
.codigo-plan-finder__restart {
	align-items: center;
	background: transparent;
	/* Transparent rather than absent, so the outlined and ghost variants come
	   out the same size as the filled one. */
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	/* After the shorthand, which resets the family to the inherited body font. */
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 0.875rem;
	font-weight: 400;
	gap: 0.375rem;
	justify-content: center;
	line-height: 1.2;
	padding: 0.9375rem 1.875rem;
	text-decoration: none;
	transition: background 0.16s, border-color 0.16s, color 0.16s;
}

/* The two booking controls carry the size the design gives them inside the
   card, which is a step up from the site-wide default. */
.codigo-plan-finder__submit,
.codigo-plan-finder__cta,
.codigo-plan-finder__call {
	font-size: 1rem;
	padding: 1rem 1.625rem;
}

/* Primary: the one thing the card is asking for. */
.codigo-plan-finder__submit,
.codigo-plan-finder__cta {
	background: var(--plan-ink);
	border-color: var(--plan-ink);
	color: var(--wp--preset--color--base, #fff);
}

.codigo-plan-finder__submit:hover,
.codigo-plan-finder__cta:hover {
	background: var(--wp--preset--color--ink-soft, #0a3a7d);
	border-color: var(--wp--preset--color--ink-soft, #0a3a7d);
}

/* Secondary: a hairline in the divider colour, not an ink outline — it sits
   beside the primary without competing with it. */
.codigo-plan-finder__call {
	border-color: var(--plan-divider);
}

.codigo-plan-finder__call:hover {
	border-color: var(--plan-ink);
}

/* Ghost: no fill, no edge. The pill shape keeps back and start-again in the
   row of buttons; the missing paint keeps them quiet. */
.codigo-plan-finder__back,
.codigo-plan-finder__restart {
	font-size: 0.9375rem;
}

.codigo-plan-finder__back:hover,
.codigo-plan-finder__restart:hover {
	background: var(--plan-cream);
}

.codigo-plan-finder__back {
	/* The form is a column, so without this the button stretches its width. */
	align-self: flex-start;
	margin-block-start: 0.9375rem;
}

.codigo-plan-finder__back:focus-visible,
.codigo-plan-finder__restart:focus-visible,
.codigo-plan-finder__submit:focus-visible,
.codigo-plan-finder__cta:focus-visible,
.codigo-plan-finder__call:focus-visible {
	outline: 2px solid var(--plan-spring);
	outline-offset: 2px;
}

/* Result. Enhanced, it is the whole card, so it takes the free column height
   and drops the booking row onto the base edge the way the design has it. */
.codigo-plan-finder__result {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-block-start: 2rem;
}

.codigo-plan-finder.is-enhanced .codigo-plan-finder__result {
	margin-block-start: 0;
}

.codigo-plan-finder__tag {
	align-self: flex-start;
	background: var(--wp--preset--color--aqua-tint, #e4f8f8);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	margin-block-end: 0.75rem;
	padding: 0.5rem 0.9375rem;
}

.codigo-plan-finder__result-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	/* Pins the row to the base of the card, not to the end of the plan list. */
	margin-block-start: auto;
}

.codigo-plan-finder__result:focus {
	outline: none;
}

.codigo-plan-finder__result-title {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.15;
	margin-block: 0 1rem;
}

.codigo-plan-finder__note {
	margin-block: 0 0.75rem;
	max-inline-size: 60ch;
	opacity: 0.8;
}

.codigo-plan-finder__plan {
	display: grid;
	gap: 0.5625rem;
	list-style: none;
	margin-block: 1.5rem;
	padding: 0;
}

/* Each step is its own cream tile with the price on the trailing edge — the
   same tile the answer options use, so the result reads as the same object. */
.codigo-plan-finder__plan-step {
	align-items: start;
	background: var(--plan-cream);
	border-radius: var(--plan-radius);
	column-gap: 1.25rem;
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 1rem 1.125rem;
	row-gap: 0.25rem;
}

.codigo-plan-finder__plan-price {
	grid-column: 2;
	grid-row: 1 / -1;
}

.codigo-plan-finder__plan-name {
	font-weight: 700;
}

.codigo-plan-finder__plan-detail {
	opacity: 0.75;
}

.codigo-plan-finder__plan-price {
	color: var(--plan-spring);
	font-weight: 700;
}

.codigo-plan-finder__disclaimer,
.codigo-plan-finder__placeholder {
	font-size: 0.875rem;
	margin-block: 0 1.25rem;
	max-inline-size: 60ch;
	opacity: 0.7;
}

/* Narrow card: the price drops under the detail rather than squeezing it. */
@container (max-width: 380px) {
	.codigo-plan-finder__plan-step {
		grid-template-columns: 1fr;
	}

	.codigo-plan-finder__plan-price {
		grid-column: 1;
		grid-row: auto;
	}
}

/* The free consult, booked in the card: contact fields, then day and time
   chips. The Back button sits above the heading here, not under options. */
.codigo-plan-finder__result > .codigo-plan-finder__back {
	margin-block: 0 0.75rem;
}

.codigo-plan-finder__consult {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.codigo-plan-finder__field {
	display: grid;
	gap: 0.3125rem;
	font-size: 0.875rem;
}

.codigo-plan-finder__field:nth-of-type(n + 3),
.codigo-plan-finder__consult-error,
.codigo-plan-finder__consult > .codigo-plan-finder__cta {
	grid-column: 1 / -1;
}

.codigo-plan-finder__field-label {
	font-weight: 700;
}

.codigo-plan-finder__input {
	background: var(--plan-cream);
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--sm, 12px);
	color: var(--plan-ink);
	font: inherit;
	font-size: 1rem;
	min-block-size: 2.75rem;
	padding-block: 0.625rem;
	padding-inline: 0.875rem;
}

.codigo-plan-finder__input[aria-invalid="true"] {
	border-color: var(--plan-aqua);
	border-width: 2px;
}

.codigo-plan-finder__consult-error:empty {
	display: none;
}

.codigo-plan-finder__consult-error {
	font-weight: 700;
	margin: 0;
}

.codigo-plan-finder__consult > .codigo-plan-finder__cta {
	justify-self: start;
}

.codigo-plan-finder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1rem;
}

.codigo-plan-finder__chip {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	min-block-size: 2.75rem;
	padding-block: 0.5rem;
	padding-inline: 1rem;
}

.codigo-plan-finder__chip:hover,
.codigo-plan-finder__chip[aria-pressed="true"] {
	background: var(--plan-cream);
	border-color: var(--plan-cream);
	color: var(--plan-ink);
}

.codigo-plan-finder__input:focus-visible,
.codigo-plan-finder__chip:focus-visible,
.codigo-plan-finder__result-title:focus-visible {
	outline: 2px solid var(--plan-spring);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.codigo-plan-finder__consult {
		grid-template-columns: 1fr;
	}
}