/* 
Theme Name: NOX Dubai Child Theme
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

.nox-box{
	border: solid 1px;
	border-color: var(--e-global-color-bea34bc);
	box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

.nox-shadow{
	box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.15);
}

/* General Styles */
body.dce-off-canvas-menu-open {
	overflow: hidden;
}
ul {
	padding-left: 15px;
}

/* Breadcrumb Styles */
.breadcrumb {
	display: flex;
	align-items: center;
	font-size: 0.85rem;
	color: var(--e-global-color-text);
	margin-bottom: 20px;
}

.breadcrumb a {
	color: var(--e-global-color-e3db572);
	font-weight: 300;
	transition: color 0.3s ease;
}

.breadcrumb a:hover {
	text-decoration: underline;
	color: var(--e-global-color-secondary);
}

.breadcrumb a::after {
	content: '/';
	margin: 0 5px;
	color: var(--e-global-color-secondary);
	font-weight: 400;
}

.breadcrumb span.breadcrumb-current {
	color: var(--e-global-color-text);
	font-weight: 600;
}

.breadcrumb span.breadcrumb-current::after {
	content: '';
}

@media (max-width: 768px) {
	.breadcrumb {
		font-size: 0.8rem;
		flex-wrap: wrap;
	}
	.breadcrumb a::after {
		margin: 0 5px;
	}
}

/* Status Messages (Success, Error, Info) */
.success, .error, .info {
	position: relative;
}

.success {
	color: var(--e-global-color-4adf32a);
}

.success::before {
	content: '\f058'; /* Font Awesome check-circle icon */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
	left: -25px;
}

.error, .elementor-message-danger {
	color: var(--e-global-color-secondary) !important;
}

.error::before {
	content: '\f057'; /* Font Awesome times-circle icon */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
	left: -25px;
}

.info {
	color: var(--e-global-color-text);
}

.info::before {
	content: '\f05a'; /* Font Awesome info-circle icon */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
	left: -25px;
}

.noxform .wpforms-container-full .wpforms-form .wpforms-submit-container{
	display: flex;
	justify-content: center !important;
}

/* Button Styles */
.elementor-widget-button .elementor-button, #nox-form .wpforms-submit , .button, input[type=submit], .nox-btn {
	background: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 374.3 134.9'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f05050; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1-2'%3E%3Cpolygon class='cls-1' points='0 0 370.8 3.5 0 7 0 0 0 0'/%3E%3Cpolygon class='cls-1' points='3.5 131.4 0 3.5 7 3.5 3.5 131.4 3.5 131.4'/%3E%3Cg%3E%3Cpolygon class='cls-1' points='374.2 134.9 3.5 131.4 374.2 127.9 374.2 134.9 374.2 134.9'/%3E%3Cpolygon class='cls-1' points='370.8 3.5 374.3 131.4 367.3 131.4 370.8 3.5 370.8 3.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: baseline;
	transition: all 0.2s ease-in-out;
	border: none;
	font-family: Gatena !important;
	min-width: 110px;
	padding: 10px 18px;
}

.elementor-widget-button .elementor-button:hover, #nox-form .wpforms-submit:hover, button:not(.e-n-tab-title):hover, .button:hover, input[type=submit]:hover, button:not(.e-n-tab-title):focus, .nox-btn:hover, .nox-btn:focus {
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-text);
}

#payment_form .elementor-button, #reserve-button{
	background: none;
	background-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-text);
	min-width: 160px;
}

@media (max-width:768px){
	#payment_form .elementor-field-type-submit button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		height: 60px;
		opacity: 100% !important;
		background-image: none;
		text-align: center;
		border: none;
		border-radius: 0;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
	}
}

/* Form Styling */
input:not([type="submit"]), select, textarea, .nox-form input, .nox-form select, #nox-form div.wpforms-container-full input, input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url] {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	color: var(--e-global-color-text) !important;
	background-color: var(--e-global-color-1db48f6) !important;
	border: 1px solid var(--e-global-color-bea34bc);
	min-height: 42px;
}

