/* Front-end styling for plugin-rendered blocks. Colour tokens match the
   theme.json palette by value (kept independent so the plugin never hard-
   depends on the theme being active) — Build Spec v2 §0.2: ticks green,
   crosses red, meaning also carried by the ✓/✗ glyph shape for accessibility.

   Section below the divider ports the handed-over trek-page design mockup
   (step 19 design pass) into the plugin's rendered markup. Values (spacing,
   radii, shadows) are taken directly from that mockup; colours reference the
   same hex values as theme.json §1 so a palette change only needs updating
   in one place conceptually, even though this file keeps its own literals
   for theme independence. */

.snh-tick { color: #2e9e5b; }
.snh-cross { color: #d64545; }
.snh-amber { color: #d97706; }

:root {
	--snh-ink: #182322;
	--snh-ink-soft: #5c6564;
	--snh-brand: #0098b0;
	--snh-brand-deep: #00697c;
	--snh-brand-ink: #00434f;
	--snh-gold: #c2953f;
	--snh-gold-soft: #e7cf9b;
	--snh-night: #0c1e22;
	--snh-night-2: #103038;
	--snh-paper: #fff;
	--snh-bg: #f2f5f5;
	--snh-cloud: #e9eeee;
	--snh-line: #d7dfdf;
	--snh-line-soft: #e4eaea;
	--snh-ok: #2e9e5b;
	--snh-red: #d64545;
	--snh-mono: "IBM Plex Mono", ui-monospace, monospace;
	--snh-shadow-sm: 0 1px 2px rgba(15,40,45,.04), 0 8px 24px rgba(15,40,45,.06);
	--snh-shadow-md: 0 18px 50px rgba(10,45,52,.14);
}

.snh-difficulty {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.snh-difficulty-toggle {
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: 1.4px solid var(--snh-brand);
	color: var(--snh-brand);
	background: transparent;
	cursor: pointer;
	font-family: var(--snh-mono);
}
.snh-difficulty-tooltip {
	position: absolute;
	left: 0;
	top: calc(100% + 10px);
	z-index: 40;
	width: 310px;
	max-width: 80vw;
	background: var(--snh-night);
	color: #eaf3f3;
	border-radius: 12px;
	padding: 16px;
	box-shadow: var(--snh-shadow-md);
}
@media (hover: hover) {
	.snh-difficulty:hover .snh-difficulty-tooltip { display: block; }
}
.snh-difficulty-row {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid rgba(255,255,255,.1);
}
.snh-difficulty-row:first-of-type { border-top: 0; }
.snh-difficulty-row dt {
	font-weight: 800;
	font-size: 0.8rem;
	color: #fff;
	min-width: 100px;
}
.snh-difficulty-row dd {
	font-size: 0.72rem;
	color: #a6c2c3;
	line-height: 1.4;
	margin: 0;
}
.snh-difficulty-row.is-current dt { color: var(--snh-brand); }
.snh-difficulty-row.is-current dt::after {
	content: " · this trek";
	font-family: var(--snh-mono);
	font-size: 0.55rem;
	font-weight: 500;
	color: var(--snh-gold-soft);
	letter-spacing: .04em;
}
@media (max-width: 600px) {
	.snh-difficulty-tooltip { position: fixed; left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; max-width: none; }
}

/* ---- Hero / gallery / facts strip ------------------------------------- */

.snh-hero-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.snh-region-ref {
	font-family: var(--snh-mono);
	font-size: 0.75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snh-brand-deep);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.snh-region-ref .ref {
	color: var(--snh-ink-soft);
	border-left: 1px solid var(--snh-line);
	padding-left: 10px;
}
.snh-award-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--snh-mono);
	font-size: 0.68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--snh-gold);
	border: 1px solid rgba(194,149,63,.4);
	border-radius: 100px;
	padding: 6px 12px;
}

.snh-facts-strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--snh-line-soft);
	border: 1px solid var(--snh-line-soft);
	border-radius: 12px;
	overflow: hidden;
	margin: 24px 0 36px;
}
@media (max-width: 820px) { .snh-facts-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .snh-facts-strip { grid-template-columns: repeat(2, 1fr); } }
.snh-fact {
	background: var(--snh-paper);
	padding: 16px 18px;
}
.snh-fact .k {
	font-family: var(--snh-mono);
	font-size: 0.66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snh-ink-soft);
	margin-bottom: 6px;
}
.snh-fact .v {
	font-weight: 800;
	font-size: 1.02rem;
}

