/* -----------------------------------------
   FlightCatchr mobile overrides
   (this file is loaded with media="(max-width: 1024px)")
------------------------------------------ */

/* -----------------------------------------
   Global (for <= 1024px via link media)
------------------------------------------ */

/* Global safety for mobile */
html,
body {
  overflow-x: hidden;
}

/* Keep space for fixed header consistent on mobile */
body {
  padding-top: 60px; /* header is 60px on mobile */
}

/* -----------------------------------------
   Up to 1240px
   - Banner right image scaling
------------------------------------------ */
@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }
}

/* -----------------------------------------
   Up to 1024px
   - Header/nav mobile behaviour
   - Searchbox
   - Hero spacing
   - Help/account padding
   - Footer logo
------------------------------------------ */
@media (max-width: 1024px) {

  /* Remove extra left offset from logo (old desktop style) */
  .header-area .logo {
    margin-left: 0 !important;
  }

  /* Header bar (normal + background + sticky) */
  .header-area,
  .background-header,
  .header-area.header-sticky,
  .background-header.header-sticky {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 16px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(15, 23, 42, 0.08);
  }

  /* Main nav container – match 60px height */
  .header-area .main-nav {
    height: 60px !important;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }

  /* Logo wrapper */
  .header-area .main-nav .logo {
    width: auto;
    line-height: 60px;
    display: flex;
    align-items: center;
    color: #1e1e1e;
  }

  /* Logo image sizing inside 60px header */
  .header-area .main-nav .logo img {
    width: 135px;
    height: auto;
    display: block;
    margin-top: 0 !important;
  }

  /* Hamburger placement – but hamburger is hidden; kept for safety */
  .header-area .main-nav .menu-trigger {
    top: 18px;
    right: 20px;
  }

  /* Mobile nav panel behaviour – force inline nav (desktop-style) */
  .header-area .main-nav .nav {
    position: static !important;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0 !important;
    margin-left: 0;
    float: right;

    display: flex !important;
    width: auto;

    background: transparent !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }

  /* Hide hamburger on tablet/mobile */
  .header-area .menu-trigger {
    display: none !important;
  }

  .header-area .main-nav .nav li {
    background: #fff;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    border: none !important;
    color: #191a20 !important;
    text-align: center;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #007cc2 !important;
    opacity: 1;
  }

  /* Do NOT hide last nav item (My Booking area) */
  .header-area .main-nav .nav li:last-child,
  .background-header .main-nav .nav li:last-child {
    display: block !important;
  }

  /* Style last nav item as primary CTA */
  .header-area .main-nav .nav li:last-child a,
  .background-header .main-nav .nav li:last-child a {
    background: #fff !important;
    color: #243E90 !important;
    border-radius: 10px;
    margin: 0 16px;
  }

  /* Adivaha language/currency bar inside mobile menu */
  .adi_language_code,
  .adi_currency_code {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
  }

  /* Account box adjustments inside mobile menu */
  .header-area .main-nav .nav li .adhCustomerLoginBox {
    justify-content: center;
    width: 100%;
  }

  .adhCustomerLoginBox .name_div_dropdown {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
  }

  .adhCustomerLoginBox .name_div_dropdown a {
    background: #f7f7f7;
    text-align: center;
  }

  /* Searchbox drops into normal flow on mobile */
  .searchbox {
    position: relative;
  }

  /* Hero / search spacing on tablet & up-mobile */
  .main-banner {
    padding: 140px 0 40px 0;
  }

  /* Prevent overlap on help/account pages */
  .fc-account-wrapper,
  .help-hero {
    padding-top: 20px;
  }

  /* Footer logo: use natural width on mobile */
  footer .about .logo img {
    width: auto;
  }
}

/* -----------------------------------------
   Up to 992px
   - General layout tweaks
------------------------------------------ */
@media (max-width: 992px) {
  .main-banner::before {
    display: none;
  }

  .main-banner .item {
    margin-right: 0;
  }

  .main-banner {
    padding-bottom: 0;
  }

  .about-us .section-heading h2 {
    margin-right: 0;
  }

  .fact-item .icon {
    margin: 0 auto;
  }

  .subscribe .inner-content {
    padding: 60px 30px;
  }

  .contact-us .section-heading h2 {
    margin-right: 0;
    text-align: center;
  }

  form#contact {
    margin-left: 0;
    margin-top: 60px;
    padding: 45px 30px;
  }

  .footer-item {
    margin-bottom: 45px;
  }

  .subscribe-newsletters {
    margin-bottom: 0;
  }
}

