/**
 * Single tour page — itinerary design.
 *
 * This is the supplied itinerary HTML's stylesheet, scoped under `.ct-itin`.
 *
 * The scoping is not cosmetic. The original styles bare `body`, `section`, `p`,
 * `a`, `button`, `h1`–`h4` and `footer`; loaded unscoped it would restyle the
 * site's Elementor header and footer, which render on this page too. Every
 * selector below is therefore prefixed, and the `body` rules were folded into
 * `.ct-itin` itself.
 *
 * The one exception is the mobile sticky bar at the bottom of this file: it is
 * printed on wp_footer, outside `.ct-itin`, so its rules are unscoped. The reason
 * is documented on that block.
 *
 * Also changed from the original:
 *   - the topbar and footer rules are gone; the site's own header/footer are used
 *   - @keyframes pulse renamed ct-pulse, so it cannot collide with a theme or
 *     plugin animation of the same name
 *   - the hero gallery puts the big image on top and the thumbnails in a row
 *     underneath, rather than a narrow left-hand column
 *   - photos are cropped to fill their slot, not letterboxed — see .ph img below
 *   - a nationality pricing toggle and group-size pricing were added to the widget
 *   - a base line-height, which the page had no source for at all
 *
 * The one-line grid collapses below are the design's own. The phone work — type
 * scale, booking controls, padding, and the hero breakout — lives in
 * tour-responsive.css.
 *
 * The custom properties are declared on `.ct-itin` rather than `:root` for the
 * same reason — names like `--blue` and `--radius` are generic enough to clash.
 * Their values already match the site palette (#1689CF, #F68B2D).
 *
 * The enquiry form in the last section is the theme's `.travel-form`, styled in
 * the theme's own style.css. Nothing here targets it: `.travel-form .submit-form`
 * (two classes) outranks `.ct-itin button` (one class + one element), so the
 * scoped element resets above do not strip the form's own styling.
 */

.ct-itin {
	--blue: #1689CF;
	--blue-dark: #0E3A57;
	--orange: #F68B2D;
	--red: #EF3136;
	--gold: #F9C63A;
	--dark: #1A1A1A;
	--gray-bg: #F5F7FA;
	--white: #FFFFFF;
	--green: #00B67A;
	--border: #E5E8EC;
	--muted: #6B7280;
	--warm-bg: #FAF8F3;
	--radius: 14px;
	--gap: 40px;
	--maxw: 1200px;

	/*
	 * The page gutter, as a variable rather than a literal in .wrap.
	 *
	 * The hero image on phones breaks out of the gutter with a negative margin
	 * computed from this value — deriving both from one number makes them incapable
	 * of drifting apart when a breakpoint changes. tour-responsive.css overrides
	 * this rather than re-declaring padding.
	 */
	--wrap-pad: 24px;

	/*
	 * How far the hero image sits from the screen edge on phones. The breakout
	 * subtracts this from the gutter, so the image keeps the same distance from
	 * the edge at every breakpoint even though the gutter itself changes. Set it
	 * to 0 for a true edge-to-edge bleed.
	 */
	--hero-inset: 10px;

	/* was body{} */
	font-family: 'Inter', sans-serif;
	color: var(--dark);
	background: var(--white);

	/*
	 * A base line-height, which this page previously had no source for at all.
	 *
	 * The theme's reset.css is not enqueued here and the Elementor kit sets no body
	 * typography, so anything without its own line-height fell back to the browser
	 * default of `normal` — roughly 1.2, which is display spacing, not reading
	 * spacing. Only nine rules in this file set one, so most of the page was
	 * rendering cramped: section intros, day titles, meta items, inclusion lists,
	 * info cards, form labels, card headings.
	 *
	 * Setting it here fixes all of them at once and at every width. A handful of
	 * display-type elements below deliberately tighten it again, because a 1.6
	 * line box would visibly grow a chip.
	 */
	line-height: 1.6;
}

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

/* Headings want display spacing, not the 1.6 reading spacing inherited above. */
.ct-itin h1,
.ct-itin h2,
.ct-itin h3,
.ct-itin h4 { font-family: 'Poppins', sans-serif; margin: 0; line-height: 1.25; }
.ct-itin p { margin: 0; }
.ct-itin img,
.ct-itin .ph { display: block; }
.ct-itin a { text-decoration: none; color: inherit; }
.ct-itin button { font-family: inherit; cursor: pointer; border: none; background: none; }

/*
 * The rule above outranks the browser's own [hidden] { display: none }, because
 * an author stylesheet beats the UA stylesheet. Without this, every slide in the
 * main image stack rendered side by side inside the flex container instead of one
 * at a time, and both nationality price panels would show at once.
 */
.ct-itin [hidden] { display: none !important; }

/*
 * Overflow guards.
 *
 * This page renders admin-entered rich text — day descriptions, pickup notes,
 * cancellation policy, guide bio — any of which can contain a long URL or an
 * unbroken string. Grid and flex children default to min-width:auto, so they
 * refuse to shrink below their content and push the whole page wider than the
 * viewport. That is exactly how the blog templates ended up touching the right
 * edge of the screen, so the guards are here rather than only in a breakpoint.
 */
.ct-itin .hero-grid > *,
.ct-itin .highlights-grid > *,
.ct-itin .incl-grid > *,
.ct-itin .hotel-grid > *,
.ct-itin .explain-grid > *,
.ct-itin .booking-form > *,
.ct-itin .widget,
.ct-itin .itin-item,
.ct-itin .mp-card { min-width: 0; }

