/* ==========================================================================
   MC Peru Expeditions — Single Trip page overrides
   Scope: only loads on is_singular('trip') (see functions.php)
   ========================================================================== */

:root {
	--primary-color: #1f4d3d !important;
	--wpte-primary-color: #1f4d3d !important;
	--primary-color-rgb: 31, 77, 61 !important;
	--wpte-primary-color-rgb: 31, 77, 61 !important;
	--mcperu-green: #1f4d3d;      /* update to match exact brand green */
	--mcperu-green-dark: #163a2e;
	--mcperu-orange: #e08e2b;     /* "Best Seller" badge */
	--mcperu-text: #22282a;
	--mcperu-muted: #6b7280;
	--mcperu-border: #e5e7eb;
	--mcperu-radius: 12px;
}

/* ---------- 1. Gallery grid (large + 3 thumbnails + View all photos) ---------- */

.mcperu-grid-gallery { margin-bottom: 24px; }

.mcperu-grid-gallery__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	border-radius: var(--mcperu-radius);
	overflow: hidden;
}

.mcperu-grid-gallery__cell {
	position: relative;
	overflow: hidden;
	min-height: 140px;
}
.mcperu-grid-gallery__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Large image spans both rows, first column */
.mcperu-cell-0 { grid-row: 1 / 3; grid-column: 1; }
.mcperu-cell-1 { grid-row: 1; grid-column: 2; }
.mcperu-cell-2 { grid-row: 1; grid-column: 3; }
.mcperu-cell-3 { grid-row: 2; grid-column: 2 / 4; }

/* Fewer than 4 images: let grid collapse gracefully */
.mcperu-grid-count-1 .mcperu-grid-gallery__inner,
.mcperu-grid-count-2 .mcperu-grid-gallery__inner,
.mcperu-grid-count-3 .mcperu-grid-gallery__inner {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
.mcperu-grid-count-1 .mcperu-cell-0,
.mcperu-grid-count-2 .mcperu-cell-0,
.mcperu-grid-count-3 .mcperu-cell-0 { grid-column: 1; grid-row: auto; min-height: 420px; }

.mcperu-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--mcperu-orange);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
}

.mcperu-view-all-trigger {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mcperu-view-all-trigger:hover { background: rgba(0,0,0,0.8); }

.mcperu-view-all-trigger--under {
	position: static;
	margin-top: 10px;
	background: #f3f4f6;
	color: var(--mcperu-text);
}

@media (max-width: 782px) {
	.mcperu-grid-gallery__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.mcperu-cell-0, .mcperu-cell-1, .mcperu-cell-2, .mcperu-cell-3 {
		grid-column: 1;
		grid-row: auto;
		min-height: 220px;
	}
	.mcperu-cell-1, .mcperu-cell-2, .mcperu-cell-3 { display: none; } /* mobile: show only hero + View all */
}

/* ---------- 1b. ACTIVE gallery template on this site: banner-layouts/list.php
   (classes .wpte-multi-banner-layout / .wpte-multi-banner-image). The
   main-gallery.php override above is not used by your current banner-layout
   setting, so style the real markup directly instead. ---------- */

.wpte-multi-banner-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	border-radius: var(--mcperu-radius);
	overflow: hidden;
	position: relative;
}
.wpte-multi-banner-layout .wpte-multi-banner-image {
	position: relative;
	overflow: hidden;
	height: 139px; /* +7% more per follow-up request */
}
.wpte-multi-banner-layout .wpte-multi-banner-image img,
.wpte-multi-banner-layout .wpte-multi-banner-image a {
	display: block;
	height: 100%;
	width: 100%;
}
.wpte-multi-banner-layout .wpte-multi-banner-image img {
	object-fit: cover;
}
.wpte-multi-banner-layout .wpte-multi-banner-image:first-child {
	grid-row: 1 / 3;
	grid-column: 1;
	height: 288px; /* = 2 x 139px + row gap */
}
.wpte-multi-banner-layout .wpte-multi-banner-image:first-child::after {
	content: '\1F3C6  Best Seller';
	position: absolute;
	top: 16px;
	left: 16px;
	background: #27A222;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	pointer-events: none;
}

