/* Fleetwood Dental Intake: multi-step Contact Form 7 styling */
.fd-intake {
	--fd-green: #2f7a3b;
	--fd-green-dark: #22592b;
	--fd-lime: #8dc63f;
	--fd-tint: #f2f8ec;
	--fd-ink: #1f2a22;
	--fd-muted: #5f6b62;
	--fd-line: #d7e0d8;
	--fd-bg: #ffffff;
	--fd-error: #b42318;
	--fd-radius: 12px;

	max-width: 780px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px);
	background: var(--fd-bg);
	border: 1px solid var(--fd-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(31, 42, 34, .04), 0 12px 32px rgba(31, 42, 34, .06);
	color: var(--fd-ink);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.fd-intake *, .fd-intake *::before, .fd-intake *::after { box-sizing: border-box; }

/* Progress -------------------------------------------------------- */
.fd-progress { margin-bottom: 28px; }
.fd-progress-meta {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	margin-bottom: 10px; font-size: 14px;
}
.fd-progress-step { color: var(--fd-muted); font-variant-numeric: tabular-nums; }
.fd-progress-title { font-weight: 600; color: var(--fd-green-dark); text-align: right; }
.fd-progress-track { height: 6px; background: var(--fd-tint); border-radius: 99px; overflow: hidden; }
.fd-progress-bar {
	height: 100%; width: 0; border-radius: inherit;
	background: linear-gradient(90deg, var(--fd-green), var(--fd-lime));
	transition: width .35s ease;
}

/* Steps ----------------------------------------------------------- */
.fd-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.fd-js .fd-step { display: none; }
.fd-js .fd-step.is-active { display: block; animation: fd-in .3s ease; }
.fd-intake:not(.fd-js) .fd-step + .fd-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--fd-line); }
@keyframes fd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fd-step-title {
	display: block; padding: 0; margin: 0 0 6px;
	font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.2; color: var(--fd-ink);
}
.fd-step-title:focus { outline: none; }
.fd-step-intro { margin: 0 0 22px; color: var(--fd-muted); }

/* Grid ------------------------------------------------------------ */
.fd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 16px; }
.fd-grid > * { grid-column: span 12; }
.fd-col-3 { grid-column: span 3 !important; }
.fd-col-4 { grid-column: span 4 !important; }
.fd-col-6 { grid-column: span 6 !important; }
.fd-col-8 { grid-column: span 8 !important; }
@media (max-width: 640px) {
	.fd-col-3, .fd-col-4, .fd-col-6, .fd-col-8 { grid-column: span 12 !important; }
}

.fd-sub {
	margin: 14px 0 0; padding-top: 18px; border-top: 1px solid var(--fd-line);
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fd-green);
}
.fd-grid > .fd-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Fields ---------------------------------------------------------- */
.fd-field { margin: 0; min-width: 0; }
.fd-field > label, .fd-choice > legend {
	display: block; padding: 0; margin: 0;
	font-size: 14px; font-weight: 600; color: var(--fd-ink);
}
.fd-choice { border: 0; padding: 0; }
.fd-choice > legend { margin-bottom: 10px; }
.fd-req { color: var(--fd-green); }
.fd-hint { display: block; font-weight: 400; color: var(--fd-muted); font-size: 13px; }
.fd-field .wpcf7-form-control-wrap { display: block; margin-top: 6px; }