.ct-itin .itin-prose,
.ct-itin .mp-value,
.ct-itin .itin-desc li,
.ct-itin .itin-field .value,
.ct-itin .cancel-card,
.ct-itin .hotel-info h4,
.ct-itin .pkg-info h4,
.ct-itin .section-head h1,
.ct-itin .section-head h2,
.ct-itin .section-head h3 { overflow-wrap: break-word; }

/* A long day title must not squash the chevron out of the accordion header. */
.ct-itin .itin-head .left { min-width: 0; }
.ct-itin .itin-head .left .itin-t { overflow-wrap: break-word; }
.ct-itin .itin-head .chev { flex-shrink: 0; }

/*
 * Line-height guards.
 *
 * These are single-line display elements sized by their own padding, so the 1.6
 * inherited from .ct-itin would visibly inflate them — the price is 28px type, so
 * 1.6 alone adds 11px of leading to a number that should sit tight.
 *
 * The sticky bar needs no guard here: it lives outside .ct-itin now and sets its
 * own line-height, which is also what keeps it inside the 64px the page reserves.
 */
.ct-itin .price-now { line-height: 1.2; }
.ct-itin .day-num,
.ct-itin .discount-tag { line-height: 1.3; }

/*
 * Embedded Elementor content (.ct-embed), used for the block after the itinerary.
 *
 * Whatever the Elementor template sets explicitly already wins — Elementor emits
 * per-element selectors three classes deep, which outrank the one-class-plus-
 * element resets above. The exposure is only properties left at their element
 * default inside Elementor, where the resets would otherwise apply. These two are
 * the ones that actually show: collapsed paragraph spacing, and 40px of surprise
 * padding on any <section> Elementor renders. Both are set at a specificity
 * Elementor's own rules still beat, so nothing deliberate is overridden.
 */
.ct-itin .ct-embed p { margin: 0 0 1em; }
.ct-itin .ct-embed p:last-child { margin-bottom: 0; }
.ct-itin .ct-embed section { padding: 0; }

.ct-itin .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--wrap-pad); }
.ct-itin section { padding: var(--gap) 0; }
.ct-itin .section-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.ct-itin .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.ct-itin .section-head h1 { font-size: 32px; font-weight: 700; color: var(--dark); }
/*
 * h3 SITS BESIDE h2 HERE, AND EVERYWHERE ELSE THIS SELECTOR APPEARS.
 *
 * A section heading is sized by its tag, so three of them dropping to h3 for
 * the document outline would have silently shrunk to the browser default. The
 * heading level is an SEO decision; the size is a design one, and naming both
 * tags is what keeps the two from deciding each other.
 *
 * The same pair is repeated at every breakpoint in tour-responsive.css. Change
 * one and change all of them.
 */
.ct-itin .section-head h2,
.ct-itin .section-head h3 { font-size: 30px; font-weight: 700; color: var(--dark); }
.ct-itin .section-head p { font-size: 15px; color: var(--muted); margin-top: 8px; }

