/*
 * stardust-theme.css — the booking site's chrome and palette, matched to the
 * Stardust Sportfishing marketing site (TECK-net/stardust-sportfishing), which
 * runs BootstrapMade's Axis Pro recoloured to an ocean palette.
 *
 * This is a PORT, not a copy. The marketing site is Bootstrap 5; the booking
 * flows are Bootstrap 3.3.7 and cannot take a second Bootstrap, so the parts of
 * Axis this file needs — the variable system, the header, the navmenu, the
 * footer, the scroll-top button — are reproduced here against BS3's grid.
 *
 * The variable NAMES are Axis's, deliberately: recolouring the marketing site
 * is a matter of editing its `:root` block, and the same edit here keeps the
 * two in step. Do not hardcode a colour that has a variable.
 *
 * Loaded LAST, after $css_includes, so it wins over Bootstrap 3.
 */

/*--------------------------------------------------------------
# Font & Color Variables — kept in sync with the marketing site
--------------------------------------------------------------*/
:root {
	--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--heading-font: "Montserrat", sans-serif;
	--nav-font: "Poppins", sans-serif;

	--background-color: #ffffff;
	--default-color: #2b3a45;
	--heading-color: #0b3d5b;
	--accent-color: #25294a;  /* brand navy — buttons, links, highlights */
	--surface-color: #ffffff;
	--contrast-color: #ffffff;

	--nav-color: #1a2a3a;
	--nav-hover-color: #25294a;
	--nav-mobile-background-color: #ffffff;
	--nav-dropdown-background-color: #ffffff;
	--nav-dropdown-color: #1a2a3a;
	--nav-dropdown-hover-color: #25294a;

	/* Schedule-table colours, taken from the marketing site's own trip
	   schedule (.sched-table) so the two tables read as one product. */
	--sched-bar-color: rgb(26, 42, 58);
	--sched-month-color: rgb(26, 143, 209);
	--sched-month-border: #1565a0;
	--sched-shade: #ebeff4;
}

/* The dark preset. Same override set the marketing site uses: on this
   background the brand navy is 1.15:1 and invisible, so --accent-color becomes
   the same hue lightened. */
.dark-background {
	--background-color: #0b2236;
	--default-color: #dbe7f2;
	--heading-color: #ffffff;
	--accent-color: #9298c9;
	--surface-color: #0f3050;
	--contrast-color: #ffffff;
}

