/*
* THE CLEAN DESIGN. REBUILD SPEC 9.
*
* The plain white design Malaysia, Australia and India use. A country chooses
* it with `design => 'clean'` in its settings; includes/inc.header.php then puts
* `design-clean` on <html> and links this file last in <head>. Thailand uses the
* classic design and never loads this file.
*
* ⛔ EVERY SELECTOR STARTS WITH html.design-clean. So this file cannot change a
* classic page even if it were loaded by mistake. tests/verify-clean-scope.sh
* fails on any rule that does not.
*
* ⛔ A COUNTRY SUPPLIES ONE VALUE: --clean-primary, in its own theme file. Every
* other value here is the design's, not the country's: the text, the greys, the
* rules, the pale ground and the two typefaces.
*
* ⛔ THE CLASSIC STYLESHEETS STILL LOAD AND STILL READ THEIR 23 --dft- VALUES.
* This file defines all 23 from the primary colour and the design's neutrals, so
* a clean country's theme holds one value, not 23.
* tests/verify-theme-variables.sh compares the list below with the list the
* shared code reads, both ways: a 24th value added to dft.css fails that check
* instead of going unpainted on the clean sites.
*
* ⚠️ THE DARKENED PRIMARY IS INSIDE @supports, AND THAT IS NOT OPTIONAL. A
* browser without color-mix() (Chrome before 111, Safari before 16.2, UC
* Browser) keeps the plain primary. A second declaration after a first one is
* NOT a fallback here: a value that holds var() is accepted when the file is
* read and fails only when it is used, and it then makes the property unset,
* not the earlier value.
*/
html.design-clean {

	/* THE DESIGN'S OWN VALUES -------------------------------------------- */

	--clean-text:  #1B1B1A;   /* body text, headings, chart marks */
	--clean-mute:  #5C5B57;   /* secondary text */
	--clean-ink2:  #8A877F;   /* the second chart shade; carries no text */
	--clean-rule:  #E4E2DC;   /* hairline rules and card borders */
	--clean-track: #EBE9E3;   /* chart tracks and hover grounds */
	--clean-soft:  #F6F5F1;   /* the pale ground behind a panel */

	--clean-font-body:    'IBM Plex Sans', 'Helvetica Neue', sans-serif;
	--clean-font-heading: 'Newsreader', Georgia, serif;

	/* Links, and anything darker than the primary. The plain primary here;
	 * the darkened one below, where the browser can mix. */
	--clean-link:  var(--clean-primary);

	/* THE CLASSIC DESIGN'S 23 VALUES, FROM THE ABOVE --------------------- */

	--dft-brand:       var(--clean-primary);
	--dft-brand-dark:  var(--clean-link);
	--dft-brand-wash:  var(--clean-soft);
	--dft-brand-glow:  var(--clean-primary);

	--dft-blue:        var(--clean-link);
	--dft-blue-hover:  var(--clean-primary);
	--dft-blue-alt:    var(--clean-ink2);
	--dft-focus:       var(--clean-primary);

	--dft-panel:       var(--clean-soft);
	--dft-panel-blue:  var(--clean-soft);
	--dft-panel-quiet: var(--clean-soft);
	--dft-blue-rule:   var(--clean-rule);
	--dft-hover:       var(--clean-track);
	--dft-hover-alt:   var(--clean-track);
	--dft-track:       var(--clean-track);
	--dft-card-rule:   var(--clean-rule);
	--dft-pages:       var(--clean-soft);
	--dft-pages-hover: var(--clean-track);

	/* ⛔ CROSSED ON PURPOSE. The classic names describe the opposite of what
	 * they paint: skeleton-dft.css sets body text in --dft-font-heading, and
	 * dft.css sets the article headings, the slide-out menu headings and the
	 * footer heading in --dft-font-body. Matched by name, Malaysia got serif
	 * body text and sans-serif headings. */
	--dft-font-body:    var(--clean-font-heading);
	--dft-font-heading: var(--clean-font-body);

	/* No decorative photographs in this design. */
	--dft-bg-header: none;
	--dft-bg-news:   none;
	--dft-bg-travel: none;
}

@supports (color: color-mix(in srgb, red 70%, black)) {
	html.design-clean {
		--clean-link: color-mix(in srgb, var(--clean-primary) 70%, black);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 2: EVERY PAGE'S FRAME. SPEC 9 §9.
 *
 * ⚠️ WEIGHT, NOT ORDER. Each rule below must outweigh the classic rule it
 * replaces, so where dft.css names an id (aside #airports h2) the rule here
 * names it too. html.design-clean adds one class and one element to every
 * selector, which beats a classic rule of the same shape.
 *
 * The page width is the classic container's: 96% up to 1320px. --clean-gutter
 * is the space either side of it, so a full-width band can hold its content
 * in line with the page.
 * ═════════════════════════════════════════════════════════════════════════ */

html.design-clean {
	--clean-gutter: max(2%, calc((100% - 1320px) / 2));
	--clean-field-rule: #A9A59B;
}

/* ── THE HEADER ────────────────────────────────────────────────────────── */

html.design-clean header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	padding: 12px 16px;
	color: var(--clean-text);
	background: #fff;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean header a {
	color: var(--clean-text);
}
html.design-clean header .container,
html.design-clean header .container.main,
html.design-clean header nav .container {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
html.design-clean header .logo {
	position: static;
	float: none;
	width: 250px;
}
/* The bell and its dropdown. Its script binds a click and nothing else, so a
 * hidden bell is never clicked. */
html.design-clean header .connect {
	display: none;
}
html.design-clean header nav {
	position: static;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
}

/* The phone menu: the existing toggle, drawn as a bordered box. */
html.design-clean .main-menu-btn {
	float: none;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--clean-rule);
	border-radius: 2px;
	box-sizing: border-box;
	text-indent: 44px;
}
html.design-clean .main-menu-btn-icon,
html.design-clean .main-menu-btn-icon:before,
html.design-clean .main-menu-btn-icon:after {
	width: 22px;
	height: 2px;
	background: var(--clean-text);
}
html.design-clean .main-menu-btn-icon {
	top: 20px;
	left: 10px;
}
html.design-clean .main-menu-btn-icon:before {
	top: -7px;
	left: 0;
}
html.design-clean .main-menu-btn-icon:after {
	top: 7px;
	left: 0;
}
html.design-clean #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
	background: transparent;
}
html.design-clean #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before,
html.design-clean #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
	top: 0;
}
html.design-clean header nav ul {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	min-height: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	background: #fff;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean header nav ul li {
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean header nav ul li:last-child {
	border-bottom: 0;
}
html.design-clean header nav ul li:hover,
html.design-clean header nav ul li a.active {
	background: none;
}
html.design-clean header nav ul li a {
	height: auto;
	padding: 0 16px;
	line-height: 48px;
	font-size: 16px;
	color: var(--clean-text);
}
html.design-clean header nav ul li a:hover {
	color: var(--clean-link);
}
html.design-clean header nav ul li a.active {
	color: var(--clean-text);
	box-shadow: inset 3px 0 0 var(--clean-primary);
}
/* The icon beside "Schedules". The board has none. */
html.design-clean header nav ul li a i {
	display: none;
}

/* Desktop: the logo and the menu on one row. */
@media (min-width: 950px) {
	html.design-clean header {
		height: auto;
		padding: 22px var(--clean-gutter);
	}
	html.design-clean header .logo {
		width: 340px;
	}
	/* ⛔ THE CLASSIC RULE THAT SHOWS THE MENU NAMES ITS ID
	 * (#main-menu-state:not(:checked) ~ #main-menu), so this one must too, or
	 * the list stays a column. */
	html.design-clean header nav ul,
	html.design-clean #main-menu-state:not(:checked) ~ #main-menu,
	html.design-clean #main-menu-state:checked ~ #main-menu {
		position: static;
		display: flex;
		gap: 28px;
		background: none;
		border: 0;
	}
	html.design-clean header nav ul li {
		display: block;
		border: 0;
	}
	/* "Home": the logo is the home link, as on the board. */
	html.design-clean header nav ul li:first-child {
		display: none;
	}
	html.design-clean header nav ul li a {
		padding: 4px 0;
		line-height: 1.4;
		font-size: 15px;
		border-bottom: 2px solid transparent;
	}
	html.design-clean header nav ul li a.active {
		box-shadow: none;
		border-bottom-color: var(--clean-primary);
	}
}

