/* Tripyana — Day Trips section (hub + trip pages).
   Claude, 29 Jul 2026.  Bump the filename on every edit and update the
   enqueue in mu-plugins/tripyana-trips-pages.php.  File is in optm-css_exc.

   Built on the site brand tokens (--tp-*) from tripyana-brand-v12.css.
   Logical properties only, so a single rule serves LTR and RTL.
   Prefix: tpt-  (tripyana trips)                                            */

.tpt {
	--tpt-cream: #f7f5ef;
	--tpt-gold: var(--tp-gold, #d4af37);
	--tpt-ink: var(--tp-emerald, #0c211a);
	--tpt-muted: var(--tp-muted, #4a5551);
	--tpt-line: var(--tp-line, #e7e3d7);
	--tpt-radius: var(--tp-radius, 1.25rem);
	color: var(--tpt-ink);
}

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

.tpt__wrap {
	max-width: var(--gb-container-width, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.tpt section { padding-block: clamp(2.6rem, 6vw, 4.4rem); }

/* ---- 1. Headings --------------------------------------------------------- */

.tpt__kicker {
	display: block;
	color: var(--tpt-gold);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .06em;
	margin-block-end: .5rem;
}

.tpt__h2 {
	color: var(--tpt-ink);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	line-height: 1.3;
	margin-block: 0 .7rem;
}

.tpt__lede {
	color: var(--tpt-muted);
	font-size: 1.02rem;
	line-height: 1.9;
	max-width: 62ch;
	margin-block: 0 1.6rem;
}

.tpt__rule {
	inline-size: 5rem;
	block-size: .22rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tpt-gold), transparent);
	margin-block: 0 1.4rem;
}

/* ---- 2. Breadcrumb ------------------------------------------------------- */

.tpt-crumb {
	font-size: .87rem;
	color: var(--tpt-muted);
	padding-block: 1.1rem 0;
}
.tpt-crumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: .4rem .55rem;
	align-items: center;
}
.tpt-crumb li { white-space: nowrap; }
.tpt-crumb li[aria-current="page"] {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpt-crumb a { color: var(--tpt-muted); text-decoration: none; }
.tpt-crumb a:hover { color: var(--tpt-gold); }
.tpt-crumb li + li::before {
	content: "›";
	margin-inline-end: .55rem;
	color: var(--tpt-line);
}
.tpt-crumb [aria-current="page"] { color: var(--tpt-ink); font-weight: 600; }

/* ---- 3. Hero ------------------------------------------------------------- */

.tpt-hero {
	background: var(--tpt-cream);
	border-block-end: 1px solid var(--tpt-line);
}
.tpt-hero h1 {
	color: var(--tpt-ink);
	font-size: clamp(1.75rem, 4.4vw, 2.7rem);
	line-height: 1.25;
	margin-block: 0 .9rem;
}
.tpt-hero__intro {
	color: var(--tpt-muted);
	font-size: 1.05rem;
	line-height: 1.95;
	max-width: 68ch;
	margin: 0;
}

/* ---- 4. Trust strip ------------------------------------------------------ */

.tpt-trust {
	background: #fff;
	border-block-end: 1px solid var(--tpt-line);
	padding-block: 1.1rem !important;
}
.tpt-trust__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 2rem;
}
.tpt-trust__item {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .9rem;
	font-weight: 500;
	color: var(--tpt-ink);
}
.tpt-trust__item svg {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	stroke: var(--tpt-gold);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (max-width: 700px) {
	.tpt-trust__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: .6rem;
		justify-items: start;
		max-inline-size: 24rem;
		margin-inline: auto;
	}
	.tpt-trust__item { align-items: flex-start; text-align: start; font-size: .86rem; line-height: 1.5; }
	.tpt-trust__item svg { margin-block-start: 1px; }
}

/* ---- 5. Trip cards ------------------------------------------------------- */

.tpt-group + .tpt-group { margin-block-start: 2.8rem; }

.tpt-group__title {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tpt-ink);
	margin-block: 0 1.3rem;
}
.tpt-group__title::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: var(--tpt-line);
}

.tpt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 1.5rem;
}

