/* =====================================================================
   Andes Treks - Optional extras (WeTravel add-ons)

   Sits inside the standard .at-section collapsible wrapper, so this file
   only styles what is *inside* that section. The table deliberately reuses
   the same visual language as .booking-table (border, radius, header fill,
   row hover) and the note reuses the .at-departures__intro callout, so the
   section reads as part of the page rather than bolted on.
   ===================================================================== */

.at-extras {
	color: var(--at-ink);
	font-family: "Avenir Book", Avenir, "Helvetica Neue", Arial, sans-serif;
}

/* Note: how the extras are actually chosen, in the same callout style the
   departure section uses. */

.at-extras__note {
	margin: 0 0 22px;
	padding: 18px 20px;
	border-left: 4px solid var(--at-brand);
	border-radius: 0 10px 10px 0;
	background: rgba(252, 194, 49, .11);
	color: var(--at-ink);
	font-size: 15px;
	line-height: 1.6;
}

.at-extras__note strong {
	font-weight: 700;
}

/* Table: same shell as .booking-table. */

.at-extras__table-wrap {
	overflow: hidden;
	border: 1px solid var(--at-line);
	border-radius: var(--at-radius);
	background: #fff;
}

.at-extras-table {
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--at-ink);
	background: #fff;
	font-family: inherit;
}

.at-extras-table th {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--at-line);
	color: var(--at-ink);
	background: var(--at-soft);
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
}

.at-extras-table th:last-child {
	text-align: right;
}

.at-extras-table td {
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid var(--at-line);
	text-align: left;
	vertical-align: top;
}

.at-extras-table tbody tr:last-child td {
	border-bottom: 0;
}

.at-extras-table tbody tr:hover {
	background: rgba(252, 194, 49, .04);
}

.at-extras-table__extra {
	width: 100%;
}

.at-extras__name {
	display: block;
	color: var(--at-ink);
	font-weight: 700;
}

.at-extras__desc {
	margin-top: 6px;
	color: var(--at-muted);
	font-size: 14px;
	line-height: 1.6;
}

.at-extras__desc > :last-child {
	margin-bottom: 0;
}

.at-extras__excerpt {
	margin: 0;
}

.at-extras__full {
	margin-top: 10px;
}

.at-extras__full p {
	margin: 0 0 12px;
}

.at-extras__full > :first-child {
	margin-top: 0;
}

.at-extras__full > :last-child {
	margin-bottom: 0;
}

/* Blocksy's own rules can beat the browser default for [hidden], which would
   leave every expanded description visible. Same guard the theme uses
   elsewhere. */

.at-extras__full[hidden] {
	display: none;
}

.at-extras__toggle {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--at-brand-dark);
	cursor: pointer;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.at-extras__toggle:is(:hover, :focus-visible) {
	color: #8f6b00;
}

.at-extras-table__price {
	color: var(--at-ink);
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 15px;
	font-weight: 900;
	white-space: nowrap;
	text-align: right;
}

.at-extras-table__price .woocommerce-Price-currencySymbol {
	font-size: .85em;
}

@media (max-width: 600px) {
	.at-extras__note {
		padding: 15px 16px;
		font-size: 14px;
	}

	.at-extras-table th,
	.at-extras-table td {
		padding-left: 14px;
		padding-right: 14px;
	}

	.at-extras__desc {
		font-size: 13px;
	}

	.at-extras-table__price {
		font-size: 14px;
	}
}