/* ============================================
   MEDIA.CSS - Responsive Styles
   Desktop-first approach
   
   Breakpoints:
   - Base: Desktop (>992px)
   - max-width: 992px - Tablet
   - max-width: 767px - Mobile Landscape  
   - max-width: 600px - Mobile Portrait
   - max-width: 480px - Small Mobile
   ============================================ */

/* ============================================
   GLOBAL STYLES (All screen sizes)
   ============================================ */

/* Hamburger menu - solid white (Bootstrap navbar-dark uses semi-transparent) */
.navbar-dark .navbar-toggler {
  border-color: #fff !important;
}

.navbar-dark .navbar-toggler i,
.navbar-toggler i.fa-bars {
  color: #fff !important;
}

/* Special Offer Banner - Base Styles */
/* Header height: 105px for screens >=768px */
#special-offer-banner {
  position: fixed;
  left: 0;
  width: 100%;
  background: rgba(196, 0, 0, 0.9);
  color: #fff;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 15px;
  top: 105px;
}

.special-offer-heading {
  font-size: 16px;
}

.special-offer-rates {
  font-size: 14px;
}

/* ============================================
   TABLET - max-width: 992px
   ============================================ */
@media (max-width: 992px) {
  /* Banner - stack vertically */
  #special-offer-banner {
    padding: 8px 12px;
    flex-direction: column;
    gap: 4px;
  }

  .special-offer-heading {
    font-size: 13px;
  }

  .special-offer-rates {
    font-size: 12px;
  }

  /* Navigation */
  .navbar-nav {
    align-items: flex-end !important;
  }

  .navigationSec .nav-link {
    color: #fff;
    margin: 0;
    padding: 2px 29px;
  }

  .brandLabel {
    display: flex !important;
    font-size: 31px;
    font-weight: 700;
    color: #049cbf !important;
  }

  /* Layout */
  .boxes img {
    display: none;
  }

  .boxes h2.fs74 {
    font-size: 55px;
  }

  .boxes p.fs35 {
    font-size: 24px;
  }

  .searhLocation .col {
    flex: 100%;
  }

  /* VR Section */
  .vrInfo h3.fs74 {
    font-size: 55px;
  }

  .vrInfo h4.fs38 {
    font-size: 25px;
    margin: 0;
  }

  .vrExperience {
    min-height: 322px;
  }

  /* Forms */
  p.policy.pt-2 input[type="checkbox" i] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 12px;
  }

  /* Experience */
  .experienceInfo {
    padding-left: 0 !important;
  }

  .expierenceBanner {
    min-height: 277px;
  }

  /* Stay Tune */
  .staytune button {
    height: 100%;
    flex: 34%;
    border-radius: 0;
    padding: 22px;
    border: none;
    background: var(--blueshades);
    font-weight: 600;
    color: #fff;
  }

  .staytune p.fs74 {
    font-size: 57px;
  }

  /* Fancy Info */
  .fancyInfo ul li a {
    background: var(--primary);
    padding: 1rem 2.5rem;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
    text-decoration: none;
  }

  /* Book Now */
  .booknow {
    background: var(--primary);
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    margin-left: 1rem;
    display: flex !important;
    justify-content: center;
    width: max-content;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  /* Header Info */
  .headerInfo {
    position: relative;
    z-index: 0;
    padding-top: 9rem !important;
  }

  /* Location */
  .locationSec img {
    width: 100%;
    padding-bottom: 2rem;
  }
}

/* ============================================
   MOBILE LANDSCAPE - max-width: 767px
   Header height changes to 76px at this breakpoint
   ============================================ */
@media (max-width: 767px) {
  /* Banner position - header is 76px */
  #special-offer-banner {
    top: 76px;
  }

  .navbar-brand img {
    max-width: 50px;
  }

  .brandLabel {
    font-size: 26px;
    font-weight: 700;
    color: #049cbf !important;
  }
}

/* ============================================
   MOBILE PORTRAIT - max-width: 600px
   ============================================ */