.light-background {
	--background-color: #eef4f9;
	--surface-color: #ffffff;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
	color: var(--default-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
	font-size: 15px;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

a {
	color: var(--accent-color);
	transition: 0.3s;
}

a:hover,
a:focus {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
	color: var(--default-color);
	background-color: transparent;
	padding: 15px 0;
	transition: all 0.5s;
	position: sticky;
	top: 0;
	z-index: 997;
}

.header > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.header .logo {
	line-height: 1;
	display: flex;
	align-items: center;
}

/* Matches the marketing site's own override of Axis's 32px default. */
.header .logo img {
	max-height: 100px;
	width: auto;
}

.scrolled .header {
	isolation: isolate;
	border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.scrolled .header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	z-index: -1;
}

.header .header-cta {
	display: flex;
	align-items: center;
}

.header .header-phone {
	display: inline-flex;
	align-items: center;
	margin-left: 24px;
	color: var(--heading-color);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.header .header-phone i {
	font-size: 18px;
	color: var(--accent-color);
	margin-right: 8px;
}

.header .header-phone:hover {
	color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus,
.footer .btn-getstarted,
.footer .btn-getstarted:focus {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 14px;
	padding: 8px 26px;
	margin: 0 0 0 30px;
	border-radius: 50px;
	transition: 0.3s;
	font-family: var(--nav-font);
	white-space: nowrap;
	display: inline-block;
}

.header .btn-getstarted:hover,
.footer .btn-getstarted:hover {
	color: var(--contrast-color);
	background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* The footer variant starts a line of its own, so it drops the header's
   nav-clearing left margin. */
.footer .btn-getstarted {
	margin: 0;
}

/* On a dark section --accent-color is the LIGHT tint, so white on it is only
   2.78:1. The brand navy on that tint is 5.06:1. Scoped to the filled button
   rather than flipping --contrast-color, which the rest of the dark footer
   relies on being white. */
.dark-background .btn-getstarted,
.dark-background .btn-getstarted:focus,
.dark-background .btn-getstarted:hover {
	color: #25294a;
}

/* Sister-boat mark at the far right. Sized well below the Stardust logo so it
   reads as secondary on Stardust's own site, and hidden below lg because that
   end of the header already carries the phone number and the Book button. */
.header .header-sister {
	margin-left: 1rem;
	padding-left: 1rem;
	border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
	align-items: center;
}

.header .header-sister img {
	max-height: 60px;
	width: auto;
	display: block;
}

@media (max-width: 1199px) {
	.header .logo img { max-height: 64px; }
	.header .header-sister { display: none; }
	.header .header-phone { margin-left: 0; }
	.header .btn-getstarted { order: 2; margin: 0 15px 0 0; padding: 6px 18px; }
}

@media (max-width: 767px) {
	.header .header-phone .header-phone-number { display: none; }
}

/*--------------------------------------------------------------
# Navigation Menu — Desktop
--------------------------------------------------------------*/
@media (min-width: 1200px) {
	.navmenu { padding: 0; }

	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}

	.navmenu li { position: relative; }

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-color);
		padding: 18px 15px;
		font-size: 14px;
		font-family: var(--nav-font);
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		transition: 0.3s;
	}

	.navmenu li:last-child a { padding-right: 0; }

	.navmenu li:hover > a,
	.navmenu .active,
	.navmenu .active:focus {
		color: var(--nav-hover-color);
	}

	.navmenu .dropdown ul {
		margin: 0;
		padding: 10px 0;
		background: var(--nav-dropdown-background-color);
		display: block;
		position: absolute;
		visibility: hidden;
		left: 14px;
		top: 130%;
		opacity: 0;
		transition: 0.3s;
		border-radius: 4px;
		z-index: 99;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu .dropdown ul li { min-width: 200px; }

	.navmenu .dropdown ul a {
		padding: 10px 20px;
		font-size: 15px;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}

	.navmenu .dropdown ul a:hover,
	.navmenu .dropdown ul .active:hover,
	.navmenu .dropdown ul li:hover > a {
		color: var(--nav-dropdown-hover-color);
	}

	.navmenu .dropdown:hover > ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}

	.mobile-nav-toggle { display: none; }
}

/*--------------------------------------------------------------
# Navigation Menu — Mobile
--------------------------------------------------------------*/
@media (max-width: 1199px) {
	/* Axis ships this as an inline <i> with line-height:0, so its box collapses
	   to zero height and only the painted glyph looks tappable — the hit area
	   is a hairline. Given a real 44px target instead; the glyph is unchanged. */
	.mobile-nav-toggle {
		color: var(--nav-color);
		font-size: 28px;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: 10px;
		cursor: pointer;
		transition: color 0.3s;
	}

	.navmenu {
		padding: 0;
		z-index: 9997;
	}

	.navmenu ul {
		display: none;
		list-style: none;
		position: absolute;
		inset: 60px 20px 20px 20px;
		padding: 10px 0;
		margin: 0;
		border-radius: 6px;
		background-color: var(--nav-mobile-background-color);
		overflow-y: auto;
		transition: 0.3s;
		z-index: 9998;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-dropdown-color);
		padding: 10px 20px;
		font-family: var(--nav-font);
		font-size: 18px;
		font-weight: 300;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: 0.3s;
		background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
	}

	.navmenu a i:hover {
		background-color: var(--accent-color);
		color: var(--contrast-color);
	}

	.navmenu a:hover,
	.navmenu .active,
	.navmenu .active:focus {
		color: var(--nav-dropdown-hover-color);
	}

	.navmenu .active i,
	.navmenu .active:focus i {
		background-color: var(--accent-color);
		color: var(--contrast-color);
		transform: rotate(180deg);
	}

	.navmenu .dropdown ul {
		position: static;
		display: none;
		z-index: 99;
		padding: 10px 0;
		margin: 10px 20px;
		inset: auto;
		background-color: var(--nav-dropdown-background-color);
		border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
		box-shadow: none;
		transition: all 0.5s ease-in-out;
	}

	.navmenu .dropdown > .dropdown-active {
		display: block;
		background-color: rgba(33, 37, 41, 0.03);
	}

	.mobile-nav-active { overflow: hidden; }

	.mobile-nav-active .mobile-nav-toggle {
		color: #fff;
		position: fixed;
		font-size: 32px;
		top: 15px;
		right: 15px;
		margin-right: 0;
		z-index: 9999;
	}

	.mobile-nav-active .navmenu {
		position: fixed;
		overflow: hidden;
		inset: 0;
		background: rgba(33, 37, 41, 0.8);
		transition: 0.3s;
	}

	.mobile-nav-active .navmenu > ul { display: block; }
}

/*--------------------------------------------------------------
# Page Title band
--------------------------------------------------------------*/
.page-title {
	text-align: center;
	padding: 40px 0 20px 0;
	border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
	/* style-dev.css gives .page-header a photographic banner; this band is the
	   Axis equivalent and must not inherit any of it. */
	background: none;
	margin: 0;
}

.page-title .title-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem 0;
}