/* ---- Two-column layout + content sections ------------------------------ */

.snh-trek-layout {
	display: grid;
	grid-template-columns: 1fr 372px;
	gap: 44px;
	align-items: start;
	padding-bottom: 40px;
}
@media (max-width: 980px) {
	.snh-trek-layout { grid-template-columns: 1fr; }
	.snh-booking-panel { position: static !important; order: -1; margin-bottom: 20px; }
}
.snh-sec {
	padding: 34px 0;
	border-top: 1px solid var(--snh-line-soft);
}
.snh-sec:first-child { border-top: 0; padding-top: 6px; }

.snh-highlights {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 26px;
}
@media (max-width: 600px) { .snh-highlights { grid-template-columns: 1fr; } }
.snh-highlights li {
	display: flex;
	gap: 11px;
	font-size: 0.94rem;
}
.snh-highlights li::before {
	content: "✓";
	color: var(--snh-brand);
	flex: none;
}

/* ---- Itinerary accordion ------------------------------------------------ */

.snh-itinerary { border: 1px solid var(--snh-line-soft); border-radius: 12px; overflow: hidden; background: var(--snh-paper); }
.snh-itinerary-days { list-style: none; margin: 0; padding: 0; }
.snh-itinerary-day { border-top: 1px solid var(--snh-line-soft); }
.snh-itinerary-day:first-child { border-top: 0; }
.snh-itinerary-day h3 {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	margin: 0;
	font-size: 1rem;
	cursor: pointer;
}
.snh-itinerary-day h3::before {
	content: attr(data-day-num);
	font-family: var(--snh-mono);
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--snh-brand);
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.snh-itinerary-day p { padding: 0 18px 18px 72px; color: var(--snh-ink-soft); font-size: 0.9rem; margin: 0; }
.snh-itinerary-meta {
	list-style: none;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 6px 0 0 72px;
	padding: 0 18px 18px 0;
	font-family: var(--snh-mono);
	font-size: 0.72rem;
	color: var(--snh-ink-soft);
}
.snh-itinerary-duration {
	font-family: var(--snh-mono);
	font-size: 0.8rem;
	color: var(--snh-ink-soft);
	padding: 14px 18px 0;
}
.snh-itinerary-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-weight: 700;
	color: var(--snh-brand-deep);
}

/* ---- Elevation chart ---------------------------------------------------- */

