/* Contact booking calendar — direct transfer of the completed v87 subsystem.
   Keep page-owned calendar geometry and interaction presentation intact; only
   shared typography/theme tokens and the current 920/921 page structure wrap it. */

body[data-page="contact"] .calendar-action-row{
  --calendar-action-center:50%;
  --calendar-action-stack-offset:1.5rem;
}
body[data-page="contact"] .calendar-action-row .calendar-book-action,
body[data-page="contact"] .calendar-action-row .calendar-message-action{
  top:var(--calendar-action-center);
  transition:
    top .28s cubic-bezier(.22,.61,.36,1),
    transform .18s ease,
    color .2s ease,
    opacity .2s ease,
    filter .2s ease,
    visibility 0s linear .2s;
}
body[data-page="contact"] .calendar-action-row.has-message-action .calendar-book-action{
  top:calc(var(--calendar-action-center) - var(--calendar-action-stack-offset));
}
body[data-page="contact"] .calendar-action-row .calendar-message-action{
  top:calc(var(--calendar-action-center) + var(--calendar-action-stack-offset));
}

body[data-page="contact"] .calendar-shell{
  min-width:0;
  overflow-anchor:none;
}
body[data-page="contact"] .calendar-panel{
  --calendar-times-space:3.48rem;
  --calendar-email-space:3.72rem;
  position:relative;
  isolation:isolate;
  width:100%;
  overflow:visible;
  padding:.82rem .88rem .78rem;
  border:0;
  background:transparent;
}
body[data-page="contact"] .calendar-panel::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  bottom:0;
  border:1px solid color-mix(in srgb,var(--hair) 84%,transparent);
  background:color-mix(in srgb,var(--bg) 91%,white 9%);
  transition:bottom .28s cubic-bezier(.22,.61,.36,1);
}
body[data-page="contact"] .calendar-panel:has(.calendar-times[hidden])::before{
  bottom:var(--calendar-times-space);
}
body[data-page="contact"] .calendar-panel:has(.booking-email-step:not([hidden]))::before{
  bottom:calc(-1 * var(--calendar-email-space));
}
html[data-theme="dark"] body[data-page="contact"] .calendar-panel::before{
  background:color-mix(in srgb,var(--bg) 88%,white 12%);
}
body[data-page="contact"] .calendar-toolbar{
  display:grid;
  grid-template-columns:1.8rem 1fr 1.8rem;
  align-items:center;
  gap:.35rem;
  margin-bottom:.72rem;
}
body[data-page="contact"] .calendar-month{
  text-align:center;
  color:var(--ink);
  font-size:.9rem;
  line-height:1.2;
}
body[data-page="contact"] .calendar-nav{
  appearance:none;
  width:1.8rem;
  height:1.8rem;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:1.1rem;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
body[data-page="contact"] .calendar-nav:hover:not(:disabled){
  color:var(--ink);
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  transform:scale(1.04);
}
body[data-page="contact"] .calendar-nav:disabled{
  opacity:.32;
  cursor:default;
}
body[data-page="contact"] .calendar-weekdays,
body[data-page="contact"] .calendar-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.18rem;
}
body[data-page="contact"] .calendar-days{grid-auto-rows:auto}
body[data-page="contact"] .calendar-weekdays{
  margin-bottom:.2rem;
  color:var(--muted);
  font-size:.64rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
body[data-page="contact"] .calendar-weekdays span{padding:.16rem 0}
body[data-page="contact"] .calendar-day{
  appearance:none;
  aspect-ratio:1;
  min-width:0;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--copy);
  font:inherit;
  font-size:.78rem;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease;
}
body[data-page="contact"] .calendar-day:hover:not(:disabled):not([aria-disabled="true"]){
  border-color:color-mix(in srgb,var(--ink) 18%,var(--hair));
  color:var(--ink);
  transform:translateY(-1px);
}
body[data-page="contact"] .calendar-day.is-today{
  color:color-mix(in srgb,var(--orange) 48%,var(--muted));
  font-weight:500;
}
body[data-page="contact"] .calendar-day.is-selected{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 8%,transparent);
  color:var(--ink);
}
body[data-page="contact"] .calendar-day:disabled{
  color:color-mix(in srgb,var(--muted) 48%,transparent);
  cursor:default;
}
body[data-page="contact"] .calendar-day.is-today:disabled,
body[data-page="contact"] .calendar-day.is-today[aria-disabled="true"]{
  color:color-mix(in srgb,var(--orange) 44%,var(--muted));
}
body[data-page="contact"] .calendar-day.is-today[aria-disabled="true"]{
  position:relative;
  cursor:default;
}
body[data-page="contact"] .calendar-day.is-today[aria-disabled="true"]::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:12;
  left:50%;
  bottom:calc(100% + .42rem);
  width:max-content;
  max-width:9.5rem;
  padding:.34rem .46rem;
  border:1px solid color-mix(in srgb,var(--hair) 88%,transparent);
  background:color-mix(in srgb,var(--bg) 94%,white 6%);
  color:var(--ink);
  box-shadow:0 .35rem 1rem color-mix(in srgb,var(--ink) 9%,transparent);
  font-size:.63rem;
  font-weight:400;
  line-height:1.25;
  letter-spacing:0;
  text-align:center;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,.16rem);
  transition:opacity .16s ease,transform .16s ease;
}
html[data-theme="dark"] body[data-page="contact"] .calendar-day.is-today[aria-disabled="true"]::after{
  background:color-mix(in srgb,var(--bg) 88%,white 12%);
}
body[data-page="contact"] .calendar-day.is-today[aria-disabled="true"]:is(:hover,:focus-visible)::after{
  opacity:1;
  transform:translate(-50%,0);
}
body[data-page="contact"] .calendar-day.is-blank{
  visibility:hidden;
  pointer-events:none;
}

