/*
 * Book a Visit (/book-a-visit/) only — loaded on that page (see functions.php), after main.css.
 */

/* Small phones (<=400px): the 5-day date picker could not shrink below ~363px, pushing the form and sidebar
   off a 320px / 360px screen. Let the column and the day buttons shrink. (2026-10-23) */
@media (max-width: 400px) {
	.visit-body__grid { grid-template-columns: minmax(0, 1fr); }
	.visit-form,
	.visit-sidebar { min-width: 0; }
	.visit-card { padding: 16px; }
	.visit-datestrip { gap: 4px; }
	.visit-datestrip__nav { width: 28px; height: 28px; }
	.visit-datestrip__days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
	.visit-datestrip__day { min-width: 0; padding: 8px 1px; }
	.visit-datestrip__day em { font-size: 9px; }
}

/* ==========================================================================
   Form clarity pass (2026-10-30): every step card and field clearly visible,
   current step highlighted, completed steps get a green tick.
   ========================================================================== */
.visit-form { gap: 22px; }
.visit-card {
	position: relative;
	border: 1.5px solid #e1dcf3;
	border-radius: 18px;
	padding: 24px 26px 26px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 31, 77, 0.04), 0 14px 34px -20px rgba(76, 43, 209, 0.38);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.visit-card__head { padding-right: 60px; margin-bottom: 18px; }
