/* OHHSEM Travel — Daytrip Booking UI
 * Canonical component stylesheet for Island Hopping + Private Boat booking forms.
 * Loaded after frontend.css so Daytrip controls have one deterministic visual source.
 */

/* Traveller typography: centred, consistent, and reusable across all Daytrip variants. */
.ots-daytrip-modern-flow .ots-daytrip-legacy-traveller{
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-traveller-label{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:3px!important;
  width:100%!important;
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-legacy-traveller small{
  width:100%!important;
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-legacy-traveller em{
  display:block!important;
  width:100%!important;
  margin-top:10px!important;
  text-align:center!important;
}

/* Traveller stepper
 * Important: buttons are direct children with independent hover states.
 * The parent hover resets both buttons to the normal state first; only the exact
 * button under the pointer is allowed to darken. This prevents sibling hover bleed.
 */
.ots-daytrip-modern-flow .ots-daytrip-qty-control{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  height:46px!important;
  margin-top:9px!important;
  overflow:hidden!important;
  border:1px solid #d8dfe8!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
}
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]{
  position:relative!important;
  z-index:1!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#fff1f3!important;
  color:var(--ots-red)!important;
  font-family:inherit!important;
  font-size:20px!important;
  font-weight:800!important;
  line-height:44px!important;
  text-align:center!important;
  cursor:pointer!important;
  transition:background-color .12s ease,color .12s ease!important;
}
.ots-daytrip-modern-flow .ots-daytrip-qty-control > input[data-daytrip-qty]{
  position:relative!important;
  z-index:0!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-left:1px solid #e5e8ed!important;
  border-right:1px solid #e5e8ed!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#fff!important;
  color:#1f2f49!important;
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:800!important;
  line-height:44px!important;
  text-align:center!important;
  appearance:textfield!important;
  -moz-appearance:textfield!important;
}
.ots-daytrip-modern-flow .ots-daytrip-qty-control > input[data-daytrip-qty]::-webkit-outer-spin-button,
.ots-daytrip-modern-flow .ots-daytrip-qty-control > input[data-daytrip-qty]::-webkit-inner-spin-button{
  margin:0!important;
  -webkit-appearance:none!important;
}

/* Neutralise any older group-hover rule before applying the exact child hover. */
.ots-daytrip-modern-flow .ots-daytrip-qty-control:hover > button[data-daytrip-qty-step]:not(.is-context-locked){
  background:#fff1f3!important;
  color:var(--ots-red)!important;
}
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]:hover:not(:disabled):not(.is-context-locked){
  background:#ffdfe4!important;
  color:#bd1528!important;
}
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]:focus-visible:not(.is-context-locked){
  background:#ffdfe4!important;
  color:#bd1528!important;
  box-shadow:inset 0 0 0 2px rgba(223,38,56,.12)!important;
}

/* Min/max can disable a button functionally without changing the approved soft-red look. */
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]:disabled:not(.is-context-locked),
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]:disabled:not(.is-context-locked):hover{
  opacity:1!important;
  background:#fff1f3!important;
  color:var(--ots-red)!important;
  cursor:not-allowed!important;
}

/* Grey only means the booking context itself is unavailable (e.g. Private Boat package not selected). */
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step].is-context-locked,
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step].is-context-locked:hover,
.ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step].is-context-locked:focus{
  opacity:1!important;
  background:#f2f4f7!important;
  color:#98a2b3!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .ots-daytrip-modern-flow .ots-daytrip-legacy-traveller em{margin-top:10px!important}
  .ots-daytrip-modern-flow .ots-daytrip-qty-control > button[data-daytrip-qty-step]{
    flex-basis:44px!important;
    width:44px!important;
  }
}

/* v1.5.0-alpha.52 — canonical traveller typography.
 * These selectors target the exact rendered elements and intentionally live in
 * the shell-loaded Daytrip stylesheet so older frontend.css patches cannot win.
 */
.ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-legacy-traveller{
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-traveller-label{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  width:100%!important;
  margin:0!important;
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-legacy-traveller > small{
  display:block!important;
  width:100%!important;
  margin:10px 0 0!important;
  text-align:center!important;
}
.ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-legacy-traveller > small strong{
  display:inline!important;
}
.ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-legacy-traveller > em{
  display:block!important;
  width:100%!important;
  margin:10px 0 0!important;
  text-align:center!important;
}


/* v1.5.0-alpha.56 — Private Boat pax limit is an attached footer strip that blends with the Travellers card. */
.ots-private-boat-booking-form .ots-daytrip-traveller-section{
  overflow:hidden!important;
}
.ots-private-boat-booking-form .ots-private-boat-pax-banner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:calc(100% + 36px)!important;
  margin:14px -18px -18px!important;
  padding:10px 16px!important;
  border:0!important;
  border-top:1px solid rgba(223,38,56,.10)!important;
  border-radius:0 0 12px 12px!important;
  background:#fff7f8!important;
  color:#8e5960!important;
  box-sizing:border-box!important;
}
.ots-private-boat-booking-form .ots-private-boat-pax-banner strong,
.ots-private-boat-booking-form .ots-private-boat-pax-banner span{
  margin:0!important;
  line-height:1.35!important;
}
.ots-private-boat-booking-form .ots-private-boat-pax-banner strong{
  flex:0 0 auto!important;
  color:#a63a48!important;
  font-size:12px!important;
  font-weight:700!important;
}
.ots-private-boat-booking-form .ots-private-boat-pax-banner span{
  min-width:0!important;
  color:#7d6a6e!important;
  font-size:11px!important;
  font-weight:500!important;
  text-align:right!important;
  opacity:1!important;
}

/* Mobile Daytrip traveller controls use one deterministic 3-cell geometry. */
@media(max-width:760px){
  .ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-legacy-traveller{
    align-items:stretch!important;
  }
  .ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-qty-control{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    height:46px!important;
    margin:9px 0 0!important;
    box-sizing:border-box!important;
  }
  .ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-qty-control > button[data-daytrip-qty-step],
  .ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-qty-control > input[data-daytrip-qty]{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    line-height:44px!important;
  }
  .ots-daytrip-modern-flow .ots-daytrip-traveller-section .ots-daytrip-qty-control > button[data-daytrip-qty-step]{
    flex:none!important;
  }
  .ots-private-boat-booking-form .ots-private-boat-pax-banner{
    align-items:flex-start!important;
    gap:6px!important;
    width:calc(100% + 36px)!important;
    margin:12px -18px -18px!important;
    padding:9px 14px!important;
    border-radius:0 0 12px 12px!important;
  }
  .ots-private-boat-booking-form .ots-private-boat-pax-banner strong{
    font-size:11.5px!important;
  }
  .ots-private-boat-booking-form .ots-private-boat-pax-banner span{
    font-size:10px!important;
    line-height:1.35!important;
  }
}

@media(max-width:430px){
  .ots-private-boat-booking-form .ots-private-boat-pax-banner{
    flex-direction:column!important;
  }
  .ots-private-boat-booking-form .ots-private-boat-pax-banner span{
    text-align:left!important;
  }
}