/**
 * VIRA Multi Calendar Pro - date picker, dashboard widget and themes.
 *
 * Isolation: every rule is scoped under .vira-cal-scope (the picker panel, the
 * dashboard widget and the theme preview all carry it) or under the
 * .vira-cal-* classes the script adds to fields. Nothing here targets bare
 * elements of the page, so the shop theme and other extensions are unaffected.
 *
 * Themes: a theme is only a set of CSS custom properties on
 * .vira-cal-scope[data-vira-theme="<code>"]. To add a theme, copy one block,
 * give it a new code and register the code in
 * system/library/support/theme.php. No JavaScript or PHP logic changes.
 *
 * Runtime overrides (set inline by the script from the admin settings):
 *   --vc-primary, --vc-accent  custom colours
 *   --vc-radius                corner radius
 *   --vc-font                  font stack
 * and attributes data-vira-size (sm|md|lg), data-vira-mode (light|dark),
 * data-vira-mobile (popover|modal|sheet).
 */

/* ------------------------------------------------------------------ Tokens */

.vira-cal-scope {
	--vc-radius: 10px;
	--vc-font: inherit;
	--vc-cell: 2.25rem;
	--vc-text: .875rem;
	--vc-gap: .125rem;

	/* Classic is the base every theme starts from. */
	--vc-bg: #ffffff;
	--vc-fg: #212529;
	--vc-muted: #6c757d;
	--vc-border: #dee2e6;
	--vc-surface: #f8f9fa;
	--vc-hover: #e9f2ff;
	--vc-primary: #0d6efd;
	--vc-primary-fg: #ffffff;
	--vc-accent: #fd7e14;
	--vc-range: rgba(13, 110, 253, .12);
	--vc-holiday: #d63384;
	--vc-holiday-bg: #fdeef5;
	--vc-custom: #6f42c1;
	--vc-weekend: #dc3545;
	--vc-danger: #dc3545;
	--vc-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
	--vc-backdrop: none;
	--vc-panel-bg: var(--vc-bg);

	font-family: var(--vc-font);
	color: var(--vc-fg);
}

.vira-cal-scope[data-vira-size="sm"] { --vc-cell: 1.9rem;  --vc-text: .8rem; }
.vira-cal-scope[data-vira-size="lg"] { --vc-cell: 2.75rem; --vc-text: 1rem; }

/* Minimal: airy, soft, almost no lines. */
.vira-cal-scope[data-vira-theme="minimal"] {
	--vc-border: transparent;
	--vc-surface: #fafafa;
	--vc-hover: #f1f1f4;
	--vc-primary: #111827;
	--vc-accent: #6366f1;
	--vc-range: rgba(17, 24, 39, .07);
	--vc-holiday: #e11d48;
	--vc-holiday-bg: #fff1f2;
	--vc-shadow: 0 10px 30px rgba(17, 24, 39, .08), 0 0 0 1px rgba(17, 24, 39, .06);
}

/* Dark: always dark, high contrast. */
.vira-cal-scope[data-vira-theme="dark"],
.vira-cal-scope[data-vira-mode="dark"] {
	--vc-bg: #1e1f24;
	--vc-fg: #e9ecef;
	--vc-muted: #9aa0a6;
	--vc-border: #33363d;
	--vc-surface: #26282e;
	--vc-hover: #2f3340;
	--vc-primary: #4d8dff;
	--vc-primary-fg: #0b0c0f;
	--vc-accent: #ffb454;
	--vc-range: rgba(77, 141, 255, .18);
	--vc-holiday: #ff6b9a;
	--vc-holiday-bg: rgba(255, 107, 154, .14);
	--vc-custom: #b794f6;
	--vc-weekend: #ff7b7b;
	--vc-shadow: 0 .75rem 2rem rgba(0, 0, 0, .55);
}

/* Glass: translucent surface with blur. */
.vira-cal-scope[data-vira-theme="glass"] {
	--vc-bg: rgba(255, 255, 255, .62);
	--vc-panel-bg: rgba(255, 255, 255, .62);
	--vc-fg: #14213d;
	--vc-muted: #4f5d75;
	--vc-border: rgba(255, 255, 255, .55);
	--vc-surface: rgba(255, 255, 255, .45);
	--vc-hover: rgba(255, 255, 255, .75);
	--vc-primary: #3a86ff;
	--vc-accent: #8338ec;
	--vc-range: rgba(58, 134, 255, .16);
	--vc-holiday-bg: rgba(214, 51, 132, .12);
	--vc-shadow: 0 8px 32px rgba(31, 38, 135, .18);
	--vc-backdrop: blur(14px) saturate(160%);
}