input:not([type="submit"]):hover, select:hover, textarea:hover, .nox-form input:hover, .nox-form select:hover, #nox-form div.wpforms-container-full input:hover, input[type=date]:hover, input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=url]:hover {
	background-color: var(--e-global-color-b3c2e52) !important;
}

input::placeholder, .nox-form input::placeholder,
textarea::placeholder {
	color: var(--e-global-color-e3db572) !important;
}


select, .nox-form select{
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	color: var(--e-global-color-text) !important;
	background-color: var(--e-global-color-1db48f6) !important;
	border: 1px solid var(--e-global-color-bea34bc) !important;
	min-height: 42px;
	width: 100%; /* Ensure full width for select */
	padding-right: 40px; /* Add space for the custom icon */
	position: relative;
}



select::after, .nox-form select::after{
	content: '\25BC'; /* Unicode for down arrow */
	font-family: "Font Awesome 5 Free"; /* Or use another icon/font family if needed */
	font-weight: 900; /* Solid icon */
	color: var(--e-global-color-text); /* Adjust icon color */
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none; /* Ensure the dropdown works normally */
}

input:focus, select:focus, textarea:focus, .choices__inner:focus, input:focus-visible, select:focus-visible, textarea:focus-visible, .choices__inner:focus-visible {
	outline: none;
	border-color: var(--e-global-color-secondary) !important;
	box-shadow: 0 0 0 1px var(--e-global-color-secondary);
}


/* Date Picker Styling */
.ui-datepicker {
	background-color: var(--e-global-color-b3c2e52) !important;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
	border: solid 1px var(--e-global-color-bea34bc) !important;
	z-index: 99999 !important;
}

.ui-widget-header {
	background: transparent !important;
	border: none !important;
}

.ui-datepicker .ui-datepicker-title {
	color: var(--e-global-color-text) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
	background-image: none !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	width: auto !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900 !important;
	font-size: 18px !important;
	color: var(--e-global-color-secondary) !important;
}

.ui-datepicker-prev:before {
	content: "\f104" !important;
}

.ui-datepicker-next:before {
	content: "\f105" !important;
}

.ui-datepicker .ui-state-disabled {
	background: transparent !important;
	color: var(--e-global-color-bea34bc) !important;
}

.ui-datepicker .ui-state-disabled span {
	text-decoration: line-through !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: none !important;
	background: var(--e-global-color-bea34bc) !important;
	color: var(--e-global-color-40ecb44) !important;
}

.ui-state-checked {
	color: var(--e-global-color-40ecb44) !important;
	background: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-secondary) !important;
}

.ui-datepicker td a,
.ui-datepicker thead {
	color: var(--e-global-color-text) !important;
}

.ui-datepicker td a:hover {
	background-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-text) !important;
}


/* Reserve Button Wrapper */
.reserve-wrapper {
	margin-top: 10px;
	text-align: center;
}

.reserve-wrapper .reserve-button {
	margin-top: 15px;
}

/* WP Forms Success Color Overide */

div.wpforms-container-full .wpforms-confirmation-container-full {
	background-color: var(--e-global-color-1db48f6) !important;
	border: 1px solid var(--e-global-color-bea34bc) !important;
	color: var(--e-global-color-text);
	box-sizing: border-box;
	border-radius: 3px;
}
div.wpforms-container-full .wpforms-confirmation-container-full p{
	color: var(--e-global-color-text) !important;
	font-size: 1rem;
}

/* Pricing Form & Search Labels */
#rms-pricing-form label, .search-row label, .label, .rms-label, .hdp-label {
	font-size: 0.70rem;
	color: var(--e-global-color-e3db572);
}

/* Search Form Styles */

.rms-property-filter-fieldset .search-row select, .rms-property-filter-fieldset .search-row input{
	cursor: pointer !important;
	font-weight: 600;
}

.search-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.keyword-search {
	flex: 1;
	display: inline-block;
	min-width: 220px;
}

