/* ====== Brand & Layout ====== */
#mpc-booking {
  --mpc-bg: #ffffff;
  --mpc-card: #ffffff;
  --mpc-text: #000000;
  --mpc-muted: #444444;
  --mpc-border: #e6e6e6;

  /* Brand accents */
  --mpc-accent-a: #ff5400; /* orange */
  --mpc-accent-b: #0072ff; /* blue */

  /* Components */
  --mpc-radius: 8px;                 /* small curve */
  --mpc-shadow: 0 10px 30px rgba(0,0,0,.06);
  --mpc-focus: 2px solid #000;

  /* Typography */
  --mpc-heading: "Bungee", system-ui, sans-serif;
  --mpc-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  max-width: 1080px;                 /* your requested cap */
  margin: 24px auto;
  padding: 0 16px;
  color: var(--mpc-text);
  font-family: var(--mpc-body);
}

/* Card wrapper */
#mpc-booking .mpc-card {
background: #ffffff;
background: -webkit-linear-gradient(36deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 75%, rgba(217, 217, 217, 1) 100%);
background: -moz-linear-gradient(36deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 75%, rgba(217, 217, 217, 1) 100%);
background: linear-gradient(36deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 75%, rgba(217, 217, 217, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#D9D9D9", GradientType=0);
box-shadow: -2px 4px 21px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: -2px 4px 21px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 21px -2px rgba(0,0,0,0.75);
  border: 1px solid var(--mpc-border);
  border-radius: 14px;
  box-shadow: var(--mpc-shadow);
  padding: clamp(18px, 3vw, 28px);
}

/* Headings -> Bungee, large, in-your-face */
#mpc-booking header h2 {
  font-family: var(--mpc-heading);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 6px;
  color: var(--mpc-text);
}
#mpc-booking header .desc {
  margin: 0 0 14px;
  color: var(--mpc-muted);
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 600; /* bolder body copy */
}

/* 6px orange bar next to the heading */
#mpc-booking header .mpc-title {
  line-height: 1.05;
  padding-top: 10px;
}

/* Inputs basic */
#mpc-booking label { display:block; margin: 0 0 8px; font-weight: 700; }
#mpc-booking input[type="text"],
#mpc-booking input[type="email"],
#mpc-booking input[type="tel"],
#mpc-booking input[type="date"],
#mpc-booking select {
  width: 100%;
  padding: 14px 14px;
  border: 2px solid var(--mpc-border);
  border-radius: var(--mpc-radius);
  background: var(--mpc-bg);
  color: var(--mpc-text);
  font-weight: 700; /* fat feel even in fields */
}
#mpc-booking input:focus,
#mpc-booking select:focus { outline: var(--mpc-focus); outline-offset: 2px; }

/* Two-up row when space allows */
@media (min-width: 820px){
  #mpc-booking .row { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ====== Slots block "on its own row" ====== */
#mpc-booking .slots-section {
  margin: 18px 0 8px;
  padding: 16px;
  border: 2px solid var(--mpc-border);
  border-radius: 16px;
  background: #fff;
}

/* Always-visible grid; large and chunky buttons */
#mpc-booking .slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px){ #mpc-booking .slots { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px){ #mpc-booking .slots { grid-template-columns: repeat(6, 1fr); } }

#mpc-booking .slot {
  appearance: none;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 100%;
  min-height: 56px;                 /* big targets */
  padding: 12px 14px;
  border: 3px solid var(--mpc-text);/* thick border for bold look */
  border-radius: var(--mpc-radius); /* small curve */
  background: #fff;
  color: #000;
  font-family: var(--mpc-heading);  /* Bungee for buttons */
  font-size: clamp(16px, 2.4vw, 18px);
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
#mpc-booking .slot:hover { transform: translateY(-1px); }
#mpc-booking .slot:focus { outline: var(--mpc-focus); outline-offset: 2px; }

