/* One clear glass surface, with unboxed fields and readable labels. */
#appointment-form {
  border: 1px solid rgba(182, 232, 231, .46) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(206, 248, 245, .13), rgba(44, 123, 133, .1) 34%, rgba(10, 32, 38, .57) 76%),
    rgba(13, 36, 42, .53) !important;
  box-shadow: 0 32px 70px rgba(0, 14, 17, .25), 0 4px 22px rgba(0, 18, 21, .14), inset 0 1px rgba(255, 255, 255, .22) !important;
  backdrop-filter: blur(28px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
}
#appointment-form::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 3%, rgba(207, 255, 252, .68) 32%, rgba(110, 226, 230, .18) 76%, transparent) !important;
}
#appointment-form .form-progress {
  margin-bottom: 31px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(195, 232, 232, .24);
  color: #c5dcdd;
  font: 500 13px/1.4 var(--body, 'Segoe UI', sans-serif);
  letter-spacing: 0;
}
#appointment-form .form-progress i { height: 3px; border-radius: 4px; }
#appointment-form .field-shell {
  position: relative;
  gap: 7px;
  margin-bottom: 23px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#appointment-form .field-shell>span,
#appointment-form .priority-choice legend {
  color: #f2fbfa !important;
  font: 650 15px/1.35 var(--body, 'Segoe UI', sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#appointment-form .field-shell>span b { color: #bad3d4; font-weight: 450; font-size: 13px; }
#appointment-form .field-shell[data-step]::after {
  content: none !important;
}
#appointment-form .field-shell input,
#appointment-form .field-shell textarea {
  min-height: 54px;
  padding: 12px 1px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(213, 239, 239, .55) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1.45;
  box-shadow: none !important;
  outline: none !important;
}
#appointment-form .field-shell textarea { min-height: 112px; resize: vertical; }
#appointment-form .field-shell input::placeholder,
#appointment-form .field-shell textarea::placeholder { color: #b1c6c8 !important; opacity: 1; }
#appointment-form .field-shell:focus-within input,
#appointment-form .field-shell:focus-within textarea {
  border-bottom-color: #95eef0 !important;
  background: transparent !important;
  box-shadow: 0 2px 0 #79dce3 !important;
}
#appointment-form .field-shell small { color: #bdd0d1; font-size: 13px; line-height: 1.5; }
#appointment-form .priority-choice {
  gap: 12px;
  margin-top: 12px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#appointment-form .priority-choice legend { margin-bottom: 13px !important; }
#appointment-form .priority-choice label>span,
.appointment .priority-choice label>span {
  position: relative !important;
  min-height: 72px !important;
  padding: 10px 30px 14px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(199, 234, 234, .3) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
#appointment-form .priority-choice input:checked+span,
.appointment .priority-choice input:checked+span {
  border: 0 !important;
  border-bottom: 2px solid #83e2e7 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
#appointment-form .priority-choice label>span b { color:#f1fbfa !important; font-size:15px !important; }
#appointment-form .priority-choice label>span small { color:#b8d0d2 !important; font-size:12px !important; }
#appointment-form .priority-choice label>span::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid rgba(194,235,235,.6) !important;
  border-radius: 50% !important;
  background: transparent !important;
}
#appointment-form .priority-choice input:checked+span b,
#appointment-form .priority-choice input:checked+span small,
.appointment .priority-choice input:checked+span b,
.appointment .priority-choice input:checked+span small { color: #f1fbfa !important; }
#appointment-form .priority-choice input:checked+span::after,
.appointment .priority-choice input:checked+span::after {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  border: 4px solid #87e7e9 !important;
  border-radius: 50% !important;
  background: #103a40 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45) !important;
}
#appointment-form .privacy-note { padding-top: 10px; color: #bbd0d1; font-size: 13px; line-height: 1.5; }
#appointment-form .button.primary {
  justify-content: center;
  min-height: 58px;
  padding: 12px 24px;
  border: 1px solid rgba(197, 252, 249, .65) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(196, 250, 247, .3), rgba(89, 179, 190, .19) 42%, rgba(18, 68, 77, .5)) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255,255,255,.36), 0 14px 30px rgba(0, 19, 24, .21) !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}