.ct-itin .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 24px; font-weight: 600; font-size: 14.5px; transition: transform .15s ease, box-shadow .15s ease; }
.ct-itin .btn:hover { transform: translateY(-1px); }
.ct-itin .btn-orange { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(246, 139, 45, .35); }
.ct-itin .btn-orange:hover { box-shadow: 0 6px 20px rgba(246, 139, 45, .45); }
.ct-itin .btn-outline-blue { background: #fff; border: 2px solid var(--blue); color: var(--blue); }
.ct-itin .btn-outline-blue:hover { background: var(--blue); color: #fff; }
.ct-itin .btn-dark { background: var(--dark); color: #fff; }
.ct-itin .btn-dark:hover { background: #000; }

.ct-itin .ph { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; text-align: center; padding: 8px; border-radius: 10px; position: relative; overflow: hidden; }
.ct-itin .ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 60%); }
.ct-itin .ratio-16-9 { aspect-ratio: 16/9; }
.ct-itin .ratio-1-1 { aspect-ratio: 1/1; }
.ct-itin .ratio-4-3 { aspect-ratio: 4/3; }
.ct-itin .ratio-9-16 { aspect-ratio: 9/16; }

/*
 * Real images sit in the same slots the placeholders did.
 *
 * `cover`, not `contain`: every slot fills edge to edge and the image is cropped
 * to fit rather than letterboxed. That is the trade being made — a portrait or
 * square photo in a 16/9 slot loses its top and bottom — and it is the right one
 * for a gallery of scenery, where a tight crop still reads as a photograph while
 * grey bars read as a mistake.
 *
 * Two consequences worth knowing:
 *
 *   - has-image's neutral backdrop below is now only ever seen if an image fails
 *     to load. It was there to make letterbox bars look deliberate; cover leaves
 *     no bars. Harmless, so it stays as the broken-image fallback.
 *
 *   - the highlight icons keep `contain` (see .hcard .ic img). An icon that crops
 *     is a broken icon, so that rule is deliberately not in step with this one.
 *
 * On phones the hero is unaffected either way: tour-responsive.css drops its
 * fixed ratio there, so the image sets its own height and there is no slot left
 * to fill or crop against.
 */
.ct-itin .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ct-itin .ph.has-image { background: var(--gray-bg); padding: 0; }
.ct-itin .ph.has-image::after { display: none; }

/* ---------- HERO ---------- */
/*
 * The hero has no padding override of its own — it takes `section`'s var(--gap)
 * top and bottom like every other section, which means the top gap follows the
 * responsive --gap steps instead of being pinned at 28px.
 */
.ct-itin .hero-grid { display: grid; grid-template-columns: 60% 40%; gap: 24px; align-items: start; }
@media (max-width: 900px) { .ct-itin .hero-grid { grid-template-columns: 1fr; } }

/*
 * One big image on top, thumbnails in a scrollable row underneath. The supplied
 * design had the thumbnails as a narrow left-hand column; flex + order flips that
 * without touching the markup, and leaves the DOM order (thumbs first) alone so
 * keyboard users still reach the picker before the picture.
 */
.ct-itin .gallery { display: flex; flex-direction: column; gap: 12px; }

/*
 * THE GALLERY HOLDS ITS PLACE WHILE THE BOOKING WIDGET SCROLLS.
 *
 * The same trick as the video in A Closer Look, and it works here for the same
 * reason: .hero-grid is a grid with `align-items: start`, so this column is its
 * own height rather than stretched to the row's, and there is room beneath it to
 * stick against. The widget is the taller column — price, form, three buttons,
 * the offers — so it is what goes on moving.
 *
 * IT COSTS NOTHING WHEN IT CANNOT HELP. A tour whose gallery is taller than the
 * widget simply never reaches the point of sticking; sticky is self-limiting,
 * so no width or tour needs excluding by hand.
 *
 * WHY 96px AND NOT 20px. .ct-hd__bar is itself sticky at top:0 and stands about
 * 81px tall — a 52px logo inside 14px of padding, plus its border. Anything
 * sticking closer than that slides underneath the navigation and is read as the
 * page overlapping itself. The blue strip above the bar is not counted: it
 * scrolls away and never comes back.
 *
 * The number is a variable because the video in A Closer Look has the same
 * header to clear and is still pinned at its old 20px — when that is put right,
 * this is the one place the offset should come from.
 */
.ct-itin { --ct-stick-top: 96px; }

.ct-itin .gallery { position: sticky; top: var( --ct-stick-top ); align-self: start; }

/*
 * AFTER the rule above, never before it. Both are `.ct-itin .gallery` at the
 * same specificity, so the later one wins at every width — put this block first
 * and the phone keeps a sticky gallery, which is the bug this ordering exists
 * to prevent. The same mistake was made once already on .explain-video.
 *
 * 900px is .hero-grid's own breakpoint, not a number of this rule's choosing:
 * below it the grid is one column, the gallery sits above the widget at full
 * width, and pinning it there would park the photographs on top of the form.
 *
 * `top` goes back to auto as well — a leftover offset on a relative box would
 * push the gallery 96px down the page for no reason.
 */
@media (max-width: 900px) {
	.ct-itin .gallery { position: relative; top: auto; }
}
.ct-itin .main-gallery { order: 1; position: relative; border-radius: var(--radius); overflow: hidden; }
.ct-itin .main-gallery .ph { border-radius: var(--radius); font-size: 16px; font-weight: 600; }

.ct-itin .thumbs { order: 2; display: flex; flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: #C9D4DE transparent; }
.ct-itin .thumbs::-webkit-scrollbar { height: 6px; }
.ct-itin .thumbs::-webkit-scrollbar-track { background: transparent; }
.ct-itin .thumbs::-webkit-scrollbar-thumb { background: #C9D4DE; border-radius: 3px; }
.ct-itin .thumb { flex: 0 0 92px; width: 92px; aspect-ratio: 1/1; border-radius: 8px; cursor: pointer; border: 2px solid transparent; overflow: hidden; padding: 0; background: none; }
.ct-itin .thumb.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 137, 207, .25); }
.ct-itin .thumb .ph { border-radius: 6px; font-size: 9px; }
@media (max-width: 600px) { .ct-itin .thumb { flex-basis: 76px; width: 76px; } }

.ct-itin .gallery-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
.ct-itin .glass-btn { background: rgba(255, 255, 255, .25); backdrop-filter: blur(6px); color: #fff; padding: 8px 14px; border-radius: 18px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .4); }

/* Booking widget */
.ct-itin .widget { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.ct-itin .deadline { display: flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.ct-itin .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-itin .discount-tag { background: var(--red); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.ct-itin .price-now { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 28px; color: var(--dark); }
.ct-itin .price-was { color: var(--muted); text-decoration: line-through; font-size: 15px; }
.ct-itin .price-label { font-size: 12.5px; color: var(--muted); }
.ct-itin .child-badge { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* Shown only when a foreigner price was converted rather than quoted outright. */
.ct-itin .approx-note { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); font-style: italic; }

/*
 * Nationality tier toggle.
 *
 * Rendered only when the tour has both an Indian and a foreign-national price.
 * Both price panels are in the HTML and this switches which one is shown, so the
 * page stays fully cacheable — see the note in templates/single-tour.php.
 */
.ct-itin .nat-toggle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--gray-bg); border-radius: 22px; padding: 5px 6px 5px 12px; margin-bottom: 14px; }
.ct-itin .nat-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; }
.ct-itin .nat-btn { flex: 1 1 auto; padding: 8px 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: transparent; white-space: nowrap; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.ct-itin .nat-btn:hover { color: var(--dark); }
.ct-itin .nat-btn.active { background: #fff; color: var(--blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.ct-itin .nat-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 400px) { .ct-itin .nat-toggle { padding: 8px; } .ct-itin .nat-label { flex: 0 0 100%; margin-bottom: 2px; } }

.ct-itin .booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.ct-itin .booking-form .full { grid-column: 1/-1; }
.ct-itin .field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/*
 * Both controls are styled together. The date field is an <input type="date">
 * rather than a select because there is no per-tour departure list to populate a
 * select with yet, and a fake one would be worse than a free date.
 *
 * -webkit-appearance:none is deliberately NOT set: it would remove the native
 * date picker indicator in WebKit and leave no way to open the calendar.
 */
.ct-itin .field select,
.ct-itin .field input[type="date"] { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font-size: 14px; font-family: inherit; color: var(--dark); background: #fff; }
.ct-itin .field select:focus-visible,
.ct-itin .field input[type="date"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

.ct-itin .check-avail { width: 100%; margin-bottom: 10px; }
.ct-itin .urgency-box { background: linear-gradient(180deg, #FFF7E0, #FFF1C9); border-left: 4px solid var(--orange); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ct-itin .urgency-box .row { font-size: 12.5px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 6px; }
.ct-itin .countdown { font-variant-numeric: tabular-nums; }
.ct-itin .info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ct-itin .info-card { background: var(--gray-bg); border-radius: 8px; padding: 10px 12px; }
.ct-itin .info-card .t { font-size: 12.5px; font-weight: 700; }
.ct-itin .info-card .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ct-itin .status-note { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--red); }

/* ---------- META STRIP ---------- */
.ct-itin .meta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Overrides .wrap's padding wholesale, so it has to take the gutter variable too
   or this one strip ends up inset differently from every other section. */
.ct-itin .meta-strip .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 16px var(--wrap-pad); }
.ct-itin .meta-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dark); font-weight: 500; }

/* ---------- HIGHLIGHTS ---------- */
.ct-itin .highlights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .ct-itin .highlights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ct-itin .highlights-grid { grid-template-columns: 1fr; } }
.ct-itin .hcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
.ct-itin .hcard:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, .08); }
.ct-itin .hcard .ic { font-size: 26px; margin-bottom: 10px; }
.ct-itin .hcard .ic img { width: 34px; height: 34px; object-fit: contain; }
.ct-itin .hcard h4 { font-size: 15.5px; margin-bottom: 6px; }
.ct-itin .hcard p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- ITINERARY ACCORDION ---------- */
.ct-itin .itin-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-itin .expand-all-link { color: var(--blue); font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 0; }
.ct-itin .expand-all-link:hover { text-decoration: underline; }
.ct-itin .itin-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: #fff; }
.ct-itin .itin-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; background: #fff; width: 100%; text-align: left; }
.ct-itin .itin-head .left { display: flex; align-items: center; gap: 14px; }
.ct-itin .day-num { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; background: var(--gray-bg); color: var(--muted); padding: 5px 12px; border-radius: 8px; white-space: nowrap; }
/*
 * The wrapper carries the heading level and nothing else; the span inside
 * carries the look the h4 used to have. Splitting them is what lets the
 * level change without the size changing with it.
 */
.ct-itin .itin-h { margin: 0; padding: 0; font: inherit; color: inherit; }
.ct-itin .itin-head .itin-t { font-size: 17px; font-weight: 700; color: var(--dark); }
.ct-itin .itin-head .chev { transition: transform .2s ease; font-size: 14px; color: var(--muted); transform: rotate(180deg); }
.ct-itin .itin-item.open .itin-head .chev { transform: rotate(0deg); }

/*
 * The original animated a fixed max-height, which silently clips any day with a
 * lot of content. Grid-template-rows animates to the row's real height instead,
 * so a long day cannot be cut off.
 */
.ct-itin .itin-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; background: #fff; }
.ct-itin .itin-item.open .itin-body { grid-template-rows: 1fr; }
.ct-itin .itin-body > .itin-body-inner { overflow: hidden; min-height: 0; }
.ct-itin .itin-body-inner { padding: 0 22px; }
.ct-itin .itin-item.open .itin-body-inner { padding-bottom: 20px; }

.ct-itin .itin-desc { list-style: none; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.ct-itin .itin-desc li { font-size: 14.5px; color: var(--dark); line-height: 1.6; display: flex; gap: 10px; }
.ct-itin .itin-desc li::before { content: '\2022'; color: var(--blue); font-weight: 700; flex-shrink: 0; }

/* ---------- DAY STOPS: a numbered timeline ----------
 *
 * The line is a border on the <ol>, and each marker sits on top of it. That
 * way the line is one element rather than a pseudo-element per row that has
 * to be cut short on the last one.
 *
 * counter-reset/increment rather than <ol>'s own numbering, because the marker
 * is a styled circle and list-item markers cannot be given a background.
 */
.ct-itin .ct-stops { list-style: none; margin: 25px 0; padding: 0 0 16px 34px; border-bottom: 1px solid var(--border); position: relative; counter-reset: ct-stop; }
/* The line is drawn per stop, below — one element on the list could only ever
   end at a guessed distance from the bottom, which is not where the last
   circle is once that stop has a description under it. */
.ct-itin .ct-stop { position: relative; counter-increment: ct-stop; }
.ct-itin .ct-stop + .ct-stop { margin-top: 25px; }
/*
 * The line, one segment per stop: from just under this circle to the top of
 * the next one, so the segments meet and the LAST stop draws none.
 *
 * -23px is the circle's centre: it is 24px wide at left:-34px, so the middle
 * is 12px in and a 2px line sits one pixel left of that. bottom:-25px is the
 * gap to the next stop, which is what closes the join.
 */
.ct-itin .ct-stop::after { content: ''; position: absolute; left: -23px; top: 24px; bottom: -25px; width: 2px; background: #1A1A1A; }
.ct-itin .ct-stop:last-child::after { content: none; }
/* The stops block owns the 25px beneath it. Without this the next field's
   own 14px of padding is added to that margin and the gap comes to 39px —
   against 14px between every other pair of fields in the day. */
.ct-itin .ct-stops + .itin-field { padding-top: 0; }
.ct-itin .ct-stop::before { content: counter(ct-stop); position: absolute; left: -34px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #1A1A1A; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ct-itin .ct-stop__name { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.4; }
/* The editor wraps the title in <p>; without this it would gain a paragraph's
   own margins and sit away from its number. */
.ct-itin .ct-stop__name p { margin: 0; }
.ct-itin .ct-stop__body { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ct-itin .ct-stop__body p { margin: 0 0 8px; }
.ct-itin .ct-stop__body p:last-child { margin-bottom: 0; }
/* Clamped only when the script has found it overflows — see tour-itinerary.js.
   Without JavaScript nothing carries this class and the full text shows. */
.ct-itin .ct-stop__body.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-itin .ct-stop__more { margin: 3px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--dark); text-decoration: underline; cursor: pointer; }
.ct-itin .ct-stop__more:hover { color: var(--blue); }
/* The two notes read as one line separated by a dot, and wrap as a pair. */
.ct-itin .ct-stop__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.ct-itin .ct-stop__meta span + span::before { content: '\2022'; margin-right: 14px; color: var(--muted); }
@media (max-width: 520px) {
	.ct-itin .ct-stops { padding-left: 30px; }
	.ct-itin .ct-stop::before { left: -30px; width: 21px; height: 21px; font-size: 11px; }
	/* 21px circle at -30px: centre 10.5px in, so the line sits at -20.5px and
	   starts 21px down instead of 24px. */
	.ct-itin .ct-stop::after { left: -20.5px; top: 21px; }
}
.ct-itin .itin-prose { font-size: 14.5px; line-height: 1.7; color: var(--dark); padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.ct-itin .itin-prose p { margin: 0 0 10px; }
.ct-itin .itin-prose p:last-child { margin-bottom: 0; }
.ct-itin .itin-field { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ct-itin .itin-field:last-child { border-bottom: none; }
.ct-itin .itin-field .label-row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--dark); }
.ct-itin .itin-field .value { font-size: 14px; color: var(--dark); margin: 4px 0 0 26px; line-height: 1.6; }
/* One stay: name, then a lighter qualifier, then any detail under both. */
.ct-itin .itin-field .ct-stay { display: block; }
.ct-itin .itin-field .ct-stay + .ct-stay { margin-top: 10px; }
.ct-itin .ct-stay__t { display: block; font-weight: 600; }
.ct-itin .ct-stay__s { display: block; color: var(--dark); }
.ct-itin .ct-stay__d { display: block; color: var(--dark); font-size: 13.5px; margin-top: 2px; }

/* ---------- MEETING / ADDITIONAL INFO / CANCELLATION ---------- */
.ct-itin .mp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ct-itin .mp-row { display: flex; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.ct-itin .mp-row:last-child { border-bottom: none; }
.ct-itin .mp-label { flex: 0 0 160px; font-weight: 700; font-size: 14.5px; color: var(--dark); }
.ct-itin .mp-value { flex: 1; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.ct-itin .mp-value p { margin: 0 0 8px; }
.ct-itin .mp-value p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .ct-itin .mp-row { flex-direction: column; gap: 4px; } .ct-itin .mp-label { flex: none; } }

.ct-itin .addinfo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-itin .addinfo-list li { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; font-size: 14.5px; color: var(--dark); display: flex; gap: 10px; }
.ct-itin .addinfo-list li::before { content: '\2139\FE0F'; flex-shrink: 0; }

.ct-itin .cancel-card { background: var(--gray-bg); border-radius: var(--radius); padding: 24px 26px; display: grid; gap: 12px; }
.ct-itin .cancel-card p { font-size: 14.5px; color: var(--dark); line-height: 1.7; margin: 0; }

/* ---------- WHY CHOOSE ---------- */
/*
 * "A closer look" — the video and selling-points card, printed by
 * templates/single-tour.php from includes/tour-closer-look.php.
 *
 * The numbers below are the Elementor template this card replaced, read off its
 * saved settings so the move was invisible: card #F5F7FA at 14px radius with
 * 30px of padding, a 32px column gap, a 30px/40px heading, 15px/25px list lines
 * 8px apart, and a 12px green tick. Those greys and greens are already the
 * page's own variables, which is why none of them is written as a literal here.
 */
.ct-itin .explain-card { background: var(--gray-bg); border-radius: var(--radius); padding: 30px; }
.ct-itin .explain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.ct-itin .explain-grid.no-video { grid-template-columns: 1fr; }
/*
 * position: sticky, because the Elementor template this replaced had
 * `"sticky":"top"` with `"sticky_parent":"yes"` on the video's container: the
 * player held still while the points and the form scrolled past it. Dropping
 * that on the way to native markup is what made the video "stop scrolling".
 *
 * sticky needs both of these or it silently does nothing:
 *   - align-self: start, or the grid stretches this item to the row height and
 *     there is no slack left for it to travel in;
 *   - no `overflow` on any ancestor. .explain-card, .explain-grid, .wrap and
 *     section are all clear — the overflow below is this element's own, which
 *     clips the iframe's corners and does not affect its stickiness.
 *
 * `sticky_parent` needs no equivalent: a sticky box already stops at the bottom
 * of its own container.
 *
 * DESKTOP ONLY, which is where Elementor had it too. Beside a text column a
 * held video reads as deliberate; stacked on a phone the only way it can stay
 * on screen is by having the points and the form slide underneath it, which
 * reads as the page being stuck. It was tried on phones and taken back out.
 *
 * The 860px override below has to come AFTER this rule, not before it. Both are
 * `.ct-itin .explain-video` at the same specificity, so the later one wins at
 * every width — put the media block first and the phone keeps a sticky video,
 * which is exactly the bug this ordering exists to avoid.
 */
.ct-itin .explain-video { position: sticky; top: 20px; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; align-self: start; }

@media (max-width: 860px) {
	.ct-itin .explain-grid { grid-template-columns: 1fr; }
	/* Back to an ordinary block that scrolls away with everything else. `top`
	   goes back to auto as well: a leftover offset on a relative box would shift
	   the video 20px down the page for no reason. */
	.ct-itin .explain-video { position: relative; top: auto; }
}
.ct-itin .explain-video .ph,
.ct-itin .explain-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 12px; font-size: 15px; font-weight: 600; }
/* h2 beside h3 for the reason given on .section-head above: this card's
   heading became an h2 and must not change size for it. */
.ct-itin .explain-content h2,
.ct-itin .explain-content h3 { font-size: 30px; line-height: 40px; font-weight: 700; margin-bottom: 28px; }
.ct-itin .explain-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.ct-itin .explain-list li { display: flex; gap: 5px; font-size: 15px; line-height: 25px; color: var(--dark); }
/* line-height on the tick as well, or a 12px glyph sits on the text baseline
   instead of on the first line's centre once the line wraps. */
.ct-itin .explain-list li::before { content: '\2713'; color: var(--green); font-weight: 700; font-size: 12px; line-height: 25px; }

/*
 * The white form panel at the foot of the card. Its shortcode is admin-entered,
 * so what lands inside is somebody else's markup — Elementor, WPForms, CF7.
 *
 * The rules below are deliberately weak: two classes plus an element, which
 * every one of those plugins beats with its own three-class selectors. They are
 * a floor for a form that arrives unstyled, not an attempt to restyle one that
 * did not. Sizes are the Elementor panel's own: 13px/23px text on a 1px #E5E8EC
 * border at 8px radius, in a 12px-radius white box with 20px of padding.
 */
.ct-itin .explain-form { background: var(--white); border-radius: 12px; padding: 20px; margin-top: 20px; }
.ct-itin .explain-form h4 { margin: 0 0 12px; font-size: 13px; line-height: 23px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--dark); }
.ct-itin .explain-form input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
.ct-itin .explain-form select,
.ct-itin .explain-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--dark); font-size: 13px; line-height: 23px; }
.ct-itin .explain-form textarea { min-height: 90px; }
.ct-itin .explain-form input[type='submit'],
.ct-itin .explain-form button[type='submit'] { padding: 12px 22px; border: 2px solid var(--blue); border-radius: 82px; background: var(--white); color: var(--blue); font-weight: 600; cursor: pointer; }

/*
 * An Elementor template arrives wrapped in its own containers, and the one used
 * here still carries the section padding and the white panel it had when it was
 * the whole block: 30px of container padding around a 12px-radius white box with
 * 20px of its own. Inside OUR white box that is three nested panels and 70px of
 * padding a side, white on white.
 *
 * So the embed's containers are flattened and this card's panel is the only one
 * that draws. Four classes deep, which beats Elementor's own two-class
 * `.elementor-17704 .elementor-element-f63b540` without !important.
 *
 * Scoped to .explain-form on purpose — .ct-embed elsewhere on the page still
 * wants Elementor's own spacing, because there it IS the section.
 */
.ct-itin .explain-form .elementor .e-con,
.ct-itin .explain-form .elementor .e-con-inner { margin: 0; padding: 0; background: none; border-radius: 0; }

/* ---------- INCLUSIONS ---------- */
.ct-itin .incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* A tour that excludes nothing should not have to invent an exclusion to keep
   the layout balanced: the one list it does have takes the whole row. */
.ct-itin .incl-grid > .incl-card:only-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .ct-itin .incl-grid { grid-template-columns: 1fr; } }
.ct-itin .incl-card { border-radius: 16px; padding: 28px 32px; transition: transform .25s ease, box-shadow .25s ease; }
.ct-itin .incl-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.10); }
.ct-itin .incl-card.yes { background: rgba(0, 182, 122, .07); border: 1px solid rgba(0, 182, 122, .25); }
.ct-itin .incl-card.no { background: rgba(239, 49, 54, .06); border: 1px solid rgba(239, 49, 54, .2); }
.ct-itin .incl-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.ct-itin .incl-card.yes h3 { color: var(--green); }
.ct-itin .incl-card.no h3 { color: var(--red); }
/* Rows divided by a hairline rather than floated apart by a gap. With a gap
   the eye has to group them; with a rule between them a list of fifteen
   inclusions reads as fifteen things rather than as a paragraph that happens
   to have line breaks.

   The line is the tint of the card it sits on, not a grey — a grey hairline
   across a green panel reads as dirt. */
