/* calendar page styles (2026 theme). Loaded after site.css.
 *
 * Also loaded by the renter reservation page (renter/res_date.php), which embeds
 * the same calendar widget, so every widget rule is scoped to .cal_container or
 * the calendar modal. Only .cal-page / .cal-more are specific to /cal.
 *
 * Markup comes from application/libraries/Calendar.php:
 *   table.table.table-responsive
 *     tr:1  th (prev link) | th[colspan] month title | th (next link)
 *     tr:2  td weekday names
 *     tr:3+ td day cells:
 *       td.aYYYY_MM_DD[date]          day row exists (rate_* or no_price class)
 *       .day_clickable                selectable (open, open_1, open_2)
 *       .notopen (+ .blackout)        fully booked or closed, shows span.booked
 *       .open_1                       morning free, afternoon taken (someone checks in)
 *       .open_2                       morning taken (someone checks out), afternoon free
 *       td[class="[class]"]           past day, shows span.booked "-"
 *       td without [date]             blank padding cell
 * vcalendar.js adds .cal_active_start / .cal_active_end / .cal_active_range.
 * Half-day cells are split on the diagonal: top-left is the morning, bottom-right
 * is the afternoon.
 */

.cal_container {
	--cal-open: #cbe1c6;
	--cal-open-hover: #b5d4af;
	--cal-booked: #e2ddd0;
	--cal-booked-text: #8c9089;
	--cal-range: #efe1c4;
	--cal-pick: #d2b27b;
	--cal-cell: 58px;
	margin: 0 auto;
	max-width: 1160px;
	color: var(--ink);
}

/* ---------- Instructions & legend ---------- */

.cal_container .cal-help {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 18px 40px;
	padding-bottom: 24px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--line);
}
.cal_container .cal-steps,
.cal_container .cal-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	font-size: 13px;
}
.cal_container .cal-steps li { display: flex; align-items: center; gap: 10px; }
.cal_container .cal-steps .n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--gold);
	color: var(--gold-text);
	font-size: 11px;
	flex: none;
}
.cal_container .cal-legend { font-size: 12px; color: var(--muted); }
.cal_container .cal-legend li { display: flex; align-items: center; gap: 8px; }
.cal_container .key {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--line-dark);
	flex: none;
}
.cal_container .key-open { background: var(--cal-open); }
.cal_container .key-booked { background: var(--cal-booked); }
.cal_container .key-half { background: linear-gradient(to right bottom, var(--cal-open) 50%, var(--cal-booked) 50%); }
.cal_container .key-selected { background: var(--cal-pick); }

/* ---------- Month grid ---------- */

.cal_container .cal-months { margin-left: -20px; margin-right: -20px; }
.cal_container .cal1,
.cal_container .cal2 { padding-left: 20px; padding-right: 20px; }
.cal_container .cal1 .float-right,
.cal_container .cal2 .float-left { float: none !important; }

.cal_container table {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 3px;
	margin: 0 0 20px;
	background: transparent;
	color: var(--ink);
	font-family: var(--sans);
}
.cal_container table th,
.cal_container table td {
	padding: 0;
	border: 0;
	vertical-align: middle;
	text-align: center;
}

/* Month heading row */
.cal_container tr:first-child th {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -.3px;
	padding: 0 0 14px;
	white-space: nowrap;
}
.cal_container tr:first-child th a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	color: var(--green);
	font-family: var(--sans);
	font-size: 0;
	transition: background .2s, border-color .2s;
}
.cal_container tr:first-child th:first-child a::before { content: '\2190'; font-size: 17px; }
.cal_container tr:first-child th:last-child a::before { content: '\2192'; font-size: 17px; }
.cal_container tr:first-child th a:hover { background: var(--sand); border-color: var(--line-dark); }
.cal_container tr:first-child th:first-child { text-align: left; }
.cal_container tr:first-child th:last-child { text-align: right; }

/* Weekday names */
.cal_container tr:nth-child(2) td {
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--eyebrow);
	font-weight: 600;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--line);
}

