/**
 * Tour Detail V3 - one bundle, design tokens, LOGICAL PROPERTIES ONLY.
 * Loaded only on V3-rendered tour singles. The engine booking widget keeps
 * its own stylesheet; the .thv3 card restyles its shell without touching
 * its behaviour.
 */

.thv3 {
	--thv3-ink: #14202b;
	--thv3-paper: #faf8f5;
	--thv3-card: #ffffff;
	--thv3-teal: #0e7a6c;
	--thv3-teal-dark: #0a5f54;
	--thv3-sand: #e8c87e;
	--thv3-line: #e6e0d6;
	--thv3-muted: #5b6771;
	--thv3-ok: #1a7a4a;
	--thv3-coral: #c24e42;
	--thv3-radius: 14px;
	--thv3-shadow: 0 10px 30px rgba(20, 32, 43, 0.08);

	background: var(--thv3-paper);
	color: var(--thv3-ink);
	font-size: 16px;
	line-height: 1.6;
	padding-block-end: 84px; /* room for the sticky CTA */
}
.thv3 img { max-inline-size: 100%; block-size: auto; }
.thv3__wrap { max-inline-size: 1180px; margin-inline: auto; padding-inline: 20px; }
.thv3-num { unicode-bidi: isolate; direction: ltr; display: inline-block; }
.thv3__muted { color: var(--thv3-muted); font-size: 0.85em; font-weight: 400; }

/* ---- buttons ---- */
.thv3-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; border-radius: 12px; padding: 14px 22px;
	font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
	min-block-size: 44px;
}
.thv3-btn--primary { background: var(--thv3-teal); color: #fff; }
.thv3-btn--primary:hover { background: var(--thv3-teal-dark); color: #fff; }
.thv3-btn--ghost { background: transparent; color: var(--thv3-teal); border: 1.5px solid var(--thv3-teal); }
.thv3-btn--ghostlight { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); }
/*
 * THE FOCUS RING HAS TO BE VISIBLE, WHICH MEANS IT HAS TO PASS CONTRAST.
 *
 * A single sand ring (#e8c87e) is about 1.5:1 against this page's warm paper
 * (#faf8f5), against a 3:1 requirement - it reads as decoration on the light
 * two-thirds of the page and disappears for the people who need it most.
 *
 * Two tones instead of one, because this page has BOTH a near-black hero and
 * a near-white body and no single colour clears 3:1 on both: an ink inner edge
 * carries the contrast on light surfaces, and the sand halo outside it carries
 * it on dark ones. Whichever surface the control sits on, one of the two rings
 * is doing the work.
 */
.thv3 :focus-visible {
	outline: 2px solid var(--thv3-ink);
	outline-offset: 1px;
	box-shadow: 0 0 0 5px var(--thv3-sand);
}

/* On the dark hero the ink ring vanishes, so the sand becomes the inner edge. */
.thv3__hero :focus-visible {
	outline: 2px solid var(--thv3-sand);
	box-shadow: 0 0 0 5px rgba(20, 32, 43, 0.85);
}

/* ---- hero ---- */
.thv3__hero {
	background: linear-gradient(160deg, #14202b 0%, #1d3140 55%, #0e7a6c 130%);
	color: #fff; padding-block: 28px 40px;
}
.thv3__crumbs { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-block-end: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Inline text links in a trail, so WCAG's inline exception applies - but a few
   pixels of vertical padding costs nothing and makes them reachable. */
.thv3__crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 24px; }
.thv3__hero-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.thv3__hero-media { position: relative; }
.thv3__figure {
	margin: 0; border-radius: var(--thv3-radius); overflow: hidden; aspect-ratio: 4 / 3;
	background:
		radial-gradient(120% 90% at 80% 10%, rgba(232, 200, 126, 0.35), transparent 60%),
		radial-gradient(100% 100% at 10% 90%, rgba(14, 122, 108, 0.55), transparent 65%),
		#1d3140;
}
.thv3__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thv3__brandmark { position: absolute; inset-block-end: 16px; inset-inline-start: 16px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.thv3__gallery-chip {
	position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
	background: rgba(20, 32, 43, 0.8); color: #fff; border-radius: 999px;
	padding: 0 14px; min-block-size: 44px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none;
}
.thv3__eyebrow { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; font-weight: 700; color: var(--thv3-sand); margin: 0 0 10px; }
.thv3__title { font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; margin: 0 0 12px; color: #fff; }
.thv3__lede { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin: 0 0 18px; max-inline-size: 52ch; }
.thv3__pricebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-block: 14px; }
.thv3__pricebar--request { font-size: 20px; font-weight: 700; color: var(--thv3-sand); }
.thv3__from, .thv3__per { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.thv3__amount { font-family: Georgia, serif; font-size: 40px; font-weight: 600; }
.thv3__elig {
	display: inline-flex; gap: 8px; align-items: center;
	background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 6px;
}
.thv3__facts { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 16px 0 0; padding: 0; }
.thv3__fact { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.thv3__fact-label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 700; }

/* ---- anchor nav ---- */
.thv3__nav { position: sticky; inset-block-start: 0; z-index: 30; background: rgba(250, 248, 245, 0.94); backdrop-filter: blur(8px); border-block-end: 1px solid var(--thv3-line); margin-block-end: 8px; }
.thv3__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px 0; overflow-x: auto; }
/* 44px: the section nav is a row of thumb targets on a phone, and 38px is the
   height at which a scrolling thumb starts hitting the gap instead. */
.thv3__nav a { display: flex; align-items: center; min-block-size: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--thv3-muted); text-decoration: none; white-space: nowrap; }
.thv3__nav a:hover { background: #fff; color: var(--thv3-ink); }

/* ---- layout ---- */
.thv3__layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: 32px 48px; align-items: start; }
.thv3__main > .thv3__section { margin-block-end: 44px; }
.thv3__h2 { font-size: 24px; margin: 0 0 16px; }
.thv3__h3 { font-size: 17px; margin: 18px 0 8px; }
.thv3__prose { max-inline-size: 68ch; }
.thv3__prose p { margin: 0 0 14px; }

/* ---- shared blocks ---- */
.thv3__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.thv3__checks li { position: relative; padding-inline-start: 30px; font-size: 15.5px; }
.thv3__checks li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--thv3-teal); font-weight: 800; }
/*
 * The Overview reads as one column, at a reading measure.
 *
 * It used to be a grid with a 280px rail holding "Why book with Travel Hub
 * Egypt?". The owner removed that panel, and a grid with one cell is a column
 * with a hole in it - so the grid went with it. What is left is sized for
 * reading rather than for sitting next to something: a slightly larger lead
 * paragraph, a generous line height, and a measure that stops the eye getting
 * lost on a 1440px screen.
 */