#appointment-form .button.primary:hover {
  border-color: #e6fffd !important;
  background: linear-gradient(135deg, rgba(206, 255, 251, .41), rgba(90, 190, 200, .28) 48%, rgba(18, 75, 83, .58)) !important;
  transform: translateY(-2px);
}
#appointment-form .button.primary::before,
#appointment-form .button.primary::after { content: none !important; display: none !important; }
#appointment-form .button.primary:focus-visible { outline: 2px solid #94e8ea; outline-offset: 4px; }
#appointment-form .form-note { color: #bed4d4; font-size: 13px; }
.wizard-stage { display: contents; }
.wizard-heading, .wizard-navigation, .wizard-step-count { display: none; }
.assistant-reservation-prompt {
  border-top: 1px solid rgba(123, 216, 222, .28);
  background: linear-gradient(120deg, rgba(30, 70, 77, .93), rgba(12, 30, 34, .96));
}
.assistant-reservation-prompt>button:not(.assistant-reserve-later) {
  border: 1px solid rgba(123, 219, 225, .7) !important;
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(91, 179, 188, .28), rgba(28, 91, 101, .65)) !important;
  color: #f4ffff;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.assistant-reservation-prompt>button:not(.assistant-reserve-later):hover { background: rgba(63, 160, 170, .46) !important; }
.assistant-reservation-prompt>button:disabled { opacity: .72; cursor: wait; }
.assistant-reservation-prompt .assistant-wa-retry { grid-column: 1 / -1; margin: 2px 0; font-size: 10px; }
@media (max-width: 760px) {
  html { scroll-padding-top: 62px !important; }
  main>#turno.appointment.wizard-ready {
    display: block !important;
    min-height: 0 !important;
    padding: 18px 0 clamp(60px, 16vw, 76px) !important;
    scroll-margin-top: 0 !important;
  }
  .appointment.wizard-ready .section-label,
  .appointment.wizard-ready .appointment-intro,
  .appointment.wizard-ready .appointment-office { display: none !important; }
  .appointment.wizard-ready .appointment-grid {
    display: block !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
  }
  .appointment.wizard-ready #appointment-form {
    display: flex;
    flex-direction: column;
    width: calc(100% - 24px);
    max-width: 460px;
    height: auto;
    min-height: 0;
    margin: 0 auto !important;
    padding: 25px 22px 24px !important;
    overflow: visible;
  }
  #appointment-form .form-progress {
    flex: 0 0 auto;
    margin: 0 0 20px;
    padding: 0 0 15px;
    font-size: 12px;
  }
  #appointment-form .form-progress #form-progress-status { display: none; }
  #appointment-form .form-progress .wizard-step-count {
    display: inline;
    color: #cde6e5;
    font: 700 11px/1.4 var(--mono, monospace);
    letter-spacing: .06em;
  }
  #appointment-form .form-progress i {
    width: 62px;
    background: linear-gradient(90deg, #81e2e7 var(--wizard-progress, 25%), rgba(255,255,255,.18) var(--wizard-progress, 25%));
  }
  #appointment-form .wizard-stage { display: none; min-height: 0; }
  #appointment-form .wizard-stage.is-current { display: flex; flex-direction: column; }
  #appointment-form .wizard-heading { display: block; margin-bottom: 23px; }
  #appointment-form .wizard-heading h3 {
    color: #fff;
    font: 700 clamp(27px, 7vw, 34px)/1.08 var(--body, 'Segoe UI', sans-serif);
    letter-spacing: -.04em;
    outline: none;
  }
  #appointment-form .wizard-heading p {
    max-width: 32ch;
    margin-top: 9px;
    color: #bcd5d5;
    font-size: 13px;
    line-height: 1.5;
  }
  #appointment-form .field-shell { margin-bottom: 14px; }
  #appointment-form .field-shell input,
  #appointment-form .field-shell textarea { font-size: 16px !important; }
  #appointment-form .field-shell>span,
  #appointment-form .priority-choice legend { font-size: 15px !important; }
  #appointment-form .priority-choice label>span { padding: 10px 26px 14px 2px !important; }
  #appointment-form .wizard-navigation {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 20px;
    padding: 0;
  }
  #appointment-form .wizard-navigation:empty { display: none; }
  #appointment-form .wizard-navigation button { min-height: 49px; font-size: 15px; font-weight: 700; }
  #appointment-form .wizard-next {
    flex: 1;
    border: 1px solid rgba(213,255,253,.7);
    border-radius: 999px;
    background: linear-gradient(125deg,rgba(184,243,241,.28),rgba(37,123,136,.35));
    color: white;
    box-shadow: inset 0 1px rgba(255,255,255,.31),0 10px 22px rgba(0,0,0,.13);
  }
  #appointment-form .wizard-back {
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: #d0e8e7;
  }
  #appointment-form .wizard-stage[data-stage="4"] .wizard-heading { margin-bottom: 15px; }
  #appointment-form .wizard-stage[data-stage="4"] .wizard-navigation { order: -1; margin: 0 0 10px -12px; padding-top: 0; }
  #appointment-form .wizard-stage[data-stage="4"] .wizard-back { min-height: 28px; font-size: 13px; }
  #appointment-form .wizard-stage[data-stage="4"] .priority-choice { margin: 0 0 15px; }
  #appointment-form .wizard-stage[data-stage="4"] .field-optional { margin-bottom: 10px; }
  #appointment-form .wizard-stage[data-stage="4"] .privacy-note { margin: 4px 0 12px; padding: 0; }
  #appointment-form .wizard-stage[data-stage="4"] .form-note { margin-top: 8px; }
  #appointment-form .button.primary { width: 100%; min-height: 54px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .appointment.wizard-ready #appointment-form { padding: 17px 20px !important; }
  #appointment-form .form-progress { margin-bottom: 15px; padding-bottom: 12px; }
  #appointment-form .wizard-heading { margin-bottom: 16px; }
  #appointment-form .wizard-heading h3 { font-size: 26px; }
  #appointment-form .wizard-heading p { margin-top: 5px; font-size: 12px; }
  #appointment-form .field-shell { margin-bottom: 13px; }
  #appointment-form .field-shell input { min-height: 46px; }
  #appointment-form .wizard-stage[data-stage="4"] .priority-choice label>span { min-height: 59px !important; }
  #appointment-form .wizard-stage[data-stage="4"] .field-optional input { min-height: 42px; }
  #appointment-form .wizard-stage[data-stage="4"] .privacy-note { font-size: 11px; line-height: 1.35; }
  #appointment-form .wizard-stage[data-stage="4"] .form-note { display: none; }
}
@media (max-width: 760px) and (max-height: 620px) {
  main>#turno.appointment.wizard-ready { min-height: 0 !important; padding-bottom: 48px !important; }
}

