/* L2 landing-page refinements: active booking mode hierarchy, mobile collapsed filters and persistent swipe cues. */

/* Active booking mode sits above the other two cards. Canonical icon/card styling is preserved. */
#bsSchedulingPage .bs-view-switch.bs-view-switch--three{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:auto auto!important;
  gap:12px 14px!important;
  width:min(100%,760px)!important;
  margin:8px auto 18px!important;
  padding:8px!important;
  align-items:stretch!important;
  justify-items:center!important;
  overflow:visible!important;
}
#bsSchedulingPage .bs-view-switch__link{
  grid-row:2;
  width:min(100%,300px)!important;
  min-height:66px!important;
  justify-self:center!important;
  transform-origin:center center;
  transition:
    width .34s cubic-bezier(.22,.75,.22,1),
    min-height .34s cubic-bezier(.22,.75,.22,1),
    padding .34s cubic-bezier(.22,.75,.22,1),
    transform .34s cubic-bezier(.22,.75,.22,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease!important;
  will-change:transform;
}
#bsSchedulingPage .bs-view-switch__link[aria-current="page"]{
  grid-row:1!important;
  grid-column:1 / -1!important;
  width:min(100%,460px)!important;
  min-height:88px!important;
  padding:15px 20px!important;
  justify-self:center!important;
  transform:scale(1.015);
  box-shadow:0 18px 42px rgba(48,69,63,.14)!important;
  z-index:2;
}
#bsSchedulingPage .bs-view-switch__link[aria-current="page"] .bs-view-switch__icon{
  flex-basis:48px!important;
  width:48px!important;
  height:48px!important;
  transition:width .34s ease,height .34s ease,flex-basis .34s ease,background .34s ease,color .34s ease;
}
#bsSchedulingPage .bs-view-switch__link[aria-current="page"] strong{
  font-size:1.08rem!important;
  transition:font-size .34s ease;
}

/* Mobile filter toggle: keep service cards near the booking-mode selector. */
#bsMobileFilterToggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  min-height:40px;
  margin:0 auto 12px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:var(--wine);
  font-weight:850;
  box-shadow:0 8px 20px rgba(48,69,63,.06);
}
#bsMobileFilterToggle .kinara-filter-chevron{
  display:inline-block;
  transition:transform .22s ease;
}
#bsMobileFilterToggle[aria-expanded="true"] .kinara-filter-chevron{transform:rotate(180deg)}

/* Persistent swipe cue. Applied only when a rendered rail has more than one card. */
#bsSchedulingPage .kinara-carousel-host{position:relative!important}
#bsSchedulingPage .kinara-carousel-host::after{
  content:"Swipe cards  ↔";
  display:none;
}
@keyframes kinaraSwipeBreatheL2{
  0%,100%{opacity:.58;transform:translateY(0) scale(1)}
  50%{opacity:1;transform:translateY(-1px) scale(1.035)}
}

@media(max-width:760px){
  #bsSchedulingPage .bs-view-switch.bs-view-switch--three{
    width:min(100%,520px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:4px auto 10px!important;
    padding:6px!important;
  }
  #bsSchedulingPage .bs-view-switch__link{
    width:100%!important;
    min-height:56px!important;
    padding:9px 10px!important;
    gap:8px!important;
  }
  #bsSchedulingPage .bs-view-switch__link[aria-current="page"]{
    width:min(100%,420px)!important;
    min-height:76px!important;
    padding:12px 14px!important;
    transform:scale(1.01);
  }
  #bsSchedulingPage .bs-view-switch__link .bs-view-switch__icon{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  #bsSchedulingPage .bs-view-switch__link[aria-current="page"] .bs-view-switch__icon{
    flex-basis:42px!important;
    width:42px!important;
    height:42px!important;
  }
  #bsSchedulingPage .bs-view-switch__link strong{font-size:.82rem!important}
  #bsSchedulingPage .bs-view-switch__link[aria-current="page"] strong{font-size:1rem!important}

  #bsMobileFilterToggle{display:inline-flex!important}
  html[data-kinara-scheduling-mode] #bsSchedulingPage .bs-filter-panel{
    display:none!important;
    margin:0 auto 14px!important;
  }
  html[data-kinara-scheduling-mode] #bsSchedulingPage .bs-filter-panel.is-mobile-open{
    display:grid!important;
    animation:kinaraFilterOpenL2 .22s ease both;
  }
  @keyframes kinaraFilterOpenL2{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* Every rendered service-card result rail becomes swipeable on mobile. */
  #bsSchedulingPage .bs-professional-grid-static,
  #bsSchedulingPage .bs-offer-grid{
    display:flex!important;
    flex-flow:row nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:8px 9px 10px!important;
  }
  #bsSchedulingPage .bs-professional-grid-static::-webkit-scrollbar,
  #bsSchedulingPage .bs-offer-grid::-webkit-scrollbar{display:none!important}
  #bsSchedulingPage .bs-professional-grid-static > .bs-professional-card--rich,
  #bsSchedulingPage .bs-offer-grid > .bs-provider-card{
    flex:0 0 84vw!important;
    width:84vw!important;
    min-width:278px!important;
    max-width:360px!important;
    scroll-snap-align:center!important;
  }

  #bsSchedulingPage .kinara-carousel-host{
    padding-bottom:32px!important;
  }
  #bsSchedulingPage .kinara-carousel-host::after{
    display:inline-flex!important;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    align-items:center;
    justify-content:center;
    min-height:25px;
    padding:3px 11px;
    border:1px solid rgba(79,111,99,.16);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:var(--wine);
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.02em;
    white-space:nowrap;
    pointer-events:none;
    box-shadow:0 6px 16px rgba(48,69,63,.06);
    animation:kinaraSwipeBreatheL2 1.7s ease-in-out infinite;
  }
}

@media(prefers-reduced-motion:reduce){
  #bsSchedulingPage .bs-view-switch__link,
  #bsSchedulingPage .bs-view-switch__link[aria-current="page"],
  #bsSchedulingPage .kinara-carousel-host::after{
    transition:none!important;
    animation:none!important;
  }
}