a,
.bc-news .btn-readmore,
.bc_wrap .bc_header .content .header-left .bc-menu ul li:hover > a,
.bc_wrap .bc_search_tour .bc_form_search .bc_form .field-icon,
.bc_wrap .bc_search_tour .bc_form_search .bc_form .render,
.bc_wrap .bc_search_tour .bc_form_search .bc_form .field-detination #dropdown-destination .form-control,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .btn-apply-price-range,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .btn-more-item,
.input-number-group i,
.bc_wrap .page-template-content .bc-form-search-tour .bc_form_search_tour .field-icon,
.bc_wrap .page-template-content .bc-form-search-tour .bc_form_search_tour .field-detination #dropdown-destination
.form-control,
.bc_wrap .page-template-content .bc-form-search-tour .bc_form_search_tour .render,
.hotel_rooms_form .form-search-rooms .form-search-row>div .form-group .render,
.bc_wrap .bc_form .form-content .render,
a:hover {
color: #5191FA;
}
.bc-pagination ul li.active a, .bc-pagination ul li.active span
{
color:#5191FA!important;
}
.bc-news .widget_category ul li span,
.bc_wrap .bc_search_tour .bc_form_search .bc_form .g-button-submit button,
.bc_wrap .bc_search_tour .bc_filter .filter-title:before,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-bar,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from, .bc_wrap
.bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to, .bc_wrap .bc_search_tour
.bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat
.irs-handle>i:first-child,
.bc-news .header .cate ul li,
.bc_wrap .page-template-content .bc-form-search-tour .bc_form_search_tour .g-button-submit button,
.bc_wrap .page-template-content .bc-list-locations .list-item .destination-item .image .content .desc,
.bc_wrap .bc_detail_space .bc_content .g-attributes h3:after,
.bc_wrap .bc_form .g-button-submit button,
.btn.btn-primary,
.bc_wrap .bc_form .g-button-submit button:active,
.btn.btn-primary:active,
.bc_wrap .bc_detail_space .bc-list-hotel-related-widget .heading:after,
.btn-primary:not(:disabled):not(.disabled):active
{
background: #5191FA;
}

.bc-pagination ul li.active a, .bc-pagination ul li.active span
{
border-color:#5191FA!important;
}
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from:before,
.bc_wrap .bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to:before, .bc_wrap
.bc_search_tour .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single:before,
.bc-reviews .review-form .form-wrapper,
.bc_wrap .bc_detail_tour .bc_content .bc_tour_book
{
border-top-color:#5191FA;
}

.bc_wrap .bc_footer .main-footer .nav-footer .context .contact{
border-left-color:#5191FA;
}
.hotel_rooms_form .form-search-rooms{
border-bottom-color:#5191FA;
}

.bc_wrap .bc_form .field-icon,
.bc_wrap .bc_form .smart-search .parent_text,
.bc_wrap .bc_form .smart-search:after,
.bc_wrap .bc_form .dropdown-toggle:after,
.bc_wrap .page-template-content .bc-list-space .item-loop .service-review .rate,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .btn-more-item,
.bc_wrap .bc_detail_space .bc_content .g-header .review-score .head .left .text-rating,
.bc-reviews .review-box .review-box-score .review-score,
.bc-reviews .review-box .review-box-score .review-score-base span,
.bc_wrap .bc_detail_tour .bc_content .g-header .review-score .head .left .text-rating
{
color: #5191FA;
}

.bc_wrap .bc_form .smart-search .parent_text::-webkit-input-placeholder{

color: #5191FA;
}
.bc_wrap .bc_form .smart-search .parent_text::-moz-placeholder{

color: #5191FA;
}
.bc_wrap .bc_form .smart-search .parent_text::-ms-input-placeholder{

color: #5191FA;
}
.bc_wrap .bc_form .smart-search .parent_text::-moz-placeholder{

color: #5191FA;
}
.bc_wrap .bc_form .smart-search .parent_text::placeholder{

color: #5191FA;
}


.bc_wrap .bc_search_space .bc-list-item .list-item .item-loop .service-review .rate,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .btn-apply-price-range{

color: #5191FA;
}
.bc_wrap .page-template-content .bc-list-locations.style_2 .list-item .destination-item:hover .title,
.bc_wrap .page-template-content .bc-list-space .item-loop .sale_info,
.bc_wrap .bc_search_space .bc-list-item .list-item .item-loop .sale_info,
.bc_wrap .bc_search_space .bc_filter .filter-title:before,
.bc_wrap .bc_detail_space .bc_content .g-header .review-score .head .score,
.bc-reviews .review-form .btn,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-bar,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat
.irs-handle>i:first-child
{
background: #5191FA;
}
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from:before,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to:before,
.bc_wrap .bc_search_space .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single:before {
border-top-color: #5191FA;
}

.bc_wrap .bc_detail_space .bc_content .g-overview ul li:before {
border: 1px solid #5191FA;
}

.bc_wrap .bc_detail_space .bc-list-space-related .item-loop .sale_info {
background-color: #5191FA;
}

.bc_wrap .bc_detail_space .bc_content .g-header .review-score .head .score::after {
border-bottom: 25px solid #5191FA;
}

.bc_wrap .bc_detail_space .bc_content .bc_space_book {
border-top: 5px solid #5191FA;
}

body .daterangepicker.loading:after {
color: #5191FA;
}

body .daterangepicker .drp-calendar .calendar-table tbody tr td.end-date {
border-right: solid 2px #5191FA;
}
body .daterangepicker .drp-calendar .calendar-table tbody tr td.start-date {
border-left: solid 2px #5191FA;
}
.bc_wrap .bc_detail_space .bc-list-space-related .item-loop .service-review .rate {
color: #5191FA;
}

.has-search-map .bc-filter-price .irs--flat .irs-bar,
.has-search-map .bc-filter-price .irs--flat .irs-handle>i:first-child,
.has-search-map .bc-filter-price .irs--flat .irs-from, .has-search-map .bc-filter-price .irs--flat .irs-to,
.has-search-map .bc-filter-price .irs--flat .irs-single {
background-color: #5191FA;
}

.has-search-map .bc-filter-price .irs--flat .irs-from:before, .has-search-map .bc-filter-price .irs--flat
.irs-to:before, .has-search-map .bc-filter-price .irs--flat .irs-single:before {
border-top-color: #5191FA;
}

.bc_wrap .bc_detail_tour .bc_content .g-header .review-score .head .score {
background: #5191FA;
}
.bc_wrap .bc_detail_tour .bc_content .g-header .review-score .head .score::after {
border-bottom: 25px solid #5191FA;
}

.bc_wrap .bc_detail_tour .bc_content .g-overview ul li:before {
border: 1px solid #5191FA;
}

.bc_wrap .bc_detail_location .bc_content .g-location-module .location-module-nav li a.active {
border-bottom: 1px solid #5191FA;
color: #5191FA;
}

.bc_wrap .bc_detail_location .bc_content .g-location-module .item-loop .sale_info {
background-color: #5191FA;
}
.bc_wrap .page-template-content .bc-featured-item.style2 .number-circle {
border: 2px solid #5191FA;
color: #5191FA;
}
.bc_wrap .page-template-content .bc-featured-item.style3 .featured-item:hover {
border-color: #5191FA;
}

.booking-success-notice .booking-info-detail {
border-left: 3px solid #5191FA;
}
.bc_wrap .bc_detail_tour .bc_single_book,
.bc_wrap .bc_detail_space .bc_single_book {
border-top: 5px solid#5191FA;
}
.bc_wrap .page-template-content .bc-form-search-all .g-form-control .nav-tabs li a.active {
background-color: #5191FA;
border-color: #5191FA;
}

