/* mm theme - Contact / booking page */

.contact{padding:48px 0 60px;}

/* hidden must beat the display:grid/flex rules below */
.contact [hidden]{display:none !important;}

/* Centred page heading */
.contact-head{
  text-align:center;
  margin-bottom:32px;
}
.contact-head h1{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(30px,5vw,46px);
  font-weight:700;
  letter-spacing:-0.01em;
}

/* Back to home link */
.contact-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:22px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .15s;
}
.contact-back:hover{color:var(--moss);}
.contact-back svg{flex:none;}

/* The bordered box */
.mm-booking{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  padding:30px;
}

/* Two columns inside the box, with a divider */
.mm-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.mm-col-cal,
.mm-col-times{padding-right:34px;}
.mm-col-intro,
.mm-col-form{
  padding-left:34px;
  border-left:1px solid var(--line);
}

/* ── Calendar ─────────────────────────────────────────────────────── */
.mm-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.mm-cal-month{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.mm-cal-nav{
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s;
}
.mm-cal-nav:hover:not(:disabled){border-color:var(--moss); color:var(--moss);}
.mm-cal-nav:disabled{opacity:.35; cursor:default;}
.mm-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
}
.mm-cal-dow{
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  padding-bottom:6px;
}
.mm-cal-day{
  aspect-ratio:1/1;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--cloud-dim);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.mm-cal-day:hover{background:var(--mint); color:var(--moss-deep);}
.mm-cal-day.is-today{border-color:var(--moss);}
.mm-cal-day.is-selected{background:var(--moss); color:var(--white); border-color:var(--moss);}
.mm-cal-day.is-off{background:transparent; color:var(--line); cursor:default;}

/* ── Intro column (step 1, right) ─────────────────────────────────── */
.mm-col-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mm-intro-avatar{
  width:84px;
  height:84px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid var(--line);
  margin-bottom:20px;
}
.contact-copy{font-size:16px; color:var(--ink-soft);}
.contact-copy p + p{margin-top:12px;}
.contact-copy a{color:var(--moss); text-decoration:underline;}
.contact-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-list li{
  position:relative;
  padding-left:26px;
  font-size:15px;
  color:var(--ink);
}
.contact-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--moss);
}
.contact-alt{margin-top:22px; font-size:14px; color:var(--ink-soft);}
.contact-alt a{color:var(--moss); text-decoration:underline;}

/* ── Times column (step 2, left) ──────────────────────────────────── */
.mm-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:none;
  background:none;
  padding:0;
  margin-bottom:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .15s;
}
.mm-back:hover{color:var(--moss);}
.mm-times-date{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:16px;
}
.mm-slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:8px;
}
.mm-slot{
  padding:9px 6px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--white);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.mm-slot:hover{border-color:var(--moss); color:var(--moss);}
.mm-slot.is-selected{background:var(--moss); border-color:var(--moss); color:var(--white);}
.mm-no-slots{font-size:14px; color:var(--ink-soft); grid-column:1/-1; margin:0;}

/* ── Details form (step 2, right) ─────────────────────────────────── */
.mm-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mm-field{margin-bottom:14px;}
.mm-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.mm-field .mm-opt{color:var(--ink-soft); font-weight:400;}
.mm-field input,
.mm-field textarea,
.mm-field select{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:11px 13px;
  font:inherit;
  font-size:15px;
  background:var(--cloud-dim);
  color:var(--ink);
}
.mm-field input:focus,
.mm-field textarea:focus,
.mm-field select:focus{outline:none; border-color:var(--moss); background:var(--white);}
.mm-field input.is-invalid,
.mm-field textarea.is-invalid,
.mm-field select.is-invalid{border-color:var(--coral);}
.mm-field select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a6a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:18px;
}
.mm-book-btn{
  width:100%;
  margin-top:4px;
  padding:14px 18px;
  border:none;
  border-radius:100px;
  background:var(--moss);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s;
}
.mm-book-btn:hover:not(:disabled){background:var(--moss-deep);}
.mm-book-btn:disabled{opacity:.75; cursor:default;}
.mm-error{display:block; margin-top:10px; font-size:13px; color:var(--coral);}

/* ── Confirmation ─────────────────────────────────────────────────── */
.mm-confirmed{text-align:center; padding:30px 12px;}
.mm-check{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--moss);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.mm-confirmed h3{font-family:'Space Grotesk', sans-serif; font-size:22px; margin-bottom:8px;}
.mm-confirmed p{color:var(--ink-soft); font-size:15px; margin:0 auto; max-width:360px;}
.mm-confirmed-time{
  margin-top:12px !important;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--moss) !important;
}

/* ── Spinner ──────────────────────────────────────────────────────── */
.mm-spinner{
  width:26px;
  height:26px;
  border:3px solid var(--line);
  border-top-color:var(--moss);
  border-radius:50%;
  margin:14px auto;
  animation:mm-spin .8s linear infinite;
}
.mm-spinner-sm{
  width:15px;
  height:15px;
  border-width:2px;
  margin:0;
  border-color:rgba(255,255,255,.4);
  border-top-color:#fff;
  display:inline-block;
  vertical-align:middle;
}
@keyframes mm-spin{to{transform:rotate(360deg);}}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:780px){
  .mm-cols{grid-template-columns:1fr;}
  .mm-col-cal,
  .mm-col-times{padding-right:0; margin-bottom:24px;}
  .mm-col-intro,
  .mm-col-form{
    padding-left:0;
    border-left:none;
    border-top:1px solid var(--line);
    padding-top:24px;
  }
}
@media (max-width:460px){
  .mm-row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .mm-spinner{animation:none;}
}