/* Responsive media queries */
@media (max-width: 1200px) {
    .header-up { padding: 0 48px 0 28px; }
  }
  @media (max-width: 992px) {
    .header-up { padding: 0 32px 0 20px; }
    .hero { height: 160px; gap: 28px; }
    .bottom-btn { padding: 0 48px; gap: 16px; }
  }
  @media (max-width: 768px) {
    html {
      min-height: 100%;
      height: auto;
      max-height: none;
      overflow-x: hidden;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
    }
    body {
      display: block !important;
      flex-direction: unset !important;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      height: auto;
      min-height: 100vh;
      max-height: none;
    }
    .header-up { padding: 0 20px 0 16px; height: 57px; }
    .hero { height: 140px; gap: 20px; }
    .btn-text { padding: 6px 10px; font-size: 14px; }
    .middle { padding: 28px 14px; gap: 20px; overflow: visible; height: auto; max-height: none; }
    .bottom-btn { padding: 0 20px; flex-wrap: wrap; height: auto; }
    .main-content { overflow: visible; height: auto; min-height: auto; max-height: none; }
  }
  @media (max-width: 576px) {
    .hero { height: 120px; gap: 14px; padding: 0 12px 18px 12px; }
    .btn-text { padding: 6px 8px; font-size: 13px; }
  }
  
  /* Основные стили */
  html {
    min-height: 100%;
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  body {
    background-color: #000;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    min-height: 100vh;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  .header-up {
      width: 100%;
      height: 57px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      box-sizing: border-box;
      background: #a56b00;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 87px 0 40px;
  }
  
  .header-left { display: flex; align-items: center; gap: 5px; }
  .header-right { display: flex; align-items: center; }
  .header_alarm { width: 24px; height: 24px; }
  .header_booking, .header_contact, .header_language { font: 400 16px/21px 'Inter', sans-serif; color: #fff; display: flex; align-items: center; }
  .header_booking{ margin-top: 1; }
  .header_contact{ margin-right: 21px; }
  .header_call{ margin-right: 6.6; }
  .header_language_logo { width: 16px; height: 11px; margin-left: 8px; }
  
  /* Mobile menu button */
  .mobile-menu-btn { background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 6px; margin-left: 10px; cursor: pointer; display: inline-flex; flex-direction: column; gap: 3px; }
  .mobile-menu-btn__bar { width: 18px; height: 2px; background: #fff; display: block; }
  
  /* Show button on small screens */
  @media (max-width: 425px) { #mobileMenuBtn[hidden]{ display:inline-flex !important; } }
  @media (max-width: 375px) { #mobileMenuBtn[hidden]{ display:inline-flex !important; } }
  
  /* Hide big hero links on small screens */
  @media (max-width: 425px){ .hero { display:none; } }
  @media (max-width: 375px){ .hero { display:none; } }
  
  /* Mobile dropdown menu styling */
  .mobile-menu { position: fixed; top: 57px; left: 0; right: 0; background: rgba(0,0,0,0.98); border-bottom: 1px solid rgba(255,255,255,0.14); z-index: 1500; display: none; grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; box-sizing: border-box; }
  .mobile-menu .btn-text { display:block; width:100%; text-align:left; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(255,255,255,0.04); }
  .mobile-menu .btn-text:hover { background: rgba(255,255,255,0.08); }
  
  /* Show menu only when toggled */
  @media (max-width: 425px){ body.menu-open #mobileMenu { display: grid !important; } }
  @media (max-width: 375px){ body.menu-open #mobileMenu { display: grid !important; } }
  
  .main-content { 
    margin-top: 57px; 
    flex: 1;
    min-height: calc(100vh - 57px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
  }
  
  /* Top nav buttons */
  .hero {
      width: 100%;
      height: 189px;
      background-color: #370617;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 50px;
      flex-wrap: wrap;
      padding: 0 20px 23px 20px;
      box-sizing: border-box;
  }
  
  .btn-text { background: transparent; border: none; color: white; font: 400 16px/1.5 'Inter', sans-serif; padding: 8px 16px; cursor: pointer; transition: all .3s ease; text-decoration: none; margin-bottom: 0; }
  .btn-text:hover { color: #ccc; transform: translateY(-2px); }
  .btn-text:active { transform: translateY(0); }
  
  /* Middle */
  .middle { width: 100%; height: auto; min-height: auto; max-height: none; background-color: #000; display: flex; flex-direction: column; align-items: center; padding: 32px 20px; box-sizing: border-box; overflow-x: hidden; overflow-y: visible; }
  
  .BookingMiddle { color: rgba(255, 207, 132, 1); font-family: 'Inter', sans-serif; font-size: 64px; font-weight: 400; line-height: 77px; text-align: center; margin: 0 0 36px 0; }
  
  .BookingInfo { color: rgba(255, 255, 255, 1); font-family: 'Inter', sans-serif; max-width: 1100px; width: 100%; margin: 0 auto; text-align: left; }
  
  /* Bigger welcoming headline */
  .welcome-text { font-size: 36px; font-weight: 400; line-height: 1.35; margin: 0 0 28px 0; text-align: center; color: rgba(255, 207, 132, 1); }
  
  /* Section panels */
  .section { margin: 22px 0; padding: 18px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 207, 132, 0.10); border-radius: 10px; }
  .section-title { color: rgba(255, 207, 132, 1); font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.35; margin: 0 0 12px 0; }
  .section-text { font-size: 18px; font-weight: 400; line-height: 1.75; margin: 0; color: rgba(255,255,255,0.92); }
  
  .features-list { font-size: 18px; font-weight: 400; line-height: 1.75; margin: 12px 0 0 0; padding-left: 22px; color: rgba(255,255,255,0.92); }
  .features-list li { margin: 6px 0; }
  .features-list li::marker { color: rgba(255, 207, 132, 1); }
  
  .steps-list { font-size: 18px; line-height: 1.7; margin: 0; padding-left: 22px; color: rgba(255,255,255,0.92); }
  .steps-list li { margin-bottom: 8px; }
  .steps-list li::marker { color: rgba(255, 207, 132, 1); }
  
  .conclusion-text { font-size: 20px; font-weight: 400; line-height: 1.6; margin: 28px 0 0 0; text-align: center; font-style: italic; color: rgba(255,255,255,0.95); }
  
  /* Bottom blocks */
  .book { width: 100%; height: 50px; background-color: rgb(33 23 8 / var(--tw-bg-opacity, 1)); display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; box-sizing: border-box; }
  .book-group { display: flex; align-items: center; gap: 10px; }
  .book .alarm, .book .call-contact { width: 24px; height: 24px; }
  .alarm-booking, .call-contactus { color: rgba(255, 255, 255, 1); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 44px; }
  
  .reserved { width: 100%; height: 20px; background-color: #370617; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; box-sizing: border-box; }
  .reserved-text { color: rgba(255, 255, 255, 1); font-family: Inter; font-size: 16px; font-weight: 400; line-height: 44px; letter-spacing: 0; text-align: left; }
  
  .bottom-btn { width: 100%; height: 60px; background-color: rgb(33 23 8 / var(--tw-bg-opacity, 1)); display: flex; align-items: center; gap: 20px; padding: 0 200px; box-sizing: border-box; }
  .RoyalEscort-bottom { color: rgba(255, 255, 255, 1); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 19px; margin-left: auto; }
  
  /* Hide bottom buttons on tablets and below */
  @media (max-width: 768px) { .bottom-btn { display: none; } }
  
  /* Mobile menu visibility is controlled per breakpoint below */
  
  /* ===== Detailed responsive adaptations ===== */
  
  /* 1440px */
  @media (max-width: 1440px) {
    .header-up { padding: 0 60px 0 35px; }
    .hero { height: 170px; gap: 40px; padding: 0 40px 20px 40px; }
    .btn-text { font-size: 15px; padding: 8px 15px; }
    .BookingMiddle { font-size: 56px; line-height: 1.2; margin-bottom: 45px; }
    .BookingInfo { max-width: 900px; }
    .welcome-text { font-size: 19px; margin-bottom: 35px; }
    .section { margin-bottom: 32px; }
    .section-title { font-size: 22px; }
    .section-text, .features-list, .conclusion-text { font-size: 17px; }
    .btn-user { font-size: 32px; padding: 16px 36px; margin-top: 40px; }
    .bottom-btn { padding: 0 150px; }
    #mobileMenuBtn[hidden], #tabletMenuBtn[hidden] { display: none !important; }
  }
  
  /* 1024px */
  @media (max-width: 1024px) {
    .header-up { padding: 0 40px 0 25px; }
    .hero { height: 160px; gap: 30px; padding: 0 30px 18px 30px; }
    .btn-text { font-size: 14px; padding: 7px 14px; }
    .BookingMiddle { font-size: 48px; line-height: 1.15; margin-bottom: 40px; }
    .BookingInfo { max-width: 800px; }
    .welcome-text { font-size: 18px; margin-bottom: 32px; }
    .section { margin-bottom: 30px; }
    .section-title { font-size: 21px; }
    .section-text, .features-list, .conclusion-text { font-size: 16px; }
    .btn-user { font-size: 28px; padding: 14px 32px; margin-top: 35px; }
    .book { gap: 25px; }
    .bottom-btn { padding: 0 100px; gap: 18px; }
    .RoyalEscort-bottom { font-size: 15px; }
    #mobileMenuBtn[hidden], #tabletMenuBtn[hidden] { display: none !important; }
  }
  
  /* 768px */
  @media (max-width: 768px) {
    .header-up { padding: 0 20px; height: 57px; }
    .header_booking, .header_contact, .header_language { font-size: 15px; }
    .header_contact { margin-right: 18px; }
    .header_alarm, .header_call { width: 22px; height: 22px; }
    .hero { height: 140px; gap: 25px; padding: 0 20px 20px 20px; }
    .btn-text { font-size: 15px; padding: 7px 14px; }
    .middle { padding: 28px 16px; }
    .BookingMiddle { font-size: 36px; line-height: 1.3; margin-bottom: 35px; }
    .BookingInfo { max-width: 100%; padding: 0 10px; }
    .welcome-text { font-size: 17px; margin-bottom: 30px; }
    .section { margin-bottom: 28px; }
    .section-title { font-size: 21px; margin-bottom: 12px; }
    .section-text, .features-list, .conclusion-text { font-size: 16px; line-height: 1.5; }
    .features-list { padding-left: 18px; }
    .btn-user { font-size: 24px; padding: 14px 32px; margin-top: 35px; }
    .book { height: 48px; gap: 18px; padding: 0 20px; }
    .alarm-booking, .call-contactus { font-size: 15px; }
    .reserved { height: 19px; padding: 0 20px; }
    .reserved-text { font-size: 14px; }
    .bottom-btn { display: none !important; }
    #mobileMenuBtn[hidden] { display: none !important; }
    #tabletMenuBtn[hidden] { display: inline-flex !important; }
  }
  
  /* 425px */
  @media (max-width: 425px) {
    html {
      overflow-x: hidden;
      overflow-y: visible;
      height: auto;
      min-height: 100%;
      max-height: none;
      -webkit-overflow-scrolling: touch;
    }
    
    body {
      display: block !important;
      flex-direction: unset !important;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      height: auto;
      min-height: 100vh;
      max-height: none;
      -webkit-touch-callout: default !important;
    }
    
    .main-content,
    .middle,
    .BookingInfo,
    section {
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
    }
    
    .header-up { padding: 0 16px; height: 57px; }
    .header_booking, .header_contact, .header_language { font-size: 14px; }
    .header_contact { margin-right: 15px; }
    .header_alarm, .header_call { width: 20px; height: 20px; }
    .hero { display: none; }
    #mobileMenuBtn[hidden] { display: inline-flex !important; margin-left: 12px; }
    #tabletMenuBtn[hidden] { display: none !important; }
    .BookingMiddle { font-size: 28px; line-height: 1.2; margin-bottom: 24px; text-align: center; }
    .BookingInfo { padding: 0 8px; }
    .welcome-text { font-size: 15px; margin-bottom: 24px; text-align: center; }
    .section { margin-bottom: 20px; }
    .section-title { font-size: 18px; margin-bottom: 10px; }
    .section-text, .features-list, .conclusion-text { font-size: 14px; line-height: 1.5; }
    .features-list { padding-left: 16px; }
    .btn-user { font-size: 20px; padding: 12px 24px; margin-top: 30px; }
    .book { height: 45px; gap: 15px; padding: 0 16px; }
    .alarm-booking, .call-contactus { font-size: 14px; }
    .reserved { height: 18px; padding: 0 16px; }
    .reserved-text { font-size: 12px; text-align: center; }
    body.menu-open #mobileMenu { display: grid !important; }
  }
  
  /* 375px */
  @media (max-width: 375px) {
    html {
      overflow-x: hidden;
      overflow-y: visible;
      height: auto;
      min-height: 100%;
      max-height: none;
      -webkit-overflow-scrolling: touch;
    }
    
    body {
      display: block !important;
      flex-direction: unset !important;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      height: auto;
      min-height: 100vh;
      max-height: none;
      -webkit-touch-callout: default !important;
    }
    
    .main-content,
    .middle,
    .BookingInfo,
    section {
      overflow: visible !important;
      height: auto !important;
      max-height: none !important;
    }
    
    .header-up { padding: 0 12px; height: 57px; }
    .header_booking, .header_contact, .header_language { font-size: 13px; }
    .header_contact { margin-right: 12px; }
    .header_alarm, .header_call { width: 18px; height: 18px; }
    .mobile-menu-btn { margin-left: 10px; padding: 4px; }
    .mobile-menu-btn__bar { width: 16px; }
    .BookingMiddle { font-size: 24px; margin-bottom: 20px; }
    .welcome-text { font-size: 14px; margin-bottom: 20px; }
    .section-title { font-size: 17px; }
    .section-text, .features-list, .conclusion-text { font-size: 13px; }
    .btn-user { font-size: 18px; padding: 10px 20px; margin-top: 25px; }
    .book { gap: 12px; padding: 0 12px; }
    .alarm-booking, .call-contactus { font-size: 13px; }
    .reserved-text { font-size: 11px; }
    
    .mobile-menu { 
      top: 57px; 
    }
  }
  
  /* Hide hamburger on large desktops (>=1920px) */
  @media (min-width: 1920px) {
    .mobile-menu-btn { display: none !important; }
    .mobile-menu { display: none !important; }
  }
  
  /* Стили для центрирования логотипа */
  .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 20px;
      padding-top: 40px;
      height: auto;
      min-height: 200px;
      width: 100%;
      background-color: #370617;
      box-sizing: border-box;
  }
  
  .hero-logo {
      order: -1;
      margin-bottom: 12px;
      cursor: pointer;
      transition: opacity 0.3s ease;
  }
  
  .hero-logo:hover {
      opacity: 0.8;
  }
  
  .hero a {
      text-decoration: none;
      display: inline-block;
  }
  
  .hero-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 50px;
      flex-wrap: wrap;
  }
  
  /* Планшетное меню (768px) */
  .tablet-menu-btn {
      display: none;
      flex-direction: column;
      gap: 3px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      padding: 6px;
      cursor: pointer;
      margin-left: 10px;
  }
  
  .tablet-menu {
      position: fixed;
      top: 57px;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.98);
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      z-index: 1500;
      display: none;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      box-sizing: border-box;
      backdrop-filter: blur(10px);
  }
  
  .tablet-menu .btn-text {
      display: block;
      width: 100%;
      text-align: left;
      padding: 12px 16px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.3s ease;
  }
  
  .tablet-menu .btn-text:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateX(5px);
  }
  
  /* Анимация для бургер-меню планшета */
  body.tablet-menu-open .tablet-menu-btn__bar:nth-child(1) {
      transform: rotate(45deg) translate(6px, 6px);
  }
  
  body.tablet-menu-open .tablet-menu-btn__bar:nth-child(2) {
      opacity: 0;
  }
  
  body.tablet-menu-open .tablet-menu-btn__bar:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
  }
  
  /* 1440px */
  @media (max-width: 1440px) {
      .hero {
          min-height: 170px;
          padding-top: 35px;
          gap: 40px;
      }
      
      .hero-nav {
          gap: 40px;
      }
    .hero-logo { margin-bottom: 10px; }
  }
  
  /* 1024px */
  @media (max-width: 1024px) {
      .hero {
          min-height: 160px;
          padding-top: 30px;
          gap: 30px;
      }
      
      .hero-nav {
          gap: 30px;
      }
    .hero-logo { margin-bottom: 10px; }
  }
  
  /* 768px - стили для hero секции */
  @media (max-width: 768px) {
      .hero {
          display: flex !important;
          min-height: 110px;
          padding: 20px 20px 12px 20px;
          gap: 0;
          justify-content: center;
      }
      
      .hero-nav {
          display: none;
      }
      
      .hero-logo {
        width: 160px;
        height: auto;
        margin-bottom: 8px;
          order: -1;
      }
      
      /* Показываем меню когда открыто */
      body.tablet-menu-open .tablet-menu {
          display: flex !important;
      }
  }
  
  /* 425px */
  @media (max-width: 425px) {
      .hero {
          display: flex !important;
          min-height: 90px;
          padding: 16px 12px 10px 12px;
          gap: 0;
          justify-content: center;
      }
      
      .hero-nav {
          display: none !important;
      }
      
      .tablet-menu-btn {
          display: none !important;
      }
      
      .hero-logo {
          width: 140px;
          height: auto;
          margin: 0;
      }
  }
  
  /* 375px */
  @media (max-width: 375px) {
      .hero {
          min-height: 80px;
          padding: 14px 12px 8px 12px;
      }
      
      .hero-logo {
          width: 130px;
          height: auto;
          margin: 0;
      }
  }
  
  /* Для экранов больше 768px - скрываем планшетное меню */
  @media (min-width: 769px) {
      .tablet-menu-btn {
          display: none !important;
      }
      
      .tablet-menu {
          display: none !important;
      }
  }
  
  /* Для экранов меньше 769px но больше 425px - показываем планшетное меню в хедере */
  @media (min-width: 426px) and (max-width: 768px) {
      #tabletMenuBtn[hidden] {
          display: inline-flex !important;
      }
      
      #mobileMenuBtn[hidden] {
          display: none !important;
      }
  }
  
  /* Fix for scroll issues */
  * {
      box-sizing: border-box;
  }
  
  body, html {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
  }
  
  .main-content, .middle, .BookingInfo {
      overflow: visible;
  }
  
  /* КРИТИЧЕСКИЙ ФИКС ДЛЯ МОБИЛЬНЫХ - переопределяем все возможные блокировки */
  @media (max-width: 768px) {
    html, body {
      -webkit-overflow-scrolling: touch !important;
    }
    
    body {
      display: block !important;
      flex-direction: unset !important;
      overflow-y: auto !important;
      touch-action: pan-y !important;
      height: auto !important;
      min-height: 100vh !important;
      max-height: none !important;
    }
    
    .main-content,
    .middle,
    .BookingInfo,
    section,
    div {
      overflow: visible !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Убеждаемся, что контент может быть выше экрана */
    main,
    .main-content {
      min-height: auto !important;
      height: auto !important;
    }
    
    body.menu-open,
    body.tablet-menu-open {
      overflow: hidden !important;
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
    }
  }