/* /tours listing furniture: the results heading, the filter panel (sidebar on desktop, slide-out
   drawer on phones) and the empty state. Loaded ONLY by
   resources/views/frontend/pages/tours/tours.blade.php.

   The look is the hotels listing's. Those rules live page-scoped in the <style> block of
   resources/views/frontend/pages/hotels.blade.php (markup: resources/views/frontend/includes/
   hotel_filters.blade.php), so they are ported here under tour-only class names rather than shared
   - the tours furniture classes (.filterBox, .starBox, .filter-uls, .ckContainer, .lst-top ...) are
   in the 700 KB custom.css and are used by the shuttle, car, flight, hotel-detail and dashboard
   pages as well:
       hotels .result-heading / .rh-*   ->   .tr-heading / .tr-*
       hotels .hf-*                     ->   .tf-*
       hotels .empty-state / .es-*      ->   .tf-empty / .tf-empty-* / .tf-btn
   Values are the hotels ones, unchanged. Nothing here matches tour-card markup. */

/* ---- results heading (tours_listing.blade.php, $html == 'count') ---- */
.tr-heading{ margin:0 0 20px; padding:0 0 18px; border-bottom:1px solid #e2e2e2; }
.tr-heading .tr-kicker{
	display:inline-flex; align-items:center; gap:7px; margin:0 0 9px;
	font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#10487b;
}
.tr-heading .tr-kicker i{ color:#eec120; font-size:13px; }
.tr-heading .tr-title{ margin:0 0 9px; font-size:27px; line-height:1.18; font-weight:800; color:#313131; }
.tr-heading .tr-title .tr-num{ color:#10487b; }
.tr-heading .tr-desc{ margin:0; max-width:780px; font-size:15px; line-height:1.65; color:#777; }
.tr-heading .tr-desc b{ color:#555; font-weight:700; }
@media (max-width:575px){
	.tr-heading .tr-title{ font-size:21px; }
	.tr-heading .tr-desc{ font-size:14px; }
}

/* ---- no results (tours_listing.blade.php, $html == 'listing') ---- */
.tf-empty{ padding:26px 24px; border:1px solid #e2e2e2; background:#fff; text-align:left; }
.tf-empty h3{ margin:0 0 8px; font-size:20px; font-weight:800; color:#313131; text-align:left; }
.tf-empty h3 i.fa{ margin-right:6px; font-size:20px; line-height:1; color:#eec120; }
.tf-empty p{ margin:0 0 16px; font-size:15px; line-height:1.6; color:#777; }
.tf-empty-links{ display:flex; flex-wrap:wrap; gap:10px; }
.tf-btn{ display:inline-block; padding:10px 20px; background:#eec120; font-weight:700; color:#313131; text-decoration:none; }
.tf-btn:hover{ color:#313131; text-decoration:none; }
.tf-btn-alt{ background:#555; color:#fff; }
.tf-btn-alt:hover{ color:#fff; }

/* ---- filter panel (tour_filter_box.blade.php + tour_filters.blade.php) ---- */
.tf{
	--tf-accent:#eec120; --tf-accent-d:#10487b; --tf-tint:#f6f6f6; --tf-ink:#313131;
	--tf-muted:#777; --tf-line:#e2e2e2; --tf-box:#b8b8b8;
	margin-top:18px; background:#fff; border:1px solid var(--tf-line); color:var(--tf-ink);
}
.tf-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; }
.tf-head h3{ flex:1 1 auto; margin:0; font-size:18px; font-weight:800; color:var(--tf-ink); }
.tf-clear{ display:none; padding:0; border:0; background:none; font-size:13px; font-weight:700; color:var(--tf-accent-d); text-decoration:underline; cursor:pointer; }
.tf.has-active .tf-clear{ display:inline-block; }
.tf-close{ display:none; width:34px; height:34px; border:0; background:none; font-size:18px; color:var(--tf-ink); cursor:pointer; }
.tf-chips{ display:none; flex-wrap:wrap; gap:6px; padding:0 18px 14px; }
.tf.has-active .tf-chips{ display:flex; }
.tf-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid #ddd; background:var(--tf-tint);
	font-size:12.5px; font-weight:600; line-height:1.3; color:var(--tf-ink); cursor:pointer; }
.tf-chip i{ font-size:11px; color:var(--tf-accent-d); }
.tf-chip:hover{ border-color:var(--tf-accent-d); }

.tf-group{ border-top:1px solid var(--tf-line); }
.tf-toggle{ display:flex; align-items:center; width:100%; padding:14px 18px; border:0; background:none; text-align:left;
	font-size:14.5px; font-weight:700; color:var(--tf-ink); cursor:pointer; }
.tf-toggle small{ margin-left:5px; font-size:12px; font-weight:500; color:var(--tf-muted); }
.tf-toggle i{ margin-left:auto; font-size:18px; color:var(--tf-muted); transition:transform .2s; }
.tf-group.is-closed .tf-toggle i{ transform:rotate(-90deg); }
.tf-group.is-closed .tf-body{ display:none; }
.tf-body{ padding:0 18px 16px; }

.tf-list{ margin:0; padding:0; list-style:none; }
.tf-list li{ margin:0; padding:0; list-style:none; }
.tf-list li.tf-hide{ display:none; }
/* an option no tour can satisfy: the count is 0 and the input is disabled (tour_filters.blade.php) */
.tf-list li.pkc-none{ opacity:.45; }
.tf-list li.pkc-none .tf-opt{ cursor:default; }
.tf-opt{ position:relative; display:flex; align-items:center; gap:10px; margin:0; padding:6px 0; font-size:14px; font-weight:400; color:var(--tf-ink); cursor:pointer; }
.tf-opt input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.tf-box{ position:relative; flex:0 0 18px; width:18px; height:18px; border:1.5px solid var(--tf-box); background:#fff; transition:background .15s, border-color .15s; }
.tf-box.tf-radio{ border-radius:50%; }
.tf-opt:hover .tf-box{ border-color:var(--tf-accent-d); }
.tf-opt input:checked + .tf-box{ border-color:var(--tf-accent); background:var(--tf-accent); }
.tf-opt input:checked + .tf-box:after{ content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
	border:solid var(--tf-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.tf-opt input:checked + .tf-radio{ background:#fff; }
.tf-opt input:checked + .tf-radio:after{ left:3px; top:3px; width:9px; height:9px; border:0; border-radius:50%; background:var(--tf-accent-d); transform:none; }
.tf-opt input:focus-visible + .tf-box{ outline:2px solid var(--tf-accent-d); outline-offset:2px; }
.tf-text{ flex:1 1 auto; line-height:1.35; }
.tf-opt input:checked ~ .tf-text{ font-weight:600; }
.tf-count{ flex:0 0 auto; min-width:28px; padding:1px 7px; background:#f3f3f3; font-size:12px; text-align:center; color:var(--tf-muted); }

.tf-find{ position:relative; margin:0 0 8px; }
.tf-find i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--tf-muted); }
.tf-find input{ width:100%; height:38px; padding:0 10px 0 32px; border:1px solid var(--tf-line); border-radius:0; background:#f9f9f9; font-size:13.5px; color:var(--tf-ink); }
.tf-find input:focus{ outline:none; border-color:var(--tf-accent-d); background:#fff; }
.tf-none{ display:none; margin:6px 0 0; font-size:13px; color:var(--tf-muted); }
.tf-empty-line{ margin:6px 0 0; font-size:13px; color:var(--tf-muted); }
.tf-more{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:0; border:0; background:none;
	font-size:13.5px; font-weight:700; color:var(--tf-accent-d); cursor:pointer; }
.tf-more:after{ content:'\f107'; font-family:FontAwesome; font-size:15px; }
.tf-more.is-open:after{ content:'\f106'; }
.tf-more:hover{ text-decoration:underline; }
.tf-foot, .tf-backdrop, .tf-open{ display:none; }

/* Phones: the panel becomes a slide-out drawer opened by the "Filters" button above the results */
@media (max-width:767px){
	.tr-top{ display:flex; flex-wrap:wrap; }
	.tr-top > *{ width:100%; }
	.tr-top .lst-right{ order:-1; display:block; margin-top:16px; }
	.tf-open{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 0 16px; padding:12px 16px; border:1px solid #555;
		background:#555; font-size:14px; font-weight:700; color:#fff; }
	.tf-open .tf-badge{ display:none; min-width:20px; padding:0 6px; background:#eec120; font-size:12px; line-height:20px; text-align:center; color:#313131; }
	.tf-open .tf-badge.on{ display:inline-block; }
	.tf{ position:fixed; z-index:100001; top:0; bottom:0; left:0; display:flex; flex-direction:column; width:min(92vw, 400px); margin:0;
		border:0; transform:translateX(-102%); transition:transform .25s ease; box-shadow:0 0 40px rgba(20,22,30,.25); }
	.tf.is-open{ transform:none; }
	.tf-head{ border-bottom:1px solid var(--tf-line); padding:10px 12px 10px 18px; }
	.tf-close{ display:inline-block; }
	.tf.has-active .tf-chips{ padding-top:12px; }
	.tf-scroll{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
	.tf-scroll .tf-group:first-child{ border-top:0; }
	.tf-foot{ display:block; padding:12px 18px; border-top:1px solid var(--tf-line); background:#fff; }
	.tf-apply{ width:100%; height:46px; border:0; background:#eec120; font-size:15px; font-weight:800; color:#313131; }
	.tf-backdrop{ position:fixed; z-index:100000; inset:0; background:rgba(20,22,30,.45); }
	body.tf-lock{ overflow:hidden; }
	body.tf-lock .tf-backdrop{ display:block; }
}

/* ---- tour result card: meta chips, departures row, description clamp (tours_listing.blade.php) ----
   The card keeps the shared .lst-D shell and the hotel card's proportions. Only these three pieces are
   ours: the shared .tour_new_dm / .ss-box rules in custom.css also dress the shuttle, flights, cars and
   hotel-booking pages, so the card carries tl-* names instead and nothing here reaches another view. */
/* custom.css floats .nightDs right under 768px, which left the departures row with zero width beside
   the float and the chips overlapping the title; the tours card does not need the float. */
.tl-head{ float:none; width:100%; }
.tl-head .nightD-left{ max-width:100%; }

.tl-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.tl-meta p{
	display:block; max-width:100%; margin:0; padding:3px 10px; background:#f2f5f8; border-radius:4px;
	font-size:13px; line-height:1.5; color:#313131;
	/* a chip stays on one line; a long "Starting from a, b, c" is cut with an ellipsis rather than
	   broken mid-word as the navy pills were (3 / Days), and the row wraps instead */
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-meta p i.fa{ margin-right:6px; font-size:12px; color:#10487b; }

.tl-dep{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:11px 0 0; font-size:13px; color:#555; }
.tl-dep i.fa{ font-size:13px; color:#10487b; }
.tl-dep b{ font-weight:700; color:#313131; }
.tl-dep__d{ padding:2px 9px; background:#fff9e3; border-radius:4px; font-weight:700; color:#313131; }
.tl-dep__d--none{ background:#f3f3f3; font-weight:400; color:#777; }

/* three lines, then an ellipsis. The shared rule is four lines at a fixed 91px; the height stays fixed
   so the price row of every card in the list still lines up. */
.lstTbs .tour_three_discription{ -webkit-line-clamp:3; line-height:23px; height:69px; }

@media (max-width:767px){
	.tl-meta{ gap:5px; }
	.tl-meta p{ font-size:12.5px; }
	.tl-dep{ font-size:12.5px; }
}