/* ── THE SEARCH PANEL ──────────────────────────────────────────────────── */

html.design-clean section#banner,
html.design-clean section#banner.show {
	padding: 18px var(--clean-gutter);
	background: var(--clean-soft);
	box-shadow: none;
	border-bottom: 1px solid var(--clean-rule);
	transition: none;
}
html.design-clean section#banner:after {
	content: none;
}
html.design-clean #search-form,
html.design-clean section#banner #search-form {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--clean-text);
	background: none;
	box-shadow: none;
}
html.design-clean #search-form h3.ribbon {
	display: none;
}
html.design-clean #search-form .options {
	margin-bottom: 10px;
}
html.design-clean #search-form .options label {
	margin: 0 20px 0 5px;
	font-size: 15px;
	font-weight: 400;
}
html.design-clean #search-form .options input {
	accent-color: var(--clean-text);
}
html.design-clean #search-form label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--clean-text);
}
html.design-clean #search-form .locations input,
html.design-clean #search-form .dates input,
html.design-clean #search-form .extras input,
html.design-clean #search-form .extras select {
	height: 44px;
	margin: 6px 0 0;
	padding: 0 12px;
	line-height: 42px;
	font-size: 16px;
	color: var(--clean-text);
	background-color: #fff;
	border: 1px solid var(--clean-field-rule);
	border-radius: 2px;
	box-sizing: border-box;
}
/* The dates and the extras are two inline blocks; aligned by their tops,
 * their captions sit on one line. */
html.design-clean #search-form .dates,
html.design-clean #search-form .extras {
	vertical-align: top;
}
html.design-clean #search-form .locations input.airportPicker {
	padding-right: 42px;
}
html.design-clean #search-form .extras label#search--label-submit {
	color: var(--clean-text);
}
html.design-clean #search-form #search--submit,
html.design-clean #search-form #search--submit:hover {
	height: 44px;
	margin-top: 6px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean #search-form #search--submit:hover {
	background: var(--clean-link);
}
/* The partner's logo is the disclosure that the search is theirs: kept,
 * small and quiet, where the classic panel had it. */
html.design-clean #search-form .poweredBy {
	top: 0;
	right: 5px;
	height: 28px;
	opacity: 0.85;
}

/* Collapsed, on a route page: From, To and the dates button on one row.
 * The button is a sibling of the form, so the banner becomes the row. */
html.design-clean section#banner:not(.show) {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}
html.design-clean section#banner:not(.show) #search-form {
	flex: 1 1 auto;
	min-width: 0;
	max-height: none;
	overflow: visible;
}
html.design-clean section#banner:not(.show) #search-form .options,
html.design-clean section#banner:not(.show) #search-form .dates,
html.design-clean section#banner:not(.show) #search-form .extras,
html.design-clean section#banner:not(.show) #search-form .poweredBy {
	display: none;
}
html.design-clean section#banner .toggle-booking-form {
	position: static;
	flex: 0 0 auto;
	width: auto;
	height: 44px;
	margin: 0 5px 0 0;
	padding: 0 22px;
	line-height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean section#banner .toggle-booking-form:hover {
	color: #fff;
	background: var(--clean-link);
}
/* Open, it stays below the form as the quiet way to close it again. */
html.design-clean section#banner.show .toggle-booking-form {
	display: inline-block;
	margin: 14px 0 0 5px;
	color: var(--clean-text);
	background: #fff;
	border: 1px solid var(--clean-rule);
}
@media (max-width: 499px) {
	/* One field per row on a phone, the button full width below them. */
	html.design-clean section#banner:not(.show) {
		flex-direction: column;
		align-items: stretch;
	}
	html.design-clean section#banner .toggle-booking-form {
		margin: 0;
		text-align: center;
	}
}

/* ── THE GUIDES BAND ABOVE THE FOOTER ──────────────────────────────────── */

html.design-clean #sub_footer {
	padding: 40px 0;
	background: #fff;
	border-top: 1px solid var(--clean-rule);
}
html.design-clean #sub_footer.stripes:before {
	content: none;
}
html.design-clean #sub_footer h2 {
	width: 96%;
	max-width: 1320px;
	margin: 0 auto 18px;
	padding: 0;
	text-align: left;
	font-family: var(--clean-font-heading);
	font-size: 24px;
	font-weight: 500;
	color: var(--clean-text);
}

