/* Native enquiry/booking section on treatment pages (src/components/FormsSection.astro). Fields take the live
   "Get In Touch" form styles through .c-get-in-touch-section; this file adds layout and the booking parts only. */
/* Several parts here set display; hidden must still hide them. */
.meda-forms [hidden] { display: none !important; }
/* Booking title above the form (the section heading "Ready to book?" sits in the left column). */
.meda-forms .booking__title { margin: 0 0 1.25rem; font-size: 1.6rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
/* The date box matches the selects beside it (Gravity Forms styles skip date inputs): white, same border and height. */
.meda-forms input[type="date"] { box-sizing: border-box; width: 100%; min-height: 60px; padding: 0 12px; border: 1px solid rgb(188, 170, 167); border-radius: 5px; background-color: #fff !important; box-shadow: none; color: inherit; font: inherit; }
/* Left column: the enquiry link reads at body size, as in the design. */
.meda-forms .c-section__intro .booking__alt { font-size: inherit; }
/* "Prefer to book now without delay? Book online now." under the enquiry intro (addBookPrompt). */
.meda-book-prompt a { color: var(--meda-gold, #a58b46); }
.meda-forms h2.c-section__heading { margin: 0 0 1.5rem; scroll-margin-top: 120px; }
/* Headings are focused after a jump so screen readers start there; they are not controls, so no outline. */
.meda-forms h2.c-section__heading:focus, .meda-forms h2.c-section__heading:focus-visible { outline: none; }

/* Gravity Forms' grid, in case its layout CSS is not on the page. */
.meda-forms .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 2%; }
.meda-forms .gfield { grid-column: 1 / -1; }
@media (min-width: 641px) { .meda-forms .gfield--width-half { grid-column: span 6; } }
.meda-forms .gfield_validation_message { display: block; margin-top: .4rem; font-size: .875rem; color: #b3261e; }
.meda-forms .gfield_validation_message:empty { display: none !important; }
.meda-forms select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.meda-forms [aria-invalid="true"] { border-color: #b3261e !important; }
.meda-forms .gchoice label a { color: inherit; text-decoration: underline; }
.meda-forms__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meda-forms .gform_footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.meda-forms__status { margin: 1rem 0 0; }
.meda-forms__status:empty { display: none; }
.meda-forms__status[data-state="error"] { color: #b3261e; }
.meda-forms__calendar { margin: .75rem 0 0; }
.meda-forms__calendar a { color: var(--meda-gold, #a58b46); text-decoration: underline; margin-right: 1rem; white-space: nowrap; }
.meda-forms__status[data-state="ok"] { padding: 1rem 1.25rem; border: 1px solid var(--meda-gold, #a58b46); border-radius: 5px; }

.booking__demo { padding: .5rem .75rem; border: 1px dashed var(--meda-gold, #a58b46); margin: 0 0 1rem; }
.booking__info p, .booking__clinic-info p { margin: 0 0 .25rem; }
.booking__info p:empty, .booking__clinic-info p:empty { display: none; }
.booking__deposit-note { font-size: .875em; }
.booking__times { border: 0; padding: 0; margin: 0; min-width: 0; }
.booking__slots { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.booking__slots button { padding: .5rem .9rem; border: 1px solid var(--meda-gold, #a58b46); border-radius: 3px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.booking__slots button[aria-pressed="true"] { background: var(--meda-gold, #a58b46); color: #fff; }
.booking__slots button:focus-visible { outline: 2px solid var(--meda-gold, #a58b46); outline-offset: 2px; }
.booking__details { display: contents; }
.booking__alt { font-size: .9em; margin: 1rem 0 0; }

/* The "Book online" button added beside each rewritten "Enquire now" (src/lib/page-forms.ts). */
.w-btn-wrapper:has(> a.w-btn[href="#book"]) { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-btn-wrapper.align_center:has(> a.w-btn[href="#book"]) { justify-content: center; }
.w-btn-wrapper.align_right:has(> a.w-btn[href="#book"]) { justify-content: flex-end; }

/* The enquiry heading lives in the page body; keep it clear of the fixed header when jumped to. */
#enquire { scroll-margin-top: 120px; }
/* Focused after a jump for screen readers; not a control, so no outline. */
#enquire:focus, #enquire:focus-visible { outline: none; }

/* Deposit payment: Zenoti's hosted page in a dialog over the treatment page (native-forms.js pay()). */
.meda-pay { width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--meda-gold, #a58b46); border-radius: 6px; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); background: #fff; color: inherit; overflow: auto; }
.meda-pay::backdrop { background: rgba(30, 24, 18, .55); }
.meda-pay__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.meda-pay__head h3 { margin: 0; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; }
.meda-pay__close { flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--meda-gold, #a58b46); border-radius: 50%; background: #fff; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.meda-pay__close:focus-visible { outline: 2px solid var(--meda-gold, #a58b46); outline-offset: 2px; }
.meda-pay__note { margin: .5rem 0 .75rem; font-size: .9rem; }
.meda-pay__frame { display: block; width: 100%; height: min(640px, calc(100dvh - 12rem)); min-height: 420px; border: 1px solid #e6dfd2; border-radius: 4px; background: #fff; }
.meda-pay__alt { margin: .6rem 0 0; font-size: .85rem; }
.meda-pay__alt a { color: var(--meda-gold, #a58b46); text-decoration: underline; }
@media (max-width: 640px) {
	.meda-pay { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 1rem; }
	.meda-pay__frame { height: calc(100dvh - 13rem); min-height: 360px; }
}