.date-wrapper {
	flex: 1.2;
	min-width: 300px;
	display: inline-block;
}

.date-wrapper .date-row {
	display: flex;
	justify-content: space-between;
	border: 1px solid var(--e-global-color-9168b0b);
	border-radius: 3px;
	background-color: var(--e-global-color-1db48f6);
}

.location-select, .bedroom-select {
	flex: 1;
	display: inline-block;
}

.min-adults-select, .min-children-select {
	flex: 0.85;
	display: inline-block;
}

.date-picker {
	display: inline-block;
	flex: 1;

}

.date-picker input {
	width: 100%;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	border-radius: 0 !important;
}

.date-picker input.check-in::after {
	border-right: 100px solid #ccc !important;
	position: absolute;
	top: 10px;
	bottom: 10px;
	content: "";
}

.location-select select, .bedroom-select select, .min-adults-select select , .min-children-select select{
	width: 100%;
	padding: 8px;
	cursor: pointer;
	font-weight: 600;
}
#advanced-filter-toggle {
	display: none;
}

fieldset{
	border: none;
	padding: .75em 0;
}

.filter-button {
	background: none !important;
	background-image: none !important;
	padding: 0;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	display: flex;
	padding: 10px;
	font-family: Inter, sans-serif !important;
}
.filter-button:hover, .filter-button:focus {
	background: none !important;
	background-color: none !important;
}
.filter-button i {
	margin-right: 10px;
}
.filter-button i svg {
	height: 18px;
	width: 18px;
}

/* Tablet and Mobile Styles (max-width: 1024px) */
@media (max-width: 1024px) {
	#advanced-filter-toggle {
		display: block;
		color: var(--e-global-color-text);
		cursor: pointer;
		border: none;
		font-size: 16px;
		padding: 0;
		border-radius: 4px;
		display: flex;
		align-items: end;
		justify-content: end;
	}

	/* Hide the filter form initially */
	.filter-form {
		display: none;
	}

	.search-row, .date-wrapper {
		display: block;
	}

	.keyword-search, .date-picker input,
	.location-select select, .bedroom-select select, .min-adults-select select {
		width: 100%;
	}

	.location-select, .bedroom-select, .min-adults-select {
		min-width: 100%;
		width: 100%;
		display: block;
	}
}

/* General Transitions */
.filter-form {
	transition: all 0.3s ease;
}

/* Button Styles */
.elementor-widget-button.reserve-wrapper {
	text-align: center;
}

.elementor-widget-button.reserve-wrapper .reserve-button {
	cursor: pointer;
	transition: background-color 0.3s ease;
}
body #nox-form .wpforms-container .wpforms-form .iti__country-list, body #payment_form .iti__country-list {
	background: var(--e-global-color-b3c2e52) !important;
}

body #nox-form .wpforms-container .wpforms-form .iti__country-list li:hover{
	background: var(--e-global-color-bea34bc) !important;
}


body #nox-form .wpforms-container .wpforms-form .iti__country-list .iti__country-name, body #payment_form .iti__country-list .iti__country-name{
	color: var(--e-global-color-text) !important;
	font-family: Inter, sans-serif !important;
	font-size: 0.9rem !important;

}

.highlight-mins{
	color: var(--e-global-color-e3db572);
	font-size: 0.85rem;
	font-weight: light;
	display: inline-block;
	min-width: 50px;
}

.price-value p, .price-value-total p{
	margin-block-start: 1rem !important;
}


.rms-sort-filter-wrapper {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: 14px;
	color: var(--e-global-color-text) !important;
	background-color: var(--e-global-color-1db48f6) !important;
	border: 1px solid var(--e-global-color-bea34bc) !important;
	border-radius: 5px;
}
.rms-sort-filter-wrapper select {
	border: none !important;
	background: transparent;
	font-weight: 600;
	padding: 0 5px;
	appearance: none;
	cursor: pointer;
	font-size: 14px;
	width: auto;
}
.rms-sort-filter-wrapper select:focus {
	outline: none;
	box-shadow: none;
}
.rms-sort-icon {
	margin-right: 5px;
	font-size: 14px;
}
.rms-sort-dropdown-icon {
	margin-left: 5px;
	font-size: 12px;
}