@media (max-width: 600px) {
  /* Video section - use dynamic viewport height for consistent mobile experience */
  .videoSec {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - accounts for browser UI */
  }

  /* Banner - smaller on mobile */
  #special-offer-banner {
    top: 76px;
    padding: 5px 8px;
  }

  /* Arrow - position at bottom */
  a.arrowIcon {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .special-offer-heading {
    font-size: 11px;
  }

  .special-offer-rates {
    font-size: 10px;
  }

  /* Background */
  .darkBlacktras {
    background: #000;
  }

  /* DataTables */
  div#example_wrapper .row .col-sm-12.col-md-6 {
    width: 50%;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 67%;
  }

  .dataTables_wrapper {
    position: relative;
    clear: both;
    overflow: auto;
  }

  /* Modal */
  .modal-header {
    border-bottom: none;
    padding-bottom: 1rem;
  }

  .modal-header .btn-close {
    filter: invert(1);
  }

  .modal.show .modal-dialog {
    min-width: auto !important;
  }

  .modal-body {
    padding: 0;
  }

  /* Search Location */
  .searhLocation {
    background: #101922;
    padding: 2rem 2rem;
    border-radius: 20px;
    border: 2px solid var(--primary);
  }

  .searhLocation .col {
    flex: 100%;
  }

  /* Experience Sections */
  .experience3 {
    padding: 4rem 0;
    height: 90vh;
    padding-top: 0;
  }

  .yourexperience {
    padding-bottom: 4rem !important;
  }

  .expiernceBox h3.fs80 {
    font-size: 35px;
  }

  .expiernceBox {
    background: #000;
    padding: 3rem 0;
    padding-bottom: 2rem;
    height: 79vh;
  }

  .expierenceBanner {
    min-height: 123px;
    margin-top: 4.7rem;
  }

  /* About Sections */
  .breadCrumbs.aboutBg {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .breadCrumbs.aboutBg h1.fs80 {
    font-size: 4rem;
  }

  .aboutsec1,
  .aboutsec2,
  .aboutsec3,
  .aboutsec4,
  .aboutsec5 {
    min-height: 100vh;
  }

  /* Header */
  .headerSec {
    overflow: hidden;
  }

  .headerInfo {
    position: relative;
    z-index: 0;
    bottom: -60px; /* Position button just above arrow */
  }

  .headerForm {
    position: relative;
    z-index: 0;
    padding: 1rem 1.5rem;
    border-radius: 0;
    border: none;
    background: #5f2eca7a;
  }

  /* Forms */
  p.policy.pt-2 input[type="checkbox" i] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 12px;
  }

  /* Navigation */
  .navbar-nav {
    align-items: flex-end !important;
  }

  .navigationSec .nav-link {
    text-align: end;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
  }

  .brandLabel {
    font-size: 29px;
    font-weight: 700;
    color: #049cbf !important;
  }

  /* Actions */
  .actionsBtn {
    display: flex;
    width: 100%;
    text-align: center;
  }

  .actionsBtn a {
    flex: 1;
  }

  /* VR Section */
  .vrExperience {
    max-height: 172px;
    min-height: 172px;
  }

  .vrInfo {
    text-align: center;
    margin-top: -2rem;
  }

  .vrInfo h3.fs74 {
    font-size: 28px;
  }

  .vrInfo h4.fs38 {
    font-size: 18px;
    margin: 0;
  }

  .vrInfo a {
    background: var(--primary);
    border-radius: 10px;
    font-size: 10px;
    margin-top: 4px !important;
  }

  /* FAQ */
  .faqSec p.fs35 {
    font-size: 24px;
  }

  /* Copyright */
  .copyrightSec p.fs20 {
    font-size: 14px;
  }

  /* Fancy Info */
  .fancyInfo {
    padding: 2rem 1rem;
    position: relative;
    border-radius: 70px;
  }

  .fancyInfo ul li {
    flex: 40%;
  }

  .fancyInfo p.fs-5 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  .fancyInfo ul li a {
    background: var(--primary);
    padding: 1rem 1.5rem;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
    text-decoration: none;
    display: block;
  }

  /* Stay Tune */
  .staytune p.fs74 {
    font-size: 34px;
    margin: 0;
  }

  .staytune p.fs35 {
    font-size: 20px;
    padding-bottom: 20px;
  }

  .staytune .form-control {
    padding: 10px 18px;
    height: auto;
    border-radius: 0;
  }

  .staytune .form-group {
    display: flex;
    flex-wrap: nowrap;
  }

  .staytune button {
    height: 100%;
    flex: 32%;
    border-radius: 0;
    padding: 11px 0px;
    border: none;
    background: var(--blueshades);
    font-weight: 600;
    color: #fff;
  }

  /* Icon Box */
  .iconBox {
    position: absolute;
    width: 69px;
    height: 77%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    background: #e9e4e4;
    top: 7px;
  }

  /* Book Now */
  .booknow {
    background: var(--primary);
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    margin: auto;
    display: flex;
    justify-content: center;
    width: max-content;
    margin-bottom: 4rem;
  }

  /* Social */
  .social {
    margin-bottom: 17px !important;
  }

  /* Location Info */
  .infoLocation div {
    margin-top: 20px;
  }

  .infoLocation div a {
    flex: 23%;
    text-align: center;
    font-size: 12px;
    padding: 10px !important;
  }

  .locationInfo p.fs74 {
    font-size: 33px;
  }

  .locationInfo p.fs28 {
    font-size: 18px;
  }

  /* Location page - position info and buttons at bottom */
  .headerInfo.locationInfo {
    position: absolute;
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    padding: 0 1rem !important;
  }

  .headerInfo.locationInfo .boxes {
    width: 100%;
  }

  /* Opening List */
  .openinglist {
    justify-content: space-between;
    padding: 0 6px !important;
  }

  .openinglist li {
    width: 37%;
    flex: 44%;
    font-size: 14px;
  }

  /* Video Section - Location page */
  .videoSec.videosecLoca {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height - fills actual visible screen */
  }


  /* Breadcrumbs */
  .breadCrumbs {
    padding: 2rem 0;
    position: relative;
  }

  .breadCrumbs.locationBg h1.fs80 {
    font-size: 40px;
  }

  .breadCrumbs.locationBg p.fs28 {
    font-size: 18px;
  }

  /* Room List */
  #roomlist {
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* Middle Content */
  .middlecontent p.fs35 {
    font-size: 23px;
  }
}