.vira-cal-scope[data-vira-theme="glass"][data-vira-mode="dark"] {
	--vc-bg: rgba(30, 31, 36, .6);
	--vc-panel-bg: rgba(30, 31, 36, .6);
	--vc-surface: rgba(255, 255, 255, .06);
	--vc-hover: rgba(255, 255, 255, .12);
	--vc-border: rgba(255, 255, 255, .14);
}

/* Vira Copper: copper, cream and soft brown. */
.vira-cal-scope[data-vira-theme="vira_copper"] {
	--vc-bg: #fffaf3;
	--vc-fg: #4a2f22;
	--vc-muted: #8b6b5a;
	--vc-border: #ead8c3;
	--vc-surface: #f7ecdd;
	--vc-hover: #f3e1cb;
	--vc-primary: #b8692f;
	--vc-primary-fg: #fffaf3;
	--vc-accent: #7a4a2a;
	--vc-range: rgba(184, 105, 47, .14);
	--vc-holiday: #a8322d;
	--vc-holiday-bg: #f8dfd6;
	--vc-custom: #6b4f9e;
	--vc-weekend: #a8322d;
	--vc-shadow: 0 .75rem 1.75rem rgba(122, 74, 42, .18);
}

.vira-cal-scope[data-vira-theme="vira_copper"][data-vira-mode="dark"] {
	--vc-bg: #2a1d16;
	--vc-fg: #f3e4d3;
	--vc-muted: #c2a38c;
	--vc-border: #4a3326;
	--vc-surface: #33241b;
	--vc-hover: #4a3326;
	--vc-primary: #e0904f;
	--vc-primary-fg: #2a1d16;
	--vc-holiday: #ff8a7a;
	--vc-holiday-bg: rgba(255, 138, 122, .14);
}

/* Emerald: emerald green, white and light grey. */
.vira-cal-scope[data-vira-theme="emerald"] {
	--vc-bg: #ffffff;
	--vc-fg: #1f2937;
	--vc-muted: #6b7280;
	--vc-border: #e5e7eb;
	--vc-surface: #f3f4f6;
	--vc-hover: #ecfdf5;
	--vc-primary: #059669;
	--vc-primary-fg: #ffffff;
	--vc-accent: #10b981;
	--vc-range: rgba(5, 150, 105, .12);
	--vc-holiday: #dc2626;
	--vc-holiday-bg: #fef2f2;
	--vc-weekend: #dc2626;
}

.vira-cal-scope[data-vira-theme="emerald"][data-vira-mode="dark"] {
	--vc-bg: #0f1f1a;
	--vc-fg: #e6f4ef;
	--vc-muted: #9cb8ad;
	--vc-border: #1f3a31;
	--vc-surface: #142a23;
	--vc-hover: #1b3a30;
	--vc-primary: #34d399;
	--vc-primary-fg: #06251b;
	--vc-holiday: #f87171;
	--vc-holiday-bg: rgba(248, 113, 113, .14);
}

/* ------------------------------------------------------------- Fields */

.vira-cal-field {
	position: relative;
}