/* ── THE FOOTER ────────────────────────────────────────────────────────── */

html.design-clean footer {
	padding: 40px 0 28px;
	background: var(--clean-soft);
	border-top: 1px solid var(--clean-rule);
}
html.design-clean footer a,
html.design-clean footer p,
html.design-clean footer h4 {
	color: var(--clean-text);
}
html.design-clean footer p {
	margin: 0 0 8px;
	font-size: 15px;
}
html.design-clean footer a:hover {
	color: var(--clean-link);
	border-bottom: 0;
	text-decoration: underline;
}
html.design-clean footer h4 {
	margin: 0 0 6px;
	font-family: var(--clean-font-body);
	font-size: 16px;
	font-weight: 600;
}
html.design-clean footer .subscribe p {
	font-size: 14px;
	color: var(--clean-mute);
}
html.design-clean footer input[type="text"],
html.design-clean footer input[type="email"] {
	height: 42px;
	padding: 0 12px;
	font-size: 16px;
	color: var(--clean-text);
	background: #fff;
	border: 1px solid var(--clean-field-rule);
	border-radius: 2px;
	box-sizing: border-box;
}
html.design-clean footer button.button-primary {
	height: 44px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean footer .text p {
	margin-top: 20px;
	font-size: 13px;
	color: var(--clean-mute);
}

/* ── THE COOKIE NOTICE ─────────────────────────────────────────────────────
 * ⛔ dft.js hands the vendor a black-and-sand palette, which it writes into a
 * <style> of its own as `.cc-color-override-NNN.cc-window` - two classes.
 * These carry two classes and an element more. */
html.design-clean .cc-window.cc-window {
	font-family: var(--clean-font-body);
	font-size: 15px;
	color: #fff;
	background-color: var(--clean-text);
}
html.design-clean .cc-window .cc-link {
	color: #fff;
}
html.design-clean .cc-window .cc-btn {
	font-weight: 600;
	color: #fff;
	background-color: var(--clean-primary);
	border: 0;
}
html.design-clean .cc-window .cc-btn:hover {
	background-color: var(--clean-link);
}

/* ── THE SLIDE-OUT SCHEDULES MENU ──────────────────────────────────────── */

html.design-clean #schedules.slidebar {
	color: var(--clean-text);
	background-color: #fff;
	border-right: 1px solid var(--clean-rule);
}
html.design-clean #schedules.slidebar h2 {
	padding-left: 16px;
	font-family: var(--clean-font-heading);
	font-size: 24px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean #schedules.slidebar h6 {
	padding-left: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clean-mute);
}
html.design-clean #schedules.slidebar ul li a {
	padding: 8px 16px;
	font-size: 15px;
	color: var(--clean-text);
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean #schedules.slidebar ul li ul li a {
	padding-left: 32px;
}
html.design-clean #schedules.slidebar ul li a:hover {
	color: var(--clean-link);
	background-color: var(--clean-soft);
}

/* ── THE SIDEBAR ───────────────────────────────────────────────────────────
 * A's plain lists. The classic rules name #airports and #destinations, so
 * these do too, and #airlines, which is the third list's id on a clean page. */
html.design-clean aside#sidebar .articles {
	margin: 0 0 28px;
}
html.design-clean aside #airports .title,
html.design-clean aside #destinations .title,
html.design-clean aside #airlines .title {
	margin: 0;
	padding: 0;
	background: none;
}
html.design-clean aside #airports h2,
html.design-clean aside #destinations h2,
html.design-clean aside #airlines h2 {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--clean-font-heading);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	color: var(--clean-text);
	background: none;
}
html.design-clean aside .articles ul li a,
html.design-clean aside .articles ul li a.more {
	padding: 3px 0;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	color: var(--clean-link);
	text-decoration: underline;
	background: none;
	border: 0;
}
html.design-clean aside .articles ul li a:hover {
	color: var(--clean-text);
	background: none;
	border: 0;
}

/* The band has no articles until the country publishes a guide; an empty
 * heading is not shown. A browser without :has() shows the heading alone. */
html.design-clean #sub_footer:not(:has(.row > *)) {
	display: none;
}
html.design-clean footer .container {
	margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 3: THE ROUTE PAGE. SPEC 9 §10.
 *
 * The page headings, the tables and the related links are shared with the
 * airport, airline and guide pages, so those rules reach them too. That is
 * intended: one design.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── HEADINGS AND TEXT ─────────────────────────────────────────────────── */

html.design-clean .content h1 {
	margin: 0 0 14px;
	font-family: var(--clean-font-heading);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--clean-text);
}
html.design-clean .content h2 {
	margin: 32px 0 8px;
	font-family: var(--clean-font-heading);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--clean-text);
}
html.design-clean .content .highlight {
	font-weight: 600;
	color: var(--clean-text);
	background: none;
}
@media (max-width: 749px) {
	html.design-clean .content h1 {
		font-size: 34px;
	}
}

/* ── "AT A GLANCE" ─────────────────────────────────────────────────────────
 * ⚠️ THE CHARTS ARE RECOLOURED BY REDEFINING THE CLASSIC VALUES INSIDE THE
 * PANEL, not by a rule per chart. Every bar, block, range and line in it reads
 * --dft-blue, --dft-blue-alt or --dft-track; inside .route-facts those are
 * the text colour, the second grey and the track. A chart added later follows
 * without a rule of its own. The cheapest day keeps --dft-brand, the primary. */
