/** LIST **/
.card-room {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}

.card-room-list {
	position: relative;
	width: 100%;
	border-radius: 8px;
	background: #999;
	transition: transform 0.3s ease-in-out;
}

.card-room-list:hover {
	transform: translateY(-20px);
	box-shadow: 1px 54px 49px -42px rgba(162, 134, 62, 0.5);
	-webkit-box-shadow: 1px 54px 49px -42px rgba(162, 134, 62, 0.5);
	-moz-box-shadow: 1px 54px 49px -42px rgba(162, 134, 62, 0.5);
}

.card-room-list .card-room-list-img {
	width: 100%;
	border-radius: 8px;
	margin: 0 0 -5px 0;
	padding: 0;
}

.card-room-list .card-room-list-meta {
	position: absolute;
	z-index: 1;
	bottom: -1px;
	width: 100%;
	padding: 75px 24px 24px 24px;
	border-radius: 8px;
	background: rgb(0, 0, 0);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 59%);
}

.card-room-list-meta .card-room-list-meta-content {
	border-left: 1px solid #D4C7A6;
	padding: 0px 16px;
	color: #FFF;
}

.card-room-list-meta .card-room-list-meta-content a {
	color: #FFF;
}

.card-room-list-meta .card-room-list-meta-content h4 {
	font-family: Montserrat;
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 8px;
	padding: 0;
}

.card-room-list-meta .card-room-list-meta-content h2 {
	width: 70%;
	padding: 8px 0;
	border-style: solid;
	border-width: 1px;
	border-image: linear-gradient(to left, rgba(255, 255, 255, 0) 1%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%) 100% 0 100% 0/1px 0 1px 0 stretch;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0.52%, rgba(255, 255, 255, 0.30) 48.14%, rgba(255, 255, 255, 0.00) 100%);
	backdrop-filter: blur(2px);
	height: auto;
	font-family: Playfair Display;
	font-size: 18px;
	font-weight: 500;
	line-height: 140%;
	margin-top: 0;
	margin-bottom: 8px;
}

.card-room-list-meta-content .card-room-list-meta-content-sell-price {
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	padding: 0;
	margin: 0;
}

.card-room-list-meta-content .card-room-list-meta-content-regular-price {
	color: #DB2B46;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	padding: 0;
	margin: 0;
	text-decoration: line-through;
}