.vira-cal-input.is-invalid {
	border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.vira-cal-error {
	display: none;
	margin-top: .25rem;
	font-size: .8125rem;
	color: var(--bs-form-invalid-color, #dc3545);
}

.vira-cal-error.is-visible {
	display: block;
}

.vira-cal-quick {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: .375rem;
}

.vira-cal-quick button {
	padding: .125rem .5rem;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--bs-body-color, #212529);
	background: var(--bs-tertiary-bg, #f8f9fa);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 999px;
	cursor: pointer;
}

.vira-cal-quick button:hover,
.vira-cal-quick button:focus-visible {
	border-color: var(--bs-primary, #0d6efd);
	outline: none;
}

/* -------------------------------------------------------------- Panel */

.vira-cal-panel {
	position: absolute;
	z-index: 1090;
	width: max-content;
	min-width: calc(var(--vc-cell) * 7 + 1.5rem);
	max-width: calc(100vw - 1rem);
	padding: .75rem;
	font-size: var(--vc-text);
	line-height: 1.4;
	color: var(--vc-fg);
	background: var(--vc-panel-bg);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	-webkit-backdrop-filter: var(--vc-backdrop);
	backdrop-filter: var(--vc-backdrop);
	box-sizing: border-box;
}

.vira-cal-panel *,
.vira-cal-widget * {
	box-sizing: border-box;
}

.vira-cal-panel:focus {
	outline: none;
}

.vira-cal-head {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin-bottom: .5rem;
}

.vira-cal-title {
	flex: 1;
	display: flex;
	justify-content: center;
	gap: .25rem;
	font-weight: 600;
}

.vira-cal-scope .vira-cal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	font: inherit;
	color: var(--vc-fg);
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: calc(var(--vc-radius) * .7);
	cursor: pointer;
}

.vira-cal-scope .vira-cal-btn:hover {
	background: var(--vc-hover);
}

.vira-cal-scope .vira-cal-btn:focus-visible,
.vira-cal-scope .vira-cal-day:focus-visible,
.vira-cal-scope .vira-cal-select:focus-visible {
	outline: 2px solid var(--vc-primary);
	outline-offset: 1px;
}

.vira-cal-scope .vira-cal-btn-primary {
	color: var(--vc-primary-fg);
	background: var(--vc-primary);
	border-color: var(--vc-primary);
}

.vira-cal-scope .vira-cal-btn-primary:hover {
	background: var(--vc-primary);
	filter: brightness(1.08);
}

.vira-cal-scope .vira-cal-select {
	height: 2rem;
	padding: 0 .375rem;
	font: inherit;
	font-weight: 600;
	color: var(--vc-fg);
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: calc(var(--vc-radius) * .7);
}

.vira-cal-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: var(--vc-gap);
}

.vira-cal-grid th {
	padding: .25rem 0;
	font-size: .75em;
	font-weight: 600;
	text-align: center;
	color: var(--vc-muted);
}

.vira-cal-grid th.is-weekend {
	color: var(--vc-weekend);
}

.vira-cal-grid td {
	padding: 0;
	text-align: center;
}

.vira-cal-scope .vira-cal-day {
	position: relative;
	width: var(--vc-cell);
	height: var(--vc-cell);
	padding: 0;
	font: inherit;
	color: var(--vc-fg);
	background: transparent;
	border: 1px solid transparent;
	border-radius: calc(var(--vc-radius) * .8);
	cursor: pointer;
}

.vira-cal-scope .vira-cal-day:hover {
	background: var(--vc-hover);
}

.vira-cal-scope .vira-cal-day.is-weekend {
	color: var(--vc-weekend);
}

.vira-cal-scope .vira-cal-day.is-holiday {
	color: var(--vc-holiday);
	background: var(--vc-holiday-bg);
	font-weight: 600;
}

.vira-cal-scope .vira-cal-day.is-custom-holiday {
	color: var(--vc-custom);
	font-weight: 600;
}

.vira-cal-scope .vira-cal-day.has-event::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	background: var(--vc-accent);
	border-radius: 50%;
}

.vira-cal-scope .vira-cal-day.is-today {
	border-color: var(--vc-primary);
	font-weight: 700;
}

.vira-cal-scope .vira-cal-day.in-range {
	background: var(--vc-range);
	border-radius: 0;
}

.vira-cal-scope .vira-cal-day.is-selected,
.vira-cal-scope .vira-cal-day.range-start,
.vira-cal-scope .vira-cal-day.range-end {
	color: var(--vc-primary-fg);
	background: var(--vc-primary);
	border-color: var(--vc-primary);
}

.vira-cal-scope .vira-cal-day.is-disabled,
.vira-cal-scope .vira-cal-day[aria-disabled="true"] {
	color: var(--vc-muted);
	background: transparent;
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.vira-cal-time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	margin-top: .5rem;
	direction: ltr;
}

.vira-cal-foot {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	justify-content: space-between;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid var(--vc-border);
}

.vira-cal-foot .vira-cal-spacer {
	flex: 1;
}

.vira-cal-note {
	margin-top: .375rem;
	min-height: 1.25em;
	font-size: .8em;
	color: var(--vc-muted);
}

.vira-cal-note .is-holiday {
	color: var(--vc-holiday);
}

.vira-cal-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Mobile: modal / bottom sheet. */
.vira-cal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1089;
	background: rgba(0, 0, 0, .35);
}

