@import url('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
.card-rental input[type="radio"], .card-rental svg {
	all: revert-layer;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
	background-color: black !important;
	border-color: black !important;
}
.flatpickr-day:hover {
	background-color: black !important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
	-webkit-box-shadow: -10px 0 0 black !important;
	box-shadow: -10px 0 0 black !important;
}
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
	border-radius: 10px 0 0 10px !important;
}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
	border-radius: 0 10px 10px 0 !important;
}
.card-rental * {
	font-size: var(--font-size-purchase-option, 16px) !important;
}
#product-rental-datepicker, #product-rental-try-on-datepicker {
	width: 100%;
	padding: 6px 12px;
	border: 1px solid #8A8A8A;
	border-radius: 8px;
}

.flex-select-option {
	display: flex;
	flex-wrap: wrap;
}
.price-rental {
	font-size: var(--font-size-rental-price, 16px);
}
.radio-label {
	display: block;
	padding: 10px;
	margin: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
	background-color: white; /* Default background color */
	color: black; /* Default text color */
}
#extend-properties {
	display: none !important;
}
.radio-input {
	display: none !important; /* Hide the actual radio button */
}

/* Style for when the radio button is selected */
.radio-input:checked + span {
	background-color: #000000; /* Green background */
	color: white; /* White text */
	display: block; /* Ensure the span fills the label */
	padding: 10px; /* Match the label padding */
	margin: -10px; /* Offset the padding to fill the label */
	border-radius: 5px; /* Match the label border radius */
}

input[name="purchase-option"] ~ .sub-value, input[name="purchase-option"] ~ .card-rental-datepicker {
	display: none;
}

input[name="purchase-option"]:checked ~ .sub-value, input[name="purchase-option"]:checked ~ .card-rental-datepicker {
	display: block;
}

.sub-value p {
	margin: 0 0 0 24px;
}

.flatpickr-day:hover {
	background-color: black;
	color: white;
	cursor: pointer;
}
.flatpickr-day.hovered {
	background-color: #e6e6e6;
	border-radius: 0;
}
.flatpickr-day.startDateHover {
	background-color: black;
	border-radius: 10px 0 0 10px;
}
.flatpickr-day.endDateHover {
	background-color: black;
	border-radius: 0 10px 10px 0;
	color: white;
}
.flatpickr-calendar {
	border-radius: 16px;
}
.flatpickr-calendar {
	width: 250px !important;
	padding-left: 16px;
	padding-right: 16px;
}
.flatpickr-days {
	width: 218px !important;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
	width: 20px !important;
	height: 20px !important;
}

.flatpickr-day.disabled-flatpickr, .flatpickr-day.disabled-flatpickr:hover {
	cursor: not-allowed;
	color: rgba(57, 57, 57, 0.1);
}

.flatpickr-current-month {
	font-size: 100%;
}
.dayContainer {
	width: 218px !important;
	min-width: 218px !important;
	max-width: 218px !important;
}
.d-none {
	display: none;
}

.card-rental {
	border-radius: 12px;
	border: 1px solid rgba(138, 138, 138, 0.38);
	/*padding: 16px;*/
}
.card-rental label[for="purchase-option"] {
	font-size: 13px;
	font-weight: 650;
	color: #303030;
}
.card-rental-datepicker {
	border: 1px solid #B5B5B5;
	/*padding: 12px;*/
	border-radius: 12px;
	overflow: hidden;
}
.card-rental-datepicker .title-card-rental-date {
	background-color: #F3F3F3;
	display: block;
	font-size: 13px;
	font-weight: 550;
	padding: 16px 12px;
}

.card-rental-datepicker span {
	font-weight: 400;
}

.list-purchase-option {
	/*border-bottom: 1px solid #8A8A8A61;*/
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 0 12px;
	display: block;
	cursor: pointer;
}

.input-datepicker {
	position: relative;
}
.input-datepicker svg {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateX(-50%) translateY(-50%);
}
.card-rental-datepicker .content-card {
	margin: 0 12px 12px 12px;
}
.rental-policy {
	border: 1px #4AAFD3 solid;
	border-radius: 12px;
	padding: 4px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	cursor: pointer;
}
label[for="purchase-option"] {
	margin-left: 16px;
	margin-top: 16px;
}
.card-rental hr {
	margin: 4px 0;
}
input[name="purchase-option"] {
	accent-color: black !important;
}

.modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 0;
	border-radius: 8px;
	max-width: 920px;
	animation: fadeIn 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Header: title left, close right */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #ddd;
	background: #f7f7f7;
}

.modal-header h2 {
	display: inline-block;
	margin: 0;
	font-size: 20px;
	font-weight: 650;
}

.close {
	font-size: 24px;
	color: #888;
	cursor: pointer;
}

.close:hover {
	color: #000;
}

.modal-body {
	padding: 20px;
	max-height: 60dvh;
	overflow-y: scroll;
}

.modal-footer {
	padding: 10px 20px;
	border-top: 1px solid #ddd;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	background: #f9f9f9;
}

.modal-footer button {
	padding: 6px 14px;
	font-size: 14px;
	cursor: pointer;
}
.preview-block {
	width: 100%;
	object-fit: contain;
}
.shopify-payment-button {
	display: none !important;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}