/**
 * Multi Calendar Vira - picker styling.
 *
 * Scoped entirely under .calendar-vira-* so nothing here can affect OpenCart's
 * own admin styling. Uses Bootstrap's CSS variables where they exist, so the
 * picker follows the admin theme rather than fighting it.
 */
.calendar-vira-panel {
	z-index: 1080;
	min-width: 17rem;
	padding: .5rem;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .375rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	font-size: .875rem;
}

.calendar-vira-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
	font-weight: 600;
}

.calendar-vira-header button {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	line-height: 1;
	background: transparent;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .25rem;
	cursor: pointer;
}

.calendar-vira-header button:hover {
	background: var(--bs-secondary-bg, #e9ecef);
}

.calendar-vira-grid {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

.calendar-vira-grid th {
	padding: .25rem 0;
	font-weight: 500;
	color: var(--bs-secondary-color, #6c757d);
}

.calendar-vira-grid td {
	padding: 1px;
}

.calendar-vira-grid button {
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: .25rem;
	cursor: pointer;
}

.calendar-vira-grid button:hover {
	background: var(--bs-secondary-bg, #e9ecef);
}

.calendar-vira-grid button.selected {
	color: #fff;
	background: var(--bs-primary, #0d6efd);
}

.calendar-vira-time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.calendar-vira-time input {
	width: 3.5rem;
	padding: .125rem .25rem;
	text-align: center;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .25rem;
}

/* The picker is direction-aware, so an RTL calendar reads right to left. */
.calendar-vira-panel[dir="rtl"] .calendar-vira-header button[data-move="-1"] {
	transform: scaleX(-1);
}

.calendar-vira-panel[dir="rtl"] .calendar-vira-header button[data-move="1"] {
	transform: scaleX(-1);
}