.bc_wrap .bc_detail_location .bc_content .g-location-module .item-loop .service-review .rate,
.bc_wrap .bc_detail_location .bc_content .g-trip-ideas .trip-idea .trip-idea-category,
.bc_wrap .bc_footer .main-footer .nav-footer .context ul li a:hover,
.bc_wrap .bc_detail_tour .bc_content .g-attributes .list-attributes .item i.icon-default,
.bc_wrap .bc_detail_space .bc_content .g-attributes .list-attributes .item i.icon-default,
.bc_wrap .page-template-content .bc-list-hotel .item-loop .service-review .rate,
.bc_wrap .page-template-content .bc-list-tour.box_shadow .list-item .item .caption .title-address .title a:hover,
.bc_wrap .bc_search_hotel .bc-list-item .list-item .item-loop .service-review .rate,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .btn-apply-price-range {
color: #5191FA;
}

.bc_wrap .bc_detail_tour .bc-list-tour-related .item-tour .featured ,
.bc_wrap .bc_search_tour .bc-list-item .list-item .item-tour .featured,
.bc_wrap .page-template-content .bc-list-tour .item-tour .featured,
.bc_wrap .bc_search_hotel .bc_filter .filter-title:before {
background: #5191FA;
}
.bc_wrap .page-template-content .bc-list-tour.box_shadow .list-item .item .header-thumb .tour-book-now,
.bc_wrap .bc_search_hotel .bc-list-item .list-item .item-loop .sale_info,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-bar,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat
.irs-handle>i:first-child {
background-color: #5191FA;
}
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from:before,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to:before,
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single:before {
border-top-color: #5191FA;
}

.bc_wrap .bc_search_hotel .bc-list-item .list-item .item-loop-list .service-review-pc .head .score,
.bc_wrap .bc_search_hotel .bc_content .g-header .review-score .head .score {
background: #5191FA;
}

.bc_wrap .bc_search_hotel .bc_content .g-overview ul li:before {
border: 1px solid #5191FA;
}
.bc_wrap .bc_search_hotel .bc_filter .g-filter-item .item-content .btn-more-item,
.bc_wrap .bc_search_hotel .bc_content .g-header .review-score .head .left .text-rating,
.bc_wrap .bc_search_hotel .bc-list-item .list-item .item-loop-list .service-review-pc .head .left .text-rating,
.bc_wrap .bc_detail_hotel .btn-show-all,
.bc_wrap .bc_detail_hotel .bc-list-hotel-related .item-loop .service-review .rate,
.bc_wrap .bc_form .select-guests-dropdown .dropdown-item-row .count-display{
color: #5191FA;
}

.bc_wrap .bc_search_hotel .bc-list-item .list-item .item-loop-list .service-review-pc .head .score::after {
border-bottom: 15px solid #5191FA;
}
.bc_wrap .bc_detail_hotel .bc_content .g-header .review-score .head .score:after {
border-bottom: 25px solid #5191FA;
}
.bc_wrap .bc_detail_hotel .bc_content .g-header .review-score .head .score {
background: #5191FA;
}

.bc_wrap .bc_detail_hotel .bc-list-hotel-related-widget .heading:after {
background: #5191FA;
}
.bc_wrap .bc_detail_hotel .bc_content .g-attributes h3:after {
background: #5191FA;
}
.bc_wrap .bc_detail_hotel .bc_content .g-header .review-score .head .left .text-rating {
color: #5191FA;
}
.bc_wrap .select-guests-dropdown .dropdown-item-row .count-display {
color: #5191FA;
}

.bc_wrap .bc-checkbox input[type=checkbox]:checked+.checkmark:after {
border: solid #5191FA;
border-width: 0 2px 2px 0;
}
.bc_wrap .bc_form .input-search .form-control::-webkit-input-placeholder {
color: #5191FA;
}
.bc_wrap .bc_form .input-search .form-control:-ms-input-placeholder {
color: #5191FA;
}
.brav_wrap .bc_form .input-search .form-control::placeholder {
color: #5191FA;
}

.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .btn-apply-price-range{
color: #5191FA;
}
.bc_wrap .bc_search_event .bc_filter .filter-title:before,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-bar,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat
.irs-handle>i:first-child
{
background: #5191FA;
}

.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-from:before,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-to:before,
.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .bc-filter-price .irs--flat .irs-single:before {
border-top-color: #5191FA;
}

.bc_wrap .bc_search_event .bc_filter .g-filter-item .item-content .btn-more-item {
color: #5191FA;
}

.bc_wrap .bc_detail_event .bc_content .g-header .review-score .head .score:after {
border-bottom: 25px solid #5191FA;
}
.bc_wrap .bc_detail_event .bc_content .g-header .review-score .head .score {
background: #5191FA;
}
.bc_wrap .bc_detail_event .bc_content .g-header .review-score .head .left .text-rating {
color: #5191FA;
}
.bc_wrap .bc_single_book .nav-enquiry .enquiry-item.active span {
border-bottom: solid 1px #5191FA !important;
color: #5191FA !important;
}
.bc_wrap .bc_detail_event .bc_content .g-overview ul li:before {
border: 1px solid #5191FA;
}
.bc_wrap .bc_detail_event .bc_content .g-attributes .list-attributes .item i.icon-default {
color: #5191FA;
}
.bc_wrap .bc_detail_event .bc_single_book {
border-top: 5px solid #5191FA;
}

.bc_wrap .bc_detail_hotel .bc_single_book {
border-top: 5px solid #5191FA;
}
.bc_wrap .bc_detail_car .bc_single_book {
border-top: 5px solid #5191FA;
}
.bc_wrap .bc_detail_car .bc_content .g-header .review-score .head .score:after {
border-bottom: 25px solid #5191FA;
}
.bc_wrap .bc_detail_car .bc_content .g-header .review-score .head .score {
background: #5191FA;
}
.bc_wrap .bc_detail_car .bc_content .g-header .review-score .head .left .text-rating {
color: #5191FA;
}

body{
                                                                }