.tpt-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	box-shadow: 0 8px 24px -14px rgba(12, 33, 26, .22);
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease;
}
.tpt-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 40px -20px rgba(12, 33, 26, .38), inset 0 3px 0 var(--tpt-gold);
}
.tpt-card--soon { opacity: .92; }
.tpt-card--soon:hover { transform: none; box-shadow: 0 8px 24px -14px rgba(12, 33, 26, .22); }

.tpt-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--tpt-cream);
	overflow: hidden;
}
.tpt-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.tpt-badge {
	position: absolute;
	inset-block-start: .8rem;
	inset-inline-start: .8rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .76rem;
	font-weight: 700;
	padding: .34rem .7rem;
	border-radius: 999px;
	background: var(--tpt-ink);
	color: var(--tpt-gold);
}
.tpt-badge--soon { background: #6b6f6d; color: #fff; }

.tpt-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.3rem 1.35rem;
}
.tpt-card__name {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tpt-ink);
	margin-block: 0 .5rem;
	line-height: 1.4;
}
.tpt-card__desc {
	color: var(--tpt-muted);
	font-size: .93rem;
	line-height: 1.8;
	margin-block: 0 .9rem;
}

.tpt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-block-end: .9rem;
}
.tpt-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--tpt-ink);
	background: var(--tpt-cream);
	border: 1px solid var(--tpt-line);
	border-radius: 999px;
	padding: .28rem .65rem;
}

.tpt-price {
	margin-block: auto 0;
	padding-block-start: .9rem;
	border-block-start: 1px dashed var(--tpt-line);
}
/* Price on its own line, qualifier on the line beneath (29 Jul 2026).
   Was a baseline flex row, so "£500" and the grey qualifier sat side by side and
   the qualifier competed with the number. Column direction stacks them; the
   amount stays the largest element in the card (1.5rem/800 vs 1.1rem name), so
   it reads as the anchor. align-items:flex-start is direction-aware — it resolves
   to the inline-start edge, which is the right edge under dir="rtl", so the
   Arabic pages align correctly with no separate RTL rule.
   Gap is deliberately small (.2rem): the amount has line-height:1, so anything
   larger opens a visible hole between the number and its own qualifier. */
.tpt-price__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .2rem;
}
.tpt-price__from { font-size: .82rem; color: var(--tpt-muted); }
.tpt-price__amount {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--tpt-ink);
	line-height: 1;
}
.tpt-price__unit { font-size: .84rem; color: var(--tpt-muted); }
.tpt-price__note {
	display: block;
	font-size: .8rem;
	color: var(--tpt-muted);
	margin-block-start: .3rem;
}
.tpt-price__cancel {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	font-weight: 600;
	color: #1d6b4f;
	margin-block-start: .45rem;
}
.tpt-price__cancel svg {
	inline-size: 15px;
	block-size: 15px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tpt-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-block-start: 1rem;
}
.tpt-card__actions .tp-btn { flex: 1 1 auto; }

.tpt-soon {
	display: block;
	font-size: .86rem;
	font-weight: 600;
	color: var(--tpt-muted);
	background: var(--tpt-cream);
	border: 1px dashed var(--tpt-line);
	border-radius: 999px;
	padding: .55rem .9rem;
	text-align: center;
	margin-block-start: 1rem;
}

/* ---- 6. Top picks -------------------------------------------------------- */

.tpt-pick { padding-block: 1.4rem; border-block-end: 1px solid var(--tpt-line); }
.tpt-pick:last-child { border-block-end: 0; }
.tpt-pick h3 {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.05rem;
	color: var(--tpt-ink);
	margin-block: 0 .5rem;
}
.tpt-pick__num {
	flex: none;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tpt-ink);
	color: var(--tpt-gold);
	font-size: .85rem;
	font-weight: 700;
}
.tpt-pick p { color: var(--tpt-muted); line-height: 1.9; margin: 0; font-size: .96rem; }