.wpte-gallery-container { position: relative; }
.wte-trip-image-gal-popup-trigger {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background: rgba(0,0,0,0.65) !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 8px 14px !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
	width: max-content;
	max-width: none;
}
.wte-trip-image-gal-popup-trigger::before {
	content: '\1F5BC';
	font-size: 14px;
	line-height: 1;
}
.wte-trip-image-gal-popup-trigger:hover { background: rgba(0,0,0,0.8) !important; }

@media (max-width: 782px) {
	.wpte-multi-banner-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
	.wpte-multi-banner-layout .wpte-multi-banner-image { grid-column: 1; grid-row: auto; }
	.wpte-multi-banner-layout .wpte-multi-banner-image:not(:first-child) { display: none; }
}

/* ---------- 2. Title + trip-facts pill row (1 Day / Moderate Hike / etc.) ---------- */

.entry-header .entry-title {
	font-size: 32px;
	margin-bottom: 6px;
}
@media (max-width: 767px) {
	.entry-header .entry-title { font-size: 24px; }
}

.wte-trip-facts .trip-facts-value,
.secondary-trip-info .trip-facts-value {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
}
.wte-trip-facts .trip-facts-value li,
.secondary-trip-info .trip-facts-value li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f3f4f6;
	border: 1px solid var(--mcperu-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--mcperu-text);
}
.wte-trip-facts .icon-holder svg,
.secondary-trip-info .icon-holder svg { width: 14px; height: 14px; }
.wte-trip-facts label { display: none; } /* reference design shows value only, no label prefix */

/* ---------- 3. Tabs nav (Overview / Highlights / Itinerary / Included / FAQ / Reviews) ---------- */

.nav-tab-wrapper {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--mcperu-border);
	margin-bottom: 24px;
}
/* No custom mobile override here on purpose: WP Travel Engine already ships
   its own well-built mobile tab design (vertical accordion list with a
   dropdown chevron per tab). My earlier attempt to force horizontal-scroll
   tabs on mobile fought that native design and produced a broken/boxed look.
   Leaving the plugin's own mobile CSS in control. */
.nav-tab-wrapper .nav-tab:focus { outline: none; }
.nav-tab-wrapper .nav-tab { -webkit-tap-highlight-color: transparent; }
.nav-tab-wrapper .nav-tab {
	padding: 10px 0;
	font-weight: 600;
	color: var(--mcperu-muted);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.nav-tab-wrapper .nav-tab.nav-tab-active,
.nav-tab-wrapper .nav-tab:hover {
	color: var(--mcperu-green);
	border-bottom-color: var(--mcperu-green);
}

/* All tab panels now render stacked (wte_single_trip_show_all_tabs = true),
   so give each section room and a clear heading instead of looking like one
   crammed block. */
.nb-configurations {
	scroll-margin-top: 100px; /* keeps the section clear of a sticky header when jumped to */
	padding-bottom: 32px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--mcperu-border);
}
.nb-configurations:last-child { border-bottom: none; }

/* ---------- 4. Itinerary — the plugin already ships a dashed-line +
   circular pin-marker timeline design (see wte-ai-front.css /
   dist/public/single-trip.css .itinerary-row rules with heavy !important
   usage). Rather than fight that CSS with competing !important rules, we
   let it render as-is — the --primary-color variable set above already
   reskins its dots/pins/active-tab-color to the brand green. Only the
   "Expand all" switch (no native styling shipped) is custom below. ---------- */

/* Real "Expand all" switch markup on this site:
   <div class="aib-button-toggle expand-all-button"><label>...</label><input type="checkbox" class="checkbox"></div> */
.aib-button-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.aib-button-toggle .aib-button-label { color: var(--mcperu-muted); font-size: 14px; }

/* ---------- 4b. Highlights — 2-column icon checklist ---------- */
/* Content is already injected automatically by WP Travel Engine right after
   the Overview text (native hook); this only restyles it. No PHP change. */

.wpte-trip-highlights-title { margin-top: 28px; font-size: 20px; }
.wpte-trip-highlights {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}
.wpte-trip-highlights .trip-highlight {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	color: var(--mcperu-text);
}
.wpte-trip-highlights .trip-highlight::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mcperu-green);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}
@media (max-width: 600px) {
	.wpte-trip-highlights { grid-template-columns: 1fr; }
}