body[data-page="contact"] .calendar-times{
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  height:2.86rem;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:auto;
  cursor:grab;
  margin-top:.78rem;
  padding:.78rem 0 0;
  border-top:1px solid color-mix(in srgb,var(--hair) 66%,transparent);
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:
    border-color .2s ease,
    opacity .18s ease,
    transform .28s cubic-bezier(.22,.61,.36,1);
}
body[data-page="contact"] .calendar-times::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none;
}
body[data-page="contact"] .calendar-times.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  user-select:none;
}
body[data-page="contact"] .calendar-times[hidden]{
  display:flex!important;
  height:2.86rem;
  margin-top:.78rem;
  padding:.78rem 0 0;
  border-top-color:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-.28rem);
}
body[data-page="contact"] .time-slot{
  appearance:none;
  flex:0 0 36%;
  min-width:7.5rem;
  padding:.55rem .35rem;
  border:1px solid color-mix(in srgb,var(--hair) 84%,transparent);
  border-radius:0;
  background:transparent;
  color:var(--copy);
  font:inherit;
  font-size:.78rem;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease;
}
body[data-page="contact"] .time-slot:hover{
  border-color:color-mix(in srgb,var(--ink) 20%,var(--hair));
  color:var(--ink);
  transform:translateY(-1px);
}
body[data-page="contact"] .time-slot.is-selected{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 8%,transparent);
  color:var(--ink);
}
body[data-page="contact"] .time-duration-tooltip{
  position:fixed;
  z-index:120;
  left:0;
  top:0;
  width:max-content;
  max-width:calc(100vw - 1.5rem);
  padding:.42rem .58rem;
  border:1px solid color-mix(in srgb,var(--hair) 84%,transparent);
  background:color-mix(in srgb,var(--bg) 96%,var(--ink) 4%);
  color:var(--copy);
  box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 12%,transparent);
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:.7rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - .48rem)) translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
}
body[data-page="contact"] .time-duration-tooltip[data-placement="below"]{
  transform:translate(-50%,.48rem) translateY(-4px);
}
body[data-page="contact"] .time-duration-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,calc(-100% - .48rem)) translateY(0);
  transition-delay:0s;
}
body[data-page="contact"] .time-duration-tooltip.is-visible[data-placement="below"]{
  transform:translate(-50%,.48rem) translateY(0);
}

body[data-page="contact"] .booking-email-step{
  position:absolute;
  z-index:auto;
  left:.88rem;
  right:.88rem;
  top:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto;
  align-items:center;
  gap:.22rem .7rem;
  height:3rem;
  margin:0;
  padding:.72rem 0 0;
  border-top:1px solid color-mix(in srgb,var(--hair) 66%,transparent);
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:
    border-color .2s ease,
    opacity .18s ease,
    transform .28s cubic-bezier(.22,.61,.36,1);
}
body[data-page="contact"] .booking-email-step[hidden]{
  display:grid!important;
  height:3rem;
  margin:0;
  padding:.72rem 0 0;
  border-top-color:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-.28rem);
}
body[data-page="contact"] .booking-email-input{
  grid-column:1 / -1;
  grid-row:1;
  width:100%;
  min-width:0;
  height:2.28rem;
  padding:.4rem .72rem;
  border:1px solid color-mix(in srgb,var(--hair) 88%,transparent);
  border-radius:0;
  background:color-mix(in srgb,var(--bg) 96%,white 4%);
  color:var(--ink);
  font:inherit;
  font-size:.84rem;
  line-height:1.2;
  outline:0;
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
html[data-theme="dark"] body[data-page="contact"] .booking-email-input{
  background:color-mix(in srgb,var(--bg) 86%,white 14%);
}
body[data-page="contact"] .booking-email-input::placeholder{
  color:color-mix(in srgb,var(--muted) 78%,transparent);
  opacity:1;
}
body[data-page="contact"] .booking-email-input:focus,
body[data-page="contact"] .booking-email-input:focus-visible{
  outline:0;
  outline-offset:0;
  border-color:color-mix(in srgb,var(--orange) 72%,var(--hair));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--orange) 11%,transparent) inset;
}
body[data-page="contact"] .booking-email-input.is-invalid{
  border-color:color-mix(in srgb,#B34A3C 68%,var(--hair));
}

@media(max-width:620px){
  body[data-page="contact"] .calendar-panel{
    --calendar-times-space:3.48rem;
    --calendar-email-space:3.72rem;
  }
  body[data-page="contact"] .calendar-times,
  body[data-page="contact"] .calendar-times[hidden]{height:2.86rem}
  body[data-page="contact"] .time-slot{
    flex-basis:42%;
    min-width:7.25rem;
  }
}