.thv3__section--read { max-inline-size: 74ch; }
.thv3__prose--lead { font-size: 16.5px; line-height: 1.8; }
.thv3__prose--lead > p:first-child { font-size: 18px; line-height: 1.65; color: var(--thv3-ink); }
.thv3__prose--lead > p { margin: 0 0 18px; }
.thv3__prose--lead > p:last-child { margin-block-end: 0; }
.thv3__timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--thv3-line); }
.thv3__step { position: relative; padding-inline-start: 24px; padding-block-end: 20px; }
.thv3__step::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 6px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--thv3-teal); border: 3px solid var(--thv3-paper); }
.thv3__step-head h3 { display: inline; font-size: 16.5px; margin: 0; }
.thv3__step-time { display: inline-block; background: rgba(14, 122, 108, 0.1); color: var(--thv3-teal-dark); border-radius: 6px; padding: 1px 8px; font-size: 12.5px; font-weight: 700; margin-inline-start: 8px; }
.thv3__twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.thv3__twocol--single { grid-template-columns: minmax(0, 1fr); }
.thv3__panel { background: var(--thv3-card); border: 1px solid var(--thv3-line); border-radius: var(--thv3-radius); padding: 18px; margin-block-end: 12px; }
.thv3__panel--yes h3 { color: var(--thv3-ok); }
.thv3__panel--no h3 { color: var(--thv3-coral); }
.thv3__panel ul { margin: 0; padding-inline-start: 18px; }
.thv3__panel li { margin-block-end: 6px; font-size: 15px; }

