/* =========================================================================
   RESPONSIVE.CSS
   Single source of truth for every mobile/tablet breakpoint override.
   Base/default styles live in style.css — nothing in this file should be
   redefined again elsewhere (that duplication was the original cause of
   elements jumping/shifting on mobile).
   ========================================================================= */

:root{
  --bottom-nav-h: 62px;
}

/* -------------------------------------------------------------------------
   1. MOBILE BOTTOM NAVIGATION
   ------------------------------------------------------------------------- */
@media(max-width:991px){
  .bottom-nav{
    height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--c-lavender) transparent;
  }
  .bottom-nav::-webkit-scrollbar{
    height:3px;
    display:block;
  }
  .bottom-nav::-webkit-scrollbar-thumb{
    background:var(--c-lavender);
    border-radius:3px;
  }
  .bottom-nav .bn-item{
    position:relative;
    flex:0 0 auto;
    min-width:60px;
  }
  .bottom-nav .bn-item.active::before{
    left:50%;
    transform:translateX(-50%);
    margin-top:-1.7rem;
  }
  .bottom-nav .bn-item.active{
    transform:translateY(-3px) scale(1.05);
  }
  /* FIX: this decorative "more items to scroll" gradient was rendering as
     a visible white/faded shade across part of the bottom nav's height —
     removed so the bar keeps one clean, consistent background. Horizontal
     scrolling of the nav items itself is untouched. */
}

/* -------------------------------------------------------------------------
   2. SOUND TOGGLE — fixed, stable position clear of the top nav.
   Sizes only ever shrink as the screen narrows; no margin hacks (a stray
   margin-right nudge here used to fight with the `right` offset and made
   the icon jump sideways between breakpoints).
   ------------------------------------------------------------------------- */
@media(max-width:991px){
  .sound-toggle{
    top:5.3rem;
    right:1rem;
    bottom:auto;
    z-index:2050;
  }
}
@media(max-width:480px){
  .sound-toggle{
    top:5.1rem;
    right:.85rem;
    width:32px;
    height:32px;
    font-size:.85rem;
  }
}
@media(max-width:360px){
  .sound-toggle{
    top:3.9rem;
    right:.75rem;
    width:30px;
    height:30px;
  }
}

/* -------------------------------------------------------------------------
   3. TOP NAV — "Book Appointment" button + brand logo
   Never wraps, never collides with the brand logo on narrow screens.
   No margin hacks / no negative padding tricks (both used to be here and
   did nothing useful except destabilise the layout).
   ------------------------------------------------------------------------- */
.top-nav .brand{
  display:flex;
  align-items:center;
}
.brand-text{
  display:none;
}
.brand-logo{
  display:block;
  height:92px;
  width:220px;
  max-width:170px;
  object-fit:contain;
}

@media(max-width:991px){
  .top-nav .container{
    flex-wrap:nowrap;
    gap:.6rem;
  }
  .nav-cta{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:.7rem;
    padding:.55rem 1.05rem;
  }
  .top-nav .brand{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand-logo{
    height:36px;
    max-width:130px;
  }
}
@media(max-width:480px){
  .top-nav .brand{
    font-size:1.15rem;
  }
  .nav-cta{
    font-size:.64rem;
    padding:.5rem .95rem;
  }
  .brand-logo{
    height:96px;
    max-width:110px;
  }
}
@media(max-width:400px){
  .nav-cta{
    font-size:.62rem;
    padding:.5rem .85rem;
    margin-bottom:20px;
  }
  .top-nav .brand{
    font-size:1rem;
  }
}
@media(max-width:360px){
  .top-nav .brand{
    font-size:.95rem;
  }
  .nav-cta{
    font-size:.58rem;
    padding:.45rem .8rem;
  }
  .brand-logo{
    height:50px;
    max-width:96px;
  }
}
@media(max-width:340px){
  .nav-cta{
    font-size:.54rem;
    padding:.4rem .65rem;
    margin-bottom:20px
  }
  .brand-logo{
    height:78px;
    max-width:90px;
  }
}

/* -------------------------------------------------------------------------
   4. BOOK APPOINTMENT / GENERAL BUTTONS (.btn-luxe)
   ------------------------------------------------------------------------- */
@media(max-width:767px){
  .btn-luxe{
    font-size:.74rem;
    padding:.78rem 1.5rem;
    letter-spacing:.06em;
    gap:.4rem;
  }
}
@media(max-width:575px){
  .btn-luxe{
    font-size:.7rem;
    padding:.72rem 1.2rem;
    width:100%;
    justify-content:center;
  }
  .hero-content .btn-luxe{
    width:auto;
    flex:1 1 auto;
    padding:.72rem 1rem;
  }
  .booking-card .btn-luxe{
    padding:.7rem .8rem;
    font-size:.66rem;
  }
}
@media(max-width:400px){
  .btn-luxe{
    font-size:.66rem;
    padding:.68rem 1rem;
  }
  .hero-content .btn-luxe{
    font-size:.68rem;
    padding:.68rem .9rem;
  }
  .booking-card .btn-luxe{
    font-size:.6rem;
    padding:.65rem .6rem;
    gap:.3rem;
  }
}
@media(max-width:340px){
  .booking-card .d-flex.gap-2{
    flex-direction:column;
  }
  .booking-card .btn-luxe{
    width:100%;
  }
}

/* -------------------------------------------------------------------------
   5. QUICK BOOK MODAL
   ------------------------------------------------------------------------- */
@media(max-width:575px){
  #quickBookModal .modal-dialog{
    margin:.75rem;
    max-width:calc(100% - 1.5rem);
  }
  #quickBookModal .modal-header{
    padding:1rem 1.2rem;
  }
  #quickBookModal .modal-title{
    font-size:1.05rem;
  }
  #quickBookModal .modal-body{
    padding:1.2rem;
  }
  #quickBookModal .form-control-luxe{
    font-size:.9rem;
    padding:.65rem .9rem;
  }
  #quickBookModal button[type="submit"]{
    font-size:.8rem;
    padding:.75rem;
  }
}
@media(max-width:360px){
  #quickBookModal .modal-dialog{
    margin:.5rem;
    max-width:calc(100% - 1rem);
  }
  #quickBookModal .modal-body{
    padding:1rem;
  }
}

/* -------------------------------------------------------------------------
   6. REVIEWS CAROUSEL
   ------------------------------------------------------------------------- */
.review-track{
  gap:22px;
}
.review-track-wrap,
.review-track{
  width:100%;
}
.review-card{
  box-sizing:border-box;
  width:100%;
}
@media(max-width:767px){
  .review-card{
    padding:1.6rem 1.4rem;
  }
  .review-card p{
    font-size:.92rem;
  }
}
@media(max-width:400px){
  .review-card{
    padding:1.3rem 1.1rem;
  }
  .overall-rating .big{
    font-size:2.6rem;
  }
}

/* -------------------------------------------------------------------------
   7. WHY CHOOSE US — equal-height cards on every breakpoint
   (.why-card already gets height:100%/flex-column from style.css; this
   just tightens spacing on very small screens so nothing feels cramped)
   ------------------------------------------------------------------------- */
@media(max-width:575px){
  .why-card{
    padding:1.4rem 1rem;
  }
}

/* -------------------------------------------------------------------------
   8. GLOBAL OVERFLOW SAFETY NET
   Belt-and-braces: nothing should ever force horizontal scroll on mobile.
   ------------------------------------------------------------------------- */
@media(max-width:991px){
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }
}