/* ModelBook V6.0.6 — Mobile overlay menu + booking lock + premium select */

/* -------------------------------------------------------
   1. Mobile menu: overlay, no layout push
------------------------------------------------------- */

@media(max-width:800px){
  .v6-header{
    position:relative !important;
    background:#f4f0e8 !important;
    color:#111 !important;
    z-index:999;
    padding:24px 22px 22px !important;
  }

  .v6-logo-row{
    margin:0 !important;
    min-height:78px !important;
  }

  .v6-header .brand{
    max-width:72% !important;
    margin:0 auto !important;
  }

  .v6-header .brand img{
    max-width:260px !important;
    max-height:96px !important;
  }

  .mobile-menu-toggle{
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:54px !important;
    height:54px !important;
    border-radius:999px !important;
    border:1px solid rgba(0,0,0,.16) !important;
    background:rgba(255,255,255,.35) !important;
    z-index:1001 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  .mobile-menu-toggle span{
    background:#111 !important;
    height:2px !important;
  }

  .v6-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    max-height:none !important;
    background:#f4f0e8 !important;
    color:#111 !important;
    z-index:1000 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;

    padding:132px 36px 38px !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:0 24px 70px rgba(0,0,0,.22) !important;

    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-18px) !important;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease !important;
    pointer-events:none !important;
  }

  body.menu-open .v6-nav,
  html.menu-open .v6-nav{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  .v6-nav a{
    color:#111 !important;
    display:block !important;
    width:100% !important;
    max-width:520px !important;
    text-align:center !important;
    padding:22px 0 !important;
    border-bottom:1px solid rgba(0,0,0,.10) !important;
    font-size:17px !important;
    line-height:1 !important;
    letter-spacing:.28em !important;
    text-decoration:none !important;
  }

  .v6-nav a:last-child{
    border-bottom:0 !important;
  }

  body.menu-open .mobile-menu-toggle span:first-child{
    transform:translateY(4.5px) rotate(45deg) !important;
  }

  body.menu-open .mobile-menu-toggle span:last-child{
    transform:translateY(-4.5px) rotate(-45deg) !important;
  }

  /* Hero should start immediately after header, not be pushed by menu */
  .v6-hero{
    padding-top:82px !important;
  }
}

/* -------------------------------------------------------
   2. Booking desktop: hard lock columns, no overlap
------------------------------------------------------- */

@media(min-width:901px){
  .booking-section{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(260px,340px) minmax(520px,1fr) !important;
    gap:72px !important;
    align-items:start !important;
    padding-left:6vw !important;
    padding-right:6vw !important;
    overflow:hidden !important;
  }

  .booking-copy{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    max-width:340px !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .booking-copy h2{
    font-size:clamp(44px,4vw,64px) !important;
    line-height:.92 !important;
    letter-spacing:-.055em !important;
    max-width:340px !important;
    width:100% !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .booking-copy p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.58 !important;
  }

  .booking-form{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
}

@media(min-width:1400px){
  .booking-section{
    grid-template-columns:minmax(300px,380px) minmax(620px,1fr) !important;
    gap:86px !important;
  }

  .booking-copy,
  .booking-copy h2{
    max-width:380px !important;
  }
}

/* -------------------------------------------------------
   3. Premium native select
------------------------------------------------------- */

.booking-form select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;

  background-color:rgba(255,255,255,.065) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #c2a06b 50%),
    linear-gradient(135deg, #c2a06b 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 15px) 50% !important;
  background-size:7px 7px, 7px 7px !important;
  background-repeat:no-repeat !important;

  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  cursor:pointer !important;
}

.booking-form select:focus,
.booking-form input:focus,
.booking-form textarea:focus{
  outline:none !important;
  border-color:#c2a06b !important;
  box-shadow:0 0 0 3px rgba(194,160,107,.16) !important;
}

.booking-form option{
  background:#181716 !important;
  color:#fff !important;
}

/* Better form spacing */
.booking-form label{
  position:relative !important;
}

.booking-form input,
.booking-form textarea,
.booking-form select{
  min-height:54px !important;
}

/* Mobile booking readability */
@media(max-width:800px){
  .booking-section{
    padding-top:76px !important;
  }

  .booking-copy h2{
    font-size:clamp(44px,13vw,72px) !important;
    max-width:100% !important;
  }

  .booking-form select{
    font-size:16px !important;
  }
}