/* Booking Page Styles */
:root { --booking-bg: radial-gradient(circle at 25% 15%, rgba(59,130,246,.18), transparent 60%), #0a0a0a; }
.booking-body { margin:0; background:var(--booking-bg); color:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }

/* Booking Page Mobile Navigation Enhancements */
@media (max-width: 768px) {
  /* Ensure the mobile menu works properly on booking page */
  .booking-body .nav-menu {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Add slight spacing for hamburger button */
  .booking-body .nav-toggle {
    margin-left: 10px;
  }
  
  /* Ensure CTA buttons are properly styled */
  .booking-body .nav-cta-mobile .nav-rotating-button {
    padding: 12px 24px;
    font-size: 0.95rem;
    border-radius: 25px;
  }
}

@media (max-width: 560px) {
  /* Smaller mobile screens - compact navigation */
  .booking-body .nav-container {
    padding: 12px 16px;
  }
  
  .booking-body .nav-menu {
    padding: 30px 15px;
    gap: 25px;
    top: 60px;
    height: calc(100vh - 60px);
  }
  
  .booking-body .nav-menu a {
    font-size: 1rem;
    padding: 12px;
  }
}

/* top spacing to clear fixed global navbar */
.booking-main { max-width:1100px; margin:0 auto; padding:100px 40px 120px; }
.booking-intro { text-align:center; margin:40px 0 46px; }
.booking-title { font-size:clamp(2rem,5vw,3rem); font-weight:800; background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0 0 16px; }
.booking-subtitle { font-size:1.02rem; color:var(--text-muted); line-height:1.55; margin:0 auto; max-width:720px; }
.booking-widget { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(14px); border-radius:28px; padding:30px 18px 38px; box-shadow:0 10px 40px -10px rgba(0,0,0,.55); }
.cal-embed-wrapper { position:relative; min-height:700px; }
.cal-inline { width:100%; min-height:680px; }
.booking-faq-hint { margin-top:36px; text-align:center; }
.hint-text { font-size:.85rem; color:var(--text-secondary); }
.hint-text a { color:var(--primary-blue); text-decoration:none; }
.hint-text a:hover { text-decoration:underline; }
.booking-footer { text-align:center; padding:40px 20px 60px; font-size:.65rem; color:var(--text-muted); }
@media (max-width:900px){ 
  .booking-main{padding:130px 24px 100px;} 
  .booking-widget{padding:26px 14px 34px;} 
  .cal-embed-wrapper{min-height:660px;} 
  .cal-inline{min-height:640px;} 
  
  /* Enhanced mobile navigation spacing */
  .booking-body .nav-menu.active {
    display: flex;
  }
}

@media (max-width:600px){ 
  .booking-title{font-size:clamp(1.7rem,7vw,2.4rem);} 
  .booking-subtitle{font-size:.95rem;} 
  .booking-main{padding:120px 18px 90px;} 
  .cal-embed-wrapper{min-height:620px;} 
  .cal-inline{min-height:600px;} 
  .booking-widget{border-radius:24px;} 
  
  /* Improved mobile menu positioning */
  .booking-body .nav-menu {
    top: 55px;
    height: calc(100vh - 55px);
    padding: 25px 12px;
  }
}

@media (max-width: 400px) {
  /* Very small mobile screens */
  .booking-main {
    padding: 110px 14px 80px;
  }
  
  .booking-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
    line-height: 1.1;
  }
  
  .booking-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  .booking-body .nav-container {
    padding: 10px 12px;
  }
  
  .booking-body .nav-menu {
    top: 50px;
    height: calc(100vh - 50px);
    padding: 20px 10px;
    gap: 20px;
  }
  
  .booking-body .nav-menu a {
    font-size: 0.95rem;
    padding: 10px;
  }
}

/* Keep the unconfigured state honest until an owner calendar is connected. */
.booking-status { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 32px 16px; }
.booking-status svg { color: var(--primary-blue); }
.booking-status h2 { font-size: 1.4rem; font-weight: 600; }
.booking-status p { color: var(--text-muted); max-width: 430px; }
.booking-body [hidden] { display: none !important; }
.booking-widget { scroll-margin-top: 110px; }
.booking-body a:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 5px; }
@media (max-width:600px) { .booking-status { min-height: 380px; } }