.hover-fade{
	opacity: 1;
	transition: 0.3s ease !important;
}
.hover-fade:hover{
	opacity: 0.85;
	transform: translatey(-2px);
}

/*
* CSS for the AJAX search results fade effect
*/
.elementor-loop-container {
	/* Set the speed of the fade in/out */
	transition: opacity 0.4s ease-in-out;
}

.elementor-loop-container.rms-results-loading {
	/* Lower the opacity when loading */
	opacity: 0.3;
	/* Prevent clicking on the old items while new ones are loading */
	pointer-events: none;
}




.datepicker table tbody>tr:nth-child(odd)>td,.datepicker table tbody>tr:nth-child(odd)>th {
	background-color: hsla(0,0%,50.2%,.0705882353)
}

.datepicker table tbody tr:hover>td,.datepicker table tbody tr:hover>th {
	background-color: hsla(0,0%,50.2%,.1019607843)
}

.datepicker{
	background-color: var(--e-global-color-b3c2e52);
	color: var(--e-global-color-text);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: solid 1px var(--e-global-color-bea34bc);
	z-index: 99999 !important;
	margin-top: 8px;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	/* 	transition: opacity .01s linear, transform .01s ease !important; */
}

.datepicker.datepicker--open{
}

.datepicker__inner{
	padding: 5px 10px 20px !important
}
.datepicker__info--selected-label, .datepicker__info--help{
	color: var(--e-global-color-e3db572);
}

.datepicker__info-text .datepicker__info-text--selected-days{
	color: var(--e-global-color-secondary) !important;
}

/* Button Fix */

.date-picker button{
	background-image: none;
	color: var(--e-global-color-e3db572) !important;
	font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
	min-width: 50px;
}

.datepicker table {
	border-spacing: 0 !important;
	width: 240px;
}

.datepicker table th,
.datepicker table td {
	border: none !important;
	text-align: center !important;
	padding: 7px !important;
	line-height: 1;
	vertical-align: top;
}

.datepicker__month-caption{
	border-bottom: 1px solid var(--e-global-color-bea34bc);
}
.datepicker--topbar-bottom .datepicker__topbar{
	border-top: 1px solid var(--e-global-color-bea34bc);
}

.datepicker__month-day--today{
	background-color: transparent;
	color: var(--e-global-color-text);
}
.datepicker__month-day--selected{
	background-color: rgba(254, 103, 104,0.5) !important;
	color: var(--e-global-color-text) !important;
}

.datepicker__month-day--first-day-selected, .datepicker__month-day--last-day-selected {
	background-color: var(--e-global-color-secondary) !important;
}

.datepicker__month-day--hovering, .datepicker table td:hover{
	background-color: rgba(254, 103, 104,0.5) !important;
}

.datepicker__month-day{
	color: #fff;
}
.datepicker__months:before {
	background: var(--e-global-color-bea34bc);
}

.datepicker__month-day--invalid{
	color: var(--e-global-color-bea34bc);
	text-decoration: line-through;
}

.datepicker__month-day--disabled:after{
	content: "";
}

.datepicker__tooltip {
	background-color: var(--e-global-color-accent) !important;
}
.datepicker__tooltip:after {
	border-top: 4px solid var(--e-global-color-secondary);
}

.property-single-form .date-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.property-single-form .date-picker, .property-single-form .selector-adult,.property-single-form .selector-child{
	flex: 1;
}

.property-single-form .date-picker input{
	width: 100%;
	text-align: center;
}
.property-single-form .selector-guests{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.property-single-form .sub-label{
	text-transform: normal;
	color: var(--e-global-color-9168b0b);
}
.property-single-form .selector-adult input, .property-single-form .selector-child input{
	width: 60% !important;
	min-width: auto !important;
	text-align: center;
	font-size: 1rem;
	display: inline-block;
	vertical-align: middle;
}