/*
 ***************************************************************************************************
 * Medusa Product Rental Calendar widget
 ***************************************************************************************************
 */

/*
 * Központi gépbérlési naptár - shortcode-os frontend váz.
 *
 * Cél:
 * - a termékoldali dátummezőknél szélesebb, de még mindig kompakt blokk,
 * - visszafogott, Medusa-palettába illő státuszszínek,
 * - jól zsugorodó desktop és mobil nézet.
 */
.medusa-product-rental-calendar {
	width                                                   : min(100%, 860px);
	margin                                                  : 0 auto;
	padding                                                 : 22px;
	border                                                  : 1px solid var(--medusa-theme-border);
	background                                              : color-mix(in srgb, var(--medusa-theme-surface) 88%, white 12%);
	box-shadow                                              : 0 16px 34px rgba(59, 43, 38, 0.08);
	color                                                   : var(--medusa-theme-text);
}

.medusa-product-rental-calendar__toolbar {
	display                                                 : flex;
	flex-direction                                          : column;
	gap                                                     : 8px;
	margin-bottom                                           : 18px;
}

.medusa-product-rental-calendar__filter-label {
	font-size                                               : 13px;
	font-weight                                             : 600;
	color                                                   : var(--medusa-theme-text-soft);
}

.medusa-product-rental-calendar__filter,
.medusa-product-rental-calendar__month-select,
.medusa-product-rental-calendar__year-select {
	min-height                                              : 42px;
	padding                                                 : 0 14px;
	border                                                  : 1px solid var(--medusa-theme-border);
	background                                              : #ffffff;
	color                                                   : var(--medusa-theme-text);
	font-size                                               : 15px;
	line-height                                             : 1.2;
	box-shadow                                              : none;
	max-width                                               : 100%;
}