html.design-clean .route-facts {
	--dft-blue: var(--clean-text);
	--dft-blue-alt: var(--clean-ink2);
	--dft-track: var(--clean-track);
	border-bottom: 0;
}
html.design-clean .route-facts a {
	color: var(--clean-link);
}
html.design-clean .route-facts__glance {
	padding: 0;
	background: none;
	border-radius: 0;
}
html.design-clean .content .route-facts__glance .route-facts__heading {
	margin: 0 0 14px;
	font-family: var(--clean-font-heading);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--clean-text);
}
html.design-clean .route-facts__figures {
	gap: 12px;
}
html.design-clean .route-facts__card {
	padding: 18px;
	border: 1px solid var(--clean-rule);
	border-radius: 0;
	box-shadow: none;
}
/* The coloured icon chips are dropped (§1). */
html.design-clean .route-facts__ico {
	display: none;
}
html.design-clean .route-facts__value {
	font-family: var(--clean-font-heading);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--clean-text);
	font-variant-numeric: lining-nums tabular-nums;
}
html.design-clean .route-facts__value--long {
	font-size: 26px;
}
html.design-clean .route-facts__label {
	font-size: 13px;
	color: var(--clean-mute);
}
html.design-clean .route-facts__bar,
html.design-clean .route-facts__block,
html.design-clean .route-facts__range-track,
html.design-clean .route-facts__range-mark {
	border-radius: 0;
}
html.design-clean .route-facts__bars-hours,
html.design-clean .route-facts__range-ends,
html.design-clean .route-facts__spark-days,
html.design-clean .route-facts__rank-words {
	font-size: 11px;
	color: var(--clean-mute);
}
html.design-clean .route-facts__spark-days .is-low {
	font-weight: 600;
	color: var(--clean-primary);
}

/* ── TABLES: THE BAGGAGE TABLE, THE TIMETABLE AND EVERY OTHER ────────────── */

html.design-clean .content table th {
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--clean-mute);
	background: none;
	border-bottom: 1px solid var(--clean-text);
}
html.design-clean .content table td {
	padding: 12px 8px;
	font-size: 15px;
	line-height: 1.4;
	vertical-align: middle;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean .content table th:first-child,
html.design-clean .content table td:first-child {
	padding-left: 0;
}
html.design-clean .content table tr:hover {
	background: none;
}
html.design-clean .content .route-facts__bags {
	border-top: 1px solid var(--clean-text);
}
html.design-clean .content .route-facts__bags-note,
html.design-clean .route-facts__hand,
html.design-clean .route-facts__collected {
	font-size: 14px;
	color: var(--clean-mute);
}

/* The timetable, desktop. */
html.design-clean .content table .logo {
	width: 32px;
	height: 32px;
	border-radius: 0;
	object-fit: contain;
}
html.design-clean .content table .airport {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--clean-mute);
}
html.design-clean .content table .airline {
	font-weight: 400;
	color: var(--clean-link);
	text-decoration: underline;
}
html.design-clean .content table .airline:hover {
	color: var(--clean-text);
	border-bottom: 0;
}
html.design-clean .content table .flight_code,
html.design-clean .content table .duration {
	font-size: 13px;
	color: var(--clean-mute);
}
html.design-clean .content table .times {
	font-weight: 600;
	color: var(--clean-text);
}
html.design-clean #table--schedules td[data-day] .price {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
html.design-clean #note {
	font-size: 14px;
	color: var(--clean-mute);
}

/* The timetable, phone: each flight a block, its week in one row.
 * ⛔ NO !important ON THE ROW. The airport filter hides a row with an inline
 * display: none, which must still win. */
@media (max-width: 749px) {
	html.design-clean #table--schedules,
	html.design-clean #table--schedules tbody {
		display: block;
		width: 100%;
	}
	html.design-clean #table--schedules tr:first-child {
		display: none;
	}
	html.design-clean #table--schedules tr {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		padding: 14px 0;
		border-bottom: 1px solid var(--clean-rule);
	}
	html.design-clean #table--schedules td {
		display: block;
		padding: 0;
		border: 0;
	}
	/* Row 1: the times and the duration; row 2: the airline and its number. */
	html.design-clean #table--schedules td:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 8px;
	}
	html.design-clean #table--schedules td:nth-child(2) .times {
		grid-column: 1;
		grid-row: 1;
		font-size: 18px;
	}
	html.design-clean #table--schedules td:nth-child(2) .duration {
		grid-column: 2;
		grid-row: 1;
	}
	html.design-clean #table--schedules td:nth-child(2) .airline {
		grid-column: 1;
		grid-row: 2;
		margin-top: 4px;
	}
	html.design-clean #table--schedules td:nth-child(2) .flight_code {
		grid-column: 2;
		grid-row: 2;
	}
	/* Row 3: the logo and the airport the flight leaves from. */
	html.design-clean #table--schedules td.logo_holdr {
		grid-column: 1 / -1;
		grid-row: 3;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 6px 0 10px;
	}
	html.design-clean #table--schedules td.logo_holdr .logo {
		width: 24px;
		height: 24px;
	}
	html.design-clean #table--schedules td.logo_holdr .airport {
		margin: 0;
	}
	/* Row 4: the seven fares, each under its day letter. */
	html.design-clean #table--schedules td[data-day] {
		grid-row: 4;
		text-align: center;
	}
	html.design-clean #table--schedules td[data-day]::before {
		display: block;
		font-size: 11px;
		color: var(--clean-mute);
	}
	html.design-clean #table--schedules td[data-day="mon"]::before { content: "M"; }
	html.design-clean #table--schedules td[data-day="tue"]::before { content: "T"; }
	html.design-clean #table--schedules td[data-day="wed"]::before { content: "W"; }
	html.design-clean #table--schedules td[data-day="thu"]::before { content: "T"; }
	html.design-clean #table--schedules td[data-day="fri"]::before { content: "F"; }
	html.design-clean #table--schedules td[data-day="sat"]::before { content: "S"; }
	html.design-clean #table--schedules td[data-day="sun"]::before { content: "S"; }
	/* A narrow box puts the currency under the number: seven fares with
	 * their currency do not fit one phone row side by side. Not min-content,
	 * which also breaks an empty day's "---" at each hyphen. */
	html.design-clean #table--schedules td[data-day] .price {
		width: 3.2em;
		margin: 0 auto;
		font-size: 12px;
		line-height: 1.3;
	}
}

/* ── THE BOOKING BAR ─────────────────────────────────────────────────────── */