/* ===== Mobile Responsive Fixes ===== */
@media (max-width: 768px) {
  h1, .banner-title {
    font-size: 26px !important;
    text-align: center;
  }

  p, .banner-desc {
    font-size: 15px !important;
  }

  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 767px) {
  .destination-item .image {
    width: 100% !important;
    height: 160px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .destination-item {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .search-box, .booking-search, form.search-form {
    display: flex !important;
    flex-direction: column !important;
  }

  .search-box > div,
  .booking-search > div,
  form.search-form > div {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .search-box button,
  .booking-search button,
  form.search-form button {
    width: 100% !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .col-md-8, .col-md-6, .col-md-4, .col-md-3 {
    width: 100% !important;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  h1, .banner-title {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .hotel-item,
  [class*="col-md-6"] {
    width: 50% !important;
    float: left !important;
  }
}

@media (max-width: 767px) {
  .item-loop.item-loop-wrap,
  .destination-item {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }

  .item-loop.item-loop-wrap .thumb-image,
  .item-loop.item-loop-wrap img,
  .destination-item .image {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .item-loop.item-loop-wrap {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
}

/* Logo/Navbar font fix */
.navbar-brand, .site-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
}
.navbar-brand img, .site-logo img {
    max-height: 65px;
    width: auto;
}
.bc-logo img {
    max-height: 65px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bc-header .content {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.bc-logo {
    padding: 5px 0 !important;
    display: flex !important;
    align-items: center !important;
}
.header-left {
    padding: 0 !important;
}

/* ===== Modern Search Tabs Redesign v2 ===== */
.nav-tabs, ul.nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
}

.nav-tabs > li, ul.nav > li {
    flex: 1 1 21% !important;
    min-width: 130px !important;
    list-style: none !important;
}

.nav-tabs > li > a,
ul.nav > li > a {
    background: #ffffff !important;
    border: 1.5px solid #eef1f6 !important;
    border-radius: 16px !important;
    padding: 18px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #334155 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.05) !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 90px !important;
    text-align: center !important;
}

.nav-tabs > li > a i,
.nav-tabs > li > a svg,
ul.nav > li > a i,
ul.nav > li > a svg {
    font-size: 22px !important;
    opacity: 0.85;
}

.nav-tabs > li > a:hover,
ul.nav > li > a:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 24px rgba(217,119,6,0.18) !important;
    border-color: #f59e0b !important;
    background: #fffbeb !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
ul.nav > li.active > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:active,
ul.nav > li > a:focus,
ul.nav > li > a:active {
    background: linear-gradient(145deg, #1e3a8a, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(37,99,235,0.35) !important;
    outline: none !important;
}

/* The generic tab :hover rule above (line ~174) has higher selector
   specificity (ul.nav > li > a:hover) than the .active rule above it
   (.nav-tabs > li > a.active), so hovering an already-active tab let
   the hover background (#fffbeb, near-white) win while the active
   text color (#fff) stayed ? white text on a near-white background.
   Pin both explicitly for the active+hover combination so it stays
   readable. */
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a.active:hover,
ul.nav > li.active > a:hover,
ul.nav > li > a.active:hover {
    background: linear-gradient(145deg, #1e3a8a, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(37,99,235,0.35) !important;
    transform: none !important;
}

.form-search-service, .search-box-widget {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15,23,42,0.08) !important;
    animation: fadeSlideUp 0.6s ease-out;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Destination cards, newsletter, search box (mobile) ===== */
@media (max-width: 767px) {

  .destination-item {
    height: 120px !important;
  }
  .destination-item .content h4 {
    font-size: 11px !important;
  }

  .bc-offer {
    display: none !important;
  }

  .bc-form-search-slider,
  .bc-form-search-slider .container,
  .bc-form-search-slider .owl-item, .bc-form-search-slider .owl-stage, .bc-form-search-slider .owl-stage-outer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .bc-form-search-slider,
  .bc-form-search-slider .effect,
  .bc-form-search-slider .owl-item,
  .bc-form-search-slider .item-bg {
    height: 320px !important;
    min-height: 320px !important;
  }
}

/* ===== Bestseller Listing - push below search box, no overlap ===== */
@media (max-width: 767px) {
  .bc-list-hotel,
  .bc-list-hotel.layout_normal {
    margin-top: 80px !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .page-template-content {
    overflow: visible !important;
  }
}

@media (max-width: 767px) {
  body .bc_wrap .page-template-content .container .bc-list-hotel {
  margin-top: 20px !important;
}
}

@media (max-width: 767px) {
  /* 1. "Bestseller Listing" title & subtitle - smaller */
  .bc-list-hotel .title {
    font-size: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
  }
  .bc-list-hotel .sub-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* 2. Hotel images - smaller height */
  .bc-list-hotel .header-thumb,
  .bc-list-hotel .header-thumb img {
    height: 120px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* 3. Reduce the margin-top since content is now smaller */
  .bc-list-hotel {
    margin-top: 250px !important;
  }
}
@media (max-width: 767px) {
  /* Remove gap between logo/header and banner */
  .bc_header {
    margin-bottom: 0 !important;
  }
  .bc_header .content {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .page-template-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .bc-form-search-slider {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .bc-form-search-slider .item-bg,
  .bc-form-search-slider .owl-item .item-bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;
    min-height: 320px !important;
  }
}

/* Remove banner background image completely - clean search bar only */
.bc-form-search-slider .effect,
.bc-form-search-slider .owl-item,
.bc-form-search-slider .item-bg {
  background-image: none !important;
  background: #ffffff !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 40px 20px !important;
}

.bc-form-search-slider .text-heading,
.bc-form-search-slider .sub-heading {
  color: #1a1a2e !important;
}

.bc-form-search-slider .g-form-control {
  background: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  border: 1px solid #e0e0e0 !important;
}

/* Owl carousel navigation dots/arrows - hide since no more slider images */
.bc-form-search-slider .owl-nav,
.bc-form-search-slider .owl-dots {
  display: none !important;
}

/* Hotel listing cards - small and compact */
@media (max-width: 767px) {
  .bc-list-hotel .list-item .header-thumb,
  .bc-list-hotel .list-item .header-thumb img {
    height: 90px !important;
  }
  .bc-list-hotel .list-item .title a {
    font-size: 13px !important;
  }
  .bc-list-hotel .list-item .caption {
    padding: 8px !important;
  }
}

/* Airbnb-style clean search card */
.bc-form-search-slider .g-form-control {
  background: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  border: 1px solid #ebebeb !important;
  padding: 18px 30px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Service icons (Hotel/Space/Tour) - smaller, minimal */
.bc-form-search-slider .service-icon,
.bc-form-search-slider .g-form-control .item {
  padding: 10px !important;
}

/* Location/Date fields - Airbnb-style dividers */
.bc-form-search-slider .field-detination,
.bc-form-search-slider .field-icon {
  border-right: none !important;
  padding-right: 0 !important;
}

/* Mobile: fields stack vertically, so the Airbnb-style side dividers above must not carry over - they would visually chain into one long line down the stacked fields */
@media (max-width: 1023px) {
  .bc-form-search-slider .field-detination,
  .bc-form-search-slider .field-icon {
    border-right: none !important;
    padding-right: 0 !important;
  }
}

/* Search button - circular, red like Airbnb */
.bc-form-search-slider .btn-search,
.bc-form-search-slider button[type="submit"] {
  background: #ff385c !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border: none !important;
}

/* Overall banner section - clean white/light background */
.bc-form-search-slider {
  background: #ffffff !important;
  padding: 60px 20px !important;
}

.bc-form-search-slider .text-heading {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  text-align: center !important;
}

.bc-form-search-slider .sub-heading {
  text-align: center !important;
  color: #717171 !important;
  margin-bottom: 25px !important;
}


/* Force remove any remaining banner image strip on all screens */
.bc-form-search-slider,
.bc-form-search-slider .owl-carousel,
.bc-form-search-slider .owl-stage-outer,
.bc-form-search-slider .owl-stage,
.bc-form-search-slider .owl-item,
.bc-form-search-slider .item-bg,
.bc-form-search-slider .effect {
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.bc-form-search-slider .owl-item > div {
  background: #ffffff !important;
  background-image: none !important;
  padding: 40px 20px !important;
}

/* Airbnb-style clean search card */
.bc-form-search-slider .g-form-control {
  background: #ffffff !important;
  border-radius: 50px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  border: 1px solid #ebebeb !important;
  padding: 18px 30px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.bc-form-search-slider .text-heading {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  text-align: center !important;
}

.bc-form-search-slider .sub-heading {
  text-align: center !important;
  color: #717171 !important;
  margin-bottom: 25px !important;
}

/* Remove all background images from banner area */
.bc-form-search-slider,
.bc-form-search-slider *,
.page-template-content > div:first-child,
.page-template-content > div:first-child * {
  background-image: none !important;
}

.bc-form-search-slider,
.page-template-content > div:first-child {
  background-color: #ffffff !important;
}

/* Hide "Hi There!" heading and subtitle completely */
.bc-form-search-slider .text-heading,
.bc-form-search-slider .sub-heading {
  display: none !important;
}

/* Reduce top padding since heading is gone - search box comes up immediately */
.bc-form-search-slider {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* Force remove leftover banner image (left/right edges) */
.bc-form-search-slider .owl-stage,
.bc-form-search-slider .owl-item,
.bc-form-search-slider .owl-stage-outer,
.bc_search_all,
.bc_search_all * {
  background-image: none !important;
  background: transparent !important;
}

/* Completely remove Special Offers / Newsletter / Travel Tips section */
.bc-offer {
  display: none !important;
}
/* Remove remaining image patches on edges (aggressive) */
.bc_search_all,
.bc-form-search-slider,
.page-template-content {
  background: #ffffff !important;
}
.page-template-content > div:first-child {
  overflow: visible !important;
}
.page-template-content > div:first-child::before,
.page-template-content > div:first-child::after {
  display: none !important;
  content: none !important;
}

/* Bigger, clearer SEARCH button */
.bc-form-search-slider .btn-search,
.bc-form-search-slider button[type="submit"] {
  padding: 14px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 30px !important;
  width: auto !important;
  height: auto !important;
}

/* Remove the empty white gap below search box */
.bc-form-search-slider {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}
.bc-list-hotel,
.bc-list-hotel.layout_normal {
  margin-top: 15px !important;
}

/* Hide any leftover image fragments outside the main search card */

/* SEARCH button hover effect - smooth animation + color change */
.bc-form-search-slider .btn-search,
.bc-form-search-slider button[type="submit"] {
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.bc-form-search-slider .btn-search:hover,
.bc-form-search-slider button[type="submit"]:hover {
  background-color: #c9184a !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(233, 30, 70, 0.4) !important;
}

/* Remove the large empty gap between search box and Bestseller Listing */
.bc-form-search-slider {
  margin-bottom: 0 !important;
  padding-bottom: 20px !important;
}

.page-template-content {
  margin: 0 !important;
  padding: 0 !important;
}

.bc-list-hotel,
.bc-list-hotel.layout_normal {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Remove any invisible/empty divs causing the gap */
.page-template-content > div:empty {
  display: none !important;
}

/* Fix 1: Dropdowns/calendars must appear ABOVE everything else */
.bc-form-search-slider,
.bc-form-search-slider .g-form-control {
  position: relative !important;
  z-index: 100 !important;
}

.bc-form-search-slider .dropdown-menu,
.bc-form-search-slider .daterangepicker,
.bc-form-search-slider .location-suggestions,
.bc-form-search-slider .guests-dropdown,
.bc-form-search-slider [class*="dropdown"]:not(.dropdown-toggle):not(.dropdown-item-row):not(.dropdown-item),
.bc-form-search-slider [class*="popup"]:not(.dropdown-toggle):not(.dropdown-item-row):not(.dropdown-item),
.bc-form-search-slider [class*="picker"]:not(.dropdown-toggle):not(.dropdown-item-row):not(.dropdown-item) {
  z-index: 9999 !important;
  position: absolute !important;
}

.bc-list-hotel {
  position: relative !important;
  z-index: 1 !important;
}

/* Fix 2: Hotel photos - small grid, 5-6 per row like Airbnb */
.bc-list-hotel .list-item {
  margin-bottom: 15px !important;
}

@media (min-width: 768px) {
  .bc-list-hotel .row > div[class*="col-"] {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    padding: 6px !important;
  }
}

.bc-list-hotel .header-thumb,
.bc-list-hotel .header-thumb img {
  height: 140px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.bc-list-hotel .caption {
  padding: 8px 4px !important;
}

.bc-list-hotel .title a {
  font-size: 13px !important;
}

.bc-list-hotel .price {
  font-size: 13px !important;
}

/* ===== GUESTS DROPDOWN FIX (form-select-guests) ===== */
/* Targets the exact classes from themes/BC/Hotel/.../fields/guests.blade.php */

.form-select-guests {
  position: relative !important;
}

.form-select-guests .form-content {
  cursor: pointer;
}

/* Keep the "1 Adult - 0 Child" summary on one line, never overlapping */
.form-select-guests .render {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* The dropdown panel itself - force correct positioning */
.form-select-guests .select-guests-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  z-index: 9999 !important;
  margin-top: 10px !important;
  min-width: 280px !important;
  max-width: 320px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  padding: 18px !important;
  display: none;
}

/* Bootstrap adds "show" class when the dropdown is toggled open */
.form-select-guests .select-guests-dropdown.show {
  display: block !important;
}

/* Each row (Rooms / Adults / Children) - force proper flex layout so
   labels and counters never stack on top of each other */
.form-select-guests .dropdown-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  width: 100% !important;
}

.form-select-guests .dropdown-item-row:last-child {
  border-bottom: none !important;
}

.form-select-guests .dropdown-item-row .label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;
  margin: 0 !important;
}

.form-select-guests .dropdown-item-row .val {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Counter +/- buttons */
.form-select-guests .btn-minus,
.form-select-guests .btn-add {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.form-select-guests .btn-minus:hover,
.form-select-guests .btn-add:hover {
  background: #f5f5f5 !important;
  border-color: #999 !important;
}

/* The number input - fixed width, centered, no spinner arrows */
.form-select-guests .count-display input {
  width: 36px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  -moz-appearance: textfield;
}

.form-select-guests .count-display input::-webkit-outer-spin-button,
.form-select-guests .count-display input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ===== LOCATION DROPDOWN FIX (smart-search plugin) ===== */

/* Give the input a positioning context so its JS-generated dropdown
   anchors correctly under it instead of floating elsewhere on the page */
.smart-search {
  position: relative !important;
}

/* The "smart-search" plugin injects its suggestion list as a child element
   right after the input. This catches it whatever exact class it uses
   (list / dropdown / suggest are the common naming patterns for these
   plugins) and forces correct position + appearance. */
.smart-search > [class*="list"],
.smart-search > [class*="dropdown"],
.smart-search > [class*="suggest"],
.smart-search ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  z-index: 9999 !important;
  margin-top: 8px !important;
  min-width: 280px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  padding: 10px !important;
  list-style: none !important;
}

.smart-search > [class*="list"] li,
.smart-search > [class*="dropdown"] li,
.smart-search > [class*="suggest"] li,
.smart-search ul li {
  padding: 10px 8px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

.smart-search > [class*="list"] li:hover,
.smart-search > [class*="dropdown"] li:hover,
.smart-search > [class*="suggest"] li:hover,
.smart-search ul li:hover {
  background: #f5f5f5 !important;
}

/* ===== FIX: leftover carousel background sliver + cursor consistency + descender clipping ===== */
/* The .item-bg background-image is set inline with !important in the blade template, so no
   background override can hide it. Hiding the whole .effect wrapper (no inline style) removes
   the leftover image slivers peeking out on the left/right of the search card. */
.bc-form-search-slider .effect {
  display: none !important;
}

/* Check In - Out is a text input by default (cursor: text); match Location/Guests which show
   a pointer cursor since all three fields open a picker on click, not free text entry. */
.bc-form-search-slider .check-in-out {
  cursor: pointer !important;
}

/* The base theme's 25px height / 0 padding leaves no room for descenders (g, y, p, q) at
   16px font-size, clipping them at the bottom edge. Give a little breathing room. */
.bc-form-search-slider .smart-search .parent_text,
.bc-form-search-slider .smart-search .form-control,
.bc-form-search-slider .input-search .parent_text,
.bc-form-search-slider .input-search .form-control {
  height: 28px !important;
  line-height: 26px !important;
}


/* ===== FIX: mobile hamburger menu hidden behind search widget ===== */
/* The Airbnb-style search card above sets .g-form-control to z-index:100, which now
   outranks the mobile nav drawer (base theme z-index:20) and its dim backdrop
   (base theme z-index:19). Whenever the drawer overlapped the search card's vertical
   position, the search card painted on top of the drawer instead of being dimmed
   underneath it. Bump the drawer + backdrop above any page content. */
.bc_wrap .bc_header .bc-menu-mobile {
  z-index: 1000 !important;
}
.bc-effect-bg,
.bc-effect-user-bg {
  z-index: 999 !important;
}


/* ===== FIX: SEARCH button not vertically centered in the field row ===== */
/* .g-button-submit stretches to the full row height, but its button was top-aligned
   instead of centered against the Location/Check In/Guests fields beside it. */
.bc-form-search-slider .g-button-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.bc-form-search-slider .g-button-submit .btn-search {
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}


/* ===== Airbnb-style redesign: Bestseller Listing + Top Destinations (mobile) ===== */
@media (max-width: 767px) {

  /* --- Hotel cards (Bestseller Listing) --- */
  .bc-list-hotel .item-loop {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    padding-bottom: 0 !important;
  }

  /* Uniform square photo, cleanly cropped instead of a tall variable-height crop */
  .bc-list-hotel .item-loop .thumb-image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .bc-list-hotel .item-loop .thumb-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Remove the old dark gradient + star-row painted over the photo - the
     numeric rating already appears as text below the title, Airbnb-style */
  .bc-list-hotel .item-loop .thumb-image a:before,
  .bc-list-hotel .item-loop .thumb-image .star-rate {
    display: none !important;
  }

  /* Heart / wishlist button - small white circle floating on the photo */
  .bc-list-hotel .item-loop .thumb-image .service-wishlist {
    top: 10px !important;
    right: 10px !important;
    background: rgba(255,255,255,0.9) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .bc-list-hotel .item-loop .thumb-image .service-wishlist i {
    font-size: 14px !important;
    color: #222 !important;
  }
  .bc-list-hotel .item-loop .thumb-image .service-wishlist.active i {
    color: #ff385c !important;
  }

  /* Typography: bold title, light-gray location, small rating line, bold price */
  .bc-list-hotel .item-loop .item-title {
    padding: 10px 12px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222 !important;
    min-height: 0 !important;
  }
  .bc-list-hotel .item-loop .location {
    padding: 2px 12px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #717171 !important;
  }
  .bc-list-hotel .item-loop .service-review {
    padding: 4px 12px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
  .bc-list-hotel .item-loop .info {
    padding: 4px 12px 12px !important;
  }
  .bc-list-hotel .item-loop .info .g-price .text-price {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* --- Top Destinations cards --- */
  /* Long City, Country labels must wrap instead of being clipped by nowrap */
  .bc-list-locations.style_4 .destination-item .content .title {
    font-size: 16px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 5px 12px !important;
  }
  .bc-list-locations.style_4 .destination-item .content .desc a,
  .bc-list-locations.style_4 .destination-item .content .desc span {
    font-size: 12px !important;
  }
}

/* ===== Airbnb-style hotel cards (Bestseller Listing) - all screen sizes ===== */
/* Same treatment as the mobile redesign above, now applied on desktop too. */
.bc-list-hotel .item-loop {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  padding-bottom: 0 !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.bc-list-hotel .item-loop:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
  transform: translateY(-2px) !important;
}

/* Uniform square photo, cleanly cropped instead of a tall variable-height crop */
.bc-list-hotel .item-loop .thumb-image {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px 16px 0 0 !important;
}
.bc-list-hotel .item-loop .thumb-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Remove the old dark gradient + star-row painted over the photo - the
   numeric rating already appears as text below the title, Airbnb-style */
.bc-list-hotel .item-loop .thumb-image a:before,
.bc-list-hotel .item-loop .thumb-image .star-rate {
  display: none !important;
}

/* Heart / wishlist button - small white circle floating on the photo */
.bc-list-hotel .item-loop .thumb-image .service-wishlist {
  top: 10px !important;
  right: 10px !important;
  background: rgba(255,255,255,0.9) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
.bc-list-hotel .item-loop .thumb-image .service-wishlist i {
  font-size: 14px !important;
  color: #222 !important;
}
.bc-list-hotel .item-loop .thumb-image .service-wishlist.active i {
  color: #ff385c !important;
}

/* Typography: bold title, light-gray location, small rating line, bold price */
.bc-list-hotel .item-loop .item-title {
  padding: 12px 14px 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #222 !important;
  min-height: 0 !important;
}
.bc-list-hotel .item-loop .location {
  padding: 2px 14px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: #717171 !important;
}
.bc-list-hotel .item-loop .service-review {
  padding: 4px 14px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
}
.bc-list-hotel .item-loop .info {
  padding: 4px 14px 14px !important;
}
.bc-list-hotel .item-loop .info .g-price .text-price {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ===== Compact, Airbnb-style header + search hero (all screen sizes) ===== */
.bc_wrap .bc_topbar {
  padding: 8px 0 !important;
}
.bc_wrap .bc_header .content .header-left {
  min-height: 62px !important;
}
.bc-logo img,
.navbar-brand img,
.site-logo img {
  max-height: 44px !important;
}
.bc-form-search-slider {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Check In - Out field: rounded hover highlight, Airbnb-style pill */
.bc-form-search-slider .g-field-search .form-group {
  border-radius: 24px !important;
  transition: background-color 0.2s ease !important;
}
.bc-form-search-slider .g-field-search .form-group:hover {
  background-color: #f2f2f2 !important;
}

/* ===== Shrink further: compact service tabs + tighter header/hero ===== */

/* Hotel/Space/Tour/... tabs were tall individual "boxes" (90px, 18px padding,
   50px margin above them). Make them a slim row of pills instead. */
.nav-tabs,
ul.nav {
  margin-top: 12px !important;
  padding: 10px !important;
  gap: 8px !important;
}
.nav-tabs > li > a,
ul.nav > li > a {
  height: 44px !important;
  padding: 8px 10px !important;
  flex-direction: row !important;
  gap: 6px !important;
  font-size: 13px !important;
}
.nav-tabs > li > a i,
.nav-tabs > li > a svg,
ul.nav > li > a i,
ul.nav > li > a svg {
  font-size: 16px !important;
}
.nav-tabs > li > a:hover,
ul.nav > li > a:hover {
  transform: translateY(-1px) !important;
}

.g-form-control {
  padding: 12px 20px !important;
}

/* Header + hero: shrink again */
.bc_wrap .bc_topbar {
  padding: 5px 0 !important;
}
.bc_wrap .bc_header .content .header-left {
  min-height: 50px !important;
}
.bc-logo img,
.navbar-brand img,
.site-logo img {
  max-height: 36px !important;
}
.bc-form-search-slider {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.bc-list-hotel,
.bc-list-hotel.layout_normal {
  margin-top: 12px !important;
}

/* ===== Bigger logo, smaller nav menu text (desktop header) ===== */
.bc-logo img,
.navbar-brand img,
.site-logo img {
  max-height: 46px !important;
}
.bc_wrap .bc_header .content .header-left .bc-menu ul li a {
  padding: 15px 10px !important;
  font-size: 12px !important;
}

/* ===== Hotel card photo gallery (left/right swipe, Airbnb/Booking.com style) ===== */
.item-loop .thumb-image .thumb-gallery,
.item-loop .thumb-image .thumb-gallery .owl-stage-outer,
.item-loop .thumb-image .thumb-gallery .owl-stage,
.item-loop .thumb-image .thumb-gallery .owl-item,
.item-loop .thumb-image .thumb-gallery .owl-item a {
  height: 100% !important;
}
.item-loop .thumb-image .thumb-gallery .owl-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.item-loop .thumb-image .thumb-gallery .owl-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 8px !important;
  opacity: 0;
  transition: opacity 0.2s ease !important;
  pointer-events: none;
  margin: 0 !important;
}
.item-loop .thumb-image:hover .thumb-gallery .owl-nav {
  opacity: 1;
  pointer-events: auto;
}
.item-loop .thumb-image .thumb-gallery .owl-nav button.owl-prev,
.item-loop .thumb-image .thumb-gallery .owl-nav button.owl-next {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  color: #222 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.item-loop .thumb-image .thumb-gallery .owl-nav .disabled {
  display: none !important;
}

.item-loop .thumb-image .thumb-gallery .owl-dots {
  position: absolute !important;
  bottom: 8px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
}
.item-loop .thumb-image .thumb-gallery .owl-dots .owl-dot span {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.6) !important;
  display: block !important;
  margin: 0 !important;
}
.item-loop .thumb-image .thumb-gallery .owl-dots .owl-dot.active span {
  background: #fff !important;
}

/* ===== Booking.com-style horizontal scrolling rows: Bestseller Listing + Top Destinations ===== */

/* Shared nav-arrow look for any row-level owl-carousel on these two sections */
.bc_wrap .bc-list-hotel .owl-nav,
.bc_wrap .bc-list-hotel.layout_carousel .owl-nav,
.bc_wrap .owl-carousel-locations .owl-nav {
  position: absolute !important;
  top: 20% !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
  pointer-events: none;
}
.bc-list-hotel { position: relative !important; }
.owl-carousel-locations { position: relative !important; }

.bc-list-hotel .owl-nav button.owl-prev,
.bc-list-hotel .owl-nav button.owl-next,
.owl-carousel-locations .owl-nav button.owl-prev,
.owl-carousel-locations .owl-nav button.owl-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #222 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
  transform: translateX(-18px);
}
.bc-list-hotel .owl-nav button.owl-next,
.owl-carousel-locations .owl-nav button.owl-next {
  transform: translateX(18px);
}
.bc-list-hotel .owl-nav .disabled,
.owl-carousel-locations .owl-nav .disabled {
  opacity: 0.35 !important;
}

/* Destination cards inside the carousel keep their existing look; just give
   the row itself some breathing room for the overlaid arrows */
.owl-carousel-locations {
  padding: 0 4px;
}
.owl-carousel-locations .destination-item {
  margin-bottom: 0 !important;
}

/* ===== Same Bestseller-Listing carousel treatment, extended to every other
   listing row: Tour, Space, Car, Event, Boat ===== */

/* --- Nav arrows: left/right separated, not stacked ---
   Base theme CSS carries a higher-specificity ".bc_wrap .bc-list-<x> .owl-nav"
   (and a 4-class mobile-only ".layout_carousel"/".carousel" variant) that
   forces display:block, defeating a lower-specificity flex rule - exactly
   the bug fixed on Bestseller Listing. Match/beat both variants here for
   every module in one place. */
.bc_wrap .bc-list-tour .owl-nav,
.bc_wrap .bc-list-tour.carousel .owl-nav,
.bc_wrap .page-template-content .bc-list-tour .owl-nav,
.bc_wrap .page-template-content .bc-list-tour.carousel .owl-nav,
.bc_wrap .bc-list-space .owl-nav,
.bc_wrap .bc-list-space.layout_carousel .owl-nav,
.bc_wrap .page-template-content .bc-list-space .owl-nav,
.bc_wrap .page-template-content .bc-list-space.layout_carousel .owl-nav,
.bc_wrap .bc-list-car .owl-nav,
.bc_wrap .bc-list-car.layout_carousel .owl-nav,
.bc_wrap .page-template-content .bc-list-car .owl-nav,
.bc_wrap .page-template-content .bc-list-car.layout_carousel .owl-nav,
.bc_wrap .bc-list-event .owl-nav,
.bc_wrap .bc-list-event.layout_carousel .owl-nav,
.bc_wrap .page-template-content .bc-list-event .owl-nav,
.bc_wrap .page-template-content .bc-list-event.layout_carousel .owl-nav,
.bc_wrap .bc-list-boat .owl-nav,
.bc_wrap .bc-list-boat.layout_carousel .owl-nav,
.bc_wrap .page-template-content .bc-list-boat .owl-nav,
.bc_wrap .page-template-content .bc-list-boat.layout_carousel .owl-nav {
  pointer-events: none;
  position: absolute !important;
  top: 20% !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 !important;
}
.bc-list-tour,
.bc-list-space,
.bc-list-car,
.bc-list-event,
.bc-list-boat {
  position: relative !important;
}
.bc-list-tour .owl-nav button.owl-prev,
.bc-list-tour .owl-nav button.owl-next,
.bc-list-space .owl-nav button.owl-prev,
.bc-list-space .owl-nav button.owl-next,
.bc-list-car .owl-nav button.owl-prev,
.bc-list-car .owl-nav button.owl-next,
.bc-list-event .owl-nav button.owl-prev,
.bc-list-event .owl-nav button.owl-next,
.bc-list-boat .owl-nav button.owl-prev,
.bc-list-boat .owl-nav button.owl-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #222 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
  transform: translateX(-18px);
}
.bc-list-tour .owl-nav button.owl-next,
.bc-list-space .owl-nav button.owl-next,
.bc-list-car .owl-nav button.owl-next,
.bc-list-event .owl-nav button.owl-next,
.bc-list-boat .owl-nav button.owl-next {
  transform: translateX(18px);
}
.bc-list-tour .owl-nav .disabled,
.bc-list-space .owl-nav .disabled,
.bc-list-car .owl-nav .disabled,
.bc-list-event .owl-nav .disabled,
.bc-list-boat .owl-nav .disabled {
  opacity: 0.35 !important;
}

/* --- Card look: same rounded, border-less, shadowed card as Bestseller
   Listing. Space/Car/Event/Boat cards share the ".item-loop" class Hotel
   used; Tour's card root is ".item-tour" instead (no ".item-loop"). --- */
.bc-list-space .item-loop,
.bc-list-car .item-loop,
.bc-list-event .item-loop,
.bc-list-boat .item-loop,
.bc-list-tour .item-tour {
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.bc-list-space .item-loop:hover,
.bc-list-car .item-loop:hover,
.bc-list-event .item-loop:hover,
.bc-list-boat .item-loop:hover,
.bc-list-tour .item-tour:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
  transform: translateY(-2px) !important;
}
.bc-list-space .item-loop .thumb-image,
.bc-list-car .item-loop .thumb-image,
.bc-list-event .item-loop .thumb-image,
.bc-list-boat .item-loop .thumb-image,
.bc-list-tour .item-tour .thumb-image {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px 16px 0 0 !important;
}
.bc-list-space .item-loop .thumb-image img,
.bc-list-car .item-loop .thumb-image img,
.bc-list-event .item-loop .thumb-image img,
.bc-list-boat .item-loop .thumb-image img,
.bc-list-tour .item-tour .thumb-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Re-show the Special Offer section, but ONLY the new instance placed
   after "Our happy clients" (testimonial). The two existing rules above
   (".bc-offer { display: none !important; }") hide every .bc-offer
   instance, including the old one still sitting in its original spot
   near the search bar - that one must stay hidden. This selector's
   higher specificity (3 classes) wins over those single-class rules
   regardless of source order, even with !important on both sides. */
.page-template-content .bc-testimonial ~ .bc-offer {
  display: block !important;
}
/* ===== Testimonial section -> auto-scrolling marquee (2 rows, opposite
   directions), replacing the old static 3-column grid. The blade file
   now renders each row's items twice back-to-back and the animation
   slides exactly one set-width (translateX -50%/0), so the loop is
   seamless and works the same regardless of how many reviews exist. */
.bc_wrap .page-template-content .bc-testimonial.bc-testimonial-marquee {
  margin: 30px 0 30px;
  overflow: hidden;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .container {
  margin-bottom: 20px;
}
.bc_wrap .page-template-content .bc-testimonial-marquee h3 {
  font-size: 28px;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 766px) {
  .bc_wrap .page-template-content .bc-testimonial-marquee h3 {
    font-size: 22px;
  }
}
.bc-testimonial-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bc-testimonial-row {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.bc-testimonial-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: bc-marquee-left 38s linear infinite;
  will-change: transform;
}
.bc-testimonial-track.reverse {
  animation-name: bc-marquee-right;
  animation-duration: 44s;
}
.bc-testimonial-row:hover .bc-testimonial-track {
  animation-play-state: paused;
}
@keyframes bc-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes bc-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card {
  flex: 0 0 auto;
  width: 300px;
  border: 1px solid #D7DCE3;
  border-radius: 10px;
  padding: 18px;
  background: #fff;
  margin-bottom: 0;
  min-height: 0;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card .author {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card .author img {
  margin-right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card .author-meta h4 {
  font-size: 14px;
  margin-bottom: 4px;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card .author-meta .star .fa {
  color: #FFDC00;
  font-size: 12px;
  margin-right: 1px;
}
.bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card p {
  font-size: 13px;
  color: #768092;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 766px) {
  .bc_wrap .page-template-content .bc-testimonial-marquee .testimonial-card {
    width: 240px;
    padding: 14px;
  }
  .bc-testimonial-track {
    animation-duration: 26s;
  }
  .bc-testimonial-track.reverse {
    animation-duration: 30s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bc-testimonial-track {
    animation: none;
  }
}
/* ===== Top Destinations: continuous auto-scrolling marquee with working
   prev/next arrows. JS (initDestinationsMarquee in footer.blade.php) drives
   the actual motion + per-breakpoint card width; this just lays out the
   track/viewport/nav-button chrome. Card width below is only a fallback
   for the instant before that JS runs (it sets an inline px width right
   after). */
.bc-destinations-marquee {
  position: relative;
  padding: 0 4px;
}
.bc-destinations-marquee .marquee-viewport {
  overflow: hidden;
}
.bc-destinations-marquee .marquee-track {
  display: flex;
  gap: 15px;
  width: max-content;
  will-change: transform;
}
.bc-destinations-marquee .destination-item {
  flex: 0 0 auto;
  width: 208px;
  margin-bottom: 0 !important;
}

/* Nav arrows: same look as the other carousels' separated prev/next
   buttons (circular white, offset from the edges so they never overlap). */
.bc-destinations-marquee .marquee-nav {
  position: absolute !important;
  top: 20% !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #222 !important;
  font-size: 15px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer;
  z-index: 2;
}
.bc-destinations-marquee .marquee-nav.prev {
  left: -18px !important;
}
.bc-destinations-marquee .marquee-nav.next {
  right: -18px !important;
}
/* ===== "Our best promotion tours": same continuous auto-scroll marquee as
   Top Destinations (initAutoMarquee in footer.blade.php), but drifting the
   opposite direction (data-direction="reverse" on the wrapper) so the two
   rows visually move against each other. */
.bc-tour-marquee {
  position: relative;
  padding: 0 4px;
}
.bc-tour-marquee .marquee-viewport {
  overflow: hidden;
}
.bc-tour-marquee .marquee-track {
  display: flex;
  gap: 15px;
  width: max-content;
  will-change: transform;
}
.bc_wrap .page-template-content .bc-tour-marquee .item-tour {
  flex: 0 0 auto;
  width: 210px;
  margin-bottom: 0 !important;
}
.bc-tour-marquee .marquee-nav {
  position: absolute !important;
  top: 20% !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #222 !important;
  font-size: 15px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  cursor: pointer;
  z-index: 2;
}
.bc-tour-marquee .marquee-nav.prev {
  left: -18px !important;
}
.bc-tour-marquee .marquee-nav.next {
  right: -18px !important;
}
/* ===== FIX: Boat tab (and any other tab using the same smart-search
   Location field) - the open city-suggestions dropdown was rendering
   BEHIND the neighboring Start Date field's text on narrow/mobile widths.
   Root cause: base theme CSS gives .bc-autocomplete z-index:20, while the
   date field's permanent wrapper (.form-date-search, unrelated to whether
   its own calendar popup is open) sits at z-index:9999 - on mobile the
   two fields stack vertically and the dropdown expands downward into the
   date field's space, so the much-higher-z-index date wrapper painted on
   top of the open dropdown's list items. Raising the dropdown above 9999
   only while it's open lets it correctly cover whatever is below it. */
.bc_wrap .bc_form .smart-search .bc-autocomplete,
.bc_wrap .bc_form .input-search .bc-autocomplete {
  z-index: 10000 !important;
}
/* ===== FIX: Flight tab "Travelers" field showed the full Vip/Economy/
   Premium/Business/First breakdown concatenated inline ("3 Vip 2 Economy
   2 Premium 0 Business 0 First"), long enough to overflow past the field
   and get hidden behind the SEARCH button. The field now shows a single
   summed total ("7 Travelers") - see seat_type.blade.php and
   updateCustomSelectDropdown() in home.js. This just guards the field box
   itself so it can never overflow again regardless of locale/text length,
   and the full per-class breakdown with +/- buttons still lives in the
   dropdown, unchanged. */
.form-select-seat-type .form-content {
  min-width: 0;
}
.form-select-seat-type .render {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* ===== Compact-then-expand search bar (Airbnb-style). Category tabs
   (.nav-tabs) always stay fully visible at the top - only the compact
   pill (.mobile-search-summary, sitting right below the tabs) and the
   fields (.tab-content) toggle. Tapping the pill expands .tab-content via
   .g-form-control's ".expanded" class (added/removed by the click/
   outside-click handlers in footer.blade.php, which also auto-focus the
   Location field so the very first click is immediately ready to type in
   - no second click needed). Collapsing it frees up the hero space above
   Bestseller Listing. Solid white backgrounds throughout so the tabs and
   the expanded panel never visually bleed into each other or the hero
   background image behind them. */
.g-form-control .nav-tabs {
  position: relative;
  z-index: 2;
}
.mobile-search-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border-radius: 999px;
  padding: 14px 20px;
  margin: 0 4px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 14px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.mobile-search-summary .summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-search-summary .summary-dot {
  color: #999;
  flex-shrink: 0;
}
.mobile-search-summary i {
  flex-shrink: 0;
  color: #FF385C;
}
@media (min-width: 768px) {
  .mobile-search-summary {
    max-width: 520px;
    margin: 10px auto 0;
    padding: 16px 26px;
    font-size: 15px;
    justify-content: center;
  }
}

.g-form-control .tab-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: #ffffff;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.g-form-control.expanded .mobile-search-summary {
  display: none;
}
.g-form-control.expanded .tab-content {
  max-height: 3000px;
  opacity: 1;
  pointer-events: auto;
  padding: 20px;
  margin-top: 10px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, padding 0.4s ease;
}
/* ===== Location autocomplete dropdown (.bc-autocomplete): background was
   already solid white (#fff, opacity:1 - verified, not actually see-
   through), but it had no box-shadow at all, so against the page's own
   white background it visually blended with "Bestseller Listing" sitting
   right below it instead of reading as a floating card. Explicit solid
   background (defensive) + box-shadow fixes that; z-index:10000 (set
   earlier for the Boat overlap fix) already keeps it above everything. */
.bc_wrap .bc_form .smart-search .bc-autocomplete,
.bc_wrap .bc_form .input-search .bc-autocomplete {
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}
/* ===== 3 search-bar polish fixes =====

   1) More breathing room between the tabs row and the expanded field
      row - it was only 10px.
   2) The Guests dropdown (and any other field dropdown inside the
      search form) could get clipped by .tab-content's overflow:hidden,
      which stays "hidden" even once .expanded (it was only needed to
      hide content during the COLLAPSED state's animation). Switching to
      overflow:visible once expanded, and boosting the dropdown's own
      z-index/background to match the Location dropdown fix, keeps it
      opening cleanly below its own field without being clipped or
      covering neighbours.
   3) Field dividers (Location | Date | Guests): Bootstrap's own
      ".border-right { border-right: 1px solid #dee2e6 !important; }"
      (with !important) was silently overriding the theme's intended
      "#D7DCE3" color (no !important, so it lost despite higher
      selector specificity) - both were also missing an explicit
      border-left:none guard. Pinning one explicit color/width here
      settles which one actually wins. */

.g-form-control.expanded .tab-content {
  margin-top: 24px;
  overflow: visible !important;
}

.g-field-search .border-right {
  border-right: none !important;
  border-left: none !important;
}

.form-select-guests .select-guests-dropdown,
.g-form-control .dropdown-menu {
  background: #ffffff !important;
  z-index: 10000 !important;
}
/* ===== Smooth tab-switch animation for the search widget. The blade now
   marks each .tab-pane with Bootstrap 4's own "fade" class (+ "show" on
   the initially-active one) - Bootstrap's existing tab.js already knows
   how to sequence the fade-out/fade-in and reads the transition-duration
   straight from computed CSS, so lengthening it here and adding a subtle
   translateY slide is enough; no custom JS needed. */
.g-form-control .tab-pane.fade {
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(-10px);
}
.g-form-control .tab-pane.fade.show {
  transform: translateY(0);
}
/* ===== Fix: the Guests dropdown's z-index:10000 rule added earlier
   wasn't actually winning. Root cause found by bisecting the CSSOM live
   (deleting candidate rules one at a time and re-checking computed
   style): an EARLIER rule from the Flight-tab dropdown fix,
   ".bc-form-search-slider [class*=\"dropdown\"]:not(.dropdown-toggle)
   :not(.dropdown-item-row):not(.dropdown-item) { z-index: 9999
   !important; }", has 5 class-equivalent selectors of specificity (1
   class + 1 attribute + 3 :not() classes) - higher than the 2-class
   selector used for the fix above, so it kept winning regardless of
   being earlier in the file. This rule matches with enough extra
   qualifiers to specificity-beat it outright, not just tie it. */
.bc-form-search-slider .g-form-control .tab-content .form-select-guests .select-guests-dropdown,
.bc-form-search-slider .g-form-control .tab-content .dropdown-menu {
  z-index: 10000 !important;
  background: #ffffff !important;
}
/* ===== The "vertical line through the text" the user is seeing (most
   noticeable zoomed in on mobile) is the browser's own blinking text
   caret: the Location field auto-focuses now (see the 1-click tab-expand
   fix in footer.blade.php), and Chrome still renders a caret in a
   readonly input even though it can't be typed into. Turning off
   caret-color hides it - the field is click-driven (its dropdown), never
   meant for typing, so no functionality is lost. */
.smart-search-location {
  caret-color: transparent !important;
}

/* ===== Polished single-line date-range display for the search form's
   "Dates" field (e.g. "Sep 5 ? Sep 6" instead of a stacked
   "09/05/2026 - 09/06/2026"). The separator is still the same literal
   " - " text in the markup (shared across every service's date field) -
   it's hidden here (font-size: 0) and replaced with a subtle arrow via
   ::before, so no blade template changes were needed. */
.date-wrapper .check-in-wrapper {
  white-space: nowrap !important;
}
.date-wrapper .check-in-wrapper .check-in-render,
.date-wrapper .check-in-wrapper .check-out-render {
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: 0.2px !important;
}
.date-wrapper .check-in-wrapper span {
  font-size: 0 !important;
  top: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin: 0 8px !important;
}
.date-wrapper .check-in-wrapper span::before {
  content: "?";
  font-size: 15px;
  color: #94a3b8;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .date-wrapper .check-in-wrapper .check-in-render,
  .date-wrapper .check-in-wrapper .check-out-render {
    font-size: 13px !important;
  }
  .date-wrapper .check-in-wrapper span {
    margin: 0 5px !important;
  }
}

/* ===== Location placeholder ("Where are you going?") was getting
   clipped mid-word in the search-form Location field on every
   service tab - the input's rendered width (down to ~156px on some
   layouts) was narrower than the placeholder text at 16px
   (~175px). Shrinking the text and letting the input use its full
   available width fixes it; text-overflow/ellipsis is just a safety
   net for any width narrower than tested, so it degrades gracefully
   instead of hard-clipping mid-character again. */
.smart-search-location {
  width: 100% !important;
  font-size: 13px !important;
  text-overflow: ellipsis !important;
}
.smart-search-location::placeholder {
  font-size: 13px !important;
}

/* ===== Car booking form's "Number" (vehicle quantity) +/- buttons: show
   a clear disabled state when at min/max stock, instead of silently
   doing nothing on click with no visual feedback. */
.input-number-group .icon.disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ===== Location autocomplete dropdown (.bc-autocomplete) on mobile was
   shifted 55px left of the input it belongs to (a "left: -55px" rule in
   the theme's own SCSS, presumably tuned for a different layout context),
   making it overlap neighboring content instead of sitting directly under
   the field. Desktop (>1023px) already aligns correctly - this only
   overrides the broken mobile case. */
@media (max-width: 1023px) {
  .smart-search .bc-autocomplete {
    left: 0 !important;
    right: 0 !important;
  }
}

/* ===== Search summary bar on the car results page (Screen 2): shows the
   customer's selected location/date/passengers, which was previously
   missing entirely - clean flex row on desktop, stacks/wraps on mobile. */
.bc-search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #334155;
}
.bc-search-summary .summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.bc-search-summary .summary-item i {
  color: #2563eb;
  font-size: 13px;
}
@media (max-width: 600px) {
  .bc-search-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
  }
}

/* ===== Simplified "Filter Price" (min/max number fields instead of a
   drag-slider - easier and more precise to use on a touch screen). */
.bc-filter-price-simple .row {
  margin: 0 -5px;
}
.bc-filter-price-simple .row > div {
  padding: 0 5px;
}
.bc-filter-price-simple input[type="number"] {
  width: 100%;
  height: 38px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
}
.bc-filter-price-simple .btn-apply-price-range-simple {
  margin-top: 8px;
  padding: 0;
}
/* ===== Car Type filter chips (responsive, easy to tap) ===== */
.bc_filter .bc-car-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bc_filter .bc-car-type-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #e2e2e2;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.bc_filter .bc-car-type-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.bc_filter .bc-car-type-chip:has(input:checked) {
  background: var(--primary-color, #ff385c);
  border-color: var(--primary-color, #ff385c);
  color: #fff;
}

.bc_filter .bc-car-type-chip:hover {
  border-color: var(--primary-color, #ff385c);
}

@media (max-width: 767px) {
  .bc_filter .bc-car-type-chip {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}


/* Vendor listing form step tabs - readable inactive state, clear active state, obvious clickability */
.bc_wrap .bc_user_profile .form-add-service .nav-tabs {
    background: #ffffff !important;
    border-bottom: 2px solid #e5e7eb !important;
}
.bc_wrap .bc_user_profile .form-add-service .nav-tabs a {
    color: #1a2b47 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}
.bc_wrap .bc_user_profile .form-add-service .nav-tabs a:hover {
    color: #5191FA !important;
    border-bottom-color: #c7d9fb !important;
}
.bc_wrap .bc_user_profile .form-add-service .nav-tabs a.active {
    color: #5191FA !important;
    font-weight: 700 !important;
    border-bottom-color: #5191FA !important;
}