/* ============================================================================
   Zanzibar Travel Hub — project overrides
   ----------------------------------------------------------------------------
   Loaded AFTER main.css. Everything here is ours; main.css stays as Colorlib
   shipped it so the template can be re-diffed against the original at any
   time. Put project CSS here, never in main.css.
   ========================================================================= */

/* Hotel cards.
   The template's cards carried names like "Hilton Star Hotel" — three short
   words. Real inventory has "Zanzibar White Sand Luxury Villas & Spa —
   Relais & Chateaux", which pushed the star rating onto its own line and
   left the two columns of every card misaligned. Let the name wrap and hold
   the stars on one line beside it. */
.single-destinations .details h4 {
	align-items: flex-start;
	gap: 12px;
}

.single-destinations .details h4 > span {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
}

.single-destinations .details h4 .star {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-top: 3px;
}

/* Equal-height cards, with the spacing between rows intact.
   ---------------------------------------------------------------------------
   The theme spaces these with `.destinations-area .single-destinations
   { margin-top: 30px }` — margin on the CARD. The first version of this block
   also gave the card `height: 100%`, so it filled its column and then added
   30px on top, overflowing by exactly the gap it was supposed to leave. Every
   grid measured 0px between rows: the next row's photo began on the pixel the
   previous card ended.

   The column becomes the flex container instead. Columns in a Bootstrap row
   already stretch to equal height, so a card at width:100% fills its column
   without being told a height, and its own margin-bottom is free to space the
   rows.

   `.menu-content` is excluded deliberately: it is the theme's section-heading
   column, and making it a flex container turns its `.title.text-center` child
   into a flex item that shrinks to its own width — the centred heading then
   sits left of centre. */
/* Scoped to `.card-grid`, the rows that actually hold cards.
   This used to match every row inside .destinations-area, which turned the
   "after" note's column into a flex container — its paragraph and button
   became flex ITEMS and sat side by side, overlapping. */
.card-grid > [class*="col-"]:not(.menu-content) {
	display: flex;
}

/* Keyed to `.card-grid`, the same marker as the rule above, rather than to
   `.destinations-area`. Every catalogue card sits inside both, but the
   homepage's popular row sits in `.popular-destination-area` — so when it
   started using this component its cards became flex items with no width and
   no row spacing, while the listings were fine. The pair of rules belongs on
   the same selector: one makes the column a flex container, this fills it. */
.card-grid .single-destinations {
	width: 100%;
	margin-top: 0;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
}

/* Push the price row to the bottom so it lines up across a row of cards
   whose descriptions run to different lengths. */
.single-destinations .details {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Whatever sits at the foot of the card gets the free space above it, so the
   bottoms line up across a row however different the middles are.
   `.package-list` was the last element when this was written; cards now end in
   a price-and-button row, and hotel cards in a check-in line before it. Only
   ONE element may claim the space — two `margin-top:auto` siblings split it
   between them and pull the card apart. */
.single-destinations .details .package-list:last-child,
.single-destinations .details .card-foot,
.single-destinations .details .hotel-times {
	margin-top: auto;
}

.single-destinations .details .hotel-times ~ .card-foot {
	margin-top: 0;
}

/* Two lines reserved for the name.
   Hotel names run from "Kisiwa House" to "Zanzibar White Sand Luxury Villas &
   Spa - Relais & Chateaux". A one-line name used to pull everything below it
   up by a whole line, so the distances, the chips and the price on adjacent
   cards all sat at different heights. This is min-height, not a clamp: a name
   that genuinely needs three lines still gets them rather than being cut. */
.single-destinations .details h4 {
	line-height: 1.35;
	min-height: 2.7em;
}

/* Pagination — Bootstrap's default blue is not in this palette. */
.pagination .page-link {
	color: #222;
	border-color: #e6e6ea;
}

.pagination .page-item.active .page-link {
	background-color: var(--zth-orange, #f68712);
	border-color: var(--zth-orange, #f68712);
	color: #fff;
}

.pagination .page-link:hover {
	background-color: #fdf1e5;
	border-color: #e6e6ea;
	color: var(--zth-orange, #f68712);
}

/* Bootstrap fills the disabled arrow with a grey block, which reads as a
   pressed button rather than an unavailable one. Muted glyph on the same
   white ground as the rest of the group says "nothing here" more quietly. */
.pagination .page-item.disabled .page-link {
	background-color: #fff;
	border-color: #e6e6ea;
	color: #b8bcc6;
}

.pagination .page-link:focus {
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .25);
}

/* Icon tile.
   Stands in for the photo on records that have no image column — transfer
   routes and ferry crossings. Sized to the same 250px the theme's .thumb
   images occupy so a mixed grid keeps its rhythm. */
.single-destinations .thumb.icon-thumb {
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1c2230 0%, #2d3547 100%);
}

.single-destinations .thumb.icon-thumb i {
	font-size: 68px;
	color: var(--zth-orange, #f68712);
	line-height: 1;
}

/* Hero clearance under the fixed header.
   ---------------------------------------------------------------------------
   main.js:11 sets `.fullscreen` to exactly window.height, and the banner
   centres its content in that box. But #header is position:fixed and 105px
   tall, so on a short window the centred search widget (480px) slides under
   the nav — at a 598px viewport its top computed to 59px, 46px behind the
   header. The template does the same thing; it ships a `fitscreen` helper
   (window height minus header) for exactly this case and then does not use it
   on the banner.

   padding-top reserves the header's height inside the existing box, so the
   hero does not grow on normal screens. min-height stops the box collapsing
   far enough to squash the widget on short ones — below that the page simply
   scrolls, which is the right trade against overlapping the navigation.

   Kept above 767px only: below that the theme already sets height:auto and
   the columns stack. */
@media (min-width: 768px) {
	.banner-area .fullscreen {
		padding-top: 105px;
		min-height: 740px;
	}
}

/* Hotel card.
   ---------------------------------------------------------------------------
   Replaces the template's Yes/No comparison grid. A spec sheet suits a
   comparison page; a listing card should answer "how far is the beach" and
   "what does it have", and never advertise what a property lacks. */
.hotel-card .hotel-location {
	color: #777;
	font-size: 14px;
	margin: 0 0 14px;
}

.hotel-card .hotel-location i {
	color: var(--zth-orange, #f68712);
	margin-right: 4px;
}

.hotel-card .hotel-distances {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	border-top: 1px solid #eee;
}

.hotel-card .hotel-distances li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f4f6;
	font-size: 13px;
	line-height: 1.45;
}

.hotel-card .hotel-distances i {
	color: var(--zth-orange, #f68712);
	font-size: 14px;
	flex: 0 0 16px;
}

.hotel-card .hotel-distances .d-label {
	color: #777;
	flex: 0 0 74px;
}

.hotel-card .hotel-distances .d-value {
	color: #222;
	font-weight: 500;
	flex: 1 1 auto;
	min-width: 0;
}

.hotel-card .hotel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.hotel-card .chip {
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border: 1px solid #e6e6ea;
	border-radius: 100px;
	color: #555;
	white-space: nowrap;
}

.hotel-card .chip-more {
	border-style: dashed;
	color: #999;
}

.hotel-card .hotel-foot {
	margin-top: auto;
	border-top: 1px solid #eee;
	padding-top: 14px;
}

.hotel-card .hotel-times {
	font-size: 12px;
	color: #999;
	margin-bottom: 10px;
}

.hotel-card .hotel-times i {
	color: var(--zth-orange, #f68712);
}

/* Image guards.
   ---------------------------------------------------------------------------
   Neither Bootstrap's reboot nor the theme constrains images, so an upload
   renders at its natural size and takes the layout with it. A 2000×2000px
   logo uploaded through Settings did exactly that: it spanned the hero and
   pushed the search widget off screen.

   Two rules, both defensive rather than decorative:

     1. Every image is capped to its container and keeps its aspect ratio.
        This is the standard responsive-image guard and it costs nothing on
        images that already fit.
     2. Slots with a fixed job — the logo, card thumbnails, admin previews —
        get an explicit ceiling, because "fits the container" is not a size
        when the container is a whole hero.

   Operators upload whatever their designer sent them. The site should absorb
   that, not break on it. */
img,
svg {
	max-width: 100%;
	height: auto;
}

/* Header logo.
   The slot is 16:9 to match the upload preset. Height binds first — the
   header is 105px tall, so 56px leaves proper breathing room — and the width
   cap stops an unusually wide wordmark crowding the nav. */
#logo img,
#mobile-nav .logo img {
	max-height: 56px;
	max-width: 200px;
	width: auto;
	object-fit: contain;
}

/* Card thumbnails keep the theme's 250px band whatever is uploaded, so a
   portrait photo cannot make one card three times the height of its row. */
.single-destinations .thumb img,
.single-destination .thumb img,
.single-recent-blog-post .thumb img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}

/* Anything inside a card body that is not a thumbnail. */
.single-destinations .details img {
	max-height: 220px;
	width: auto;
}


/* ---------------------------------------------------------------------------
   Sticky header

   The theme fades to rgba(34,34,34,.9) on scroll, which was built for a dark
   photographic hero. The logo's wordmark is blue and orange, so on a dark bar
   it has to carry its own contrast; on white it reads as intended.

   Going white means inverting everything that assumed a dark bar: the nav
   links are #fff in main.css and would vanish. The header also floats over the
   hero, so it needs a shadow to separate itself from the content sliding under
   it — the dark version got that separation from the tint alone.
   --------------------------------------------------------------------------- */
#header.header-scrolled {
	background-color: #fff;
	box-shadow: 0 2px 16px rgba(28, 34, 48, .10);
}

#header.header-scrolled .nav-menu a {
	color: #1c2230;
}

#header.header-scrolled .nav-menu li:hover > a,
#header.header-scrolled .nav-menu li.menu-active > a {
	color: var(--zth-orange, #f68712);
}

/* The dropdown panel is already white, so its links must not be inverted
   twice — restate them against their own background. */
#header.header-scrolled .nav-menu ul li a {
	color: #333;
}

#header.header-scrolled .nav-menu ul li:hover > a {
	color: var(--zth-orange, #f68712);
}

#header.header-scrolled #mobile-nav-toggle i {
	color: #1c2230;
}

/* ---------------------------------------------------------------------------
   Accent text

   One orange everywhere, on dark grounds and light alike. On the dark header
   and the near-black footer it measures 6.36:1 and 7.90:1; on the white
   scrolled header it measures 2.50:1, under the 4.5:1 AA floor. That is a
   deliberate brand decision — the nav should be the logo's orange, not a
   darker cousin of it.
   --------------------------------------------------------------------------- */
