/* =========================================================
   Kreita Stays – availability calendar in the request form.
   Colours and fonts come from the Kadence global palette, so
   every site restyles it from the Customizer. The fields
   themselves are styled by the theme.
   ========================================================= */

.ks-cal {
	--ks-accent: var(--global-palette1, #0077b6);
	--ks-ink:    var(--global-palette3, #03045e);
	--ks-soft:   var(--global-palette7, #ade8f4);
	--ks-tint:   var(--global-palette8, #caf0f8);
	--ks-paper:  var(--global-palette9, #fff);
	--ks-serif:  var(--global-heading-font-family, serif);
	--ks-caps:   var(--global-primary-nav-font-family, sans-serif);
	margin: 0 0 30px;
	padding: 24px 24px 18px;
	background: var(--ks-paper);
	border: 1px solid var(--ks-soft);
	color: var(--ks-ink);
}

.ks-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ks-cal .ks-cal__title { margin: 0; font-family: var(--ks-serif); font-size: 24px; line-height: 1.2; }
.ks-cal .ks-cal__hint { margin: 4px 0 16px; font-size: 14px; opacity: .8; }
.ks-cal .ks-cal__nav { display: flex; gap: 6px; margin: 0; }

/* buttons inside the content inherit the Kadence button look: reset it */
.ks-cal button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
}
.ks-cal .ks-cal__btn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--ks-soft);
	font-size: 20px;
	transition: background-color .2s, border-color .2s;
}
.ks-cal .ks-cal__btn:hover:not([disabled]) { border-color: var(--ks-accent); background: var(--ks-tint); }
.ks-cal .ks-cal__btn[disabled] { opacity: .3; cursor: default; }

.ks-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ks-cal table.ks-cal__month { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; }
.ks-cal__month caption {
	caption-side: top;
	padding: 0 0 10px;
	text-align: left;
	font-family: var(--ks-caps);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ks-cal__month th,
.ks-cal__month td { padding: 1px; border: 0; background: none; text-align: center; }
.ks-cal__month th { padding-bottom: 6px; font-family: var(--ks-caps); font-size: 11px; font-weight: 500; opacity: .6; }

.ks-cal .ks-cal__day {
	display: block;
	width: 100%;
	height: 40px;
	font-size: 15px;
	transition: background-color .15s, color .15s;
}
.ks-cal .ks-cal__day:hover:not([disabled]) { background: var(--ks-tint); }
.ks-cal .ks-cal__day:focus-visible { outline: 2px solid var(--ks-accent); outline-offset: -2px; }
.ks-cal .ks-cal__day[disabled] { opacity: .28; cursor: default; }
.ks-cal .ks-cal__day.is-today { font-weight: 700; }

/* a busy night: hatched and struck through */
.ks-cal .ks-cal__day.is-busy {
	color: color-mix(in srgb, var(--ks-ink) 45%, transparent);
	text-decoration: line-through;
	background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--ks-ink) 10%, transparent) 5px 6px);
}
.ks-cal .ks-cal__day.is-in { background: var(--ks-tint); color: var(--ks-ink); }
.ks-cal .ks-cal__day.is-clash { background: repeating-linear-gradient(135deg, var(--ks-tint) 0 5px, color-mix(in srgb, var(--ks-ink) 25%, transparent) 5px 6px); }
.ks-cal .ks-cal__day.is-start,
.ks-cal .ks-cal__day.is-end { background: var(--ks-accent); color: var(--ks-paper); text-decoration: none; }

.ks-cal .ks-cal__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ks-cal__legend li { display: flex; align-items: center; gap: 7px; margin: 0; }
.ks-cal__legend i { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--ks-soft); }
.ks-cal__legend .is-busy { background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ks-ink) 25%, transparent) 3px 4px); }
.ks-cal__legend .is-sel { background: var(--ks-accent); border-color: var(--ks-accent); }
.ks-cal .ks-cal__note { margin: 10px 0 0; font-size: 13px; opacity: .75; }

/* Guesty rules: no arrival (while choosing the arrival), no departure or too short (while choosing the departure) */
.ks-cal .ks-cal__day.is-noarr,
.ks-cal .ks-cal__day.is-nodep { color: color-mix(in srgb, var(--ks-ink) 40%, transparent); }

/* price of the stay (Guesty quote), under the dates */
.ks-form__price {
	grid-column: 1 / -1;
	margin: -4px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--global-palette1, #0077b6);
	background: var(--global-palette9, #fff);
	color: var(--global-palette3, #03045e);
	font-size: 15px;
	line-height: 1.5;
}
.ks-form__price.is-ok { font-weight: 600; }
.ks-form__price.is-loading { opacity: .7; }

@media (max-width: 640px) {
	.ks-cal { padding: 18px 14px 14px; }
	.ks-cal__months { grid-template-columns: 1fr; }
	.ks-cal .ks-cal__day { height: 44px; } /* finger-sized */
}
@media (prefers-reduced-motion: reduce) {
	.ks-cal button { transition: none; }
}