/* A stand-in for the host site's theme: a dark page (the marketing site's navy), a page title and the site's
   fonts (DM Sans for copy, Manrope for the title).
   The plugin's own output stays exactly as the plugin styles it: light. The booking wizard brings its own
   light wrapper; the calendar and schedule sit on a light content panel, as they would in a site's content area. */
/* Nearly every WordPress theme ships this reset, and the plugin's booking layout relies on it. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; background: #0e131f; }
body {
  margin: 0;
  background: #0e131f;
  color: #1f2937;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
/* Form controls take the page font, as they do in practically every theme. */
button, input, select, textarea { font-family: inherit; }
.mk-page { max-width: var(--mk-width, 1040px); margin: 0 auto; padding: var(--mk-pad, 40px 32px 48px); }
.mk-title { margin: 0 0 28px; font-family: "Manrope", system-ui, sans-serif; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: #eaedf6; }
.mk-panel { padding: 28px; border-radius: 14px; background: #f5f6f8; color: #1f2937; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
/* The wizard's wrapper gets the same lift off the dark page. */
.mk-page .gic-booking-wrapper { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
@media (max-width: 600px) {
  .mk-page { padding: 24px 16px 32px; }
  .mk-title { font-size: 26px; margin-bottom: 20px; }
  .mk-panel { padding: 14px; border-radius: 12px; }
}

/* Static stand-in for Stripe's Payment Element ("stripe" appearance, tabs layout). Like the real element it
   adapts to the width it is given, not to the viewport: in a narrow column the wallet tabs collapse into a
   "more" tab and Country / ZIP stack, so no label or value ever wraps. */
.mk-stripe { container: mkstripe / inline-size; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "DM Sans", sans-serif; color: #30313d; }
.mk-stripe-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mk-stripe-tab { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid #e6e6e6; border-radius: 5px; background: #fff; color: #6d6e78; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.02); }
.mk-stripe-tab.is-selected { border-color: #0570de; color: #0570de; box-shadow: 0 0 0 1px #0570de, 0 1px 1px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.02); }
.mk-stripe-tab em { display: none; font-style: normal; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.mk-stripe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-stripe-field { display: block; margin: 0; min-width: 0; }
.mk-stripe-field.mk-span-2 { grid-column: span 2; }
.mk-stripe-field > span { display: block; margin-bottom: 4px; font-size: 14.88px; font-weight: 400; color: #30313d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stripe-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #e6e6e6; border-radius: 5px; background: #fff; font-size: 16px; line-height: 1.15; color: #30313d; white-space: nowrap; box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.02); }
.mk-stripe-input b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.mk-stripe-input svg { flex: none; color: #a3a4ad; }
.mk-stripe-input i { flex: none; font-style: normal; color: #6d6e78; }
@container mkstripe (max-width: 360px) {
  .mk-stripe-tabs { grid-template-columns: 1fr 1fr 46px; }
  .mk-stripe-tab { padding: 9px 10px; font-size: 13px; }
  .mk-stripe-tab--more { align-items: center; justify-content: center; padding: 0; }
  .mk-stripe-tab--more svg, .mk-stripe-tab--more span { display: none; }
  .mk-stripe-tab--more em { display: block; }
  .mk-stripe-field > span { font-size: 13.5px; }
  .mk-stripe-field--wide { grid-column: span 2; }
  .mk-stripe-input { padding: 11px; font-size: 15px; }
}

/* ---- The copy embedded in the website (public/demo carries data-demo on <html>) ----
   In the hero the site draws the card around it, so the page chrome disappears and the wizard fills the
   frame. Inside a device frame in the lightbox (.mk-framed) it keeps the full-page look above. */
html[data-demo] { scrollbar-width: thin; scrollbar-color: #38405f transparent; }
html[data-demo]:not(.mk-framed),
html[data-demo]:not(.mk-framed) body { background: #141b2a; }
html[data-demo]:not(.mk-framed) .mk-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-demo]:not(.mk-framed) .mk-page { max-width: 760px; padding: 0; }
html[data-demo]:not(.mk-framed) .mk-page .gic-booking-wrapper { max-width: none; margin: 0; padding: 22px 22px 26px; border-radius: 0; box-shadow: none; background: transparent; }
@media (max-width: 520px) {
  html[data-demo]:not(.mk-framed) .mk-page .gic-booking-wrapper { padding: 16px 14px 20px; }
}
/* Room around the Next button when it is scrolled into view */
html[data-demo] .gic-next-step { scroll-margin-block: 28px; }