.snh-elevation {
	background: var(--snh-night);
	border-radius: 12px;
	padding: 26px;
	position: relative;
	overflow: hidden;
}
.snh-elevation .lbl {
	font-family: var(--snh-mono);
	font-size: 0.68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7fb8c2;
	margin-bottom: 16px;
}
.snh-elevation svg { width: 100%; height: 170px; display: block; }
.snh-elevation .peak { font-family: var(--snh-mono); font-size: 10px; fill: #dcecec; }
.snh-elevation .peakm { font-family: var(--snh-mono); font-size: 9px; fill: #7fb8c2; }

/* ---- Tier comparison ----------------------------------------------------- */

.snh-tier-comparison {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 782px) { .snh-tier-comparison { grid-template-columns: repeat(3, 1fr); } }
.snh-tier-card {
	border: 1px solid var(--snh-line-soft);
	border-radius: 12px;
	overflow: hidden;
	background: var(--snh-paper);
}
.snh-tier-card h3 {
	background: var(--snh-night);
	color: #fff;
	padding: 16px;
	margin: 0;
	font-size: 1.05rem;
}
.snh-tier-price {
	font-family: var(--snh-mono);
	font-size: 0.75rem;
	color: var(--snh-ink-soft);
	padding: 12px 16px 0;
	margin: 0;
}
.snh-tier-amenities { padding: 4px 16px 16px; font-size: 0.85rem; }
.snh-tier-amenities p { margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid var(--snh-line-soft); }

.snh-inclusions-exclusions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
@media (min-width: 600px) { .snh-inclusions-exclusions { grid-template-columns: 1fr 1fr; } }
.snh-inclusions h4, .snh-exclusions h4 {
	font-family: var(--snh-mono);
	font-size: 0.68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snh-ink-soft);
	margin: 0 0 8px;
}
.snh-inclusions ul, .snh-exclusions ul { list-style: none; margin: 0; padding: 0; }
.snh-inclusions li, .snh-exclusions li {
	display: flex;
	gap: 10px;
	font-size: 0.9rem;
	padding: 7px 0;
	border-bottom: 1px solid var(--snh-line-soft);
}

/* ---- Info cards / know-before-you-go ------------------------------------ */

.snh-info-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 600px) { .snh-info-cards { grid-template-columns: 1fr; } }
.snh-info-card {
	background: var(--snh-paper);
	border: 1px solid var(--snh-line-soft);
	border-radius: 10px;
	padding: 18px;
}
.snh-info-card .h {
	font-family: var(--snh-mono);
	font-size: 0.68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--snh-brand-deep);
	margin-bottom: 9px;
}
.snh-info-card p { font-size: 0.85rem; color: var(--snh-ink-soft); margin: 0; }

.snh-warn-list { list-style: none; padding: 0; margin: 0; }
.snh-warn-list li {
	display: flex;
	gap: 10px;
	font-size: 0.85rem;
	padding: 8px 0;
	border-bottom: 1px solid var(--snh-line-soft);
	color: var(--snh-ink-soft);
}
.snh-warn-list li:last-child { border-bottom: 0; }
.snh-warn-list li::before { content: "!"; color: var(--snh-gold); font-weight: 800; flex: none; }
.snh-warn-list b { color: var(--snh-ink); }

/* ---- Guide / agency compliance note (per-product; never a named guide) -- */

.snh-agency-credibility { display: flex; flex-direction: column; gap: 14px; }
.snh-agency-credibility .snh-guide-note {
	display: flex;
	gap: 16px;
	background: var(--snh-paper);
	border: 1px solid var(--snh-line-soft);
	border-radius: 12px;
	padding: 20px;
}
.snh-insurance-notice {
	display: flex;
	gap: 12px;
	background: var(--snh-cloud);
	border-radius: 10px;
	padding: 16px 18px;
	font-size: 0.85rem;
	color: var(--snh-ink-soft);
}

.snh-guide-grid, .snh-region-highlights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 782px) {
	.snh-guide-grid, .snh-region-highlights-grid { grid-template-columns: repeat(4, 1fr); }
}
.snh-guide-card {
	background: var(--snh-paper);
	border: 1px solid var(--snh-line-soft);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
}

/* ---- Group-size pricing (dark slider band) ------------------------------ */