/*
 * INCLUDED vs NOT INCLUDED, markable at a glance.
 *
 * Only the two HEADINGS were coloured; every item under both carried the same
 * grey bullet. This is the section people skim hardest and read least, so
 * "Drinks at lunch" under a heading three lines up was read as something the
 * price covers - the reader has to hold which column they are in, and while
 * skimming they do not.
 *
 * Each item now carries its own mark, so a line is self-describing wherever
 * the eye lands. The mark is decorative: the heading above still names the
 * list, and the colour is never the only signal - the glyph differs too, for
 * anyone who cannot separate the two hues.
 */
.thv3__panel--yes ul,
.thv3__panel--no ul { padding-inline-start: 0; list-style: none; }
.thv3__panel--yes li,
.thv3__panel--no li { position: relative; padding-inline-start: 26px; }
.thv3__panel--yes li::before,
.thv3__panel--no li::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.6;
}
.thv3__panel--yes li::before { content: "\2713"; color: var(--thv3-ok); }
.thv3__panel--no li::before { content: "\2715"; color: var(--thv3-coral); }
/* An exclusion is information, not an alarm: it sits back a little. */
.thv3__panel--no li { color: var(--thv3-muted); }
.thv3__usefulgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.thv3__addonlist { list-style: none; margin: 0; padding: 0; }
.thv3__addonlist li { display: flex; justify-content: space-between; gap: 12px; border-block-end: 1px dashed var(--thv3-line); padding-block: 8px; font-size: 15px; }
/*
 * The add-on figure is a PHRASE ("from +EUR 7.00 per person"), not a bare
 * numeral, so it must NOT carry .thv3-num - that class forces direction: ltr,
 * which is right for a lone number and wrong for an Arabic sentence built
 * around one. Arabic's own bidi algorithm places the embedded amount correctly.
 */
.thv3__addon-price { font-weight: 700; white-space: nowrap; font-size: 14px; color: var(--thv3-teal-dark); }
@media (max-width: 420px) {
	/* At phone width the phrase is longer than the label's remaining room, so
	   the row stacks rather than crushing the add-on's name to three words. */
	.thv3__addonlist li { flex-wrap: wrap; }
	.thv3__addon-price { white-space: normal; }
}
.thv3__faq details { background: var(--thv3-card); border: 1px solid var(--thv3-line); border-radius: 12px; padding: 0 18px; margin-block-end: 10px; }
.thv3__faq summary { padding-block: 14px; font-weight: 600; cursor: pointer; }
.thv3__faq-a { padding-block-end: 14px; color: var(--thv3-muted); }
.thv3__policygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.thv3__policy-big { display: block; font-size: 22px; font-family: Georgia, serif; }
.thv3__ctaband { background: var(--thv3-ink); color: #fff; border-radius: var(--thv3-radius); padding: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.thv3__ctaband h2 { margin: 0 0 6px; color: #fff; }
.thv3__ctaband p { margin: 0; color: rgba(255, 255, 255, 0.75); }
.thv3__ctaband-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.thv3__related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* ---- gallery ---- */
.thv3__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.thv3__gallery-item { margin: 0; }
.thv3__gallery-open { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; }
.thv3__gallery-open img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thv3__lightbox { border: 0; border-radius: 12px; padding: 0; background: var(--thv3-ink); max-inline-size: min(92vw, 1100px); }
.thv3__lightbox::backdrop { background: rgba(20, 32, 43, 0.85); }
.thv3__lightbox img { display: block; max-inline-size: 100%; max-block-size: 84vh; }
.thv3__lightbox { position: relative; }
/* A bar rather than a floating X: the counter needs somewhere to live, and a
   photo viewer that cannot tell you where you are in the set is a slideshow. */
.thv3__lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 0 12px; }
.thv3__lightbox-count { color: rgba(255, 255, 255, 0.82); font-size: 13px; margin: 0; }
.thv3__lightbox-close { inline-size: 44px; block-size: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 22px; cursor: pointer; flex: 0 0 auto; }
.thv3__lightbox-caption { color: rgba(255, 255, 255, 0.78); font-size: 13.5px; line-height: 1.5; margin: 0; padding: 8px 14px 12px; }
.thv3__lightbox-caption[hidden] { display: none; }
/* Centred on the vertical edges, thumb-reachable on a phone, and mirrored for
   RTL by using logical insets rather than left/right. */