/* Selected state: loud gradient fill */
#mpc-booking .slot[aria-checked="true"] {
  background: linear-gradient(90deg, var(--mpc-accent-a), var(--mpc-accent-b));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Disabled/placeholder */
#mpc-booking .slot[disabled],
#mpc-booking .slot[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  border-color: var(--mpc-border);
  background: #fafafa;
}

/* Skeleton shimmer while checking availability (optional) */
#mpc-booking .slot.is-loading { position: relative; overflow: hidden; }
#mpc-booking .slot.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
  animation: mpc-shimmer 1.1s linear infinite;
  border-radius: inherit;
}
@keyframes mpc-shimmer { from{ transform: translateX(-100%);} to{ transform: translateX(100%);} }

/* ====== Summary & CTA ====== */
#mpc-booking .summaryBox {
  margin-top: 18px;
  border: 2px solid var(--mpc-border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
#mpc-booking .summaryBox summary {
  font-family: var(--mpc-heading);
  font-size: clamp(18px, 2.4vw, 22px);
  cursor: pointer;
}
#mpc-booking .summaryBox hr { border: 0; border-top: 1px solid var(--mpc-border); margin: 10px 0; }
#mpc-booking .small { color: var(--mpc-muted); font-weight: 700; }

#mpc-booking .actions { display:flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; padding-top: 8px; }
#mpc-booking .cta {
  appearance: none; border: none;
  background: linear-gradient(90deg, var(--mpc-accent-a), var(--mpc-accent-b));
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--mpc-heading);
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
#mpc-booking .cta:hover { transform: translateY(-1px); }
#mpc-booking .cta:focus { outline: var(--mpc-focus); outline-offset: 2px; }
#mpc-booking .cta[disabled]{ opacity:.6; cursor:not-allowed; }

#mpc-booking .errors { color: #b00020; font-weight: 800; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #mpc-booking .slot, #mpc-booking .cta { transition: none !important; }
  #mpc-booking .slot.is-loading::after { animation: none; }
}

/*#mpc-booking .mpc-layout {*/
/*  display: grid;*/
/*  gap: 16px;*/
/*}*/
/*@media (min-width: 960px) {*/
/*  #mpc-booking .mpc-layout {*/
/*    grid-template-columns: 2fr 1fr;*/
/*    align-items: start;*/
/*  }*/
/*}*/
/*#mpc-booking .summaryWrap {*/
/*  position: sticky;*/
/*  top: 16px;*/
/*}*/

/* Two-up row for Service + Date */
#mpc-booking .row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 640px) {
  #mpc-booking .row-two { grid-template-columns: 1fr; }
}

#mpc-booking .field-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mpc-booking .mpc-field-locked {
  margin: 0;
}

.formWrap select.mpc-select-locked:disabled {
  opacity: 1;
  color: var(--mpc-fg, #111);
  background: #f9fafb;
  cursor: not-allowed;
  -webkit-text-fill-color: var(--mpc-fg, #111);
}

#mpc-booking select.mpc-select-locked:disabled {
  color: var(--mpc-text);
  background: #f9fafb;
  border-color: var(--mpc-border);
  opacity: 1;
  cursor: not-allowed;
}

/* Big, bold labels (match slots heading look) */
#mpc-booking .mpc-label {
  display: block;
  font-family: var(--mpc-heading);
  font-size: clamp(18px, 2.2vw, 20px);
  letter-spacing: .01em;
  margin: 0 0 8px;
}

/* Keep inputs tidy under big labels */
#mpc-booking .field { margin-bottom: 14px; }

/* Card panel style shared by left + right */
#mpc-booking .mpc-panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 16px;
  height: 100%; /* let grid stretch both columns to equal height */
}

/* Base: stack (form on top, summary below) */
#mpc-booking .mpc-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "form"
    "summary";
}

/* Children map to areas */
#mpc-booking .mpc-form   { grid-area: form; }
#mpc-booking .mpc-summary{ grid-area: summary; }