/* ---------- 4c. Included / Not Included / Reviews — ONE 3-column row,
   FULL PAGE WIDTH ----------
   This content normally lives inside the 69%-width content column (next to
   the booking sidebar). Rather than fight that with a CSS visual trick
   (which broke badly nested this deep — content shifted off-screen), the
   JS in wpte-single-trip.js physically MOVES these `.mcperu-full-bleed-outer`
   wrapper divs to sit as siblings of the sidebar row itself, so they inherit
   normal full-width sizing with zero CSS hacks. This block only styles what's
   INSIDE the wrapper. */

.mcperu-full-bleed-outer { width: 100%; }
.mcperu-full-bleed-inner { width: 100%; }

.mcperu-cost-row .mcperu-full-bleed-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px;
	align-items: start;
}
.mcperu-cost-row .wpte-cost-tab-title { grid-column: 1 / -1; margin: 0; }
.mcperu-cost-row .post-data.cost { display: contents; }

.post-data.cost .content {
	border: 1px solid var(--mcperu-border);
	border-radius: var(--mcperu-radius);
	padding: 18px 20px;
}
.post-data.cost .content h3 { margin-top: 0; font-size: 16px; }
.post-data.cost .content ul { list-style: none; padding: 0; margin: 0; }
.post-data.cost .content li {
	position: relative;
	padding: 3px 0 3px 30px;
	font-size: 14px;
	line-height: 1.4;
}
.post-data.cost .content li:empty { display: none; } /* removes the stray extra check/x icon with no label */
.post-data.cost #include-result li::before,
.post-data.cost #exclude-result li::before {
	position: absolute;
	left: 0;
	top: 2px; /* aligns icon to the first line instead of drifting on multi-line items */
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
}
.post-data.cost #include-result li::before { content: '\2713'; color: var(--mcperu-green); }
.post-data.cost #exclude-result li::before { content: '\2715'; color: #b3413a; }