.thv3__lightbox-nav {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%);
	inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%;
	background: rgba(20, 32, 43, 0.72); color: #fff; font-size: 30px; line-height: 1;
	cursor: pointer; display: grid; place-items: center;
}
.thv3__lightbox-nav[hidden] { display: none; }
.thv3__lightbox-nav:hover { background: rgba(20, 32, 43, 0.92); }
.thv3__lightbox-nav--prev { inset-inline-start: 10px; }
.thv3__lightbox-nav--next { inset-inline-end: 10px; }
/* the glyphs point the way the language reads */
[dir="rtl"] .thv3__lightbox-nav--prev, [dir="rtl"] .thv3__lightbox-nav--next { transform: translateY(-50%) scaleX(-1); }

/* ---- booking card ---- */
.thv3__rail { position: sticky; inset-block-start: 56px; }
.thv3__card { background: var(--thv3-card); border: 1px solid var(--thv3-line); border-radius: var(--thv3-radius); box-shadow: var(--thv3-shadow); padding: 22px; }
.thv3__card-h { font-size: 20px; margin: 0 0 8px; }
.thv3__card-sub { color: var(--thv3-muted); font-size: 14.5px; margin: 0 0 14px; }
.thv3__card-from { display: flex; align-items: baseline; gap: 8px; margin-block-end: 10px; }
.thv3__card-amount { font-family: Georgia, serif; font-size: 30px; font-weight: 600; }
.thv3__card-note { font-size: 13px; color: var(--thv3-muted); margin: 0 0 10px; }
.thv3__card-horizon { font-size: 13px; color: var(--thv3-muted); margin: 10px 0 0; }
.thv3__card-reassure { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--thv3-ok); margin-block-start: 8px; }
.thv3__card-error { text-align: start; }
.thv3__notices { margin-block-end: 10px; }

/* ---- the embedded engine widget ----
 *
 * This block used to restyle the widget's labels, inputs and BUTTONS. That was
 * the wrong shape of fix and it broke something real: `.thv3__card
 * .thtour-booking button` painted every button teal, outranked the widget's own
 * `.thtour-button:disabled`, and so the DISABLED "Book now" rendered as a
 * finished, pressable, primary button that did nothing. A visitor pressing it
 * learned nothing except that the site does not work.
 *
 * The widget now reads --thv3-* itself and comes out in this page's palette
 * without being overpainted, so the theme's job here is only to take off its
 * outer chrome - the card around it is this card - and to drop the one line the
 * card states twice.
 */
.thv3__card .thtour-booking {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

/* The card no longer prints a from-price of its own: the widget states it,
   once, in this page's display face. Hiding a duplicate here was the first
   attempt and it left the price in the document twice for a screen reader. */

/* ---- sticky mobile CTA ---- */
.thv3__mcta {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
	background: #fff; border-block-start: 1px solid var(--thv3-line);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	box-shadow: 0 -8px 24px rgba(20, 32, 43, 0.12);
}
.thv3__mcta-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-inline-size: 1180px; margin-inline: auto; }
.thv3__mcta-amount { font-family: Georgia, serif; font-size: 22px; font-weight: 600; }
.thv3__mcta-per { font-size: 12px; color: var(--thv3-muted); }

/* ---- responsive ---- */
@media (max-width: 1023px) {
	/* minmax(0,1fr), never plain 1fr: a bare `1fr` track takes the item's
	   automatic minimum size, so wide content (the hero image, the fact
	   strip) pushes the track past the viewport and the body scrolls
	   sideways - the one thing the mobile contract forbids. */
	.thv3__hero-grid, .thv3__layout { grid-template-columns: minmax(0, 1fr); }
	.thv3__hero-grid > *, .thv3__layout > * { min-inline-size: 0; }
	.thv3__facts { min-inline-size: 0; }
	.thv3__rail { position: static; order: -1; } /* card inline right after hero */
	.thv3__facts { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; padding-block-end: 4px; }
	.thv3__fact { scroll-snap-align: start; flex: 0 0 auto; }
	.thv3__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
	.thv3__gallery-item { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
	.thv3__twocol { grid-template-columns: minmax(0, 1fr); }
	.thv3__ctaband { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (min-width: 1024px) {
	.thv3__mcta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.thv3 * { scroll-behavior: auto !important; }
	.thv3__facts, .thv3__gallery { scroll-snap-type: none; }
}