.ct-itin .incl-list { list-style: none; margin: 0; padding: 0; }
.ct-itin .incl-list li { padding: 6px 0; transition: transform .15s ease; }
.ct-itin .incl-card.yes .incl-list li { border-bottom: 1px solid rgba(0,182,122,.18); }
.ct-itin .incl-card.no .incl-list li { border-bottom: 1px solid rgba(239,49,54,.15); }
/* The last row has nothing under it to divide it from. */
.ct-itin .incl-list li:last-child { border-bottom: none; }
.ct-itin .incl-list li:hover { transform: translateX(4px); }
.ct-itin .incl-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* ---------- HOTEL CARDS ---------- */
.ct-itin .hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 800px) { .ct-itin .hotel-grid { grid-template-columns: 1fr; } }
.ct-itin .hotel-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: transform .15s ease, box-shadow .15s ease; background: #fff; }
.ct-itin .hotel-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }
.ct-itin .hotel-card .ph { border-radius: 0; }
.ct-itin .hotel-info { padding: 16px 18px; }
.ct-itin .hotel-info .city { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.ct-itin .hotel-info h4 { font-size: 16px; margin: 4px 0 6px; }
.ct-itin .hotel-info p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.ct-itin .stars { color: var(--gold); font-size: 14px; }

/* ---------- CAROUSEL ---------- */
.ct-itin .carousel-wrap { position: relative; }
.ct-itin .carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.ct-itin .carousel::-webkit-scrollbar { display: none; }
.ct-itin .carousel > * { scroll-snap-align: start; flex: 0 0 auto; }
.ct-itin .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 3; }
.ct-itin .carousel-nav.prev { left: -8px; }
.ct-itin .carousel-nav.next { right: -8px; }
@media (max-width: 600px) { .ct-itin .carousel-nav { display: none; } }