.mcperu-reviews-summary-card {
	border: 1px solid var(--mcperu-border);
	border-radius: var(--mcperu-radius);
	padding: 18px 20px;
}
.mcperu-reviews-summary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mcperu-reviews-summary-head h3 { margin: 0; font-size: 16px; }
.mcperu-view-all-reviews-link { font-size: 13px; color: var(--mcperu-green); text-decoration: none; white-space: nowrap; }
.mcperu-view-all-reviews-link:hover { text-decoration: underline; }
.mcperu-reviews-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mcperu-reviews-score-num { font-size: 32px; font-weight: 700; color: var(--mcperu-text); line-height: 1; }
.mcperu-reviews-stars .star { color: #d1d5db; font-size: 14px; }
.mcperu-reviews-stars .star.filled { color: #f5a623; }
.mcperu-reviews-count { font-size: 12px; color: var(--mcperu-muted); }
.mcperu-reviews-mini-cards { display: flex; gap: 10px; overflow-x: auto; }
@media (max-width: 767px) {
	.mcperu-reviews-mini-cards { flex-wrap: wrap; overflow-x: visible; }
	.mcperu-review-mini-card { min-width: 45%; flex: 1 1 45%; }
	.mcperu-reviews-summary-head { flex-wrap: wrap; gap: 6px; }
}
.mcperu-review-mini-card { flex: 1 1 0; min-width: 120px; }
.mcperu-review-mini-card p { font-size: 12px; margin: 6px 0 0; color: var(--mcperu-muted); }
.mcperu-review-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mcperu-review-avatar {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--mcperu-green); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 12px; flex: 0 0 26px;
}

@media (max-width: 900px) {
	.mcperu-cost-row .mcperu-full-bleed-inner { grid-template-columns: 1fr !important; }
}

/* ---------- 6. Vertical rhythm tightening (item 6) ----------
   Reduces the large gaps between title/tabs, tabs/Overview, Overview/
   Highlights, Highlights/Itinerary, and inside the itinerary description.
   !important is required throughout — WP Travel Engine's own CSS sets these
   same properties with !important, so non-important overrides were losing
   regardless of load order. */

.entry-header { margin-bottom: 4px !important; }
.wpte-tabs-container .nb-configurations { padding-top: 6px !important; }
.wpte-overview-title { margin-top: 0 !important; margin-bottom: 6px !important; }
.post-data.overview p { margin: 0 0 8px !important; }
.wpte-trip-highlights-title { margin-top: 10px !important; margin-bottom: 6px !important; }
.wpte-trip-highlights { margin-bottom: 4px !important; }
.wte-itinerary-header-wrapper { margin: 4px 0 8px !important; }
.itinerary-content .content p { margin: 0 0 8px !important; }
.nav-tab-wrapper { margin-bottom: 16px !important; }

/* Highlights → Itinerary gap was still large — these two wrapper elements
   (empty by default, but still taking up line-height) weren't targeted before. */
.wp-travel-engine-itinerary-header { margin: 0 !important; padding: 0 !important; }
.wpte-itinerary-title:empty { display: none !important; margin: 0 !important; }
#nb-1-configurations, #nb-2-configurations, #nb-3-configurations { margin-bottom: 0 !important; }

/* Day-marker circle color, per request (#2AA624 instead of the darker brand green) */
.itinerary-row:first-child .title::before,
.itinerary-row.advanced-itinerary-row:first-child .title::before,
.itinerary-row:last-child .title::before,
.itinerary-row.advanced-itinerary-row:last-child .title::before {
	background-color: #2AA624 !important;
}

/* ---------- 5. Sidebar / booking widget — colour reskin only, layout untouched ---------- */


#secondary .wte-trip-price,
#secondary .wte-trip-facts,
#secondary .wte-booking-widget,
.wpte-sidebar-booking {
	border: 1px solid var(--mcperu-border);
	border-radius: var(--mcperu-radius);
}

/* WP Travel Engine's own "Check Availability" button and package-type buttons.
   Selectors below are broad on purpose — if your theme inspector shows a more
   specific class after install, tighten these rather than adding new rules. */
.wpte-btn,
.btn-continue,
.wte-checkout-btn,
a.book-button,
button.book-button,
input[type="submit"].wte-btn {
	background-color: var(--mcperu-green) !important;
	border-color: var(--mcperu-green) !important;
}
.wpte-btn:hover,
.btn-continue:hover,
.wte-checkout-btn:hover,
a.book-button:hover,
button.book-button:hover {
	background-color: var(--mcperu-green-dark) !important;
	border-color: var(--mcperu-green-dark) !important;
}

/* Removes the native "Need help with booking? Send Us A Message" link —
   this pointed at the enquiry form's scroll-anchor, which no longer exists
   in the same way since the enquiry form was replaced with Contact Us. */
.wpte-booking-footer-text { display: none !important; }

/* ---------- 5b. Contact us — replaces the native enquiry form entirely
   (Email / Phone / WhatsApp instead of a form fields), per request. ---------- */

.mcperu-contact-us {
	background: #f3f4f6;
	border-radius: var(--mcperu-radius);
	padding: 24px 32px;
	margin-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.mcperu-contact-us-text h3 { margin: 0 0 4px; font-size: 17px; }
.mcperu-contact-us-text p { margin: 0; font-size: 13px; color: var(--mcperu-muted); }
.mcperu-contact-us-options { display: flex; gap: 14px; flex-wrap: wrap; }
.mcperu-contact-option {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--mcperu-border); border-radius: 8px;
	padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--mcperu-text);
	text-decoration: none; white-space: nowrap;
}
.mcperu-contact-option:hover { border-color: var(--mcperu-green); color: var(--mcperu-green); }
.mcperu-contact-option.mcperu-contact-whatsapp {
	background: var(--mcperu-green); color: #fff; border-color: var(--mcperu-green);
}
.mcperu-contact-option.mcperu-contact-whatsapp:hover { background: var(--mcperu-green-dark); color: #fff; }
.mcperu-contact-icon { font-size: 16px; }
@media (max-width: 600px) {
	.mcperu-contact-us { flex-direction: column; align-items: stretch; }
	.mcperu-contact-us-options { flex-direction: column; }
}

/* ---------- 5c. Sidebar: Popular Tours box (fills space left by removing
   Related Trips, per item 5) ---------- */

.mcperu-popular-tours {
	border: 1px solid var(--mcperu-border);
	border-radius: var(--mcperu-radius);
	padding: 20px;
	margin-top: 16px;
	background: #fff;
}
.mcperu-popular-tours h4 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mcperu-text);
	display: flex;
	align-items: center;
	gap: 8px;
}
.mcperu-popular-tours h4::before {
	content: '\1F9ED'; /* compass emoji */
	font-size: 16px;
}
.mcperu-popular-tours ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mcperu-tour-num;
}
.mcperu-popular-tours li {
	counter-increment: mcperu-tour-num;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mcperu-border);
}
.mcperu-popular-tours li:last-child { border-bottom: none; padding-bottom: 0; }
.mcperu-popular-tours li:first-child { padding-top: 0; }
.mcperu-popular-tours li::before {
	content: counter(mcperu-tour-num);
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mcperu-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mcperu-popular-tours a {
	color: var(--mcperu-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.15s;
}
.mcperu-popular-tours li:hover a { color: var(--mcperu-green); }
.mcperu-popular-tours li:hover::before { background: var(--mcperu-green-dark); }

/* ---------- 5d. Sidebar: trust badges under Check Availability (item 8) ---------- */

.mcperu-trust-badges {
	border: 1px solid var(--mcperu-border);
	border-radius: var(--mcperu-radius);
	padding: 16px 18px;
	margin-top: 16px;
}
.mcperu-trust-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mcperu-trust-item:last-child { margin-bottom: 0; }
.mcperu-trust-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--mcperu-green); }
.mcperu-trust-icon svg { width: 100%; height: 100%; }
.mcperu-trust-item strong { display: block; font-size: 13px; color: var(--mcperu-text); }
.mcperu-trust-item p { margin: 2px 0 0; font-size: 12px; color: var(--mcperu-muted); }
.mcperu-trust-footer {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mcperu-border);
	font-size: 12px; color: var(--mcperu-muted);
}
.mcperu-trust-footer svg { width: 14px; height: 14px; color: var(--mcperu-green); }

