/* Plugin styles for the boat page. Table rules follow layout B of the design (Data sheet).
 * Selectors are two or three classes deep, so they beat theme table rules such as Hello Elementor's.
 * The same text is on Charters > Shortcodes, to paste into the site's custom CSS. */

/* Scroll inside the block on narrow screens instead of widening the page. */
.tni-prices,
.tni-priced {
	overflow-x: auto;
}

/* Highlights: a dark panel with an icon per feature. Colours are the --tni-hl-* variables below;
 * override them in your own CSS on .tni-highlights (or on a wrapper around it). */
.tni-highlights {
	--tni-hl-bg: #0E1F3D;
	--tni-hl-text: #FFFFFF;
	--tni-hl-label: #9FB0CC;
	--tni-hl-icon: #9FB0CC;
	--tni-hl-rule: rgba(255, 255, 255, .16);
	box-sizing: border-box;
	padding: 32px;
	border-radius: 16px;
	background: var(--tni-hl-bg);
	color: var(--tni-hl-text);
}

.tni-highlights .tni-highlights__title {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--tni-hl-rule);
	color: var(--tni-hl-text);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.tni-highlights .tni-highlights__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tni-highlights .tni-highlights__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 0;
}

.tni-highlights .tni-highlights__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background: var(--tni-hl-icon);
	-webkit-mask: var(--tni-icon) center / contain no-repeat;
	mask: var(--tni-icon) center / contain no-repeat;
}

.tni-highlights .tni-highlights__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tni-highlights .tni-highlights__label {
	color: var(--tni-hl-label);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tni-highlights .tni-highlights__value {
	color: var(--tni-hl-text);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

@media (max-width: 600px) {
	.tni-highlights { padding: 24px; }
}

/* Table base */
.tni-prices .tni-prices__table,
.tni-priced .tni-priced__table {
	width: 100%;
	border: 0 !important;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 24px;
	background: transparent;
	color: #1B2433;
	font-size: 14px;
	line-height: 1.45;
}

/* Cells: a thin rule under each row and nothing else */
.tni-prices .tni-prices__table th,
.tni-prices .tni-prices__table td,
.tni-priced .tni-priced__table th,
.tni-priced .tni-priced__table td {
	padding: 10px 12px;
	border: 0 !important;
	border-bottom: 1px solid #E3E7EE !important;
	background: transparent !important;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

/* Column headings */
.tni-prices .tni-prices__table thead th,
.tni-priced .tni-priced__table thead th {
	padding-bottom: 10px;
	border-bottom: 2px solid #0E1F3D !important;
	color: #5B6577;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Numbers align right with even digit widths */
.tni-prices .tni-prices__th-price,
.tni-prices .tni-prices__th-delta,
.tni-prices .tni-prices__amount,
.tni-prices .tni-prices__delta,
.tni-priced .tni-priced__th-price,
.tni-priced .tni-priced__price {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

.tni-prices .tni-prices__amount,
.tni-priced .tni-priced__amount {
	font-weight: 700;
	color: #0E1F3D;
}

/* Zebra rows, as in the design */
.tni-prices .tni-prices__table tbody tr:nth-child(even) > *,
.tni-priced .tni-priced__table tbody tr:nth-child(even) > * {
	background: #F6F7FA !important;
}

/* Price list details */
.tni-prices .tni-prices__from {
	margin: 0 0 12px;
	color: #5B6577;
	font-size: 14px;
}

.tni-prices .tni-prices__from strong {
	color: #0E1F3D;
}

.tni-prices .tni-prices__row--peak > * {
	font-weight: 700;
}

.tni-prices .tni-prices__delta.is-base {
	color: #8A93A3;
}

/* Services and extras details */
.tni-priced .tni-priced__name {
	font-weight: 600;
}

.tni-priced .tni-priced__basis,
.tni-priced .tni-priced__note {
	color: #5B6577;
	font-size: 13px;
}

.tni-priced .tni-priced__mark {
	color: #B5533C;
	font-weight: 700;
}

.tni-priced .tni-priced__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #E8EBF2;
	color: #0E1F3D;
	font-size: 11px;
	font-weight: 700;
}

.tni-priced .tni-priced__price--request,
.tni-priced .tni-priced__price--raw {
	color: #5B6577;
	font-weight: 400;
}

.tni-priced .tni-priced__legend {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: #EEF0F4;
	color: #5B6577;
	font-size: 12px;
}

@media (max-width: 600px) {
	.tni-prices .tni-prices__table th,
	.tni-prices .tni-prices__table td,
	.tni-priced .tni-priced__table th,
	.tni-priced .tni-priced__table td {
		padding: 8px 6px;
	}
}

/* Equipment: four columns of check marks */
.tni-equipment {
	column-count: 4;
	column-gap: 24px;
}

.tni-equipment__group {
	break-inside: avoid;
	margin-bottom: 1em;
}

.tni-equipment__title {
	margin: 0 0 6px;
	color: #0E1F3D;
	font-size: 15px;
	font-weight: 700;
}

.tni-equipment__count {
	color: #5B6577;
	font-size: 12px;
	font-weight: 400;
}

.tni-equipment__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tni-equipment__item::before {
	content: "\2713";
	font-weight: 700;
	margin-right: .6em;
}

@media (max-width: 1024px) { .tni-equipment { column-count: 2; } }
@media (max-width: 600px) { .tni-equipment { column-count: 1; } }

/* Extras as cards: a grid of outlined cards, price under the name. A card with a note spans both
 * columns and shows its price on the right, as in the design. */
.tni-priced .tni-priced__cards {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* A full-width card in the middle of the list would leave gaps; dense placement fills them. */
	grid-auto-flow: dense;
	gap: 16px;
}

.tni-priced .tni-priced__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid #D5DAE3;
	border-radius: 12px;
	background: transparent;
	color: #1B2433;
	font-size: 14px;
	line-height: 1.4;
}

.tni-priced .tni-priced__card.has-note {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: center;
}

.tni-priced .tni-priced__card .tni-priced__name {
	color: #1B2433;
	font-size: 15px;
	font-weight: 600;
}

.tni-priced .tni-priced__card.has-note .tni-priced__name {
	grid-column: 1;
	grid-row: 1;
}

.tni-priced .tni-priced__card .tni-priced__price {
	display: block;
	text-align: left !important;
}

.tni-priced .tni-priced__card.has-note .tni-priced__price {
	grid-column: 2;
	grid-row: 1 / span 2;
	text-align: right !important;
}

.tni-priced .tni-priced__card .tni-priced__amount {
	display: block;
	color: #0E1F3D;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tni-priced .tni-priced__card .tni-priced__basis {
	display: block;
	color: #5B6577;
	font-size: 12px;
}

.tni-priced .tni-priced__card .tni-priced__note {
	display: block;
	color: #5B6577;
	font-size: 13px;
}

.tni-priced .tni-priced__card.has-note .tni-priced__note {
	grid-column: 1;
	grid-row: 2;
}

@media (max-width: 600px) {
	.tni-priced .tni-priced__cards { grid-template-columns: 1fr; }
	.tni-priced .tni-priced__card.has-note { grid-template-columns: 1fr; }
	.tni-priced .tni-priced__card.has-note .tni-priced__price { grid-column: 1; grid-row: auto; text-align: left !important; }
	.tni-priced .tni-priced__card.has-note .tni-priced__note { grid-row: auto; }
}