/* Homepage booking dialog: layout, states and reduced-motion alternatives. */
.opening .call-trigger {
  margin-top: 12px;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
}

#callBooking {
  position: fixed;
  margin: auto;
  padding: 54px 12px 12px;
  width: min(1010px,95vw);
  height: min(760px,90dvh);
  max-height: 90dvh;
  overflow: auto;
  border: 0;
  border-radius: 32px;
  background: var(--wash);
  color: var(--ink);
  overscroll-behavior: contain;
}

#callBooking::backdrop {
  background: #020911bc;
}

@media (prefers-reduced-motion:no-preference) {
  #callBooking[open] {
    animation: call-pop .24s cubic-bezier(.2,.85,.25,1) both;
  }
  #callBooking[open]::backdrop {
    animation: call-dim .24s ease-out both;
  }
  @keyframes call-pop {
    from {
      opacity: 0;
      transform: scale(.94) translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes call-dim {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

.call-layout {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0,.52fr) minmax(0,1fr);
  gap: 12px;
}

.call-intro,.call-panel {
  padding: clamp(18px,2vw,32px);
  min-width: 0;
}

.call-intro > img {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.call-intro h2 {
  font: 400 clamp(28px,3vw,44px)/1 var(--font);
  letter-spacing: -.045em;
  margin: 22px 0;
}

.call-intro strong {
  color: var(--muted);
  font-weight: 400;
}

.call-intro p,.call-intro .call-item {
  font-size: 14px;
  line-height: 1.5;
}

.call-intro .call-item {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

#callBooking .call-toggle {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font: 400 14px/1.45 var(--copy);
  list-style: none;
}

.call-intro .call-toggle::-webkit-details-marker {
  display: none;
}

.call-intro .call-toggle::after {
  content: "";
  width: 11px;
  height: 6px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 0,100% 0,50% 100%);
  transition: transform 180ms ease;
}

.call-intro .call-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion:reduce) {
  .call-intro .call-toggle::after {
    transition: none;
  }
}

.call-intro .call-item p,.call-intro .call-item a {
  display: block;
  margin: 12px 0;
}

.call-panel {
  background: var(--bg);
  border-radius: 22px;
  min-height: 480px;
}

#callBooking .call-panel {
  background: #fff;
}

#callBooking {
  background: var(--paper);
}

#callBooking button,#callBooking input,#callBooking select {
  font: inherit;
  color: inherit;
}

#callBooking button {
  background: none;
  border: 0;
  cursor: pointer;
}

#callBooking button:disabled {
  cursor: default;
}

#callBooking .call-close {
    position: sticky;
    display: block;
    margin: -46px 0 6px auto;
    z-index: 3;
  top: 8px;
  width: 40px;
  height: 40px;
  background: var(--line);
  border-radius: 50%;
  font-size: 22px;
}

.call-steps {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  font-size: 12px;
}

.call-steps b {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wash);
  margin-right: 4px;
}

.call-steps [data-current] b,#callBooking .call-grid [aria-pressed=true] {
  background: var(--ink);
  color: var(--bg);
}

.call-panel h3 {
  font-size: 24px;
  letter-spacing: -.035em;
  margin-bottom: 16px;
}

.call-recap,#callForm label {
  display: block;
  border-radius: 18px;
  background: var(--wash);
  padding: 12px 16px;
  font-size: 12px;
}

#callForm input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 0;
}

.call-picker {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
  gap: 18px;
  margin: 24px 0;
}

.call-month,.call-foot,.call-recap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-month h4 {
  margin-right: auto;
  text-transform: capitalize;
}

.call-month button {
  width: 32px;
  height: 36px;
}

.call-month button:disabled,.call-grid button:disabled {
  opacity: .35;
}

.call-grid {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  text-align: center;
  gap: 3px;
}

.call-grid span {
  font-size: 11px;
  padding-block: 8px;
}

#callBooking .call-grid button {
  border-radius: 50%;
  aspect-ratio: 1;
  font-size: 13px;
  padding: 0;
}

.call-grid button:enabled:not([aria-pressed=true]) {
  background: var(--wash) !important;
}

.call-times {
  border: none;
  padding: 0;
  min-width: 0;
  margin: 0;
}

.call-times legend {
  font-size: 14px;
  font-weight: 400;
}

