/*
 * Book page parity patches copied from the approved React preview v1.3.1.
 * Base visual CSS is assets/css/app.css (the final React production CSS,
 * with only local asset paths and the approved textarea-width fix changed).
 */

/* Approved preview v0.6: booking review dialog centering fix. */
@media (min-width:561px){
  .booking-review-content{
    top:50%!important;
    left:50%!important;
    translate:none!important;
    transform:translate(-50%,-50%)!important;
    max-height:calc(100dvh - 56px)!important;
    overflow-y:auto!important;
    margin:0!important;
  }
  .booking-review-content[data-state="open"]{animation:none!important}
}
@media (max-width:560px){
  .booking-review-content{
    top:14px!important;
    right:14px!important;
    bottom:14px!important;
    left:14px!important;
    translate:none!important;
    transform:none!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
}

/* Approved preview v0.9: winter sunrise slot-layout protection. */
.booking-time-slot-grid .booking-slot-labels{display:none!important}
.booking-time-slot-grid .booking-slot-option>button{
  justify-content:center!important;
  gap:.28rem!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.booking-time-slot-grid .booking-slot-option>button>span:not(.booking-slot-labels){flex:0 0 auto!important}

/* Approved preview v1.2: two-row consultation prompt. */
.booking-consult-prompt{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:"heading copy" "ask custom"!important;
  column-gap:20px!important;
  row-gap:10px!important;
  align-items:center!important;
}
.booking-consult-prompt>span{
  grid-area:heading!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  white-space:nowrap!important;
}
.booking-consult-prompt>p{
  grid-area:copy!important;
  min-width:0!important;
  margin:0!important;
  line-height:1.55!important;
  white-space:normal!important;
}
.booking-consult-prompt>button.text-link{
  grid-area:ask!important;
  justify-self:start!important;
  white-space:normal!important;
  text-align:left!important;
}
.booking-consult-prompt>a.text-link{
  grid-area:custom!important;
  justify-self:start!important;
  white-space:normal!important;
  text-align:left!important;
}
@media(max-width:760px){
  .booking-consult-prompt{
    grid-template-columns:1fr!important;
    grid-template-areas:"heading" "copy" "ask" "custom"!important;
    row-gap:8px!important;
  }
  .booking-consult-prompt>span{white-space:normal!important}
}

/* Native-only positioning bridge for Radix tooltip/popover content.
 * Typography, color, borders, and spacing come directly from app.css. */
.booking-page .fj-tooltip-wrap,
.booking-page .fj-popover-wrap,
.booking-summary .fj-tooltip-wrap{position:relative;display:inline-flex;max-width:100%}
.booking-page .fj-native-popover,
.booking-summary .fj-native-popover{
  position:absolute;
  z-index:60;
  left:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:var(--paper,#fff);
  box-shadow:0 14px 40px rgba(20,18,24,.16);
}
.booking-estimate .fj-native-popover{left:auto;right:0;top:auto;bottom:calc(100% + 8px)}
.booking-summary .fj-native-popover{left:0;right:auto}
.booking-page .fj-native-popover[hidden],
.booking-summary .fj-native-popover[hidden]{display:none!important}
@media(max-width:520px){
  .booking-page .fj-native-popover,.booking-summary .fj-native-popover{max-width:calc(100vw - 42px)}
}