html.design-clean .booking-bar__form,
html.design-clean .booking-bar__form:not(.booking-bar__form--stuck) {
	padding: 20px 22px;
	background: var(--clean-soft);
	border: 1px solid var(--clean-rule);
	border-radius: 0;
}
html.design-clean .booking-bar__form--stuck {
	background: #fff;
	border-color: var(--clean-rule);
}
html.design-clean .booking-bar__from {
	font-size: 15px;
	color: var(--clean-text);
}
html.design-clean .booking-bar__from strong {
	font-weight: 600;
	color: var(--clean-text);
}
html.design-clean .booking-bar__field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean .booking-bar__field input,
html.design-clean .booking-bar__field select {
	font-size: 16px;
	color: var(--clean-text);
	border: 1px solid var(--clean-field-rule);
	border-radius: 2px;
}
html.design-clean .booking-bar__go,
html.design-clean .booking-bar__go:hover {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean .booking-bar__go:hover {
	background: var(--clean-link);
}

/* ── THE AIRPORT FILTER ────────────────────────────────────────────────── */

html.design-clean .airport-filter__legend {
	width: 100%;
	font-size: 13px;
	font-weight: 500;
	color: var(--clean-mute);
}
html.design-clean .content .airport-filter__button {
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 400;
	color: var(--clean-text);
	background: #fff;
	border: 1px solid var(--clean-rule);
	border-radius: 2px;
}
html.design-clean .content .airport-filter__button:hover {
	border-color: var(--clean-text);
}
html.design-clean .content .airport-filter__button.is-on {
	font-weight: 400;
	color: #fff;
	background: var(--clean-text);
	border-color: var(--clean-text);
}
html.design-clean .airport-filter__count {
	font-weight: 400;
	opacity: 0.75;
}
html.design-clean .content .airport-filter__status {
	font-size: 13px;
	color: var(--clean-mute);
}

/* ── RELATED LINKS: ruled lists of plain links, not red buttons ─────────── */

html.design-clean #related-content ul.related-links {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--clean-text);
}
/* ⚠️ The classic rules name #related-content and set line-height: 0 on the
 * li (a chip layout), so these name it too and put the line height back. */
html.design-clean #related-content ul.related-links li {
	display: block;
	margin: 0;
	line-height: 1.5;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean #related-content ul.related-links a.button {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
	color: var(--clean-link);
	text-decoration: underline;
	background: none;
	border: 0;
	border-radius: 0;
}
html.design-clean #related-content ul.related-links a.button:hover {
	color: var(--clean-text);
	background: none;
}

/* The phone's fixed "Enter Dates" button. */
html.design-clean .mob_cta {
	font-weight: 600;
	color: #fff;
	background: var(--clean-primary);
	border-radius: 0;
}

/* ── FRAME POLISH, AS ON THE BOARD ─────────────────────────────────────── */

html.design-clean footer a {
	text-decoration: underline;
}
html.design-clean footer button.button-primary {
	width: auto;
	padding: 0 22px;
}

/* The baggage table as on the board: its heading row ruled lightly, its
 * airline cells (a th in each body row) as ordinary cells. */
html.design-clean .content .route-facts__bags thead th {
	letter-spacing: 0;
	text-transform: none;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean .content .route-facts__bags tbody th {
	font-size: 15px;
	font-weight: 400;
	color: var(--clean-text);
	border-bottom: 1px solid var(--clean-rule);
}

/* ── THE ROUTE PAGE'S SIDEBAR: the other way, also from, browse ─────────── */

html.design-clean aside .clean-side {
	margin: 0 0 28px;
	font-size: 15px;
}
html.design-clean #sidebar .clean-side h2 {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--clean-font-heading);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	color: var(--clean-text);
}
html.design-clean aside .clean-side p {
	margin: 0;
}
html.design-clean aside .clean-side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
html.design-clean aside .clean-side li {
	margin: 0;
	padding: 3px 0;
	break-inside: avoid;
}
html.design-clean aside .clean-side a {
	color: var(--clean-link);
	text-decoration: underline;
}
html.design-clean aside .clean-side a:hover {
	color: var(--clean-text);
}
html.design-clean aside .clean-side__columns {
	column-count: 2;
	column-gap: 16px;
}

/* On a phone the sidebar has the content's own side margin; the classic
 * lists ran edge to edge on purpose, being coloured blocks. */
@media (max-width: 749px) {
	/* A classic rule of more weight zeroes the left side, hence .columns. */
	html.design-clean aside#sidebar.columns {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* The related links sat 40px in: the block's padding and its column's. */
	html.design-clean #related-content .row > .columns {
		padding-left: 0;
		padding-right: 0;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 4: THE AIRPORT PAGE. SPEC 9 §11. Its sidebar uses the .clean-side
 * rules above; its headings, panel and tables use step 3's.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Body text in the design's text colour, as on the board, not the classic
 * grey (#555 in skeleton-dft.css). */
html.design-clean body {
	color: var(--clean-text);
}

/* Smaller headings in the article text: the heading face is loaded at 500 and
 * 600 only, so the classic 700 would be a bold the browser invents. */
html.design-clean .content h3,
html.design-clean .content h4,
html.design-clean .content h5 {
	font-family: var(--clean-font-heading);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--clean-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 5: MALAYSIA'S HOME PAGE. SPEC 9 §12. The markup is the country's own
 * (private/sites/my/pages/home.php); every class is clean-home.
 * ═════════════════════════════════════════════════════════════════════════ */

html.design-clean .clean-home {
	display: block;
	box-sizing: border-box;
	width: 96%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 48px 0 0;
}
html.design-clean .clean-home h1 {
	max-width: 780px;
	margin: 0;
	font-family: var(--clean-font-heading);
	font-size: 50px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: 0;
	color: var(--clean-text);
}
html.design-clean .clean-home h2 {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--clean-font-heading);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--clean-text);
}
html.design-clean .clean-home a {
	color: var(--clean-link);
	text-decoration: underline;
}
html.design-clean .clean-home a:hover {
	color: var(--clean-text);
}
html.design-clean .clean-home__lead {
	max-width: 760px;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 1.6;
}

/* The search, in the page rather than under the header. */
html.design-clean section#banner.clean-home__search {
	display: block;
	margin: 28px 0 0;
	padding: 24px 28px;
	background: var(--clean-soft);
	border: 1px solid var(--clean-rule);
}
html.design-clean .clean-home__partner {
	margin: 12px 0 0 5px;
	font-size: 12px;
	color: var(--clean-mute);
}
html.design-clean .clean-home__search .poweredBy {
	display: none;
}

html.design-clean .clean-home__more {
	max-width: 760px;
	margin-top: 32px;
	color: var(--clean-mute);
}
html.design-clean .clean-home__more p {
	margin: 0 0 12px;
}