#callSlots {
  display: grid;
  gap: 6px;
  max-height: 212px;
  overflow: auto;
  padding: 3px;
  margin-top: 8px;
}

#callSlots label {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

#callSlots label:has(:checked) {
  border-color: #000;
  background: #000;
  color: #fff;
}

#callSlots input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#callSlots label:has(:focus-visible) {
  outline: 1px solid var(--muted);
}

.call-foot {
  justify-content: space-between;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

#callBooking .call-foot button {
  background: var(--accent);
  color: var(--navy);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
}

.call-foot button:disabled {
  opacity: .4;
}

.call-recap {
  justify-content: space-between;
  white-space: pre-line;
}

.call-recap button,.call-note a {
  text-decoration: underline;
}

#callForm label {
  margin: 12px 0;
}

#callForm input {
  font-size: 16px;
  outline: none;
}

.call-note,.call-panel small,#callStatus {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width:720px) {
  .call-layout {
    grid-template-columns: 1fr;
  }

  .call-intro .call-item .call-note a {
    display: inline;
    margin: 0;
  }
  .call-panel {
    min-height: 0;
  }
  .call-intro {
    padding-block: 0;
  }
  .call-intro img {
    float: left;
    margin-right: 12px;
  }
  .call-intro h2 {
    font-size: 26px;
    margin: 0 0 12px;
  }
  .call-intro .call-item {
    margin-top: 8px;
    padding-top: 6px;
  }
  .call-picker {
    gap: 10px;
  }
  .call-close {
    z-index: 1;
  }
}

@media (max-width:480px) {
  .call-picker {
    grid-template-columns: 1fr;
  }
  #callSlots {
    grid-template-columns: repeat(3,1fr);
    max-height: 94px;
  }
  .call-grid button {
    max-height: 40px;
  }
  #callBooking {
    padding: 48px 8px 8px;
  }
  .call-panel {
    padding: 16px;
  }
  .call-steps {
    margin-bottom: 16px;
  }
}

.call-steps b {
  font-weight: 400;
}

.call-info-list {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}

.call-info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.call-intro .call-info-list img {
  float: none;
  flex: none;
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
}

.call-info-list img[src$="whatsapp.svg"] {
  filter: invert(41%) sepia(74%) saturate(590%) hue-rotate(95deg);
}

#callEmail label {
  display: block;
  background: var(--wash);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 13px;
}

#callEmail :is(input,textarea) {
  display: block;
  width: 100%;
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  padding: 4px 0;
  resize: vertical;
}

#callEmail label:focus-within, #callForm label:focus-within {
  outline: 0;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

@media (forced-colors:active) {
  #callEmail label:focus-within, #callForm label:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 0;
  }
}

#callEmail .disc-action {
  border: 1px solid var(--line);
  border-radius: 999px;
}

#callEmail :is(input,textarea):focus {
  outline: none;
}

#callSlots {
  overflow-x: hidden;
  align-content: start;
}

#callSlots input {
  margin: 0;
}

@media (min-width:481px) {
  .call-times {
    position: relative;
  }
  #callSlots {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--slot-height,212px);
    max-height: none;
  }
}

.call-fold {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 240ms cubic-bezier(.22,1,.36,1),opacity 180ms ease;
}

.call-fold[inert] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.call-fold > div {
  min-height: 0;
  overflow: hidden;
  display: flow-root;
}

@media (prefers-reduced-motion:reduce) {
  .call-fold {
    transition: none;
  }
}

html:has(#callBooking[open]) {
  overflow: hidden;
}

/* All three steps share the existing panel; content never replaces the dialog. */
.call-preview-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.call-confirmation > p {
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
}

.call-confirmation-recap {
  display: grid;
  gap: 18px;
  padding: 22px;
  margin: 24px 0;
  border-radius: 18px;
  background: var(--wash);
}

.call-consent { display:flex !important; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; }
.call-consent input[type="checkbox"] { width:18px; height:18px; min-width:18px; margin:2px 0 0; padding:0; }
.form-security { min-width:0; max-width:100%; margin-block:12px; }
#callSlots > .call-note { padding:8px; line-height:1.5; }

.call-confirmation-recap dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.call-confirmation-recap dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.call-confirmation .call-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.call-panel[data-stage="confirmed"] .call-steps {
  color: var(--muted);
}

@media (prefers-reduced-motion:no-preference) {
  .call-step-enter {
    animation: call-step-enter 220ms cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes call-step-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
}