/*
 * Bramble Ski Availability — front end.
 * Everything is scoped under .bsa; the theme keeps typography. Re-colour by overriding the
 * custom properties on .bsa in the theme's CSS.
 */

.bsa {
	--bsa-accent: #0e5e58;
	--bsa-text: inherit;
	--bsa-muted: #6b7280;
	--bsa-border: #d9dde3;
	--bsa-card-bg: #fff;
	--bsa-ok: #1e7e34;
	--bsa-ok-bg: #e9f6ec;
	--bsa-sold: #6b7280;
	--bsa-sold-bg: #f1f2f4;
	--bsa-warn: #8a5300;
	--bsa-warn-bg: #fdf3e1;
	--bsa-radius: 6px;

	box-sizing: border-box;
	clear: both;
	width: 100%;
	margin: 0 0 2em;
	color: var(--bsa-text);
}

.bsa *,
.bsa *::before,
.bsa *::after {
	box-sizing: inherit;
}

.bsa-heading {
	margin: 0 0 .75em;
}

.bsa-property {
	margin: 0 0 2em;
	min-width: 0;
}

.bsa-property-name {
	margin: 0 0 .6em;
	color: var(--bsa-accent);
}

.bsa-property-resort {
	margin-left: .5em;
	font-size: .7em;
	font-weight: 400;
	color: var(--bsa-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bsa-season {
	margin: 1.2em 0 .5em;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bsa-muted);
}

.bsa-loading,
.bsa-empty,
.bsa-note,
.bsa-updated {
	color: var(--bsa-muted);
}

.bsa-updated {
	margin-top: .5em;
	font-size: .8em;
}

/* Status pill */

.bsa-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .72em;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--bsa-ok-bg);
	color: var(--bsa-ok);
}

.bsa-status--sold {
	background: var(--bsa-sold-bg);
	color: var(--bsa-sold);
}

.bsa-status--hold,
.bsa-status--pending,
.bsa-status--approval {
	background: var(--bsa-warn-bg);
	color: var(--bsa-warn);
}

/* Carousel */

.bsa-carousel {
	position: relative;
	padding: 0 34px;
	min-width: 0;
}

.bsa-carousel .glide__slide {
	height: auto;
}

.bsa-carousel .glide__slides {
	align-items: stretch;
}

.bsa-carousel--static {
	padding: 0;
}

.bsa-carousel--static .glide__slides {
	display: block;
	max-width: 320px;
}

.bsa-week {
	height: 100%;
	padding: 12px 14px;
	background: var(--bsa-card-bg);
	border: 1px solid var(--bsa-border);
	border-top: 3px solid var(--bsa-ok);
	border-radius: var(--bsa-radius);
}

.bsa-week--sold {
	border-top-color: var(--bsa-sold);
	opacity: .7;
}

.bsa-week--hold,
.bsa-week--pending,
.bsa-week--approval {
	border-top-color: var(--bsa-warn);
}

.bsa-week-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 6px;
}

.bsa-week-dates {
	font-weight: 600;
}

.bsa-week-kind {
	font-size: .75em;
	color: var(--bsa-muted);
}

.bsa-week-prices {
	margin: 10px 0 0;
	font-size: .9em;
}

.bsa-week-prices dt {
	margin: 8px 0 0;
	font-size: .8em;
	color: var(--bsa-muted);
	font-weight: 400;
	line-height: 1.3;
}

.bsa-week-prices dt:first-child {
	margin-top: 0;
}

.bsa-week-prices dd {
	margin: 0;
	line-height: 1.4;
}

.bsa-price--price {
	font-weight: 600;
}

.bsa-price--sold,
.bsa-price--na,
.bsa-price--sc {
	color: var(--bsa-muted);
}

.bsa-price--sc {
	font-size: .85em;
}

.bsa-price-was {
	font-weight: 400;
	font-size: .85em;
	color: var(--bsa-muted);
}

.bsa-price[data-bsa-tip] {
	cursor: help;
}

/* Arrows */

.bsa-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--bsa-border);
	border-radius: 50%;
	background: var(--bsa-card-bg);
	color: var(--bsa-accent);
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
}

.bsa-arrow--prev {
	left: 0;
}