.page-title h1 {
	font-size: 2.5rem;
	margin: 0 0 1rem;
	font-weight: 400;
	color: var(--heading-color);
	font-family: var(--heading-font);
	text-shadow: none;
}

.page-title p {
	font-size: 1.1rem;
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.page-title h1 { font-size: 2rem; }
	.page-title p { font-size: 1rem; }
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.resos-content {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 20px 0 60px;
	overflow: visible;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
	color: var(--default-color);
	background-color: var(--background-color);
	font-size: 14px;
	padding-bottom: 0;
	position: relative;
}

.footer .footer-top {
	padding-top: 50px;
	padding-bottom: 35px;
	border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
	line-height: 1;
	margin-bottom: 25px;
	display: inline-block;
}

.footer .footer-about .logo img {
	max-height: 150px;
	width: auto;
}

.footer .footer-about p {
	font-size: 14px;
	font-family: var(--heading-font);
}

.footer .social-links {
	display: flex;
	margin-top: 1.5rem;
}

.footer .social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
	font-size: 16px;
	color: color-mix(in srgb, var(--default-color), transparent 50%);
	margin-right: 10px;
	transition: 0.3s;
}

.footer .social-links a:hover {
	color: var(--accent-color);
	border-color: var(--accent-color);
}

.footer h4 {
	font-size: 18px;
	font-weight: 400;
	position: relative;
	padding-bottom: 12px;
	color: var(--heading-color);
}

.footer .footer-links { margin-bottom: 30px; }

.footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-links ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}

.footer .footer-links ul li:first-child { padding-top: 0; }

.footer .footer-links ul a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	display: inline-block;
	line-height: 1;
}

.footer .footer-links ul a:hover { color: var(--accent-color); }

.footer .footer-contact p { margin-bottom: 5px; }

.footer .footer-contact a { color: inherit; }

.footer .footer-contact a:hover { color: var(--accent-color); }