.visit-card__head h3 { font-size: var(--fs-md); }
.visit-card__head p { font-size: var(--fs-xs); }
.visit-card__num { width: 32px; height: 32px; font-size: var(--fs-sm); background: linear-gradient(135deg, #6c3be8, #8b5cf6); box-shadow: 0 6px 14px -6px rgba(108, 59, 232, 0.7); }

/* small icon badge in the card corner (was a large faded icon beside the field) */
.visit-card__body { display: block; }
.visit-card__art,
.visit-card__body-row .visit-card__art--sm {
	position: absolute; top: 20px; right: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 14px;
	background: #f3effe; color: #6c3be8; opacity: 1;
}
.visit-card__art svg,
.visit-card__art--sm svg { width: 24px; height: 24px; }
.visit-card[data-step="4"] .visit-card__body-row { display: block; margin-top: 14px; }

/* fields: full width, taller, clear border, readable placeholder */
.visit-card select,
.visit-card .hero__field input[type="text"],
.visit-card .hero__field input[type="tel"],
.visit-card .hero__field input[type="email"] {
	width: 100%; max-width: none; min-height: 52px;
	padding: 12px 16px;
	border: 1.5px solid #cfc8ea; border-radius: 12px;
	background-color: #fff;
	font-family: inherit; font-size: var(--fs-sm); color: var(--navy);
	box-shadow: 0 1px 2px rgba(16, 31, 77, 0.05);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.visit-card select {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c3be8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 18px;
}
.visit-card .hero__field input::placeholder { color: #8a8fa8; opacity: 1; }
.visit-card select:hover:not(:disabled),
.visit-card .hero__field input:hover { border-color: #a78bfa; }
.visit-card select:focus,
.visit-card .hero__field input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); }
.visit-card select:disabled { background-color: #f6f5fb; border-style: dashed; color: #9a9eb5; cursor: not-allowed; }

/* "Your Details": labels clearer, required marked, mobile + email side by side */
.visit-card__fields { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.visit-card__fields > :first-child,
.visit-card__fields > .visit-consent { grid-column: 1 / -1; }
.visit-card .hero__field-label { display: block; margin-bottom: 7px; font-size: var(--fs-xs); font-weight: 700; color: var(--navy); }
.visit-card .hero__field:has(input[required]) .hero__field-label::after { content: " *"; color: #e5484d; }
.visit-consent { align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.visit-consent input { width: 18px; height: 18px; margin: 0; accent-color: #6c3be8; flex-shrink: 0; }
.visit-submit { width: 100%; justify-content: center; margin-top: 20px; min-height: 54px; box-shadow: 0 14px 28px -14px rgba(108, 59, 232, 0.8); }

/* date chips */
.visit-datestrip__nav { width: 36px; height: 36px; border: 1.5px solid #cfc8ea; color: #6c3be8; }
.visit-datestrip__nav:hover:not(:disabled) { border-color: #7c3aed; background: #f3effe; }
.visit-datestrip__day { border: 1.5px solid #dcd6f2; border-radius: 12px; padding: 11px 4px; box-shadow: 0 1px 2px rgba(16, 31, 77, 0.05); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.visit-datestrip__day:hover { border-color: #a78bfa; transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(76, 43, 209, 0.45); }
.visit-datestrip__day em { color: #6b7090; font-weight: 600; }
.visit-datestrip__day.is-selected { border-color: transparent; background: linear-gradient(135deg, #6c3be8, #8b5cf6); box-shadow: 0 10px 20px -10px rgba(108, 59, 232, 0.8); }
.visit-datestrip__day.is-selected strong,
.visit-datestrip__day.is-selected span,
.visit-datestrip__day.is-selected em { color: #fff; }

/* completed steps: green tick + soft green border */
.visit-card.is-filled,
.visit-card[data-step="1"]:has(select:valid),
.visit-card[data-step="2"]:has(select:valid),
.visit-card[data-step="3"]:has(select:valid),
.visit-card[data-step="4"]:has(.visit-datestrip__day.is-selected):has(select:valid),
.visit-card[data-step="5"]:has(input[name="parent_name"]:valid):has(input[name="phone"]:valid) { border-color: #bfe5cf; }
.visit-card[data-step="1"]:has(select:valid) .visit-card__num,
.visit-card[data-step="2"]:has(select:valid) .visit-card__num,
.visit-card[data-step="3"]:has(select:valid) .visit-card__num,
.visit-card[data-step="4"]:has(.visit-datestrip__day.is-selected):has(select:valid) .visit-card__num,
.visit-card[data-step="5"]:has(input[name="parent_name"]:valid):has(input[name="phone"]:valid) .visit-card__num { font-size: 0; background: #16a34a; box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.7); }
.visit-card[data-step] .visit-card__num::before { font-size: 16px; font-weight: 800; }
.visit-card[data-step="1"]:has(select:valid) .visit-card__num::before,
.visit-card[data-step="2"]:has(select:valid) .visit-card__num::before,
.visit-card[data-step="3"]:has(select:valid) .visit-card__num::before,
.visit-card[data-step="4"]:has(.visit-datestrip__day.is-selected):has(select:valid) .visit-card__num::before,
.visit-card[data-step="5"]:has(input[name="parent_name"]:valid):has(input[name="phone"]:valid) .visit-card__num::before { content: "\2713"; }

/* the step being filled in (after the tick rules so it wins) */
.visit-card:focus-within {
	border-color: #8b5cf6;
	box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 18px 40px -20px rgba(76, 43, 209, 0.5);
}

@media (max-width: 720px) {
	.visit-card { padding: 20px 18px 22px; }
	.visit-card__head { padding-right: 0; }
	.visit-card__art, .visit-card__body-row .visit-card__art--sm { display: none; }
	.visit-card__fields { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 400px) {
	.visit-card { padding: 16px 14px 18px; }
}

/* ==========================================================================
   Layout + UI pass (2026-10-30): hero chips, stepper bar, sticky sidebar,
   sidebar cards matching the form cards, trust items as cards.
   ========================================================================== */

/* hero (breadcrumb bar removed, so the hero gets its own top spacing) */
.visit-hero { padding: 40px 0 44px; background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(124, 58, 237, 0.08), transparent 60%), radial-gradient(ellipse 50% 70% at 100% 100%, rgba(242, 106, 27, 0.07), transparent 60%), #f6f5fc; }
.visit-hero__copy p { font-size: var(--type-intro, 16px); line-height: 1.65; max-width: 470px; margin-bottom: 24px; }
.visit-hero__traits { gap: 10px; }
.visit-hero__traits li { max-width: none; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid #e6e1f6; box-shadow: 0 6px 16px -10px rgba(76, 43, 209, 0.35); font-size: var(--fs-xs); }
.visit-hero__traits-icon { width: 30px; height: 30px; background: #f3effe; color: #6c3be8; }
.visit-hero__photo { box-shadow: 0 24px 48px -24px rgba(16, 31, 77, 0.45); }

/* stepper: one white bar, done steps green, line fills as you go */
.visit-stepper { padding: 0; margin-top: -24px; position: relative; z-index: 2; }
.visit-stepper__row { max-width: 920px; margin: 0 auto; padding: 16px 24px 14px; background: #fff; border: 1.5px solid #e1dcf3; border-radius: 18px; box-shadow: 0 16px 36px -22px rgba(76, 43, 209, 0.45); flex-wrap: nowrap; }
.visit-stepper__step { width: auto; flex: 0 0 auto; min-width: 84px; }
.visit-stepper__num { width: 34px; height: 34px; font-size: var(--fs-sm); background: #f1eff9; color: #6b7090; border: 1.5px solid #e1dcf3; }
.visit-stepper__label { font-size: var(--fs-2xs); font-weight: 600; color: #6b7090; }
.visit-stepper__step.is-active .visit-stepper__num { border-color: transparent; background: linear-gradient(135deg, #6c3be8, #8b5cf6); box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.14); }
.visit-stepper__step.is-complete .visit-stepper__num { border-color: transparent; background: #16a34a; font-size: 0; }
.visit-stepper__step.is-complete .visit-stepper__num::before { content: "\2713"; font-size: 15px; font-weight: 800; }
.visit-stepper__step.is-complete .visit-stepper__label { color: #15803d; }
.visit-stepper__line { flex: 1 1 auto; max-width: none; min-width: 16px; margin-top: 16px; border-radius: 2px; background: #e6e1f6; }
.visit-stepper__step.is-complete + .visit-stepper__line { background: #16a34a; }

/* empty status line pushed the form 38px below the sidebar */
#visit-status:empty { display: none; }

/* body */
.visit-body { padding: 36px 0 48px; }
.visit-body__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }

/* sidebar: same card style as the form, stays in view while filling the form */
.visit-why-card,
.visit-help-card { border: 1.5px solid #e1dcf3; border-radius: 18px; padding: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 31, 77, 0.04), 0 14px 34px -20px rgba(76, 43, 209, 0.38); }
.visit-why-card h3,
.visit-help-card h3 { font-size: var(--fs-md); margin-bottom: 16px; }
.visit-why-list li strong { font-size: var(--fs-sm); line-height: 1.35; }
.visit-why-list li span span { font-size: var(--fs-xs); line-height: 1.5; margin-top: 2px; }
.visit-why-list__icon { width: 38px; height: 38px; border-radius: 12px; background: #f3effe; color: #6c3be8; }
.visit-why-list__icon svg { width: 18px; height: 18px; }
.visit-help-card > p { font-size: var(--fs-xs); }
.visit-help-card .btn { min-height: 48px; border: 1.5px solid #dcd6f2; font-size: var(--fs-sm); transition: border-color 0.2s ease, background 0.2s ease; }
.visit-help-card .btn:hover { border-color: #7c3aed; background: #faf8ff; }
.visit-help-card .visit-help-card__icon { color: #6c3be8; }
/* WhatsApp button: number sat outside the pill; put it on its own line inside */
.visit-help-card .visit-help-card__whatsapp { flex-wrap: wrap; justify-content: center; row-gap: 0; white-space: normal; padding: 10px 16px; border-radius: 16px; border-color: #bfe5cf; background: #f3fbf6; }
.visit-help-card .visit-help-card__whatsapp:hover { border-color: #16a34a; background: #eaf8ef; }
.visit-help-card .visit-help-card__whatsapp .visit-help-card__icon { color: #16a34a; }
.visit-help-card .visit-help-card__whatsapp small { flex-basis: 100%; text-align: center; font-size: var(--fs-xs); opacity: 1; color: #15803d; font-weight: 600; }
@media (min-width: 1081px) {
	.visit-sidebar { position: sticky; top: 116px; }
}

/* trust strip: four small cards */
.visit-trust { padding: 32px 0 64px; }
.visit-trust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto 22px; }
.visit-trust__item { flex-direction: column; text-align: center; gap: 12px; padding: 22px 16px; border: 1.5px solid #e6e1f6; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -22px rgba(76, 43, 209, 0.45); font-size: var(--fs-sm); }
.visit-trust__icon { width: 48px; height: 48px; background: linear-gradient(135deg, #6c3be8, #8b5cf6); color: #fff; box-shadow: 0 10px 20px -10px rgba(108, 59, 232, 0.8); }
.visit-trust__icon svg { width: 22px; height: 22px; }
.visit-trust__note { font-size: var(--fs-xs); }

@media (max-width: 1080px) {
	.visit-body__grid { grid-template-columns: minmax(0, 1fr); }
	.visit-stepper { margin-top: -20px; }
	.visit-stepper .visit-stepper__row { width: auto; max-width: none; overflow-x: auto; justify-content: flex-start; margin: 0 16px; }
}
@media (max-width: 720px) {
	.visit-hero { padding: 24px 0 40px; }
	.visit-body { padding-top: 24px; }
	.visit-stepper__row { padding: 12px 14px 10px; border-radius: 14px; }
	.visit-stepper__step { min-width: 70px; }
	.visit-trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.visit-trust__item { padding: 18px 12px; font-size: var(--fs-xs); }
}