/* ---- 7. Why Tripyana / comparison --------------------------------------- */

.tpt-why { background: var(--tpt-cream); }
.tpt-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2rem;
	margin-block-end: 2rem;
}
.tpt-why__item {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: 1.2rem 1.25rem;
}
.tpt-why__item h3 {
	font-size: 1rem;
	color: var(--tpt-ink);
	margin-block: 0 .45rem;
}
.tpt-why__item p { font-size: .92rem; color: var(--tpt-muted); line-height: 1.8; margin: 0; }

.tpt-vs {
	inline-size: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	overflow: hidden;
	font-size: .93rem;
}
.tpt-vs caption {
	caption-side: top;
	text-align: start;
	font-weight: 700;
	color: var(--tpt-ink);
	padding-block-end: .7rem;
}
.tpt-vs th,
.tpt-vs td {
	padding: .8rem .95rem;
	border-block-end: 1px solid var(--tpt-line);
	text-align: start;
	vertical-align: top;
}
.tpt-vs thead th { background: var(--tpt-ink); color: #fff; font-weight: 600; }
.tpt-vs thead th:first-child { color: var(--tpt-gold); }
.tpt-vs tbody th { font-weight: 600; color: var(--tpt-ink); inline-size: 34%; }
.tpt-vs tbody tr:last-child th,
.tpt-vs tbody tr:last-child td { border-block-end: 0; }
.tpt-vs__yes { color: #1d6b4f; font-weight: 600; }
.tpt-vs__no { color: #8a5b5b; }
.tpt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 8. FAQ (native details/summary, tp-faq look) ----------------------- */

.tpt-faq__item {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	margin-block-end: .7rem;
	overflow: hidden;
}
.tpt-faq__item[open] { box-shadow: 0 10px 26px -18px rgba(12, 33, 26, .32); }
.tpt-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	padding: 1rem 1.2rem;
	font-weight: 700;
	color: var(--tpt-ink);
	font-size: .99rem;
	line-height: 1.6;
}
.tpt-faq__item summary::-webkit-details-marker { display: none; }
.tpt-faq__item summary::after {
	content: "";
	flex: none;
	inline-size: .62rem;
	block-size: .62rem;
	border-inline-end: 2px solid var(--tpt-gold);
	border-block-end: 2px solid var(--tpt-gold);
	transform: rotate(45deg);
	transition: transform .25s ease;
}
.tpt-faq__item[open] summary::after { transform: rotate(-135deg); }
.tpt-faq__body {
	padding: 0 1.2rem 1.15rem;
	color: var(--tpt-muted);
	line-height: 1.9;
	font-size: .95rem;
}
.tpt-faq__body a { color: var(--tpt-ink); text-decoration: underline; text-underline-offset: .18em; }
.tpt-faq__body a:hover { color: var(--tpt-gold); }

/* ---- 9. Trip page: price box -------------------------------------------- */

.tpt-pricebox {
	background: var(--tpt-ink);
	color: #fff;
	border-radius: var(--tpt-radius);
	padding: clamp(1.3rem, 3vw, 1.9rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
}
.tpt-pricebox__amount {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 800;
	color: var(--tpt-gold);
	line-height: 1;
	display: block;
}
.tpt-pricebox__from { font-size: .85rem; color: #cfd8d4; display: block; margin-block-end: .3rem; }
.tpt-pricebox__unit { font-size: .9rem; color: #cfd8d4; display: block; margin-block-start: .35rem; }
.tpt-pricebox__cancel {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .86rem;
	font-weight: 600;
	color: #9fe0c0;
	margin-block-start: .55rem;
}
.tpt-pricebox__cancel svg {
	inline-size: 16px; block-size: 16px; flex: none;
	stroke: currentColor; fill: none; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
}
.tpt-pricebox__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- 10. Highlights ------------------------------------------------------ */

.tpt-high {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: .9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tpt-high li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: .9rem;
	padding: .85rem 1rem;
	font-size: .94rem;
	line-height: 1.65;
	color: var(--tpt-ink);
}
.tpt-high svg {
	flex: none;
	inline-size: 19px; block-size: 19px;
	margin-block-start: .12rem;
	stroke: var(--tpt-gold); fill: none;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- 11. Gallery --------------------------------------------------------- */

.tpt-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.tpt-gallery figure {
	margin: 0;
	border-radius: var(--tpt-radius);
	overflow: hidden;
	border: 1px solid var(--tpt-line);
	background: #fff;
}
.tpt-gallery img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.tpt-gallery figcaption {
	font-size: .82rem;
	color: var(--tpt-muted);
	padding: .6rem .8rem .75rem;
	line-height: 1.6;
}

/* ---- 12. Itinerary ------------------------------------------------------- */

.tpt-itin { list-style: none; margin: 0; padding: 0; }
.tpt-itin li {
	position: relative;
	padding-inline-start: 2.4rem;
	padding-block-end: 1.5rem;
}
.tpt-itin li:last-child { padding-block-end: 0; }
.tpt-itin li::before {
	content: "";
	position: absolute;
	inset-block-start: .35rem;
	inset-inline-start: .48rem;
	inline-size: .72rem;
	block-size: .72rem;
	border-radius: 50%;
	background: var(--tpt-gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, .22);
}
.tpt-itin li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: 1.3rem;
	inset-block-end: .1rem;
	inset-inline-start: .8rem;
	inline-size: 1px;
	background: var(--tpt-line);
}
.tpt-itin h3 { font-size: 1rem; color: var(--tpt-ink); margin-block: 0 .35rem; }
.tpt-itin p { font-size: .94rem; color: var(--tpt-muted); line-height: 1.85; margin: 0; }
.tpt-itin__opt {
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	color: var(--tpt-ink);
	background: var(--tpt-cream);
	border: 1px solid var(--tpt-line);
	border-radius: 999px;
	padding: .16rem .55rem;
	margin-inline-start: .45rem;
	vertical-align: middle;
}

/* ---- 13. Included / not included ---------------------------------------- */

.tpt-incl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1.2rem;
}
.tpt-incl__col {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: 1.2rem 1.3rem 1.3rem;
}
.tpt-incl__col h3 { font-size: 1rem; color: var(--tpt-ink); margin-block: 0 .8rem; }
.tpt-incl__col ul { list-style: none; margin: 0; padding: 0; }
.tpt-incl__col li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .93rem;
	line-height: 1.75;
	color: var(--tpt-muted);
	padding-block: .34rem;
}
.tpt-incl__col svg { flex: none; inline-size: 17px; block-size: 17px; margin-block-start: .2rem; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tpt-incl--yes svg { stroke: #1d6b4f; }
.tpt-incl--no svg { stroke: #a06a6a; }

/* ---- 14. Know before you go --------------------------------------------- */

.tpt-know {
	background: #fffaf0;
	border: 1px solid #f0e0b8;
	border-radius: var(--tpt-radius);
	padding: 1.2rem 1.35rem 1.3rem;
}
.tpt-know h3 {
	display: flex; align-items: center; gap: .5rem;
	font-size: 1rem; color: var(--tpt-ink); margin-block: 0 .7rem;
}
.tpt-know h3 svg { inline-size: 20px; block-size: 20px; flex: none; stroke: #b8860b; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tpt-know ul { margin: 0; padding-inline-start: 1.15rem; }
.tpt-know li { font-size: .94rem; line-height: 1.85; color: var(--tpt-muted); padding-block: .18rem; }
.tpt-know strong { color: var(--tpt-ink); }

/* ---- 15. Reviews (mirrors the homepage tgr- block, no star schema) ------ */

.tpt-rev__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.1rem;
}
.tpt-rev__card {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: 1.15rem 1.25rem 1.25rem;
	text-align: start;
}
.tpt-rev__head { display: flex; align-items: center; gap: .65rem; margin-block-end: .6rem; }
.tpt-rev__avatar {
	flex: none;
	inline-size: 2.3rem; block-size: 2.3rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--tpt-ink);
	color: var(--tpt-gold);
	font-weight: 700;
}
.tpt-rev__name { font-weight: 700; color: var(--tpt-ink); font-size: .95rem; }
.tpt-rev__stars { color: #fbbc05; letter-spacing: .08em; font-size: .95rem; display: block; margin-block-end: .45rem; }
.tpt-rev__text { color: var(--tpt-muted); font-size: .93rem; line-height: 1.85; margin: 0; }
.tpt-rev__src {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .84rem; color: var(--tpt-muted);
	margin-block-end: 1.2rem;
}

/* ---- 16. CTA band -------------------------------------------------------- */

.tpt-cta {
	background: var(--tpt-cream);
	color: #fff;
	text-align: center;
}
/* 2 Aug 2026: the closing CTA used to be a full-bleed emerald band sitting
   directly on the (equally emerald) footer — the two merged into one dark
   mass. The dark surface now lives on the inner wrap as an inset rounded
   card over the cream page background, so the footer reads as its own
   region. Inner colours (white h2, light p, buttons) are unchanged. */
.tpt-cta > .tpt__wrap {
	background: linear-gradient(180deg, #0c211a 0%, #123127 100%);
	border: 1px solid rgba(212, 175, 55, .4);
	border-radius: var(--tpt-radius);
	padding: clamp(2rem, 5vw, 3.2rem) clamp(1.2rem, 4vw, 3rem);
	box-shadow: 0 24px 50px -30px rgba(12, 33, 26, .55);
}
.tpt-cta h2 { color: #fff; font-size: clamp(1.4rem, 3.2vw, 2rem); margin-block: 0 .7rem; }
.tpt-cta p { color: #cfd8d4; line-height: 1.9; max-width: 58ch; margin-inline: auto; margin-block: 0 1.4rem; }
.tpt-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.tpt-cta .tp-btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.tpt-cta .tp-btn--outline:hover { background: #fff; color: var(--tpt-ink); }

/* ---- 17. Build-your-own strip ------------------------------------------- */

.tpt-diy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	background: var(--tpt-cream);
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: clamp(1.2rem, 3vw, 1.8rem);
}
.tpt-diy h2 { font-size: 1.2rem; color: var(--tpt-ink); margin-block: 0 .45rem; }
.tpt-diy p { color: var(--tpt-muted); font-size: .95rem; line-height: 1.8; margin: 0; max-width: 52ch; }

/* ---- 18. Booking form anchor -------------------------------------------- */

.tpt-book { background: var(--tpt-cream); }
.tpt-book__inner {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: clamp(1rem, 2.5vw, 1.6rem);
}

/* ---- 19. Outline buttons on dark backgrounds -----------------------------
   .tp-btn--outline is emerald-on-transparent by default, which disappears
   inside the emerald price box. Re-assert white on every dark surface here. */

.tpt-pricebox .tp-btn--outline,
.tpt-cta .tp-btn--outline {
	color: #fff;
	border-color: rgba(255, 255, 255, .6);
	background: transparent;
}
.tpt-pricebox .tp-btn--outline:hover,
.tpt-pricebox .tp-btn--outline:focus,
.tpt-cta .tp-btn--outline:hover,
.tpt-cta .tp-btn--outline:focus {
	background: #fff;
	color: var(--tpt-ink);
	border-color: #fff;
}

/* -------------------------------------------------------------------------
 * v3 — hero photograph and the image-credit line (29 Jul 2026)
 *
 * Every trip page now opens with a real photograph of its destination. The
 * figure sits below the intro text so the H1 stays the first thing read, and
 * uses the same 4/3 crop as the gallery and the cards.
 * ---------------------------------------------------------------------- */

.tpt-hero__media {
	margin: 1.6rem 0 0;
	border-radius: var(--tpt-radius, 10px);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(12, 33, 26, .13);
}
.tpt-hero__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
@media (max-width: 700px) {
	.tpt-hero__media { margin-block-start: 1.15rem; }
	.tpt-hero__media img { aspect-ratio: 4 / 3; }
}

/* Image credits — legally required for the CC BY / CC BY-SA photographs, so it
   stays visible, selectable and clickable. v4 (29 Jul 2026) makes it quieter
   while the Commons photos are still in place:

   - the site-wide rule `.entry-content p:not(.rank-math-breadcrumb p)` (0,2,2)
     was overriding the old `.tpt-credits p` (0,1,1) and rendering this line at
     17.5px. It scores (0,2,2) — :not() carries its argument specificity — so the
     selector below needs three classes to win outright. No !important used.
   - #878787 on white measures 3.59:1, above the 3:1 floor, with headroom for
     the cream background used elsewhere in the section stack.
   - no border, no background, no divider: the line reads as a footnote. */

.tpt .tpt-credits {
	/* beats the generic `.tpt section` clamp(2.6rem, 6vw, 4.4rem) — the
	   credit is a footnote, not a section, so it needs a small gap above and
	   enough below to clear the footer. */
	padding-block: 1.1rem 1.6rem;
}
.tpt .tpt-credits p.tpt-credits__line {
	margin: 0;
	color: #878787;
	font-size: .67rem;
	line-height: 1.65;
	letter-spacing: .1px;
}
.tpt .tpt-credits p.tpt-credits__line a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tpt .tpt-credits p.tpt-credits__line a:hover,
.tpt .tpt-credits p.tpt-credits__line a:focus-visible {
	color: var(--tpt-ink, #0c211a);
}

/* ---- 12. Booking form 26947: hide one-way/return + mileage concepts -------
 * A day trip is return-by-definition and flat-rated, so "Transfer type"
 * (a single One Way option), the Return date/time pair it would reveal, and
 * the 0-mi / 0-h ride-info box are meaningless here and invite the wrong
 * question. Scoped to #tpt-booking, which exists only on the 14 trip pages
 * that embed form 26947 — form 1495 pages have no #tpt-booking element.
 * display:none keeps the DOM intact, so CHBS JS (map, price, ride-info
 * writers) still finds every element it expects. */
#tpt-booking .chbs-form-field-transfer-type,
#tpt-booking .chbs-form-field-return-date-time,
#tpt-booking .chbs-ride-info {
	display: none !important;
}

/* ---- 13. Card shortcodes outside the trips pages (30 Jul 2026) -----------
 * .tpt-home-cards — the homepage full-card section.
 * .tpt-mini*      — compact image-free cards for article cross-links.       */

.tpt-home-cards .tpt-grid { margin-block-start: .4rem; }
.tpt-cards__all {
	margin-block: 1.8rem 0;
	text-align: center;
}

.tpt-inline .tpt-mini-wrap { padding-block: .6rem; }
.tpt-mini-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-block: 1.4rem;
}
.tpt-mini {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-inline-start: 3px solid var(--tpt-gold);
	border-radius: calc(var(--tpt-radius) / 2);
	padding: 1rem 1.1rem;
	box-shadow: 0 6px 18px -12px rgba(12, 33, 26, .2);
}
.tpt-mini__name {
	font-size: 1rem;
	line-height: 1.45;
	margin-block: 0 .4rem;
}
.tpt-mini__name a {
	color: var(--tpt-ink);
	text-decoration: none;
}
.tpt-mini__name a:hover { color: var(--tpt-gold); }
.tpt-mini__desc {
	color: var(--tpt-muted);
	font-size: .88rem;
	line-height: 1.7;
	margin-block: 0 .55rem;
}
.tpt-mini__price {
	color: var(--tpt-ink);
	font-weight: 700;
	font-size: .92rem;
	margin: 0;
}
.tpt-inline .tpt-cards__all { text-align: start; margin-block: .2rem 0; }

/* -------------------------------------------------------------------------
 * Card image + title as links (30 Jul 2026, part 4).
 * Two separate anchors per card — the whole card is deliberately NOT wrapped,
 * so the "Trip details & booking" button keeps working as its own control.
 * The image anchor must fill the 4/3 media box, because .tpt-card__media img
 * sizes itself against its parent and the parent is now the <a>.
 * ---------------------------------------------------------------------- */
.tpt-card__imglink {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	text-decoration: none;
}
.tpt-card__imglink img {
	transition: transform .5s ease;
}
.tpt-card:hover .tpt-card__imglink img {
	transform: scale(1.04);
}

.tpt-card__namelink {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--tpt-gold), var(--tpt-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size .3s ease, color .3s ease;
}
.tpt-card__namelink:hover,
.tpt-card__namelink:focus-visible {
	color: var(--tpt-ink);
	background-size: 100% 2px;
}
/* RTL: the underline has to grow from the reading-start (right) edge */
body.rtl .tpt-card__namelink {
	background-position: 100% 100%;
}

.tpt-card__imglink:focus-visible,
.tpt-card__namelink:focus-visible {
	outline: 3px solid var(--tpt-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tpt-card__imglink img,
	.tpt-card:hover .tpt-card__imglink img { transition: none; transform: none; }
}

/* ---- 20. Gallery lightbox (2 Aug 2026) -----------------------------------
 * Markup is created by assets/tripyana-trips-lightbox-v1.js on first click.
 * This file sits in optm-css_exc ('tripyana-trips' substring), so these
 * JS-only selectors survive UCSS. Logical properties keep it RTL-safe. */

.tpt-gallery figure img { cursor: zoom-in; }
.tpt-gallery figure img:focus-visible {
	outline: 2px solid var(--tpt-gold, #d4af37);
	outline-offset: 2px;
}

.tpt-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(12, 33, 26, .93);
}
.tpt-lb[hidden] { display: none; }
.tpt-lb__img {
	max-width: min(1200px, 100%);
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.tpt-lb__cap {
	color: #fff;
	opacity: .88;
	margin-block-start: 12px;
	font-size: .95rem;
	line-height: 1.6;
	text-align: center;
	max-width: 70ch;
}
.tpt-lb__cap:empty { display: none; }
.tpt-lb__close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tpt-lb__close:hover,
.tpt-lb__close:focus-visible {
	border-color: var(--tpt-gold, #d4af37);
	color: var(--tpt-gold, #d4af37);
	outline: none;
}
html.tpt-lb-open,
html.tpt-lb-open body { overflow: hidden; }

/* ---- 21. Hero facts card (2 Aug 2026 — demo on 26979) --------------------
 * Injected at render time by tpt_hero_card() in tripyana-trips-pages.php;
 * price comes from assets/tripyana-trips-data.php. Desktop: the card fills
 * the empty inline-end half of the hero next to the intro; mobile: it slots
 * between the intro and the photo. Grid activation is via :has(), so pages
 * without the card keep the original single-column hero untouched. */

.tpt-hero__card {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: 1.4rem 1.5rem 1.5rem;
	box-shadow: 0 18px 40px -30px rgba(12, 33, 26, .45);
	margin-block-start: 1.5rem;
	max-width: 420px;
}
.tpt-hero__card-price {
	margin: 0 0 .9rem;
	display: flex;
	align-items: baseline;
	gap: .45rem;
	flex-wrap: wrap;
}
.tpt-hero__card .tpt-price__amount { font-size: 2rem; }
.tpt-hero__card-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.tpt-hero__card-list li {
	position: relative;
	padding-inline-start: 1.55em;
	color: var(--tpt-muted);
	font-size: .95rem;
	line-height: 1.75;
	margin-block: .45em;
}
.tpt-hero__card-list li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: #9a7614;
	font-weight: 700;
}
.tpt-hero__card-btn { display: inline-flex; width: 100%; justify-content: center; }

@media (min-width: 981px) {
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: center;
	}
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) > .tpt__kicker,
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) > h1,
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) > .tpt-hero__intro { grid-column: 1; }
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) > .tpt-hero__card {
		grid-column: 2;
		grid-row: 1 / 4;
		align-self: center;
		justify-self: end;
		width: 100%;
		margin-block-start: 0;
	}
	.tpt-hero .tpt__wrap:has(.tpt-hero__card) > .tpt-hero__media { grid-column: 1 / -1; }
}

/* ---- 22. Reviews strip on trip pages (2 Aug 2026) ------------------------
 * EN pages only for now — the Arabic strip waits for real Arabic review
 * texts (standing owner decision, same as the booking pages). Markup is
 * injected at render time by the 1c block in tripyana-trips-pages.php. */

.tpt-reviews__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-block-start: 1.4rem;
}
@media (max-width: 900px) { .tpt-reviews__cards { grid-template-columns: 1fr; } }
.tpt-review {
	background: #fff;
	border: 1px solid var(--tpt-line);
	border-radius: var(--tpt-radius);
	padding: 1.1rem 1.2rem;
}
.tpt-review__head { display: flex; align-items: center; gap: .55rem; margin-block-end: .5rem; }
.tpt-review__name { font-weight: 700; color: var(--tpt-ink); font-size: .95rem; }
.tpt-review__stars { color: #d4af37; letter-spacing: .12em; font-size: .85rem; margin-block-end: .45rem; }
.tpt-review__text { margin: 0; color: var(--tpt-muted); font-size: .92rem; line-height: 1.75; }

/* ---- 23. Sticky mobile booking bar (2 Aug 2026) --------------------------
 * Injected server-side with the real from-price; shown by the ui JS only
 * below 981px, after the visitor scrolls past the hero, and never while
 * the booking section itself is on screen or the lightbox is open. */

.tpt-stickybar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9000;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: .9rem;
	background: #0c211a;
	border-block-start: 1px solid rgba(212, 175, 55, .5);
	padding: .55rem clamp(.9rem, 4vw, 1.4rem);
	padding-block-end: calc(.55rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 980px) { .tpt-stickybar.tpt-stickybar--on { display: flex; } }
html.tpt-lb-open .tpt-stickybar { display: none !important; }
.tpt-stickybar__price { color: #fff; line-height: 1.25; }
.tpt-stickybar__price small { display: block; font-size: .68rem; color: rgba(255, 255, 255, .65); }
.tpt-stickybar__price strong { font-size: 1.15rem; color: #e8c65a; }
.tpt-stickybar__btn { flex: 0 0 auto; padding-block: .6rem; }

/* ---- 24. Related trips before the closing CTA (2 Aug 2026) --------------- */

.tpt-related { border-block-start: 1px solid var(--tpt-line); }
.tpt-related .tpt__h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }

/* ---- 25. Lightbox prev/next (2 Aug 2026) --------------------------------- */

.tpt-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tpt-lb__nav:hover,
.tpt-lb__nav:focus-visible {
	border-color: var(--tpt-gold, #d4af37);
	color: var(--tpt-gold, #d4af37);
	outline: none;
}
.tpt-lb__prev { inset-inline-start: 14px; }
.tpt-lb__next { inset-inline-end: 14px; }
.tpt-lb__nav[hidden] { display: none; }

/* ---- 23b. Chat bubble vs sticky bar (2 Aug 2026) -------------------------
 * The assistant bubble (#tpw-bubble, fixed bottom 22px) sits exactly on the
 * sticky booking bar on mobile. While the bar is shown, lift the bubble
 * (and its opened panel) above it. :has() on <html> because the JS toggles
 * the --on class on the bar itself. */

@media (max-width: 980px) {
	html:has(.tpt-stickybar--on) #tpw-bubble { bottom: 84px !important; }
	html:has(.tpt-stickybar--on) #tpw-panel { bottom: 146px !important; }
}

/* ---- 21b. Hero card WhatsApp secondary (2 Aug 2026, AR pages only) ------- */
.tpt-hero__card-wa {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	margin-block-start: .6rem;
}

/* ---- 26. Breadcrumb size fix (2 Aug 2026) --------------------------------
 * The generic .entry-content li rule (17.5px) outranks the .87rem set on
 * .tpt-crumb itself — the crumb rendered as body text. (0,2,1) wins. */
.entry-content .tpt-crumb li { font-size: .8rem; }