.bsa-arrow--next {
	right: 0;
}

.bsa-arrow.glide__arrow--disabled {
	opacity: .35;
	cursor: default;
}

.bsa-arrow:focus-visible {
	outline: 2px solid var(--bsa-accent);
	outline-offset: 2px;
}

/* Table (dates_vertical) */

.bsa-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bsa-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9em;
}

.bsa-table th,
.bsa-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--bsa-border);
	text-align: left;
	white-space: nowrap;
}

.bsa-table thead th {
	color: var(--bsa-muted);
	font-weight: 600;
}

.bsa-table tbody th .bsa-status {
	margin-left: 6px;
}

.bsa-row--sold {
	opacity: .65;
}

/* Months (display="months"): weeks across, grouped by month; level column pinned */

.bsa-months-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bsa-border);
	border-radius: var(--bsa-radius);
}

.bsa-months {
	border-collapse: separate;
	border-spacing: 0;
	font-size: .85em;
}

.bsa-months th,
.bsa-months td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--bsa-border);
	text-align: center;
	white-space: nowrap;
}

.bsa-months tbody tr:last-child th,
.bsa-months tbody tr:last-child td {
	border-bottom: 0;
}

.bsa-months .bsa-months-label {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 9em;
	text-align: left;
	background: var(--bsa-card-bg);
	border-right: 1px solid var(--bsa-border);
	font-weight: 600;
}

.bsa-months .bsa-months-start {
	border-left: 1px solid var(--bsa-border);
}

.bsa-months-month th {
	font-size: .8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bsa-accent);
	text-align: left;
}

.bsa-months-day th {
	color: var(--bsa-muted);
	font-weight: 600;
}

/* Sold weeks greyed. Hold / pending / approval aren't tinted — on Haute Montagne chalets every week
   is "requires final approval", so a tint would colour the whole table; the day's tooltip says it. */
.bsa-months .bsa-months-col--sold {
	background: var(--bsa-sold-bg);
}

/* Months slider (display="months_slider"): one page of whole months filling the width */

.bsa-mslider-stage {
	border: 1px solid var(--bsa-border);
	border-radius: var(--bsa-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bsa-mslider .bsa-months {
	width: 100%;
	table-layout: fixed;
}

.bsa-mslider .bsa-months .bsa-months-label {
	width: min(9.5em, 30%);
	white-space: normal;
}

/* A price never breaks mid-number; when even one month is too wide (phones) the stage scrolls
   sideways instead (front.js sets the table's min-width), with the level column pinned. */
.bsa-mslider .bsa-price {
	white-space: nowrap;
}

.bsa-mslider .bsa-months td,
.bsa-mslider .bsa-months-day th:not(.bsa-months-label) {
	padding: 7px 4px;
	white-space: normal;
}

.bsa-mslider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 10px;
}

.bsa-mslider-nav[hidden] {
	display: none;
}

.bsa-mslider-nav .bsa-arrow {
	position: static;
	transform: none;
}

.bsa-mslider-nav .bsa-arrow:disabled {
	opacity: .35;
	cursor: default;
}

.bsa-mslider-range {
	min-width: 14em;
	text-align: center;
	font-weight: 600;
	font-size: .9em;
}

/* What's included (services="true") */

.bsa-service {
	margin: 0 0 8px;
	border: 1px solid var(--bsa-border);
	border-radius: var(--bsa-radius);
	background: var(--bsa-card-bg);
}

.bsa-service-title {
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
}

.bsa-service[open] .bsa-service-title {
	border-bottom: 1px solid var(--bsa-border);
}

.bsa-service-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 8px 24px;
	padding: 12px 14px;
	font-size: .9em;
}

.bsa-service-list h5 {
	margin: 0 0 6px;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bsa-muted);
}

.bsa-service-list ul {
	margin: 0;
	padding-left: 1.2em;
}

.bsa-service-list li {
	margin: 0 0 4px;
}

/* Tooltip (appended to <body>, so not scoped under .bsa) */

.bsa-tooltip {
	position: absolute;
	z-index: 99999;
	max-width: 260px;
	padding: 6px 10px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
}

.bsa-admin-note {
	padding: 8px 12px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
}