.card-room-list-meta-content .card-room-list-meta-content-regional-price {
	margin-top: 8px;
	padding: 6px 10px;
	background: rgba(162, 134, 62, 0.1);
	border: 1px solid rgba(162, 134, 62, 0.3);
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.card-room-list-meta-content .regional-label {
	color: #D4C7A6;
	font-family: Montserrat;
	font-size: 11px;
	font-weight: 500;
}

.card-room-list-meta-content .regional-value {
	color: #A2863E;
	font-family: Montserrat;
	font-size: 12px;
	font-weight: 600;
}

.card-room-list-meta-content .regional-night {
	font-family: Montserrat;
	font-size: 10px;
	font-weight: 500;
	color: #A2863E;
}

.card-room-list-meta-content .jpy-price {
	color: #A2863E;
	font-weight: 600;
}

.card-room-list-meta-content .regional-price {
	color: #d3ba79;
	font-weight: 700;
	font-size: 14px;
	position: relative;
	top: -4px;
	display: inline-block;
}

/** RETURN **/

.return-find-to-room {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}

@media screen and (max-width: 768px) {
	.return-find-to-room {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 64px;
	}
}

.return-find-to-room-list {
	position: relative;
	width: 100%;
	border-radius: 8px;
	background: #FFF;
	box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-webkit-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-moz-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
}

.dark-mode .return-find-to-room-list {
	background: transparent;
	box-shadow: none;
}

.return-find-to-room-list-img {
	width: 100%;
	border-radius: 8px;
	background: #D9D9D9;
}

.return-find-to-room-list-meta {
	width: 100%;
	padding: 24px;
}

.return-find-to-room-list-meta h2 {
	font-family: Playfair Display;
	font-size: 28px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	padding: 0;
	margin: 0 0 16px 0;
}

.return-find-to-room-list-meta h2,
.return-find-to-room-list-meta h2 a {
	color: #302C2C;
}

.dark-mode .return-find-to-room-list-meta h2,
.dark-mode .return-find-to-room-list-meta h2 a {
	color: #FFF;
}

.return-find-to-room-list-meta h2:hover,
.return-find-to-room-list-meta h2 a:hover {
	color: #A2863E;
}

.dark-mode .return-find-to-room-list-meta h2:hover,
.dark-mode .return-find-to-room-list-meta h2 a:hover {
	color: #A2863E;
}

.return-find-to-room-list-meta-price {
	border-left: 1px solid #D4C7A6;
	padding-left: 16px;
	margin-bottom: 16px;
}

.return-find-to-room-list-meta-price-sell {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.dark-mode .return-find-to-room-list-meta-price-sell {
	color: #FFF;
}

.return-find-to-room-list-meta-price-night {
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%
}

.return-find-to-room-list-meta-price-regular {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.dark-mode .return-find-to-room-list-meta-price-regular {
	color: #FFF;
}

.return-find-to-room-list-meta-price-regular-price {
	color: #DB2B46;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	text-decoration: line-through;
}

.return-find-to-room-list-meta-price .regional-price {
	color: #A2863E;
	font-weight: 700;
	font-size: 14px;
	position: relative;
	top: -2px;
	display: inline-block;
}

.return-find-to-room-list-meta-description {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding-top: 16px;
	border-top: 1px solid #D4C7A6;
}

.dark-mode .return-find-to-room-list-meta-description {
	color: #FFF;
}

@media screen and (max-width: 768px) {
	.return-find-to-room-list-meta-description {
		display: none;
	}

}

.return-find-to-room-list-meta-icon-wrapper {
	display: flex;
	gap: 16px;
}

.return-find-to-room-list-meta-icon {
	width: 36px;
}

.return-find-to-room-list-overlay {
	display: none;
}

.return-find-to-room-list:hover .return-find-to-room-list-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 8px;
	background: rgba(246, 243, 236, 0.95);
	position: absolute;
	z-index: 1;
	padding: 24px 24px 50px 24px;
}

.dark-mode .return-find-to-room-list:hover .return-find-to-room-list-overlay {
	background: rgba(162, 134, 62, 0.95);
}


.return-find-to-room-list-overlay-title {
	width: 100%;
	text-align: center;
}

.return-find-to-room-list-overlay-title h3 {
	color: #302C2C;
	font-family: Playfair Display;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%;
	margin: 0;
	padding: 0;
}

.dark-mode .return-find-to-room-list-overlay-title h3 {
	color: #FFF;
}

.return-find-to-room-list-overlay-title h3::after {
	content: "";
	display: block;
	width: 20%;
	height: 1px;
	background: #A2863E;
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
}

.dark-mode .return-find-to-room-list-overlay-title h3::after {
	background: #FFF;
}

.return-find-to-room-list-overlay-facilities {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: row;
	gap: 16px;
	margin-bottom: 24px;
}

.return-find-to-room-list-overlay-facilities-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-direction: column;
	flex: 1;
	width: 100%;

}

.return-find-to-room-list-overlay-facilities-list-icon {
	width: auto;
	height: 60px;
}

@media screen and (max-width: 768px) {

	.return-find-to-room-list-overlay-facilities {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.return-find-to-room-list-overlay-facilities-list-icon {
		width: auto;
		height: 40px;
	}
}

.return-find-to-room-list-overlay-facilities-list-name {
	color: #302C2C;
	text-align: center;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.dark-mode .return-find-to-room-list-overlay-facilities-list-name {
	color: #FFF;
}

.return-find-to-room-list-overlay-description {
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.dark-mode .return-find-to-room-list-overlay-description {
	color: #FFF;
}

@media screen and (max-width: 768px) {
	.return-find-to-room-list-overlay-description {
		display: none;
	}
}

.return-find-to-room-list-overlay-description h4 {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	padding: 0;
	margin: 0 0 16px 0;
}

.dark-mode .return-find-to-room-list-overlay-description h4 {
	color: #FFF;
}

.return-find-to-room-list-overlay-description ul {
	list-style-position: outside;
}


.return-find-to-room-list-overlay-button-section {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 16px;
	text-align: right;
}

@media screen and (max-width: 768px) {
	.return-find-to-room-list-overlay-facilities-list-name {
		font-size: 14px;
	}

	.return-find-to-room-list-overlay-button-section {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
		text-align: center;
		flex-direction: column;
	}

	.return-find-to-room-list-overlay-button,
	.return-find-to-room-list-overlay-button-booking {
		display: block;
		width: 100%;
	}

}


.return-find-to-room-list-overlay-button {
	border-radius: 64px;
	border: 2px solid #B59E65;
	background: #FFF;
	box-shadow: 0px 0px 14px 0px #FFF;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding: 12px 24px;
}

.return-find-to-room-list-overlay-button:hover {
	background: #A2863E;
	box-shadow: 0px 0px 14px 0px #A2863E;
	color: #fff;
}

@media (max-width: 767px) {
	.return-find-to-room-list-overlay-button {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.return-find-to-room-list-overlay-button a {
		border-radius: 64px;
		border: 2px solid #B59E65;
		background: #FFF;
		box-shadow: 0px 0px 14px 0px #FFF;
		color: #A2863E;
		font-family: Montserrat;
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 150%;
		padding: 10px 18px;
	}
}


.return-find-to-room-list-overlay-button-booking {
	border-radius: 64px;
	border: 2px solid #A2863E;
	background: #A2863E;
	box-shadow: 0px 0px 14px 0px #A2863E, 0px 0px 14px 0px #A2863E inset;
	color: #FFF;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding: 12px 24px;
}

.dark-mode .return-find-to-room-list-overlay-button-booking {
	background: #FFF;
	box-shadow: 0px 0px 14px 0px #FFF, 0px 0px 14px 0px #FFF inset;
	color: #A2863E;
}

.return-find-to-room-list-overlay-button-booking:hover {
	border: 2px solid #B59E65;
	background: #FFF;
	box-shadow: 0px 0px 14px 0px #FFF;
	color: #A2863E;
}

.dark-mode .return-find-to-room-list-overlay-button-booking:hover {
	background: #A2863E;
	box-shadow: 0px 0px 14px 0px #A2863E;
	color: #fff;
}


@media (max-width: 767px) {
	.card-room.slick-slider .slick-list {
		padding: 0 15% 0 0 !important;
		margin: 0 -10px;
	}

	.card-room.slick-slider .slick-slide {
		padding: 0 0px;
		margin: 0 10px;
	}

	.card-room.slick-slider ul.slick-dots {
		list-style: none;
		display: flex;
		justify-content: center;
		padding: 0px 0 0;
		column-gap: 10px;
		margin: 10px 0 0;
		bottom: 0;
		position: relative;
		padding-top: 5px;
	}

	.card-room.slick-slider ul.slick-dots li button {
		font-size: 0;
		border: 0;
		background-color: #A2863E;
		width: 100%;
		border-radius: 3px;
		padding: 0 !important;
		height: 4px;
		line-height: 0;
		margin: 0;
	}

	.card-room.slick-slider .slick-dots li {
		width: 25px;
		height: auto;
		line-height: 0;
		padding: 0px;
		margin: 0px;
	}

	.card-room.slick-slider .slick-dots li.slick-active button {
		background-color: #ccc
	}

	.card-room-list .card-room-list-img {
		margin: 0;
	}
}

.availability-room-form {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 128px;
}

.availability-room-form .daterangepicker.opensright:before,
.availability-room-form .daterangepicker.opensright:after {
	display: none;
}

.availability-room-form .daterangepicker .input-mini {
	display: none;
}

.availability-room-form .daterangepicker {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 64px !important;
	width: auto !important;
}


.availability-room-form .daterangepicker .calendar {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	max-width: 300px;
}

@media screen and (max-width: 768px) {
	.availability-room-form .daterangepicker {
		display: block;
		width: 100%;
		left: 0;
	}

	.availability-room-form .daterangepicker .calendar {
		max-width: 100% !important;
	}

}

.calendar .month {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}

.availability-room-form .daterangepicker .calendar th,
.availability-room-form .daterangepicker .calendar td {
	white-space: nowrap;
	text-align: center;
	min-width: 40px;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	color: #302C2C;
}

.availability-room-form .daterangepicker .calendar td.off {
	color: #D4C7A6;
}

.availability-room-form .daterangepicker td.active,
.availability-room-form .daterangepicker td.active:hover {
	background-color: #A2863E;
	border-color: transparent;
	color: #fff !important;
	border-radius: 4px;
}

.availability-room-form .daterangepicker td.in-range {
	border-color: transparent;
	color: #735F2C !important;
	border-radius: 4px;
	background: #F6F3EC;
}

.availability-room-form .daterangepicker td.end-date {
	background-color: #A2863E;
	border-color: transparent;
	color: #fff !important;
	border-radius: 4px;
}

.fa-chevron-left {
	display: flex;
	width: 32px !important;
	height: 32px !important;
	justify-content: center;
	align-items: center;
	border-radius: 32px !important;
	color: #A2863E;
	padding: 0 !important;
	background: url('https://api.iconify.design/fluent/arrow-left-12-filled.svg?color=%23a2863e&width=16') no-repeat center center / 18px, #d5c8a9;
}

.dark-mode .fa-chevron-left {
	background: url('https://api.iconify.design/fluent/arrow-left-12-filled.svg?color=%23a2863e&width=16') no-repeat center center / 18px, rgba(162, 134, 62, 0.5);
	color: #A2863E;
}

.fa-chevron-right {
	display: flex;
	width: 32px !important;
	height: 32px !important;
	justify-content: center;
	align-items: center;
	border-radius: 32px !important;
	color: #A2863E;
	padding: 0 !important;
	background: url('https://api.iconify.design/fluent/arrow-right-12-filled.svg?color=%23a2863e&width=16') no-repeat center center / 18px, #d5c8a9;
}

.dark-mode .fa-chevron-right {
	background: url('https://api.iconify.design/fluent/arrow-right-12-filled.svg?color=%23a2863e&width=16') no-repeat center center / 18px, rgba(162, 134, 62, 0.5);
	color: #A2863E;
}


.return-find-to-room-list-empty {
	width: 100%;
	position: relative;
}

.return-find-to-room-list-empty-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	position: absolute;
	z-index: 1;
	background: rgba(89, 74, 34, 0.7);
}

.return-find-to-room-list-empty-overlay span {
	font-family: Playfair Display;
	color: #FFF;
	text-align: center;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	display: flex;
	align-items: center;
	gap: 8px;
}

.modal-form-reservation {
	display: none;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
}

.modal-form-reservation-content {
	border-radius: 8px;
	background: #FFF;
	margin: 5% auto;
	padding: 64px;
	border: 1px solid #888;
	width: 872px;
}

.dark-mode .modal-form-reservation-content {
	background: #302C2C;
	border-color: #302C2C;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-content {
		width: 94%;
		padding: 20px;
		border-radius: 8px;
		margin: 3%;
	}

}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.modal-form-reservation-content-title {
	text-align: center;
	color: #302C2C;
	font-family: Playfair Display;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin: 0 0 16px 0;
	padding: 0;
}

.dark-mode .modal-form-reservation-content-title {
	color: #FFF;
}

.modal-form-reservation-content-desc {
	color: #302C2C;
	text-align: center;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	margin: 0 0 24px 0;
	padding: 0;
}

.dark-mode .modal-form-reservation-content-desc {
	color: #FFF;
}

/* .modal-form-reservation-content-desc:after {
	content: '';
	display: block;
	width: 160px;
	height: 1px;
	background: #A2863E;
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
} */

.modal-form-reservation-content-layout {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-content-layout {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column-reverse;
		gap: 24px;
	}
}

.modal-form-reservation-content-layout-left {
	width: 50%;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-content-layout-left {
		width: 100%;
	}

}

.modal-form-reservation-content-layout-left h5 {
	color: #302C2C;
	font-family: Playfair Display;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%;
	margin: 0;
	padding: 0;
}

.modal-form-reservation-content-layout-left p {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	margin: 16px 0 32px 0;
	padding: 0;
}

.modal-form-reservation-form {
	width: 100%;
	color: #302C2C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	position: relative;
	margin: 0 0 24px 0;
}

/* Material Design Input Styles */
.modal-form-reservation-material-input {
	position: relative;
	margin-bottom: 24px;
	overflow: visible;
}

.modal-form-reservation-input-wrapper {
	position: relative;
	width: 100%;
}

.modal-form-reservation-material-label {
	position: absolute;
	left: 0.75rem;
	top: 1rem;
	font-size: 1rem;
	color: #999;
	font-weight: normal;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: left top;
	background: transparent;
	padding: 0 0.25rem;
	margin-left: -0.25rem;
	font-family: Montserrat;
}

/* Textarea label - different top position */
.modal-form-reservation-textarea-label,
.modal-form-reservation-input-wrapper .modal-form-reservation-textarea-label,
.modal-form-reservation-material-input .modal-form-reservation-textarea-label {
	top: 15px !important;
	transform: none !important;
}

.modal-form-reservation-material-label .required {
	color: #dc3545;
}

/* Material Design Input Styles */
.modal-form-reservation-input {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: #FFF;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.3s ease;
}

/* Scoped to modal-form-reservation to avoid conflicts with other blocks */
#modal-form-reservation .inputText.modal-form-reservation-input,
.modal-form-reservation-form .inputText.modal-form-reservation-input,
.modal-form-reservation-input.modal-form-reservation-select {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: #FFF;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.3s ease;
}

.modal-form-reservation-input:focus {
	outline: none;
	border-color: #A2863E;
}

.modal-form-reservation-input:focus~.modal-form-reservation-input-underline {
	display: none;
}

.modal-form-reservation-input.error {
	border-color: #dc3545;
}

.modal-form-reservation-input.error~.modal-form-reservation-input-underline {
	background-color: #dc3545;
	width: 100%;
}

.modal-form-reservation-input:focus~.modal-form-reservation-material-label,
.modal-form-reservation-input:not(:placeholder-shown)~.modal-form-reservation-material-label {
	top: 0;
	left: 0;
	font-size: 12px;
	color: #a2863e;
	padding: 0 3px;
	margin-left: 14px;
	background: #ffffff;
	font-weight: 600;
	line-height: 150%;
}

.modal-form-reservation-input:focus~.modal-form-reservation-material-label .required,
.modal-form-reservation-input:not(:placeholder-shown)~.modal-form-reservation-material-label .required {
	color: #dc3545;
}

/* Error state - red label and border */
.modal-form-reservation-input.error~.modal-form-reservation-material-label,
.modal-form-reservation-input.error:focus~.modal-form-reservation-material-label,
.modal-form-reservation-input.error:not(:placeholder-shown)~.modal-form-reservation-material-label {
	color: #dc3545;
}

.modal-form-reservation-input.error~.modal-form-reservation-material-label .required,
.modal-form-reservation-input.error:focus~.modal-form-reservation-material-label .required,
.modal-form-reservation-input.error:not(:placeholder-shown)~.modal-form-reservation-material-label .required {
	color: #dc3545;
}

.modal-form-reservation-input-underline {
	display: none;
}

/* Error Message */
.modal-form-reservation-error-message {
	color: #dc3545;
	font-size: 0.85rem;
	display: none;
	margin-top: 4px;
	font-family: Montserrat;
	font-weight: 500;
	line-height: 1.4;
}

.modal-form-reservation-error-message.show {
	display: block;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Dark Mode Support */
.dark-mode .modal-form-reservation-material-label {
	color: #999;
}

.dark-mode .modal-form-reservation-input:focus~.modal-form-reservation-material-label,
.dark-mode .modal-form-reservation-input:not(:placeholder-shown)~.modal-form-reservation-material-label {
	top: 0;
	left: 0;
	font-size: 12px;
	background: #FFF;
	color: #a2863e;
	padding: 0 3px;
	margin-left: 14px;
	font-weight: 600;
	line-height: 150%;
}

.dark-mode .modal-form-reservation-input {
	background: #1e1e1e;
	border-color: #A2863E;
	color: #fff;
}

.dark-mode .modal-form-reservation-select {
	background-color: #1e1e1e;
	border-color: #A2863E;
	color: #fff;
}

.dark-mode .modal-form-reservation-textarea {
	background-color: #1e1e1e;
	border-color: #A2863E;
	color: #fff;
}

.dark-mode .modal-form-reservation-textarea:focus~.modal-form-reservation-material-label,
.dark-mode .modal-form-reservation-textarea:not(:placeholder-shown)~.modal-form-reservation-material-label {
	background: linear-gradient(0deg, rgba(30, 30, 30, 1) 48%, rgba(40, 40, 40, 1) 52%);
}

.dark-mode .modal-form-reservation-input:focus {
	border-color: #A2863E;
}

.dark-mode .modal-form-reservation-input.error {
	border-color: #dc3545;
}

/* Error styling for select and checkbox */
#modal-form-reservation .inputSelect.error,
#modal-form-reservation .modal-form-reservation-select.error,
#modal-form-reservation #room_type.error,
#modal-form-reservation #total_room.error {
	border-color: #dc3545;
}

.modal-form-reservation-form-checkbox.error {
	border: 1px solid #dc3545;
	border-radius: 4px;
	padding: 8px;
}


.modal-form-reservation-form-text-area {
	width: 100%;
	color: #302C2C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	position: relative;
	margin: 0 0 24px 0;
}

/* Textarea styling with material design */
.modal-form-reservation-textarea {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: #FFF;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.3s ease;
	resize: vertical;
	min-height: 100px;
}

.modal-form-reservation-textarea:focus {
	outline: none;
	border-color: #A2863E;
}

.modal-form-reservation-textarea:focus~.modal-form-reservation-input-underline {
	display: none;
}

.modal-form-reservation-textarea.error {
	border-color: #dc3545;
}

/* Textarea with value - move label up */
.modal-form-reservation-textarea:focus~.modal-form-reservation-material-label,
.modal-form-reservation-textarea:not(:placeholder-shown)~.modal-form-reservation-material-label,
.modal-form-reservation-textarea:focus~.modal-form-reservation-textarea-label,
.modal-form-reservation-textarea:not(:placeholder-shown)~.modal-form-reservation-textarea-label {
	top: -10px !important;
	left: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 150%;
	padding: 0 3px;
	margin-left: 14px;
	background: #ffffff;
	color: #A2863E;
	transform: none !important;
}

/* Scoped to modal-form-reservation to avoid conflicts with other blocks */
#modal-form-reservation .inputTextArea,
.modal-form-reservation-form-text-area .inputTextArea {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: transparent;
}


.modal-form-reservation-form-text-area label {
	position: absolute;
	top: 20%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: top 0.2s;
	color: #302C2C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	left: 16px;
}

/* Override for textarea label with specific class */
.modal-form-reservation-form-text-area .modal-form-reservation-textarea-label,
.modal-form-reservation-input-wrapper .modal-form-reservation-textarea-label {
	top: 15px !important;
	transform: none !important;
}

/* Scoped to modal-form-reservation to avoid conflicts with other blocks */
#modal-form-reservation .modal-form-reservation-form input.inputText:focus,
#modal-form-reservation .modal-form-reservation-form select.inputSelect:focus,
#modal-form-reservation .modal-form-reservation-form-text-area textarea.inputTextArea:focus,
.modal-form-reservation-form input.inputText:focus,
.modal-form-reservation-form select.inputSelect:focus,
.modal-form-reservation-form-text-area textarea.inputTextArea:focus {
	border: 1px solid #A2863E;
	outline: #A2863E;
	background-color: #FFF;
}

.modal-form-reservation-form-text-area label.has-value {
	top: 0px;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	background: #FFF !important;
	padding: 5px;
	z-index: 1;
}

.dark-mode .modal-form-reservation-form-text-area label.has-value {
	color: #FFF;
	background: #302C2C !important;
}

/* Scoped to modal-form-reservation to avoid conflicts with other blocks */
#modal-form-reservation .inputSelect,
.modal-form-reservation-form .inputSelect {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: transparent;
}

/* Select dropdown styling with material design */
.modal-form-reservation-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A2863E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 40px;
	cursor: pointer;
}

.modal-form-reservation-select:focus {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A2863E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.modal-form-reservation-select.error {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Select with value - move label up */
.modal-form-reservation-select.has-value~.modal-form-reservation-material-label,
.modal-form-reservation-input-wrapper.has-value .modal-form-reservation-material-label {
	top: 0;
	left: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 150%;
	padding: 0 3px;
	margin-left: 14px;
	background: #ffffff;
	color: #A2863E;
}

.modal-form-reservation-select:focus~.modal-form-reservation-material-label {
	top: 0;
	left: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 150%;
	padding: 0 3px;
	margin-left: 14px;
	background: #ffffff;
	color: #A2863E;
}

.dark-mode .modal-form-reservation-select {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A2863E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark-mode .modal-form-reservation-select:focus~.modal-form-reservation-material-label,
.dark-mode .modal-form-reservation-input-wrapper.has-value .modal-form-reservation-material-label {
	background: linear-gradient(0deg, rgba(30, 30, 30, 1) 48%, rgba(40, 40, 40, 1) 52%);
}


.modal-form-reservation-content-layout-right {
	width: 50%;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-content-layout-right {
		width: 100%;
	}
}

.modal-form-reservation-content-room-detail {
	position: relative;
	width: 100%;
	border-radius: 8px;
	background: #FFF;
	box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-webkit-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-moz-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
}

.modal-form-reservation-content-room-detail-img {
	width: 100%;

}

.modal-form-reservation-content-room-detail-img img {
	width: 100%;
	background: #D9D9D9;
	-webkit-border-top-left-radius: 64px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 64px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 64px;
	border-top-right-radius: 8px;
	padding: 0;
	margin: 0 0 -5px 0;
}

.modal-form-reservation-content-room-detail-cta {
	width: 100%;
	margin: 0 0 -5px 0;
}

.modal-form-reservation-content-room-detail-cta img {
	max-width: 100%;
}


.modal-form-reservation-content-room-detail-meta {
	width: 100%;
	padding: 24px 16px;
}

.modal-form-reservation-content-room-detail-meta h2 {
	font-family: Montserrat;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	padding: 0;
	margin: 0 0 16px 0;
}

.modal-form-reservation-content-room-detail-meta h2,
.modal-form-reservation-content-room-detail-meta h2 a {
	color: #302C2C;
}

.dark-mode .modal-form-reservation-content-room-detail-meta h2,
.dark-mode .modal-form-reservation-content-room-detail-meta h2 a {
	color: #FFF;
}

.modal-form-reservation-content-room-detail-meta h2:hover,
.modal-form-reservation-content-room-detail-meta h2 a:hover {
	color: #A2863E;
}

.dark-mode .modal-form-reservation-content-room-detail-meta h2:hover,
.dark-mode .modal-form-reservation-content-room-detail-meta h2 a:hover {
	color: #A2863E;
}

.modal-form-reservation-content-room-detail-meta-price {
	border-left: 1px solid #D4C7A6;
	padding-left: 16px;
	margin-bottom: 16px;
}

.modal-form-reservation-content-room-detail-meta-price-sell {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.dark-mode .modal-form-reservation-content-room-detail-meta-price-sell {
	color: #FFF;
}

.modal-form-reservation-content-room-detail-meta-price-night {
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%
}

.modal-form-reservation-content-room-detail-meta-price-regular {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.dark-mode .modal-form-reservation-content-room-detail-meta-price-regular {
	color: #FFF;
}

.modal-form-reservation-content-room-detail-meta-price-regular-price {
	color: #DB2B46;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	text-decoration: line-through;
}

.modal-form-reservation-content-room-detail-meta-description {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	padding-top: 16px;
	border-top: 1px solid #D4C7A6;
}

.dark-mode .modal-form-reservation-content-room-detail-meta-description {
	color: #FFF;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-content-room-detail-meta-description {
		display: none;
	}

}

.modal-form-reservation-content-room-detail-meta-icon-wrapper {
	display: flex;
	gap: 16px;
}

.modal-form-reservation-content-room-detail-meta-icon {
	width: 36px;
}

.modal-form-reservation-content-room-detail-include {
	padding: 16px;
	border-radius: 10px;
	background: #F6F3EC;
	margin-top: 16px;
}

.dark-mode .modal-form-reservation-content-room-detail-include {
	background: #A2863E;
}

.modal-form-reservation-content-room-detail-include h5 {
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	color: #302C2C;
	margin: 0 0 16px 0;
	padding: 0;
	text-transform: uppercase;
}

.dark-mode .modal-form-reservation-content-room-detail-include h5 {
	color: #FFF;
}

.modal-form-reservation-content-room-detail-include ul {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	gap: 5px;
}

.modal-form-reservation-content-room-detail-include li {
	width: 100%;
	padding-left: 25px;
	background: url('https://api.iconify.design/gg/check-o.svg?color=%23a2863e') no-repeat left top;
	background-size: 20px;
	line-height: 24px;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}

.dark-mode .modal-form-reservation-content-room-detail-include li {
	background: url('https://api.iconify.design/gg/check-o.svg?color=white') no-repeat left top;
	color: #FFF;
}

.modal-form-reservation-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 16px;
	overflow: visible;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-form-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: 2fr;
		grid-column-gap: 16px;
	}

}

.modal-form-reservation-submit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px
}

.modal-form-reservation-submit .btn-cancel {
	display: flex;
	padding: 12px 24px;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 8px;
	border-radius: 64px;
	border: 2px solid #B59E65;
	background: #FFF;
	box-shadow: 0px 0px 14px 0px #FFF;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	cursor: pointer;
}

.modal-form-reservation-submit .btn-submit {
	border-radius: 64px;
	border: 1px solid #B59E65;
	background: #A2863E;
	box-shadow: 0px 0px 14px 0px #A2863E inset;
	display: flex;
	padding: 12px 24px;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 8px;
	color: #FFF;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	cursor: pointer;
}

.modal-form-reservation-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
	margin-bottom: 40px;
}

/* Voucher Code Section - New Design */
.modal-form-reservation-voucher-container {
	position: relative;
	margin-bottom: 24px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid #D4C5A0;
	background: #F6F3EC;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
}

.modal-form-reservation-voucher-label {
	position: absolute;
	top: -10px;
	left: 16px;
	background: #F6F3EC;
	padding: 0 8px;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	z-index: 1;
}

/* Voucher group - flex container for input and button */
.modal-form-reservation-voucher-group {
	display: flex;
	align-items: center;
	gap: 0px;
	flex-wrap: nowrap;
}

.modal-form-reservation-voucher-input-wrapper {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
}

.modal-form-reservation-voucher-input {
	width: 100%;
	padding: 0px 5px;
	border: none;
	border-radius: 0px;
	outline: none;
	transition: all 0.3s ease;
	background: transparent !important;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

/* Ensure background stays transparent in all states */
.modal-form-reservation-voucher-input:focus,
.modal-form-reservation-voucher-input:not(:placeholder-shown),
.modal-form-reservation-voucher-input:-webkit-autofill,
.modal-form-reservation-voucher-input:-webkit-autofill:hover,
.modal-form-reservation-voucher-input:-webkit-autofill:focus,
.modal-form-reservation-voucher-input:-webkit-autofill:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	-webkit-box-shadow: 0 0 0 30px transparent inset !important;
	-webkit-text-fill-color: #302C2C !important;
}

/* Adjust padding when checkmark is visible */
.modal-form-reservation-voucher-input-wrapper:has(.voucher-icon-check) .modal-form-reservation-voucher-input {
	padding-right: 45px;
}


.modal-form-reservation-voucher-input::placeholder {
	color: #8a6f35;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	font-family: Montserrat;
}

/* Voucher icon - checkmark */
.modal-form-reservation-voucher-input-wrapper .voucher-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	z-index: 10;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: all 0.3s ease;
	z-index: 10;
	cursor: pointer;
}

/* Check Voucher button styling */
.modal-form-reservation-voucher-check-btn {
	border-radius: 64px;
	border: 2px solid #B59E65;
	background: #FFF;
	box-shadow: 0 0 14px 0 #FFF;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	flex-shrink: 0;
	height: fit-content;
}

.modal-form-reservation-voucher-check-btn:hover {
	background: #E8DFC8;
	border-color: #A2863E;
}

.modal-form-reservation-voucher-check-btn:active {
	transform: scale(0.98);
}

/* Legacy class for backward compatibility */
.modal-form-reservation-voucher-verify-btn {
	border-radius: 8px;
	border: 1px solid #D4C5A0;
	background: #F6F3EC;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	padding: 12px 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	flex-shrink: 0;
	height: fit-content;
}

.modal-form-reservation-voucher-verify-btn:hover {
	background: #A2863E !important;
	border-color: #A2863E !important;
	color: #FFF;
}

.voucher-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.voucher-icon-check {
	color: #A2863E;
	cursor: default;
	pointer-events: none;
}

.voucher-icon-error {
	color: #dc3545;
	cursor: pointer;
	pointer-events: auto;
}

.voucher-icon-error svg,
.voucher-icon-error path {
	pointer-events: none;
}

.voucher-icon:not(.voucher-icon-check):not(.voucher-icon-error) {
	display: none;
}

/* Show checkmark when voucher is valid */
.modal-form-reservation-voucher-input-wrapper .voucher-icon-check {
	display: flex;
}


.modal-form-reservation-form-voucher-message {
	width: 100%;
}

.modal-form-reservation-form-voucher-message .voucher-success {
	color: #28a745;
	display: block;	margin-top: -20px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.modal-form-reservation-form-voucher-message .voucher-error {
	color: #dc3545;
	display: block;	margin-top: -20px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Dark mode support for voucher container */
.dark-mode .modal-form-reservation-voucher-container {
	background: #2a2a2a;
	border-color: #4a4a4a;
}

.dark-mode .modal-form-reservation-voucher-label {
	background: #2a2a2a;
	color: #A2863E;
}

.dark-mode .modal-form-reservation-voucher-input {
	background: #1a1a1a;
	border-color: #4a4a4a;
	color: #fff;
}

.dark-mode .modal-form-reservation-voucher-input:focus {
	border-color: #A2863E;
}

.dark-mode .modal-form-reservation-voucher-input::placeholder {
	color: #888;
}

.dark-mode .modal-form-reservation-voucher-check-btn,
.dark-mode .modal-form-reservation-voucher-verify-btn {
	background: #2a2a2a;
	border-color: #4a4a4a;
	color: #A2863E;
}

.dark-mode .modal-form-reservation-voucher-check-btn:hover,
.dark-mode .modal-form-reservation-voucher-verify-btn:hover {
	background: #3a3a3a;
	border-color: #A2863E;
}

.dark-mode .voucher-icon-check {
	color: #A2863E;
}

/* Total Price */
.total-price-value {
	font-family: Montserrat;
	font-weight: 600;
	color: #333;
}

.dark-mode .total-price-value {
	color: #fff;
}

.modal-form-reservation-form-room-rate {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	border-radius: 6px;
	border: 1px solid #A2863E;
	background: #F6F3EC;
	margin-bottom: 5px;
	padding: 8px 15px 15px 15px;
}

.modal-form-reservation-form-room-rate legend {
	color: #A2863E;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}


.hugeicons--flash {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23A2863E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5.226 11.33l6.998-8.983c.547-.703 1.573-.266 1.573.67V9.97c0 .56.402 1.015.899 1.015H18.1c.773 0 1.185 1.03.674 1.686l-6.998 8.983c-.547.702-1.573.265-1.573-.671V14.03c0-.56-.403-1.015-.899-1.015H5.9c-.773 0-1.185-1.03-.674-1.686' color='%23A2863E'/%3E%3C/svg%3E");
}


.modal-form-reservation-form-room-rate-price-sell {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.dark-mode .modal-form-reservation-form-room-rate-price-sell {
	color: #FFF;
}

.modal-form-reservation-form-room-rate-price-regular {
	color: #DB2B46;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	text-decoration-line: line-through;
}

.dark-mode .modal-form-reservation-form-room-rate-price-regular {
	color: #DB2B46;
}

.modal-form-reservation-form-room-rate-icon {
	width: 24px;
	height: 24px;
}

.modal-form-reservation-form-special {
	width: 100%;
	color: #16901D;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	margin-bottom: 24px;
}

.modal-form-reservation-form-total-price {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	border-radius: 6px;
	border: 1px solid #A2863E;
	background: #F6F3EC;
	margin-bottom: 24px;
	padding: 8px 15px 15px 15px;
}

@media screen and (max-width: 768px) {
	.modal-form-reservation-form-total-price {
		margin-top: 20px;
	}
}

.modal-form-reservation-form-total-price legend {
	color: #A2863E;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
}

.modal-form-reservation-form-total-price-price {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.modal-form-reservation-form-total-price-price-sell {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.dark-mode .modal-form-reservation-form-total-price-price-sell {
	color: #FFF;
}

.modal-form-reservation-form-total-price-price-regular {
	color: #DB2B46;
	font-family: Montserrat;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	text-decoration-line: line-through;
}

.dark-mode .modal-form-reservation-form-total-price-price-regular {
	color: #DB2B46;
}

/* Legacy class for backward compatibility */
.modal-form-reservation-form-total-price-nominal {
	color: #735F2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.modal-form-reservation-loading {
	width: 100%;
	height: 100vh;
	background-color: #F6F3EC;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A2863E;
	font-family: Montserrat;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-webkit-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
	-moz-box-shadow: 0px 30px 70px 0px rgba(89, 74, 34, 0.10);
}

.modal-form-reservation-form-relative {
	position: relative;

}

/* Material Design Guest Button - List Room Block */
.list-room-guest-button {
	width: 100%;
	height: 58px;
	border: 1px solid #A2863E;
	border-radius: 6px;
	padding: 16px 12px 8px 12px;
	background-color: transparent;
	cursor: pointer;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	color: #302C2C;
	text-align: left;
	position: relative;
	transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}

.list-room-guest-button:hover {
	border-color: #8a6f35;
}

.list-room-guest-button:focus {
	border-color: #A2863E;
}

.list-room-guest-button[aria-expanded="true"] {
	border-color: #A2863E;
}

.list-room-guest-text {
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	display: block;
	width: 100%;
}

/* Material label for guest button - Default to focused state */
.modal-form-reservation-input-wrapper:has(.list-room-guest-button) .modal-form-reservation-material-label {
	position: absolute;
	top: -2px;
	left: 10px;
	font-size: 0.75rem;
	color: #a2863e;
	padding: 0 3px;
	margin-left: 4px;
	background: #ffffff;
	font-weight: 600;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.modal-form-reservation-material-input.has-value .modal-form-reservation-input-wrapper:has(.list-room-guest-button) .modal-form-reservation-material-label,
.list-room-guest-button:focus~.modal-form-reservation-material-label,
.list-room-guest-button[aria-expanded="true"]~.modal-form-reservation-material-label {
	top: -2px;
	left: 10px;
	font-size: 0.75rem;
	color: #a2863e;
	padding: 0 3px;
	margin-left: 4px;
	background: #ffffff;
	font-weight: 600;
}

/* Dark mode for guest button */
.dark-mode .list-room-guest-button {
	background: #1e1e1e;
	border-color: #A2863E;
	color: #fff;
}

.dark-mode .list-room-guest-button:focus {
	border-color: #A2863E;
}

.dark-mode .modal-form-reservation-input-wrapper:has(.list-room-guest-button) .modal-form-reservation-material-label {
	color: #a2863e;
	background: linear-gradient(0deg, rgba(30, 30, 30, 1) 48%, rgba(40, 40, 40, 1) 52%);
}

.dark-mode .modal-form-reservation-material-input.has-value .modal-form-reservation-input-wrapper:has(.list-room-guest-button) .modal-form-reservation-material-label,
.dark-mode .list-room-guest-button:focus~.modal-form-reservation-material-label,
.dark-mode .list-room-guest-button[aria-expanded="true"]~.modal-form-reservation-material-label {
	background: linear-gradient(0deg, rgba(30, 30, 30, 1) 48%, rgba(40, 40, 40, 1) 52%);
	color: #a2863e;
}

.list-room-guest-dropdown-hide {
	width: 100%;
	padding: 0px;
	position: relative;
	z-index: 10;
	overflow: visible;
}

.list-room-guest-dropdown {
	width: 100%;
	z-index: 1000;
	position: absolute;
	background-color: #FFF;
	left: 0;
	right: 0;
	top: 100%;
	border: 1px solid #ddd;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.list-room-guest-dropdown:before {
	top: -7px;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	position: absolute;
	display: inline-block;
	content: '';
	margin-left: 75%;
	margin-right: 25%;
}

.list-room-guest-dropdown:after {
	top: -6px;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #fff;
	border-left: 7px solid transparent;
	position: absolute;
	display: inline-block;
	content: '';
	margin-left: 75%;
	margin-right: 25%;
}

.list-room-guest-dropdown-section {
	width: 100%;
	border-bottom: 1px solid #ddd;
	padding: 5px;
}

.list-room-guest-dropdown-section:last-child {
	width: 100%;
	border-bottom: 0;
}

.list-room-guest-dropdown .form-dropdown {
	width: 100%;
	border: none;
	padding: 5px;
	background-color: #FFF;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	border: none;
}

/* Success Modal */
.modal-reservation-success {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	box-sizing: border-box;
}

.modal-reservation-success-content {
	max-width: 872px;
	width: 100%;
	background: #fff;
	border-radius: 12px;
	padding: 40px;
	position: relative;
}

.modal-reservation-success-header {
	margin-bottom: 40px;
}

.modal-reservation-success-title {
	font-family: "Playfair Display", serif;
	font-size: 32px;
	font-weight: 500;
	color: #302C2C;
	margin: 0 0 16px 0;
	padding: 0;
	text-align: center;
}

.modal-reservation-success-desc {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	color: #666;
	margin: 0 0 24px 0;
	padding: 0;
	text-align: center;
}

.modal-reservation-success-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
}

.progress-step {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}

.progress-step-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	transition: all 0.3s ease;
	border: 1px solid #A2863E;
}

.progress-step.uncompleted .progress-step-number {
	color: #A2863E;
	background: #FFF;
}

.progress-step.completed .progress-step-circle {
	background: #F6F3EC;
	color: #A2863E;
	border-color: #E2D9C3;
}

.progress-step.active .progress-step-circle {
	border: 1px solid #E2D9C3;
	background: linear-gradient(134deg, #DAC37B 14.66%, #A2863E 83.73%);
	color: #fff;
}

.progress-step-number {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.progress-step svg {
	width: 16px;
	height: 16px;
}

.progress-step-label {
	font-family: "Montserrat", sans-serif;
	color: #302C2C;
	font-weight: 500;
	font-size: 16px;
	font-style: normal;
	line-height: 150%;
}

.progress-step.completed .progress-step-label {
	color: #302C2C;
	font-weight: 500;
}

.progress-step.active .progress-step-label {
	color: #302C2C;
	font-weight: 700;
}

.progress-step-line {
	width: 40px;
	height: 2px;
	background: #E2D9C3;
}

.modal-reservation-success-card {
	background: #fff;
	overflow: hidden;
	padding: 12px 12px 24px 12px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.00);
	background: rgba(255, 255, 255, 0.90);
	box-shadow: 0 30px 54px 0 rgba(63, 50, 16, 0.10);
	backdrop-filter: blur(4px);
	margin-bottom: 40px;
}

.modal-reservation-success-card-top {
	position: relative;
	width: 100%;
}

.modal-reservation-success-card-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modal-reservation-success-card-bottom {
	padding-top: 24px;
	text-align: center;
}

.modal-reservation-success-heading {
	font-family: "Playfair Display", serif;
	font-size: 32px;
	font-weight: 500;
	color: #302C2C;
	margin: 0 0 8px 0;
	padding: 0;
}

.modal-reservation-success-message {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	color: #666;
	line-height: 150%;
	margin: 0 0 0px 0;
	padding: 0;
}

.modal-reservation-success-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-manage-booking,
.btn-explore-rooms {
	padding: 12px 24px;
	border-radius: 64px;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	display: inline-block;
	min-width: 180px;
	text-align: center;
}

.btn-manage-booking {
	background: #fff;
	border: 2px solid #B59E65;
	color: #A2863E;
}

.btn-manage-booking:hover {
	background: #A2863E;
	color: #fff;
}

.btn-explore-rooms {
	background: #A2863E;
	border: 2px solid #A2863E;
	color: #fff;
}

.btn-explore-rooms:hover {
	background: #8a6f33;
	border-color: #8a6f33;
}

/* Dark Mode Support */
.dark-mode .modal-reservation-success-content {
	background: #1e1e1e;
}

.dark-mode .modal-reservation-success-title {
	color: #fff;
}

.dark-mode .modal-reservation-success-desc {
	color: #ccc;
}

.dark-mode .modal-reservation-success-card {
	background: #2a2a2a;
}

.dark-mode .modal-reservation-success-card-top {
	background: #2a2a2a;
}

.dark-mode .modal-reservation-success-heading {
	color: #fff;
}

.dark-mode .modal-reservation-success-message {
	color: #ccc;
}

.dark-mode .progress-step-label {
	color: #999;
}

.dark-mode .progress-step.completed .progress-step-label,
.dark-mode .progress-step.active .progress-step-label {
	color: #A2863E;
}

.dark-mode .btn-manage-booking {
	background: #2a2a2a;
	border-color: #B59E65;
	color: #A2863E;
}

.dark-mode .btn-manage-booking:hover {
	background: #A2863E;
	color: #fff;
}

/* Responsive */
@media screen and (max-width: 768px) {
	.modal-reservation-success {
		padding: 16px;
	}

	.modal-reservation-success-content {
		padding: 20px;
		max-width: 100%;
	}

	.modal-reservation-success-header {
		margin-bottom: 24px;
	}

	.modal-reservation-success-title {
		font-size: 20px;
		margin-bottom: 12px;
	}

	.modal-reservation-success-desc {
		font-size: 12px;
		margin-bottom: 16px;
	}

	.modal-reservation-success-progress {
		gap: 5px;
		flex-wrap: nowrap;
	}

	.progress-step {
		gap: 4px;
	}

	.progress-step-circle {
		width: 20px;
		height: 20px;
	}

	.progress-step svg {
		width: 12px;
		height: 12px;
	}

	.progress-step-number {
		font-size: 12px;
	}

	.progress-step-label {
		font-size: 10px;
		white-space: nowrap;
	}

	.progress-step-line {
		width: 20px;
		height: 1px;
	}

	.modal-reservation-success-card {
		padding: 8px 8px 16px 8px;
		margin-bottom: 24px;
		border-radius: 12px;
	}

	.modal-reservation-success-card-top {
		padding: 0;
		min-height: auto;
	}

	.modal-reservation-success-card-top img {
		width: 100%;
		height: auto;
		border-radius: 8px;
	}

	.modal-reservation-success-card-bottom {
		padding-top: 16px;
	}

	.modal-reservation-success-heading {
		font-size: 20px;
		margin-bottom: 8px;
	}

	.modal-reservation-success-message {
		font-size: 14px;
		line-height: 140%;
	}

	.modal-reservation-success-actions {
		flex-direction: column;
		gap: 12px;
	}

	.btn-manage-booking,
	.btn-explore-rooms {
		width: 100%;
		min-width: auto;
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Dark mode mobile adjustments */
	.dark-mode .modal-reservation-success-content {
		padding: 20px;
	}

	.dark-mode .modal-reservation-success-card {
		padding: 8px 8px 16px 8px;
	}

	.modal-reservation-success-message br {
		display: none;
	}
}

/* Error Modal */
.modal-reservation-error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	box-sizing: border-box;
}

.modal-reservation-error-content {
	max-width: 500px;
	width: 100%;
	background: #fff;
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	text-align: center;
}

.modal-reservation-error-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #dc3545;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin: 0 auto 24px;
}

.modal-reservation-error-icon svg {
	width: 48px;
	height: 48px;
}

.modal-reservation-error-heading {
	font-family: "Playfair Display", serif;
	font-size: 28px;
	font-weight: 500;
	color: #302C2C;
	margin: 0 0 16px 0;
	padding: 0;
}

.modal-reservation-error-message {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin: 0 0 32px 0;
	padding: 0;
}

.modal-reservation-error-actions {
	display: flex;
	justify-content: center;
}

.btn-error-close {
	padding: 12px 32px;
	border-radius: 64px;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	background: #A2863E;
	border: 2px solid #A2863E;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 120px;
}

.btn-error-close:hover {
	background: #8a6f33;
	border-color: #8a6f33;
}

.btn-error-close:focus {
	outline: 2px solid #A2863E;
	outline-offset: 2px;
}

/* Dark Mode Support for Error Modal */
.dark-mode .modal-reservation-error-content {
	background: #1e1e1e;
}

.dark-mode .modal-reservation-error-heading {
	color: #fff;
}

.dark-mode .modal-reservation-error-message {
	color: #ccc;
}

/* Responsive for Error Modal */
@media screen and (max-width: 768px) {
	.modal-reservation-error-content {
		padding: 24px;
	}

	.modal-reservation-error-icon {
		width: 64px;
		height: 64px;
		margin-bottom: 20px;
	}

	.modal-reservation-error-icon svg {
		width: 36px;
		height: 36px;
	}

	.modal-reservation-error-heading {
		font-size: 24px;
	}

	.btn-error-close {
		width: 100%;
	}
}

/* Scoped to modal-form-reservation to avoid conflicts with other blocks */
#modal-form-reservation .inputText,
.modal-form-reservation-form .inputText {
	border-radius: 6px;
	border: 1px solid #A2863E;
	padding: 16px;
	width: 100%;
	color: #302C2C;
	font-family: Montserrat;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	background-color: transparent;
}

.modal-form-reservation-form {
	width: 100%;
	color: #302C2C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	position: relative;
	margin: 0 0 24px 0;
}

.modal-form-reservation-form label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: top 0.2s;
	color: #302C2C;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	left: 16px;
	z-index: 1;
}

.modal-form-reservation-voucher-label {
	position: absolute !important;
	top: -2px !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	transition: top 0.2s !important;
	left: 15px !important;
	z-index: 1 !important;
	background: #ffffff !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(246, 243, 236, 1) 50%) !important;
	color: #A2863E !important;
	font-family: Montserrat !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 150% !important;
	padding: 3px 3px !important;
}

/* Select Room Page Styles */
.select-room-page {
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.select-room-page-container {
	background: #fff;
	border-radius: 8px;
	padding: 40px;
}

.select-room-page-title {
	font-size: 32px;
	font-weight: 600;
	color: #302C2C;
	margin: 0 0 16px 0;
}

.select-room-page-desc {
	font-size: 16px;
	color: #666;
	margin: 0 0 32px 0;
}

.select-room-page-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
	gap: 16px;
}

.select-room-page-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.select-room-page-content {
		grid-template-columns: 1fr;
	}

	.select-room-page-container {
		padding: 24px;
	}

	.select-room-page-title {
		font-size: 24px;
	}
}

/* Daterangepicker styles (same as form-find-room) */
.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: #A2863E !important;
}

.cancelBtn,
.applyBtn {
	padding: 3px 10px !important;
	border-radius: 5px !important;
	border: 1px solid #B59E65;
	background: #A2863E;
	color: #FFF;
	font-family: Montserrat;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* Ensure datepicker in modal form reservation uses same styling as account-booking-detail and form-find-room */
/* Override availability-room-form styling for datepicker outside availability-room-form */
/* Default daterangepicker styling - will be overridden by availability-room-form only */
/* Reset flex properties for datepicker outside availability-room-form */
/* This ensures datepicker in modal form reservation uses default layout (same as form-find-room) */
.daterangepicker {
	display: block !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-content: flex-start !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 0 !important;
	z-index: 9999 !important;
}

/* Hide multiple datepickers if they appear */
.daterangepicker:not(:last-of-type) {
	display: none !important;
}

.daterangepicker.show-calendar {
	display: block !important;
}

/* Override for availability-room-form - must come after and use higher specificity */
.availability-room-form .daterangepicker {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 64px !important;
	width: auto !important;
}

/* Reset calendar styling for datepicker outside availability-room-form */
.daterangepicker .drp-calendar {
	display: none !important;
	max-width: 270px !important;
	font-family: arial !important;
	font-size: 15px !important;
	line-height: 1em !important;
}

.daterangepicker.show-calendar .drp-calendar {
	display: block !important;
}

/* For single date picker, ensure only left calendar shows and hide right calendar */
.daterangepicker.single.show-calendar .drp-calendar.left {
	display: block !important;
}

.daterangepicker.single .drp-calendar.right,
.daterangepicker.single.show-calendar .drp-calendar.right {
	display: none !important;
}

.daterangepicker .drp-calendar.left {
	padding: 8px 0 8px 8px !important;
}

.daterangepicker .drp-calendar.right {
	padding: 8px !important;
}


.daterangepicker .calendar-table {
	max-width: 270px !important;
	font-family: arial !important;
	font-size: 15px !important;
	line-height: 1em !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
	white-space: nowrap !important;
	min-width: 32px !important;
	width: 32px !important;
	height: 24px !important;
	line-height: 24px !important;
	font-size: 12px !important;
	text-align: center !important;
	vertical-align: middle !important;
	font-family: arial !important;
}

/* Override for availability-room-form calendar */
.availability-room-form .daterangepicker .calendar th,
.availability-room-form .daterangepicker .calendar td {
	white-space: nowrap !important;
	min-width: 40px !important;
	font-family: Montserrat !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 30px !important;
	color: #302C2C !important;
}