/* Package cards are links, so they need an explicit block box for the width. */
.ct-itin .pkg-card { display: block; width: 270px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.ct-itin .pkg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }
.ct-itin .pkg-card .ph { border-radius: 0; }
.ct-itin .pkg-info { padding: 16px; }
.ct-itin .pkg-info h4 { font-size: 15px; margin-bottom: 4px; }
.ct-itin .pkg-info .dur { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ct-itin .pkg-info .price { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark); }

/*
 * The price and the way in, on one line.
 *
 * space-between rather than a gap, so the button keeps the right edge on a
 * card whose price is three characters and on one whose price is seven. It
 * wraps rather than overflows, which is what the narrowest card needs before
 * the breakpoint in tour-responsive.css takes over.
 */
.ct-itin .pkg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/*
 * Blue at rest and orange on hover, the same pair the category cards use, and
 * driven by hovering the CARD rather than the button: the button is a span, it
 * is not what the pointer is really aiming at, and lighting it up only on its
 * own ninety pixels would make the rest of the card feel unclickable.
 */
.ct-itin .pkg-go { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue); color: var(--white); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.ct-itin .pkg-card:hover .pkg-go { border-color: var(--orange); background: var(--orange); }

.ct-itin .sq-card { width: 180px; border-radius: 12px; overflow: hidden; position: relative; transition: transform .18s ease; border: 2px solid transparent; }
.ct-itin .sq-card .ph { border-radius: 10px; font-size: 11px; }
.ct-itin .sq-overlay { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent); color: #fff; padding: 10px; font-size: 12px; font-weight: 600; }