html.design-clean .clean-home__blocks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 56px;
}
html.design-clean .clean-home__blocks > div {
	padding-top: 16px;
	border-top: 1px solid var(--clean-text);
}
html.design-clean .clean-home__icon {
	display: block;
	color: var(--clean-text);
}
html.design-clean .clean-home__blocks h2 {
	margin: 10px 0 6px;
	font-size: 22px;
}
html.design-clean .clean-home__blocks p {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--clean-mute);
}
html.design-clean .clean-home__blocks a {
	font-size: 15px;
}

html.design-clean .clean-home__fares {
	margin-top: 64px;
}
html.design-clean .clean-home__fare-lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	margin-top: 16px;
}
html.design-clean .clean-home__fare-lists ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--clean-text);
}
html.design-clean .clean-home__fare-lists li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--clean-rule);
	font-variant-numeric: tabular-nums;
}
html.design-clean .clean-home__fare-lists strong {
	font-weight: 600;
}
html.design-clean .clean-home__note {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--clean-mute);
}

html.design-clean .clean-home__why {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 2px solid var(--clean-primary);
}
html.design-clean .clean-home__why-lead {
	margin: 0;
	color: var(--clean-mute);
}
html.design-clean .clean-home__why-blocks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 28px;
}
html.design-clean .clean-home__why h3 {
	margin: 10px 0 6px;
	font-family: var(--clean-font-body);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--clean-text);
}
html.design-clean .clean-home__why p {
	margin: 0;
	font-size: 15px;
	color: var(--clean-mute);
}

html.design-clean .clean-home__airlines {
	margin: 56px 0 56px;
}
html.design-clean .clean-home__airlines ul {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
html.design-clean .clean-home__airlines li {
	margin: 0;
}
html.design-clean .clean-home__airlines a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	box-sizing: border-box;
	padding: 18px 8px;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	color: var(--clean-text);
	border: 1px solid var(--clean-rule);
}
html.design-clean .clean-home__airlines a:hover {
	border-color: var(--clean-text);
}
html.design-clean .clean-home__airlines img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

@media (max-width: 749px) {
	html.design-clean .clean-home {
		width: auto;
		padding: 28px 20px 0;
	}
	html.design-clean .clean-home h1 {
		font-size: 34px;
	}
	html.design-clean .clean-home__lead {
		font-size: 16px;
	}
	html.design-clean section#banner.clean-home__search {
		padding: 20px;
	}
	html.design-clean .clean-home__blocks,
	html.design-clean .clean-home__fare-lists,
	html.design-clean .clean-home__why-blocks {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	html.design-clean .clean-home__airlines ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The calendar button in the search form's date fields, on a phone. The same
 * fault and the same fix as the booking bar's (dft.css, .booking-bar__field
 * .Zebra_DatePicker_Icon): a 44px button shows the icon sprite's next frame
 * as a second calendar, so the painted area is cut to one frame. */
@media (max-width: 750px) {
	html.design-clean #search-form .Zebra_DatePicker_Icon {
		padding: 14px 0 !important;
		background-origin: content-box;
		background-clip: content-box;
	}
}
/* A fare does not break between the number and the currency. */
html.design-clean .clean-home__fare-lists span {
	white-space: nowrap;
}



/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 6: THE OTHER PAGE TYPES. SPEC 9 §13. The indexes, airline and guide
 * pages, contact, FAQ, the legal pages, not-found and the hand-off page use
 * the components above; these are the parts those rules did not reach.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── CARDS: the index pages and related cards ──────────────────────────────
 * As the board's guide cards: a rule above, the name in the heading face, no
 * shadow and no grey box. A card with no picture of its own has none
 * (insert_variables_tempate()); one with a photograph keeps it above. */
html.design-clean .card,
html.design-clean a.card:hover,
html.design-clean .card.no-hover:hover {
	padding-top: 12px;
	background: none;
	border-top: 1px solid var(--clean-text);
	box-shadow: none;
	opacity: 1;
}
html.design-clean .card:after {
	content: none;
}
html.design-clean .card img {
	margin-bottom: 10px;
}
html.design-clean .card .text {
	height: auto;
	padding: 0;
	background: none;
	border: 0;
}
html.design-clean .card h3,
html.design-clean .card h4,
html.design-clean .card:hover h3 {
	margin: 0;
	padding: 0;
	font-family: var(--clean-font-heading);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	color: var(--clean-text);
	background: none;
}
html.design-clean a.card:hover h3 {
	text-decoration: underline;
}
/* The "International" label on an airport card: a quiet line under the name
 * rather than a red badge over a picture that is no longer there. */
html.design-clean #page_airports .airport.international:after {
	content: 'International';
	position: static;
	display: block;
	height: auto;
	margin-top: 4px;
	padding: 0;
	font-size: 13px;
	color: var(--clean-mute);
	background: none;
	opacity: 1;
}
/* A heading over an empty list - "Old airlines no longer operating" while
 * there are none - is not shown. ⚠️ Written without one :has() inside another,
 * which browsers refuse, dropping the whole rule. */
html.design-clean h2:has(+ .all_airlines):not(:has(+ .all_airlines > *)) {
	display: none;
}

/* The index pages' cards in a grid: floated, cards of different heights
 * stagger the rows. The airlines page nests its "old airlines" heading and
 * list inside the first list, so those span the row. */
html.design-clean .all_airports,
html.design-clean .all_airlines,
html.design-clean .all_items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 20px;
	padding: 10px 0 20px;
}
html.design-clean .all_airports > .card,
html.design-clean .all_airlines > .card,
html.design-clean .all_items > .card {
	float: none;
	width: auto;
	margin: 0;
}
html.design-clean .all_airlines > h2,
html.design-clean .all_airlines > .all_airlines,
html.design-clean .all_items > :not(.card) {
	grid-column: 1 / -1;
}
@media (max-width: 949px) {
	html.design-clean .all_airports,
	html.design-clean .all_airlines,
	html.design-clean .all_items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── THE AIRLINE PAGE'S SEARCH BUTTON ──────────────────────────────────── */

html.design-clean .content button.open-booking-form {
	display: inline-block;
	height: 44px;
	margin: 6px 0 20px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 44px;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean .content button.open-booking-form:hover {
	background: var(--clean-link);
}

/* ── THE GUIDE AND NEWS FILTER ─────────────────────────────────────────── */

html.design-clean #filter {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	color: var(--clean-text);
}
html.design-clean #filter select {
	height: 40px;
	margin-left: 6px;
	padding: 0 10px;
	font-size: 15px;
	color: var(--clean-text);
	background: #fff;
	border: 1px solid var(--clean-field-rule);
	border-radius: 2px;
}