/* Keep the workshop introduction visible above the compact mobile wizard. */
@media (max-width: 760px) {
  .appointment.wizard-ready .section-label { display:flex!important;margin:0 20px 18px!important; }
  .appointment.wizard-ready .appointment-grid { display:grid!important;gap:14px!important; }
  .appointment.wizard-ready .appointment-intro {
    display:block!important;width:calc(100% - 40px);max-width:460px;
    margin:0 auto!important;text-align:left!important;
  }
  .appointment.wizard-ready .appointment-intro .eyebrow,
  .appointment.wizard-ready .appointment-intro h2,
  .appointment.wizard-ready .appointment-intro>p { text-align:left!important;margin-inline:0!important; }
  .appointment.wizard-ready .appointment-intro .eyebrow { margin-bottom:11px!important;font-size:9px!important; }
  .appointment.wizard-ready .appointment-intro h2 {
    max-width:none!important;margin:0 0 10px!important;
    font-size:clamp(31px,8.5vw,39px)!important;line-height:1.04!important;
  }
  .appointment.wizard-ready .appointment-intro>p:not(.eyebrow) {
    max-width:38ch!important;margin:0!important;font-size:12px!important;line-height:1.55!important;
  }
  .appointment.wizard-ready .appointment-steps {
    display:grid!important;gap:0!important;max-width:none!important;
    margin:15px 0 0!important;padding:5px 12px!important;
  }
  .appointment.wizard-ready .appointment-steps li {
    justify-content:flex-start!important;min-height:32px!important;padding:5px 0!important;
    gap:9px!important;font-size:11px!important;line-height:1.25!important;
  }
  .appointment.wizard-ready .appointment-steps li span { flex:0 0 23px!important;font-size:10px!important; }
  .appointment.wizard-ready .appointment-office {
    display:block!important;width:calc(100% - 40px)!important;max-width:460px!important;
    margin:0 auto 5px!important;
  }
  .appointment.wizard-ready .appointment-office img {
    width:100%!important;height:auto!important;max-height:165px!important;
    aspect-ratio:2.1!important;object-fit:cover!important;object-position:center 54%!important;
  }
  .appointment.wizard-ready .appointment-office figcaption { padding:5px 0 0!important;font-size:10px!important; }
}

/* Give the customer photo carousel its own light finish before the dark form. */
.customer-gallery {
  padding-bottom:clamp(70px,7vw,104px)!important;
  background:linear-gradient(180deg,rgba(240,243,242,0),#f0f2f0 55%,#f0f2f0)!important;
}
@media (max-width:760px) {
  .customer-gallery { padding-bottom:68px!important; }
}