.fd-intake input[type="text"], .fd-intake input[type="email"], .fd-intake input[type="tel"],
.fd-intake input[type="date"], .fd-intake input[type="number"], .fd-intake select, .fd-intake textarea {
	width: 100%; min-height: 48px; padding: 11px 14px; margin: 0;
	font: inherit; font-size: 16px; color: var(--fd-ink);
	background: #fff; border: 1.5px solid var(--fd-line); border-radius: var(--fd-radius);
	box-shadow: none; appearance: none; -webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fd-intake textarea { min-height: 96px; resize: vertical; }
.fd-intake select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b62' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.fd-intake input:hover, .fd-intake select:hover, .fd-intake textarea:hover { border-color: #b9c7bb; }
.fd-intake input:focus, .fd-intake select:focus, .fd-intake textarea:focus {
	outline: none; border-color: var(--fd-green); box-shadow: 0 0 0 4px rgba(47, 122, 59, .15);
}

/* Pill-style radios & checkboxes ------------------------------------ */
.fd-intake .wpcf7-radio, .fd-intake .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-intake .wpcf7-list-item { margin: 0; }
.fd-intake .wpcf7-radio label, .fd-intake .wpcf7-checkbox label { position: relative; display: block; margin: 0; cursor: pointer; }
.fd-intake .wpcf7-radio input, .fd-intake .wpcf7-checkbox input {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.fd-intake .wpcf7-radio .wpcf7-list-item-label, .fd-intake .wpcf7-checkbox .wpcf7-list-item-label {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
	font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--fd-ink);
	background: #fff; border: 1.5px solid var(--fd-line); border-radius: 99px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fd-intake .wpcf7-checkbox .wpcf7-list-item-label::before {
	content: ""; width: 14px; height: 14px; margin-right: 8px; flex: none;
	border: 1.5px solid #9aa89d; border-radius: 4px; background: #fff center/10px no-repeat;
}
.fd-intake :is(.wpcf7-radio, .wpcf7-checkbox) label:hover .wpcf7-list-item-label { border-color: var(--fd-green); }
.fd-intake :is(.wpcf7-radio, .wpcf7-checkbox) input:checked + .wpcf7-list-item-label {
	background: var(--fd-green); border-color: var(--fd-green); color: #fff;
}
.fd-intake .wpcf7-checkbox input:checked + .wpcf7-list-item-label::before {
	border-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%232f7a3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fd-intake :is(.wpcf7-radio, .wpcf7-checkbox) input:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 4px rgba(47, 122, 59, .25); }

/* Yes / No question rows -------------------------------------------- */
.fd-yn-list { border: 1px solid var(--fd-line); border-radius: 14px; overflow: hidden; }
.fd-yn {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin: 0; padding: 12px 16px; border: 0; border-top: 1px solid var(--fd-line); min-width: 0;
}
.fd-yn:first-child { border-top: 0; }
.fd-yn:nth-child(even) { background: #fafcf8; }
.fd-yn > legend { float: left; padding: 0; margin: 0; font-size: 15px; color: var(--fd-ink); flex: 1; }
.fd-yn .wpcf7-form-control-wrap { flex: none; }
.fd-yn .wpcf7-radio { flex-wrap: nowrap; gap: 6px; }
.fd-yn .wpcf7-list-item-label { min-width: 58px; justify-content: center; min-height: 36px; padding: 6px 14px; }
.fd-yn input[value="Yes"]:checked + .wpcf7-list-item-label { background: #a8571f; border-color: #a8571f; }
.fd-yn.fd-invalid { background: #fdf3f2 !important; }
@media (max-width: 560px) {
	.fd-yn { display: block; }
	.fd-yn > legend { float: left; width: 100%; margin-bottom: 10px; }
	.fd-yn .wpcf7-form-control-wrap { display: block; clear: both; }
	.fd-yn .wpcf7-radio { display: grid; grid-template-columns: 1fr 1fr; }
	.fd-yn .wpcf7-list-item-label { width: 100%; }
}

.fd-all-no {
	justify-self: start; margin: 0; padding: 6px 2px; background: none; border: 0; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--fd-green); text-decoration: underline; text-underline-offset: 3px;
}
.fd-all-no:hover { color: var(--fd-green-dark); }
.fd-intake:not(.fd-js) .fd-all-no { display: none; }

/* Notes, consent ---------------------------------------------------- */
.fd-note { margin: 0; font-size: 14px; color: var(--fd-muted); }
.fd-consent {
	padding: 18px 20px; background: var(--fd-tint); border-radius: 14px; font-size: 15px;
}
.fd-consent p { margin: 0 0 10px; }
.fd-consent p:last-child { margin: 0; }
.fd-intake .wpcf7-acceptance label { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 500; cursor: pointer; }
.fd-intake .wpcf7-acceptance input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--fd-green); }

/* Errors ------------------------------------------------------------ */
.fd-intake .fd-invalid input, .fd-intake .fd-invalid select, .fd-intake .fd-invalid textarea,
.fd-intake .wpcf7-not-valid { border-color: var(--fd-error) !important; }
.fd-error, .fd-intake .wpcf7-not-valid-tip {
	display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--fd-error);
}
.fd-yn .fd-error { flex-basis: 100%; }
.fd-yn .wpcf7-not-valid-tip { display: none; }

