/*
 * BookHolidayTrip Premium Corporate Design System v2.0
 * Clean, clear fonts — zero decorative/stylish fonts
 * Better than MakeMyTrip (less clutter) and Booking.com (more premium)
 */

:root {
  --hx: #1D9E75;
  --hx-light: #E8F7F1;
  --hx-dark: #0F6E56;
  --hx-bg: #F7F8FA;
  --hx-white: #FFFFFF;
  --hx-dark-bg: #0D1B2A;
  --hx-navy: #051036;
  --hx-text: #1B1B2F;
  --hx-text2: #5A6275;
  --hx-text3: #9099A8;
  --hx-border: #E2E6EC;
  --hx-gold: #E8A317;
  --hx-red: #E63946;
  --hx-radius: 12px;
  --hx-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --hx-shadow2: 0 8px 30px rgba(0,0,0,0.1);
}

/* === GLOBAL CLEAN TYPOGRAPHY — NO STYLISH FONTS === */
body, body.frontend-page, .bravo_wrap, h1, h2, h3, h4, h5, h6, p, a, span, div, input, select, textarea, button, label, li, td, th {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { letter-spacing: -0.01em; font-weight: 600; color: var(--hx-text); }
p { color: var(--hx-text2); line-height: 1.65; }
body.frontend-page { background: var(--hx-bg); }

/* === HEADER — Clean Corporate === */
.header { transition: all 0.35s ease; }
.header .header__container { max-width: 1320px; margin: 0 auto; }
.header.is-sticky, .header.is-sticky .bg-dark-1, .header.is-sticky .bg-white { background: var(--hx-navy) !important; box-shadow: 0 2px 14px rgba(0,0,0,0.25); }
.header.is-sticky .text-white { color: #ffffff !important; }
.header.is-sticky .text-dark-1 { color: #ffffff !important; }
.header .menu .subnav { border-radius: var(--hx-radius); box-shadow: var(--hx-shadow2); border: 1px solid var(--hx-border); }
.header .button.-sm.-blue-1.bg-blue-1, .header .button.-dark-1.bg-blue-1 { background: var(--hx) !important; border-radius: 8px !important; font-weight: 600; transition: all 0.2s; }
.header .button.-sm.-blue-1.bg-blue-1:hover { background: var(--hx-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29,158,117,0.25); }

/* === HOMEPAGE HERO / MASTHEAD — Premium Full-Width === */
.masthead { position: relative; }
.masthead.-type-4 { min-height: 580px; }
.masthead.-type-4 .masthead__image img { filter: brightness(0.7); }
.masthead.-type-4 .text-60, .masthead h1 { font-size: 48px !important; font-weight: 700 !important; line-height: 1.15; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.masthead.-type-4 .text-white.mt-5, .masthead p.text-white { font-size: 18px !important; opacity: 0.9; font-weight: 400; text-shadow: 0 1px 8px rgba(0,0,0,0.2); }
.masthead .button.-outline-white { border: 2px solid #fff; border-radius: 8px; font-weight: 600; padding: 12px 32px; backdrop-filter: blur(4px); background: rgba(255,255,255,0.1); transition: all 0.3s; }
.masthead .button.-outline-white:hover { background: var(--hx); border-color: var(--hx); }

/* === HOMEPAGE SEARCH FORM — Clean, Clear, Focused === */
.mainSearch, .form-search-all-service form, .form-search-all-service .mainSearch, .home4-form-search-hotel .mainSearch { background: var(--hx-white); border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); padding: 10px; border: 1px solid rgba(255,255,255,0.2); }
.mainSearch .searchMenu-loc, .mainSearch .searchMenu-date, .mainSearch .searchMenu-guests { border-radius: 10px; padding: 14px 18px; transition: background 0.2s; }
.mainSearch .searchMenu-loc:hover, .mainSearch .searchMenu-date:hover, .mainSearch .searchMenu-guests:hover { background: var(--hx-bg); }
.mainSearch h4, .mainSearch .text-15.fw-500 { font-size: 13px !important; font-weight: 600 !important; color: var(--hx-text) !important; text-transform: uppercase; letter-spacing: 0.5px; }
.mainSearch .text-15.text-light-1 { font-size: 14px !important; color: var(--hx-text2) !important; }
.mainSearch .button-search, .mainSearch .button.-dark-1.bg-blue-1 { background: var(--hx) !important; border-radius: 10px !important; font-weight: 600; font-size: 16px; min-height: 56px; letter-spacing: 0.3px; transition: all 0.25s; }
.mainSearch .button-search:hover, .mainSearch .button.-dark-1.bg-blue-1:hover { background: var(--hx-dark) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,158,117,0.3); }

/* === HOMEPAGE SECTIONS — Premium Spacing === */
.layout-pt-md, .layout-pt-lg { padding-top: 70px !important; }
.layout-pb-md, .layout-pb-lg { padding-bottom: 70px !important; }
section .container .text-30.fw-600, section .text-30 { font-size: 28px !important; font-weight: 700 !important; color: var(--hx-text) !important; }
section .text-light-1.text-18 { color: var(--hx-text2) !important; }

/* === HOTEL/TOUR/CAR CARDS — Premium Design === */
.hotelsCard.-type-1, .tourCard.-type-1, .carCard.-type-1, .activityCard.-type-1, .item-loop { background: var(--hx-white); border-radius: var(--hx-radius); overflow: hidden; border: 1px solid var(--hx-border); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.hotelsCard.-type-1:hover, .tourCard.-type-1:hover, .carCard.-type-1:hover, .item-loop:hover { box-shadow: var(--hx-shadow2); transform: translateY(-6px); border-color: transparent; }
.cardImage__content img { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.hotelsCard:hover .cardImage__content img, .tourCard:hover .cardImage__content img { transform: scale(1.08); }

/* Card content */
.hotelsCard__content, .tourCard__content { padding: 16px 18px 18px; }
.hotelsCard__title, .tourCard__title { font-size: 17px !important; font-weight: 600 !important; color: var(--hx-text) !important; line-height: 1.3; }
.hotelsCard__title a:hover, .tourCard__title a:hover { color: var(--hx) !important; }
.text-light-1.lh-14.text-14 { font-size: 13px !important; color: var(--hx-text3) !important; }

/* Card badges */
.cardImage__leftBadge .bg-yellow-1, .cardImage__leftBadge .bg-dark-1 { background: var(--hx) !important; color: #fff !important; font-weight: 600; border-radius: 0 8px 8px 0; font-size: 11px; letter-spacing: 0.3px; }
.cardImage__leftBadge .bg-blue-1 { background: var(--hx-red) !important; border-radius: 0 8px 8px 0; }
.cardImage__wishlist .button { width: 36px !important; height: 36px !important; background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.cardImage__wishlist .button:hover { background: var(--hx-red) !important; color: #fff !important; }
.service-wishlist.active .cardImage__wishlist .button { background: var(--hx-red) !important; color: #fff !important; }

/* Review score */
.bg-blue-1.rounded-4.size-30, .flex-center.bg-blue-1.rounded-4 { background: var(--hx) !important; border-radius: 6px !important; font-weight: 700; }
.text-yellow-1, .icon-star.text-10.text-yellow-1 { color: var(--hx-gold) !important; }

/* Price display */
.text-22.lh-12.fw-600, .hotelsCard .fw-600, .tourCard .fw-600 { color: var(--hx) !important; }
.text-red-1.line-through { color: var(--hx-text3) !important; text-decoration: line-through; font-size: 14px; }

/* === LOCATION CARDS — Premium Destination Design === */
.citiesCard, .destCard, [class*="citiesCard"], [class*="destinationsCard"] { border-radius: var(--hx-radius); overflow: hidden; transition: all 0.3s; }
.citiesCard:hover, .destCard:hover, [class*="citiesCard"]:hover { transform: translateY(-6px); box-shadow: var(--hx-shadow2); }

/* === HOTEL DETAIL PAGE — Corporate Premium === */
.bravo_hotel_detail .g-header h1, .bravo_detail h1.text-30 { font-size: 30px !important; font-weight: 700 !important; line-height: 1.2; }
.bravo_hotel_detail .g-header { padding: 24px 0 16px; }
.bravo_content .gotrip-overview .content-text { font-size: 15px; line-height: 1.75; color: var(--hx-text2); }

/* Room cards */
.hotel_rooms_form { border-radius: 16px !important; border: 1px solid var(--hx-border) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; overflow: hidden; }
.roomGrid.-type-2 .roomGrid__content, .room-item { transition: all 0.2s; border-radius: var(--hx-radius); }
.roomGrid.-type-2 .roomGrid__content:hover, .room-item:hover { background: var(--hx-light); }

/* Book now button */
.button.-dark-1.bg-blue-1, .button.h-50.-dark-1.bg-blue-1, .btn-add-cart, a.button.h-50.px-24.-dark-1.bg-blue-1 { background: var(--hx) !important; border-radius: 10px !important; font-weight: 600; border: none; transition: all 0.25s; }
.button.-dark-1.bg-blue-1:hover, .btn-add-cart:hover, a.button.h-50.px-24.-dark-1.bg-blue-1:hover { background: var(--hx-dark) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,158,117,0.3); }

/* Mobile booking bar */
.bravo-more-book-mobile { background: var(--hx-white); box-shadow: 0 -4px 24px rgba(0,0,0,0.08); border-top: 1px solid var(--hx-border); padding: 14px 20px !important; }
.bravo-more-book-mobile .btn-add-cart { background: var(--hx) !important; border-radius: 10px !important; padding: 12px 28px; font-weight: 600; font-size: 15px; }

/* === CHECKOUT — Clean Flow === */
.bravo-booking-page { background: var(--hx-bg); }
.bravo-booking-page h2.text-22 { font-size: 22px !important; font-weight: 700 !important; }
.bravo-booking-page .form-control, .bravo-booking-page input, .bravo-booking-page select { border-radius: 8px !important; border: 1px solid var(--hx-border) !important; font-size: 14px; padding: 12px 16px; transition: border 0.2s, box-shadow 0.2s; }
.bravo-booking-page input:focus, .bravo-booking-page select:focus { border-color: var(--hx) !important; box-shadow: 0 0 0 3px rgba(29,158,117,0.12) !important; }
.booking_detail, .bravo_detail_price { background: var(--hx-white); border-radius: 16px; border: 1px solid var(--hx-border); position: sticky; top: 100px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.bravo-checkout-btn, .bravo-booking-page .btn-primary { background: var(--hx) !important; border-radius: 10px !important; border: none; font-weight: 600; font-size: 16px; padding: 14px 32px; width: 100%; transition: all 0.25s; }
.bravo-checkout-btn:hover { background: var(--hx-dark) !important; box-shadow: 0 6px 24px rgba(29,158,117,0.3); }

/* === SEARCH RESULTS — Clean Filter + Cards === */
.bravo_filter, .bravo-list-item .bravo_filter { background: var(--hx-white); border-radius: 16px; border: 1px solid var(--hx-border); padding: 24px; box-shadow: var(--hx-shadow); }
.bravo_filter .item-title { font-size: 14px; font-weight: 700; color: var(--hx-text); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.bravo_filter .bravo-filter-price .irs--flat .irs-bar, .bravo_filter .irs--flat .irs-handle>i:first-child { background: var(--hx) !important; }

/* Pagination */
.pagination .page-link { border-radius: 8px !important; margin: 0 3px; border: 1px solid var(--hx-border); font-weight: 500; transition: all 0.2s; }
.pagination .page-item.active .page-link { background: var(--hx) !important; border-color: var(--hx) !important; }

/* === FORMS GLOBAL === */
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { border-radius: 8px !important; border: 1px solid var(--hx-border) !important; transition: all 0.2s; }
input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--hx) !important; box-shadow: 0 0 0 3px rgba(29,158,117,0.1) !important; outline: none; }

/* === ALL BLUE → GREEN BRAND OVERRIDE === */
.bg-blue-1, .btn-primary { background-color: var(--hx) !important; }
.bg-blue-1:hover, .btn-primary:hover { background-color: var(--hx-dark) !important; }
.text-blue-1 { color: var(--hx) !important; }
.bg-blue-1-05 { background-color: var(--hx-light) !important; }
.border-blue-1 { border-color: var(--hx) !important; }
a { color: var(--hx); }
a:hover { color: var(--hx-dark); }

/* === USER DASHBOARD === */
.bravo_user_profile .sidebar-menu { background: var(--hx-white); border-radius: 16px; border: 1px solid var(--hx-border); overflow: hidden; }
.bravo_user_profile .sidebar-menu .menu-item.active { background: var(--hx-light); border-left: 3px solid var(--hx); }
.bravo_user_profile .sidebar-menu .menu-item.active a { color: var(--hx-dark); font-weight: 600; }

/* === REVIEWS === */
.review-box, .bravo-reviews .review-item { background: var(--hx-white); border-radius: var(--hx-radius); padding: 20px; border: 1px solid var(--hx-border); margin-bottom: 14px; }

/* === FOOTER === */
.footer.-type-1 { background: var(--hx-dark-bg); }

/* === ANIMATIONS — Subtle & Professional === */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.hotelsCard, .tourCard, .carCard, .item-loop, .citiesCard { animation: fadeUp 0.5s ease both; }
.hotelsCard:nth-child(2) { animation-delay: 0.08s; }
.hotelsCard:nth-child(3) { animation-delay: 0.16s; }
.hotelsCard:nth-child(4) { animation-delay: 0.24s; }
html { scroll-behavior: smooth; }

/* === MOBILE — Better than MakeMyTrip === */
@media (max-width: 991px) {
  .masthead.-type-4 { min-height: 420px; }
  .masthead.-type-4 .text-60 { font-size: 28px !important; }
  .mainSearch { border-radius: 12px; padding: 10px; }
  .layout-pt-md, .layout-pt-lg { padding-top: 40px !important; }
  .layout-pb-md, .layout-pb-lg { padding-bottom: 40px !important; }
  .booking_detail { position: relative; top: 0; margin-top: 16px; }
}
@media (max-width: 575px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .masthead.-type-4 .text-60 { font-size: 24px !important; }
  .masthead.-type-4 .text-white.mt-5 { font-size: 14px !important; }
  section .text-30 { font-size: 22px !important; }
  .hotelsCard__title { font-size: 15px !important; }
  .cardImage__wishlist .button { width: 40px !important; height: 40px !important; }
  .bravo-more-book-mobile { padding: 12px 16px !important; }
}

/* === TRUST BAR (add below hero) === */
.hnxt-trust { display:flex; justify-content:center; gap:32px; padding:18px 0; background:var(--hx-white); border-bottom:1px solid var(--hx-border); flex-wrap:wrap; }
.hnxt-trust span { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--hx-text2); }
.hnxt-trust i { color:var(--hx); font-size:16px; }

/* === PREMIUM PRICE TAG === */
.hnxt-price { font-size:22px; font-weight:700; color:var(--hx); }
.hnxt-price-old { font-size:14px; color:var(--hx-text3); text-decoration:line-through; margin-right:6px; }
.hnxt-price-unit { font-size:12px; color:var(--hx-text3); font-weight:400; }

/* === MOBILE HEADER FIX — visible header, working slide-out menu === */
@media (max-width: 991px) {
  .header {
    position: sticky !important;
    top: 0 !important;
    /* Keep above page content but BELOW the slide-out menu/overlay.
       A very high z-index here traps the fixed menu panel inside the
       header box and hides it, so keep it modest. */
    z-index: 90 !important;
    transform: none !important;
  }
  /* Keep header solid only once user scrolls; avoids white strip on load */
  .header.is-sticky,
  .header.is-sticky .bg-dark-1,
  .header.is-sticky .bg-white {
    background: var(--hx-navy) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  }
  .header.is-sticky .text-white,
  .header.is-sticky .text-dark-1 { color: #ffffff !important; }
  /* Header margin must stay so hero/content is not overlapped */
  .header-margin { display: block !important; height: 0 !important; }
  /* Remove any empty leftover bars that render as white space */
  .header [data-x="header-mobile-icons"]:empty { display: none !important; }
  /* Ensure the slide-out menu and its overlay sit ABOVE the header */
  .header .header-menu.is-menu-active { z-index: 9999 !important; }
  .header .header-menu.is-menu-active .mobile-overlay { z-index: -1 !important; display: block !important; }
}

/* ============================================================
   CORPORATE DESIGN PASS — header logo, search box, testimonial,
   and professional mobile menu
   ============================================================ */

/* ---- 1. HEADER LOGO: show at clear, natural size (no tiny crop) ---- */
.header .header-logo { display: inline-flex; align-items: center; }
.header .header-logo img,
.header .header-logo img.logo-light,
.header .header-logo img.logo-dark,
.header.is-sticky .header-logo img {
  height: 46px !important;
  width: auto !important;
  max-width: 230px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 991px) {
  .header .header-logo img,
  .header .header-logo img.logo-light,
  .header .header-logo img.logo-dark { height: 40px !important; max-width: 180px; }
}

/* ---- 2. SEARCH BOX: check-in/out on ONE line, location fills width ---- */
/* Stop the date range from wrapping to two lines */
.mainSearch .check-in-out-render,
.mainSearch .date-wrapper .check-in-out-render {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.mainSearch .check-in-out-render .render { white-space: nowrap; }
/* Location input fills the whole field width */
.mainSearch .searchMenu-loc input.smart-search-location,
.mainSearch .searchMenu-loc input[type="text"],
.mainSearch .g-map-place input[type="text"] {
  width: 100% !important;
  min-width: 100%;
  display: block;
}
.mainSearch .searchMenu-loc { width: 100%; }
/* Even spacing/dividers between the search columns on desktop */
@media (min-width: 992px) {
  .mainSearch .field-items .row > [class*="col-"] {
    border-right: 1px solid var(--hx-border);
  }
  .mainSearch .field-items .row > [class*="col-"]:last-child { border-right: 0; }
}

/* ---- 3. TESTIMONIAL "What our customers are saying" — light text on dark ---- */
/* This section uses bg-blue-2; on this site it renders dark, so force light text */
section.bg-blue-2 h2,
section.bg-blue-2 .text-30,
section.bg-blue-2 .fw-600 { color: #ffffff !important; }
section.bg-blue-2 p,
section.bg-blue-2 .text-light-1 { color: rgba(255,255,255,0.75) !important; }
section.bg-blue-2 .js-current,
section.bg-blue-2 .js-all,
section.bg-blue-2 .text-dark-1 { color: #ffffff !important; }
/* keep the white testimonial card text readable (it sits on a white card) */
section.bg-blue-2 .swiper-slide .text-dark-1,
section.bg-blue-2 .swiper-slide p { color: var(--hx-text) !important; }
section.bg-blue-2 .swiper-slide .text-light-1 { color: var(--hx-text2) !important; }

/* ---- 4. PROFESSIONAL MOBILE MENU with close button ---- */
@media (max-width: 991px) {
  .header .header-menu.is-menu-active {
    background: var(--hx-navy) !important;
    padding-top: 64px;
  }
  .header .header-menu.is-menu-active .menu__nav > li > a,
  .header .header-menu.is-menu-active .mobile-menu__nav a { color: #fff !important; }
  /* Close (X) button injected via JS, styled here */
  .hnxt-menu-close {
    position: fixed; top: 14px; right: 16px; z-index: 10000;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .2s;
  }
  .hnxt-menu-close:hover { background: rgba(255,255,255,0.25); }
}

/* ---- 5. FOOTER LOGO: size correctly; hide broken-image glyph ---- */
.footer_one .footer-logo img,
footer .footer-cl img.footer-img,
.footer_one img[alt="image"] {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}
/* If the footer logo fails to load, don't show the ugly broken icon */
.footer_one img[alt="image"] { color: transparent; }
.footer_one img[alt="image"]::after {
  content: "BookHolidayTrip";
  color: #fff; font-weight: 700; font-size: 18px;
}