/* ── FORMS IN THE PAGE: contact ────────────────────────────────────────── */

html.design-clean .content form label {
	font-size: 13px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean .content form input[type="text"],
html.design-clean .content form input[type="email"],
html.design-clean .content form textarea {
	min-height: 44px;
	padding: 0 12px;
	font-size: 16px;
	color: var(--clean-text);
	background: #fff;
	border: 1px solid var(--clean-field-rule);
	border-radius: 2px;
	box-shadow: none;
	box-sizing: border-box;
}
html.design-clean .content form textarea {
	min-height: 140px;
	padding: 10px 12px;
}
html.design-clean .content form input[type="text"]:focus,
html.design-clean .content form input[type="email"]:focus,
html.design-clean .content form textarea:focus {
	border-color: var(--clean-text);
	outline: 2px solid var(--clean-primary);
	outline-offset: 0;
}
html.design-clean .content form input[type="checkbox"] {
	accent-color: var(--clean-text);
}
html.design-clean .content form .label-body {
	font-size: 15px;
	font-weight: 400;
}
html.design-clean .content form input[type="submit"].button-primary {
	height: 44px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background: var(--clean-primary);
	border: 0;
	border-radius: 2px;
}
html.design-clean .content form input[type="submit"].button-primary:hover {
	background: var(--clean-link);
}

/* ── THE FAQ'S TABLE OF CONTENTS ───────────────────────────────────────────
 * Its colours are written in the page's own <style>; these outweigh them. */
html.design-clean .content .toc {
	display: block;
	margin: 20px 0 36px;
	padding: 16px 0 8px;
	border: 0;
	border-top: 1px solid var(--clean-text);
	border-bottom: 1px solid var(--clean-rule);
	border-radius: 0;
}
html.design-clean .content .toc h4 {
	margin: 0 0 8px;
	font-family: var(--clean-font-heading);
	font-size: 20px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean .content .toc ul li {
	margin: 0;
	padding: 3px 0;
}
html.design-clean .content .toc ul li a {
	font-size: 15px;
	color: var(--clean-link);
	text-decoration: underline;
}

/* ── THE HAND-OFF PAGE (/flight-search) ────────────────────────────────────
 * It builds its own <head> and loads no dft.css, so these meet only its own
 * <style>: its fixed teal, its near-black and its light weights. */
html.design-clean body:has(> main > #L4) {
	color: var(--clean-text);
	font-family: var(--clean-font-body);
	background: #fff;
}
html.design-clean body:has(> main > #L4) > h1 {
	margin: 0 0 48px;
	padding: 22px 16px;
	font-family: var(--clean-font-heading);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	box-shadow: none;
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean body:has(> main > #L4) > h1 strong {
	font-weight: 600;
}
html.design-clean body:has(> main > #L4) main h2 {
	font-family: var(--clean-font-heading);
	font-size: 34px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean body:has(> main > #L4) main h2 .kiwi {
	color: var(--clean-text);
}
html.design-clean body:has(> main > #L4) main p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
}
html.design-clean body:has(> main > #L4) main p strong {
	font-weight: 600;
}
html.design-clean body:has(> main > #L4) main .link {
	font-size: 15px;
	color: var(--clean-mute);
}
html.design-clean body:has(> main > #L4) main .link a {
	color: var(--clean-link);
}
@media (max-width: 800px) {
	html.design-clean body:has(> main > #L4) main h2 {
		font-size: 26px;
	}
	html.design-clean body:has(> main > #L4) main p {
		font-size: 17px;
	}
}

/* The guide and news index rows (class "item", not "card"): a list, each row
 * under a hairline, the picture - only a real one - at the left without a
 * shadow. The pages' own <style> blocks name #page_guide and #page_news, so
 * these do too. */
html.design-clean #page_guide a.item,
html.design-clean #page_news a.item {
	padding: 18px 0;
	color: var(--clean-text);
	border-bottom: 1px solid var(--clean-rule);
}
html.design-clean #page_guide a.item:hover,
html.design-clean #page_news a.item:hover {
	background: none;
}
html.design-clean #page_guide a.item img,
html.design-clean #page_news a.item img,
html.design-clean #page_guide a.item:hover img,
html.design-clean #page_news a.item:hover img {
	box-shadow: none;
	opacity: 1;
}
html.design-clean #page_guide a.item .text:only-child,
html.design-clean #page_news a.item .text:only-child {
	width: 100%;
}
html.design-clean #page_guide a.item h3,
html.design-clean #page_news a.item h3 {
	font-family: var(--clean-font-heading);
	font-size: 20px;
	font-weight: 500;
	color: var(--clean-text);
}
html.design-clean #page_guide a.item p,
html.design-clean #page_news a.item p {
	font-size: 15px;
	color: var(--clean-mute);
}
html.design-clean #page_news a.item p.date {
	font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * STEP 8: THE OWNER'S FIRST REVIEW, 29 SEPTEMBER 2026. SPEC 9 §15.
 * ═════════════════════════════════════════════════════════════════════════ */

/* The header's space below the logo equals the space above it. The logo sat
 * on a line of text, which added a descender's 8px under the picture. */
html.design-clean header .logo {
	line-height: 0;
}
html.design-clean header .logo img {
	display: block;
}

/* ── THE SEARCH OPENS AND CLOSES WITH AN ANIMATION, AND "HIDE FORM" TAKES NO
 * ROW OF ITS OWN. Owner, 29 September 2026. For the panel under the header on
 * every page but the home page, where the form is always open.
 *
 * The banner stays a row in both states. The rows that only the open form
 * shows (return or one way, the dates, the passengers and search) grow from
 * nothing and fade in, rather than appearing at once; they are not
 * display: none when closed, so there is something to animate - visibility
 * keeps them out of reach of the keyboard until they are shown. Open, the
 * toggle leaves the row and sits at the top right as a small "hide form". */