.footer .copyright {
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: center;
	background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.footer .copyright p { margin-bottom: 0; }

.footer .credits {
	margin-top: 6px;
	font-size: 13px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background-color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-top i {
	font-size: 20px;
	color: var(--contrast-color);
	line-height: 0;
}

.scroll-top:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
	color: var(--contrast-color);
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
}

/*--------------------------------------------------------------
# Bootstrap 3 widgets, recoloured
#
# The booking flows are Bootstrap 3.3.7 and its default blue (#337ab7) is the
# single loudest off-brand colour on the site. These rules repaint the controls
# a customer actually meets in checkout; they do not restructure anything.
--------------------------------------------------------------*/
.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
	color: var(--contrast-color);
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus {
	color: var(--contrast-color);
	background-color: color-mix(in srgb, var(--accent-color), #000 12%);
	border-color: color-mix(in srgb, var(--accent-color), #000 20%);
}

.btn-default {
	border-color: color-mix(in srgb, var(--default-color), transparent 75%);
	color: var(--default-color);
}

.btn-default:hover,
.btn-default:focus {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.form-control:focus {
	border-color: var(--accent-color);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--accent-color);
}

.pagination > li > a,
.pagination > li > span {
	color: var(--accent-color);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.label-primary,
.progress-bar {
	background-color: var(--accent-color);
}

/* style-dev.css paints .panel a pale blue with a heavy drop shadow. Axis's
   surfaces are flat cards on a hairline border. */
.panel {
	background: var(--surface-color);
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
	border-radius: 6px;
	box-shadow: none;
}

.panel h3 { margin-top: 0; }

/*--------------------------------------------------------------
# List / Calendar view switcher
#
# Two Bootstrap 3 buttons; the active one is filled with the brand navy so the
# current view is obvious without reading the labels. `.active` is a colour and
# colour is not information, so view-switch.php also emits aria-current.
--------------------------------------------------------------*/
.view-switch {
	margin: 0 0 28px;
}

.view-switch .btn {
	font-family: var(--nav-font);
	font-size: 14px;
	padding: 9px 22px;
	border-color: color-mix(in srgb, var(--accent-color), transparent 65%);
	color: var(--accent-color);
	background: var(--surface-color);
}

.view-switch .btn i {
	margin-right: 7px;
}

.view-switch .btn:hover,
.view-switch .btn:focus {
	background: color-mix(in srgb, var(--accent-color), transparent 92%);
	color: var(--accent-color);
	border-color: var(--accent-color);
}

/* Bootstrap 3 paints .btn-default.active grey from its own rule, which beats a
   bare .active here, so the filled state is scoped the same way. */
.view-switch .btn.active,
.view-switch .btn.active:hover,
.view-switch .btn.active:focus {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--contrast-color);
	box-shadow: none;
}

@media (max-width: 480px) {
	.view-switch .btn { padding: 9px 14px; font-size: 13px; }
}

/*--------------------------------------------------------------
# Trip schedule (.scale-table)
#
# Repainted to the marketing site's own trip schedule (.sched-table): a navy
# title bar, a blue month bar, navy column heads, alternating row shading. The
# green Book dot is already identical in both — the marketing table's
# `a.book-dot` was derived from `.myButton_lite` here — so it is left alone.
#
# The month bar was orange (#FF8C00), which is the one colour on this page that
# read as a different brand entirely.
--------------------------------------------------------------*/
.scale-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin-top: 16px;
	margin-bottom: 32px;
	/* The old rule pulled a tiled `white_wall.png` off the SiteNinja asset host
	   that no longer serves it. */
	background: var(--surface-color);
	border: 2px solid #333;
	font-family: var(--default-font);
}

.scale-title {
	background: var(--sched-bar-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	text-shadow: none;
	padding: 18px 20px;
	border-bottom: 2px solid #555;
	border-radius: 0;
}

.scale-title .schedule-title { font-size: 24px; font-weight: 700; }

.schedule-instructions {
	font-size: 14px;
	font-weight: 400;
	text-shadow: none;
	margin-top: 12px;
	margin-bottom: 0;
}

.scale-break {
	background: var(--sched-month-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	text-shadow: none;
	padding: 10px 20px;
	border-top: 3px solid #555;
	border-bottom: 2px solid var(--sched-month-border);
}

.scale-head {
	background-color: var(--sched-bar-color);
	color: var(--contrast-color);
	font-family: var(--heading-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 10px;
	border-top: none;
	border-bottom: 2px solid #555;
}

.scale-data,
.scale-group {
	font-family: var(--default-font);
	border-top: 2px solid #999;
}

/* .scale-light / .scale-dark are emitted on every row by schedule.php and have
   never had a rule behind them, so the table has always been flat. */
.scale-light > td,
td.scale-light { background-color: #ffffff; }

.scale-dark > td,
td.scale-dark { background-color: var(--sched-shade); }

.scale-foot {
	background-color: var(--sched-bar-color);
	color: #adb5bd;
	font-family: var(--heading-font);
	font-size: 12px;
	text-align: center;
	padding: 10px;
	border-top: 2px solid #555;
	border-radius: 0;
}

.scale-foot a,
.scale-foot a:link,
.scale-foot a:visited { color: #ffffff; }

/* The filter controls sit INSIDE the navy title bar, where the brand navy is
   1.2:1 against the background and a .btn-primary is invisible. Same remedy the
   marketing site uses on its dark sections: the accent lightens, and the label
   goes navy on it. */
.scale-title .btn-primary,
.scale-title .btn-primary:focus {
	background-color: #9298c9;
	border-color: #9298c9;
	color: #25294a;
}

.scale-title .btn-primary:hover,
.scale-title .btn-primary:active {
	background-color: #b0b5da;
	border-color: #b0b5da;
	color: #25294a;
}

.scale-title label,
.scale-title .filter-label {
	color: var(--contrast-color);
	font-weight: 600;
	font-size: 13px;
}

/*--------------------------------------------------------------
# Row states: bookable, call-only, inert
#
# schedule.php tags every trip cell with what the row can actually DO, from the
# button it chose. Before this, all three looked identical: a pointer cursor and
# a yellow highlight on a charter row that then did nothing when clicked, because
# its placeholder button deliberately carries no id.
--------------------------------------------------------------*/

/* Bookable and call-only rows are genuinely clickable. */
.trip-book,
.trip-call { cursor: pointer; }

/* The trip name is the thing a visitor reads, so it is the thing that should
   look like the link. Underline appears on row hover rather than at rest, so a
   40-row schedule is not a wall of underlines. */
.trip-book .trip-info strong,
.trip-call .trip-info strong {
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease;
}

.trip-book.highlight .trip-info strong {
	text-decoration-color: var(--accent-color);
	color: var(--accent-color);
}

.trip-call.highlight .trip-info strong {
	text-decoration-color: #b8860b;
}

/* The green dot is a 24px target in a full-width row; growing it on hover says
   "this row is the button" without changing the layout. */
.trip-book.highlight .myButton_lite {
	transform: scale(1.18);
	box-shadow: inset 0 1px 0 0 #459900, 0 0 0 3px rgba(17, 209, 0, .25);
}

.myButton_lite { transition: transform .12s ease, box-shadow .12s ease; }

/* Call-only: the phone glyph is the affordance, so lift it the same way. */
.trip-call.highlight .call-btn { transform: scale(1.15); }
.call-btn { transition: transform .12s ease; display: inline-block; }

/* Inert rows — charter, offline, expired. Muted to 55%, which is what the
   marketing site does to its own sold-out rows (table.sched-table
   tr.sched-data.sold-out), so the two schedules agree on what "not available"
   looks like. No pointer, and the highlight is suppressed to a flat grey so a
   dead row never lights up as though it were live. */
.trip-inert { cursor: default; }

.trip-inert > * { opacity: .55; }

.trip-inert.highlight {
	background: #eceff2 !important;
}

.trip-inert.highlight .trip-info strong { text-decoration: none; }

/* The red placeholder is not a button and must not read as one. */
.trip-inert .myButton_red {
	cursor: default;
	filter: grayscale(.45);
}

.trip-info strong { font-size: 14px; }

.chartered,
.call_now,
.charter-alert { color: #cc0000; }

.font_green13 { color: #009900; }
.font_red13 { color: #cc0000; }