.medusa-product-rental-calendar .medusa-product-rental-calendar__month-select,
.medusa-product-rental-calendar .medusa-product-rental-calendar__year-select {
	background-color                                       : #ffffff !important;
	cursor                                                  : pointer;
	transition                                              : background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.medusa-product-rental-calendar .medusa-product-rental-calendar__filter {
	background-color                                       : #ffffff !important;
	background-image                                       : var(--wd-form-chevron) !important;
	background-repeat                                      : no-repeat !important;
	background-position                                    : right 10px top 50% !important;
	background-size                                        : auto 18px !important;
	cursor                                                  : pointer;
	transition                                              : background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.medusa-product-rental-calendar .medusa-product-rental-calendar__filter:hover,
.medusa-product-rental-calendar .medusa-product-rental-calendar__month-select:hover,
.medusa-product-rental-calendar .medusa-product-rental-calendar__year-select:hover {
	background-color                                        : var(--medusa-theme-surface-accent) !important;
	border-color                                            : var(--medusa-theme-border-strong);
	color                                                   : var(--medusa-theme-brand-hover);
}

.medusa-product-rental-calendar__shell {
	padding                                                 : 0;
	background                                              : transparent;
}

.medusa-product-rental-calendar__header {
	display                                                 : grid;
	grid-template-columns                                   : minmax(0, 1fr) auto minmax(0, 1fr);
	align-items                                             : center;
	gap                                                     : 12px;
	margin-bottom                                           : 14px;
}

.medusa-product-rental-calendar__header-left,
.medusa-product-rental-calendar__header-right {
	display                                                 : flex;
	align-items                                             : center;
	gap                                                     : 8px;
}

.medusa-product-rental-calendar__header-right {
	justify-content                                         : flex-end;
}

.medusa-product-rental-calendar__header-center {
	display                                                 : flex;
	justify-content                                         : center;
	align-items                                             : center;
	gap                                                     : 10px;
	flex-wrap                                               : nowrap;
}

.medusa-product-rental-calendar__nav-button {
	display                                                 : inline-flex;
	align-items                                             : center;
	justify-content                                         : center;
	width                                                   : 42px;
	height                                                  : 42px;
	border                                                  : 1px solid var(--medusa-theme-border);
	background                                              : #ffffff;
	color                                                   : var(--medusa-theme-text);
	font-size                                               : 24px;
	line-height                                             : 1;
	transition                                              : background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	cursor                                                  : pointer;
}

.medusa-product-rental-calendar__nav-button:hover {
	background                                              : var(--medusa-theme-surface-accent);
	border-color                                            : var(--medusa-theme-border-strong);
	color                                                   : var(--medusa-theme-brand-hover);
}

.medusa-product-rental-calendar__nav-button--today {
	font-size                                               : 18px;
}

.medusa-product-rental-calendar__nav-icon {
	display                                                 : inline-flex;
	align-items                                             : center;
	justify-content                                         : center;
	font-size                                               : 18px;
	line-height                                             : 1;
}

.medusa-product-rental-calendar__grid-wrap {
	padding                                                 : 0;
}

.medusa-product-rental-calendar__status {
	display                                                 : none;
	padding                                                 : 12px 16px;
	border-bottom                                           : 1px solid var(--medusa-theme-border);
	font-size                                               : 13px;
	font-weight                                             : 600;
	color                                                   : var(--medusa-theme-text-soft);
	background                                              : color-mix(in srgb, var(--medusa-theme-bg) 70%, white 30%);
}

.medusa-product-rental-calendar__status--loading,
.medusa-product-rental-calendar__status--error {
	display                                                 : block;
}

.medusa-product-rental-calendar__status--error {
	color                                                   : #8f3d3d;
	background                                              : color-mix(in srgb, #f2dfdf 78%, white 22%);
}

.medusa-product-rental-calendar__weekdays,
.medusa-product-rental-calendar__grid {
	display                                                 : grid;
	grid-template-columns                                   : repeat(7, minmax(0, 1fr));
}

.medusa-product-rental-calendar__weekday,
.medusa-product-rental-calendar__day {
	border-right                                            : 1px solid var(--medusa-theme-border);
	border-bottom                                           : 1px solid var(--medusa-theme-border);
	border-left                                             : none;
}

.medusa-product-rental-calendar__weekday {
	border-top                                              : 1px solid var(--medusa-theme-border);
}

.medusa-product-rental-calendar__weekday:nth-child(7n + 1),
.medusa-product-rental-calendar__day:nth-child(7n + 1) {
	border-left                                             : 1px solid var(--medusa-theme-border);
}

.medusa-product-rental-calendar__weekday {
	padding                                                 : 12px 8px 12px 12px;
	text-align                                              : center;
	font-size                                               : 12px;
	font-weight                                             : 700;
	letter-spacing                                          : 0.04em;
	text-transform                                          : uppercase;
	background                                              : color-mix(in srgb, var(--medusa-theme-bg) 60%, white 40%);
	color                                                   : var(--medusa-theme-text-soft);
}

.medusa-product-rental-calendar__day {
	position                                                : relative;
	min-height                                              : 76px;
	padding                                                 : 10px;
	background                                              : #ffffff;
	transition                                              : background-color 0.18s ease, box-shadow 0.18s ease;
}

.medusa-product-rental-calendar__day-number {
	display                                                 : inline-flex;
	align-items                                             : center;
	justify-content                                         : center;
	width                                                   : 32px;
	height                                                  : 32px;
	font-size                                               : 15px;
	font-weight                                             : 600;
	color                                                   : var(--medusa-theme-text);
}

.medusa-product-rental-calendar__day--past {
	background                                              : color-mix(in srgb, var(--medusa-theme-bg) 72%, #d9d2cc 28%);
}

.medusa-product-rental-calendar__day--past .medusa-product-rental-calendar__day-number {
	color                                                   : var(--medusa-theme-text-muted);
	opacity                                                 : 0.82;
}

.medusa-product-rental-calendar__day--free {
	background                                              : color-mix(in srgb, #d7f0e0 82%, white 18%);
}

.medusa-product-rental-calendar__day--busy {
	background                                              : color-mix(in srgb, #f3d8d8 82%, white 18%);
}

.medusa-product-rental-calendar__day--today {
	font-weight                                             : 700;
}

.medusa-product-rental-calendar__day--today .medusa-product-rental-calendar__day-number {
	font-weight                                             : 700;
}

.medusa-product-rental-calendar__day--outside-month .medusa-product-rental-calendar__day-number {
	opacity                                                 : 0.46;
}

.medusa-product-rental-calendar__day--outside-month {
	box-shadow                                              : inset 0 0 0 999px rgba(255, 255, 255, 0.10);
}

.medusa-product-rental-calendar--loading .medusa-product-rental-calendar__weekdays,
.medusa-product-rental-calendar--loading .medusa-product-rental-calendar__grid {
	opacity                                                 : 0.38;
}

.medusa-product-rental-calendar__legend {
	display                                                 : flex;
	flex-wrap                                               : wrap;
	gap                                                     : 14px 18px;
	margin-top                                              : 14px;
	font-size                                               : 13px;
	color                                                   : var(--medusa-theme-text-soft);
}

.medusa-product-rental-calendar__legend-item {
	display                                                 : inline-flex;
	align-items                                             : center;
	gap                                                     : 8px;
}

.medusa-product-rental-calendar__legend-swatch {
	display                                                 : inline-block;
	width                                                   : 16px;
	height                                                  : 16px;
	border                                                  : 1px solid var(--medusa-theme-border);
	background                                              : #ffffff;
}

.medusa-product-rental-calendar__legend-swatch--free {
	background                                              : color-mix(in srgb, #d7f0e0 82%, white 18%);
}

.medusa-product-rental-calendar__legend-swatch--busy {
	background                                              : color-mix(in srgb, #f3d8d8 82%, white 18%);
}

.medusa-product-rental-calendar__legend-swatch--past {
	background                                              : color-mix(in srgb, var(--medusa-theme-bg) 72%, #d9d2cc 28%);
}

.medusa-product-rental-calendar--empty {
	padding                                                 : 18px 20px;
	text-align                                              : center;
}

@media (max-width: 767px) {
	.medusa-product-rental-calendar {
		padding                                             : 16px;
	}

	.medusa-product-rental-calendar__header {
		grid-template-columns                               : auto auto;
		justify-content                                     : center;
		justify-items                                       : center;
	}

	.medusa-product-rental-calendar__header-left,
	.medusa-product-rental-calendar__header-right {
		width                                               : auto;
	}

	.medusa-product-rental-calendar__header-left {
		justify-self                                        : end;
	}

	.medusa-product-rental-calendar__header-right {
		justify-self                                        : start;
	}

	.medusa-product-rental-calendar__header-center {
		grid-column                                         : 1 / -1;
		width                                               : 100%;
		justify-content                                     : center;
		flex-wrap                                           : wrap;
	}

	.medusa-product-rental-calendar__day {
		min-height                                          : 62px;
		padding                                             : 8px;
	}

	.medusa-product-rental-calendar__day-number {
		width                                               : 28px;
		height                                              : 28px;
		font-size                                           : 14px;
	}
}