html.design-clean section#banner:not(.clean-home__search) {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 12px;
}
html.design-clean section#banner:not(.clean-home__search) #search-form {
	flex: 1 1 auto;
	min-width: 0;
	max-height: none;
	overflow: visible;
}
html.design-clean section#banner:not(.clean-home__search) #search-form .options,
html.design-clean section#banner:not(.clean-home__search) #search-form .dates,
html.design-clean section#banner:not(.clean-home__search) #search-form .extras {
	/* ⚠️ SIDE BY SIDE IN BOTH STATES. Switching them to blocks while closed
	 * stacked the rows the instant "hide form" was pressed, while they were
	 * still shrinking, and the form jumped taller (owner, 29 September 2026).
	 * The empty line an inline block stands on is removed instead by giving
	 * the form no line height of its own - see below. */
	display: inline-block;
	vertical-align: top;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
}
html.design-clean section#banner:not(.clean-home__search) #search-form .options {
	display: block;
	margin-bottom: 0;
}
/* The form's own line height is what an empty inline block stands on: with
 * none, the closed rows take no height at all. Everything inside gets the
 * line height back. */
html.design-clean section#banner:not(.clean-home__search) #search-form {
	line-height: 0;
}
html.design-clean section#banner:not(.clean-home__search) #search-form > * {
	line-height: 1.5;
}
html.design-clean section#banner.show:not(.clean-home__search) #search-form .options,
html.design-clean section#banner.show:not(.clean-home__search) #search-form .dates,
html.design-clean section#banner.show:not(.clean-home__search) #search-form .extras {
	display: inline-block;
	max-height: 420px;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transition: max-height 0.35s ease, opacity 0.35s ease 0.1s, visibility 0s;
}
html.design-clean section#banner.show:not(.clean-home__search) #search-form .options {
	display: block;
	margin-bottom: 10px;
}
/* The partner's logo only with the open form, as before. */
html.design-clean section#banner:not(.show) #search-form .poweredBy {
	display: none;
}
html.design-clean section#banner.show:not(.clean-home__search) #search-form .poweredBy {
	right: 110px;
}
html.design-clean section#banner.show .toggle-booking-form {
	position: absolute;
	top: 18px;
	right: var(--clean-gutter);
	/* The classic rule pins it to both sides with a fixed width. */
	bottom: auto;
	left: auto;
	width: auto;
	text-align: right;
	height: auto;
	margin: 0;
	padding: 4px 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--clean-link);
	text-decoration: underline;
	background: none;
	border: 0;
}
html.design-clean section#banner.show .toggle-booking-form:hover {
	color: var(--clean-text);
	background: none;
}
@media (max-width: 499px) {
	html.design-clean section#banner:not(.clean-home__search) {
		flex-direction: column;
		align-items: stretch;
	}
	html.design-clean section#banner.show .toggle-booking-form {
		top: 14px;
		right: 20px;
		text-align: right;
	}
}
/* A visitor who asks for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
	html.design-clean section#banner #search-form .options,
	html.design-clean section#banner #search-form .dates,
	html.design-clean section#banner #search-form .extras {
		transition: none;
	}
}

/* ── HOME PAGE AIRLINES: no box round each, and the logos larger ──────────
 * Owner, 29 September 2026. The logo files are 64px square; 64 is the
 * largest they can be drawn without blurring. */
html.design-clean .clean-home__airlines ul {
	gap: 20px;
}
html.design-clean .clean-home__airlines a {
	padding: 8px 4px;
	border: 0;
}
html.design-clean .clean-home__airlines a:hover {
	text-decoration: underline;
}
html.design-clean .clean-home__airlines img {
	width: 64px;
	height: 64px;
}

/* The wide name logos on the home page (owner, 29 September 2026): the same
 * height for every one, so a row of them reads as a row; the width follows
 * each logo's own shape. A square icon beside them is drawn at that height. */
html.design-clean .clean-home__airlines img,
html.design-clean .clean-home__airlines img.clean-home__wide-logo {
	width: auto;
	max-width: 100%;
	height: 44px;
	object-fit: contain;
}
html.design-clean .clean-home__airlines a {
	justify-content: flex-end;
	gap: 10px;
}
/* The same item without a link, while the country has no airline page. */
html.design-clean .clean-home__airlines .clean-home__airline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
	padding: 8px 4px;
	font-size: 14px;
	text-align: center;
	color: var(--clean-text);
}

/* ⛔ ON A PHONE THE BUTTON KEEPS ONE PLACE IN BOTH STATES, so hiding the form
 * cannot jump. It re-entered the page at full size the moment "hide form" was
 * pressed, while the rows were still shrinking, and the panel grew 46px before
 * it shrank (measured, owner, 29 September 2026). The panel keeps room for it
 * at the bottom whether open or closed; open, it is the quiet "hide form". */
@media (max-width: 499px) {
	html.design-clean section#banner:not(.clean-home__search),
	html.design-clean section#banner.show:not(.clean-home__search) {
		padding-bottom: 74px;
	}
	html.design-clean section#banner:not(.clean-home__search) .toggle-booking-form,
	html.design-clean section#banner.show:not(.clean-home__search) .toggle-booking-form {
		position: absolute;
		top: auto;
		right: var(--clean-gutter);
		bottom: 18px;
		left: var(--clean-gutter);
		width: auto;
		height: 44px;
		margin: 0;
		padding: 0;
		line-height: 44px;
		font-size: 16px;
		text-align: center;
		text-decoration: none;
	}
	html.design-clean section#banner.show:not(.clean-home__search) .toggle-booking-form {
		font-weight: 400;
		color: var(--clean-text);
		background: #fff;
		border: 1px solid var(--clean-rule);
	}
}

/* The date field's space above it belongs to its wrapper, not to the field,
 * so the calendar button - centred on the wrapper by dft.css - is centred on
 * the field itself. */
html.design-clean #search-form .dates .Zebra_DatePicker_Icon_Wrapper {
	margin-top: 6px !important;
}
html.design-clean #search-form .dates input {
	margin-top: 0;
}

/* ── THE AIRLINE PAGE, owner, 29 September 2026 ────────────────────────────
 * The "Search <airline> Flights" button under the heading only opened the
 * search at the top of the page, and "<airline> at a glance" said nothing the
 * figures below it do not. Both go; the figures follow the airline's name.
 * The panel keeps the heading as its accessible name (aria-labelledby reads a
 * hidden element's text). */
html.design-clean .content > button.open-booking-form,
html.design-clean #airline-facts-heading {
	display: none;
}
html.design-clean .content > h1 + button.open-booking-form + .route-facts {
	margin-top: 20px;
}