.nav-menu li:hover > a,
.nav-menu li.menu-active > a,
.footer-area .footer-nav li a:hover,
.footer-social a:hover i,
.single-footer-widget ul li a:hover {
	color: var(--zth-orange, #f68712);
}


/* ---------------------------------------------------------------------------
   Buttons

   The fill is the logo orange, with white on top. main.css set #222 on the
   price button and #fff on the primary button, so the two were inconsistent
   before this; they match now.

   Noted for the record: white on #F68712 measures 2.50:1, under the 4.5:1 WCAG
   AA floor. This is a deliberate brand choice. Coloured TEXT on a white ground
   still uses the deeper #B15E07, where a thin glyph with no fill behind it has
   nothing else to carry it.
   --------------------------------------------------------------------------- */
.primary-btn,
.primary-btn span,
.single-destination .desc .price-btn,
.destinations-area .single-destinations .details .price-btn,
.single-carusel .price-detials .price-btn,
.single-carusel .price-detials .price-btn span {
	background: var(--zth-orange, #f68712);
	color: #fff;
}

.primary-btn:hover,
.primary-btn:hover span,
.single-destination .desc .price-btn:hover,
.destinations-area .single-destinations .details .price-btn:hover {
	background: var(--zth-orange-hover, #dd7a0e);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Footer

   The template's four columns were a bio, a split link list, a newsletter form
   and an Instagram strip. Two of those were replaced — see footer.blade.php —
   so the remaining columns need to sit on a common baseline rather than
   inheriting spacing meant for a photo grid.
   --------------------------------------------------------------------------- */
.footer-area .single-footer-widget h6 {
	color: #fff;
	margin-bottom: 20px;
}

.footer-area .single-footer-widget ul li {
	margin-bottom: 9px;
}

.footer-area .single-footer-widget ul li a {
	color: #b7bccb;
	transition: color .2s;
}

/* The address is the one list item with no link, so it inherited the bare
   <li> colour and rendered brighter than everything around it. */
.footer-area .footer-contact li {
	color: #b7bccb;
}

.footer-area .footer-whatsapp {
	line-height: 40px;
	padding: 0 20px;
	font-size: 13px;
	white-space: nowrap;
}

.footer-area .footer-whatsapp i {
	margin-right: 6px;
}

/* section-gap is 120px top and bottom, which is right between two content
   sections but leaves the footer sitting on a band of nothing. */
.footer-area.section-gap {
	padding-bottom: 45px;
}

/* ---------------------------------------------------------------------------
   Detail pages

   Travelista ships no detail page, so these are built from its own vocabulary
   — the same type scale, the same 30px rhythm, the same card treatment — rather
   than a new look bolted onto the side.
   --------------------------------------------------------------------------- */
.detail-hero img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 6px;
}

.detail-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 10px;
}

.detail-gallery figure { margin: 0; }

.detail-gallery img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
}

.detail-body { margin-top: 28px; }

.detail-body h2 {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 12px;
}

.detail-body h2 .badge-pill { vertical-align: middle; margin-left: 8px; }

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	color: #777;
	font-size: 14px;
	margin-bottom: 16px;
}

