/* kfb-ui.css: the shared booking front end, concatenated by bin/bundle-booking-v2.sh. * Do not edit; run bin/bundle-booking-v2.sh. The sources are assets/booking/v2/css/. */ /* --- v2/css/core.css --- */ /** * KF Booking v2 — core styles: the theme tokens, the motion tokens and keyframes, the root, * focus rings, the spinner, headings, buttons, links, alerts and the style-isolation block. * * All colour/shape is driven by CSS custom properties set on `.kf-booking` (defaults below; * the widget overrides them inline from the site's theme settings). Mobile-first; the layout * is a single column that gains a little breathing room on wider viewports. Each component * file carries its own hardened isolation rules; this file carries the generic ones. * * Motion is defined here once and used by every other stylesheet: the --kf-dur-* / --kf-ease * tokens, the kf-enter / kf-fade / kf-pop / kf-pulse / kf-spin keyframes, and the single * prefers-reduced-motion switch that turns every animation and transition inside the widget off. * Motion is enter-only (opacity and transform) plus colour/border/shadow easing on controls; * nothing ever delays a click. The widget's headings use doubled-class selectors so a host * theme's h2/h3 sizes cannot override the type scale. */ .kf-booking { --kf-accent: #146b74; --kf-on-accent: #ffffff; --kf-text: #111827; --kf-muted: #6b7280; --kf-surface: #ffffff; --kf-surface-alt: #f3f4f6; --kf-border: #e5e7eb; --kf-radius: 14px; --kf-font: inherit; --kf-danger: #b32d2e; --kf-ok: #0f8a4a; /* Motion, shape and elevation: defined once here, used by every stylesheet. */ --kf-ease: cubic-bezier(.22, .61, .36, 1); --kf-dur-1: 140ms; /* hover, press, focus */ --kf-dur-2: 220ms; /* selected, error, fill-in */ --kf-dur-3: 280ms; /* screen enter */ --kf-radius-sm: calc(var(--kf-radius) * .7); /* tracks the brand radius */ --kf-shadow-1: 0 1px 2px rgba(17, 24, 39, .06); --kf-shadow-2: 0 4px 14px rgba(17, 24, 39, .09); --kf-accent-soft: var(--kf-surface-alt); /* fallback; a faint accent tint below */ --kf-scroll-offset: 80px; /* room above a screen brought into view (sticky theme headers) */ font-family: var(--kf-font); color: var(--kf-text); background: var(--kf-surface); border-radius: var(--kf-radius); max-width: 560px; margin: 0 auto; box-sizing: border-box; overflow-wrap: break-word; /* never let a long string force horizontal scroll */ -webkit-font-smoothing: antialiased; } @supports (color: color-mix(in srgb, red 10%, white)) { .kf-booking { --kf-accent-soft: color-mix(in srgb, var(--kf-accent) 7%, var(--kf-surface)); } } .kf-booking *, .kf-booking *::before, .kf-booking *::after { box-sizing: border-box; } .kf-booking__inner { padding: 20px; scroll-margin-top: var(--kf-scroll-offset, 80px); } @media (min-width: 480px) { .kf-booking__inner { padding: 28px; } } /* The inner region is a programmatic focus target on step change — no ring. */ .kf-booking__inner:focus { outline: none; } /* Visible focus for keyboard users on every interactive element. */ .kf-booking button:focus-visible, .kf-booking a:focus-visible, .kf-booking input:focus-visible, .kf-booking textarea:focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 2px; } /* ---- Motion: keyframes ---- */ @keyframes kf-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes kf-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } } @keyframes kf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes kf-spin { to { transform: rotate(360deg); } } /* The one reduced-motion switch for the whole widget: nothing animates or eases. A spinner is left as a static ring, so a loading state is still visible. */ @media (prefers-reduced-motion: reduce) { .kf-booking, .kf-booking *, .kf-booking *::before, .kf-booking *::after { animation: none !important; transition: none !important; } } /* Each screen change remounts the keyed wrapper the core draws around the step body, which replays this once. It only fades and rises; it never blocks a click. */ .kf-booking .kf-screen { animation: kf-enter var(--kf-dur-3) var(--kf-ease) backwards; } /* The boot loader appears after 150ms, so a fast load never flashes it, and holds a minimum height so the page below does not jump when the form arrives. */ .kf-booking__loading, .kf-hint { display: flex; align-items: center; gap: 8px; color: var(--kf-muted); font-size: 14px; padding: 12px 0; } .kf-booking__loading { min-height: 120px; justify-content: center; animation: kf-fade var(--kf-dur-2) var(--kf-ease) 150ms backwards; } .kf-hint { animation: kf-fade var(--kf-dur-2) var(--kf-ease) backwards; } /* ---- Spinner ---- */ .kf-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--kf-border); border-top-color: var(--kf-accent); display: inline-block; animation: kf-spin .9s linear infinite; } /* ---- Panels and headings ---- */ .kf-panel { } .kf-panel__title { font-size: 17px; margin: 0 0 12px; font-weight: 700; } /* The widget's type scale, at doubled-class specificity so a host theme's h2/h3 rules (which are element or single-class selectors) cannot make a step question louder than the page title. The full layout's larger title is set in layout-full.css. */ .kf-booking .kf-title { font-size: 20px; line-height: 1.25; margin: 0 0 4px; font-weight: 700; letter-spacing: normal; } .kf-booking .kf-panel__title { font-size: 17px; line-height: 1.35; margin: 0 0 12px; font-weight: 700; letter-spacing: normal; } .kf-booking .kf-blocked__title { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: normal; } .kf-booking .kf-confirm__title { font-size: 20px; line-height: 1.3; margin: 0 0 16px; font-weight: 700; letter-spacing: normal; } /* ---- Buttons / links ---- */ .kf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; border-radius: var(--kf-radius-sm); padding: 12px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background-color var(--kf-dur-1) var(--kf-ease), border-color var(--kf-dur-1) var(--kf-ease), filter var(--kf-dur-1) var(--kf-ease), transform var(--kf-dur-1) var(--kf-ease), box-shadow var(--kf-dur-1) var(--kf-ease); } .kf-btn:not(:disabled):active { transform: translateY(1px); } .kf-btn--primary { background: var(--kf-accent); color: var(--kf-on-accent); } .kf-btn--primary:hover { filter: brightness(.94); } .kf-btn--primary:not(:disabled):hover { box-shadow: var(--kf-shadow-2); } .kf-btn--primary:disabled { opacity: .85; cursor: default; filter: none; } .kf-btn--ghost { background: var(--kf-surface); color: var(--kf-accent); border-color: var(--kf-border); } .kf-btn--ghost:hover { border-color: var(--kf-accent); } .kf-btn--block { width: 100%; margin-top: 4px; } /* A primary button is only ever disabled while the booking is being sent, so the disabled state carries a small spinner ahead of the label. */ .kf-btn--primary:disabled::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kf-spin .8s linear infinite; } .kf-link { background: none; border: 0; color: var(--kf-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; } .kf-link:hover { text-decoration: underline; } /* The back link ("Change clinic", "Change date", "Back"): flush with the content edge, a 40px-high tap area (padding, not min-height alone, so the isolated reset cannot shrink it) and a quiet nudge towards the left on hover. The doubled class beats theme and kit button rules that would otherwise indent it. */ .kf-booking .kf-link.kf-back { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px 10px 0; margin: 0 0 4px; min-height: 40px; font-size: 15px; font-weight: 600; line-height: 1.3; transition: color var(--kf-dur-1) var(--kf-ease), transform var(--kf-dur-1) var(--kf-ease); } .kf-booking .kf-link:disabled { opacity: .5; cursor: default; text-decoration: none; } .kf-booking .kf-link.kf-back:not(:disabled):hover { text-decoration: none; transform: translateX(-2px); } /* ---- Alerts / empties ---- */ .kf-alert { background: #fdecec; color: var(--kf-danger); border: 1px solid #f5c2c2; border-radius: var(--kf-radius-sm); padding: 12px 14px; font-size: 14px; } .kf-empty { color: var(--kf-muted); font-size: 14px; padding: 8px 0; } .kf-muted { color: var(--kf-muted); } /* ---- Blocked (the booking was stopped; nothing was sent) ---- A calm neutral card, not an alarm: the message sits on the surface in the text colour. */ .kf-blocked { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; background: var(--kf-surface-alt); border-radius: var(--kf-radius); } .kf-blocked__title { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 700; } .kf-blocked .kf-alert { margin: 0; width: 100%; background: var(--kf-surface); border-color: var(--kf-border); color: var(--kf-text); } /* ------------------------------------------------------------------------ * * Style isolation (toggle in WP → Theme). When on, the mount gets * .kf-booking--isolated and we neutralise the ambient/inherited properties a * host theme or Elementor's global element styles impose — fonts, uppercase * buttons, letter-spacing, native/theme control chrome, link underlines, * heading colour/transform. The doubled root class raises specificity so these * beat single-wrapper-class theme rules; we only reset properties the widget's * own component classes don't set, so the widget's look is preserved intact. * (Note: appearance is reset on buttons/selects only — never on inputs — so the * native date picker and checkbox keep working.) * ------------------------------------------------------------------------ */ .kf-booking.kf-booking--isolated { --kf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--kf-font); font-size: 16px; line-height: 1.5; letter-spacing: normal; word-spacing: normal; font-weight: 400; font-style: normal; text-transform: none; text-align: left; text-decoration: none; text-shadow: none; text-indent: 0; direction: ltr; color: var(--kf-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .kf-booking.kf-booking--isolated button, .kf-booking.kf-booking--isolated input, .kf-booking.kf-booking--isolated textarea, .kf-booking.kf-booking--isolated select { font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; text-shadow: none; } .kf-booking.kf-booking--isolated button, .kf-booking.kf-booking--isolated select { -webkit-appearance: none; appearance: none; line-height: normal; min-width: 0; min-height: 0; } .kf-booking.kf-booking--isolated a { text-decoration: none; box-shadow: none; background: none; text-shadow: none; } .kf-booking.kf-booking--isolated h1, .kf-booking.kf-booking--isolated h2, .kf-booking.kf-booking--isolated h3, .kf-booking.kf-booking--isolated h4 { font-family: inherit; text-transform: none; letter-spacing: normal; color: inherit; text-shadow: none; } /* Harden interactive surfaces: re-assert only the themed properties (background / colour / border) at high specificity, so a theme rule can't repaint the widget's buttons, chips, calendar cells or inputs. Sizing and radius come from the base rules above. */ .kf-booking.kf-booking--isolated .kf-btn--primary { background: var(--kf-accent); color: var(--kf-on-accent); border-color: transparent; } .kf-booking.kf-booking--isolated .kf-btn--ghost { background: var(--kf-surface); color: var(--kf-accent); border-color: var(--kf-border); } .kf-booking.kf-booking--isolated .kf-link { background: none; color: var(--kf-accent); } .kf-booking.kf-booking--isolated .kf-blocked__title { color: var(--kf-text); } /* Isolation: the same back link and headings, re-asserted at higher specificity so the resets above (min-height/min-width 0 on buttons, theme heading rules) cannot undo them. */ .kf-booking.kf-booking--isolated .kf-link.kf-back { padding: 10px 12px 10px 0; min-height: 40px; font-size: 15px; font-weight: 600; line-height: 1.3; } .kf-booking.kf-booking--isolated .kf-title { font-size: 20px; line-height: 1.25; margin: 0 0 4px; font-weight: 700; } .kf-booking.kf-booking--isolated .kf-panel__title { font-size: 17px; line-height: 1.35; margin: 0 0 12px; font-weight: 700; } .kf-booking.kf-booking--isolated .kf-blocked__title { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 700; } .kf-booking.kf-booking--isolated .kf-confirm__title { font-size: 20px; line-height: 1.3; margin: 0 0 16px; font-weight: 700; } /* --- v2/css/stepper.css --- */ /** * KF Booking v2 — the header and the stepper. * * The stepper's dots ease between states: the current step has a soft halo and a bold label, a done * step is a solid accent dot with a tick drawn in CSS (its number stays in the DOM, aria-hidden). Under * 480px only the current step shows its label; the others are visually hidden but still the accessible * name of their button, so nothing truncates. */ /* ---- Header + stepper ---- */ .kf-head { margin-bottom: 18px; } /* The title's size and spacing are the doubled-class rule in core.css. */ .kf-title { color: var(--kf-text); } .kf-sub { margin: 0 0 12px; color: var(--kf-muted); font-size: 14px; } .kf-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 14px 0 0; } .kf-step { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--kf-muted); transition: color var(--kf-dur-2, 220ms) var(--kf-ease, ease); } .kf-step__dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--kf-surface-alt); color: var(--kf-muted); border: 1px solid var(--kf-border); transition: background-color var(--kf-dur-2, 220ms) var(--kf-ease, ease), color var(--kf-dur-2, 220ms) var(--kf-ease, ease), border-color var(--kf-dur-2, 220ms) var(--kf-ease, ease), box-shadow var(--kf-dur-2, 220ms) var(--kf-ease, ease); } .kf-step__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kf-step--current .kf-step__dot { background: var(--kf-accent); color: var(--kf-on-accent); border-color: var(--kf-accent); box-shadow: 0 0 0 4px var(--kf-accent-soft, var(--kf-surface-alt)); } .kf-step--current { color: var(--kf-text); font-weight: 700; } /* Done: a solid dot, the number hidden (font-size 0) and a tick drawn by the ::after in its place. */ .kf-step--done .kf-step__dot { background: var(--kf-accent); color: var(--kf-on-accent); border-color: var(--kf-accent); font-size: 0; line-height: 0; position: relative; } .kf-step--done .kf-step__dot::after { content: ""; width: 5px; height: 9px; margin: 0; position: absolute; left: 50%; top: 50%; border: solid currentColor; border-width: 0 2px 2px 0; transform: translate(-50%, -65%) rotate(45deg); } .kf-step--done .kf-step__label { color: var(--kf-text); transition: color var(--kf-dur-1, 140ms) var(--kf-ease, ease); } /* The location line under the heading (the Dr Fadi framing): the clinic's name, then its address. */ .kf-place { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--kf-muted); } .kf-place__label { color: var(--kf-text); font-weight: 600; } .kf-place__label + .kf-place__addr::before { content: " \00b7 "; } /* A done step goes back to itself: a button that looks like the step beside it. */ .kf-booking .kf-step__btn, .kf-booking .kf-step__btn:hover, .kf-booking .kf-step__btn:focus { background: none; border: 0; padding: 0; color: inherit; box-shadow: none; } .kf-step__btn { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; } .kf-step__btn:hover .kf-step__label { color: var(--kf-accent); text-decoration: underline; } .kf-booking.kf-booking--isolated .kf-step__btn { background: none; color: inherit; border: 0; } /* Narrow: only the current step keeps its label on screen. The others stay in the accessibility tree (a done step's button is named by its label), clipped rather than display:none. */ @media (max-width: 479px) { .kf-steps { gap: 10px; } /* Label clipped: pad the button out to a 44px tap target without moving the layout. */ .kf-booking .kf-steps .kf-step__btn { padding: 11px; margin: -11px; } .kf-step:not(.kf-step--current) { flex: 0 0 auto; } .kf-step--current { flex: 1 1 auto; } .kf-step:not(.kf-step--current) .kf-step__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* --- v2/css/layout-full.css --- */ /** * KF Booking v2 — the full-page layout: a wide frame, the top steps across the page, and the * current step beside a right-hand column. The title is larger here (24px); the main column is the * focus target when a screen changes, so it takes no ring and keeps room above it when scrolled to. * * The columns stack when the widget is narrower than 720px. That is a measure of the widget, not * the window: layout-full.js watches the frame and adds .kf-full--narrow, so a widget in a narrow * column of a wide page stacks too. */ /* The doubled class beats the base .kf-booking width wherever the stylesheets load. */ .kf-booking.kf-booking--full { max-width: 1180px; } .kf-full { padding: 20px; } @media (min-width: 480px) { .kf-full { padding: 28px; } } .kf-full--narrow { padding: 16px; } .kf-full .kf-head { margin-bottom: 22px; } /* Doubled (and, isolated, tripled) so it beats core.css's 20px title in either mode. */ .kf-booking.kf-booking--full .kf-title, .kf-booking.kf-booking--isolated.kf-booking--full .kf-title { font-size: 24px; } /* The top region: the steps drawn across the page, kept there once chosen. */ .kf-top { display: flex; flex-direction: column; gap: 20px; margin: 0 0 28px; } .kf-top__step { min-width: 0; } .kf-full__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } .kf-full__main { min-width: 0; scroll-margin-top: var(--kf-scroll-offset, 80px); } .kf-full__main:focus { outline: none; } .kf-full__side { min-width: 0; } .kf-full__side:empty { display: none; } .kf-full__hint { padding: 20px 0; } /* Stacked: one column, the summary above the step and the rest below it. */ .kf-full--narrow .kf-full__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .kf-full--narrow .kf-top { margin-bottom: 20px; } .kf-full--narrow .kf-full__side .kf-side { padding: 18px; } /* A booking that is made or blocked stands alone, at the base width. */ .kf-full--done .kf-confirm, .kf-full--blocked .kf-blocked { max-width: 560px; margin-left: auto; margin-right: auto; } .kf-full--blocked .kf-blocked { align-items: flex-start; } /* --- v2/css/layout-inline.css --- */ /** * KF Booking v2 — the inline layout. The legacy look is the inline look: one column, the base * 560px width. Only the summary line's spacing is set here. */ .kf-booking--inline .kf-head + .kf-sumline { margin: -6px 0 18px; } /* --- v2/css/side.css --- */ /** * KF Booking v2 — the summary rows (clinic and time) shown above the details form, the inline * summary line and the full layout's right-hand column. * * Nothing that already shows is replayed: a value that fills in rises and fades in once, and a block * or summary item that is newly shown fades in (the JS remounts a value when it changes). * * A summary row the visitor can go back to carries a quiet Change button (.kf-side__change) in the * box and the column, and in the inline line the value itself is the link (.kf-sumline__btn). Both use * a doubled class so a host theme's button rules (the EE UK Elementor kit's padding, backgrounds) * cannot repaint them; the tap height comes from padding, which the isolation reset leaves alone. */ /* ---- Summary (details step) ---- */ .kf-summary { background: var(--kf-surface-alt); border-radius: var(--kf-radius); padding: 12px 14px; margin: 8px 0 18px; display: flex; flex-direction: column; gap: 6px; } .kf-summary > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .kf-summary__k { color: var(--kf-muted); flex: 0 0 auto; } .kf-summary__v { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: break-word; margin-left: auto; } /* ---- Inline layout: the one-line summary under the stepper ---- */ .kf-sumline { margin: 12px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.45; background: var(--kf-surface-alt); border-radius: var(--kf-radius-sm, 10px); color: var(--kf-muted); } .kf-sumline__item + .kf-sumline__item { animation: kf-fade var(--kf-dur-2, 220ms) var(--kf-ease, ease) backwards; } .kf-sumline__item + .kf-sumline__item::before { content: " \00b7 "; } .kf-sumline__v { color: var(--kf-text); font-weight: 600; } /* The value as a link: bold like the text around it, but accent coloured with a quiet underline; a soft accent wash on hover and a ring on keyboard focus. No theme padding, border or background. */ .kf-booking .kf-sumline__btn { display: inline; margin: 0; padding: 0; border: 0; min-height: 0; min-width: 0; box-shadow: none; background: none; color: var(--kf-accent); font: inherit; font-weight: 600; line-height: inherit; letter-spacing: inherit; text-transform: none; text-align: inherit; cursor: pointer; border-radius: 4px; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: background-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), text-decoration-color var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-booking .kf-sumline__btn:hover, .kf-booking .kf-sumline__btn:focus-visible { background: var(--kf-accent-soft, var(--kf-surface-alt)); color: var(--kf-accent); } .kf-booking .kf-sumline__btn:focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 2px; } /* ---- The Change button (the column's rows and the details-step box) ---- */ /* Small and quiet, after the value. The 32px tap height is padding; the matching negative margin keeps the row from growing, so a row with Change is as tall as one without. */ .kf-booking .kf-side__change { display: inline-flex; align-items: center; flex: 0 0 auto; margin: -7px 0; padding: 7px 4px; border: 0; border-radius: var(--kf-radius-sm, 10px); background: none; box-shadow: none; color: var(--kf-accent); font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: normal; text-transform: none; cursor: pointer; transition: background-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), color var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-booking .kf-side__change:hover, .kf-booking .kf-side__change:focus-visible { background: var(--kf-accent-soft, var(--kf-surface-alt)); color: var(--kf-accent); text-decoration: none; } .kf-booking .kf-side__change:focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 1px; } .kf-summary .kf-side__change { margin-left: 4px; align-self: center; } /* ---- Full layout: the right-hand column (summary, clinic details, notes, phone) ---- */ .kf-side { display: flex; flex-direction: column; gap: 22px; padding: 24px; background: var(--kf-surface-alt); border-radius: var(--kf-radius); } .kf-side--compact { padding: 14px 16px; gap: 12px; margin: 0 0 16px; } .kf-side__block { display: flex; flex-direction: column; gap: 10px; } .kf-side__block + .kf-side__block { padding-top: 22px; border-top: 1px solid var(--kf-border); } .kf-side--compact .kf-side__block + .kf-side__block { padding-top: 12px; } .kf-side__title { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--kf-text); } .kf-side__rows { margin: 0; display: flex; flex-direction: column; gap: 8px; } .kf-side__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; } .kf-side__row dt { margin: 0; color: var(--kf-muted); flex: 0 0 auto; } .kf-side__row dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: break-word; } .kf-side__row dd:has( > .kf-side__change ) { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 10px; } .kf-side__val { min-width: 0; overflow-wrap: break-word; } .kf-side__row.is-empty dd { color: var(--kf-muted); font-weight: 400; } .kf-side__row:not(.is-empty) dd { animation: kf-enter var(--kf-dur-2, 220ms) var(--kf-ease, ease) backwards; } .kf-side__details, .kf-side__notes, .kf-side__contact { animation: kf-fade var(--kf-dur-2, 220ms) var(--kf-ease, ease) backwards; } .kf-side__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; } .kf-side__clinic { margin: 0; font-size: 14px; color: var(--kf-muted); } .kf-side__phone { font-size: 18px; font-weight: 700; color: var(--kf-accent); text-decoration: none; overflow-wrap: anywhere; } .kf-side__phone:hover { text-decoration: underline; } .kf-side__hours { margin: 0; font-size: 13px; line-height: 1.4; color: var(--kf-muted); overflow-wrap: break-word; } /* The config's notes (DK): a glyph or a small image, then the text. The icon's size is doubled so a host theme's svg and img rules cannot stretch it. */ .kf-side__notelist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; } .kf-side__note { display: flex; align-items: flex-start; gap: 10px; } .kf-side__notetext { min-width: 0; overflow-wrap: break-word; } .kf-booking .kf-side__noteicon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; max-width: none; } .kf-booking svg.kf-side__noteicon { fill: none; stroke: var(--kf-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .kf-booking .kf-side__noteicon--img { object-fit: contain; border-radius: var(--kf-radius-sm, 10px); } .kf-booking.kf-booking--isolated .kf-side__title { color: var(--kf-text); font-size: 16px; } .kf-booking.kf-booking--isolated .kf-side__change { padding: 7px 4px; margin: -7px 0; font-size: 13px; line-height: 18px; background: none; color: var(--kf-accent); } .kf-booking.kf-booking--isolated .kf-sumline__btn { padding: 0; margin: 0; background: none; color: var(--kf-accent); font-size: inherit; } .kf-booking.kf-booking--isolated .kf-side__phone { color: var(--kf-accent); text-decoration: none; } /* --- v2/css/clinic.css --- */ /** * KF Booking v2 — the clinic step: the clinic list (inline) and the clinic cards (full). * * Rows tint softly on hover and focus, nudge their "Select" and show the keyboard focus ring * inside the row (the row clips anything drawn outside it). Cards lift with a soft shadow on * hover and the chosen card carries an accent ring. A clinic's badge is a small pill beside its * name (.kf-loc__badge). Motion tokens come from the shell with * fallbacks, so this file stands alone. */ /* ---- Clinic list ---- */ .kf-locs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .kf-loc { border: 1px solid var(--kf-border); border-radius: var(--kf-radius); overflow: hidden; background: var(--kf-surface); transition: border-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), box-shadow var(--kf-dur-1, 140ms) var(--kf-ease, ease), background-color var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-loc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; } /* min-width:0 lets this flex child shrink so long addresses wrap instead of overflowing (and being clipped by .kf-loc's overflow:hidden). */ .kf-loc__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .kf-loc__name, .kf-loc__addr { overflow-wrap: break-word; word-break: break-word; } .kf-loc__name { font-weight: 700; font-size: 15px; } .kf-loc__addr { font-size: 13px; color: var(--kf-muted); line-height: 1.4; } .kf-loc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; } /* The badge: a small pill beside the name (DK's "Open Saturday"). Sized with a doubled class. */ .kf-booking .kf-loc__badge { display: inline-block; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--kf-accent-soft, var(--kf-surface-alt)); color: var(--kf-accent); font-size: 12px; font-weight: 700; line-height: 1.4; } .kf-loc__time { font-size: 13px; color: var(--kf-ok); font-weight: 600; margin-top: 2px; } .kf-loc__time--none { color: var(--kf-muted); font-weight: 400; } .kf-loc__cta { color: var(--kf-accent); font-weight: 700; font-size: 14px; white-space: nowrap; flex: 0 0 auto; transition: transform var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-loc--ok:hover, .kf-loc--ok:focus-within { border-color: var(--kf-accent); } /* Rows (not cards) take a calm tint on hover and focus, and the CTA nudges toward the click. */ .kf-loc--ok:not(.kf-loc--card):hover, .kf-loc--ok:not(.kf-loc--card):focus-within { background: var(--kf-accent-soft, var(--kf-surface-alt)); } .kf-loc--ok:hover .kf-loc__cta, .kf-loc--ok:focus-within .kf-loc__cta { transform: translateX(2px); } /* .kf-loc clips overflow, so the global outside focus ring would be cut off: draw it inside. */ /* Specificity beats core.css's `.kf-booking button:focus-visible` offset; cards sit in padding and keep the outside ring. */ .kf-booking .kf-loc:not(.kf-loc--card) .kf-loc__btn:focus-visible { outline-offset: -3px; border-radius: calc(var(--kf-radius) - 1px); } .kf-loc:not(.kf-loc--card) .kf-loc__btn:active { background: var(--kf-accent-soft, var(--kf-surface-alt)); } .kf-loc__btn:disabled { cursor: default; opacity: .6; } .kf-loc__map { display: inline-block; padding: 0 16px 12px; font-size: 12px; color: var(--kf-muted); text-decoration: none; } .kf-loc__map:hover { color: var(--kf-accent); text-decoration: underline; } /* ---- Clinic cards (the full layout) ---- */ .kf-locs--cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .kf-loc--card { display: flex; flex-direction: column; } .kf-loc--card:hover { box-shadow: var(--kf-shadow-2, 0 4px 14px rgba(17,24,39,.09)); } .kf-loc--picked { border-color: var(--kf-accent); box-shadow: 0 0 0 1px var(--kf-accent), var(--kf-shadow-2, 0 4px 14px rgba(17,24,39,.09)); } .kf-loc__photo { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--kf-surface-alt); } .kf-loc__card { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 16px; } .kf-loc--card .kf-loc__time { margin-top: 0; } .kf-loc--card .kf-loc__map { padding: 0; align-self: flex-start; } .kf-loc__hours { display: flex; flex-direction: column; gap: 2px; } .kf-loc__label { font-size: 12px; font-weight: 700; color: var(--kf-muted); } .kf-loc__hourlist { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; overflow-wrap: break-word; } .kf-loc__btn--card { justify-content: center; margin-top: auto; padding: 11px 14px; text-align: center; border: 1.5px solid var(--kf-accent); border-radius: 10px; background: var(--kf-surface); color: var(--kf-accent); font: inherit; font-weight: 700; font-size: 14px; transition: background-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), color var(--kf-dur-1, 140ms) var(--kf-ease, ease), transform var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-loc__btn--card:active { transform: translateY(1px); } .kf-loc__btn--card:not(:disabled):hover, .kf-loc--picked .kf-loc__btn--card { background: var(--kf-accent); color: var(--kf-on-accent); } .kf-booking.kf-booking--isolated .kf-loc__btn { background: none; color: inherit; } .kf-booking.kf-booking--isolated .kf-loc:not(.kf-loc--card) .kf-loc__btn:active { background: var(--kf-accent-soft, var(--kf-surface-alt)); } .kf-booking.kf-booking--isolated .kf-loc__btn--card { background: var(--kf-surface); color: var(--kf-accent); border-color: var(--kf-accent); } .kf-booking.kf-booking--isolated .kf-loc__btn--card:not(:disabled):hover, .kf-booking.kf-booking--isolated .kf-loc--picked .kf-loc__btn--card { background: var(--kf-accent); color: var(--kf-on-accent); } /* --- v2/css/person.css --- */ /** * KF Booking v2 — the person step: the availability check and the no-availability message. */ .kf-person__checking { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--kf-muted); } .kf-person__none { margin: 0 0 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; background: var(--kf-surface-alt); border: 1px solid var(--kf-border); border-radius: var(--kf-radius); color: var(--kf-text); } /* --- v2/css/qualify.css --- */ /** * KF Booking v2 — the qualify step: the band cards and the Blocked screen (message plus the * Change my answer and Start again buttons). */ /* ---- Band cards ---- */ .kf-bands { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .kf-band { margin: 0; border: 1px solid var(--kf-border); border-radius: var(--kf-radius); overflow: hidden; background: var(--kf-surface); transition: border-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), background-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), box-shadow var(--kf-dur-1, 140ms) var(--kf-ease, ease); } /* A calm tint and a hairline shadow on hover and keyboard focus; the border turns accent as before. */ .kf-band:hover, .kf-band:focus-within { border-color: var(--kf-accent); background: var(--kf-accent-soft, var(--kf-surface-alt)); box-shadow: var(--kf-shadow-1, 0 1px 2px rgba(17, 24, 39, .06)); } .kf-band__btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; background: none; border: 0; cursor: pointer; text-align: start; color: inherit; font: inherit; } .kf-band__btn.has-image { padding-inline-start: 14px; } .kf-booking .kf-band__btn:focus-visible { outline-offset: -3px; } .kf-band__img { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--kf-radius) - 4px); background: var(--kf-surface-alt); } /* min-width:0 lets the text shrink and wrap rather than push the marker off the card. */ .kf-band__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .kf-band__label, .kf-band__text { overflow-wrap: break-word; word-break: break-word; white-space: normal; } .kf-band__label { font-weight: 700; font-size: 15px; } .kf-band__text { font-size: 13px; color: var(--kf-muted); line-height: 1.4; } /* The marker closes every card, with or without an image, so a card never looks unfinished. */ .kf-band__go { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--kf-border); box-sizing: border-box; transition: border-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), background-color var(--kf-dur-2, 220ms) var(--kf-ease, ease), box-shadow var(--kf-dur-2, 220ms) var(--kf-ease, ease), transform var(--kf-dur-2, 220ms) var(--kf-ease, ease); } .kf-band__btn:hover .kf-band__go, .kf-band__btn.is-on .kf-band__go { border-color: var(--kf-accent); } .kf-band__btn.is-on .kf-band__go { background: var(--kf-accent); box-shadow: inset 0 0 0 3px var(--kf-surface); } /* The ring grows a little on hover and fills with the accent while pressed; the card sinks 1px. */ .kf-band__btn:hover .kf-band__go { transform: scale(1.08); } .kf-band__btn:active .kf-band__go { background: var(--kf-accent); box-shadow: inset 0 0 0 3px var(--kf-surface); } .kf-band__btn:active { transform: translateY(1px); } /* Doubled class: a host theme's button padding (Elementor kits use `.elementor-kit-N button`, which outranks one class) must not shrink the card below a 48px tap target, and a theme's `white-space: nowrap` on buttons must not clip a band's text inside the card. */ .kf-booking .kf-band__btn { padding: 16px; white-space: normal; } .kf-booking .kf-band__btn.has-image { padding-inline-start: 14px; } @media (max-width: 480px) { .kf-band__img { width: 52px; height: 52px; } .kf-booking .kf-band__btn { gap: 12px; padding: 14px 12px; } } /* ---- Blocked screen ---- */ /* The same calm neutral card as the shell's blocked frame, so a refusal reads as a deliberate state. */ .kf-blocked.kf-panel { padding: 16px; background: var(--kf-surface-alt); border-radius: var(--kf-radius); } .kf-blocked__msg { margin: 0 0 16px; font-size: 15px; line-height: 1.5; overflow-wrap: break-word; color: var(--kf-text); } /* Change my answer and Start again sit side by side with a gap, and wrap if the room is tight. */ .kf-blocked__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; width: 100%; } /* Doubled class: a host theme's button padding (the EE UK Elementor kit's `.elementor-kit-9 button`) must not shrink the buttons below a 48px tap target. */ .kf-booking .kf-blocked__actions .kf-btn { min-height: 48px; padding: 12px 18px; } /* On a phone the two buttons stack at full width, the primary first. */ @media (max-width: 480px) { .kf-blocked__actions { flex-direction: column; } .kf-booking .kf-blocked__actions .kf-btn { width: 100%; } } .kf-booking.kf-booking--isolated .kf-band__btn { background: none; color: inherit; transition: transform var(--kf-dur-1, 140ms) var(--kf-ease, ease); } /* --- v2/css/datetime.css --- */ /** * KF Booking v2 — the date and time step: calendar, day times and time chips. */ /* ---- Calendar ---- */ /* Each screen (the date grid, then the times) takes the full width of its container. */ .kf-panel--cal, .kf-panel--times { width: 100%; } .kf-cal { width: 100%; } .kf-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .kf-cal__title { font-weight: 700; font-size: 16px; } .kf-cal__nav { width: 44px; height: 44px; border-radius: var(--kf-radius-sm, 10px); border: 1px solid var(--kf-border); background: var(--kf-surface); color: var(--kf-text); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color var(--kf-dur-1, 140ms) var(--kf-ease, ease), color var(--kf-dur-1, 140ms) var(--kf-ease, ease); } .kf-cal__nav:disabled { opacity: .35; cursor: default; } .kf-cal__nav:not(:disabled):hover { border-color: var(--kf-accent); color: var(--kf-accent); } .kf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .kf-cal__grid--dow { margin-bottom: 4px; } /* The day grid is keyed by month, so a month change remounts it and this fade replays. */ .kf-cal__grid:not(.kf-cal__grid--dow) { animation: kf-fade var(--kf-dur-2, 220ms) var(--kf-ease, ease) backwards; } /* While the month is still loading, unavailable days pulse softly instead of reading as "no availability". */ .kf-cal__grid.is-loading .kf-cal__cell.is-disabled:not(.is-closed) { animation: kf-pulse 1.4s ease-in-out infinite; } .kf-cal__dow { text-align: center; font-size: 11px; color: var(--kf-muted); font-weight: 600; padding: 4px 0; } /* Day tiles (accent-ring affordance; no dot). Available days read as tappable via four non-hue cues at once: white fill, a 2px accent ring, bold weight and a soft lift — legible down to ~34px on small phones. */ .kf-cal__cell { position: relative; aspect-ratio: 1 / 1; min-height: 40px; /* Every cell carries a 2px border (transparent unless it's the accent ring), so the border-box content area is identical across all states and the centred number never shifts by a sub-pixel between available/unavailable. */ border: 2px solid transparent; border-radius: var(--kf-radius-sm, 10px); background: var(--kf-surface-alt); color: var(--kf-text); font-size: 14px; line-height: 1; cursor: pointer; margin: 0; padding: 0; text-indent: 0; /* Centre the number robustly: flex handles it on modern engines, and text-align is the fallback if a browser mis-handles flex/grid on a