.snh-group-pricing {
	background: var(--snh-night);
	color: #eaf3f3;
	border-radius: 12px;
	padding: 26px;
}
.snh-group-pricing .lbl {
	font-family: var(--snh-mono);
	font-size: 0.68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7fb8c2;
	margin-bottom: 8px;
}
.snh-group-pricing table { width: 100%; border-collapse: collapse; }
.snh-group-pricing caption {
	text-align: left;
	font-family: var(--snh-mono);
	font-size: 0.7rem;
	color: #a6c2c3;
	margin-bottom: 14px;
}
.snh-group-pricing th, .snh-group-pricing td {
	text-align: left;
	padding: 10px 0;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: 0.85rem;
}
.snh-group-pricing th { font-family: var(--snh-mono); font-weight: 500; color: #7fb8c2; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; }
.snh-group-pricing td:last-child { font-family: var(--snh-mono); color: #fff; font-weight: 600; }

/* ---- Insurance selector -------------------------------------------------- */

.snh-insurance-selector { margin-bottom: 14px; }
.snh-insurance-selector label {
	font-family: var(--snh-mono);
	font-size: 0.66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snh-ink-soft);
	display: block;
	margin-bottom: 6px;
}
.snh-insurance-selector select {
	width: 100%;
	font-weight: 600;
	color: var(--snh-ink);
	border: 1px solid var(--snh-line);
	border-radius: 7px;
	padding: 11px 12px;
	background: #fff;
}
.snh-insurance-helper { font-size: 0.75rem; color: var(--snh-ink-soft); margin-top: 7px; line-height: 1.4; }
.snh-insurance-helper:empty { display: none; }

/* ---- Weather table -------------------------------------------------------- */

.snh-weather-table { border: 1px solid var(--snh-line-soft); border-radius: 12px; overflow: hidden; background: var(--snh-paper); }
.snh-weather-unit-toggle { display: flex; border: 1px solid var(--snh-line); border-radius: 7px; overflow: hidden; width: fit-content; margin: 12px 12px 0 auto; }
.snh-weather-unit-toggle button {
	font-family: var(--snh-mono);
	font-size: 0.7rem;
	padding: 7px 14px;
	background: #fff;
	border: 0;
	color: var(--snh-ink-soft);
	cursor: pointer;
}
.snh-weather-unit-toggle button[aria-pressed="true"] { background: var(--snh-brand); color: #fff; }
.snh-weather-table table { width: 100%; border-collapse: collapse; }
.snh-weather-table thead th {
	font-family: var(--snh-mono);
	font-size: 0.66rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--snh-ink-soft);
	text-align: left;
	padding: 10px 16px;
}
.snh-weather-table td { padding: 10px 16px; border-top: 1px solid var(--snh-line-soft); font-size: 0.85rem; }
.snh-weather-table tr.snh-suitability-good { background: rgba(0,152,176,.045); }

/* ---- Booking panel (product-page aside) --------------------------------- */

.snh-booking-panel {
	position: sticky;
	top: 92px;
	background: var(--snh-paper);
	border: 1px solid var(--snh-line-soft);
	border-radius: 16px;
	box-shadow: var(--snh-shadow-md);
	overflow: hidden;
}
.snh-booking-header {
	background: var(--snh-night);
	color: #fff;
	padding: 20px 22px;
}
.snh-booking-header .from { font-family: var(--snh-mono); font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: #7fb8c2; }
.snh-booking-header .amt { font-weight: 900; font-size: 2.2rem; line-height: 1; margin-top: 4px; }
.snh-booking-header .amt .c { color: var(--snh-brand); }
.snh-booking-header .per { font-family: var(--snh-mono); font-size: 0.7rem; color: #a6c2c3; margin-top: 4px; }
.snh-booking-body { padding: 18px 22px 22px; }
.snh-field { margin-bottom: 14px; }
.snh-field label {
	font-family: var(--snh-mono);
	font-size: 0.62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--snh-ink-soft);
	display: block;
	margin-bottom: 6px;
}
.snh-field input[type="text"],
.snh-field input[type="date"],
.snh-field input[type="number"] {
	width: 100%;
	border: 1px solid var(--snh-line);
	border-radius: 7px;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-weight: 600;
}
.snh-qs-tab, .snh-tier-sel button, .snh-pay button {
	font-weight: 700;
	font-size: 0.78rem;
	padding: 9px 4px;
	border: 1px solid var(--snh-line);
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	color: var(--snh-ink-soft);
}
.snh-tier-sel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.snh-tier-sel button[aria-pressed="true"] { border-color: var(--snh-brand); background: rgba(0,152,176,.06); color: var(--snh-ink); }
.snh-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.snh-pay button[aria-pressed="true"] { border-color: var(--snh-brand); background: rgba(0,152,176,.06); color: var(--snh-ink); }
.snh-counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--snh-line);
	border-radius: 7px;
	padding: 6px 8px 6px 12px;
}
.snh-counter button {
	width: 30px;
	height: 30px;
	border: 1px solid var(--snh-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 1rem;
	color: var(--snh-brand-deep);
}
.snh-booking-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px dashed var(--snh-line);
	margin-top: 4px;
}
.snh-booking-total .tl { font-family: var(--snh-mono); font-size: 0.66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--snh-ink-soft); }
.snh-booking-total .tv { font-weight: 900; font-size: 1.4rem; }
.snh-booking-submit { width: 100%; padding: 15px; font-size: 0.9rem; }
.snh-booking-badges { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; font-size: 0.75rem; color: var(--snh-ink-soft); }
.snh-group-cta {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--snh-line-soft);
	font-family: var(--snh-mono);
	font-size: 0.72rem;
	color: var(--snh-ink-soft);
	text-align: center;
}