/* ============================================
   SMALL MOBILE - max-width: 480px
   ============================================ */
@media (max-width: 480px) {
  .navbar-brand img {
    max-width: 50px;
  }

  .brandLabel {
    font-size: 26px;
    font-weight: 700;
    color: #049cbf !important;
  }

  .innerHomeform p {
    font-size: 18px;
    line-height: 33px;
  }

  .boxes h2.fs74 {
    font-size: 63px;
  }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 768px) {
    .headerInfo {
      position: relative;
      z-index: 0;
      margin-bottom: 6rem;
    }

    .headerForm .form-control {
      padding: 13px 10px;
      appearance: auto;
    }

    a.arrowIcon {
      bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }

    /* Prevent iOS zoom on form inputs */
    select {
      font-size: 16px;
      background-color: #fff;
      border: 1px solid #ccc;
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
      appearance: none;
      -webkit-appearance: none;
    }

    .searhLocation .form-control {
      height: 50px;
      line-height: 50px;
    }

    .searhLocation input {
      width: 96% !important;
      max-width: 96% !important;
      min-width: 96% !important;
      height: 50px;
      line-height: 50px;
    }

    .searhLocation input[type="number"] {
      width: 99% !important;
      max-width: 99% !important;
      min-width: 99% !important;
      height: 50px;
      line-height: 50px;
    }

    .vrInfo {
      text-align: center;
      margin-top: -2rem;
    }

    .img-fluid {
      height: auto !important;
    }
  }
}