/* ---------- FAQ ---------- */
/* The category page's questions, brought here: a bordered card each rather
   than rows divided by a single line. Everything below is styling — the
   button and the grid-rows animation are untouched, because the itinerary's
   own days run on exactly the same accordion. */
.ct-itin .faq-item { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .25s ease; }

/*
 * The heading around each question carries no appearance of its own: the
 * question is a heading for the document outline, and the button inside it is
 * what everybody actually sees. `font: inherit` takes the theme's h4 size,
 * weight and family off in one declaration, and the margin would otherwise
 * push every question away from its own panel.
 */
.ct-itin .faq-qh { margin: 0; padding: 0; font: inherit; color: inherit; }
.ct-itin .faq-item:hover { border-color: var(--blue); }
.ct-itin .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; background: transparent; border: 0; cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.4; text-align: left; color: var(--dark); transition: background .2s ease; }
.ct-itin .faq-q:hover { background: var(--gray-bg); }
.ct-itin .faq-q .chev { flex: 0 0 auto; color: var(--orange); font-size: 20px; line-height: 1; transition: transform .25s ease; }
/* Same grid-rows approach as the itinerary, for the same reason. */
.ct-itin .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; font-size: 15px; line-height: 1.7; color: var(--muted); }
.ct-itin .faq-item.open .faq-a { grid-template-rows: 1fr; }
.ct-itin .faq-a > div { overflow: hidden; min-height: 0; }
.ct-itin .faq-a > div > * { padding: 0 20px; }
/* Only ever on .open. The closed panel is collapsed with grid-template-rows,
   and padding on a collapsed row still occupies its own height — so a
   padding set outside this rule would leave a band of empty space under
   every shut question. */