/* Day cells */
.cal_container tr:nth-child(n+3) td {
	height: var(--cal-cell);
	font-size: 15px;
	line-height: 1.2;
	user-select: none;
	position: relative;
}
/* A day with no availability record yet: not bookable, but not a booking either */
.cal_container td[date] { background: transparent; color: #a3a89f; box-shadow: inset 0 0 0 1px var(--line); }
.cal_container td.day_clickable {
	background: var(--cal-open);
	color: var(--green);
	cursor: pointer;
	transition: background .15s;
}
.cal_container td.day_clickable:not(.cal_active_range):not(.cal_active_start):not(.cal_active_end):hover { background: var(--cal-open-hover); }
.cal_container td.day_clickable:focus-visible { outline: 3px solid #ba9654; outline-offset: 1px; }
.cal_container td.notopen,
.cal_container td.blackout,
.cal_container td.fully_booked {
	background: var(--cal-booked);
	color: var(--cal-booked-text);
	text-decoration: line-through;
	text-decoration-color: rgba(140, 144, 137, .55);
}

/* Past days and blank padding cells */
.cal_container td[class="[class]"] { background: transparent; color: #b8bcb3; }
.cal_container tr:nth-child(n+3) td:not([date]) { background: transparent; }

.cal_container .rate,
.cal_container .booked {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	letter-spacing: .2px;
	text-decoration: none;
}
.cal_container .rate { color: var(--muted); }
.cal_container .booked {
	color: var(--cal-booked-text);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 9px;
	display: inline-block;
	width: 100%;
}
.cal_container td[class="[class]"] .booked { margin: 0; font-size: 12px; color: #c4c7bf; }

/* Rate tiers (rates.css_class). Availability colors take precedence; these only tint the price. */
.cal_container .rate_default .rate,
.cal_container .no_price .rate { color: var(--muted); }
.cal_container .rate_green .rate { color: #2f6b3c; }
.cal_container .rate_blue .rate { color: #2f5a78; }

/* Half-day changeover: top-left = morning, bottom-right = afternoon */
.cal_container td.open_1 { background: linear-gradient(to right bottom, var(--cal-open) 50%, var(--cal-booked) 50%); }
.cal_container td.open_2 { background: linear-gradient(to right bottom, var(--cal-booked) 50%, var(--cal-open) 50%); }
.cal_container td.open_1:not(.cal_active_range):not(.cal_active_start):not(.cal_active_end):hover { background: linear-gradient(to right bottom, var(--cal-open-hover) 50%, var(--cal-booked) 50%); }
.cal_container td.open_2:not(.cal_active_range):not(.cal_active_start):not(.cal_active_end):hover { background: linear-gradient(to right bottom, var(--cal-booked) 50%, var(--cal-open-hover) 50%); }

/* ---------- Active selection (vcalendar.js) ---------- */

.cal_container td.cal_active_range {
	background: var(--cal-range);
	color: var(--ink);
	box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold);
}
.cal_container td.cal_active_start,
.cal_container td.cal_active_end {
	background: var(--cal-pick);
	color: var(--ink);
	font-weight: 700;
}
.cal_container td.cal_active_start { box-shadow: inset 3px 0 0 var(--green), inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); }
.cal_container td.cal_active_end { box-shadow: inset -3px 0 0 var(--green), inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); }
.cal_container td.cal_active_start.cal_active_end { box-shadow: inset 0 0 0 2px var(--green); }
.cal_container td.cal_active_start .rate,
.cal_container td.cal_active_end .rate,
.cal_container td.cal_active_range .rate { color: var(--ink); }

/* Selected half-day cells keep their booked half visible */
.cal_container td.open_1.cal_active_range { background: linear-gradient(to right bottom, var(--cal-range) 50%, var(--cal-booked) 50%); }
.cal_container td.open_2.cal_active_range { background: linear-gradient(to right bottom, var(--cal-booked) 50%, var(--cal-range) 50%); }
.cal_container td.open_1.cal_active_start,
.cal_container td.open_1.cal_active_end { background: linear-gradient(to right bottom, var(--cal-pick) 50%, var(--cal-booked) 50%); }
.cal_container td.open_2.cal_active_start,
.cal_container td.open_2.cal_active_end { background: linear-gradient(to right bottom, var(--cal-booked) 50%, var(--cal-pick) 50%); }

/* A booked day caught inside a selected range stays visibly booked */
.cal_container td.notopen.cal_active_range,
.cal_container td.fully_booked.cal_active_range {
	background: repeating-linear-gradient(135deg, var(--cal-booked) 0 6px, #f3d9cf 6px 12px);
	color: #8a4a3c;
}

/* ---------- Selection readout & request button ---------- */

.cal_container .cal-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.cal_container .cal-selection { font-size: 14px; color: var(--muted); }
.cal_container .cal-selection span { color: var(--ink); font-weight: 700; }
.cal_container .cal-selection:has(span:empty) { visibility: hidden; }
.cal_container #btn_reserve_dates {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	padding: 17px 26px;
}
.cal_container .cal-actions-text { max-width: 640px; }
.cal_container .cal-note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.cal_container #btn_reserve_dates { flex: none; }

/* ---------- Calendar alert modal ---------- */

#calendarAlertModal .modal-content { border: 0; border-radius: 0; background: var(--paper); }
#calendarAlertModal .modal-header {
	border-bottom: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: 0;
	padding: 18px 22px;
	background: var(--sand);
}
#calendarAlertModal .modal-title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
#calendarAlertModal .modal-body { padding: 20px 22px; font-size: 15px; }
#calendarAlertModal .modal-body p { margin: 0; color: var(--ink) !important; }
#calendarAlertModal .modal-footer { border-top: 0; padding: 0 22px 20px; }

/* ---------- /cal page only ---------- */

.cal-page .cal_container {
	background: white;
	border: 1px solid var(--line);
	padding: 34px 40px 30px;
}
.cal-more {
	max-width: 1160px;
	margin: 36px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 60px;
	font-size: 14px;
	color: var(--muted);
}
.cal-more > div { border-top: 1px solid var(--line-dark); padding-top: 20px; }
.cal-more .eyebrow { margin-bottom: 10px; }
.cal-more .text-link { color: var(--ink); margin-left: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.cal_container .cal-help { display: block; }
	.cal_container .cal-legend { margin-top: 16px; }
}

@media (max-width: 760px) {
	.cal_container { --cal-cell: 48px; }
	.cal-page .cal_container { padding: 22px 14px 22px; }
	.cal_container .cal-months { margin-left: 0; margin-right: 0; }
	.cal_container .cal1,
	.cal_container .cal2 { padding-left: 0; padding-right: 0; }
	.cal_container .cal2 table { margin-top: 10px; }
	.cal_container .cal-steps { flex-direction: column; gap: 8px; }
	.cal_container .cal-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
	.cal_container table { border-spacing: 2px; }
	.cal_container tr:first-child th { font-size: 21px; }
	.cal_container tr:first-child th a { width: 36px; height: 36px; }
	.cal_container tr:nth-child(n+3) td { font-size: 14px; }
	.cal_container .rate { font-size: 9px; letter-spacing: 0; }
	.cal_container .booked { font-size: 8px; letter-spacing: .5px; }
	.cal_container .cal-actions { display: block; }
	.cal_container .cal-selection { margin-bottom: 8px; }
	.cal_container .cal-selection:has(span:empty) { display: none; }
	.cal_container #btn_reserve_dates { display: flex; width: 100%; justify-content: space-between; }
	.cal_container .cal-actions-text { margin-bottom: 18px; }
	.cal-more { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
	.cal_container { --cal-cell: 44px; }
	.cal-page .cal_container { padding: 18px 8px; border-left: 0; border-right: 0; }
	.cal_container tr:nth-child(n+3) td { font-size: 13px; }
	.cal_container .rate { font-size: 8px; }
	.cal_container .booked { font-size: 7px; letter-spacing: 0; }
}