/* ==========================================================================
   Mobile bottom sheets (added 2026-11-03)

   On a phone every search drop-down, calendar and picker opens as a sheet
   docked to the bottom of the screen, the way the car rental date & time
   picker already did (.cdtp-sheet in car-search.css, which this file now
   shares its look with).

   Sections 5 and 6 (added 2026-11-03) carry the rest of the phone layout: the
   listing pages' search panel as a sheet behind a summary bar, and the compact
   header bar.

   Loaded LAST in master.blade.php, after @yield('css'), so it wins over the
   per-page stylesheets (pkg-search-options.css, car-search.css, custom.css)
   at equal specificity. Everything is inside phone media queries, so wider
   screens are untouched.
   ========================================================================== */

@media screen and (max-width: 767px) {

	/* ------------------------------------------------------------------
	   0. Let position:fixed reach the viewport again.

	   The hero's .t-container carries `transform: translate(0%, 0%)` below
	   991px (custom.css), and ANY transform — even an identity one — makes
	   that element the containing block for fixed children. That is why the
	   car route picker, which already asks for `bottom: 0`, docked to the
	   bottom of the hero instead of the bottom of the screen. The identity
	   transform has no visual effect, so dropping it changes nothing else.

	   `z-index: auto` is the second half of the same problem: .t-container is
	   a FLEX ITEM (its section is display:flex), and z-index applies to flex
	   items even when they are static — so its `z-index: 100` opened a
	   stacking context that capped every sheet inside the hero below the
	   floating promo buttons (z-index 999). The 100 only exists to sit above
	   the hero's image strip, which is display:none at this width anyway.
	   ------------------------------------------------------------------ */
	.packageBanner .t-container,
	.add_nam_h .t-container,
	.add_nam_1 .t-container {
		transform: none;
		z-index: auto;
	}

	/* ------------------------------------------------------------------
	   1. The shared sheet
	   ------------------------------------------------------------------ */
	.uit-container.uitk-menu-container,          /* hotel / flight / package autocompletes + their date panels */
	.person-boxdate .inputBox,                   /* guests & rooms steppers */
	.pkc-panel,                                  /* month-and-year picker (packages, group flights) */
	.daterangepicker,                            /* every floating calendar (listing, detail, booking pages) */
	.car-route-picker .cr-panel,                 /* car route builder */
	.cdtp.cdtp-sheet {                           /* car pick-up date & time (the original) */
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		max-height: 86vh;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		border: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
		z-index: 10060 !important;
		/* the second shadow is the dimmed page behind the sheet; it costs no
		   extra element and lets clicks through, so the existing
		   "click outside closes it" handlers keep working */
		box-shadow: 0 -6px 22px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(0, 0, 0, .45) !important;
		animation: bu-sheet-up .18s ease-out;
	}

	@keyframes bu-sheet-up {
		from { transform: translateY(26px); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}

	/* a grab handle, so it reads as a sheet */
	.uit-container.uitk-menu-container::before,
	.person-boxdate .inputBox::before,
	.pkc-panel::before,
	.daterangepicker::before,
	.car-route-picker .cr-panel::before,
	.cdtp.cdtp-sheet::before,
	.searchD .bootstrap-select > .dropdown-menu::before,
	.packageDrop .bootstrap-select > .dropdown-menu::before,
	.packageDrop > .dropdown-menu::before,
	.car-rent-select .dropdown-menu:not(.inner)::before,
	.passenger_view + .dropdown-menu::before,
	.languageD .dropdown-menu:not(.inner)::before,
	.nav-home ~ .tab-content .dropdown-menu.show:not(.inner)::before {
		content: "";
		/* daterangepicker already uses ::before for its callout arrow, which is
		   absolutely positioned — reset that or the handle lands in the corner.
		   Sticky keeps it in sight in a sheet that opens already scrolled, the
		   way a bootstrap-select list scrolls to the selected option. */
		position: sticky;
		top: 0;
		z-index: 1;
		display: block;
		width: 38px;
		height: 4px;
		margin: 2px auto 10px;
		border: 0;
		border-radius: 2px;
		background: #dcdcdc;
	}

	/* ------------------------------------------------------------------
	   2. Calendars
	   ------------------------------------------------------------------ */

	/* floating daterangepicker: no callout arrow once it is docked */
	.daterangepicker::after {
		display: none !important;
	}
	.daterangepicker .drp-buttons {
		position: sticky;
		bottom: 0;
		background: #fff;
	}

	/* a daterangepicker drawn INSIDE a panel (the home hotel + flight date
	   panels use parentEl) must stay in that panel — the panel is the sheet */
	.embedded-daterangepicker .daterangepicker {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		max-height: none;
		overflow: visible;
		border-radius: 0 !important;
		padding-bottom: 0 !important;
		box-shadow: none !important;
		animation: none;
	}
	.embedded-daterangepicker .daterangepicker::before {
		display: none;
	}

	/* two months side by side do not fit on a phone — stack them, the sheet
	   scrolls */
	.daterangepicker .drp-calendar,
	.daterangepicker .drp-calendar.left,
	.daterangepicker .drp-calendar.right,
	#daterangepicker1-container-hotel .drp-calendar,
	#daterangepicker1-container-hotel .drp-calendar.left,
	#daterangepicker1-container-hotel .drp-calendar.right {
		float: none !important;
		clear: both;
		width: 100% !important;
		max-width: none !important;
		border-right: 0 !important;
		border-left: 0 !important;
		padding: 2px 4px !important;
	}
	#daterangepicker1-container-hotel .drp-calendar.right {
		border-top: 1px solid #eef0f3;
		padding-top: 8px !important;
	}
	.daterangepicker .calendar-table td,
	.daterangepicker .calendar-table th {
		min-width: 0;
		height: 38px;
	}

	/* ------------------------------------------------------------------
	   3. Panel innards that assumed a narrow floating box
	   ------------------------------------------------------------------ */
	.uit-container.uitk-menu-container .uit-searchBox {
		max-height: none;
	}
	.person-boxdate .inputBox {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* ------------------------------------------------------------------
	   4. Search drop-downs (duration, group, package type, passengers,
	      car seats): the menu is placed by Popper with an inline transform,
	      so these need the override to be !important too.
	   ------------------------------------------------------------------ */
	.searchD .bootstrap-select > .dropdown-menu,
	.packageDrop .bootstrap-select > .dropdown-menu,
	.packageDrop > .dropdown-menu,
	.car-rent-select .dropdown-menu:not(.inner),
	.passenger_view + .dropdown-menu,
	.languageD .dropdown-menu:not(.inner),
	.nav-home ~ .tab-content .dropdown-menu.show:not(.inner) {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		max-height: 70vh;
		overflow-y: auto;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
		z-index: 10060 !important;
		box-shadow: 0 -6px 22px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(0, 0, 0, .45) !important;
		animation: bu-sheet-up .18s ease-out;
	}
	.searchD .bootstrap-select > .dropdown-menu .dropdown-item,
	.packageDrop .bootstrap-select > .dropdown-menu .dropdown-item,
	.car-rent-select .dropdown-menu .dropdown-item {
		padding: 11px 16px;
	}

	/* the currency switcher sits under the navbar in the header stack (both are
	   position:relative with no z-index, and the navbar comes later in the
	   markup), so on a phone its visible "USD 🇺🇸" label could not be tapped
	   at all — the navbar swallowed the tap.
	   1000, not 5: this z-index makes .languageD a stacking context, so the
	   sheet inside it paints at THIS level, not at its own 10060 — anything
	   below the floating promo buttons' 999 leaves them drawn on top of the
	   open currency sheet (same value as triponly's copy). */
	.languageD {
		z-index: 1000;
	}

	/* bootstrap-select nests a second .dropdown-menu (.inner) for the options:
	   it must stay inside the sheet, not become one */
	.dropdown-menu .dropdown-menu.inner,
	.dropdown-menu .inner.show {
		position: static !important;
		max-height: none !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding-bottom: 0 !important;
		box-shadow: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   5. Listing pages: the search panel is a bottom sheet behind a summary bar
      (added 2026-11-03, driven by assets/js/mobile-search.js)
   ========================================================================== */

@media screen and (max-width: 767px) {

	/* the bar that replaces the panel at the top of the results */
	.ms-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 0 0 14px;
		padding: 9px 11px;
		border: 1px solid #e1e3e8;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(20, 22, 30, .09);
		text-align: left;
	}
	.ms-bar > i {
		flex: 0 0 auto;
		font-size: 15px;
		color: #b9880a;
	}
	.ms-text {
		flex: 1 1 auto;
		min-width: 0;
	}
	.ms-text b,
	.ms-text small {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.ms-text b {
		font-size: 14.5px;
		font-weight: 800;
		line-height: 1.25;
		color: #2a2c31;
	}
	.ms-text small {
		font-size: 12.5px;
		line-height: 1.35;
		color: #7a7d85;
	}
	.ms-edit {
		flex: 0 0 auto;
		padding: 5px 11px;
		border-radius: 999px;
		background: #FAC917;
		font-size: 12px;
		font-weight: 800;
		color: #2b2d33;
	}

	/* the panel itself: out of the flow until the bar is tapped */
	body.ms-ready .sidebar .side-col[data-ms-title] {
		display: none;
	}
	body.ms-ready.ms-open .sidebar .side-col[data-ms-title] {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		max-height: 88vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		margin: 0;
		border-radius: 16px 16px 0 0;
		padding: 6px 14px calc(16px + env(safe-area-inset-bottom));
		z-index: 10050;
		box-shadow: 0 -6px 22px rgba(0, 0, 0, .3);
		animation: bu-sheet-up .18s ease-out;
	}
	/* the grab handle, same as every other sheet */
	body.ms-ready.ms-open .sidebar .side-col[data-ms-title]::before {
		content: "";
		position: sticky;
		top: 0;
		z-index: 1;
		display: block;
		width: 38px;
		height: 4px;
		margin: 2px auto 8px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .45);
	}
	.ms-close {
		position: absolute;
		top: 6px;
		right: 8px;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 26px;
		line-height: 1;
		color: #fff;
		opacity: .85;
	}
	body.ms-ready .sidebar .side-col[data-ms-title] .ms-close {
		display: none;
	}
	body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .ms-close {
		display: block;
	}

	.ms-backdrop {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10040;
		background: rgba(0, 0, 0, .45);
	}
	body.ms-open .ms-backdrop {
		display: block;
	}
	/* the page behind must not scroll under the sheet */
	body.ms-open {
		overflow: hidden;
	}

	/* the search panel's own fields, drawn for a 260px-wide column */
	body.ms-ready.ms-open .sidebar .side-col[data-ms-title] h2 {
		margin: 0 40px 12px 0;
		font-size: 18px;
	}
	body.ms-ready.ms-open .sidebar .side-col[data-ms-title] .form-group {
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   6. The header on a phone: one compact bar instead of a stack of blocks
      (added 2026-11-03)

      The desktop header keeps the brand, the "More Travel" menu, the currency
      switcher and the account buttons in three nested boxes. On a phone those
      stacked into a ~245px-tall slab with the logo off-centre and the currency
      overlapping the navbar. `display: contents` on the <nav> lets all four sit
      in one flex row, so they can be ordered and sized as a single app bar:

          [ More Travel v ]   [ logo ]            USD (flag) v
          [ List your property ] [ Register ] [ Sign In ]
   ========================================================================== */

@media screen and (max-width: 767px) {

	.head_top {
		padding: 7px 10px;
	}
	.head_top .ht_texta h5 {
		font-size: 11.5px;
		line-height: 1.35;
	}

	.menu-header {
		padding: 0;
	}
	.menu-header .t-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
		padding: 7px 12px 9px;
	}
	.menu-header .navbar {
		display: contents;
	}

	.menu-header .navbar-collapse {
		position: static;
		order: 1;
		flex: 0 0 auto;
		top: auto;
		left: auto;
		width: auto;
		margin: 0;
	}
	.menu-header .moreTravel > li > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 7px 9px;
		border: 1px solid rgba(255, 255, 255, .4);
		border-radius: 8px;
		font-size: 11.5px;
		font-weight: 700;
		line-height: 1;
	}

	/* .navbar-light .navbar-brand is pinned to 125px below 991px; the <a> has to
	   shrink to the logo or the bar wraps on a 320px screen */
	.menu-header .navbar-light .navbar-brand {
		order: 2;
		width: auto;
		margin: 0;
		padding: 0;
	}
	.menu-header .navbar-brand img {
		/* the markup sets width/top inline, so this has to shout */
		width: 106px !important;
		top: -2px !important;
	}

	.menu-header .languageD {
		position: static !important;
		order: 3;
		height: 34px;
		margin-left: auto;
	}
	.menu-header .languageD .bootstrap-select > .dropdown-toggle {
		padding: 5px 8px;
		font-size: 12.5px;
	}

	.menu-header .form-inline {
		order: 4;
		flex: 1 0 100%;
	}
	.menu-header .top-register {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 9px 0 0;
		padding: 0;
	}
	.menu-header .top-register li {
		display: block;
		width: auto;
		margin: 0;
	}
	.menu-header .lst-btn {
		padding: 6px 11px;
		font-size: 11.5px;
	}
	.menu-header .yellow-btn {
		padding: 6px 13px;
		font-size: 11.5px;
	}
}

/* the smallest phones (320px): shrink the three items so the bar stays one row */
@media screen and (max-width: 360px) {

	.menu-header .t-container {
		column-gap: 7px;
		padding-right: 10px;
		padding-left: 10px;
	}
	.menu-header .moreTravel > li > a {
		padding: 6px 7px;
		font-size: 11px;
	}
	.menu-header .navbar-brand img {
		width: 92px !important;
	}
	.menu-header .languageD .bootstrap-select > .dropdown-toggle {
		padding: 5px 6px;
		font-size: 11.5px;
	}
	.menu-header .top-register {
		gap: 6px;
	}
	.menu-header .lst-btn,
	.menu-header .yellow-btn {
		padding: 6px 9px;
		font-size: 11px;
		white-space: nowrap;
	}
}

/* ==========================================================================
   7. The group-flight listing card (added 2026-11-03)

      flight.css gives the card two fixed columns - the detail at
      `calc(100% - 220px)` and the price at 220px - with no phone override, so
      on a 390px screen the whole itinerary was squeezed into 117px and the
      times printed on top of the airline name. On a phone the two parts stack.
   ========================================================================== */

@media screen and (max-width: 767px) {

	.airr-class-box {
		display: block;
	}
	.airr-class-detail,
	.f2_re-price,
	.airr-class-price {              /* the price box inside the expanded detail */
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
	}
	.airr-class-price {
		flex-direction: row !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px 12px;
	}
	.airr-class-price .ticket-d {
		display: none;
	}
	.airr-class-detail {
		padding: 16px 14px 0;
	}
	.airr-class-detail .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* departure - duration - arrival, as one row that fits: the desktop rules
	   spend 18px of padding and 56px of margin on a 390px screen, and let
	   .date-fl break inside "02:00", so the time printed one digit per line */
	.gg-2,
	.f2_re-gg .gg-2 {
		width: 100%;
		height: auto;
	}
	.ggWraps {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		padding: 0;
	}
	.ggWraps .gg2left,
	.ggWraps .gg2right {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.ggWraps .bar-outs {
		/* the plane sits on the right end of the bar, so it needs the gap */
		flex: 0 0 96px;
		width: 96px;
		margin: 0;
	}
	.ggWraps .date-fl {
		white-space: nowrap;
		word-wrap: normal;
	}

	/* the price becomes the card's footer */
	.f2_re-price {
		flex-direction: row !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 12px;
		border-top: 1px dashed #e3e5ea;
		padding: 11px 14px calc(12px + env(safe-area-inset-bottom) * 0);
	}
	.f2_re-price ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 2px 9px;
		margin-top: 0;
	}
	.f2_re-price ul li {
		line-height: 16px;
	}
}

/* ==========================================================================
   8. The hero's search tabs fill the width on a phone (added 2026-11-03)

      Hotels / Flights / Packages / Car Rentals are inline-block links with
      `padding: 14px 26px` and `margin-right: 19px` between the items, sized
      for a 1110px row. On a phone they ended short of the right edge (72px of
      empty space at 390px) and wrapped to a second line at 320px, with
      "Car Rentals" dangling on its own. Four equal columns instead, so the
      strip reads as one full-width switch and the active underline lines up
      with the tab it belongs to.
   ========================================================================== */

@media screen and (max-width: 767px) {

	.nav.nav-tabs.nav-home {
		flex-wrap: nowrap;
		width: 100%;
	}
	.nav.nav-tabs.nav-home .nav-item {
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0;
	}
	.nav-home li a {
		display: block;
		width: 100%;
		padding: 12px 2px;
		font-size: 13.5px;
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
	}
}

@media screen and (max-width: 360px) {

	.nav-home li a {
		padding: 11px 1px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
   9. Hotel listing card — compact phone layout
   The desktop card is a 2-column design (photo left, content right,
   rating top-right, price bottom-right). On a phone custom.css turns
   every .delx-ranking into a column but keeps .delx-right right-aligned,
   so the rating and the price each sit on their own row with a wide
   empty band beside them, and the promo text (absolute, top:-21px) lands
   on top of the "Free cancellation" line. This section rebuilds the
   card as one bordered block with everything left-aligned and tight.

   Scoped to `ul.listWrap > li` on purpose: the dashboard and the package
   listings reuse .lstTbs / .lst-D with their own markup, and only the
   hotel listing's wrapper is a <ul class="lstTbs listWrap">.
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {

	/* one real card: the photo and the text share a border + radius,
	   instead of the shadow sitting on the text half only */
	ul.listWrap > li {
		margin-bottom: 14px;
	}
	ul.listWrap > li .lst-D {
		overflow: hidden;
		border: 1px solid #e6e8ec;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(20, 22, 30, .07);
	}
	ul.listWrap > li .lst-Dleft {
		width: 100%;
		max-width: none;
		flex: none;
		height: auto;
	}
	ul.listWrap > li .lftig,
	ul.listWrap > li .lftig img {
		height: 158px;
	}
	ul.listWrap > li .lftig img {
		width: 100%;
		object-fit: cover;
		display: block;
	}
	ul.listWrap > li .lst-Dright {
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 11px 12px 12px;
		box-shadow: none;
	}

	/* title + address: tighter leading, no 10px gaps */
	ul.listWrap > li .title-ls-hotel {
		margin-bottom: 3px;
		line-height: 1.25;
	}
	ul.listWrap > li .title-ls-hotel a {
		font-size: 16px;
	}
	ul.listWrap > li .lst-Dright h4 {
		margin-bottom: 0;
		line-height: 1.35;
	}

	/* rating: one left-aligned line (score, then words) instead of a
	   right-aligned block with an empty band to its left */
	ul.listWrap .lst-D .lst-Dright .top_areah .delx-right.foods {
		justify-content: flex-start;
		margin: 7px 0 0;
		text-align: left;
	}
	ul.listWrap > li .delx-rate {
		flex-direction: row-reverse;
		align-items: center;
		gap: 7px;
		width: auto;
	}
	ul.listWrap > li .delx-rate strong {
		margin: 0;
		font-size: 12.5px;
		line-height: 1.25;
		text-align: left;
	}
	ul.listWrap > li .delx-rate strong i {
		display: block;
		font-size: 11px;
	}
	ul.listWrap > li .rateCircle {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		margin: 0;
		font-size: 13px;
		line-height: 34px;
	}

	/* room row */
	ul.listWrap > li .recomnd {
		margin: 9px 0 5px;
		font-size: 13px;
	}
	ul.listWrap > li .center_areah {
		margin-bottom: 0;
	}
	ul.listWrap > li .delux-lst {
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 7px;
	}
	ul.listWrap > li .delx-icon {
		margin-right: 9px;
	}

	/* promotions: the absolute .promo_info used to be drawn 21px above
	   .insDv, i.e. over the line before it. Give .insDv a padding band of
	   its own and drop the now-redundant "Promotions" label. */
	ul.listWrap > li .price_n_promo .insDv {
		position: relative;
		margin-top: 8px;
		padding-top: 16px;
	}
	ul.listWrap > li .price_n_promo .insDv > strong {
		display: none;
	}
	ul.listWrap > li .price_n_promo .insDv .promo_info {
		top: 0;
		line-height: 1.3;
	}
	ul.listWrap > li .price_n_promo .package_inc_bar {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	ul.listWrap > li .price_n_promo .insDv .inc_box {
		max-width: 42px;
		flex: 0 0 42px;
		height: 42px;
	}
	ul.listWrap > li .price_n_promo .insDv .inc_box img {
		height: 20px;
		width: 26px !important;
	}

	/* price: nights/taxes on the left, the amount on the right of the
	   same row, so neither leaves an empty half-width band */
	ul.listWrap > li .buttom_areah .delx-right {
		text-align: left;
	}
	ul.listWrap > li .buttom_areah .delx-right .delux-price {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 2px 12px;
		margin: 10px 0 0;
		padding-top: 10px;
		border-top: 1px solid #eef0f3;
		text-align: left;
		line-height: 1.3;
	}
	ul.listWrap > li .delux-price > em,
	ul.listWrap > li .delux-price > b {
		display: block;
		font-size: 11.5px;
	}
	ul.listWrap > li .delux-price > h5 {
		order: 2;
		margin: 0;
		font-size: 20px;
		white-space: nowrap;
		text-align: right;
	}
	/* keep the struck-through price on the same line as the amount,
	   otherwise the price row is two lines tall on its own */
	ul.listWrap > li .delux-price > h5 small {
		display: inline;
		margin-right: 3px;
	}
	/* em and b are siblings of h5, not wrapped — keep them in reading
	   order on the left by pulling them into the same flex order */
	ul.listWrap > li .delux-price > em {
		order: 1;
	}
	ul.listWrap > li .delux-price > b {
		order: 3;
		flex: 1 0 100%;
		margin-top: 2px;
		font-weight: 500;
		color: #7a7d85;
	}

	/* full-width tap target */
	ul.listWrap > li .sls-right {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 10px;
	}
	ul.listWrap > li .sbtn-room {
		flex: 1 1 auto;
		text-align: center;
	}
}

@media screen and (max-width: 360px) {

	ul.listWrap > li .lftig,
	ul.listWrap > li .lftig img {
		height: 140px;
	}
	ul.listWrap > li .title-ls-hotel a {
		font-size: 15px;
	}
	ul.listWrap > li .delux-price > h5 {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------
   10. Hotel detail page — phone layout
   The page is a two-column desktop layout: a sidebar (search panel, map,
   "show similar", questions, reviews) and the content. Stacked, that put
   ~1 400px of secondary material before the hotel's own name, and the
   reserve block (a 163px sticky desktop column) stayed 143px wide with its
   bullets wrapping every two words.

   .hd-row is the detail page's own row (hotel_detail.blade.php). The search
   panel itself is a bottom sheet behind the summary bar, exactly as on the
   listings (sections 5, mobile-search.js); here the rest of the sidebar
   moves below the content, the way the listings already push theirs down.
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {

	.hd-row {
		flex-direction: column-reverse;
	}
	.hd-row > .outher-class-1 {
		margin-top: 22px;
	}

	/* "I'll Reserve" + its bullets: full width, not a 143px strip */
	.bedWraper .bed-Reserves {
		position: static;
		width: 100%;
		height: auto;
		padding: 12px 0 0;
	}
	.bed-Reserves .wr-wrap.w-4 .d-flex {
		justify-content: stretch !important;
	}
	.bed-Reserves .i-rserve {
		width: 100%;
		padding: 11px 14px;
		font-size: 15px;
	}
	.bed-Reserves .wr-wrap.w-4 {
		text-align: left;
	}
	.bed-Reserves .small-lst {
		padding-left: 18px;
		margin: 8px 0 0;
	}
	.bed-Reserves .small-lst li {
		font-size: 12px;
		line-height: 1.4;
		margin-bottom: 2px;
	}

	/* room amenities: groups side by side instead of one long column */
	.single_room .ot-div > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 14px;
		padding-left: 0;
		list-style: none;
	}
	.single_room .ot-div > ul > li {
		min-width: 0;
	}
	.single_room .ot-div .tit-li {
		display: block;
		margin: 8px 0 2px;
	}

	/* check-in / check-out bars: the time label is drawn below the bar and
	   used to land on the next heading */
	.rul-right .rul-wraps {
		margin-bottom: 30px;
	}

	/* section tabs: moved under the photos, one swipeable row */
	.nav-detail:not(.nav-after-gallery) {
		display: none;
	}
	.nav-detail.nav-after-gallery {
		display: block;
		margin: 0 0 10px;
	}
	.nav-after-gallery .scroll-detail {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		margin: 0;
		padding: 2px 0 4px;
		background: none;
		border: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.nav-after-gallery .scroll-detail::-webkit-scrollbar {
		display: none;
	}
	.nav-after-gallery .scroll-detail li {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 1px solid #d9dde3;
		border-radius: 999px;
		background: #fff;
	}
	.nav-after-gallery .scroll-detail li a {
		display: block;
		padding: 7px 14px;
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* ---- compact sections ---- */
	.outher-class-2 .pa-title {
		font-size: 17px;
		line-height: 1.25;
		margin: 0 0 8px;
		padding: 0 0 8px;
	}
	.outher-class-2 .pop-Facility,
	.outher-class-2 .hours-rul,
	.outher-class-2 .fin-div {
		margin-top: 14px;
		padding-top: 0;
	}
	.outher-class-2 .see-ava,
	.outher-class-2 .pa-title + .shobtn {
		margin-top: 0;
	}

	/* room cards */
	.single_room .tit-li {
		font-size: 14px;
		margin: 6px 0 2px;
	}
	.single_room .ot-div ul li {
		font-size: 13px;
		line-height: 1.35;
		margin-bottom: 1px;
	}

	/* facility, amenity and rule lists */
	.pop-Facility ul li,
	.hours-rul ul li,
	.fin-div ul li {
		margin-bottom: 4px;
	}
	.hours-rul h4,
	.hours-rul strong,
	.hours-rul h5 {
		font-size: 14px;
		margin: 10px 0 4px;
	}
	.hours-rul p {
		margin: 0 0 6px;
		font-size: 13px;
		line-height: 1.4;
	}

	/* facilities and amenities: two columns */
	.pop-Facility .f-major {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px 12px;
		padding-left: 0;
		list-style: none;
		margin: 8px 0 12px;
	}
	.pop-Facility .f-major > li {
		min-width: 0;
		margin: 0;
		padding: 0;
		width: auto;
	}
	.pop-Facility .f-topTitle h3 {
		font-size: 16px;
		margin: 12px 0 6px;
	}
	.pop-Facility .ot-div > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 14px;
		padding-left: 0;
		list-style: none;
	}
	.pop-Facility .ot-div > ul > li {
		min-width: 0;
	}
	.pop-Facility .tit-li {
		display: block;
		margin: 6px 0 2px;
	}

	/* repeated "See Availability" buttons: slimmer */
	.pop-Facility .see--btn,
	.hours-rul .rul-btn,
	.fin-div .see--btn {
		padding: 8px 14px;
		font-size: 14px;
		margin: 4px 0 8px;
	}

	/* house rules: icon and title on one line, rows closer */
	.hours-rul .rul--left h4 {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 10px 0 6px;
	}
	.hours-rul .rul--left h4 i {
		display: inline-block;
		margin: 0;
	}
	.hours-rul .rul-wraps {
		margin-bottom: 26px;
	}
	.hours-rul .rul-right > .rul-wraps:nth-child(n+4) {
		margin-bottom: 4px;
	}

	/* "I'll Reserve" is the booking button: make it unmistakable */
	.bedWraper .bed-Reserves .i-rserve {
		height: auto;
		padding: 14px 16px;
		font-size: 17px;
		font-weight: 800;
		letter-spacing: .2px;
		background: #FAC917;
		color: #313131;
		border-radius: 10px;
		box-shadow: 0 6px 16px rgba(250, 201, 23, .55);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.bedWraper .bed-Reserves .i-rserve::after {
		content: "\203A";
		font-size: 24px;
		line-height: 1;
		margin-top: -2px;
	}
	.bedWraper .bed-Reserves .i-rserve:active {
		background: #e6b610;
		box-shadow: 0 2px 6px rgba(250, 201, 23, .55);
	}
}

/* desktop keeps the tabs above the title only */
@media (min-width: 768px) {
	.nav-detail.nav-after-gallery {
		display: none;
	}
}

/* ==========================================================================
   11. Hotel booking page (/hotel_booking) — phone layout
   ========================================================================== */
@media (max-width: 767px) {
	/* stepper row stuck out 5px past the screen */
	.signup-step-container .row {
		margin-left: 0;
		margin-right: 0;
	}
	.signup-step-container .col-md-12 {
		padding-left: 0;
		padding-right: 0;
	}

	/* nested boxes ate ~150px of the 390px width: drop the stacked gutters */
	.hts-Section .col-sm-9,
	.hts-Section .col-sm-3 {
		padding-left: 0;
		padding-right: 0;
	}
	.hotelBookingStep1 [class*="col-sm-"],
	.hotelBookingStep2 [class*="col-sm-"] {
		padding-left: 0;
		padding-right: 0;
	}
	.hotelBookingStep1 .row,
	.hotelBookingStep2 .row {
		margin-left: 0;
		margin-right: 0;
	}
	.hotelBookingStep1 .card-body,
	.hotelBookingStep2 .card-body {
		padding: 12px;
	}
	.hotelBookingStep1 .gratDv,
	.hotelBookingStep1 .bedCh {
		padding: 8px;
	}

	/* hotel summary card: shorter photo, tighter chips */
	.hts-Section .mgh {
		height: auto;
	}
	.hts-Section .mgh img {
		height: 170px;
		width: 100%;
		object-fit: cover;
	}
	.hts-Section .mhContent h3 {
		font-size: 18px;
		margin: 10px 0 6px;
	}
	.hts-Section .studio-ul {
		gap: 4px;
		margin-bottom: 6px;
	}

	/* headings */
	.hotelBookingStep1 h3,
	.hotelBookingStep2 h3,
	.hotelBookingStep1 .entrstyle,
	.hotelBookingStep2 .entrstyle {
		font-size: 19px;
		margin-bottom: 10px;
	}
	.hotelBookingStep1 .askTiel {
		font-size: 17px;
		margin: 14px 0 8px;
	}

	/* the Next button is the main action: full width */
	.nex-Dv {
		text-align: center !important;
	}
	.hotelBookingStep2 .text-right {
		text-align: center !important;
	}
	.nex-Dv .timbtn,
	.hotelBookingStep2 .timbtn {
		display: block;
		width: 100%;
		padding: 13px 16px;
		font-size: 16px;
	}
}

/* ==========================================================================
   12. Thank-you page (/thankyou) — phone layout
   ========================================================================== */
@media (max-width: 767px) {
	.sCDiv {
		min-height: 0;
		padding-bottom: 24px;
	}
	.sCDiv .checkmarkSuccss {
		margin: 18px auto 10px;
	}
	.sCDiv .succesDv h3 {
		font-size: 19px;
		line-height: 1.35;
		margin-bottom: 16px;
	}

	/* the receipt: a card instead of a dashed frame with boxed cells */
	.tn-table {
		border: 1px solid #e6e8ec;
		border-radius: 12px;
		padding: 4px 14px 14px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
		overflow: hidden;
	}
	.tn-table .table.in-table,
	.tn-table .table.in-table tbody {
		display: block;
		width: 100%;
		border: 0;
		margin: 0;
	}
	/* each row becomes "label | value" pairs */
	.tn-table .table.in-table tr {
		display: grid;
		grid-template-columns: 36% 1fr;
		column-gap: 10px;
		align-items: baseline;
		row-gap: 4px;
		padding: 9px 0;
		border: 0;
		border-bottom: 1px solid #eef0f3;
	}
	.tn-table .table.in-table td {
		display: block;
		width: auto !important;
		border: 0;
		padding: 0;
		font-size: 14px;
		line-height: 1.4;
		word-break: break-word;
		grid-column: auto;
	}
	.tn-table .table.in-table td:nth-child(odd) {
		color: #6b7280;
	}
	.tn-table .table.in-table td:nth-child(odd) strong,
	.tn-table .table.in-table td:nth-child(odd) b {
		font-weight: 600;
		font-size: 13px;
	}
	.tn-table .table.in-table td[colspan] {
		grid-column: auto;
	}

	/* total: the one thing to remember */
	.tn-table .table.in-table tr:last-child,
	.tn-table .table.in-table tr.tn-paid {
		border: 0;
		border-radius: 8px;
		margin-top: 10px;
		padding: 12px;
	}
	.tn-table .table.in-table tr:last-child td,
	.tn-table .table.in-table tr.tn-paid td {
		color: #313131;
	}
	.tn-table .table.in-table tr.tn-trip {
		background: none;
	}
	.tn-table .table.in-table tr.tn-trip-head td {
		border-top: 0;
		padding-top: 4px;
	}

	/* "Goto your dashboard": sits under the total instead of floating on it */
	.tn-table .table.in-table a[href$="dashboard"] {
		position: static !important;
		display: inline-block;
		margin-top: 6px;
		font-size: 13px;
		font-weight: 600;
		text-decoration: underline;
		white-space: nowrap;
	}
}

/* ==========================================================================
   13. Last-minute deals + Promotions pages (both use the .lmd-* classes)
   ========================================================================== */

@media screen and (max-width: 767px) {

	/* hero: shorter, so the filters and the first deal show on the first screen */
	.lmd-hero {
		padding: 22px 0 70px;
	}
	.lmd-hero h1 {
		font-size: 26px;
		margin-bottom: 6px;
	}
	.lmd-hero p {
		font-size: 14px;
		margin-bottom: 16px;
	}
	.lmd-badge {
		font-size: 12px;
		padding: 6px 12px;
	}
	.lmd-filter a {
		padding: 9px 4px;
		font-size: 13px;
	}

	/* filter card: three tight rows. No stacking context, so the open list
	   (a sheet) can sit above the header and the floating buttons. */
	.lmd-filters {
		z-index: auto;
		margin-top: -44px;
		background: linear-gradient(180deg, transparent 44px, #f6f6f6 44px);
	}
	.lmd-fbox {
		padding: 12px;
	}
	.lmd-fbox form {
		gap: 10px;
	}
	.lmd-f {
		flex: 1 1 100%;
		min-width: 0;
	}
	.lmd-f label {
		margin-bottom: 4px;
	}
	.lmd-f .bootstrap-select > .dropdown-toggle {
		height: 42px;
	}
	.lmd-reset {
		height: 38px;
		line-height: 38px;
	}

	/* the filter lists are bottom sheets like every other picker */
	.lmd-f .bootstrap-select > .dropdown-menu {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		max-height: 72vh;
		overflow-y: auto;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		padding: 8px 8px calc(10px + env(safe-area-inset-bottom)) !important;
		z-index: 10060 !important;
		box-shadow: 0 -6px 22px rgba(0, 0, 0, .18), 0 0 0 100vmax rgba(0, 0, 0, .45) !important;
		animation: bu-sheet-up .18s ease-out;
	}
	.lmd-f .bootstrap-select > .dropdown-menu::before {
		content: "";
		position: sticky;
		top: 0;
		z-index: 1;
		display: block;
		width: 38px;
		height: 4px;
		margin: 2px auto 10px;
		border-radius: 2px;
		background: #dcdcdc;
	}
	.lmd-f .bootstrap-select > .dropdown-menu .dropdown-item {
		padding: 11px 12px;
	}

	/* list head: title above the count, not squeezed side by side */
	.lmd-list {
		padding: 20px 0 36px;
	}
	.lmd-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		margin-bottom: 14px;
	}
	.lmd-head h2 {
		font-size: 20px;
	}
	.lmd-head span {
		font-size: 13px;
	}

	/* deal card: photo on the left, details on the right (about 170px tall
	   instead of 480px) */
	.lmd-list .dealWrap {
		flex-direction: row;
		height: auto;
		margin-bottom: 12px;
	}
	.lmd-list .imgdeallast {
		flex: 0 0 112px;
		height: auto;
		min-height: 150px;
	}
	.lmd-list .imgdeallast a {
		display: block;
		height: 100%;
	}
	.lmd-list .imgdeallast span.lmd-off {
		top: 8px;
		left: 8px;
		font-size: 11px;
		padding: 3px 8px;
	}
	.lmd-list .detailDeal {
		min-width: 0;
		padding: 10px 12px;
	}
	.lmd-list .detailDeal h3 {
		margin-bottom: 6px;
		font-size: 15px;
	}
	.lmd-list .detailDeal h3 p {
		font-size: 12px;
		margin-top: 2px;
	}
	.lmd-room {
		padding: 5px 8px;
		margin-bottom: 6px;
	}
	.lmd-room div {
		display: none;
	}
	.lmd-dates {
		font-size: 11.5px;
		margin-bottom: 6px;
	}
	.lmd-price {
		padding-top: 8px;
	}
	.lmd-price strong {
		font-size: 19px;
	}
	.lmd-price .lmd-cta {
		padding: 8px 12px;
		font-size: 12.5px;
	}
	/* cards use the full width (stacked gutters took 70px) and names may wrap */
	.lmd-list .row {
		margin: 0;
	}
	.lmd-list .row > [class*="col-"] {
		padding: 0;
	}
	.lmd-list .detailDeal h3 a {
		display: block;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.lmd-promos li {
		margin-bottom: 4px;
	}
}

/* ==========================================================================
   14. Group-flight search results + flight detail / booking page
   ========================================================================== */

@media screen and (max-width: 767px) {

	/* results hero: "From" and "To" one under the other, so the names fit
	   ("KHI (Kara" / "JED (Jeddah" were cut off side by side) */
	.add_nam_1 .flightDiv .h-1 {
		display: flex;
		flex-direction: column;
	}
	.add_nam_1 .flightDiv .h-1 > .flight-form,
	.add_nam_1 .flightDiv .h-1 > .flight-to {
		width: 100%;
		float: none;
	}
	.add_nam_1 .flightDiv .h-1 > .flight-icon {
		display: none;
	}
	.add_nam_1 .flightDiv .flight-to input {
		text-align: left;
	}

	/* detail page: one padding level instead of four stacked ones */
	.flights-Section .card-body {
		padding: 14px 12px;
	}
	.flights-Section .whoS {
		padding: 16px 14px !important;
	}
	.whoS h3 {
		font-size: 17px;
	}
	.whoS .bulletPoints {
		flex-direction: column;
		gap: 6px;
	}
	.whoS .bulletPoints li {
		width: 100%;
		padding: 0 0 0 20px;
	}
	.sbmitDv {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}
	.sbmitDv .lft-sbm {
		flex: 1 1 100%;
		width: 100%;
	}
	.sbmitDv .rht-sbm {
		flex: 1 1 100%;
		width: 100%;
	}
	.sbmitDv .rht-sbm a,
	.sbmitDv .rht-sbm button {
		display: block;
		width: 100%;
		white-space: nowrap;
		text-align: center;
		padding: 13px 16px;
	}
}

/* ==========================================================================
   15. Group flights, second pass: clean cards (results) and an ordered trip
       card, form and summary (detail). Yellow theme kept.
   ========================================================================== */

@media screen and (max-width: 767px) {

	/* ---------- results ---------- */
	.flights-Section .col-sm-9 > h2 {
		font-size: 18px;
		margin: 6px 0 10px;
	}
	.gf-card {
		margin: 0 0 12px;
		border: 1px solid #e8eaee;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
		overflow: hidden;
	}
	.gf-card .airr-class-detail {
		padding: 4px 14px 0;
	}
	.gf-card .airr-class-detail > .row {
		margin: 0;
		padding: 12px 0;
	}
	.gf-card .airr-class-detail > .row + .row {
		border-top: 1px dashed #e3e5ea;
	}
	.gf-card .airr-class-detail > .row > [class*="col-"] {
		padding: 0;
	}
	/* the summary line (times, cities) repeats what the bar below shows */
	.gf-card .f2_re_heading h2,
	.gf-card .f2_re_heading > p {
		display: none;
	}
	.gf-card .f2_re_heading {
		margin: 0 0 8px;
	}
	.gf-card .h2_re_img {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
	}
	.gf-card .h2_re_img img {
		width: 24px;
		height: 24px;
		object-fit: contain;
	}
	.gf-card .h2_re_img b {
		font-size: 13px;
		font-weight: 700;
		color: #555;
	}
	.gf-card .ggWraps .date-fl {
		font-size: 19px;
		font-weight: 800;
		color: #313131;
		line-height: 1.15;
	}
	.gf-card .ggWraps .date-fl b {
		display: block;
		font-size: 12px;
		font-weight: 700;
		color: #757575;
		letter-spacing: .4px;
	}
	.gf-card .ggWraps .gg2left { text-align: left; }
	.gf-card .ggWraps .gg2right { text-align: right; }
	.gf-card .bar-outs .hoursd {
		font-size: 12px;
		font-weight: 700;
		color: #313131;
	}
	.gf-card .bar-outs .directs {
		font-size: 11.5px;
		font-weight: 700;
		color: #757575;
	}
	/* footer: price and the facts, on a soft yellow band */
	.gf-card .f2_re-price {
		margin-top: 0;
		border-top: 0;
		background: #fff9e0;
		padding: 10px 14px;
	}
	.gf-card .f2_re-price h5 {
		margin: 0;
		font-size: 20px;
		font-weight: 900;
		color: #313131;
		white-space: nowrap;
	}
	.gf-card .f2_re-price ul li {
		font-size: 12px;
	}

	/* ---------- detail ---------- */
	.flights-Section .loginFirstToContinue {
		margin: 8px 0 12px;
		padding: 12px 14px;
		border-radius: 10px;
		background: #fff9e0;
		border: 1px solid #f3e3a0;
	}
	.loginFirstToContinue p {
		font-size: 13.5px;
		line-height: 1.5;
		margin: 0 0 8px;
	}
	.loginFirstToContinue div a {
		display: inline-block;
		margin-right: 8px;
		padding: 7px 16px;
		border-radius: 8px;
		background: #FAC917;
		color: #313131;
		font-weight: 700;
		text-decoration: none;
	}
	.flights-Section .card {
		border-radius: 14px;
		overflow: hidden;
		margin-bottom: 14px !important;
	}
	.flights-Section .card-header {
		padding: 10px 14px;
	}
	.flights-Section .card-header h3 {
		font-size: 17px;
		margin: 0;
	}
	.flights-Section .card-header .panel-deal-row {
		padding: 0 !important;
	}

	/* each leg: label row, then departure - duration - arrival on one line */
	.flights-Section .card-body .row {
		margin-left: 0;
		margin-right: 0;
	}
	.flights-Section .card-body .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
	.dp-Wrapps {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
	}
	.dp-Wrapps .dp-name {
		font-weight: 800;
	}
	.dp-Wrapps img {
		width: 26px;
		height: 26px;
		object-fit: contain;
	}
	.deal-fdate {
		font-size: 13px;
		font-weight: 700;
		color: #757575;
		text-align: left;
		margin: 2px 0 0;
	}
	.v-dealContent {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		gap: 8px;
		text-align: left;
		margin-top: 6px;
	}
	.v-dealContent .v-deal-lft,
	.v-dealContent .v-deal-rht,
	.v-dealContent .v-deal-midd {
		width: auto;
		padding: 0;
		margin: 0;
		float: none;
	}
	.v-dealContent .v-deal-rht {
		text-align: right;
	}
	.v-dealContent .v-deal-midd {
		text-align: center;
		min-width: 58px;
		padding-top: 6px;
	}
	.v-dealContent strong {
		display: block;
		font-size: 17px;
		font-weight: 800;
		color: #313131;
	}
	.v-dealContent .v-infos p {
		font-size: 11.5px;
		line-height: 1.35;
		color: #757575;
		margin: 2px 0 0;
	}
	.v-dealContent .v-deal-plane img {
		width: 24px;
	}
	.v-dealContent .label-Stop {
		display: block;
		font-size: 11.5px;
		font-weight: 700;
	}
	.chckn-date {
		text-align: left;
		margin: 6px 0 12px;
		padding: 5px 10px;
		display: inline-block;
		border-radius: 20px;
		background: #fff9e0;
	}
	.chckn-date strong {
		font-size: 13px;
		font-weight: 800;
	}
	.flights-Section .card-body .font-13 {
		font-size: 12px;
		color: #757575;
	}

	/* form: two short fields share a row */
	.flights-Section .card-body .row.mb-3 > .col-xl-4.col-sm-6,
	.flights-Section .card-body .row > .col-xl-4.col-sm-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.flights-Section .form-control {
		height: 44px;
	}
	.flights-Section label {
		font-size: 12.5px;
		font-weight: 700;
		margin-bottom: 3px;
	}
	.total_prbox {
		padding: 12px 14px;
	}
	.total_prbox h5 {
		font-size: 16px;
	}
	.total_prbox .total_p {
		font-size: 24px;
	}
	.sbmitDv .btn-sdmb,
	.sbmitDv .rht-sbm a,
	.sbmitDv .rht-sbm button {
		background: #FAC917;
		color: #313131;
		border: 0;
		border-radius: 10px;
		font-weight: 800;
		font-size: 16px;
		box-shadow: 0 6px 16px rgba(250, 201, 23, .45);
	}

	/* price summary: compact rows */
	.perpson {
		padding: 14px !important;
		border-radius: 14px;
	}
	.perpson h3 {
		font-size: 15px;
	}
	.perpson small {
		font-size: 12.5px;
		line-height: 1.45;
	}
	.perpson .price_box_air_end {
		align-items: center;
		margin: 0 0 4px !important;
	}
	.perpson .price_box_air_end > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.perpson .air_sprice {
		font-size: 18px;
	}
	.perpson .air_sprice span {
		display: inline !important;
		line-height: 1 !important;
		font-size: 12px;
		margin-right: 4px;
	}
	.perpson .air_sprice div {
		display: inline;
	}
}

@media screen and (max-width: 767px) {
	/* detail trip: departure and arrival side by side, the stop info under */
	.v-dealContent {
		grid-template-columns: 1fr 1fr;
		gap: 4px 12px;
	}
	.v-dealContent .v-deal-midd {
		grid-row: 2;
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 6px 0 0;
		border-top: 1px dashed #e3e5ea;
		margin-top: 4px;
	}
	.v-dealContent .v-deal-midd .v-deal-plane img {
		width: 20px;
	}
	.v-dealContent .v-infos p {
		font-size: 12px;
	}
	.dp-Wrapps > *,
	.flights-Section .card-header .row > [class*="col-"] {
		margin: 0;
		padding: 0;
	}
	.dp-Wrapps .dp-d {
		display: flex;
	}
	.flights-Section .card-header .row {
		margin: 0;
	}
	.flights-Section .card-header select.form-control {
		margin-top: 6px;
	}
}

/* ==========================================================================
   16. The opened group-flight card ("details" panel under a result)
       flight.css paints it dark blue with dark text; on a phone it becomes
       a light panel: airports and stops per leg, facts, then a Select button.
   ========================================================================== */

@media screen and (max-width: 767px) {
	.gf-card .new-table-2 {
		background: #fff;
		border-top: 1px solid #f0e2a0;
		padding: 0;
	}
	.gf-card .new-table-2 .flight_box,
	.gf-card .new-table-2 .airr-class-box {
		background: transparent;
		padding: 0;
		margin: 0;
		border: 0;
		color: #313131;
	}
	.gf-card .new-table-2 .airr-class-detail {
		padding: 10px 14px 0;
	}
	.gf-card .new-table-2 .airr-class-detail .row {
		margin: 0;
	}
	.gf-card .new-table-2 .airr-class-detail .row > [class*="col-"] {
		padding: 0;
	}
	/* "Departure · Tue, 01 Dec 2026" */
	.gf-card .new-table-2 h5 {
		margin: 8px 0 6px !important;
		padding: 5px 10px;
		border-radius: 8px;
		background: #fff9e0;
		border-left: 3px solid #FAC917;
		color: #313131 !important;
		font-size: 13px;
		font-weight: 800;
	}
	.gf-card .new-table-2 .fligt_airports_n {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 0 0 5px;
		font-size: 13px;
		line-height: 1.35;
		color: #313131;
	}
	.gf-card .new-table-2 .flig_badge {
		flex: 0 0 34px;
		text-align: center;
		padding: 2px 0;
		border-radius: 5px;
		background: #313131;
		color: #FAC917;
		font-size: 10.5px;
		font-weight: 800;
		text-transform: uppercase;
	}
	/* the times bar is already on the card above */
	.gf-card .new-table-2 .gg-2 {
		display: none;
	}
	.gf-card .new-table-2 .f2_re-gg {
		margin-bottom: 4px;
	}

	.gf-card .new-table-2 .airr-class-price {
		display: block !important;
		margin: 6px 14px 14px;
		padding: 12px !important;
		border: 1px solid #f0e2a0;
		border-radius: 12px;
		background: #fffdf3;
		width: auto !important;
	}
	.gf-card .new-table-2 .airr-class-price h5 {
		margin: 0 0 8px !important;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: 24px;
		font-weight: 900;
	}
	.gf-card .new-table-2 .airr-class-price h5 span {
		font-size: 13px;
		font-weight: 700;
		color: #757575;
	}
	.gf-card .new-table-2 .airr-class-price table {
		width: 100%;
		margin: 0 0 10px;
		border: 0;
	}
	.gf-card .new-table-2 .airr-class-price td {
		display: inline-block;
		margin: 0 6px 6px 0;
		padding: 3px 10px;
		border: 0;
		border-radius: 14px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #ecdc9a;
		font-size: 12px;
		font-weight: 600;
		color: #313131;
		text-align: left;
	}
	.gf-card .new-table-2 .airr-class-price tr {
		display: inline;
	}
	.gf-card .new-table-2 .viewdel-btn {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.gf-card .new-table-2 .viewdelbtn {
		display: block;
		width: 100%;
		padding: 13px 16px;
		border: 0;
		border-radius: 10px;
		background: #FAC917;
		color: #313131;
		font-size: 16px;
		font-weight: 800;
		text-align: center;
		box-shadow: 0 6px 16px rgba(250, 201, 23, .45);
	}
}

@media screen and (max-width: 767px) {
	.gf-card .new-table-2 .airr-class-box,
	.gf-card .new-table-2 .airr-class-box.has_stops,
	.gf-card .new-table-2 .airr-class-box.has_3_stop,
	.gf-card .new-table-2 .airr-class-detail {
		background: #fff !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0;
	}
	.gf-card .new-table-2 .airr-class-price table,
	.gf-card .new-table-2 .airr-class-price tr,
	.gf-card .new-table-2 .airr-class-price td {
		border: 0 !important;
		background: transparent;
	}
	.gf-card .new-table-2 .airr-class-price td {
		background: #fff;
		border-radius: 14px !important;
		box-shadow: inset 0 0 0 1px #ecdc9a;
	}
}

@media screen and (max-width: 360px) {
	.gf-card .ggWraps {
		gap: 6px;
	}
	.gf-card .ggWraps .date-fl {
		font-size: 16px;
	}
	.gf-card .ggWraps .bar-outs {
		flex: 0 0 62px;
		width: 62px;
	}
	.gf-card .airr-class-detail {
		padding: 4px 10px 0;
	}
}

/* ==========================================================================
   17. Group-flight detail / booking page, third pass: one card style with the
       results (yellow accent top, cream section heads), proper inputs,
       a yellow total bar and a titled price summary.
   ========================================================================== */

@media screen and (max-width: 767px) {
	.flights-Section {
		background: #f6f6f6;
		padding-bottom: 20px;
	}
	.flights-Section .card {
		border: 1px solid #e8eaee;
		border-top: 4px solid #FAC917;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	}
	.flights-Section .card-header {
		background: #fff9e0;
		border-bottom: 1px solid #f3e3a0;
	}
	.flights-Section .card-header h3 {
		font-size: 16px;
		font-weight: 800;
	}
	.flights-Section .card-body {
		background: #fff;
	}

	/* trip: second leg separated from the first, airline row as a chip line */
	.flights-Section .card-body > .row.mb-3 + .row.mb-2 {
		margin-top: 14px !important;
		padding-top: 14px;
		border-top: 1px dashed #e3e5ea;
	}
	.dp-Wrapps .dp-name {
		padding: 2px 10px;
		border-radius: 12px;
		background: #313131;
		color: #FAC917;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .3px;
	}
	.dp-Wrapps .dp-flight {
		font-size: 13px;
		font-weight: 700;
		color: #555;
	}
	.dp-Wrapps .dp-d {
		order: 3;
		margin-left: auto;
	}
	.deal-fdate {
		font-size: 13px;
		color: #313131;
	}
	.v-dealContent strong {
		font-size: 20px;
	}

	/* inputs: the page sets height:28px !important */
	.flights-Section .form-control,
	.flights-Section .bootstrap-select.form-control > .dropdown-toggle {
		height: 44px !important;
		font-size: 15px !important;
		padding: 6px 12px !important;
		margin-bottom: 8px;
		border: 1px solid #dfe3e8;
		border-radius: 8px;
		background: #fff;
	}
	.flights-Section .form-control:focus {
		border-color: #FAC917;
		box-shadow: 0 0 0 3px rgba(250, 201, 23, .3);
	}
	.flights-Section .bootstrap-select.form-control {
		padding: 0 !important;
		height: auto !important;
		border: 0;
	}

	/* passengers: label and count on one line */
	.flights-Section .card-header .panel-deal-row > .row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.flights-Section .card-header .panel-deal-row > .row > [class*="col-"] {
		flex: 0 1 auto;
		width: auto;
		max-width: none;
	}
	.flights-Section .card-header select.form-control {
		width: 84px;
		margin: 0;
	}

	/* total bar */
	.total_prbox {
		background: #FAC917;
		border: 0;
	}
	.total_prbox h5,
	.total_prbox p,
	.total_prbox p b {
		color: #313131;
	}
	.total_prbox h5 {
		font-weight: 800;
	}
	.total_prbox p {
		line-height: 1.1;
	}
	.total_prbox p b {
		font-size: 14px;
	}
	.total_prbox .total_p {
		font-weight: 900;
	}

	/* reassurance + button */
	.sbmitDv {
		margin: 12px 0 14px;
	}
	.sbmitDv .lft-sbm small {
		display: block;
		text-align: center;
		font-size: 13px;
		font-weight: 700;
	}
	.sbmitDv .transmit-ul {
		display: flex;
		justify-content: center;
		gap: 14px;
		margin: 4px 0 0;
		padding: 0;
		list-style: none;
		font-size: 12px;
	}

	/* price summary gets a title and sits as a card of its own */
	.perpson {
		background: #fff;
		border: 1px solid #e8eaee;
		border-top: 4px solid #FAC917;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	}
	.perpson::before {
		content: "Booking summary";
		display: block;
		margin: 0 0 10px;
		font-size: 16px;
		font-weight: 800;
		color: #313131;
	}
	.perpson .price-detail h3 {
		font-size: 14px;
		color: #555;
	}
	.perpson hr {
		margin: 8px 0;
	}
	.perpson > .row.mt-3:last-child {
		margin: 6px 0 0 !important;
		padding: 10px;
		border-radius: 10px;
		background: #fff9e0;
	}
}

@media screen and (max-width: 767px) {
	.flights-Section .whoS {
		background: #fff;
		border: 1px solid #e8eaee;
		border-left: 4px solid #FAC917;
		border-radius: 14px;
	}
	.flights-Section .bootstrap-select.form-control {
		border: 0 !important;
		box-shadow: none !important;
		background: none !important;
		margin: 0 0 8px;
	}
	.flights-Section .bootstrap-select.form-control > .dropdown-toggle {
		margin: 0;
		width: 100%;
	}
	.flights-Section .card::before,
	.flights-Section .card::after {
		display: none !important;
	}
}