/* ---------- 6. Related trips strip — leave WPTE's own markup, just tidy card radius ---------- */
.wte-related-trips .trip,
.related-trips .trip-thumbnail {
	border-radius: var(--mcperu-radius);
	overflow: hidden;
}

/* ---------- 7. Custom Reviews section (theme-built, see functions.php) — full list + form ---------- */

.mcperu-reviews-section { padding-top: 8px; }

.mcperu-review-row { border-bottom: 1px solid var(--mcperu-border); padding: 16px 0; }
.mcperu-review-row p { font-size: 14px; margin: 6px 0 0; }

.mcperu-leave-review-toggle {
	background: var(--mcperu-green);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	margin-top: 4px;
}
.mcperu-leave-review-toggle:hover { background: var(--mcperu-green-dark); }
.mcperu-review-form #reply-title { display: none; } /* redundant — the toggle button already says "Leave a review" */
.mcperu-review-form { margin-top: 12px; }
.mcperu-review-form #respond { max-width: 480px; }
.mcperu-review-form textarea,
.mcperu-review-form input[type="text"],
.mcperu-review-form input[type="email"] {
	width: 100%; border: 1px solid var(--mcperu-border); border-radius: 8px;
	padding: 10px 12px; font-size: 14px; box-sizing: border-box; margin-bottom: 10px;
}
.mcperu-star-input-row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.mcperu-star-input-row label { display: inline; margin: 0; cursor: pointer; }
.mcperu-star-input-row input { display: none; }
.mcperu-star-input-row span { font-size: 22px; color: #d1d5db; }
.mcperu-star-input-row input:checked ~ span,
.mcperu-star-input-row label:hover span,
.mcperu-star-input-row label:hover ~ label span { color: #f5a623; }
.mcperu-review-form #submit {
	background: var(--mcperu-green) !important; color: #fff !important;
	border: none; border-radius: 8px; padding: 12px 28px !important; font-weight: 600; cursor: pointer;
}