/* ≥1281px: two columns, 2/3 : 1/3 */
@media (min-width: 1281px) {
  #mpc-booking .mpc-layout {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "form summary";
    align-items: stretch; /* equal-height panels */
  }
}

/* Right column: sticky lives INSIDE the panel so heights match */
#mpc-booking .summaryWrap .mpc-sticky {
  position: sticky;
  top: 16px;
}

/* Labels & two-up row (unchanged from last step, kept for completeness) */
#mpc-booking .row-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 640px){ #mpc-booking .row-two { grid-template-columns:1fr; } }
#mpc-booking .mpc-label {
  display:block; font-family:var(--mpc-heading);
  font-size: clamp(18px, 2.2vw, 20px); letter-spacing:.01em; margin:0 0 8px;
}
#mpc-booking .field { margin-bottom:14px; }

/* Optional: make the <summary> inside the right card look like a header */
#mpc-booking .summaryBox > summary {
  font-family: var(--mpc-heading);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 20px);
}

/* ===== Step Progress ===== */
#mpc-booking .mpc-steps {
  max-width: 1080px; margin: 0 auto 14px; padding: 0 4px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  align-items: center;
}
#mpc-booking .mpc-step {
  position: relative; text-align: center; list-style: none;
  font-family: var(--mpc-heading); user-select: none;
}
#mpc-booking .mpc-step__label {
  display: block; font-size: 14px; letter-spacing: .02em;
}
#mpc-booking .mpc-step__dot {
  width: 26px; height: 26px; border-radius: 999px; margin: 0 auto 6px;
  background: #e5e7eb; color:#000; display:grid; place-items:center;
  font-weight: 700; font-size: 13px;
}
#mpc-booking .mpc-step::before, 
#mpc-booking .mpc-step::after {
  content:""; position:absolute; top:13px; height:3px; background:#e5e7eb; width:50%;
}
#mpc-booking .mpc-step::before { left:-4px; transform:translateX(-50%); }
#mpc-booking .mpc-step::after  { right:-4px; transform:translateX(50%); }
#mpc-booking .mpc-step:first-child::before { display:none; }
#mpc-booking .mpc-step:last-child::after   { display:none; }

/* Active/complete states */
#mpc-booking .mpc-step.is-active .mpc-step__dot {
  background: #000; color:#fff;
}
#mpc-booking .mpc-step.is-complete .mpc-step__dot {
  background: linear-gradient(90deg, #ff5400, #0072ff); color:#fff;
}
#mpc-booking .mpc-step.is-complete::before { background: linear-gradient(90deg, #ff5400, #0072ff); }
#mpc-booking .mpc-step.is-complete::after  { background: linear-gradient(90deg, #ff5400, #0072ff); }

/* Better spacing on small screens */
@media (max-width: 640px){
  #mpc-booking .mpc-step__label { font-size: 12px; }
}

#mpc-booking [aria-invalid="true"]{ border-color:#d92d20; outline:0; }
#mpc-booking .field-error{ color:#d92d20; font-size:12px; margin-top:6px; min-height:1em; }

#mpc-booking .errors { white-space: pre-line; } /* render \n as line breaks */

/* --- Controls: make input, select, textarea identical --- */
:root{
  --mpc-font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --mpc-bg: #fff;
  --mpc-fg: #111;
  --mpc-muted: #6b7280;
  --mpc-border: #d1d5db;
  --mpc-border-focus: #2563eb;   /* focus ring color */
  --mpc-error: #dc2626;
  --mpc-radius: 10px;
}

.formWrap .field .mpc-label{
  display:block;
  font: 600 0.95rem/1 var(--mpc-font);
  margin: 0 0 6px;
}

/* Shared control styles (inputs, selects, and textarea match) */
.formWrap input[type="text"],
.formWrap input[type="tel"],
.formWrap input[type="email"],
.formWrap input[type="date"],
.formWrap select,
.formWrap textarea{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: 400 1rem/1.35 var(--mpc-font);
  color: var(--mpc-fg);
  background: var(--mpc-bg);
  border: 1px solid var(--mpc-border);
  border-radius: var(--mpc-radius);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) inset;
}