/* Navigation -------------------------------------------------------- */
.fd-nav {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--fd-line);
}
.fd-intake .fd-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 0 28px; margin: 0;
	font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .01em;
	border-radius: 99px; border: 1.5px solid transparent; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.fd-intake .fd-btn:active { transform: translateY(1px); }
.fd-intake .fd-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47, 122, 59, .3); }
.fd-intake .fd-next, .fd-intake .fd-submit { margin-left: auto; background: var(--fd-green); color: #fff; }
.fd-intake .fd-next:hover, .fd-intake .fd-submit:hover { background: var(--fd-green-dark); }
.fd-intake .fd-prev { background: transparent; color: var(--fd-ink); border-color: var(--fd-line); }
.fd-intake .fd-prev:hover { border-color: var(--fd-ink); }
.fd-intake .fd-submit { width: auto; height: auto; }
.fd-intake .fd-submit:disabled { opacity: .6; cursor: progress; }
.fd-intake:not(.fd-js) .fd-prev, .fd-intake:not(.fd-js) .fd-next { display: none; }
.fd-js .fd-nav [hidden] { display: none !important; }
.fd-intake .wpcf7-spinner { margin: 0 0 0 8px; }

/* CF7 response + done ---------------------------------------------- */
.fd-intake-form .wpcf7-response-output {
	max-width: 780px; margin: 16px auto 0 !important; padding: 14px 18px !important;
	border-radius: 12px; border-width: 1.5px !important; font-size: 15px;
}
.fd-done { text-align: center; padding: 24px 8px; }
.fd-done:focus { outline: none; }
.fd-done-icon {
	width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
	display: grid; place-items: center; background: var(--fd-tint); color: var(--fd-green);
}
.fd-done h2 { margin: 0 0 8px; font-size: 26px; color: var(--fd-ink); }
.fd-done p { margin: 0; color: var(--fd-muted); }
.fd-intake.is-complete .fd-step, .fd-intake.is-complete .fd-nav, .fd-intake.is-complete .fd-progress { display: none !important; }
.fd-intake-form.sent .wpcf7-response-output { display: none; }

.fd-noscript { padding: 12px 16px; background: var(--fd-tint); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
	.fd-intake *, .fd-intake *::before { animation: none !important; transition: none !important; }
}

/* Error summary + return-to-submit ------------------------------------ */
.fd-summary {
	margin: -8px 0 24px; padding: 16px 18px;
	background: #fdf3f2; border: 1.5px solid #f1c6c1; border-radius: 14px;
}
.fd-summary:focus { outline: none; }
.fd-summary[hidden] { display: none; }
.fd-summary-title { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--fd-error); }
.fd-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.fd-summary li button {
	display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 8px; margin: 0;
	background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
	font: inherit; font-size: 14px; color: var(--fd-ink); text-decoration: underline; text-underline-offset: 3px;
}
.fd-summary li button:hover, .fd-summary li button:focus-visible { background: #fbe4e1; outline: none; }
.fd-summary-step {
	flex: none; padding: 1px 8px; border-radius: 99px; background: #fff; border: 1px solid #f1c6c1;
	font-size: 12px; font-weight: 600; color: var(--fd-error); text-decoration: none;
}
.fd-summary.is-clear { background: var(--fd-tint); border-color: #cfe5bd; }
.fd-summary.is-clear .fd-summary-title { margin: 0; color: var(--fd-green-dark); }
.fd-summary-go {
	margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--fd-green); text-decoration: underline; text-underline-offset: 3px;
}
.fd-intake .fd-return { margin-left: auto; background: var(--fd-green); color: #fff; }
.fd-intake .fd-return:hover { background: var(--fd-green-dark); }
.fd-intake:not(.fd-js) .fd-return { display: none; }