.detail-meta i { color: var(--zth-orange, #f68712); margin-right: 5px; }
.detail-stars i { color: var(--zth-orange, #f68712); font-size: 13px; margin-right: 1px; }

.detail-type {
	background: #f4f5f7;
	border-radius: 3px;
	padding: 2px 9px;
	font-size: 12px;
	text-transform: capitalize;
}

.detail-block { margin-top: 34px; }

.detail-block h4 {
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 14px;
}

.detail-distances,
.detail-amenities,
.detail-policies { list-style: none; padding: 0; margin: 0; }

.detail-amenities {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 18px;
}

.detail-amenities li,
.detail-distances li { font-size: 14px; color: #555; }

.detail-amenities i { color: var(--zth-orange, #f68712); margin-right: 7px; font-size: 12px; }

.detail-distances li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid #f1f1f4;
}

.detail-distances li i { color: var(--zth-orange, #f68712); }
.detail-distances li span { flex: 1 1 auto; }
.detail-distances li strong { color: #222; }

.detail-policies li {
	padding: 7px 0;
	border-bottom: 1px solid #f1f1f4;
	font-size: 14px;
	color: #555;
}

.detail-policies li span {
	display: inline-block;
	min-width: 110px;
	color: #222;
	font-weight: 500;
}

.detail-rooms { font-size: 14px; }
.detail-rooms th { font-weight: 600; font-size: 13px; color: #777; }
.detail-room-line { color: #777; }

.detail-note {
	font-size: 13px;
	color: #999;
	margin-top: 10px;
}

/* The aside follows the page down on desktop — a long room table would
   otherwise leave the enquiry button far above the fold. */
.detail-aside {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 22px;
	position: sticky;
	top: 120px;
}

.detail-price { margin-bottom: 16px; }
.detail-price span { display: block; font-size: 13px; color: #999; }
.detail-price strong { display: block; font-size: 30px; font-weight: 600; line-height: 1.2; }
.detail-price small { color: #999; font-size: 13px; }

.detail-cta { display: block; width: 100%; text-align: center; }
.detail-cta i { margin-right: 6px; }

.detail-aside-note { font-size: 13px; color: #888; margin: 14px 0 0; }

.detail-rating {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #f1f1f4;
	font-size: 14px;
	color: #555;
}

.detail-rating strong { font-size: 18px; color: #222; }
.detail-rating span { display: block; font-size: 12px; color: #999; }

.detail-map { display: inline-block; margin-top: 14px; font-size: 14px; }
.detail-map i { margin-right: 6px; }

.detail-similar { margin-top: 70px; }
.detail-similar > .col-12 h4 { font-size: 21px; font-weight: 600; margin-bottom: 22px; }

/* Card titles are links now that detail pages exist; they must not turn blue. */
.single-destinations .details h4 a { color: inherit; transition: color .2s; }
.single-destinations .details h4 a:hover { color: var(--zth-orange, #f68712); }

@media (max-width: 991px) {
	.detail-aside { position: static; margin-top: 30px; }
	.detail-amenities { grid-template-columns: repeat(2, 1fr); }
	.detail-hero img { height: 300px; }
}

@media (max-width: 575px) {
	.detail-gallery { grid-template-columns: repeat(3, 1fr); }
	.detail-amenities { grid-template-columns: 1fr; }
	.detail-hero img { height: 220px; }
	.detail-body h2 { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Clickable cards

   The whole card is the target, via a stretched-link on the title. That needs
   a positioned ancestor, and .single-destinations has none of its own.

   The price used to BE the button — a card's only call to action read "$25",
   which says what it costs but not what happens if you press it. The price is
   now plain text and the button says what it does.
   --------------------------------------------------------------------------- */
.single-destinations.is-linked { position: relative; }

.single-destinations.is-linked:hover {
	box-shadow: 0 10px 30px rgba(60, 64, 143, .12);
}

/* The overlay sits above the card but must not cover the header's dropdown. */
.single-destinations .stretched-link::after { z-index: 1; }

.card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #f1f1f4;
}

.card-price span {
	display: block;
	font-size: 12px;
	color: #999;
	line-height: 1.3;
}

.card-price strong {
	font-size: 19px;
	font-weight: 600;
	color: #222;
}

.card-cta {
	background: var(--zth-orange, #f68712);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 18px;
	border-radius: 3px;
	white-space: nowrap;
	transition: background .2s;
}

.single-destinations.is-linked:hover .card-cta {
	background: var(--zth-orange-hover, #dd7a0e);
}

/* The icon tile stands in for a missing photograph. Sized to the same 250px
   the theme's .thumb images occupy so a mixed grid keeps its rhythm. */
.single-destinations .thumb.icon-thumb i { color: var(--zth-orange, #f68712); }

/* The hotel card now uses the shared .card-foot; only the check-in line above
   it is hotel-specific. */
.hotel-card .hotel-times { margin-bottom: 4px; }

/* Detail hero with no photograph to show. */
.detail-hero-icon {
	height: 420px;
	border-radius: 6px;
	background: #1c2230;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail-hero-icon i { font-size: 92px; color: var(--zth-orange, #f68712); }

@media (max-width: 991px) { .detail-hero-icon { height: 300px; } }
@media (max-width: 575px) { .detail-hero-icon { height: 220px; } }

/* ---------------------------------------------------------------------------
   The card is a component, so it has to look the same everywhere

   Travelista scopes every card rule under `.destinations-area` — padding,
   white ground, list dividers, hover. That holds on the listing pages, which
   sit inside that section, but the "similar" rows on the detail pages do not,
   so the same component rendered there had no padding at all and its text ran
   to the edge of the card.

   These restate the theme's own values, unscoped, so the component carries its
   own appearance wherever it is dropped. Listing pages are unaffected: the
   values are identical and the theme's more specific selectors still win.
   --------------------------------------------------------------------------- */
.single-destinations {
	transition: all .3s ease 0s;
}

.single-destinations .thumb { overflow: hidden; }
.single-destinations .thumb img { width: 100%; transition: all .3s ease 0s; }

.single-destinations .details {
	background: #fff;
	padding: 20px;
}

.single-destinations .details h4 { margin-bottom: 10px; }

.single-destinations .details .package-list { margin-top: 20px; }

.single-destinations .details .package-list li {
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.single-destinations .details .package-list li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

/* The detail pages' similar rows need the same 30px gutter the listings get
   from the theme, or the cards butt against the heading above them. */
.detail-similar .single-destinations { margin-top: 30px; }

/* ---------------------------------------------------------------------------
   Pagination row

   The summary and the page links are the two halves of one nav; they need the
   full width between them, and a gap so they never touch even when the summary
   runs long. Below sm Laravel swaps in its own prev/next pair, so the stacking
   rule only has to cover the tablet band.
   --------------------------------------------------------------------------- */
.pager-row nav { width: 100%; gap: 20px; }
.pager-row .pagination { margin-bottom: 0; }
.pager-row p { margin-bottom: 0; }

@media (max-width: 767px) {
	.pager-row nav > div:last-child {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}

/* Package detail extras. */
.detail-body .lead-line { font-size: 16px; color: #555; margin-bottom: 12px; }
.detail-was { display: block; color: #999; text-decoration: line-through; font-size: 14px; }

.detail-inclusions { list-style: none; padding: 0; margin: 0; }

.detail-inclusions li {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f1f4;
	font-size: 14px;
	color: #555;
}

.detail-inclusions li i { color: var(--zth-orange, #f68712); font-size: 12px; }
.detail-inclusions li span { flex: 1 1 auto; }
.detail-inclusions li em { font-style: normal; color: #999; font-size: 13px; white-space: nowrap; }

.detail-itinerary { padding-left: 18px; margin: 0; }
.detail-itinerary li { margin-bottom: 14px; font-size: 14px; color: #555; }
.detail-itinerary li strong { display: block; color: #222; margin-bottom: 4px; }
.detail-itinerary li p { margin: 0; }

/* ---------------------------------------------------------------------------
   Badge pill

   The markup has used .badge-pill since the cards were built — TourPopularity's
   earned "Most booked", a package's badge_text — but nothing ever styled it, so
   it rendered as loose text beside the title and inherited the heading's size.
   --------------------------------------------------------------------------- */
.badge-pill {
	display: inline-block;
	background: #fdf1e5;
	color: var(--zth-orange-deep, #b15e07);
	border: 1px solid #f7d9bb;
	border-radius: 100px;
	padding: 3px 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

.single-destinations .details h4 .badge-pill { align-self: flex-start; margin-top: 2px; }
.detail-body h2 .badge-pill { margin-left: 10px; }

/* Service tiles — the whole tile is the link, same as the product cards. */
.single-other-issue.is-linked { position: relative; }
.single-other-issue.is-linked .thumb { overflow: hidden; }
.single-other-issue.is-linked .thumb img { transition: transform .4s ease; }
.single-other-issue.is-linked:hover .thumb img { transform: scale(1.05); }
.single-other-issue.is-linked h4 a { color: inherit; transition: color .2s; }
.single-other-issue.is-linked:hover h4 a { color: var(--zth-orange, #f68712); }

/* Ferry sailings — short repeated values read better as chips than as a list. */
.detail-times {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.detail-times li {
	background: #f9f9ff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: 14px;
	color: #222;
	font-weight: 500;
}

.detail-times li i { color: var(--zth-orange, #f68712); margin-right: 6px; font-size: 12px; }

/* ---------------------------------------------------------------------------
   Error pages
   Laravel's defaults look nothing like the site, and someone who hits a dead
   end should still be able to get where they were going.
   --------------------------------------------------------------------------- */
.error-page { padding-top: 180px; }

.error-page .error-code {
	display: block;
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	color: var(--zth-orange, #f68712);
	margin-bottom: 10px;
}

.error-page h1 { font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.error-page p { color: #777; margin-bottom: 26px; }
.error-actions { margin-bottom: 34px; }

.error-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
}

.error-links a { color: #777; font-size: 14px; transition: color .2s; }
.error-links a:hover { color: var(--zth-orange, #f68712); }

@media (max-width: 575px) {
	.error-page { padding-top: 140px; }
	.error-page .error-code { font-size: 62px; }
}

/* ---------------------------------------------------------------------------
   Filter pills
   Category filter on the packages listing. Driven by the data, so the row is
   as long as the catalogue needs.
   --------------------------------------------------------------------------- */
/* Guest country sits beside the name in a testimonial. */
.single-testimonial .review-country {
	font-weight: 400;
	font-size: 13px;
	color: #999;
	margin-left: 6px;
}

/* Contact form feedback. */
.contact-sent,
.contact-errors {
	text-align: left;
	border-radius: 5px;
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 14px;
}

.contact-sent { background: #eef8f0; border: 1px solid #cfe9d6; color: #226c37; }
.contact-errors { background: #fdeeee; border: 1px solid #f4d2d2; color: #a02b2b; }
.contact-errors ul { margin: 0; padding-left: 18px; }
.contact-form select.common-input { height: 46px; }

/* The theme credit is a licence obligation, not a design element — present
   and legible, but not competing with the site's own copyright line. */
.footer-text .footer-credit {
	display: inline-block;
	margin-left: 10px;
	font-size: 12px;
	opacity: .55;
}

/* ---------------------------------------------------------------------------
   Package builder
   Numbered steps rather than one long form: five short decisions read as less
   work than twelve fields, even though they are the same fields.
   --------------------------------------------------------------------------- */
.builder-step {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 24px 26px;
	margin-bottom: 22px;
}

.builder-step h4 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.builder-step h4 span {
	background: var(--zth-orange, #f68712);
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex: 0 0 28px;
}

.builder-hint { font-size: 13px; color: #999; margin: 10px 0 0; }

.builder-checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.builder-check {
	display: flex;
	align-items: baseline;
	gap: 9px;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.builder-check:hover { border-color: var(--zth-orange, #f68712); background: #fffaf4; }
.builder-check span { flex: 1 1 auto; }
.builder-check em { font-style: normal; font-size: 12px; color: #999; }

.builder-submit { line-height: 48px; padding: 0 34px; }

.builder-done {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 40px;
	text-align: center;
}

.builder-done h2 { font-size: 26px; font-weight: 600; margin-bottom: 12px; }
.builder-done p { color: #777; }
.builder-done .primary-btn { margin: 14px 0 4px; }

@media (max-width: 575px) {
	.builder-checks { grid-template-columns: 1fr; }
	.builder-step { padding: 20px 18px; }
}

/* ---------------------------------------------------------------------------
   Package builder — wizard

   Everything here is scoped to .is-wizard, which the script adds. Without the
   script the steps stay stacked and none of this applies, so a no-JS visitor
   gets a plain long form rather than a broken one.
   --------------------------------------------------------------------------- */
.builder-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 0 auto 26px;
	max-width: 900px;
}

.builder-nav li {
	counter-increment: step;
	flex: 1 1 0;
	min-width: 90px;
	font-size: 12px;
	color: #999;
	padding-top: 26px;
	position: relative;
	text-align: center;
	cursor: pointer;
	transition: color .2s;
}

/* The rail. */
.builder-nav li::before {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	right: 0;
	height: 3px;
	background: #ececf1;
	border-radius: 3px;
}

.builder-nav li::after {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #ececf1;
	color: #999;
	font-size: 11px;
	font-weight: 600;
	line-height: 21px;
}

.builder-nav li.is-done::before,
.builder-nav li.is-on::before { background: var(--zth-orange, #f68712); }

.builder-nav li.is-done::after,
.builder-nav li.is-on::after {
	background: var(--zth-orange, #f68712);
	color: #fff;
}

.builder-nav li.is-on { color: #222; font-weight: 600; }
.builder-nav li.is-done { color: #555; }

.is-wizard .builder-step { animation: builder-in .25s ease; }

@keyframes builder-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.builder-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.btn-step { line-height: 46px; padding: 0 30px; }

/* The quiet counterpart to .primary-btn. The wizard's Back button and the
   "build another" links are the same control wearing the same clothes, so the
   look lives in one place rather than two. */
.secondary-btn,
.btn-back {
	display: inline-block;
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 3px;
	color: #555;
	font-size: 13px;
	font-weight: 500;
	line-height: 42px;
	padding: 0 26px;
	transition: border-color .2s, color .2s, background .2s;
}

.secondary-btn:hover,
.btn-back:hover {
	border-color: var(--zth-orange, #f68712);
	color: var(--zth-orange, #f68712);
	background: #fffaf4;
}

.builder-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.is-wizard .builder-step { animation: none; }
}

@media (max-width: 575px) {
	.builder-nav li { font-size: 0; min-width: 44px; padding-top: 24px; }
	.builder-review span { flex: none; }
}

/* ---------------------------------------------------------------------------
   Card pickers (package builder)

   Real radios and checkboxes under the cards, so the step works without the
   script — the filter bar simply is not built. The native input is hidden
   rather than removed, which keeps keyboard focus and form submission intact.
   --------------------------------------------------------------------------- */
/* One control row: search, then the facets, then sort. Selects rather than
   pills — eleven locations do not fit in a pill row, and a pill cannot say
   "4 stars and up", which is the question people are actually asking. */
.picker-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 14px;
}

.picker-search,
.picker-select {
	height: 38px;
	border: 1px solid #e6e6ea;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	color: #555;
	transition: border-color .2s, box-shadow .2s;
}

.picker-search {
	min-width: 0;
	padding: 0 14px 0 34px;
	/* Magnifier, inlined so it costs no request and needs no icon font. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 15px;
}

/* All five controls share one line. margin-left:auto on the sort pushed it
   past the row width and wrapped it onto a line of its own. */
.picker-select {
	flex: 1 1 120px;
	min-width: 0;
	max-width: 190px;
	padding: 0 28px 0 11px;
	cursor: pointer;
}

.picker-search { flex: 1 1 170px; }

.picker-search:focus,
.picker-select:focus {
	outline: none;
	border-color: var(--zth-orange, #f68712);
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .15);
}

/* Paged, not scrolled: an inner scrollbar competes with the page's own and
   gives no sense of how much list is left. The pager states both. */
.picker-list { min-height: 60px; }

.picker-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.picker-count {
	font-size: 13px;
	color: #999;
	margin-right: auto;
}

.picker-page {
	min-width: 32px;
	height: 32px;
	padding: 0 9px;
	border: 1px solid #e6e6ea;
	background: #fff;
	border-radius: 5px;
	font-size: 13px;
	color: #555;
	transition: all .2s;
}

.picker-page:hover:not(:disabled) { border-color: var(--zth-orange, #f68712); color: var(--zth-orange, #f68712); }
.picker-page.is-on { background: var(--zth-orange, #f68712); border-color: var(--zth-orange, #f68712); color: #fff; }
.picker-page:disabled { opacity: .4; cursor: default; }
.picker-step { font-size: 16px; line-height: 1; }

.picker-card {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.picker-card:hover { border-color: var(--zth-orange, #f68712); background: #fffaf4; }

.picker-card.is-chosen {
	border-color: var(--zth-orange, #f68712);
	background: #fff6ec;
	box-shadow: inset 0 0 0 1px var(--zth-orange, #f68712);
}

/* Hidden, not removed: the input still takes focus and still submits. */
.picker-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.picker-card:focus-within { border-color: var(--zth-orange, #f68712); box-shadow: 0 0 0 3px rgba(246,135,18,.18); }

.picker-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 48px;
	border-radius: 5px;
	background: #1c2230;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.picker-thumb i { color: var(--zth-orange, #f68712); font-size: 22px; }
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; }

.picker-body { flex: 1 1 auto; min-width: 0; }
.picker-body strong { display: block; font-size: 14px; color: #222; font-weight: 600; }
.picker-body em { font-style: normal; font-size: 12px; color: #999; }
.picker-body em .fa-star { color: var(--zth-orange, #f68712); font-size: 10px; }

.picker-meta { flex: 0 0 auto; font-size: 13px; color: #555; font-weight: 500; white-space: nowrap; }

.picker-none { background: #f9f9ff; margin-bottom: 14px; }
.picker-empty { text-align: center; color: #999; font-size: 14px; padding: 20px 0; margin: 0; }

.builder-sub { font-size: 13px; color: #999; margin: -10px 0 16px; }

@media (max-width: 575px) {
	.picker-meta { display: none; }
	.picker-thumb { flex: 0 0 48px; width: 48px; height: 40px; }
}

/* ---------------------------------------------------------------------------
   Booking form (product detail aside)

   Replaces a wa.me link. The visitor used to leave the site and the request
   existed only in someone's phone; now it is recorded first and WhatsApp is
   offered second.
   --------------------------------------------------------------------------- */
.booking-form { margin-top: 4px; }

.booking-form h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 14px;
	padding-top: 16px;
	border-top: 1px solid #f1f1f4;
}

.booking-form .form-label { font-size: 12px; color: #777; margin-bottom: 4px; }

.booking-form .form-control {
	font-size: 13px;
	height: 38px;
	margin-bottom: 10px;
	border-color: #e6e6ea;
}

.booking-form textarea.form-control { height: auto; }

.booking-form .form-control:focus {
	border-color: var(--zth-orange, #f68712);
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .15);
}

/* Two fields per row while the aside is wide enough to hold them. */
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-row > div { min-width: 0; }

.bf-submit { display: block; width: 100%; text-align: center; margin-top: 6px; }
.bf-note { font-size: 12px; color: #999; margin: 10px 0 0; }

.bf-whatsapp {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	color: #777;
	transition: color .2s;
}

.bf-whatsapp:hover { color: var(--zth-orange, #f68712); }
.bf-whatsapp i { margin-right: 5px; }

.booking-done {
	background: #eef8f0;
	border: 1px solid #cfe9d6;
	border-radius: 6px;
	padding: 18px;
	text-align: center;
}

.booking-done strong { display: block; color: #226c37; margin-bottom: 6px; }
.booking-done p { font-size: 13px; color: #3d6b49; margin-bottom: 12px; }
.booking-done span { font-family: monospace; font-weight: 600; }

/* The car and transfer offered after a room is requested. Each is a
   <details> holding its own small form, so opening, choosing and sending
   all work with no JavaScript at all. */
.booking-extras { margin-top: 14px; }
.booking-extras .bx-lead { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 8px; }

.bx-offer {
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	margin-bottom: 8px;
	background: #fff;
}

.bx-offer > summary {
	cursor: pointer;
	padding: 12px 14px;
	list-style: none;
	position: relative;
}

.bx-offer > summary::-webkit-details-marker { display: none; }

/* A chevron that turns, rather than the browser's default triangle. */
.bx-offer > summary::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 18px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: rotate(45deg);
	transition: transform .2s;
}

.bx-offer[open] > summary::after { transform: rotate(-135deg); top: 21px; }
.bx-offer[open] > summary { border-bottom: 1px solid #eee; }

.bx-offer .bx-q { display: block; font-weight: 600; font-size: 14px; color: #222; }
.bx-offer .bx-sub { display: block; font-size: 12px; color: #777; margin-top: 2px; padding-right: 18px; }
.bx-offer form { padding: 14px; }
.bx-offer .bx-submit { width: 100%; margin-top: 12px; }

.bx-added {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.bx-added li {
	font-size: 12px;
	background: #eef8f0;
	border: 1px solid #cfe9d6;
	border-radius: 6px;
	padding: 8px 10px;
	margin-bottom: 6px;
	color: #3d6b49;
}

.bx-added strong { color: #226c37; }
.bx-added code { color: #226c37; }
.bx-added span { display: block; color: #5a7d63; }
.booking-extras .bx-note { font-size: 12px; color: #888; margin: 8px 0 0; }

/* The confirmation, over the whole page.

   The theme's sticky header sits at 999, so this clears it outright. The
   overlay scrolls rather than the card, which keeps a long panel (reference,
   then the car and transfer offers) reachable on a phone.

   Brand orange carries the primary action. It is a fill colour
   only — 2.5:1 on white — so nothing here sets it as text; wording that needs
   colour takes the deep orange, which clears 4.69:1 both ways. */
.booking-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	background: rgba(17, 24, 20, .62);
	overflow-y: auto;
	/* Never sideways: a panel that scrolls horizontally on a phone hides the
	   half of itself the guest needs. */
	overflow-x: hidden;
	padding: 24px 14px 40px;
	text-align: left;
	box-sizing: border-box;
}

.booking-modal *,
.booking-modal *::before,
.booking-modal *::after { box-sizing: border-box; }

/* A plain white card — no frame around it. The shadow against the dimmed
   page is what separates it, rather than a border. */
.booking-modal-card {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border-radius: 12px;
	padding: 18px 18px 20px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

.bm-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.bm-logo { height: 30px; width: auto; }

.bm-close {
	font-size: 26px;
	line-height: 1;
	color: #9aa0a6;
	text-decoration: none;
	padding: 0 2px;
}

.bm-close:hover { color: #1d2430; }

/* Artwork beside the message, stacked on a phone. */
.bm-top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 6px 0 12px;
}

.bm-art { flex: 0 0 auto; line-height: 0; }
.bm-intro { flex: 1 1 auto; min-width: 0; }

.bm-intro strong {
	display: block;
	font-size: 21px;
	font-weight: 600;
	color: #1d2430;
	line-height: 1.2;
}

.bm-kind { font-size: 13px; color: #79808a; margin: 2px 0 12px; }

.bm-ref-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #9aa0a6;
	margin: 0 0 4px;
}

.bm-ref {
	font-family: monospace;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--zth-orange-deep, #b15e07);
	background: #fff6ec;
	border: 1px dashed #f3c48a;
	border-radius: 6px;
	padding: 9px 10px;
	margin: 0;
	/* A reference is meant to be kept, so make it easy to select on a phone. */
	user-select: all;
	overflow-wrap: anywhere;
}

.bm-said { font-size: 13px; color: #555; margin-bottom: 4px; }

.bm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.bm-actions a {
	flex: 1 1 150px;
	text-align: center;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.bm-whatsapp { background: #128c4a; color: #fff; }
.bm-whatsapp:hover { background: #0f7a40; color: #fff; }

.bm-done { background: var(--zth-orange, #f68712); color: #fff; }
.bm-done:hover { background: var(--zth-orange-hover, #dd7a0e); color: #fff; }

/* Inside the panel the offers sit on white, so tint them apart from it. */
.booking-modal .bx-offer { background: #fbfbfb; }

@media (max-width: 520px) {
	.bm-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.bm-art svg { width: 104px; height: 85px; }
	.bm-intro strong { font-size: 19px; }
}

@media (max-width: 420px) {
	.bf-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Become a partner
   --------------------------------------------------------------------------- */
.partner-why {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 26px;
}

.partner-why h4 { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.partner-why ul { list-style: none; padding: 0; margin: 0 0 22px; }

.partner-why li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 14px;
	color: #555;
	margin-bottom: 12px;
	line-height: 1.5;
}

.partner-why li i { color: var(--zth-orange, #f68712); font-size: 12px; flex: 0 0 auto; }

.partner-stat {
	background: #fff6ec;
	border: 1px solid #f7d9bb;
	border-radius: 6px;
	padding: 16px 18px;
	text-align: center;
}

.partner-stat strong { display: block; font-size: 30px; font-weight: 700; color: var(--zth-orange-deep, #b15e07); line-height: 1.1; }
.partner-stat span { font-size: 13px; color: #7a4a10; }

.partner-note { font-size: 13px; color: #999; margin: 18px 0 0; }

.partner-form {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 28px;
}

.partner-form h4 { font-size: 17px; font-weight: 600; margin-bottom: 18px; }

.partner-form .partner-sub {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid #f1f1f4;
}

.partner-form .form-label { font-size: 12px; color: #777; margin-bottom: 4px; }
.partner-form .form-control { font-size: 14px; height: 42px; margin-bottom: 14px; border-color: #e6e6ea; }
.partner-form textarea.form-control { height: auto; }

.partner-form .form-control:focus {
	border-color: var(--zth-orange, #f68712);
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .15);
}

@media (max-width: 991px) {
	.partner-why { margin-bottom: 24px; }
}

/* ---------------------------------------------------------------------------
   Map

   Leaflet is vendored locally and the tiles are OpenStreetMap, so this needs
   no API key and no billing account. Google Maps would bill per map load and
   needs the Maps JavaScript API enabled separately from a Places key.
   --------------------------------------------------------------------------- */
.map-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 14px;
}

.map-count { font-size: 13px; color: #999; margin-left: auto; }

.map-canvas {
	height: 560px;
	border-radius: 8px;
	border: 1px solid #e6e6ea;
	overflow: hidden;
	background: #eef2f5;
	z-index: 1;   /* Leaflet panes stack high; keep them under the header. */
}

.map-note {
	font-size: 13px;
	color: #a02b2b;
	background: #fdeeee;
	border: 1px solid #f4d2d2;
	border-radius: 6px;
	padding: 10px 14px;
	margin-top: 12px;
}

.map-legend { font-size: 13px; color: #999; margin-top: 12px; }

.map-key {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin: 0 5px 0 14px;
	vertical-align: middle;
}

.map-legend .map-key:first-child { margin-left: 0; }
.map-key-hotel { background: var(--zth-orange, #f68712); }
.map-key-tour { background: #3c93d6; }

/* Pins, drawn rather than loaded: two colours from one shape, no images. */
.map-pin span {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.map-pin-hotel span { background: var(--zth-orange, #f68712); }
.map-pin-tour span { background: #3c93d6; }

.map-popup { font-size: 13px; min-width: 150px; }
.map-popup strong { display: block; font-size: 14px; color: #222; }
.map-popup em { font-style: normal; color: var(--zth-orange, #f68712); font-size: 12px; }
.map-popup span { display: block; color: #999; font-size: 12px; margin-bottom: 4px; }
.map-popup b { display: block; color: #222; margin-bottom: 6px; }
.map-popup a { font-weight: 500; }

.map-error { text-align: center; padding: 60px 20px; color: #777; }

@media (max-width: 767px) {
	.map-canvas { height: 400px; }
	.map-count { margin-left: 0; width: 100%; }
}

/* A single pinned place on a detail page. The island map at /map is the
   filterable one; this answers "where is this?" and nothing else. */
.place-map {
	margin-top: 16px;
	border-radius: 6px;
	border: 1px solid #e6e6ea;
	overflow: hidden;
	background: #eef2f5;
	z-index: 0;   /* Leaflet panes stack high; keep them under the header. */
}

.place-map .leaflet-control-attribution { font-size: 9px; }

/* ---------------------------------------------------------------------------
   "View all" under a homepage preview row

   The cards above already carry 30px of margin-bottom, so this only needs a
   little more to separate the button from the last row rather than a full
   section gap, which would float it halfway to the next section.
   --------------------------------------------------------------------------- */
.section-more {
	text-align: center;
	margin-top: 20px;
}

.section-more .primary-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 32px;
	line-height: 48px;
}

.section-more .primary-btn i { font-size: 18px; transition: transform .2s; }
.section-more .primary-btn:hover i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.section-more .primary-btn i { transition: none; }
}

/* ---------------------------------------------------------------------------
   Build your package, as a button at the end of the menu

   Anchored on #header #nav-menu-container so it outranks every link colour
   rule above it. The strongest of those, `#header.header-scrolled .nav-menu
   li:hover > a`, turns links orange on hover and dark on the white scrolled
   bar — on an orange pill, either would make the label vanish.

   The menu becomes a flex row so the taller pill and the plain links share a
   centre line. The theme floats the items, which top-aligns them instead and
   leaves the link text sitting above the middle of the button.
   --------------------------------------------------------------------------- */
#header #nav-menu-container .nav-menu {
	display: flex;
	align-items: center;
}

#header #nav-menu-container .nav-menu > li.nav-cta {
	margin-left: 18px;
}

#header #nav-menu-container .nav-menu > li.nav-cta > a {
	background: var(--zth-orange, #f68712);
	color: #fff;
	border-radius: 999px;
	padding: 0 22px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background .2s, box-shadow .2s;
}

#header #nav-menu-container .nav-menu > li.nav-cta:hover > a,
#header #nav-menu-container .nav-menu > li.nav-cta > a:focus-visible {
	background: var(--zth-orange-hover, #dd7a0e);
	color: #fff;
	box-shadow: 0 6px 16px rgba(246, 135, 18, .35);
}

#header #nav-menu-container .nav-menu > li.nav-cta > a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The phone drawer is a clone of the menu under id="mobile-nav", so none of
   the rules above reach it. Full width there, below the links. */
#mobile-nav ul li.nav-cta {
	padding: 14px 15px 6px;
}

#mobile-nav ul li.nav-cta a {
	display: block;
	text-align: center;
	background: var(--zth-orange, #f68712);
	color: #fff;
	border-radius: 999px;
	padding: 12px 15px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	#header #nav-menu-container .nav-menu > li.nav-cta > a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Package builder — the summary on the last step

   Laid out like a quote rather than a form recap: travel details on top, one
   line per item with what it costs, then an estimated total, then who to reply
   to. The figures come from each module's own pricing (Tour::totalFor, the
   transfer band that seats the party, FleetCar::totalForDays); hotels stay
   "On request", because rates are agreed in conversation.
   --------------------------------------------------------------------------- */
.builder-review { display: grid; gap: 16px; font-size: 14px; }

.bq-travel {
	background: #f6f8fb;
	border-radius: 8px;
	padding: 16px 18px;
}

.bq-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #1c2230;
	margin: 0 0 10px;
}

.bq-heading i { color: var(--zth-orange, #f68712); font-size: 18px; }

.bq-travel dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 0;
}

.bq-travel dt { font-weight: 400; color: #7a8190; }
.bq-travel dd { margin: 0; color: #1c2230; font-weight: 600; }
.bq-travel dd em { font-style: normal; font-weight: 400; color: #0075c3; }

.bq-items { list-style: none; margin: 0; padding: 0; }

.bq-item {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 4px 12px;
	align-items: start;
	padding: 13px 0;
	border-bottom: 1px solid #eef0f4;
}

.bq-item:last-child { border-bottom: none; }

.bq-item > i { color: var(--zth-orange, #f68712); font-size: 18px; line-height: 1.3; }
.bq-item strong { display: block; color: #1c2230; font-weight: 600; line-height: 1.35; }
.bq-item small { display: block; color: #7a8190; font-size: 12.5px; margin-top: 2px; line-height: 1.45; }

.bq-price {
	font-weight: 700;
	color: #1c2230;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bq-price.is-request { color: #0075c3; font-weight: 600; font-size: 13px; }
.bq-price.is-none { color: #7a8190; font-weight: 400; font-size: 13px; }

.bq-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #fff6ec;
	border: 1px solid #fbd6ad;
	border-radius: 10px;
	padding: 16px 20px;
}

.bq-total strong { display: flex; align-items: center; gap: 8px; color: #1c2230; font-size: 15px; }
.bq-total strong i { color: var(--zth-orange, #f68712); }
.bq-total small { display: block; color: #7a8190; font-size: 12.5px; margin-top: 2px; }

.bq-total-figure {
	font-size: 30px;
	font-weight: 700;
	color: var(--zth-orange, #f68712);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bq-total-figure.is-request { font-size: 17px; }

.bq-contact { border-top: 1px solid #eef0f4; padding-top: 18px; margin-top: 6px; }

.bq-note { text-align: center; font-size: 13px; color: #7a8190; margin: 14px 0 0; }

.is-wizard .builder-foot .builder-submit {
	flex: 1 1 320px;
	max-width: 460px;
	line-height: 54px;
	font-size: 15px;
}

@media (max-width: 575px) {
	.bq-total { flex-direction: column; align-items: flex-start; }
	.bq-total-figure { font-size: 26px; }
}

/* ===========================================================================
   Phones: the Galaxy S20 benchmark (360 x 800 CSS px)

   Measured on every public page with real mobile emulation. Nothing below
   changes a layout that was already right; each rule answers a specific
   finding, noted beside it. Tap targets follow Android's 48dp guidance where
   the element allows it and never fall under WCAG's 24px floor.
   ======================================================================== */

/* Detail rows on cards (dining "Area", packages "Stay"). A long value used to
   sit flush against its label, and the label floated to the vertical middle
   of a two-line value. Bootstrap's align-items-center utility in the markup
   carries !important, so the override has to as well. All widths. */
.single-destinations .details .package-list li {
	gap: 16px;
	align-items: flex-start !important;
}

.single-destinations .details .package-list li > span:first-child { flex: 0 0 auto; }
.single-destinations .details .package-list li > span:last-child { text-align: right; }

/* Badges measured 11px, under the 12px floor for text. All widths. */
.badge-pill { font-size: 12px; }

/* Every direct span in a card title gets flex: 1 1 auto, because the name has
   to take the free space. The badge is a span too, so once it wrapped onto a
   line of its own it grew to the full width of the card. All widths.
   It must not shrink either: its text never wraps, so a squeezed pill let
   "MOST POPULAR" spill past its own border and pushed "BEST SELLER" off the
   card. The name, which can wrap, gives way instead. */
.single-destinations .details h4 > .badge-pill { flex: 0 0 auto; }

/* "Ask on WhatsApp instead" was a 23px-tall link. All widths. */
.bf-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 2px;
}

/* Map pins drew at 22px, too small to hit with a thumb. The pin stays the size
   it is; an invisible 44px zone around it takes the tap. All widths, because
   tablets are touch screens too. */
.leaflet-marker-icon.map-pin::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* The logo's link measured 20px tall around a 56px image. */
#logo a { display: inline-block; }

/* Header, wherever the phone menu is in use. */
@media (max-width: 991.98px) {
	/* The fixed header took 131px of an 800px screen at the top of the page
	   and 96px after scrolling, most of it padding around the logo. */
	.main-menu { padding-top: 10px; padding-bottom: 10px; }
	#logo img { max-height: 44px; }

	/* The menu button measured 36 x 29. */
	#mobile-nav-toggle { min-width: 44px; min-height: 44px; margin-top: 0; padding: 0; }

	/* Visit Us / Buy Tickets were 17px tall and the WhatsApp icon 10px wide.
	   The bar loses its own padding so the links can carry the height. */
	.header-top { padding: 0; }
	.header-top ul { margin: 0; }
	.header-top ul li a { display: inline-block; padding: 11px 0; }
	.header-top .header-top-right .header-social a { display: inline-block; padding: 11px 10px; margin-left: 0; }
}

@media (max-width: 767.98px) {
	/* 120px above and below every section is a screen of nothing between each
	   block on a phone; the homepage measured 12,900px tall. */
	.section-gap { padding: 70px 0; }
	.footer-area.section-gap { padding-top: 60px; padding-bottom: 40px; }
	.menu-content.pb-70 { padding-bottom: 40px; }
	.menu-content.pb-40 { padding-bottom: 28px; }

	/* Footer links were 20px tall, stacked 12px apart: easy to hit the wrong one. */
	.footer-area .single-footer-widget ul li { margin: 0; }
	.footer-area .single-footer-widget ul li a { display: inline-block; padding: 10px 0; }
	.footer-area .footer-contact li:not(:has(a)) { padding: 10px 0; }

	/* Breadcrumbs, the contact page's phone and email, and the 404 page's
	   links all measured about 20px tall. */
	.link-nav a { display: inline-block; padding: 10px 2px; }
	.contact-details h5 a { display: inline-block; padding: 10px 0; }
	.error-links { gap: 0 14px; }
	.error-links a { display: inline-block; padding: 10px 4px; }

	/* Error pages have no banner, so their own top padding is all that clears
	   the fixed header. The 70px section gap above slid the logo over the
	   status code. */
	.error-page.section-gap { padding-top: 150px; }

	/* "Theme by Colorlib", the credit the licence requires, was 17px tall. */
	.footer-text .footer-credit a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 575.98px) {
	/* The dining badge, "4.1★ TripAdvisor · Travelers' Choice 2024", could not
	   wrap. It ran off its card and widened the whole page to 419px. It may now
	   wrap within the card, and drops under the name when the two do not fit. */
	.single-destinations .details h4:has(.badge-pill) { flex-wrap: wrap; row-gap: 8px; }
	.badge-pill { white-space: normal; max-width: 100%; }

	/* The picker's dropdowns share a row two at a time, capped at 190px, which
	   left about 95px of text: "Recommended" read "Recommenc". Sorting takes a
	   row of its own, and the cap goes so a facet left alone on its row fills
	   it instead of stopping short. */
	.picker-bar .picker-select { max-width: none; }
	.picker-bar .picker-sort { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Phone menu: drops down from the header

   The theme slid a 260px dark drawer in from the left edge. It now opens as a
   white panel straight under the header, the full width of the screen.

   main.js appends #mobile-nav and its overlay inside .main-menu, inside the
   fixed #header, so absolute positioning at top: 100% lands both exactly under
   the header whatever height it has (109px with the top bar, 64px scrolled),
   with nothing to measure.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	#header #mobile-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		padding: 6px 0 14px;
		background: #fff;
		box-shadow: 0 16px 32px rgba(28, 34, 48, .18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}

	body.mobile-nav-active #header #mobile-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .2s ease, transform .2s ease;
	}

	/* The page dims below the header only; the header itself stays readable. */
	#header #mobile-body-overly {
		position: absolute;
		top: 100%;
		height: 100vh;
		background: rgba(15, 18, 26, .45);
	}

	/* An open menu belongs to the header, so the header turns white like the
	   scrolled bar. Otherwise a see-through header over the hero photo floats
	   above a white panel. The top bar goes, as it does on scroll. */
	body.mobile-nav-active #header { background-color: #fff; box-shadow: 0 2px 16px rgba(28, 34, 48, .10); }
	body.mobile-nav-active #header .header-top { display: none; }
	body.mobile-nav-active #header .main-menu { background: transparent; }
	body.mobile-nav-active #mobile-nav-toggle i { color: #1c2230; }

	#header #mobile-nav ul li + li { border-top: 1px solid #f0f1f5; }

	#header #mobile-nav ul li a {
		color: #1c2230;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .02em;
		line-height: 24px;
		padding: 14px 56px 14px 20px;
	}

	#header #mobile-nav ul li a:hover,
	#header #mobile-nav ul .menu-item-active { color: var(--zth-orange, #f68712); }

	/* The chevron gets the full height of its row at the right edge. The label
	   opens the submenu too (zth-menu.js), so this is a second way in. */
	#header #mobile-nav ul .menu-has-children > i {
		top: 0;
		right: 0;
		width: 56px;
		height: 52px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1c2230;
		font-size: 14px;
	}

	#header #mobile-nav ul .menu-has-children > i.lnr-chevron-up { color: var(--zth-orange, #f68712); }

	#header #mobile-nav ul ul { background: #f8f9fb; }
	#header #mobile-nav ul li li { padding-left: 0; border-top-color: #eceef3; }

	#header #mobile-nav ul li li a {
		padding: 12px 20px 12px 36px;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0;
		color: #4a5060;
	}

	/* The button keeps its own look. Without this the dark link colour above
	   outranks it, and "Build your package" goes dark on orange. */
	#header #mobile-nav ul li.nav-cta { border-top: 0; padding: 14px 20px 4px; }
	#header #mobile-nav ul li.nav-cta a { color: #fff; padding: 13px 15px; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
	#header #mobile-nav,
	body.mobile-nav-active #header #mobile-nav { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   Search and filters on the listing pages

   One bar for all seven catalogues (components/listing-filters). The grid of
   cards below it is unchanged; this only narrows what fills it.
   --------------------------------------------------------------------------- */
.listing-filters {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(28, 34, 48, .05);
	padding: 14px;
	margin: -40px 0 30px;
	/* The form is the #results anchor; clear the fixed header when landing on it. */
	scroll-margin-top: 110px;
}

.lf-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-more { display: contents; }
.lf-search { position: relative; flex: 2 1 240px; min-width: 0; }
.lf-field { flex: 1 1 150px; min-width: 0; }

.lf-search input,
.lf-field input,
.lf-field select {
	width: 100%;
	height: 46px;
	border: 1px solid #e6e6ea;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 14px;
	padding: 0 12px;
	transition: border-color .2s, box-shadow .2s;
}

.lf-search input { padding-left: 40px; }
.lf-field select { padding-right: 30px; cursor: pointer; }

.lf-search i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #9aa0ab;
	font-size: 17px;
	pointer-events: none;
}

.lf-search input:focus,
.lf-field input:focus,
.lf-field select:focus {
	outline: none;
	border-color: var(--zth-orange, #f68712);
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .16);
}

.lf-apply { flex: 0 0 auto; height: 46px; line-height: 46px; padding: 0 28px; border-radius: 6px; }

.lf-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #e6e6ea;
	border-radius: 6px;
	background: #fff;
	color: #1c2230;
	font-size: 14px;
	font-weight: 500;
}

.lf-toggle.is-open { border-color: var(--zth-orange, #f68712); color: var(--zth-orange, #f68712); }

.lf-badge {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--zth-orange, #f68712);
	color: #fff;
	font-size: 12px;
	text-align: center;
}

.lf-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 12px 2px 0;
	font-size: 13px;
	color: #7a8190;
}

.lf-summary strong { color: #1c2230; }
.lf-clear { color: var(--zth-orange-deep, #b15e07); font-weight: 500; padding: 6px 0; }
.lf-clear:hover { color: var(--zth-orange, #f68712); }
.listing-empty a { color: var(--zth-orange-deep, #b15e07); font-weight: 500; }

/* More dropdowns than fit beside the search box (hotels has six). In one
   wrapping row the last one fell onto a line of its own and stretched across
   the whole card, and the rest were squeezed until "Boutique Hotel" cut off.
   Search and its button take the first row; the dropdowns share the second. */
/* The dropdowns become a row of their own. Left as loose items with a zero
   starting width, three of them fitted onto the search row as slivers poking
   past the card's edge. */
@media (min-width: 576px) {
	.lf-many .lf-search { flex: 1 1 calc(100% - 150px); order: 0; }
	.lf-many .lf-apply { order: 1; }
	.lf-many .lf-more { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; order: 2; }
	.lf-many .lf-field { flex: 1 1 calc(33.333% - 7px); }
}

@media (min-width: 992px) {
	.lf-many .lf-field { flex: 1 1 0; }
}

@media (max-width: 575.98px) {
	.listing-filters { margin: -16px 0 24px; padding: 12px; }

	/* Search and the Filters button share the first row; the dropdowns sit two
	   to a row under them, and the button to search takes a row of its own. */
	.lf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
	.lf-more { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
	.lf-wide,
	.lf-apply { grid-column: 1 / -1; }

	/* 14px fits "Any facilities" and "Recommended" whole in a half-width box;
	   at 15px both were cut short by a few pixels. */
	.lf-search input,
	.lf-field input,
	.lf-field select { font-size: 14px; }
	.lf-field select { padding: 0 26px 0 10px; }
}

/* Room and meal plan, under the hotel picker in the package builder. */
.builder-room {
	margin-top: 16px;
	padding: 16px 18px 18px;
	border: 1px solid #f3e1cc;
	border-radius: 8px;
	background: #fffaf4;
}

.builder-room .bq-heading { margin-bottom: 12px; }
.builder-room .builder-hint { color: #a55a00; margin-top: 12px; }

/* The hotel booking form: the room name and its price get a row to themselves. */
.bf-row.bf-one { grid-template-columns: 1fr; }

/* "Best rate · Ask via WhatsApp", where a price was, when prices are switched
   off in the admin. A deep WhatsApp green, so it reads as a chat rather than
   one more orange booking button, and dark enough for white text. */
.best-rate {
	position: relative;
	z-index: 2; /* above a card's stretched link: a tap opens the chat, not the card */
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 11px;
	border-radius: 6px;
	background: #128c4a;
	color: #fff;
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
	transition: background .2s;
}

.best-rate:hover,
.best-rate:focus { background: #0e733c; color: #fff; text-decoration: none; }
.best-rate:focus-visible { outline: 3px solid rgba(18, 140, 74, .35); outline-offset: 2px; }
.best-rate i { font-size: 22px; line-height: 1; }
.best-rate strong { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.best-rate small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .9); }

/* A detail page's aside: the button takes the price's place, full width. */
.best-rate-block { display: flex; justify-content: center; width: 100%; padding: 12px 16px; margin-bottom: 16px; }
.best-rate-block i { font-size: 28px; }
.best-rate-block strong { font-size: 18px; }
.best-rate-block small { font-size: 13px; }


.bq-total.is-best-rate .best-rate { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Package builder, step 4: one question at a time

   Yes or no to a transfer, then which ways, then getting to the excursions.
   Each part eases in once the one before is answered (package-builder.js adds
   .is-revealing). Without the script every part simply shows.
   --------------------------------------------------------------------------- */
.choice-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.choice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 16px;
	border: 1px solid #e6e6ea;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	margin: 0;
	transition: border-color .2s, background .2s, box-shadow .2s;
}

.choice-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-card i { font-size: 26px; color: #1c2230; margin-bottom: 6px; transition: color .2s; }
.choice-card strong { font-size: 15px; font-weight: 600; color: #222; }
.choice-card small { font-size: 12.5px; color: #8a8f9c; }
.choice-card:hover { border-color: var(--zth-orange, #f68712); background: #fffaf4; }
.choice-card:focus-within { box-shadow: 0 0 0 3px rgba(246, 135, 18, .2); }

.choice-card.is-chosen,
.choice-card:has(input:checked) {
	border-color: var(--zth-orange, #f68712);
	background: #fff6ec;
	box-shadow: inset 0 0 0 1px var(--zth-orange, #f68712);
}

.choice-card.is-chosen i,
.choice-card:has(input:checked) i { color: var(--zth-orange, #f68712); }

/* Arrival and departure: a row each, with a real tick, since both can be on. */
.choice-cards.is-compact .choice-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	text-align: left;
}

.choice-cards.is-compact .choice-card i { font-size: 20px; margin: 0; }
.choice-card.is-check input {
	position: static;
	opacity: 1;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	accent-color: var(--zth-orange, #f68712);
}
.choice-text { display: flex; flex-direction: column; min-width: 0; }

.builder-panel {
	margin-top: 18px;
	padding: 18px;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	background: #fbfbfd;
}

.builder-panel .bq-heading { margin-bottom: 12px; }
.builder-panel .builder-sub { margin: -6px 0 14px; }

.route-auto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 14px 0 0;
	padding: 10px 14px;
	border: 1px solid #bfe5cc;
	border-radius: 8px;
	background: #edf8f1;
	color: #1d6b3b;
	font-size: 13.5px;
}

.route-auto i { font-size: 18px; }
.route-auto span { flex: 1 1 auto; min-width: 0; }
.route-change {
	background: none;
	border: 0;
	padding: 0;
	color: #1d6b3b;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.route-field { margin-top: 14px; }
.route-quote { margin: 10px 0 0; font-size: 13px; color: #555; }

.transport-options { display: grid; gap: 10px; }

.transport-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: start;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #e6e6ea;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s, background .2s, box-shadow .2s;
}

.transport-option[hidden] { display: none; }
.transport-option:hover { border-color: var(--zth-orange, #f68712); }
.transport-option input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--zth-orange, #f68712); }
.transport-main strong { display: block; font-size: 14.5px; font-weight: 600; color: #222; }
.transport-main strong i { color: var(--zth-orange, #f68712); }
.transport-main small { display: block; margin-top: 2px; font-size: 12.5px; color: #8a8f9c; }
.transport-price { font-size: 16px; font-weight: 600; color: #222; white-space: nowrap; text-align: right; }
.transport-price small { display: block; font-size: 11.5px; font-weight: 400; color: #8a8f9c; }
.transport-price.is-free { font-size: 13px; font-weight: 500; color: #8a8f9c; }

.transport-option.is-chosen,
.transport-option:has(input:checked) {
	border-color: var(--zth-orange, #f68712);
	background: #fff6ec;
	box-shadow: inset 0 0 0 1px var(--zth-orange, #f68712);
}

.transport-breakdown {
	grid-column: 2 / -1;
	display: block;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid #f0e2d0;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	cursor: default;
}

.transport-breakdown[hidden] { display: none; }

.transport-zone {
	display: block;
	margin-bottom: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #fdf1e5;
	color: var(--zth-orange-deep, #b15e07);
	font-size: 12.5px;
	font-weight: 600;
}

.transport-day { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: #555; }
.transport-day em { font-style: normal; color: #9aa0ab; font-size: 12px; }
.transport-day b { color: #222; font-weight: 600; white-space: nowrap; }
.transport-sum {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid #eee;
	color: #222;
	font-weight: 600;
}

.transport-car { margin-top: 6px; }

/* Slower than the step change on purpose: this is the page answering a choice. */
.is-wizard .is-revealing { animation: builder-reveal .5s ease both; }

@keyframes builder-reveal {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.is-wizard .is-revealing { animation: none; }
}

@media (max-width: 575px) {
	.choice-card { padding: 16px 10px; }
	.choice-card strong { font-size: 13.5px; }
	.choice-cards.is-compact { grid-template-columns: 1fr; }
	.builder-panel { padding: 14px; }
	.transport-option { grid-template-columns: auto minmax(0, 1fr); }
	.transport-price { grid-column: 2; text-align: left; margin-top: 6px; }
	.transport-price small { display: inline; margin-left: 4px; }
	.transport-breakdown { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Inner-page banner title

   The theme sets it at 48px at every width. On a phone that ran the line to
   the very edge of the screen ("Build your own package" measured 358px wide
   on a 360px screen) and broke long names into four cramped lines. It now
   scales from 48px on desktop down to about 29px on a small phone, keeps a
   16px margin either side, and balances its lines so a two-line title does
   not leave one word hanging.
   --------------------------------------------------------------------------- */
.about-content { padding-left: 16px; padding-right: 16px; }

.about-content h1 {
	font-size: clamp(28px, 4.2vw + 14px, 48px);
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* The trail sits above the heading, so its spacing belongs underneath it. */
.about-content .link-nav { margin-top: 0; margin-bottom: 14px; text-wrap: balance; }

/* ---------------------------------------------------------------------------
   Homepage hero slider (hero-slider.js)

   Pictures crossfade on layers under the theme's overlay. The words sit in
   one grid cell, all slides stacked, so the block is as tall as its tallest
   slide and nothing below it moves when a short headline follows a long one.
   --------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-bg.is-active { opacity: 1; }
.hero .overlay { z-index: 1; }
.hero .container { position: relative; z-index: 2; }

.hero-ready .hero-slides { display: grid; }
.hero-ready .hero-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}

.hero-ready .hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .7s ease .25s, transform .7s ease .25s, visibility 0s;
}

/* Later headlines are h2s, so the page keeps one h1; they wear the h1's size. */
.banner-left .hero-title { margin: 20px 0; font-size: 60px; text-transform: uppercase; }

@media (max-width: 1199px) {
	.banner-left .hero-title { font-size: 40px; }
}

@media (max-width: 991px) and (min-width: 768px) {
	.banner-left .hero-title { font-size: 36px; }
}

@media (max-width: 413px) {
	.banner-left .hero-title { font-size: 33px; }
}

.hero-controls { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.hero-controls[hidden] { display: none; }

.hero-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: rgba(4, 9, 30, .25);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.hero-arrow:hover { background: var(--zth-orange, #f68712); border-color: var(--zth-orange, #f68712); }

.hero-dots { display: flex; align-items: center; gap: 2px; }

/* A 10px dot inside a 28px button: easy to hit, quiet to look at. */
.hero-dot {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .5);
	transform: translate(-50%, -50%);
	transition: width .3s ease, background .3s ease;
}

.hero-dot.is-active::before { width: 24px; background: var(--zth-orange, #f68712); }

.hero-arrow:focus-visible,
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.hero-bg,
	.hero-ready .hero-slide,
	.hero-ready .hero-slide.is-active { transition: none; transform: none; }
}

@media (max-width: 767px) {
	.hero-controls { margin-top: 22px; }
}

/* ---------------------------------------------------------------------------
   Hotel page rooms table: one column per meal plan

   The room's size, bed and view sit under its name rather than in a column of
   their own, which leaves room for four or five rate columns on a phone.
   --------------------------------------------------------------------------- */
.detail-rooms th,
.detail-rooms td { vertical-align: middle; }

.detail-rooms .detail-room-line {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: #8a8f9c;
}

.detail-rooms .rate-col {
	width: 1%;
	padding-left: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.detail-rooms th abbr { text-decoration: none; cursor: help; border: 0; }
.detail-rooms .pax-col { width: 1%; text-align: center !important; white-space: nowrap; }
.detail-rooms .rate-none { color: #c4c8d0; }
.detail-note strong { color: #777; font-weight: 600; }

/* Five rate columns and a room name in 330px: the cells give up their
   spacing before the table gives in and scrolls. */
@media (max-width: 575px) {
	.detail-rooms { font-size: 13px; }
	.detail-rooms > :not(caption) > * > * { padding-left: 4px; padding-right: 4px; }
	.detail-rooms td:first-child { min-width: 104px; padding-left: 0; }
	.detail-rooms th:first-child { padding-left: 0; }
	.detail-rooms .rate-col { padding-left: 5px; padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   Privacy policy

   A reading page: one column near 70 characters wide, headings that mark the
   numbered sections, lists with room between items.
   --------------------------------------------------------------------------- */
.legal-page article { font-size: 15.5px; line-height: 1.75; color: #555; }

.legal-page .legal-updated {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 14px;
	border-radius: 0;
	background: var(--zth-orange, #f68712);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.legal-page .legal-lead { font-size: 17px; color: #333; }

.legal-page h2 {
	margin: 40px 0 12px;
	padding-top: 22px;
	border-top: 1px solid #eef0f4;
	font-size: 21px;
	font-weight: 600;
	color: #222;
	line-height: 1.35 !important;
}

.legal-page ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal-page li { margin-bottom: 8px; padding-left: 4px; }
.legal-page li::marker { color: var(--zth-orange, #f68712); }
.legal-page strong { color: #333; }

.legal-page article a {
	color: var(--zth-orange-deep, #b15e07);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.legal-page .legal-callout {
	margin: 18px 0;
	padding: 14px 18px;
	border-left: 3px solid var(--zth-orange, #f68712);
	border-radius: 0 8px 8px 0;
	background: #fffaf4;
}

.legal-page .legal-contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 6px;
	background: #128c4a;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.legal-page .legal-contact a:hover { background: #0e733c; color: #fff; }

@media (max-width: 575px) {
	.legal-page article { font-size: 15px; }
	.legal-page h2 { margin-top: 32px; font-size: 19px; }
}

/* A sent form's confirmation: a green tick above the heading, so success reads
   before a word of it does. Pops in once; still for reduced motion. */
.done-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #128c4a;
	box-shadow: 0 0 0 8px rgba(18, 140, 74, .12);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	animation: done-pop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}

@keyframes done-pop {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.done-check { animation: none; }
}

/* ---------------------------------------------------------------------------
   Partner registration (private link)

   A long form in numbered cards, like the package builder, so seven short
   sections read as less work than forty fields.
   --------------------------------------------------------------------------- */
.partner-register .pr-intro { margin-bottom: 26px; }
.partner-register .pr-intro h1 { font-size: clamp(26px, 3vw + 12px, 36px); font-weight: 600; margin-bottom: 10px; text-wrap: balance; }
.partner-register .pr-intro p { color: #666; }

.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: #7a8190; }
.pr-meta i { color: var(--zth-orange, #f68712); }
.pr-saved { color: #1d6b3b; }

.pr-section {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 24px 26px;
	margin-bottom: 20px;
}

.pr-section > h4 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 18px; font-weight: 600; }

.pr-section > h4 span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--zth-orange, #f68712);
	color: #fff;
	font-size: 14px;
}

.pr-section > h4 + .pr-sub { margin-top: -8px; }
.pr-sub { margin: 0 0 16px; font-size: 13px; color: #8a8f9c; }
.pr-section .form-label { margin-bottom: 4px; font-size: 13px; color: #555; }
.pr-hint { margin: 6px 0 0; font-size: 12.5px; color: #8a8f9c; }

/* The theme's placeholders are nearly as dark as typed text, so "King Size Bed"
   read as an answer already given. Examples should look like examples. */
.partner-register .form-control::placeholder { color: #b3b8c2; opacity: 1; }

.pr-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

.pr-amenity {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #eee;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.pr-amenity input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--zth-orange, #f68712); }
.pr-amenity:hover { border-color: var(--zth-orange, #f68712); }
.pr-amenity:has(input:checked) { border-color: var(--zth-orange, #f68712); background: #fff6ec; }

.pr-room {
	margin-bottom: 14px;
	padding: 16px 18px;
	border: 1px solid #eef0f4;
	border-radius: 8px;
	background: #fbfbfd;
}

.pr-room-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pr-room-head strong { font-size: 15px; color: #222; }
.pr-room-remove { padding: 0; border: 0; background: none; color: #b3261e; font-size: 13px; text-decoration: underline; cursor: pointer; }
.pr-room-remove[hidden] { display: none; }
.pr-rates-hint { margin: 14px 0 8px; }
.pr-rates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pr-add-room i { margin-right: 4px; }
.pr-add-room[hidden] { display: none; }

.pr-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px; font-size: 14px; color: #444; cursor: pointer; }
.pr-confirm input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--zth-orange, #f68712); }

.pr-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* The status page's icon, in its other moods. */
.done-check.is-muted { background: #7a8190; box-shadow: 0 0 0 8px rgba(122, 129, 144, .15); }
.done-check.is-warning { background: var(--zth-orange, #f68712); box-shadow: 0 0 0 8px rgba(246, 135, 18, .15); }

@media (max-width: 767px) {
	.pr-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.pr-section { padding: 18px 16px; }
	.pr-room { padding: 14px; }
}

/* Partner registration as steps: the builder's wizard classes do the work;
   this is only what differs. */
.partner-register .builder-step[hidden] { display: none; }
.partner-register .pr-confirm { margin: 22px 0 0; }
.pr-submit-note { margin: 14px 0 0; font-size: 13px; color: #7a8190; text-align: center; }
.pr-submit-note[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Guest reviews: the /reviews page, and the block on hotel and package pages.
--------------------------------------------------------------------------- */
.rv-summary { margin-bottom: 26px; }
.rv-summary p { color: #777; margin: 8px 0 16px; max-width: 60ch; }
.rv-score { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: #777; }
.rv-score strong { font-size: 42px; line-height: 1; font-weight: 600; color: #222; }
.rv-score-sm strong { font-size: 22px; }
.rv-score-stars i,
.rv-stars-static i { color: #dcdce2; font-size: 14px; }
.rv-score-stars i.is-on,
.rv-stars-static i.is-on { color: var(--zth-orange, #f68712); }

.rv-card {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	padding: 20px 22px;
	margin-bottom: 14px;
}
.rv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-when { font-size: 12px; color: #999; }
.rv-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; text-wrap: balance; }
.rv-card p { color: #555; margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.rv-card footer { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: #888; }
.rv-card footer strong { color: #222; font-weight: 600; }
.rv-card footer a { color: var(--zth-orange-deep, #b15e07); }
.rv-empty p { margin: 0; }

.rv-write { position: sticky; top: 100px; }
.rv-write .partner-form textarea.form-control { min-height: 130px; }
.rv-optional { color: #aaa; font-size: 11px; margin-left: 4px; }
.rv-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rv-submit { width: 100%; margin-top: 6px; border: 0; cursor: pointer; }
.rv-note { font-size: 12px; color: #999; margin: 12px 0 0; }

/* Stars you pick. Inputs run 5 to 1 in the markup and row-reverse puts 1 on
   the left, so "this star and every one before it" is the ~ sibling rule. */
.rv-rate { margin: 0 0 12px; }
.rv-rate legend { float: none; width: auto; }
.rv-rate-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-rate-row label {
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
	padding: 2px;
	color: #dcdce2;
	transition: color .15s ease, transform .15s ease;
}
.rv-rate-row input:checked ~ label,
.rv-rate-row label:hover,
.rv-rate-row label:hover ~ label { color: var(--zth-orange, #f68712); }
.rv-rate-row label:hover { transform: scale(1.12); }
.rv-rate-row input:focus-visible + label { outline: 2px solid var(--zth-orange, #f68712); outline-offset: 2px; border-radius: 4px; }

.guest-reviews-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.guest-reviews-head h4 { margin-bottom: 0; }
.guest-reviews .rv-card { padding: 16px 18px; }
.guest-reviews-empty { color: #777; }
.guest-reviews-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; }
.rv-more { font-size: 14px; color: var(--zth-orange-deep, #b15e07); }
.testimonial-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 34px; }

@media (max-width: 991px) {
	.rv-write { position: static; margin-top: 30px; }
}

@media (max-width: 575px) {
	.rv-card { padding: 16px; }
	.rv-score strong { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.rv-rate-row label { transition: none; }
	.rv-rate-row label:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Shillings under a dollar price. Dollars are the price; this is the courtesy
   line, so it never competes with the figure above it.
--------------------------------------------------------------------------- */
.price-tzs {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: #9096a3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.card-price .price-tzs { font-size: 11.5px; }
.detail-price .price-tzs { font-size: 13px; margin-top: 4px; }
.bq-total-figure small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: #8a7c6a;
	margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Error and offline pages: the logo alone at the top, and quick links that
   read as links rather than grey text.
--------------------------------------------------------------------------- */
.site-header-bare {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 22px 16px;
	background: #fff;
	border-bottom: 1px solid #f0f1f5;
}

.site-header-bare img { max-height: 46px; width: auto; }

/* These pages have no fixed header to clear any more, so the padding that
   pushed the message clear of one would stranded it down the page instead. */
.site-header-bare ~ .error-page,
.site-header-bare ~ .error-page.section-gap { padding-top: 60px; }

.error-links a,
.offline-contact a {
	color: var(--zth-orange-deep, #b15e07);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.error-links a:hover,
.error-links a:focus-visible,
.offline-contact a:hover,
.offline-contact a:focus-visible {
	color: var(--zth-orange, #f68712);
	text-decoration-thickness: 2px;
}

.offline-contact { font-size: 14px; color: #777; margin-top: 4px; }

@media (max-width: 575px) {
	.site-header-bare { padding: 16px 16px; }
	.site-header-bare img { max-height: 38px; }
	.site-header-bare ~ .error-page,
	.site-header-bare ~ .error-page.section-gap { padding-top: 40px; }
}

/* ---------------------------------------------------------------------------
   Cloudflare Turnstile. The widget sizes itself; this only gives it room and
   keeps it from fighting the float on the contact form.
--------------------------------------------------------------------------- */
.turnstile-field { margin: 0 0 14px; }
.turnstile-field .cf-turnstile { display: block; min-height: 65px; }
.turnstile-left { clear: both; text-align: left; }
.turnstile-centred { display: flex; justify-content: center; margin-bottom: 18px; }

@media (max-width: 575px) {
	.turnstile-field { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------------------
   Checking your own booking.
--------------------------------------------------------------------------- */
.status-card {
	background: #fff;
	border: 1px solid #e6e6ea;
	border-left: 4px solid var(--zth-orange, #f68712);
	border-radius: 8px;
	padding: 28px 30px;
}

.status-card.status-confirmed { border-left-color: #128c4a; }
.status-card.status-cancelled { border-left-color: #b42318; }
.status-card.status-completed { border-left-color: #55607a; }

.status-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zth-orange-deep, #b15e07);
	background: #fdf1e5;
	border-radius: 999px;
	padding: 4px 12px;
}

.status-confirmed .status-pill { color: #0f6b3a; background: #e8f6ee; }
.status-cancelled .status-pill { color: #b42318; background: #fdeceb; }
.status-completed .status-pill { color: #55607a; background: #eef0f4; }

.status-card h2 { font-size: 21px; font-weight: 600; margin: 12px 0 8px; text-wrap: balance; }
.status-explains { color: #555; margin-bottom: 20px; }

.status-facts { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.status-facts td { padding: 9px 0; border-bottom: 1px solid #f1f1f4; font-size: 14px; }
.status-facts td:first-child { color: #888; width: 42%; }
.status-facts code { font-size: 14px; color: var(--zth-orange-deep, #b15e07); }

.status-actions { margin: 0; }
/* Now an anchor rather than a submit button: the voucher download it used to
   be was removed, and checking another booking took its place. */
.status-actions .primary-btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none; }
.status-again { margin: 16px 0 0; font-size: 14px; }

/* A listing whose search sits in the hero rather than below it.

   The bar normally pulls itself up 40px to tuck under a centred page title;
   inside the banner there is nothing to tuck under, so that pull goes. The
   banner centres its text, and a form is not text. */
.banner-tools {
	/* Six dropdowns share one row here, and at 880px they clipped their own
	   labels — "Any rating" rendered as "Any ratin". The hero runs the full
	   width of the page, so the card may as well. */
	max-width: 1100px;
	/* The heading needs room above the search; they were reading as one block. */
	margin: 40px auto 0;
	text-align: left;
}

/* "Recommended" is the longest label of the six and was losing its last
   letter; the arrow does not need 30px of clearance to sit in. */
.banner-tools .lf-field { flex: 1 1 165px; }
.banner-tools .lf-field select { padding-right: 24px; }

.banner-tools .listing-filters {
	margin: 0;
	box-shadow: 0 10px 30px rgba(12, 18, 28, .22);
}

/* On the photo, the count reads better inside the card than under it. */
.banner-tools .lf-summary { margin-bottom: 0; }

@media (max-width: 767px) {
	.banner-tools { margin-top: 18px; }
}

/* Area tabs under a listing's heading. They wrap rather than scroll: five of
   them fit two rows on a phone, and a sideways-scrolling row hides the areas
   at its right edge with nothing to say they are there. */
.area-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 28px;
}

.area-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	font-size: 14px;
	color: #555;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 100px;
	transition: border-color .2s, color .2s;
}

.area-tab:hover { color: #222; border-color: #cfd2d8; }

.area-tab.is-on {
	color: #fff;
	background: var(--zth-orange, #f68712);
	border-color: var(--zth-orange, #f68712);
	font-weight: 500;
}

.at-count {
	font-size: 11px;
	line-height: 1;
	color: #777;
	background: #f1f2f4;
	border-radius: 100px;
	padding: 4px 7px;
}

.area-tab.is-on .at-count { color: #fff; background: rgba(255, 255, 255, .26); }


/* ---------------------------------------------------------------------------
   Homepage hero: services, actions and proof on the left, a hotel search on
   the right.

   Solid surfaces on the photograph rather than frosted ones: the tiles and the
   card are white, the one accent is the brand orange, and WhatsApp keeps its
   own green because that is the colour people look for.
   --------------------------------------------------------------------------- */

/* main.js fixes the row to exactly the window's height and .hero hides
   overflow, so a left column taller than the screen was cut off rather than
   scrolled. Let it grow: at least a screen, more when the content needs it. */
@media (min-width: 768px) {
	.hero .fullscreen {
		height: auto !important;
		min-height: max(740px, 100vh);
		padding-bottom: 70px;
	}
}

.hero-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	max-width: 480px;
	margin: 30px 0 26px;
}

.hero-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 8px;
	background: #fff;
	color: #1d2430;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s, color .2s, transform .2s;
}

.hero-service i { font-size: 24px; line-height: 1; color: var(--zth-orange, #f68712); transition: color .2s; }
.hero-service:hover { background: var(--zth-orange, #f68712); color: #fff; transform: translateY(-2px); }
.hero-service:hover i { color: #fff; }
.hero-service:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.hero-chat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 26px;
	background: #128c4a;
	color: #fff;
	border-radius: 6px;
	font-weight: 500;
	text-decoration: none;
}

.hero-chat:hover { background: #0f7a40; color: #fff; }
.hero-actions .primary-btn { height: 50px; line-height: 50px; padding: 0 26px; }

.hero-proof { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; }
.hero-proof strong { font-weight: 600; }
.hero-faces { display: flex; }

.hero-faces span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--zth-orange-deep, #b15e07);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.hero-faces span:first-child { margin-left: 0; }

/* The search card. */
.hero-search {
	background: #fff;
	border-radius: 12px;
	padding: 26px 24px;
	box-shadow: 0 20px 50px rgba(4, 9, 30, .35);
}

.hs-title { font-size: 22px; font-weight: 600; color: #1d2430; margin: 0 0 4px; }
.hs-sub { font-size: 13px; color: #79808a; margin: 0 0 18px; }

.hs-input { position: relative; }

.hs-input i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #9aa0a6;
	font-size: 17px;
	pointer-events: none;
}

.hs-input input {
	width: 100%;
	height: 48px;
	padding: 0 14px 0 40px;
	border: 1px solid #e6e6ea;
	border-radius: 8px;
	font-size: 14px;
	color: #333;
}

.hs-input input:focus {
	outline: none;
	border-color: var(--zth-orange, #f68712);
	box-shadow: 0 0 0 3px rgba(246, 135, 18, .16);
}

.hs-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #9aa0a6;
	margin: 18px 0 8px;
}

.hs-areas { display: flex; flex-wrap: wrap; gap: 8px; }

.hs-area {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-size: 13px;
	color: #444;
	background: #f6f7f8;
	border: 1px solid #eceef0;
	border-radius: 100px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}

.hs-area span { font-size: 11px; color: #8a8f9c; }

.hs-area:hover {
	border-color: var(--zth-orange, #f68712);
	background: #fff6ec;
	color: var(--zth-orange-deep, #b15e07);
}

.hs-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	margin-top: 18px;
	border: 0;
	cursor: pointer;
}

.hs-or {
	font-size: 13px;
	color: #79808a;
	text-align: center;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #eef0f2;
}

.hs-or a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 6px;
	padding: 5px 12px;
	border-radius: 100px;
	background: #128c4a;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.hs-or a:hover { background: #0f7a40; color: #fff; }

@media (max-width: 767.98px) {
	.hero .banner-right { margin: 30px 0 40px; }
	.hero-services { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-service { transition: none; }
	.hero-service:hover { transform: none; }
}

@media (max-width: 575.98px) {
	/* Stacked on a phone, the two actions matched neither each other's width
	   nor the tiles above them. */
	.hero-actions > a { flex: 1 1 100%; justify-content: center; }
}

/* What a quoted rate includes, under the figure: breakfast for most rooms,
   the real plan for the ones quoted on something else. */
.rate-plan,
.picker-includes {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #8a8f9c;
	line-height: 1.3;
	margin-top: 2px;
}

/* Area chips under the builder's hotel filters. */
.picker-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 16px;
}

.picker-area {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	font-size: 13px;
	color: #555;
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 100px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}

.picker-area span { font-size: 11px; color: #8a8f9c; }
.picker-area:hover { border-color: #cfd2d8; color: #222; }

.picker-area[aria-pressed="true"] {
	color: #fff;
	background: var(--zth-orange, #f68712);
	border-color: var(--zth-orange, #f68712);
}

.picker-area[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }
.picker-area:focus-visible { outline: 2px solid var(--zth-orange, #f68712); outline-offset: 2px; }

/* Transfer search card — resources/views/partials/transfer-search.blade.php.
   Two rows of pill chips (pickup point, then arrival/departure/round trip —
   the same visual language as .area-tab elsewhere), a destination and party
   size, then dates. */
.ts-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 20, 43, .08), 0 2px 8px rgba(20, 20, 43, .05);
	padding: 22px 24px 26px;
	max-width: 760px;
	margin: 0 auto 40px;
}

.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ts-chips-sub { margin-bottom: 20px; }

/* A native radio, visually hidden, driving a pill label — same shape as
   .area-tab, but a real input so the page needs no script to work. */
.ts-chip { position: relative; }

.ts-chip-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ts-chip-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	font-size: 14px;
	color: #555;
	background: #fff;
	border: 1px solid #e6e6ea;
	border-radius: 100px;
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}

.ts-chip-input:hover + .ts-chip-label { color: #222; border-color: #cfd2d8; }

.ts-chip-input:checked + .ts-chip-label {
	color: #fff;
	background: var(--zth-orange, #f68712);
	border-color: var(--zth-orange, #f68712);
	font-weight: 500;
}

.ts-chip-input:focus-visible + .ts-chip-label { outline: 2px solid var(--zth-orange, #f68712); outline-offset: 2px; }

.ts-chip-count {
	font-size: 11px;
	line-height: 1;
	color: #777;
	background: #f1f2f4;
	border-radius: 100px;
	padding: 4px 7px;
}

.ts-chip-input:checked + .ts-chip-label .ts-chip-count { color: #fff; background: rgba(255, 255, 255, .26); }

.ts-chip-sm .ts-chip-label { padding: 7px 14px; font-size: 13px; }

.ts-toolbar { display: flex; align-items: stretch; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

.ts-vehicles { margin-bottom: 20px; }

.ts-vehicles-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #79808a;
	text-align: center;
	margin: 0 0 10px;
}

.ts-vehicle-cards { display: flex; gap: 10px; flex-wrap: wrap; }

.ts-vehicle-card { position: relative; flex: 1 1 140px; }

.ts-vehicle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ts-vehicle-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding: 16px 10px;
	border: 1px solid #dfe1e5;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.ts-vehicle-body i { font-size: 26px; color: #5f6368; }
.ts-vehicle-body strong { font-size: 14px; color: #1d2430; }
.ts-vehicle-body small { font-size: 12px; color: #8a8f9c; }

.ts-vehicle-input:hover + .ts-vehicle-body { border-color: #cfd2d8; }

.ts-vehicle-input:checked + .ts-vehicle-body {
	background: rgba(246, 135, 18, .08);
	border-color: var(--zth-orange, #f68712);
	border-width: 2px;
	padding: 15px 9px;
}

.ts-vehicle-input:checked + .ts-vehicle-body i,
.ts-vehicle-input:checked + .ts-vehicle-body strong { color: var(--zth-orange-deep, #b15e07); }

.ts-vehicle-input:focus-visible + .ts-vehicle-body { outline: 2px solid var(--zth-orange, #f68712); outline-offset: 2px; }

@media (max-width: 575.98px) {
	.ts-vehicle-card { flex: 1 1 calc(50% - 5px); }
}

.ts-field {
	flex: 1 1 240px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	min-width: 0;
	border: 1px solid #dfe1e5;
	border-radius: 10px;
}

.ts-field i { color: #5f6368; font-size: 18px; flex-shrink: 0; }

.ts-field select {
	border: none;
	outline: none;
	width: 100%;
	font-size: 15px;
	color: #1d2430;
	background: transparent;
	appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
	padding: 14px 0;
}

.ts-actions { display: flex; justify-content: center; margin-top: 20px; }

.ts-search-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--zth-orange, #f68712);
	color: #fff;
	border: none;
	padding: 12px 30px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background .2s;
}

.ts-search-btn:hover { background: var(--zth-orange-deep, #b15e07); color: #fff; }

.ts-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
	font-size: 13px;
	color: #79808a;
	flex-wrap: wrap;
	text-align: center;
}

.ts-foot select { border: none; background: none; color: #79808a; font: inherit; cursor: pointer; }
.ts-clear { color: var(--zth-orange-deep, #b15e07); font-weight: 500; }
.ts-clear:hover { color: var(--zth-orange, #f68712); }

.ts-dates {
	display: flex;
	align-items: stretch;
	border: 1px solid #dfe1e5;
	border-radius: 10px;
	margin-top: 12px;
}

.ts-date-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; min-width: 0; }

.ts-date-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #79808a; }

.ts-date-field input {
	border: none;
	outline: none;
	font-size: 15px;
	color: #1d2430;
	background: transparent;
	width: 100%;
	padding: 0;
}

.ts-date-field.is-disabled { opacity: .45; }
.ts-date-field.is-disabled input { cursor: not-allowed; }

.ts-date-divider { width: 1px; background: #dfe1e5; }

@media (max-width: 575.98px) {
	.ts-dates { flex-direction: column; }
	.ts-date-divider { width: 100%; height: 1px; }
}

.contact-intro {
	max-width: 700px;
	margin: 0 0 50px;
	text-align: left;
	font-size: 15px;
	line-height: 1.75;
	color: #6a7695;
	border-left: 3px solid #f68712;
	padding-left: 24px;
}

.contact-intro h3 {
	font-size: 22px;
	font-weight: 700;
	color: #2f3c56;
	margin-bottom: 12px;
}

.contact-intro p { margin-bottom: 14px; }
.contact-intro p:last-child { margin-bottom: 0; }
.contact-intro strong { color: #2f3c56; }

.floating-actions {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.fab {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #fff;
	border: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.fab:hover,
.fab:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
	color: #fff;
}

.fab-whatsapp { background: #25d366; }
.fab-top { background: #f68712; font-size: 22px; }

@media (max-width: 575.98px) {
	.floating-actions { right: 14px; bottom: 14px; gap: 10px; }
	.fab { width: 46px; height: 46px; font-size: 21px; }
}