/* Focus ring */
.formWrap input:focus,
.formWrap select:focus,
.formWrap textarea:focus{
  border-color: var(--mpc-border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Placeholder */
.formWrap input::placeholder,
.formWrap textarea::placeholder{
  color: var(--mpc-muted);
}

/* Error state (you’re already toggling aria-invalid in JS) */
.formWrap [aria-invalid="true"]{
  border-color: var(--mpc-error);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

/* Disabled state */
.formWrap input:disabled,
.formWrap select:disabled,
.formWrap textarea:disabled{
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* --- Textarea-specific tweaks to “feel” like inputs --- */
.formWrap textarea{
  resize: vertical;       /* allow vertical resize only (or 'none' to lock) */
  min-height: 120px;      /* roughly ~3 rows height */
  line-height: 1.35;      /* matches input line-height above */
}

/* Tiny helper/counter line under textarea */
.formWrap .field .small{
  color: var(--mpc-muted);
  font-size: .85rem;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Error text blocks below fields */
.formWrap .field-error{
  color: var(--mpc-error);
  font-size: .85rem;
  margin-top: 6px;
}

@media(max-width: 1060px) {
    #banner-sub-title h3 {
        font-size: 18px;
        line-height: 1.3rem;
    }
}

.mpc-hint { font-size: .95rem; color:#6b7280; margin: 4px 0 8px; }

.is-hidden{display:none;}

.mpc-hint, .mpc-slot-hint {
    box-sizing: border-box;
    padding: 8px !important;
    background-color: #f5f5f5;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px dashed lightgrey;
}

/* Step 1 section grouping */
#mpc-booking .mpc-form-section {
  margin: 0;
  padding: 0;
}

#mpc-booking .mpc-form-section--separated {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--mpc-border);
}

#mpc-booking .mpc-section-title {
  font-family: var(--mpc-heading);
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--mpc-text);
}

#mpc-booking .mpc-section-helper {
  margin: 0 0 18px;
  color: var(--mpc-muted);
  font-size: .95rem;
  line-height: 1.5;
  font-weight: 600;
}

#mpc-booking .mpc-form-section .field-stack {
  gap: 14px;
}

#mpc-booking .mpc-form-section .field-stack .field:last-child {
  margin-bottom: 0;
}

#mpc-booking .mpc-loc-mode-group {
  margin-top: 0;
}

#mpc-booking .mpc-loc-mode-option {
  display: block;
  margin: .35rem 0;
}

#mpc-booking .mpc-slots-hint {
  margin-top: 4px;
}

#mpc-booking .mpc-property-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

#mpc-booking .mpc-property-fields .field:last-child {
  margin-bottom: 0;
}

#mpc-booking .mpc-form-section[hidden] {
  display: none !important;
}

/* Booking form placeholders – very light gray */
#mpc-booking input::placeholder,
#mpc-booking textarea::placeholder {
  color: #c7ccd3;   /* pick your light gray */
  opacity: 1;       /* override Safari/Firefox default fade */
}

/* Optional: slightly darker on focus for readability */
#mpc-booking input:focus::placeholder,
#mpc-booking textarea:focus::placeholder {
  color: #b0b6bf;
}

/* Disabled fields (optional) */
#mpc-booking input:disabled::placeholder,
#mpc-booking textarea:disabled::placeholder {
  color: #d9dde2;
}

/* Top error summary banner */
#mpcFollowup .mpc-error-banner{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#9f1239;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  margin:0 0 12px;
}

/* Field-level error styles (ACF adds .-error and an .acf-error-message) */
#mpcFollowup .acf-field.-error .mpc-field-wrap{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.12) !important;
  background:#fff;
}
#mpcFollowup .acf-error-message{
  display:block;               /* ensure it’s visible */
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#9f1239;
  border-radius:10px;
  padding:8px 10px;
  margin-top:6px;
  font-size:13px;
  font-weight:600;
}