/* -----------------------------------------
   Up to 991px
   - Legacy helper classes
------------------------------------------ */
@media (max-width: 991px) {
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

/* -----------------------------------------
   Up to 767px
   - Phone layout
------------------------------------------ */
@media (max-width: 767px) {

  /* Slightly smaller logo on compact screens */
  .header-area .main-nav .logo img {
    width: 125px;
  }

  .searchbox {
    min-height: 520px;
  }

  /* Tighter banner spacing + hide hero right col-lg-12 */
  .main-banner {
    padding: 70px 0 0 0;
    background-color: #fff !important;
  }

  .main-banner .col-lg-12 {
    display: none !important;
  }

  /* Banner CTA stack */
  .main-banner .item .down-buttons {
    display: inline-block;
  }

  .main-banner .item .down-buttons .main-blue-button {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .main-banner .item .down-buttons .call-button a {
    margin-left: 0;
  }

  /* Subscribe: more vertical spacing, full-width button */
  .subscribe .inner-content:after {
    z-index: -1;
  }

  .subscribe .inner-content {
    padding: 60px 30px 100px 30px;
  }

  .subscribe .inner-content form input {
    width: 49%;
  }

  .subscribe .inner-content form button {
    width: 100%;
    background-color: #ff695f;
    margin-top: 30px;
  }

  /* Videos */
  .our-videos ul.nacc li {
    transform: translateY(-50px);
  }

  /* Contact layout */
  .contact-left-dec {
    display: none;
  }

  .contact-us .info {
    display: inline-block;
  }

  .contact-us .info span {
    margin-bottom: 20px;
  }

  /* Footer sitemap link */
  .sitemap-link {
    padding: 0 0 20px 0;
    text-align: left;
  }

  /* Footer logo scale down a bit on very small screens */
  footer .about .logo img {
    width: 125px;
  }

  /* Help page text sizes on phones */
  .help-title {
    font-size: 32px;
  }

  .help-text {
    font-size: 16px;
  }

  .help-hero {
    margin-top: 0;
    margin-bottom: 80px;
  }

  /* Mobile app section: stack image & text */
  .mobile_app_section {
    margin-bottom: 0;
  }

  .mobile_app_sectiorow {
    flex-direction: column;
  }

  .mobile_img {
    margin: -60px auto 0;
    width: 100%;
    padding-right: 0;
  }

  .app_details {
    padding: 20px;
    width: 100%;
  }

  .right-top-widet {
    display: inline;
    float: left;
    width: 100%;
  }
  
/* Hide footer logo block on mobile */
  footer .about.footer-item .logo {
    display: none !important;
  }
  
  footer .about.footer-item ul {
    margin-top: -20px !important;
    margin-bottom: -40px !important;
  }

  /* Small spacing adjustment under banner */
  .p-0 {
    margin-top: -20px;
  }

  /* Adivaha trip type pills */
  #AD186900_1 .onewayu,
  #AD186900_1 .round_tripu {
    box-shadow: none !important;
    background-color: #F4F4F4 !important;
    color: #000 !important;
  }

  #AD186900_1 .onewayu_selected {
    background-color: #243e90 !important;
    color: #fff !important;
    border: none !important;
  }

  #AD186900_1 .inputadiPColor {
    border-radius: 10px !important;
  }

  /* Main banner heading size on phones */
  .main-banner .item h2 {
    font-size: 35px;
    line-height: 50px;
  }

  /* ---------------------------------------
     Header on phones – behave like desktop
  ---------------------------------------- */

  .header-area,
  .background-header {
    height: 60px;
    min-height: 60px;
    padding: 0 12px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(15, 23, 42, 0.08);
  }

  .header-area .main-nav {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-area .main-nav .logo {
    float: none;
    line-height: 1; /* avoid huge vertical spacing */
  }

  /* Force nav to be inline, not the dropdown panel */
  .header-area .main-nav .nav,
  .background-header .main-nav .nav {
    display: flex !important;
    position: static !important;
    float: none;
    width: auto;
    margin: 0 !important; /* cancel original margin-top */
    background: transparent !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* Tighter spacing for small width */
  .header-area .main-nav .nav li {
    padding: 0 8px;
  }

  .header-area .main-nav .nav li a {
    height: auto;
    line-height: 1.2;
    font-size: 14px;
  }

  /* Hide "My Booking" text on phones, keep the icon */
  .Header_mbButton {
    font-size: 0 !important; /* hides the text */
  }

  .Header_mbButton svg {
    width: 22px !important;
    height: 22px !important;
    margin-right: -10px !important; /* optional: center the icon */
  }
}

/* -----------------------------------------
   Very small phones (<= 433px)
------------------------------------------ */
@media (max-width: 433px) {
  .about-us .fact-item .count-digit {
    font-size: 40px;
  }

  .about-us .fact-item .count-title {
    font-size: 12px;
    font-weight: 600;
  }

  .mobile_app_section .social-links a {
    padding: 5px 5px !important;
  }
}

/* -----------------------------------------
   Global nav overrides (desktop-style nav
   on tablet/phone using .fc-inline-nav)
------------------------------------------ */

/* Never show the hamburger – global safety */
.header-area .main-nav .menu-trigger,
.header-area .menu-trigger {
  display: none !important;
}

/* Force desktop-style inline nav on mobile/tablet for .fc-inline-nav */
.header-area .main-nav .fc-inline-nav {
  display: flex !important;
  position: static !important;
  float: right;
  width: auto;
  margin: 0 !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Undo the "mobile panel" styles that made each item full-width */
.header-area .main-nav .fc-inline-nav li {
  width: auto !important;
  border: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  background: transparent !important;
}

.header-area .main-nav .fc-inline-nav li a {
  height: 60px !important;
  line-height: 60px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #191a20 !important;
  text-align: left !important;
}

/* Ensure inline nav on desktop as well (safety) */
@media (min-width: 1024px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}