.vira-cal-panel.is-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	--vc-cell: 2.6rem;
}

.vira-cal-panel.is-sheet {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	border-radius: var(--vc-radius) var(--vc-radius) 0 0;
	padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
	--vc-cell: 2.75rem;
}

.vira-cal-panel.is-sheet .vira-cal-grid,
.vira-cal-panel.is-modal .vira-cal-grid {
	margin: 0 auto;
}

.vira-cal-panel.is-sheet .vira-cal-btn,
.vira-cal-panel.is-modal .vira-cal-btn {
	min-height: 2.75rem;
	min-width: 2.75rem;
}

/* -------------------------------------------------- Dashboard widget */

.vira-cal-widget {
	padding: 1rem;
	color: var(--vc-fg);
	background: var(--vc-panel-bg);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	-webkit-backdrop-filter: var(--vc-backdrop);
	backdrop-filter: var(--vc-backdrop);
}

.vira-cal-widget .vira-cal-wtop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
}

.vira-cal-widget .vira-cal-wtitle {
	flex: 1;
	min-width: 8rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.vira-cal-widget .vira-cal-wsub {
	display: block;
	font-size: .8rem;
	font-weight: 400;
	color: var(--vc-muted);
}

.vira-cal-widget .vira-cal-wbody {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1rem;
}

.vira-cal-widget .vira-cal-grid {
	table-layout: fixed;
}

.vira-cal-widget .vira-cal-day {
	width: 100%;
	height: auto;
	min-height: 3rem;
	padding: .25rem 0;
	line-height: 1.15;
}

.vira-cal-widget .vira-cal-day small {
	display: block;
	font-size: .65em;
	color: var(--vc-muted);
}

.vira-cal-widget .vira-cal-day.is-selected small,
.vira-cal-widget .vira-cal-day.is-holiday small {
	color: inherit;
	opacity: .8;
}

.vira-cal-widget .vira-cal-detail,
.vira-cal-widget .vira-cal-list {
	padding: .75rem;
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: calc(var(--vc-radius) * .8);
}

.vira-cal-widget .vira-cal-list {
	margin-top: .75rem;
	max-height: 16rem;
	overflow: auto;
}

.vira-cal-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vira-cal-widget li {
	display: flex;
	gap: .5rem;
	padding: .25rem 0;
	border-bottom: 1px dashed var(--vc-border);
}

.vira-cal-widget li:last-child {
	border-bottom: 0;
}

.vira-cal-widget .vira-cal-dot {
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-top: .45rem;
	background: var(--vc-accent);
	border-radius: 50%;
}

.vira-cal-widget .is-holiday .vira-cal-dot {
	background: var(--vc-holiday);
}

.vira-cal-widget .vira-cal-badge {
	display: inline-block;
	padding: 0 .4rem;
	font-size: .7rem;
	color: var(--vc-holiday);
	background: var(--vc-holiday-bg);
	border-radius: 999px;
}

.vira-cal-widget .vira-cal-status {
	font-size: .75rem;
	color: var(--vc-muted);
}

.vira-cal-widget .vira-cal-status.is-error {
	color: var(--vc-danger);
}

.vira-cal-widget .vira-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .5rem;
	font-size: .75rem;
	color: var(--vc-muted);
}

.vira-cal-widget .vira-cal-legend i {
	display: inline-block;
	width: .7rem;
	height: .7rem;
	margin-inline-end: .25rem;
	vertical-align: -1px;
	border-radius: 3px;
}

.vira-cal-widget.is-loading .vira-cal-grid {
	opacity: .5;
}

@media (max-width: 991.98px) {
	.vira-cal-widget .vira-cal-wbody {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.vira-cal-widget {
		padding: .625rem;
	}

	.vira-cal-widget .vira-cal-day {
		min-height: 2.5rem;
	}

	.vira-cal-widget .vira-cal-day small {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vira-cal-panel.is-sheet {
		animation: vira-cal-up .18s ease-out;
	}

	@keyframes vira-cal-up {
		from { transform: translateY(1.5rem); opacity: .4; }
		to { transform: none; opacity: 1; }
	}
}