.ct-itin .faq-item.open .faq-a > div { padding: 10px 0 20px 0; }
.ct-itin .faq-item.open .faq-q .chev { transform: rotate(45deg); }

/* ---------- PAYMENT BADGE ---------- */
.ct-itin .payment-badge { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); border-radius: var(--radius); padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #fff; }
.ct-itin .payment-badge h3 { font-size: 19px; margin-bottom: 4px; }
.ct-itin .payment-badge p { font-size: 13.5px; color: rgba(255, 255, 255, .85); }

/* ---------- MOBILE STICKY CTA ---------- */
/*
 * Not scoped under .ct-itin, because the bar is not inside it.
 *
 * CT_Template::mobile_cta() prints it on wp_footer so it is a direct child of
 * body: a position:fixed element anchors to the nearest ancestor with a
 * transform, filter, perspective or contain, and only to the viewport when there
 * is none. Nested inside the page wrapper it was being lifted off the bottom of
 * the screen on real devices, and the offending property was being applied at
 * runtime — nothing in any stylesheet on the page accounts for it.
 *
 * The consequence of living outside .ct-itin is that the design tokens declared
 * there are out of scope, so the colours and the font are literals here. They are
 * the same values: --border, --dark, --orange, Inter.
 */
.ct-mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	grid-template-columns: 1fr 1fr 1fr 1.4fr;
	background: #fff;
	border-top: 1px solid #E5E8EC;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	font-family: 'Inter', sans-serif;
	line-height: 1.25;
	z-index: 200;
}