/* ---- Bands: reviews / credibility / cross-sell / final CTA --------------- */

.snh-cred-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px) { .snh-cred-row { grid-template-columns: 1fr 1fr; } }
.snh-cred { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 20px; background: rgba(255,255,255,.03); }
.snh-cred.is-gold { border-color: rgba(194,149,63,.4); }
.snh-cred .k { font-family: var(--snh-mono); font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: #7fb8c2; margin-bottom: 3px; }
.snh-cred.is-gold .k { color: var(--snh-gold-soft); }
.snh-cred .v { font-weight: 800; font-size: 1.1rem; color: #fff; }

.snh-trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.snh-trust-badge { font-size: 0.82rem; }

.snh-cross-sell {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
@media (min-width: 782px) { .snh-cross-sell { grid-template-columns: repeat(4, 1fr); } }
.snh-cross-sell-card {
	background: var(--snh-paper);
	border: 1px solid var(--snh-line-soft);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--snh-shadow-sm);
	transition: .3s;
	display: block;
}
.snh-cross-sell-card:hover { transform: translateY(-5px); box-shadow: var(--snh-shadow-md); }
.snh-cross-sell-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.snh-cross-sell-card span { display: block; padding: 12px; font-weight: 700; }

/* ---- FAQ ------------------------------------------------------------------ */

.snh-faq-item { border-bottom: 1px solid var(--snh-line-soft); }
.snh-faq-item summary {
	font-weight: 700;
	font-size: 0.95rem;
	padding: 16px 0;
	cursor: pointer;
	color: var(--snh-ink);
}
.snh-faq-item div { padding: 0 0 16px; color: var(--snh-ink-soft); font-size: 0.9rem; }

/* ---- UGC memories wall ----------------------------------------------------- */

.snh-memories-load { min-height: 44px; min-width: 44px; }
.snh-memories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }

/* ---- Mobile sticky booking bar --------------------------------------------- */

.snh-mobile-booking-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 70;
	background: var(--snh-paper);
	border-top: 1px solid var(--snh-line);
	box-shadow: 0 -8px 30px rgba(10,45,52,.12);
	padding: 11px 18px;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.snh-mobile-booking-bar .mp { font-family: var(--snh-mono); font-size: 0.66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--snh-ink-soft); }
.snh-mobile-booking-bar .mp b { font-size: 1.2rem; font-weight: 900; color: var(--snh-ink); display: block; }
@media (max-width: 980px) {
	.snh-mobile-booking-bar { display: flex; }
	body { padding-bottom: 78px; }
}