.ct-mobile-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px; font-size: 10.5px; font-weight: 600; color: #1A1A1A; text-decoration: none; }
.ct-mobile-cta a:last-child { background: #F68B2D; color: #fff; }

@media (max-width: 760px) {

	.ct-mobile-cta { display: grid; }

	/*
	 * The page has to reserve the bar's height so the last section is not sitting
	 * underneath it. Includes the gesture inset, because the bar grows by that.
	 */
	.ct-itin { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

	/*
	 * The safe-area inset goes on the links, NOT on the bar.
	 *
	 * The bar is a grid container, so padding on it lands outside the grid's
	 * content box: all four cells stop short of it and only the bar's own white
	 * background fills the strip. Since the orange sits on a grid item
	 * (a:last-child) it cannot reach down there, which showed as a white band
	 * under Book Now. Padding each link instead makes every cell — orange
	 * included — reach the physical bottom of the screen.
	 *
	 * The page uses viewport-fit=cover, so this is what keeps the labels clear of
	 * the iOS home indicator and the Android gesture pill.
	 */
	.ct-mobile-cta a { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

.ct-itin .bg-gray { background: var(--gray-bg); }

/* Renamed from `pulse` so it cannot collide with a theme or plugin animation. */
.ct-itin .pulse { animation: ct-pulse 2.2s infinite; }

@keyframes ct-pulse {
	0% { box-shadow: 0 0 0 0 rgba(246, 139, 45, .5); }
	70% { box-shadow: 0 0 0 10px rgba(246, 139, 45, 0); }
	100% { box-shadow: 0 0 0 0 rgba(246, 139, 45, 0); }
}

/* The mark, coloured on its own now that it is a span rather than a
   character sitting at the front of the sentence. */
.ct-itin .incl-mark { flex: 0 0 auto; font-weight: 700; }
.ct-itin .incl-card.yes .incl-mark { color: var(--green); }
.ct-itin .incl-card.no .incl-mark { color: var(--red); }

/* FIVE, THEN A BUTTON.

   is-clipped is put on by the script, never by PHP. With the script blocked
   the whole list is on the page and the button is still hidden — for a list
   of what somebody is paying for, showing everything is the right failure.

   nth-child rather than a height: a fixed height that half-cuts the sixth
   line depends on how long the lines are, and these lines are written by
   the office. */
.ct-itin .incl-list.is-clipped li:nth-child(n+6) { display: none; }
.ct-itin .incl-list.is-clipped li:nth-child(5) { border-bottom: none; }

.ct-itin .incl-more { display: inline-block; margin-top: 14px; padding: 7px 18px; border: 1px solid currentColor; border-radius: 20px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.ct-itin .incl-more[hidden] { display: none; }
.ct-itin .incl-card.yes .incl-more { color: var(--green); }
.ct-itin .incl-card.no .incl-more { color: var(--red); }
.ct-itin .incl-card.yes .incl-more:hover { background: var(--green); color: #fff; }
.ct-itin .incl-card.no .incl-more:hover { background: var(--red); color: #fff; }

/* =====================================================================
 * The questions, in the category page's container
 *
 * The card itself already matches. What did not was the box around it, and
 * in exactly three ways:
 *
 *   band     this page pads a section by --gap (40 / 34 / 28); the category
 *            page pads its questions by a flat 48.
 *   heading  28px under it here, 20 on a phone; 32 there, at every width.
 *   gutter   this page steps 24 -> 16 -> 13; that one steps 24 -> 16 and
 *            stops, so below 420px the two were 3px apart each side.
 *
 * Pinned on this section alone rather than by moving --gap or --wrap-pad,
 * which every other section on the page is built on — the hero's breakout
 * is computed from the gutter, so changing it globally would move the
 * picture at the top of the page to fix the questions at the bottom.
 *
 * Three classes deep, so it beats the page's own two-deep rules whatever
 * order the stylesheets end up in.
 *
 * THE HEADING SIZE IS DELIBERATELY LEFT ALONE. This page scales its
 * headings 30 / 27 / 23 / 21 and the category page clamps between 24 and
 * 32; matching it here would leave one heading out of ten a different size
 * from its neighbours, which reads as a mistake rather than as a match.
 * ================================================================== */

.ct-itin .ct-faq { padding: 48px 0; }
.ct-itin .ct-faq .wrap { padding: 0 24px; }
.ct-itin .ct-faq .section-head { margin-bottom: 32px; }

@media (max-width: 767px) {
	.ct-itin .ct-faq .wrap { padding: 0 16px; }
	.ct-itin .ct-faq .section-head { margin-bottom: 32px; }
}