@charset "UTF-8";
/* update by cpclaudio@tecnes.com rel.1 2021-11-01
   modernized rel.2 2026-09-01 — same selectors/IDs, safe drop-in replacement.
   Changes: consolidated shadow/radius tokens, Option A buttons (soft depth,
   translateY hover instead of scale), Option A forms (filled/bordered inputs),
   restored focus-visible states, removed legacy dead UL.CurrMenu block,
   cross-browser scrollbar styling, unused Poppins import removed.
-------------------------------------------------------------------------------------------------*/


/* FONT [START] - ALL PAGES
-------------------------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
/* Poppins import removed — not referenced anywhere in this stylesheet.
   If a page elsewhere relies on it, re-add:
   @import url("https://fonts.googleapis.com/css2?family=Poppins"); */

/* FONT [END]------------------------------------------------------------------------------------*/





.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--cyan-700);
    border-color: transparent;
    color: #fff;
}



/*********************************  GENERAL START **************************************/

body {
	background-color: var(--gray-100);
	color: var(--gray-800);
	font-family:"DM Sans", sans-serif;
	
}
.litepicker{font-family: DM Sans, sans-serif; font-size: 0.95em;}



/* Calendar theme — litepicker exposes its colors as CSS custom properties,
   but it also injects its OWN default values for these into :root at runtime
   via JS, and that can load after this stylesheet. !important guarantees
   these win regardless of injection order. */
:root {
	--dark-blu-color: #00598D;
	--blu-color: var(--cyan-700);
	--light-blu-color: #01A1FF;
	--red-color: #d9534f;
	--black-color: #030303;
	--white-color: #fdfdfd;
	--grey-color: #f9f9f9;
	--light-grey-color: #d4d4d4;
	--dark-grey-color: #b9b9b9;
	--green-color: #419641;
	--rc-color: #24AFE1;
	--shadow-color: #d0d0d0;
	--background-color: #fffffff2;
	--legend-bg-color: #d9edf7;
	--rate-item-row-height: 120px;
	--rate-item-col-height: 110px;
	--supp-item-row-height: 170px;
	--supp-item-col-height: 170px;
	--cyan-100: #cff4fc;
	--cyan-200: #9eeaf9;
	--cyan-300: #6edff6;
	--cyan-400: #3dd5f3;
	--cyan-500: #0dcaf0;
	--cyan-600: #0aa2c0;
	--cyan-700: #087990;
	--cyan-800: #055160;
	--cyan-900: #032830;
	--gray-100: #f8f9fa;
	--gray-200: #d4d4d4;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	--blue-100: #cfe2ff;
	--blue-200: #9ec5fe;
	--blue-300: #6ea8fe;
	--blue-400: #3d8bfd;
	--blue-500: #0d6efd;
	--blue-600: #0a58ca;
	--blue-700: #084298;
	--blue-800: #052c65;
	--blue-900: #031633;
	--indigo-100: #e0cffc;
	--indigo-200: #c29ffa;
	--indigo-300: #a370f7;
	--indigo-400: #8540f5;
	--indigo-500: #6610f2;
	--indigo-600: #520dc2;
	--indigo-700: #3d0a91;
	--indigo-800: #290661;
	--indigo-900: #140330;
	--purple-100: #e2d9f3;
	--purple-200: #c5b3e6;
	--purple-300: #a98eda;
	--purple-400: #8c68cd;
	--purple-500: #6f42c1;
	--purple-600: #59359a;
	--purple-700: #432874;
	--purple-800: #2c1a4d;
	--purple-900: #160d27;
	--pink-100: #f7d6e6;
	--pink-200: #efadce;
	--pink-300: #e685b5;
	--pink-400: #de5c9d;
	--pink-500: #d63384;
	--pink-600: #ab296a;
	--pink-700: #801f4f;
	--pink-800: #561435;
	--pink-900: #2b0a1a;
	--red-100: #f8d7da;
	--red-200: #f1aeb5;
	--red-300: #ea868f;
	--red-400: #e35d6a;
	--red-500: #dc3545;
	--red-600: #b02a37;
	--red-700: #842029;
	--red-800: #58151c;
	--red-900: #2c0b0e;
	--orange-100: #ffe5d0;
	--orange-200: #fecba1;
	--orange-300: #feb272;
	--orange-400: #fd9843;
	--orange-500: #fd7e14;
	--orange-600: #ca6510;
	--orange-700: #984c0c;
	--orange-800: #653208;
	--orange-900: #331904;
	--yellow-100: #fff3cd;
	--yellow-200: #ffe69c;
	--yellow-300: #ffda6a;
	--yellow-400: #ffcd39;
	--yellow-500: #ffc107;
	--yellow-600: #cc9a06;
	--yellow-700: #997404;
	--yellow-800: #664d03;
	--yellow-900: #332701;
	--green-100: #d1e7dd;
	--green-200: #a3cfbb;
	--green-300: #75b798;
	--green-400: #479f76;
	--green-500: #198754;
	--green-600: #146c43;
	--green-700: #0f5132;
	--green-800: #0a3622;
	--green-900: #051b11;
	--teal-100: #d2f4ea;
	--teal-200: #a6e9d5;
	--teal-300: #79dfc1;
	--teal-400: #4dd4ac;
	--teal-500: #20c997;
	--teal-600: #1aa179;
	--teal-700: #13795b;
	--teal-800: #0d503c;
	--teal-900: #06281e;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 6px rgba(3,40,48,.14);
	--shadow-md: 0 8px 20px rgba(3,40,48,.18);
	--shadow-lg: 0 16px 36px rgba(3,40,48,.22);
	--ease: cubic-bezier(.2,.8,.2,1);
	--slate-tint-bg: #E7EAEC;
	--slate-tint-text: #40505C;
	--gold-tint-bg: #FBEEDC;
	--gold-tint-text: #8A5A15;
	--gold-tint-border: #F0DAB3;
	--btn-one-bg: #f23315;
	--btn-one-bg-hover: #f23315;
	--btn-two-bg: #818C78;
	--btn-two-bg-hover: #f23315;
	--litepicker-day-width: 42px;
	--litepicker-container-months-color-bg: var(--white-color) !important;
	--litepicker-container-months-box-shadow-color: rgba(3,40,48,.18) !important;
	--litepicker-footer-color-bg: var(--gray-100) !important;
	--litepicker-footer-box-shadow-color: rgba(3,40,48,.12) !important;
	--litepicker-month-header-color: var(--black-color) !important;
	--litepicker-button-prev-month-color: var(--cyan-700) !important;
	--litepicker-button-next-month-color: var(--cyan-700) !important;
	--litepicker-button-prev-month-color-hover: var(--cyan-900) !important;
	--litepicker-button-next-month-color-hover: var(--cyan-900) !important;
	--litepicker-month-weekday-color: var(--gray-600) !important;
	--litepicker-day-color: var(--black-color) !important;
	--litepicker-day-color-hover: var(--cyan-700) !important;
	--litepicker-is-today-color: var(--cyan-700) !important;
	--litepicker-is-in-range-color: rgba(129,154,145,.16) !important;
	--litepicker-is-locked-color: var(--gray-400) !important;
	--litepicker-is-start-color: var(--white-color) !important;
	--litepicker-is-start-color-bg: var(--btn-one-bg) !important;
	--litepicker-is-end-color: var(--white-color) !important;
	--litepicker-is-end-color-bg: var(--btn-one-bg) !important;
	--litepicker-highlighted-day-color: var(--gold-tint-text) !important;
	--litepicker-highlighted-day-color-bg: var(--gold-tint-bg) !important;
}



/* 1. Divider between weekday row and day grid */
.month-item-weekdays-row{
	border-bottom: 1px solid var(--gray-200);
	padding-bottom: 8px;
	margin-bottom: 8px;
}

/* 6. Weekday label typography */
.month-item-weekdays-row div{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gray-500);
}

/* 4. Month header accent */
.month-item-header{
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--btn-one-bg);
}
.month-item-name{
	color: var(--black-color);
}
.month-item-year{
	color: var(--gray-500);
	font-weight: 500;
	margin-left: 4px;
}

/* 2. Divider between the two months (desktop side-by-side layout) —
   positioned line rather than padding, so it can't add width and break
   the side-by-side fit the way padding did */
.container__months.columns-2 .month-item:first-child{
	position: relative;
}
.container__months.columns-2 .month-item:first-child::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -14px;
	width: 1px;
	background-color: var(--gray-200);
}
@media only screen and (max-width: 480px){
	.container__months.columns-2 .month-item:first-child::after{
		display: none;
	}
	.container__months.columns-2 .month-item:first-child{
		border-bottom: 1px solid var(--gray-200);
		padding-bottom: 16px;
	}
}

/* 3. Weekend tint — litepicker always renders a fixed 7-column Mon-Sun grid
   (with blank leading cells to pad the first week), so nth-child(7n-1)/7n
   reliably land on Saturday/Sunday regardless of which dates those are */
.container__days .day-item:nth-child(7n-1),
.container__days .day-item:nth-child(7n){
	background-color: rgba(129,154,145,.08);
}
.container__days .day-item.is-locked:nth-child(7n-1),
.container__days .day-item.is-locked:nth-child(7n){
	background-color: transparent;
}

/* 5. Stronger today indicator — filled circle instead of a thin outline only */
.day-item.is-today{
	font-weight: 700;
	border-radius: var(--radius-pill) !important;
	background-color: var(--cyan-100) !important;
	box-shadow: inset 0 0 0 1.5px var(--cyan-700);
	color: var(--cyan-900) !important;
}
.day-item.is-today.is-start-date,
.day-item.is-today.is-end-date{
	box-shadow: none !important;
}

@media only screen and (max-width: 480px){
	:root{
		--litepicker-day-width: 34px !important;
	}
	.container__months.columns-2{
		flex-direction: column;
	}
	.container__months.columns-2 .month-item + .month-item{
		margin-top: 12px;
	}
}

/* Unavailable dates: struck-through and faded — unmistakably not clickable,
   not just "slightly gray text" */
.day-item.is-locked{
	text-decoration: line-through;
	opacity: .55;
}

/* Subtle sage wash on hover for available days — reinforces "this is
   clickable" without needing a permanent per-day marker. Locked days get
   no hover feedback at all, reinforcing that they're inert. */
.day-item:not(.is-locked):hover{
	background-color: rgba(129,154,145,.14) !important;
}
.day-item.is-locked:hover{
	background-color: transparent !important;
}

/* Today: a filled circle — reads as "you are here" rather than a warning
   (red) or a selection (sage fill) */
/* Minimum-stay-restricted dates: a small dot instead of a full bright-yellow
   fill, so it signals "restricted" without competing visually with the
   locked/selected states */
.day-item.is-highlighted{
	position: relative;
	background-color: transparent !important;
}
.day-item.is-highlighted::after{
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--gold-tint-text);
}
.margin-top{
	
	margin-top: 10px;
	
}

.margin-bottom{
	
	margin-bottom: 10px;
	
}


.no-padding{
	padding: 0px;
}

.pad-10 {
    padding: 10px;
}

/***********  BUTTONS — Option B: flat, high-contrast, confident *****/

.be-btn{
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: var(--radius-sm);
	max-width:300px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
    padding-right: 18px;
    background-color: var(--cyan-700);
    color: var(--white-color);
    transition: background-color .15s var(--ease);
    outline: 0;
    border: none;
}

.be-btn:focus-visible{
	outline: 2px solid var(--cyan-500);
	outline-offset: 2px;
}


.be-btn:hover{
	outline: 0;
	cursor: pointer;
	background-color: var(--cyan-800);
}

.be-btn:active{
	background-color: var(--cyan-900);
}

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

	.be-btn{
		padding-left: 7px;
	    padding-right: 7px;
	}
}



.btn-one{
	background-color: var(--btn-one-bg);
	color:var(--white-color);
	border: 0px solid var(--cyan-800);
}

.btn-one:hover, .btn-one:focus {
	background-color: var(--btn-one-bg-hover);
	color: var(--white-color);
	
}

.btn-two{
    background-color: var(--btn-two-bg);
    color: var(--white-color);
    border: 0px solid var(--green-700);
}

.btn-two:hover, .btn-two:focus{
	background-color: var(--btn-two-bg-hover);
	color: var(--white-color);
	
}



.btn-grey{
	background-color: var(--gray-200);
	color:var(--white-color);
	border:1px solid var(--gray-400);
}

.be-hidden{
	display: none;
}



/*********************************  GENERAL END *************************************/
/**************************   MEDIA QUERY GENERAL HIDE/SHOW *************************/

@media only screen and (max-width: 420px) {
    
    .desktop{

    	display:none;
    }
    .mobile{
    	display:block;
    }

}

@media only screen and (min-width: 421px) {
    
    .desktop{

    	display:block;
    }
    .mobile{
    	display:none;
    }

}
/**************************   MEDIA QUERY GENERAL HIDE/SHOW END *****************************/


.resume_span_container{display: inline-flex;align-items: center;font-size: 15px;margin-top: 8px;margin-bottom: 5px;padding: 8px 14px;font-weight: 400;white-space: normal;background: var(--white-color);color: var(--black-color);transition: transform .2s;border-top: 0px solid var(--gray-200);border-radius: var(--radius-sm);letter-spacing: .02em;}
.resume_span_container i{
	margin: 0 4px 0 2px;
	font-size: 15px;
	color: var(--cyan-700);
}
.resume-dates{
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 100%;
	margin-top:5px;
	text-transform:uppercase;
	padding-left: 0px;
	padding-right: 0px;
	
}

.resume-dates + .resume-dates::before{
	content: "→";
	margin: 0 8px;
	color: var(--gray-500);
	font-weight: 700;
	text-transform: none;
}

.resume-dates-titles{
	display: none;
}



.add-room-col{
	padding: 0px;
}


.dx-col{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 8px 0;
}


.dates_calendar{
		animation: pulsex 5s infinite;
}

.be-rc-button{
	color: var(--gray-800);
	transition: color .15s var(--ease), transform .1s var(--ease);
}

.be-rc-button:hover{
	color: var(--gray-900);
	transform: translateY(-1px);
}





.room-row{
	height: auto;
}

.room-col{
	height: auto;
}

.h-50{
	height: 20px;
	margin-top: 5px;
}

.radio_cls{
	display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto !important;
    accent-color: var(--cyan-700);
    width: 18px;
    height: 18px;
}

.paymentdetail:hover{
	text-decoration: underline;
	cursor: pointer;
} 



.tratment-div{
	padding-bottom: 5px;
	margin-top: 6px;
}



.price-font{
	font-size: 18px;
	font-weight: 700;
	color: var(--black-color);
}
.basket-price-font{
    font-size: 13px;
    font-weight: 600;
    color: var(--black-color);
}

#guest_notes{
	
	resize:vertical;
	min-height: 80px;
}

.confirm_item_currency{
	padding-left:5px;
}

.total-titles{
	font-weight: 500;
	color: var(--gray-600);
	font-size: 13px;
}

.basket_total_span{
	font-weight: bold;
	color: var(--black-color);
	font-size:16px;
}

#span_total_prepaid{
	padding-left: 5px;
}

.span_total_prepaid{
	font-weight: bold;
	color: var(--cyan-700);
	font-size:16px;
}

.currency-font{
	padding-left:5px;
	font-size: 14px;
	color: var(--black-color);
}

.basket_total_currency{
	padding-left: 5px;
}

.inline-block{
	
	display: inline-block;
	
}



.rate_price{
	
}
.hr_conversion{
	display: inline;
	font-size: 11px;
	font-weight: 400;
	color: var(--gray-500);
}
.hr_conversion::before{
	content: "(";
}
.hr_conversion::after{
	content: ")";
}
.best-price-span > div,
.rate_price > div,
.offer.disabled.title-font > div{
	display: inline;
}
.price-top-part{
	display: inline-block;
	margin-right: 4px;
}
.price-top-part .offer.disabled.title-font{
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-500);
}
.price-top-part s{
	text-decoration-color: var(--gray-400);
}
.room_offer.price-font{
	font-size: 22px;
}

.label_perc_discount.label-danger{
	background-color: transparent;
	color: var(--gold-tint-text);
	border: none;
	font-weight: 700;
	padding: 0;
	border-radius: 0;
	display: inline-block;
}
.label_perc_discount.label-danger::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f164";
	font-size: 12px;
	margin-right: 4px;
}
.label_perc_discount.label-danger::after {
	content: none;
}

/* --- moved here: confirmed markup is .rate_price (the whole price
   column — strikethrough, discount badge, and final price all inline
   inside it), so the note now sits below the ENTIRE row instead of
   squeezed between the numbers. Only shows when a discount is present. --- */
.rate_price:has(.label_perc_discount)::after {
	content: "✓ Miglior prezzo disponibile";
	display: block;
	text-align: right;
	color: var(--green-600);
	font-size: 11px;
	font-weight: 600;
	margin-top: 4px;
}
html:has(#lang_bar a.active_lang[data-target="en"]) .rate_price:has(.label_perc_discount)::after { content: "✓ Best price available"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .rate_price:has(.label_perc_discount)::after { content: "✓ Meilleur prix disponible"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .rate_price:has(.label_perc_discount)::after { content: "✓ Mejor precio disponible"; }

/* --- redundant with the OFFER tag on the rate card just below it —
   confirmed markup: .offer_title wraps the "special offer available"
   pill on the room card itself. --- */
.offer_title {
	display: none;
}
.label_perc_discount{
margin: 0px 5px;	
}

.disp-block{
	
	display: block;
	
}
.disp-inline-block{
	
	display: inline-block;
	
}
.treatment_desc{
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	font-weight: 700;
}


.product-first-img{
	padding-left:10px;
	max-width:100%;
	max-height: 450px;
	border-radius: var(--radius-md);
}

.product-first-img:hover{
cursor: pointer;	
}
.be-carousel-img{
	
}
.carousel-img-wrap{
	display: block;
	position: relative;
	width: 100%;
	height: 38vh;
	max-height: 340px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--gray-100);
}
.carousel-custom-img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-indicators{
	bottom: 14px;
	margin-bottom: 0;
}
.carousel-indicators li{
	width: 7px;
	height: 7px;
	margin: 0 3px;
	border-radius: var(--radius-pill);
	background-color: rgba(255,255,255,.55);
	border: none;
	text-indent: -9999px;
}
.carousel-indicators .active{
	background-color: var(--white-color);
	width: 7px;
	height: 7px;
	margin: 0 3px;
}

.carousel-control{
	width: 44px;
	height: 44px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	border-radius: var(--radius-pill);
	background-color: rgba(3,40,48,.4);
	background-image: none;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: none;
	transition: background-color .15s var(--ease);
}
.carousel-control:hover, .carousel-control:focus{
	background-color: rgba(3,40,48,.6);
	color: var(--white-color);
	outline: none;
}
.carousel-control.left{ left: 16px; }
.carousel-control.right{ right: 16px; }
.carousel-control .glyphicon{
	display: none;
}
.carousel-control::before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-style: solid;
	border-color: var(--white-color);
	border-width: 0 2px 2px 0;
}
.carousel-control.left::before{
	transform: rotate(135deg);
	margin-left: 4px;
}
.carousel-control.right::before{
	transform: rotate(-45deg);
	margin-right: 4px;
}
.treatment-icon{color: var(--cyan-700);font-size: 13px !important;}

.blu-icon{
	color: var(--btn-one-bg);
	font-weight: 600;
}

.calendar-avaiable{
	
}

.calendar-not-available{
	
	background-color: var(--red-color) !important;
	color: var(--white-color) !important;
	
}

.unselectable{
	
	background-color: var(--dark-grey-color);
}

#privacy-tab{
	
	margin-top: 10px;
}





.address-tab{
	
	text-align: center;
	margin-top: 5px;
	
	background-color: transparent;

}

#addresses-tab>div{
	padding:0px;
	background-color: transparent;

}

#src-tab{
	
	margin-top: 10px;	
	padding: 5px 5px;
}

.readMore:hover{
	cursor: pointer;
	
}

.readMore{
	font-size: 14px !important;
}

.grey-icon{
	filter: grayscale(100%);
	margin-right:3px
}


.margin-15{
	margin-left: 15px;
	margin-right: 15px;
}

#summary-col{
	margin:15px;
	padding: 10px;
}

.rate-col-desc {
	border-top: 0px  solid var(--gray-400);
	padding-top: 10px;
	background-color: transparent;
}


/*****************************************************		STEP CURRENCY LANG HEADER	*******************************************************************/
#top_bar_mobile{

	padding: 0px;
	margin: 0px;
	font-size: 12px;
	
	
}

#top_bar_mobile>div{
	
	padding: 10px;
	
}

#top_bar_mobile p{
	margin-bottom: 0px;
	
	
}

#lang_bar_mobile {
	
	background-color: var(--light-grey-color);

}
#lang_bar_mobile button{
	
	background-color: transparent;
	border: none;
}

#cur_bar_mobile {
	
	background-color: var(--light-grey-color);

}

#cur_bar_mobile button{
	
	background-color: transparent;
	border: none;
}

#top_bar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	padding: 6px 16px;
	font-size: 12px;
}

#top_bar > div{
	flex: 0 0 auto;
	width: auto;
}

#top_bar > div:first-child{
	margin-right: auto;
}



#res-tab{

	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	
}

#instruction-tab{
	
	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	
}

#confirm-payment-resume{
	
	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	
}

.total-pad{
	
}

#amount-tab{
		padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
}

#guest-tab{
	
	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	
}

#conf-addr-tab{
	max-width:1024px;
	padding: 10px;
	padding-top:0px;
	margin-top: 0px;
	margin-left:5px;
	margin-right:10px;
	margin-bottom:10px;
	
}

.img-thumbnail{
	max-height: 100px;
	padding: 4px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 0px solid #ddd;
	border-radius: var(--radius-sm);
	transition: all .2s var(--ease);
	display: inline-block;
	max-width: 100%;
	height: auto;
}


#addr-tab{

	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
	
}





#directions{
	text-align: left;
}


#directions-tab{

	padding: 10px;
	margin-top: 10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	
}

.resume-product-tab{
	
	min-height: 200px;
    padding: 10px 0px;
    margin-top: 10px;
    margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
}

#top_bar>div{
	
	padding: 0;
	
}

#top_bar p{
	margin-bottom: 0px;
}



#lang_bar {
	background-color: rgba(3,40,48,.55);
	text-align: center;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	border-left: 1px solid rgba(255,255,255,.25);
	padding: 4px 6px 4px 4px;
}
#lang_bar button{
	background-color: transparent;
	border: none;
	color: var(--white-color);
	border-radius: var(--radius-pill);
	padding: 4px 8px;
	line-height: 1;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	transition: background-color .15s var(--ease);
}
#lang_bar button img, #lang_bar button .lang_flag{
	width: 18px;
	height: 13px;
	object-fit: cover;
	vertical-align: middle;
	margin-right: 4px;
}
#lang_bar button:hover, #lang_bar button:focus-visible{
	background-color: rgba(255,255,255,.15);
}

#cur_bar {
	background-color: rgba(3,40,48,.55);
	text-align: center;
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	padding: 4px 4px 4px 6px;
}

#cur_bar button{
	background-color: transparent;
	border: none;
	color: var(--white-color);
	border-radius: var(--radius-pill);
	font-weight: 700;
	padding: 4px 8px;
	line-height: 1;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	transition: background-color .15s var(--ease);
}
#cur_bar button:hover, #cur_bar button:focus-visible{
	background-color: rgba(255,255,255,.15);
}


#resume_table{
	    width: 100%;
	    text-transform: uppercase;
}


/*****************************************************		END STEP CURRENCY LANG HEADER	*******************************************************************/



/*****************************************************	ROOM IMG GALLERY ***************************************************/
.col-md-3.search-result-gallery.room-col
{width:235px;height: 180px;overflow: hidden;box-shadow: var(--shadow-md);border-radius: var(--radius-lg);}





/*****************************************************	END ROOM IMG GALLERY ***************************************************/

#main-row{
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}

#result-col{
	
	padding-top: 10px;
	padding-right: 15px;
	

}

#search-col{
	padding-top: 10px;
	padding-left:0px;
}


#calendar_row{
	margin: 10px;
	margin-bottom: 20px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

#search_group_div > .form-group{
	margin-bottom: 0;
}

#search_group_div > .form-group + .form-group .calendar_search_group{
	border-top: 1px solid var(--gray-300);
}

.calendar_search_group{
	display: flex;
	align-items: center;
	transition: background-color .15s var(--ease);
}

.calendar_search_group .form-control{
	position: static;
	float: none;
	width: auto;
	flex: 1 1 auto;
	z-index: auto;
	min-width: 0;
}

.calendar_search_group .input-group-addon{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.calendar_search_group:hover{
	background-color: var(--gray-100);
	cursor: pointer;
}

.calendar_search_group i{
	font-size: 16px;
	color: var(--cyan-700);
}

.calendar_search_span{
	background-color: transparent;
	border: none;
	padding-left: 12px;
	padding-right: 6px;
}

.calendar_search_group .input-group-addon:first-child{
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0 6px 0 12px;
}

#search_calendar, #search_calendar_out{
	border: none !important;
	border-radius: 0 !important;
	background-color: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--black-color);
	padding: 10px 4px 10px 0;
	cursor: pointer;
}

.white-transparent{background-color: #fff;max-width: 1024px;box-shadow: var(--shadow-md);border-radius: var(--radius-lg);}

.right-box{
	min-height: 55px;
	padding: 15px 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
}



.transparent{
background-color:transparent;
}

#box_logo_img{

max-width: 100%;
max-height:200px;
padding-top: 5px;
padding-bottom: 5px;

}

#info_box_header{
	
	padding: 5px 10px;
    margin-left: 90px;
	
}
#info_box_icon{
    background-color: var(--cyan-600);
    color: var(--gray-200);
    display: block;
    float: left;
    height: 55px;
    width: 55px;
    text-align: center;
    font-size: 35px;
    border-radius: var(--radius-pill);
    padding: 0px;
    font-family: serif;
    font-style: italic;
    font-weight: 700;
    border: 1px solid var(--cyan-800);
}



/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--white-color); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--light-grey-color); 
  border-radius: var(--radius-pill);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--dark-grey-color); 
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--light-grey-color) var(--white-color);
}

.sold-out{
	background-color: var(--dark-grey-color);
}

.vcenter {
display:block;
position: absolute;
bottom:0;
}



.shopping-cart-button:hover{
  background-color: var(--green-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}



.shopping-cart-dropdown-pane .dropdown-pane {
  padding: 0;
}



.shopping-cart-item-name, .shopping-cart-item-price {
  padding: 0 1rem;
}

.shopping-cart-item-name p, .shopping-cart-item-price p {
  margin: 0;
  padding: 0;
}

.shopping-cart-title {
  font-weight: bold;
}

.shopping-cart-checkout {
  padding: 0.5rem;
  margin-bottom: 0;
}



.fa-nav-inverse{

}

.fa-nav{
color: var(--dark-grey-color);
}

.fa-nav-selected{
color: var(--cyan-700);
}

.btn-book{

}



#supp_checkout_btn{
	
	margin: auto;
	margin-top:5px;
	
}

#search_room_legend {
    border: none;
    padding: 10px;
    font-size: 120%;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    background-color: var(--light-grey-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
#search_room_box {
	position: relative;
    max-width: 400px;
    margin:0 auto;
    text-align:center;
  	display: block;
  	width: 100%;
  	background-color: var(--white-color);
}

/*                      RESULT  STYLE                      */


.search-result-gallery{
padding-right: 0px !important;
padding-left: 0px !important;
}

.search-result-head{

    display: flex;
    align-items: center;

padding-top:5px;
padding-bottom:5px;
background-color: var(--cyan-700);
color: var(--white-color);
}


.basket>div{
display: block;
position: relative;
}
		
#basket_counter{
	position: absolute;
	   	 	
   	top:2px;
   	left: 55%;
	    	
   	z-index:100;
	    	
   	font-size: 9px;
   	padding: 2px 3px;
   	line-height: .9;
   	border-radius: var(--radius-pill);
    	}
    	
 

/*                               END    RESULT                        */

.room_add_enabled{
	padding: 0px 1px 0px 1px !important;
	text-transform: none !important;
	font-weight: 700;
	
}

.room_add_enabled:hover, .room_add_enabled:focus{
	cursor: pointer;
	color: inherit !important;
	font-weight: 700;
}


.x-remove{
color:var(--red-color);
font-weight: bold;
transition: color .15s var(--ease);

}

.x-remove:hover{

	color:var(--blue-color);
	font-weight: bold;	
	cursor: pointer;

}






.app_child_cnt {
	
	padding-right: 30px;
	
}

/* Option A: filled/bordered inputs */
.input-no-line {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-300);
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 50%;
    border-radius: var(--radius-sm);
    transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}

.input-no-line:focus{
    border-color: var(--cyan-600);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(8,121,144,.12);
}

.input-no-line:focus-visible{
    outline: none;
}

#rooms_search{

margin-bottom:15px
}

#hotel_logo_div{
	margin-bottom: 10px;
}

.guest-info-element{
}

.guest-info-element .input-group{
	width: 100%;
}
.iti__selected-flag{
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	transition: background-color .15s var(--ease);
}
.iti__selected-flag:hover{
	background-color: var(--gray-200);
}
.iti{
	position: relative;
	z-index: 5;
}
.iti__dropdown-content{
	z-index: 60;
	position: absolute;
}
.iti__country-list{
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--gray-200);
	background-color: var(--white-color);
	z-index: 60;
}
.iti__country.iti__highlight{
	background-color: var(--cyan-100);
}

.guest-info-element .form-group{
	margin-bottom: 14px;
}

.help-block{
	margin-top:0px !important;
}


#cc_div .form-group .input-group{
	display:block;
}

#sub_form_div_err_pg small{
	color:#a94442;
}

.cc_label{
	padding-top:10px;
}

#payment_div{
	
	margin: 10px 0px;
    padding: 15px;
	background-color: var(--white-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	
}


#insurance-resume{
	margin: 10px 0px;
}

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

	
	
	#addresses-tab{
	text-align: center;
	    padding-bottom: 10px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	}
	
	.price-top-part{
	display: block;
	}
	
	.basket-padding-bottom-left{
		padding-bottom: 10px !important;
	}

	.basket-padding-bottom-right{
		padding-bottom: 70px !important;
	}
	

	
	#search-col{
		
		padding-bottom: 0px;
	}
	
	.hide-mobile{
		display: none !important;
	}
	
	.show-mobile{
		display: block;
	}
	
	.product_detail_basket{
		display: none;
	}

	#result-col{
	
	padding-left:0px;
	padding-top: 10px;
	}
	
	.more-btn{
	
		width: 100%;
	
	}
	
	
	.notav-more-btn{
	
		width: 100%;
	
	}

	
	.navbar-icons >p{
	display: none;
	}
	
	body{
		
		overflow-x:hidden;	
		overflow-y:auto;
		 
	}
	
	.scroll-tab{
		overflow-y:visible;
		padding-bottom:10px;
	}
	
	:root {
	--rate-item-row-height:auto;
    --rate-item-col-height:auto;
    --supp-item-row-height:auto;
  	--supp-item-col-height:auto;
  	--room-item-row-height:auto;
  	--room-item-col-height:auto;
  	
	}
    .supp-block{
	height:auto;
	}
}
 


@media only screen and (min-width: 992px) {
	span.property-title{
		
		font-size: 15px !important;
	
	}
	

	
	#floating_basket_footer_content{
		max-width: 500px;
	}
	

	
	.hide-mobile{
		display: block ;
	}
	
	.show-mobile{
		display: none !important;
	}
	
	.product_detail_basket{
		display: block;
	}
	
	#result-col{
	  
		padding-left:10px;
	}
	
	.basket-padding-bottom-right, .basket-padding-bottom-left{
		padding-bottom: 70px !important;
	}
	
	#complete_message{
		padding-left: 5px;
		padding-right:5px;
		padding-bottom: 10px;
	}
	
	#select_supplements{
	
		padding-left: 5px;
		padding-right:5px;
	
	}
	
	#to_complete_message{
		
		padding-left: 5px;
		padding-right:5px;
	
		}
	.src-div-title{
	
	}
	
	
	
	
	#hotel_logo_div, #src-tab, #privacy-tab, #basket-tab-div,  {
		
		max-width: 328px;
	
	}
	

	
	

	#basket-tab{
	max-width: 328px;
	}
	
	#summary-tab{
		max-width: 1024px;
	}
	
	#res-tab{
		max-width: 1024px;
	}
	
	#confirm-address-tab{
		max-width: 1024px;
	}
	
	#addr-tab{
	}
	
	#top_bar{
	
	}
	
	#msg-tab{
	
	}
	
	#directions-tab{
	
	}
	
	#map-tab{
	
	}
	
	.resume-product-tab{
	
	}
	
	#guest-info-div{
	}
	
	#payments-info-div{
	}
	
	#privacy-info-div{
		min-height: 150px;
	}
	
	.search-result-item{

	}
	
	#daysselected{
	}
	body{
		
		overflow-x:hidden;	
		overflow-y:hidden;
		min-height: 100vh;
	}
	
	.scroll-tab{
	
		height:100vh;
		overflow-x:hidden;
		overflow-y:auto;
		padding-bottom:10px;
	
	}
	.supp-block{
		height:250px;
	}

}

.basket_arrow{
	font-weight:400;
	transition:all .2s var(--ease);
	color: var(--black-color);
}

.basket_arrow:hover{
	font-weight:700;
	color:var(--cyan-700);
	cursor: pointer;
	
}

#btn-search {
   
}

.btn-block {
    display: inline-block;
}

.mrg-top{

margin-top: 10px;

}

.mrg-btm{

margin-bottom: 10px;

}





.mrg-top-10{
margin-top: 10px;
}



.confirm_msg strong,
.confirm_msg b{
	color: var(--cyan-700);
	font-weight: bold;
}

.modal-close-span{
	color: var(--cyan-700);
}

.modal-close-span:hover{
	color: var(--dark-blu-color);
}

#detailModal-header{
	position: relative;
	padding: 16px 44px 16px 20px;
	border-bottom: 1px solid var(--gray-200);
}
#detailModal_title{
	font-size: 20px;
	font-weight: 700;
	color: var(--black-color);
	text-transform: uppercase;
	margin: 0;
}

#detailModal-body .col-md-12{
	font-size: 14px;
	line-height: 1.7;
	color: var(--black-color);
	padding: 4px 20px;
}
#detailModal-body .col-md-12 h4{
	color: var(--cyan-700);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-top: 6px;
	margin-bottom: 8px;
}
#detailModal-body .col-md-12 p{
	font-size: 13px;
	color: var(--gray-700);
	margin-bottom: 8px;
	line-height: 1.6;
}
#detailModal-body .col-md-12 hr{
	margin: 20px 0;
	border: none;
	border-top: 1px solid var(--gray-200);
}

/* ----------------------------------------------------------------------
   RATE CONDITIONS MODAL -- equal-weight sections + icons matching the
   booking summary. Confirmed markup: a single .col-md-12 with the rate
   name ("Standard") as bare text at the top (no wrapping element),
   followed by exactly two <h4> (Caparra, then Tasse e costi, in that
   fixed order), then <hr> + a bare trailing currency disclaimer.

   True side-by-side columns like the room-detail footer aren't possible
   here -- that footer has three real .col-xs-12 divs to place into a
   flex row; this content is flat, un-wrapped text/headings in one div,
   so there's nothing to lay out as a grid without a DOM change. This
   instead stacks the three sections with matching visual weight.
------------------------------------------------------------------------- */
#detailModal-body .col-md-12{
	padding: 8px 20px 16px;
}

/* "Standard" has no <h4> -- it's bare text before the first <br>, so
   :first-line reliably isolates it (the <br> forces a hard line break
   regardless of width) and it gets promoted to match the other two
   section titles. Icon matches the free-cancellation check already used
   in the booking summary (#basket-penalties). */
#detailModal-body .col-md-12::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--green-500);
	margin-right: 6px;
	font-size: 13px;
}
#detailModal-body .col-md-12:first-line{
	font-size: 15px;
	font-weight: 700;
	color: var(--cyan-700);
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Non-refundable / prepaid rates render with a leading <p> instead of
   bare text (confirmed markup: "Standard" is raw text, "Not Refundable
   Rate..." is wrapped in <p>) -- a reliable signal to swap the icon from
   the green "flexible" check to a red "non-refundable" mark, matching
   the red/green convention already used for cancellation status
   elsewhere (.cancellation_text-nr in the rate list).
   Only two variants are confirmed (refundable / non-refundable) -- if a
   partial-refund or prepaid rate renders with a third structure, this
   will need a matching rule once that markup is confirmed. */
/* Icon moved off the container and onto the <p> itself (below) --
   the container-level ::before only sits inline when the first content
   is bare text (the "Standard" case); with a real <p> as first child,
   that same icon gets pushed onto its own line above the block instead
   of sitting beside the title text. Disabling it here and re-adding it
   directly on the heading element matches how the Caparra/Tasse e costi
   icons already work -- attached to the element itself, not a container
   above it. */
#detailModal-body .col-md-12:has(> p:first-child)::before{
	content: none;
}
#detailModal-body .col-md-12:has(> p:first-child) > p:first-child::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--red-color);
	margin-right: 6px;
	font-size: 13px;
}
/* The heading treatment itself was missing here -- :first-line only
   works for the "Standard" case because that label is bare text; here
   it's a real <p>, which is actually simpler to target directly rather
   than needing a pseudo-element trick. Matches the h4/first-line size,
   weight, case and color exactly so both variants read as the same
   kind of title, with only the icon carrying the red/green distinction. */
#detailModal-body .col-md-12:has(> p:first-child) > p:first-child{
	font-size: 15px;
	font-weight: 700;
	color: var(--cyan-700);
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 8px;
}

/* Caparra / Tasse e costi -- divider + icon per section, same weight as
   the cancellation label above. Icons: shield matches the deposit icon
   in the summary (#damage_deposit); euro sign is new since no "taxes"
   icon exists elsewhere in the file yet. nth-of-type is safe here since
   this content always has exactly these two headings in this order. */
#detailModal-body .col-md-12 h4{
	padding-top: 14px;
	border-top: 1px solid var(--gray-200);
}
#detailModal-body .col-md-12 h4::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	margin-right: 6px;
	font-size: 13px;
	color: var(--gray-500);
}
#detailModal-body .col-md-12 h4:nth-of-type(1)::before{
	content: "";
}
#detailModal-body .col-md-12 h4:nth-of-type(2)::before{
	content: "";
}

/* Currency disclaimer -- the text after <hr> is bare, un-wrapped content
   (confirmed markup), so CSS can't target its font-size/color directly;
   there's no selector for "the text after this element" the way there
   is for elements themselves. The <hr> is restyled instead into a clear
   "secondary note" cue -- dashed, with a small info icon -- so the
   section reads as auxiliary even though the text itself can't shrink. */
#detailModal-body .col-md-12 hr{
	margin: 18px 0 6px;
	border: none;
	border-top: 1px dashed var(--gray-300);
	position: relative;
	overflow: visible;
}
#detailModal-body .col-md-12 hr::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	position: absolute;
	left: 0;
	top: -7px;
	background-color: #fff;
	padding-right: 6px;
	color: var(--gray-500);
	font-size: 13px;
	line-height: 1;
}

.modal-property-title{
	text-transform: capitalize;
	color: var(--cyan-700);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
	#detailModal-body .row:has(.modal-property-title){
		display: flex;
		flex-wrap: wrap;
	}
	#detailModal-body .col-xs-12:has(.modal-property-title){
		flex: 0 0 33.333%;
		max-width: 33.333%;
		padding: 20px;
		border-right: 1px solid var(--gray-200);
	}
	#detailModal-body .col-xs-12:has(.modal-property-title):last-child{
		border-right: none;
	}
}
#detailModal-body .col-xs-12:has(.modal-property-title) p{
	font-size: 13px;
	color: var(--gray-700);
	margin-bottom: 6px;
}


/* Option A: filled/bordered inputs (was bottom-border-only "material" style) */
.input-line{
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	background-color: var(--gray-100);
	padding: 8px 12px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
	font-weight: bold;
}

.input-line:hover{
	cursor:pointer;
	border-color: var(--cyan-600);
}

.input-line-calendar, .input-line-calendar-text{
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	background-color: var(--gray-100);
	transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
	font-weight: bold;
	height:40px;
	
}
.input-line-calendar-text{
	cursor:default;
}

.input-line-calendar:hover{
	cursor:pointer;
	border-color: var(--cyan-600);
}

.input-line-calendar:focus {
	border-color: var(--cyan-600);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(8,121,144,.12);
    outline-width: 0;

}



.input-line:focus {
	border-color: var(--cyan-600);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(8,121,144,.12);
    outline-width: 0;

}



.disabled_btn {
	cursor: default !important;
	opacity: 0.3 !important;
	border-width: 1px !important;
	font-weight: normal !important;
}


#end_div{
padding:0px !important;
}

#start_div{
padding:0px !important;
}


#src_example{
    display: inline-block;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s var(--ease);
    outline: 0;
	    
	
}

#open_privacy_modal{
	color: var(--cyan-700);
}

#open_privacy_modal:hover{
	
	cursor:pointer;
	color: var(--dark-blu-color);
	text-decoration: underline;
	
}

.center_span{
display:block;
position:absolute;
left:10px;

top:0;
bottom:0;
margin:0 auto;

height:30px;
display: grid;
align-items: center;

}

.center_span_div{
height: 30px;
display: block;

}

.text-center{
text-align: center
}

.nopadding {
padding: 0 !important;
display: block;
position: relative;
height:29px;
}


.src-span{
	font-size: 16px;
	
}

.box-btn {display: inline-flex;align-items: center;justify-content: center;height: 22px;width: 22px;opacity: 1;border-radius: var(--radius-sm);border-width: 1px;border-style: solid;font-weight: 600;border-color: transparent;background-color: transparent;color: var(--cyan-700);transition: background-color .15s var(--ease), border-color .15s var(--ease);}

.box-btn:hover{
	cursor:pointer;
	background-color: var(--cyan-100);
	border-color: var(--cyan-700);
}

.src-occupancy-icon{
	
 font-size:18px !important;
}

.occupancy-icon{color: var(--black-color);}

.round-btn{

	
display: inline-block;
	
	height: 22px;
	width: 22px;
	
	opacity:1;
  		
	transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);

	border-radius: var(--radius-pill);
   	border-width:1px;
   	border-style:solid;
    border-color:var(--cyan-700);
	background-color: var(--grey-color);
	color:var(--cyan-900);
  	font-weight:normal;
}

.round-btn:hover{

	cursor:pointer;
   	border-color:var(--cyan-800);
	background-color: var(--cyan-100);
	color:var(--cyan-800);
	font-weight:bold;
}


.form-search{	
	width: 30px;
	height: 30px;
	text-align: center;
}

.room-number {
    font-size:14px;
    font-weight: 700;
    color: var(--cyan-700);
}




#container{
padding-left:10px;
padding-right:10px;

}

#space-div{
height: 46px;
}



.room_bed_div span::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	margin-right: 6px;
}

.input-group-addon:first-child {
    background-color: transparent;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
    border-left: 1px solid var(--gray-300);
    border-right: 0px;
    padding: 5px 12px;
}

.number-nights {
background: var(--cyan-700)9c !important;
color: white !important;
padding: 0px 3px;
border-right-style: dotted !important;
border-right-color: #f5f5f5 !important;

}



.room_header_span_add{
	margin-top: 8px;
	margin-bottom: 5px;
	background-color: transparent !important;
	color: var(--cyan-700);
	border: none !important;
	box-shadow: none !important;
	max-width: none !important;
	padding: 4px 0 !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.room_header_span_add::before{
	content: "+";
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.room_header_span_add:hover{
	color: var(--cyan-900);
	text-decoration: underline;
}



#search_calendar {
	text-align: center;
	border-top: 1px solid var(--gray-300);
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
	border-bottom: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
}

#search_calendar:hover {
	cursor: pointer;
}
#search_calendar_out{
	text-align: center;
	border-top: 1px solid var(--gray-300);
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
	border-bottom: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
}

.text-right-bottom{
bottom:0;
position: absolute;
}


.room_header_div{
margin-bottom: 10px;
padding: 10px 12px;
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
}


.navbar-icons{
margin-top:0px; 
}



.roo_desc_div .facilities_div{
display: block;

}

.smaller{
	    font-size: 70%;
}

.price_format small.smaller{
	font-size: 85%;
	vertical-align: baseline;
}

.selected-item{
	padding: 14px 16px;
	margin-top: 10px;
	margin-bottom: 10px;
    background-color: var(--white-color);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.all_rate_title{
	    color: var(--cyan-700);
    text-transform: uppercase;
}

.rm-cnt{
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 12px 14px;
	background-color: transparent;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
}

.div-title{
	margin-bottom: 5px;
}
.title{
	
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
	text-transform: uppercase;
}

.title>hr{margin-top: auto;margin-bottom: auto;border-top: 0px solid #91714c;flex: 1;}

.search-titles {
    font-weight: 500 !important;
    color: var(--black-color);
    padding: 2px 6px;
}




.active-hr{

	border-top: 2px solid var(--cyan-700) !important;
	
}


.paydata-span-basket,.paydata-span-detail{
	color: var(--black-color);
	padding: 5px 0px;	
}
#basket-penalties .paydata-span-basket{
	display: block;
	position: relative;
	padding-left: 22px;
	color: var(--black-color);
}
#basket-penalties .paydata-span-basket b{
	color: var(--green-600);
}
#basket-penalties .paydata-span-basket::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--green-500);
	position: absolute;
	left: 0;
	top: 2px;
}
#damage_deposit .paydata-span-basket{
	display: block;
	position: relative;
	padding-left: 22px;
	color: var(--gray-700);
}
#damage_deposit .paydata-span-basket::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--gray-500);
	position: absolute;
	left: 0;
	top: 2px;
}
.prepaiment_not_req{
	font-weight: 700;
}

.mrg-top-2{
margin-top: 2px;
}
.center-box-20 {
	line-height:20px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}
.center-box{
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    width:100%;
}

.item-divider {
    border-bottom: 1px dotted var(--cyan-700);
    width: 90%;
    margin: auto;
    display: inline-block;
    margin: 5px 0px 5px 5px;
}
.item-divider-cart {
    border-bottom: 1px dotted var(--cyan-700);
    width: 98%;
    margin: auto;
    display: inline-block;
    margin: 5px 0px 5px 5px;
}
.width-100pc{
	width:100%
	
}

.top-part {
	margin-bottom: 10px;
}
.vert-align-middle{
	vertical-align: middle;
}

.center-box-src {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}


/***************************** PAGE - LEFT COLUMN   ******************/

/************* Calendar section *************/
.calendar{
	padding: 0px 5px;
	color: var(--cyan-700);
	background-color: transparent;
	border: 0px solid #ccc;
	border-radius: 0px;
}


.calendar-icon {
border: 0px solid #ccc;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
background: var(--cyan-700)cc;
color: white;
padding: 0px 3px;
height: 34px;
}

.calendar-icon-person{
border: 0px solid #ccc;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
background: var(--cyan-700);
color: white;
padding: 0px 3px;
height: 34px;
}
/************* Add Remove Rooms section *************/

.btn-less{
	
}

.btn-plus{

}
.col-rooms{

    
}




.div-room-adult-occupancy,
.div-room-child-occupancy{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	flex: 0 0 26px;
	padding: 3px 0;
	font-size: 14px;
    vertical-align: middle;
}
.col-xs-6.text-center:not(.app_child_cnt),
.app_child_cnt.col-xs-6{
	flex: 0 0 50% !important;
	max-width: 50% !important;
	float: left !important;
	width: 50% !important;
	text-align: left !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gray-100);
}
.div-room-ages-occupancy{
	display: inline-flex;
	align-items: center;
	padding: 0px 3px !important;
	text-align: left !important;
	font-size: 12px;
    vertical-align: middle;
    white-space:nowrap;
}
.div-room-ages-occupancy::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	font-size: 13px;
	margin-right: 6px;
}
.div-room-adult-quantity{
  position: relative;
  padding: 5px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  display: inline-flex;
  flex: 0 0 auto;
}



.div-room-child-quantity{
  position: relative;
  padding: 5px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  display: inline-flex;
  flex: 0 0 auto;
}


.div-room-ages-quantity{
	white-space: nowrap;
    vertical-align: middle;
    background: transparent;
    padding: 5px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    display: inline-flex;
    flex: 0 0 auto;
}

.app_child_cnt.col-xs-12{
	flex: 0 0 100% !important;
	max-width: 100% !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	text-align: left !important;
	padding: 8px 0 8px 50% !important;
}

[id$="_children_append_container"]{
	margin-left: 0;
	margin-right: 0;
}
[id$="_children_append_container"] > .row{
	margin-left: 0;
	margin-right: 0;
}

.div-room-action-add{
    vertical-align: middle;
    width:25px
}
.div-room-action-remove{
    vertical-align: middle;
    width:25px;
}
.div-search-button{
	padding: 10px 0px 10px 0px;
	margin-left:0px;
	margin-right:0px;
}
.form-search-div{
	top: 9px;
	width: 25px;
	vertical-align: middle;
	display:inline-block;
	background-color: white;
}

/************* Cart section *************/



#cart-buttons{
	
	margin: 20px 0px ;
	
}
.cart-room-occupancy{
	font-size: 12px;
}
.cart-room-occupancy .occupancy-icon{
	font-size: 14px;
}
.cart-room-price{
	font-size: 12px;
    font-weight: 400;
}
.cart-room-price-curr{
	font-size: 12px;
    font-weight: 400;
    padding:0px 3px;
}
.cart-discount-curr{
	font-size: 12px;
    font-weight: 400;
    padding:0px 3px;
    color: #008000;
}

.cart-discount-desc{
	text-transform: capitalize;
	font-size: 12px;
	color: #008000;
}
.div-cart-discount-desc{
	text-align:right;
	text-transform: capitalize;
	font-size: 12px;
	color: #008000;
	padding: 0px 5px;
	width: 211px;
	display: inline-block;
}
.cart-discount-price {
	font-size: 12px;
	font-weight: 400;
	color: #008000;
	text-align: center;
	padding: 1px;
	display: inline-block;
}
#cart-items{
	min-height: 0px;
    background-color: var(--white-color);
}
#search-items{
	padding: 5px 5px;
    background-color: var(--white-color);
}
.cart-footer-height{
	display: block;
   margin-top: 10px;
   margin-bottom: 10px;
}

.crossDisabled{
	opacity:0.5;
}

#cart-products-alert{
	
	font-size: large;
	font-weight: 700;
}

#cart-products-alert>i{
	
	color=var(--red-color);
}

#cart-products{
	padding: 0px 10px;
}
.col-cart-remove{
	position: relative;
    text-align: center;
}
.div-cart-discount{
	padding: 0px 0px;
}
.div-cart-discount-price{
	padding: 0px 0px;
	width:50px;
	display:inline-block;
	text-align:center;
}
.div-cart-discount-curr{
	padding: 0px 0px;
	display:inline-block;
}
.div-cart-remove{
	width: 25px;
    vertical-align: middle;
    text-align:left;
}
#item_0 .item-divider-cart{
	display:none;
}
.div-room-desc{
	font-size: 12px;
	vertical-align: middle;
    width: 140px;
}
.div-room-occupancy{
	white-space: normal;
    width: 40px;
    vertical-align: middle;
}
.div-room-occupancy .occupancy-icon{
	font-size: 14px;
}
.div-room-price{
	white-space: nowrap;
    width: 50px;
    vertical-align: middle;
    text-align:center;
}
.div-room-curr{
	white-space: nowrap;
    vertical-align: middle;
}
#products-tab{
	margin-bottom:5px;
	
	padding: 10px 0px 0px 0px; 
}
.shopping-cart-button {
	padding: 1rem;
	background-color: var(--green-500);
	color: var(--white-color);
	border-radius: var(--radius-md);
	transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
	border: 0px;
}

.shopping-cart-item {
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #e6e6e6;
}




div.property-title div{
	width: fit-content;
    display: block;
    margin: 0 auto;
    display: flex;
  	justify-content: center;
	
}

	

span.property-title{
	display:inline-block;
	font-size:14px;
	font-weight:700;
	letter-spacing: .03em;
	text-transform:uppercase;
	
}
.property-address{
	font-size:12px;
	font-weight:400;
}
table.property-address{
	width: 100%;
}
table.property-address td{
	padding: 4px 8px 4px 0;
	vertical-align: top;
	color: var(--gray-700);
}
table.property-address td:first-child{
	width: 20px;
	padding-right: 8px;
	text-align: center;
}
#cart-footer{
	padding:5px
}
#cart-footer span{
	vertical-align:middle;
}
.privacy{

    text-transform: uppercase;
}

.pci{
	max-width: 60px;
}

.psd2{
	max-width: 45px;
}
#privacy_security{
	margin-top:5px;
	margin-bottom:5px;
}
/****************** PAGE - RIGHT COLUMN ******************/

/****** Top bar section **************************/

/****** currency - start **************************/

.btn-group-header{
	
}

.btn-group-header>button{
	min-height: 35px;
}

.active_lang, .active_curr {
    background-color: rgba(255,255,255,.2) !important;
    color: var(--white-color) !important;
}

.caret{
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: none;
    margin-left: 5px !important;
    opacity: .8;
    display: inline-block;
}
.dropdown, .dropdown .btn{
	   min-height: 30px;
}

.dropdown-menu{
	min-width: 130px;
	left: 0px;
	text-align:center;
	padding:0px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--gray-200);
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: var(--cyan-700);
}
.lang_flag, .changeLanguage i  {
    margin: 0px 5px 2px 0px;
    width: 20px;
    height: 15px;
}
/****** currency - end ************/


.changeLanguage:hover{
	
	cursor: pointer;
	
}

.changeCurrency:hover{

	cursor: pointer;
	
}

.navbar-icons>p {
    width: 110px;
    margin-left: -40px;
    text-align: center;
    text-transform: uppercase;
    font-size:11px;
}
.title-step {
  display: none;
  flex-flow:row;
  justify-content:center;
  align-items:center;
}
.title-step>hr {
	margin-top :auto;
	margin-bottom:auto;
	margin-right:-35px;
	margin-left:-10px;
	flex:1;
	border-top: 1px solid var(--cyan-700);
}

/* NOTE: the old inline-styled `UL.CurrMenu` / `.CurrMenu1` hover-flyout menu
   (a second, older currency-switcher implementation) has been removed here —
   it duplicated `.dropdown-menu` above and wasn't reachable from any current
   markup pattern in this file. If your currency switcher still renders via
   `<ul class="CurrMenu">` markup anywhere, tell me and I'll restore/rebuild
   it in the new token system instead of deleting it. */

/****************************** Search Results section *******************/
#daysselected {
    background: var(--white-color);
    padding: 10px;
    margin-left: 0px;
    margin-top: 10px;
    margin-right: 0px;
    border-radius: var(--radius-md);

}

#daysselected_header{
	color:var(--cyan-700);
}

.icon-change-warning{
	vertical-align: middle;
    padding: 0 10px;
    display: inline-block;
    color: #ff8c00;
}
#src_change{
	text-align:center;
	background: #faf88e;
    padding: 5px;
    margin: 5px 0px 0px 0px;
    border-radius: var(--radius-sm);
}
.src_change {
    line-height: 12px;
    background: #faf88e;
    padding: 5px !important;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.src_change i {
    vertical-align: middle;
    padding: 0 10px;
    display: inline-block;
    color: #ff8c00;
}



#alert-div{
	width:100%;
    background-color: var(--red-color);
    color: var(--white-color);
    position: fixed;
    top: 0;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 400;
    display: none;
    border-bottom: 2px solid var(--white-color);
    }

#alert-div i{
	vertical-align: middle;
    padding: 0 10px;
    display: inline-block;
    color: var(--white-color);
  
}

#alert-div span{

    color: var(--white-color);
}

.block-container{
	display: block;
	position: relative;
}

/************* Room Item section *************/
.best-price{
    vertical-align: middle;
    font-size: 20px;
    padding: 0 5px;
    white-space: nowrap;
}

.fac-pipe{
	display: none;
}

.offer_title {
    box-shadow: var(--shadow-sm);
    font-weight: 400 !important;
    font-size: 140%;
    width: fit-content;
    margin-top: 10px;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}




#contact-div{
	padding-left:15px;
	
}

#contact-div>i{
	padding-right:10px;
	
}

.remove_supps{
	background-color: var(--red-color);
	color: var(--white-color) !important;
}

.prepaid-titles{
	display: block;
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--black-color);
	text-align: left;
}
.prepaid-titles::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	position: absolute;
	left: 0;
	top: 1px;
}
.room-size{
	font-size: 14px;
}

.main-pg-div{
	background-color: var(--white-color);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 6px 14px;
}
.no-margin{
	margin: 0px;
}
.pg_sel{
	background-color: transparent;
	border: 0px solid var(--gray-300);
}
#main_div_pg_4 .payment-label{
	font-size: 15px !important;
	gap: 10px;
}
#main_div_pg_4 .payment-label img{
	margin-left: 0 !important;
	height: 22px !important;
	width: auto !important;
}

.pg-hr{
	margin: 10px 0px;
    border: 1px solid var(--gray-200);
}

#cc_div .containerx{
	max-width: 300px !important;
	max-height: 198px !important;
	height: 43vw !important;
	padding: 16px !important;
}
#cc_div .creditcard{
	max-width: 300px !important;
}
#cc_div .lightcolor.grey{
	fill: var(--cyan-700) !important;
}
#cc_div .darkcolor.greydark{
	fill: var(--cyan-900) !important;
}
.pg_infos p{
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-700);
}
.pg_infos p::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	position: absolute;
	left: 0;
	top: 2px;
}

.label-available {
	display: inline-block;
	font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px 10px;
    font-weight: 400;
    white-space: normal;
	background: var(--white-color);
	color:var(--cyan-700);
	border: 1px solid var(--cyan-900);
	border-radius: var(--radius-sm);
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
}

.label-available-last {
	
    font-size: 105%;
    font-weight: 400;
    display:inline-block;
    background:var(--red-color);
    color:var(--white-color);
    margin-top: 5px;
    vertical-align: text-top;
    border-radius: var(--radius-sm);
    transition: box-shadow .15s var(--ease), transform .1s var(--ease);

}


.msg-tab{
	
}

#instruction_title{
	
	color:var(--cyan-700);
}

.guest-title{
	font-weight: bold;
    color: var(--cyan-700);
	text-transform: uppercase;
}

.room-hr{
	margin-top:5px;
	margin-bottom:10px;
	border-top: 1px solid var(--light-grey-color);
	
}

.stars-color{
	color: white;
}

.address-hr{
	margin-top:5px;
	margin-bottom:10px;
	border-top: 1px solid var(--dark-grey-color);
	
}

.room-title{
	color: var(--black-color);
	font-size: 20px;
	font-weight: bold;
	text-transform: capitalize;
	font-weight: 500;
	width: fit-content;
	margin-top: inherit;
}



.label-room-quantity {
	vertical-align: middle;
	font-size: 13px;
	white-space: nowrap;
	font-weight: 600;
	color: var(--gray-600);
}

.last-available{
	color: var(--gold-tint-text);
}
.last-available::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 4px;
	font-size: 14px;
}

.label-room-quantity-desc {
	color: var(--gray-600);
	font-size: 11px;
}





.label-best-price {
	display: inline-block;
	font-size: 14px;
    margin-top: 5px;
    padding: 3px 5px;
    font-weight: 400;
    white-space: normal;
	background: var(--green-500);
	color:white;
	border-radius: var(--radius-sm);
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
}
.label-best-price-desc {
	line-height: 20px;
	vertical-align: text-top;
}



.rate-col-desc .col-xs-5.text-center .label-offer{
	display: none;
}
.cancellation_text{color: var(--green-500);display: block;margin: 4px 0px 8px 0px;font-weight: 500;font-size: 13px;}

.cancellation_text-nr{
	color:var(--red-color);
	display: block;
	margin: 4px 0px 8px 0px;
	font-weight: 500;
	font-size: 13px;
}

.cancellation_text-pr{
	color: forestgreen;
	display: block;
	margin: 4px 0px 8px 0px;
	font-weight: 700;
	font-size: 13px;
}

.div_mandatory_div{
	color: var(--red-color);
}



.rate-item:hover{
    box-shadow: var(--shadow-md);
    border-color: var(--gray-400);
}

.product-col{
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: transparent;
	border-left: 0px solid var(--white-color);
	border-top: 1px solid var(--gray-200);
	border-bottom: 0px solid  var(--white-color);
	transition: background-color .15s var(--ease), border-color .15s var(--ease);
}

.product-col:hover{
	background-color: var(--gray-100);
	border-top: 1px solid var(--gray-200);
	border-left:3px solid var(--cyan-700);
	border-bottom: 1px solid var(--gray-300);
	
}

.occupancy-center{width: auto;display: flex;align-items: center;justify-content: flex-end;margin: 0;padding-right: 6px;color: var(--black-color);}




.rate-item-col{
}
.rate-title{
	color: var(--black-color);
	font-weight: 700;
	font-size: 15px;
	text-transform: capitalize;
}

.cart-dates-details{
	background: whitesmoke;
	padding: 0 !important;
}
.cart-dates-info{
	background: whitesmoke;
    padding: 5px
}

/********************** OPTIONS PAGE - Supplements  ********************/
.supp_item_div {
	min-height: 200px;
    padding-top: 15px;
    padding-right: 0px;
    padding-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-left: 0px;
}
.label-supp-best-price {
	display: inline-block;
	font-size: 14px;
    margin-top: 5px;
    padding: 3px 5px;
    font-weight: 400;
    white-space: normal;
	background: var(--green-500);
	color:white;
	border-radius: var(--radius-sm);
}
.label-supp-quantity-desc {
	line-height: 20px;
	vertical-align: text-top;
}
.supp-best-price{
    vertical-align: middle;
    font-size: 20px;
    padding: 0 5px;
    white-space: nowrap;
}
.label-supp-price-type {
	display: inline-block;
	font-size: 14px;
    margin-top: 5px;
    padding: 3px 10px;
    font-weight: 400;
    white-space: normal;
	background: darkgoldenrod;
	color:white;
	border-radius: var(--radius-sm);
}

.label-supp-price-type-desc {
	line-height: 20px;
	vertical-align: text-top;
}
.label-supp-price-type-quantity {
	display: inline-block;
	vertical-align: middle;
    font-size: 20px;
    padding: 0 5px;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 400;
}
.supp-vert-align-container{
    height: 30px;
    vertical-align: middle;
    position: relative;
}

.label-supp-total {
	display: inline-block;
	font-size: 14px;
    margin-top: 5px;
    padding: 3px 10px;
    font-weight: 400;
    white-space: normal;
	background: var(--cyan-600);
	color:white;
	border-radius: var(--radius-sm);
}
.label-supp-total-desc {
	line-height: 20px;
	vertical-align: text-top;
}
.label-supp-total-type-quantity {
	display: inline-block;
	vertical-align: middle;
    font-size: 20px;
    padding: 0 5px;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 400;
}
.font-weight-500{
	font-weight: 500;
}

.font-weight-700{
	font-weight: 700;
}

#basket_tax{
	padding: 0px 10px;
}
#basket{
	margin: 10px 0px;
    padding-left: 5px;
    padding-right: 5px;
}
.span-tax-curr{
	padding-left:3px;
	font-size:12px;
}
#cart_tab{
	padding: 0px 10px;
	margin: 20px 0px;
}
#taxes-tab{
	margin-bottom: 15px;
    margin-top: 15px;
}
.row-net, .row-taxes, .row-totale, .row-in-place{
	text-align:right;
}
.row-net, .row-taxes, .row-in-place, .row-totale-prepaid{
	text-align:right;
	font-size:12px;
	
}



.local_tax_span{
	padding-left:10px;
	font-size: smaller;
	display: block;
}

.row-totale{
	font-weight:700;
	font-size:14px;
	height:30px;
	border-bottom: 0px solid #dfdfdf;
    border-top: 0px solid #dfdfdf;
    background: whitesmoke;
    padding: 7px 0px 0px 0px;
    margin: 0px 0px 5px 0px;
    border-radius: var(--radius-sm);
}
.supp-heading-optional{
	font-size: 16px;
	
}



.add_supplement.mandatory{
	font-weight: 400;
	padding-top: 10px;
    font-size: 14px;
    text-transform: uppercase;
	
}

.supp_table td {
	padding: 5px 10px 5px 10px;
}

.supp-valign-optional{
	height: 50px;
}
.supp-valign-supplementi{
	height: 50px;
}
.supp-valign-room-title{
	height: 50px;
}
.supp-valign-title{
	height: 30px;
}
.div-supp-optional-title{
	text-align:center;
}
.div-supp-optional-back{
	text-align:left;
}
.div-supp-optional-skip{
	text-align:right;
}
.div-supp-item-room-title{
	text-align:center;
}




.div-supp-item-title{
	text-align: left;
	padding: 0px 0px 10px 0px !important;
	color: var(--black-color);
	font-weight: 700;
	font-size: 15px;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 10px;
}
.supp-item{
    border: 0;
    border-top: 0px solid #fefefe;
    border-bottom: 0px solid #dbdada;
    background: #fff;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 8px;
}


#supp-nav-bar-skip{
	
	min-height: 50px;
	padding-top: 5px;
	padding-right: 0px;
	padding-left: 0px;
	margin-top: 5px;
    margin-right: 0px !important;
    margin-left: 0px !important;
	
}





.supp-block-item-desc{
	font-size:11px;
	margin-bottom: 0px;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	border-radius: var(--radius-sm);
	padding: 5px 7px;
	line-height: 1.4;
}
.supp-block-item-price{
	font-size:14px;
	font-weight:400;
	
}
.supp-block-item-curr{
	font-size:14px;
	font-weight:400;
}
.supp-block-total-desc{
	font-size:13px;
	font-weight:500;
	color: var(--gray-600);
	
}
.supp-block-total-price{
	font-size:14px;
	font-weight:700;
}
.supp-block-total-curr{
	font-size:14px;
	font-weight:700;
}
.div-supp-room-title{
	font-size:14px;
	font-weight:400;
	margin-bottom: 0;
	margin-left:0px;
	margin-right:0px;
	color: var(--black-color);
	background-color: #fff;
	padding:5px;
	display: flex;
	align-items: center;
}





.div-supp-room-title-container{
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 1px solid var(--gray-200);
    margin-bottom: 5px;

}

.div-supp-title{
	font-size:14px;
	font-weight:700;
	background: #fff;
	margin-bottom: 10px;
}
.div-supp-btn-add{
	padding: 10px 0px 5px 0px;
	text-align: center;
}
.supp-room-title{
	font-size:18px;
	font-weight:700;
	color: var(--black-color);
}
.supp-title{
	font-size:14px;
	font-weight:700;
}

.modal-title{
	color: var(--cyan-700);
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.modal-header{
	position: relative;
	padding: 18px 44px 16px 24px;
	border-bottom: 1px solid var(--gray-200);
}
.modal-header .close{
	position: absolute;
	top: 14px;
	right: 20px;
	font-size: 24px;
	font-weight: 400;
	color: var(--gray-500);
	opacity: 1;
	background: none;
	border: none;
	transition: color .15s var(--ease);
}
.modal-header .close:hover{
	color: var(--cyan-700);
}

.modal-body{
	padding: 24px 28px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--gray-800);
	max-height: 72vh;
	overflow-y: auto;
}
.modal-body h4{
	color: var(--cyan-700);
	font-size: 16px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 14px;
	line-height: 1.4;
}
.modal-body strong{
	color: var(--black-color);
	display: inline-block;
	margin-top: 18px;
	margin-bottom: 6px;
	font-size: 14.5px;
}
.modal-body label{
	color: var(--black-color);
	display: block;
	margin-top: 18px;
	margin-bottom: 4px;
	font-size: 14.5px;
	font-weight: 700;
}
.modal-body > div > span{
	display: block;
	margin-bottom: 8px;
}
#accept_term_conditions_div{
	padding-top: 8px;
}
#accept_term_conditions_div input[type="checkbox"]{
	accent-color: var(--cyan-700);
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	cursor: pointer;
}
#accept_term_conditions_div #accept_term_conditions_close_modal{
	margin-top: 14px;
}
.modal-body p{
	margin-bottom: 12px;
}
.modal-body ul{
	margin-bottom: 12px;
	padding-left: 22px;
}
.modal-body li{
	margin-bottom: 6px;
	line-height: 1.6;
}
.modal-body ul ul{
	margin-top: 8px;
	margin-bottom: 0;
}
.modal-body li::marker{
	color: var(--cyan-700);
}

.blu_btn{
	border-radius: var(--radius-md);
    width: fit-content;
    color: var(--white-color);
    background-color: var(--cyan-700);
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}



.room-available{
	margin-top: 8px;
	font-size: 13px;
}

.more-btn-div{
	width: 100%;
	text-align: center;
}

.readMoreSpan{
	transition:all .2s var(--ease);
	width: fit-content;
}

.readMoreSpan:hover{
	cursor:pointer;
	text-decoration: underline;
}

/*animations*/

.blu_btn:hover{
	color: var(--white-color);
    background-color: var(--cyan-800);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.sqm{
  transform: rotate(-45deg);
}



.room-info > span{
	font-size: 75%;
}

.room-detail-icon{color: #0a0a0a;font-size: 15px !important;}

#detailModal-body .col-md-5{
	font-size: 14px;
	line-height: 1.6;
	padding-top: 6px;
}

#detailModal-body .room-facilities{
	font-size: 12px;
	padding: 3px 9px;
}

.input-line-calendar{
text-align: center;	
}





#rc_powered_inner:hover{
	cursor: pointer;
}





/* badge/button hover: translateY + shadow instead of scale() (scale distorts
   text at small sizes and feels dated vs. a lift-and-shadow interaction) */
.label-best-price:hover{
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.label-available:hover{
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.more-btn:hover{
	transform: translateY(-2px);
}

.label-available-last:hover{
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}



.label-offer:hover{
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.booking-item{
	
	padding: 15px 0px;
	margin-top:5px;
	margin-right:0px;
	margin-left:0px;
}
.box-btn-remove {
    display: inline-block;
    height: auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 10px;
    padding: 2px 4px;
    width: auto;
    opacity: 1;
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
    font-weight: normal;
    border-color: #b2222247;
    background-color: #b222221c;
    color: #b22222;
    transition: background-color .15s var(--ease);
}
.box-btn-remove:hover{
	background-color: #b2222233;
}
.room-number-supp {
    font-size: 12px;
    background: none;
    color: var(--white-color);
    border-radius: var(--radius-sm);
    font-weight: 700;
}
#cart-items .div-room-num.item-row{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
#cart-items .div-room-num.item-row > div{
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}
#cart-items .div-room-num.item-row .col-lg-10{
	flex: 1 1 auto;
	min-width: 0;
}
#cart-items .div-room-num.item-row > div:first-child{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background-color: transparent;
	color: var(--cyan-700);
	font-weight: 700;
	border-radius: 0;
	padding: 0;
}
#cart-items .div-room-num.item-row > div:first-child::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	margin-right: 4px;
	font-size: 13px;
}
.cart-supp-desc{
	text-transform: capitalize;
	font-size: 12px;
}
.cart-supp-price{
	font-size: 12px;
}
.cart-supp-curr{
	font-size: 12px;
}
.cart-supp-rate-desc {
    font-size: 12px;
    font-weight: 700;
    color: var(--black-color);
    display:block;
    text-transform:capitalize;
}
.span-total-tax-curr{
	font-size:14px;
	padding-left:3px;
}
#span_total{
	font-size: 24px;
	font-weight: 700;
	color: var(--black-color);
}
#row-total .total-titles{
	font-size: 15px;
	font-weight: 700;
	color: var(--black-color);
}
#row-total .currency-font{
	font-size: 24px;
	font-weight: 700;
	color: var(--black-color);
}


.supp-block-col{
	padding-left: 0;
	padding-right: 0;
	max-width: none !important;
	width: auto !important;
	float: none !important;
}


.supplements-container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	padding-left:10px;
	padding-right:10px;
}

.cart-products-items{
	padding: 10px 5px;
    background-color: #fff;
}
.cart-taxes{
	padding: 0px 5px 10px 5px;
    background-color: #fff;
}
.item-price{
	font-size:14px
}
.item-price-curr{
	padding:0px 3px;
	font-size:14px;
}
#cart-total{
	font-size:20px
}
.cart-total-curr{
	font-size:20px;
	vertical-align: middle;
}
.shopping-cart-button i {
	margin-right: 0.5rem;
	font-size: 20px;
}
.text .form-control{
	margin-bottom: 5px;
}
.cart-info.readMore{
	font-size: 12px;
}
.text.form-control, select.form-control{
	margin-bottom: 5px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--gray-300);
	background-color: #fff;
	padding: 10px 12px 10px 44px;
	font-size: 14px;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
select.form-control{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23087990' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
	height: 44px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 44px;
}
input[name="first_name"], input[name="last_name"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}
input[name="email"], input[name="email_confirmation"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2'/%3E%3Cpath d='M4.5 7.5l7.5 6 7.5-6'/%3E%3C/svg%3E");
}
input[name="clientAddress"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
input[name="city"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='9' height='18'/%3E%3Crect x='13' y='9' width='7' height='12'/%3E%3Cpath d='M7 7h2M7 11h2M7 15h2M16 13h1M16 17h1'/%3E%3C/svg%3E");
}
input[name="zipcode"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l8-8h5a2 2 0 0 1 2 2v5l-8 8a2 2 0 0 1-2.8 0l-4.2-4.2a2 2 0 0 1 0-2.8z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.3'/%3E%3C/svg%3E");
}
textarea.text.form-control{
	background-image: none;
	padding-left: 12px;
}
.text.form-control:focus, select.form-control:focus{
	border-color: var(--cyan-600);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(8,121,144,.12);
	outline: none;
}
.text.form-control::placeholder{
	color: var(--gray-500);
}
#guest_detail_box_table > .row{
	margin-bottom: 4px;
}
#guest_detail_box_table > .row:nth-child(2){
	margin-bottom: 18px;
}
#guest_detail_box_table > .row:nth-child(4){
	margin-bottom: 18px;
}

.info-span{
	color: var(--cyan-700);
	font-weight: 700;
	cursor: pointer;
}
.info-span .readMore{
	color: var(--cyan-700);
	margin-left: 4px;
}
.info-span::after{
	content: " *";
	color: var(--red-color);
	font-weight: 700;
}
.info-span:hover{
	text-decoration: underline;
	font-weight: bold;
	cursor: pointer;
}

#privacy-info-div .form-group{
	background-color: var(--gray-100);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	height: 100%;
	box-sizing: border-box;
}
#privacy-info-div input[type="checkbox"]{
	accent-color: var(--cyan-700);
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	cursor: pointer;
}
#privacy-info-div small.help-block{
	color: var(--red-600);
	font-size: 12px;
	display: block;
	margin-top: 8px;
}
#submitReservation{
	font-size: 14px;
	padding: 14px 24px;
}


.book-block-col{
	padding: 0px 0px 0px 0px
}

.book-block{
	background: transparent;
	margin-bottom: 0px;
	padding:15px;
}
.book-block-item-desc{
	font-size:12px
}
.book-payment-block{
	background: #fff;
	margin-bottom: 0px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding:15px;
}
.book-privacy-block{
	background: #fff;
	margin-bottom: 0px;
	min-height: 50px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding:15px;
}

.room-number-num{
	font-size: 12px;
	font-weight: 700;
	color: var(--cyan-700);
}
.cart-products{
	padding: 0px 10px;
}


.basket-btn{
font-size: 24px;
	
}


.be-label{
	
}


.notav-more-btn{
	
    padding-left: 15px;
    padding-right: 15px;
    position: static !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

.more-btn{
	position: static !important;
	bottom: auto !important;
	margin-top: 12px !important;
    transition: transform .1s var(--ease);
}





.btn-add-sup{
	width: 100%;
	margin-top: 4px;
}
.btn-add-sup:focus-visible{
	outline: 2px solid var(--cyan-500);
	outline-offset: 2px;
}

.room-number-num-supp-block{
	font-size: 20px;
    background-color: none;

    color: var(--cyan-700);
    border-radius: var(--radius-sm);
    font-weight: 400;

}
.room-number-num-supp-block::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 5px;
	font-size: 14px;
}



.cart-room-desc {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--cyan-700);
}
.cart-btn-bck{
	vertical-align: middle;
	width:45%;
	float: left;
}
.cart-btn-fwd{
	vertical-align: middle;	
	width:45%;
	float: right;
}
.cart-total-price{
	vertical-align: middle;	
}
.cart-icon{
	vertical-align:middle;
}

.src-room-add{
}
.book-checkin-details{
	position: relative;
	padding: 10px 14px 10px 32px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-700);
	background-color: var(--slate-tint-bg);
	border-radius: var(--radius-md);
	display: inline-block;
}
.book-checkin-details::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--cyan-700);
	position: absolute;
	left: 12px;
	top: 12px;
	font-size: 14px;
}
.book-checkin-details strong{
	color: var(--black-color);
	margin-right: 4px;
}


#spinner{
	width: 100%;
	height: 100%;
	background: #ffffffb0;
	position: fixed;
	z-index: 10000;
}

#spinner>div{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/****************************************		cookies		********************************************/

#cookies_modal{
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #2228;
    position: fixed;
    top: 0;
    z-index: 30;
}

#cookies_content{
display: block;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: 600px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 31;
    background-color: var(--white-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    
}

.cookies_title{
	text-align:center;
	color: var(--cyan-700);
	margin-top: 10px;
	margin-bottom: 0px;
}

.cookies_text{
	padding-bottom: 10px;
    display: block;
}

#cookies_actions{
	text-align:center;
	display: block;
}

.cookie_hr{
	margin-top: 10px;
    margin-bottom: 10px;

	border-top: 1px solid var(--cyan-700);
}



#cookieAcceptButton{
    border-radius: var(--radius-md);
    color: var(--white-color);
    background-color: var(--cyan-600);
	margin: 10px;
	transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}

#cookieAcceptButton:hover{
	background-color: var(--cyan-700);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}





/*******************************************		end cookies		*****************************************/

.pin-input{
width: 60%;	
}

.basket-occupancy-icon{
	font-size: 16px !important;
	color: var(--cyan-700);
}

.item-row{
	margin-left: 0px;
    margin-right: 0px;
    padding-top: 5px;
}
.product_total{
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-600);
	margin-right: 4px;
}

#basket-tab-div{
	margin-top: 10px;
}

#basket-tab{
	margin-top: 10px;
	background-color: var(--white-color);
	padding-bottom: 15px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

#formSearch{
	margin-bottom: 0px;
}

#basket_next>i{
	
	animation: bounce-2 5s infinite;
	
}

.icons-div{
	padding: 0px;
	padding-right: 0;
}
.product-col .col-xs-7.rate-item-col.text-left{
	padding-left: 6px;
}

.best-price-div{
	text-align: center;
	width: 100%;
}


	    @keyframes pulsex {
        0%   { transform: scale(1); }
        84%  { transform: scale(1); }
        88%  { transform: scale(1.05); }
        92%  { transform: scale(1); }
        96%  { transform: scale(1.05); }
        100% { transform: scale(1); }
	}

    @keyframes bounce-2 {
        0%   { transform: translateX(0); }
        84%   { transform: translateX(0); }
        88%  { transform: translateX(3px); }
        92% { transform: translateX(0); }
        96%  { transform: translateX(3px); }
        100% { transform: translateX(0); }
    }
    
.best-price-span{
	padding-top:0;
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-600);
}
.best-price-span .price_format{
	font-size: 20px;
	font-weight: 700;
	color: var(--black-color);
}


.children-occupancy-icon{

}
#change_search_criteria{
	margin-top:20px;
}
/******************************************			FLOATING BASKET		*********************************************/


#basket_form{
	margin-top: 0px;
}

    
#close_basket_hr{
	border-top: 1px solid var(--light-grey);
}    
    
#close_basket_div{
	
}   

.basket_row{
	margin-left: 0px;
    margin-right: 0px;
}

.basket_hr{
	margin-top:16px;
	margin-bottom:0;
	border-top: 1px solid var(--gray-200);
}
#cart > hr.basket_hr:last-of-type{
	display: none;
}

#to_complete_message,
#select_supplements,
#complete_message{
	background-color: var(--gray-100);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-top: 12px;
}
#back_div_message span,
#supplement_message span,
#basket_full span{
	font-size: 13px;
	color: var(--gray-700);
}
#back_div_button,
#select_supplements_button,
#basket_full_button{
	margin-top: 12px;
}
 
.cart-cls{
	background-color: var(--white-color);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
   
  
.cart-container-cls{
    background-color: transparent;
} 
.cart-container-cls:has(> .cart-cls-floating){
	background-color: #00000050;
}
    
#floating_basket_footer{
	max-height: 65px;
	z-index: 25;
	position: fixed;
	bottom: 0px;
	left: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px 16px 20px;
}    

#floating_basket_footer_icon_div{
	position:relative;
	overflow:hidden;
	background-color: #5C7285;
	width: -moz-fit-content;
	width: fit-content;
	flex: 0 0 auto;
	padding: 15px;
	border-radius:var(--radius-pill);
	border: none;
	box-shadow: var(--shadow-md);
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	z-index: 10;
}
#floating_basket_footer_icon_div:hover{
	box-shadow: var(--shadow-lg);
	transform: translateY(-1px);
	cursor: pointer;
}
#floating_basket_footer_icon_div:active{
	transform: translateY(0);
	box-shadow: var(--shadow-md);
}
  
#shine-div {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 15px;
height: 100%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation: shine1 .5s ease-in-out 3;
background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.33) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

@keyframes shine1 {
  0% {
    left: -20px;
    top: 0px;
  }

  100% {
    left: 50px;
    top: 0px;
  }
}
  
  
    
#floating_basket_footer_icon{
	
	font-size: 28px;
	color: var(--white-color);
	
} 
 
#floating_basket_footer_content{
	border-radius:var(--radius-md);
	border: none;
	box-shadow: var(--shadow-md);
	z-index:9;
	background-color: #5C7285;
	position: static;
	width: auto !important;
	min-width: 80px;
	max-width: 240px;
	padding: 10px 20px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

#floating_basket_footer_total{
	position: static;
	transform: none;
}

#floating_basket_footer_total>span{
	
	font-size: 22px;
	font-weight: 550;
	color: var(--white-color);
	
}

    
#floating_basket_footer_span_total{

}   
#floating_basket_footer_span_total_currency{

}  

/***************************************************************************************************************************/


#basket-action{
	display:none;
	border: 2px solid var(--dark-blu-color);
    font-weight: bold;
    text-decoration:underline;
	background-color: white;
    position: fixed;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 50px;
    padding-right: 50px;
    top: 20px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: fit-content;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}


#basket-action-message-ok{
	color: var(--cyan-600);
}

#basket-action-message-no{
	color: var(--cyan-600);
}


/*------------------------------------------------------------
MAP
------------------------------------------------------------*/


.map {
	display:none;
	height: 500px;
	border-radius: var(--radius-md);
}

.map-open:hover{
	cursor: pointer;
	text-decoration:underline;
	font-weight: 700;
}


.maptext {
	margin-bottom: 20px;
	display: block;
}

#map_title, #text_description, #distance_title, #distance_description {
	width: 100%;
	max-width: 100%;
}

#text_description, #distance_description {
	margin-bottom: 20px;
}

#text_description .text_description, #distance_description .text_description {
    padding: 10px;
    font-size: 90%;
}

#map_title .text_title, #distance_title .text_title {
    border: medium none;
    font-size: 120%;
    padding: 10px;
}

.scroll-helper-expand{
	padding-right:5px !important;
	overflow-y:scroll !important; 

}

.pad-right-15{
	padding-right: 15px!important;
}

.pad-right-5{
	padding-right: 5px!important;
}

.pad-top-5{
	padding-top:5px;
}

.scroll-helper-reduce{
	padding-right:25px !important;
	overflow-y:hidden !important; 
}

.empty_room_error{
	margin-top: 4px;
}

.adults_span_error {
	color: var(--red-color) ;
}


#show_crossed{
	margin-top:10px;
	margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
	padding:10px;
	font-weight:700;
	text-align: center;

}

.show_crossed_span{
	color: var(--cyan-700);
	
	font-size: 14px;
}

.show_crossed_span:hover{
color: var(--cyan-700);
	cursor: pointer;
	text-decoration: underline;
	
}


/****************************		SAFEBOOKING   ******************************************/

.safebooking_logo{
	
	max-width: 100%;
}

.safebooking_confirm_logo{
	max-width: 100%;
}

.safebooking_activation_div{
	padding-top: 10px;
}

.safebooking_amount{
    color: var(--blu-color);
	
}


.safebooking-price {
	font-size: 16px;
    font-weight: 700;
}

#safebooking_accept{
	
}


/**************************   COMPARATOR START  **************************************/
#comparator-div {
	margin-top:16px;
    margin-bottom: 16px;
    position: relative;
    min-height: 4px;
    overflow: hidden;
}



#comparator_loader {
  height: 4px;
  width: 100%;
  top: 0;
  position: absolute;
  overflow: hidden;
  background-color: inherit;
}


#comparator_loader:before {
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 200px;
    height: 4px;
    animation: loading 2s linear infinite;
    background-color: var(--cyan-700);
}


#comparator {overflow: hidden;background: transparent;border: none;display: block;}

#comparator > .clearfix{
	display: flex;
	align-items: stretch;
	padding: 4px 20px 10px;
}

.best-offer {
	padding: 9px 20px;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	text-align: center;
	width: 100%;
}
.best-offer .property-title{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	display: inline-flex;
	align-items: center;
}
.best-offer .property-title::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 8px;
	font-size: 14px;
}

.site-offer, .portal-offer{
	flex: 1 1 50%;
	padding: 8px 20px !important;
	text-align: center;
}


.title-font label{
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--gray-600);
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 6px;
}
.portal-desc{
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--gray-600);
	margin-bottom: 6px;
}

.site-amount{
	font-size: 26px;
	font-weight: 700;
	color: var(--green-600);
}
.site-currency{
	font-size: 14px;
	color: var(--green-600);
	font-weight: 600;
}
.site-price::before{
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	color: var(--green-500);
	margin-right: 6px;
	font-size: 14px;
}

.portal-amount{
	font-size: 18px;
	font-weight: 600;
	color: var(--gray-500);
	text-decoration: line-through;
}
.portal-currency{
	font-size: 13px;
	color: var(--gray-500);
	text-decoration: line-through;
}


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

	#comparator > .clearfix{
		flex-direction: column;
	}
	.site-offer{
		border-right: none;
		border-bottom: 1px solid var(--gray-200);
	}
}




.site-offer {
	border-right: 1px solid var(--gray-200);
	color: var(--green-500);
}


.portal-offer{
	color: var(--red-500);
}


.clearfix:after{
    clear: both;
}

.clearfix:before{
    display: table;
    content: " ";
}


@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


/**************************   COMPARATOR END  **************************************/

/**************************    PAGE LOADER SPIN START ****************************/

.loader {
  border: 10px solid var(--gray-300); /* Light grey */
  border-top: 10px solid var(--cyan-600); /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1.5s linear infinite;

}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/**************************    PAGE LOADER SPIN END ****************************/
/* ============================================================================
   MODERNIZATION PATCH — ongoing, many rounds past the original v1-v4 base.
   This header is intentionally brief now; individual sections below carry
   their own up-to-date rationale. Notable reversal: an earlier version
   applied a serif display font (Fraunces) broadly across titles/names
   site-wide — removed entirely per explicit request once it stopped
   reading as an accent and started reading as the site's default font.
   Nothing in this file currently overrides font-family anywhere.
============================================================================ */



/* ----------------------------------------------------------------------
   1. TYPOGRAPHY
   Serif (Fraunces) was tried across property-title/room-title/rate-title/
   modal titles/cart room name/supplement names over the course of this
   session, but ended up applied broadly enough that it stopped reading
   as an accent and started reading as "the site's font" — removed
   entirely per explicit request. Everything below reverts to the base
   stylesheet's original DM Sans treatment; no font-family override
   remains anywhere in this patch.
------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------
   2. FACILITIES — fixed cap (4 visible) + counted "+X" badge, replacing
   the hover-to-expand approach. Hover never worked on touch devices
   anyway, so this is a real improvement, not just a style swap: it's
   discoverable at a glance on every device, no interaction required.

   Pills past the cap are hidden via absolute-positioning + zero-size
   rather than display:none — this matters because CSS counters only
   increment on elements that generate a box, and display:none elements
   don't. This keeps them "counted" for the badge while removing them
   from view and from the document flow.
------------------------------------------------------------------------- */
.facilities_div {
	border-top: solid 1px var(--gray-200);
	color: var(--gray-700);
	padding-top: 5px;
	position: relative;
}

.facilities_div .room-facilities:nth-of-type(n/**/+5) {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden !important;
	opacity: 0;
	pointer-events: none;
}

/* "And more" note instead of a specific count or action cue — the card
   only ever receives a partial facilities list (confirmed: 9 in the
   card's own markup vs. 23 in the modal's separately-fetched full
   list), so a counted "+N" badge would be misleading. This is purely
   informational, not a link — no arrow, muted color, no hover state —
   since CSS-generated content (::after) can't actually be made
   clickable without JS, which isn't part of this deployment. */
.facilities_div::after {
	content: none;
}
.facilities_div:has(.room-facilities:nth-of-type(5))::after {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 500;
	font-style: italic;
	color: var(--gray-500);
	padding: 4px 2px;
	vertical-align: middle;
}
html:has(#lang_bar a.active_lang[data-target="it"]) .facilities_div:has(.room-facilities:nth-of-type(5))::after { content: "e altre"; }
html:has(#lang_bar a.active_lang[data-target="en"]) .facilities_div:has(.room-facilities:nth-of-type(5))::after { content: "and more"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .facilities_div:has(.room-facilities:nth-of-type(5))::after { content: "et plus"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .facilities_div:has(.room-facilities:nth-of-type(5))::after { content: "y más"; }

.room-facilities {
	text-transform: uppercase;
	font-size: 11px;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	border: 1px solid var(--slate-tint-bg);
	color: var(--slate-tint-text);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	margin: 0 5px 5px 0;
	display: inline-block;
	font-weight: 700;
	transition: color .15s var(--ease);
}



/* ----------------------------------------------------------------------
   3. MOTION — unchanged from v3
------------------------------------------------------------------------- */
@keyframes rc-card-in {
	from { opacity: 0; transform: translateY(22px) scale(.98); }
	70%  { opacity: 1; }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.search-result-item {
	min-height: 200px;
	padding: 15px 0px;
	margin-top: 5px;
	margin-right: 0px !important;
	margin-left: 0px !important;
	animation: rc-card-in .5s cubic-bezier(.22,1,.36,1) both;
}
.search-result-item:nth-of-type(1) { animation-delay: .02s; }
.search-result-item:nth-of-type(2) { animation-delay: .10s; }
.search-result-item:nth-of-type(3) { animation-delay: .18s; }
.search-result-item:nth-of-type(4) { animation-delay: .26s; }
.search-result-item:nth-of-type(5) { animation-delay: .34s; }
.search-result-item:nth-of-type(6) { animation-delay: .42s; }

.col-md-3.search-result-gallery.room-col img {
	width: 235px;
	height: 180px;
	object-fit: cover;
	object-position: center;
	padding: 0px;
	transition: transform .5s var(--ease);
}
.col-md-3.search-result-gallery.room-col:hover img {
	transform: scale(1.09);
}

@keyframes rc-cart-in {
	from { opacity: 0; transform: translateY(28px) scale(.96); }
	60%  { transform: translateY(-3px) scale(1.01); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cart-cls-floating {
	background-color: var(--white-color);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	animation: rc-cart-in .38s cubic-bezier(.22,1,.36,1) both;
}

.be-btn,
.btn-two,
.btn-one {
	transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.be-btn:hover,
.btn-two:hover,
.btn-one:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.be-btn:active,
.btn-two:active,
.btn-one:active {
	transform: translateY(0) scale(.97);
	box-shadow: var(--shadow-sm);
}

.label-offer {
	font-weight: 700 !important;
	white-space: normal;
	display: inline-block;
	color: var(--gold-tint-text) !important;
	background-color: var(--gold-tint-bg) !important;
	border: 1px solid var(--gold-tint-text);
	padding: 5px 12px !important;
	border-radius: var(--radius-pill) !important;
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	position: relative;
	overflow: hidden;
	border-color: var(--gold-tint-border) !important;
	font-size: 11px !important;
	letter-spacing: .02em;
	animation: rc-urgency-pulse 2.4s ease-in-out infinite;
}


/* ----------------------------------------------------------------------
   4. RATE COMPARISON — offer ribbon replaces the old "recommended" logic
   Previous version tried to pick ONE rate to recommend (first
   refundable), which needed an arbitrary tie-breaking rule and couldn't
   express "this rate has a discount" as a fact. Discount presence is
   per-rate, not comparative — multiple rates can honestly show this
   badge at once, no dedupe/tie-breaking needed, unlike "recommended."
   Confirmed selector: .label_perc_discount is the actual "-10%" badge,
   only rendered when a discount applies (real outerHTML confirmed).
   Gold instead of green, matching the deal-badge convention used
   elsewhere on the page (offer badge, discount pill on room cards).
------------------------------------------------------------------------- */
.rate-item {
	border: 1px solid var(--gray-300);
	background: #fff;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: -5px;
	margin-right: -5px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
	position: relative;
}
.rate-item:has(.label_perc_discount) {
	border: 2px solid var(--gold-tint-border);
	background-color: rgb(138 90 21 / 0%);
	padding-top: 8px;
}
.rate-item:has(.label_perc_discount)::before {
	/* fallback content if the language selector below doesn't match —
	   see #lang_bar detection further down */
	content: "OFFER";
	position: absolute;
	top: -1px;
	right: -1px;
	background-color: var(--gold-tint-text);
	color: var(--gold-tint-bg);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-md) 0 var(--radius-md);
}
html:has(#lang_bar a.active_lang[data-target="it"]) .rate-item:has(.label_perc_discount)::before { content: "OFFERTA"; }
html:has(#lang_bar a.active_lang[data-target="en"]) .rate-item:has(.label_perc_discount)::before { content: "OFFER"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .rate-item:has(.label_perc_discount)::before { content: "OFFRE"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .rate-item:has(.label_perc_discount)::before { content: "OFERTA"; }
.rate-item:has(.cancellation_text-nr) {
	opacity: .92;
}


/* ----------------------------------------------------------------------
   10. CALENDAR (litepicker)
   #1/#2/pulse use classes already confirmed in your base stylesheet
   (.container__months, .day-item.is-in-range/.is-start-date/.is-end-date).
   Nav arrows and footer use litepicker's documented public class names
   (.button-previous-month, .button-next-month, .container__footer) —
   not verified against your actual rendered DOM, worth a visual check.
------------------------------------------------------------------------- */

/* 1. Glass panel — ties the popover to the hotel-card treatment instead
   of it looking like an untouched library widget */
.litepicker .container__months {
	border-radius: var(--radius-lg) !important;
	background-color: rgba(255,255,255,.78) !important;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* 2. Bolder range fill — subtle gradient instead of flat tint, with a
   transition so the fill reads as an action rather than a static state */
.day-item.is-in-range {
	background: linear-gradient(90deg, rgba(129,154,145,.16), rgba(129,154,145,.28)) !important;
	transition: background .2s var(--ease);
}

/* 5. Selection pulse — quick scale feedback the moment a start/end date
   is clicked */
@keyframes rc-date-pulse {
	0%   { transform: scale(.82); }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1); }
}
.day-item.is-start-date,
.day-item.is-end-date {
	animation: rc-date-pulse .3s var(--ease);
}

/* 3. Nav arrows — circular buttons with a hover lift, matching the
   button treatment used elsewhere in this patch. Unverified selector. */
.litepicker .button-previous-month,
.litepicker .button-next-month {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s var(--ease), transform .12s var(--ease);
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover {
	background-color: var(--cyan-100);
	transform: translateY(-1px);
}

/* Min-stay restriction legend — confirmed markup:
   <div class="calendar_minstay"><span class="calendar_span_box">x</span>
   <span class="calendar_span_text">...</span></div>
   Styled to match the gold tone already used for restricted-day dots
   (--gold-tint-*), so the legend swatch visually matches what it's
   explaining on the grid above it. */
.calendar_minstay {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	margin-top: 8px;
	background-color: var(--gold-tint-bg);
	border: 1px solid var(--gold-tint-border);
	border-radius: var(--radius-sm);
}
.calendar_span_box {
	display: inline-block !important;
	flex: 0 0 auto;
	width: 8px !important;
	height: 8px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: var(--gold-tint-text) !important;
	color: transparent;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}
.calendar_span_text {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gold-tint-text);
}
/* ----------------------------------------------------------------------
   12. SEARCH SUMMARY CARD (#summary-tab) — post-search "receipt" framing
   Built from confirmed markup: .resume-dates rows, .resume_span_container
   (with #cal_nights/#cal_rooms/#cal_adults as separate IDs, unlike the
   text-splitting problem from the reverted labels attempt), #change-btn.
------------------------------------------------------------------------- */

/* 1. All three stats on one line, wrapped in a single unified pill —
   background applied to the shared container itself, not to individual
   icon/text pairs. This sidesteps the sibling-gap problem entirely:
   there's nothing to "merge" since it's one background covering
   everything inside, icons, text, and spacing alike. */
#summary-tab .resume_span_container {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
}
#summary-tab #cal_nights {
	font-weight: 800;
}
#summary-tab .resume_span_container .room-detail-icon,
#summary-tab .resume_span_container .fa-moon-o,
#summary-tab .resume_span_container .fa-home,
#summary-tab .resume_span_container .fa-male {
	color: var(--slate-tint-text);
	font-size: 13px;
}

/* 3. Word labels after each icon — font-family must be reset since
   these ::after pseudo-elements inherit FontAwesome's icon font from
   their parent, same requirement as the calendar legend fix earlier. */
#summary-tab .resume_span_container .fa-moon-o::after,
#summary-tab .resume_span_container .fa-home::after,
#summary-tab .resume_span_container .fa-male::after {
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 11px;
	color: var(--gray-600);
	margin-left: 4px;
}
html:has(#lang_bar a.active_lang[data-target="it"]) #summary-tab .fa-moon-o::after { content: "notti"; }
html:has(#lang_bar a.active_lang[data-target="it"]) #summary-tab .fa-home::after { content: "camere"; }
html:has(#lang_bar a.active_lang[data-target="it"]) #summary-tab .fa-male::after { content: "persone"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #summary-tab .fa-moon-o::after { content: "nights"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #summary-tab .fa-home::after { content: "rooms"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #summary-tab .fa-male::after { content: "guests"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #summary-tab .fa-moon-o::after { content: "nuits"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #summary-tab .fa-home::after { content: "chambres"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #summary-tab .fa-male::after { content: "personnes"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #summary-tab .fa-moon-o::after { content: "noches"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #summary-tab .fa-home::after { content: "habitaciones"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #summary-tab .fa-male::after { content: "personas"; }

/* 3. De-emphasize "Modifica la ricerca" — quiet text link instead of a
   filled button competing with the actual summary info */
#change-btn {
	background-color: transparent !important;
	color: var(--cyan-700) !important;
	box-shadow: none !important;
	font-weight: 600;
	font-size: 12px;
	padding: 8px 0 !important;
	text-transform: none;
	max-width: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
#change-btn::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	font-size: 12px;
}
#change-btn:hover {
	background-color: transparent !important;
	color: var(--cyan-900) !important;
	text-decoration: underline;
}

/* 4. Entrance animation — reuses the same rc-card-in keyframes already
   defined elsewhere in this file (§3), so the swap from search form to
   summary uses the same motion language as the rest of the patch.
   CSS animations restart on a none→block display change, same proven
   pattern as .cart-cls-floating. */
#summary-tab {
	padding: 10px;
	text-align: center;
	animation: rc-card-in .4s cubic-bezier(.22,1,.36,1) both;
}

/* ----------------------------------------------------------------------
   13. ROOM INFO ROW & BED TYPES
   Confirmed markup: .room-info has exactly 5 sibling spans in a fixed
   pattern (value, pipe, value, pipe, value) — pipes hidden via
   nth-child position rather than content matching, since CSS can't
   select by text content. .room_bed_div uses literal <br> tags between
   bed-type spans, which CSS can hide directly (unlike the earlier
   display:block mid-stream problem, hiding an existing <br> has no
   anonymous-box side effect).
------------------------------------------------------------------------- */

/* Stat chips — hide the "|" separators (2nd/4th of 5 fixed children),
   style the value spans as light pills */
.room-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}
.room-info > span:nth-child(2n) {
	display: none;
}
.room-info > span:nth-child(odd) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.room-info .room-detail-icon {
	color: var(--slate-tint-text) !important;
	font-size: 12px !important;
}

/* Bathroom count label — .fa-shower is a reliable, confirmed class
   rather than relying on sibling position */
.room-info .fa-shower::after {
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-style: normal;
}
html:has(#lang_bar a.active_lang[data-target="it"]) .room-info .fa-shower::after { content: " bagno"; }
html:has(#lang_bar a.active_lang[data-target="en"]) .room-info .fa-shower::after { content: " bathroom"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .room-info .fa-shower::after { content: " sdb"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .room-info .fa-shower::after { content: " baño"; }

/* Bed types — combine onto one line, dot separator instead of a full
   line break per bed type */
.room_bed_div br {
	display: none;
}
.room_bed_div {
	padding-bottom: 5px;
	color: var(--gray-700);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.room_bed_div span {
	display: inline-block;
	margin-bottom: 0;
}
.room_bed_div span:not(:last-child)::after {
	content: "•";
	color: var(--gray-400);
	margin-left: 8px;
	font-weight: 700;
}

/* Scarcity indicator — moved from an inline pill near the price to a
   corner ribbon on the whole card, matching the offer-ribbon pattern
   the person specifically liked. Confirmed structure: .last-available
   sits inside .room-available, itself inside .search-result-item (the
   outer card) — so the ribbon anchors to the card, not to
   .room-available directly, same as how the offer ribbon anchors to
   .rate-item rather than to the discount badge itself.
   The old inline pill is hidden entirely rather than kept alongside the
   ribbon — showing both would repeat the same message twice, the same
   redundancy problem identified with the old recommended-ribbon. */
.search-result-item:has(.last-available) {
	position: relative;
}
.search-result-item:has(.last-available)::before {
	/* fallback content if the language selector below doesn't match */
	content: "LAST ROOM";
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 2;
	background-color: var(--red-600);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-lg) 0 var(--radius-md);
	animation: rc-urgency-pulse 2.4s ease-in-out infinite;
}
html:has(#lang_bar a.active_lang[data-target="it"]) .search-result-item:has(.last-available)::before { content: "ULTIMA CAMERA"; }
html:has(#lang_bar a.active_lang[data-target="en"]) .search-result-item:has(.last-available)::before { content: "LAST ROOM"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .search-result-item:has(.last-available)::before { content: "DERNIÈRE CHAMBRE"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .search-result-item:has(.last-available)::before { content: "ÚLTIMA HABITACIÓN"; }
.room-available:has(.last-available) {
	/* !important required: the element carries an inline
	   style="display:block;" in the actual markup, which a plain CSS
	   rule cannot override regardless of selector specificity — only
	   !important beats an inline style. */
	display: none !important;
}
@keyframes rc-urgency-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* "X disponibili" (2+ rooms left) had no class of its own to distinguish
   it from plain text — .last-available (1 room left) already has its
   own color/icon treatment above, and this brings the more-than-one
   case up to the same standard without competing with the red ribbon
   for attention. Confirmed markup: <h4 class="room-available" ...
   style="display:block;"> wrapping .label-room-quantity ("2") and
   .label-room-quantity-desc (" disponibili") as two sibling spans, no
   .last-available class present in this case — !important is required
   on display since the inline style="display:block;" would otherwise
   win regardless of selector specificity. Gold-tint matches the color
   .last-available itself used before it was converted to a ribbon, so
   this reads as "the same kind of signal, calmer" rather than a new
   color introduced just for this. */
h4.room-available {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 8px 0 0 0;
	background-color: var(--gold-tint-bg);
	border: 1px solid var(--gold-tint-border);
	color: var(--gold-tint-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
h4.room-available::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	font-size: 10px;
}

/* Cancellation policy icons — lets someone scan the rate list for
   flexible/non-refundable without reading text or relying on color
   alone. Confirmed selectors from the base stylesheet. */
.cancellation_text::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f058" !important;
	margin-right: 6px;
}
.cancellation_text-nr::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 6px;
}

/* Detail modal's Max/m²/bathroom row — DIFFERENT markup from the room
   card: <div class="col-md-5"> with "Max N" as bare icon+text (not
   wrapped in a span, unlike m² and bathroom which are). Confirmed via
   real outerHTML. :has() distinguishes the pipe-separator spans (no
   icon inside) from the actual stat spans (icon inside) reliably,
   without relying on nth-child position. "Max 4" gets matching color/
   weight but no pill background, since there's no wrapping element to
   attach one to without affecting the icon+text run around it. */
#detailModal-body .col-md-5 > span:has(+ span:has(.room-detail-icon)) {
	display: none;
}
#detailModal-body .col-md-5 > span:has(.room-detail-icon) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	margin-right: 4px;
}
#detailModal-body .col-md-5 > .room-detail-icon:first-child {
	color: var(--slate-tint-text);
	font-weight: 700;
}
#detailModal-body .col-md-5 .room-detail-icon {
	color: var(--cyan-700);
	font-size: 12px !important;
}

/* ----------------------------------------------------------------------
   6. HOTEL IDENTITY CARD — glassmorphism
   The card floats over a blurred hero photo but is fully opaque, so it
   reads as disconnected from the scene behind it. Frosted-glass panels
   tie it back to the photo. Scoped to .hotel_address / .property-title /
   .property-info specifically — .white-transparent itself is untouched.
------------------------------------------------------------------------- */
.hotel_address {
	background-color: rgba(255,255,255,.68);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	margin-bottom: 12px;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}
div.property-title {
	background-color: #819A91;
	border: none;
	color: white;
	padding: 9px 16px 8px;
	background: #f23315;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
div.property-info {
	padding: 10px 16px 12px;
	background-color: rgba(255,255,255,.72);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
}




/* ----------------------------------------------------------------------
   16. CART CARD — reducing visual noise (4 fixes from one review pass)
   Confirmed markup note: .product_detail_basket is a class (safe across
   multiple rooms); the numbered IDs like #product_details_0 are
   per-room-instance and would only work for the first room in the cart.
------------------------------------------------------------------------- */

/* 1. Group the rate breakdown (rate name, discount, supplement, Tot.)
   into one visual unit instead of four peer-level rows blending into
   the rest of the card. Two adjacent elements sharing a background
   color and coordinated top/bottom radius read as one continuous
   block even though they're separate boxes — .product_detail_basket
   covers rate+discount+supplement, the sibling row containing
   .product_total (the "Tot." line) continues the same block below it. */
.product_detail_basket {
	background-color: var(--gray-200);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding: 8px 10px 2px 10px;
	margin-top: 4px;
}


/* 2. Cut a redundant divider — both #basket-penalties and
   #damage_deposit had their own .local_taxes_hr, doing the same
   separating job twice in a row. Keeping only the first: one clean
   line introduces the whole policy section, not two lines splitting it
   into pieces. */
#damage_deposit .local_taxes_hr {
	display: none;
}
#damage_deposit {
	margin-top: 10px;
}

/* 3. Room name wrap — confirmed still wrapping even with the base
   DM Sans font (not a font-choice problem, the row genuinely doesn't
   have space for name + info icon + chevron together at this width).
   Rather than keep shrinking text, tightening line-height makes a
   two-line wrap look like a deliberate compact heading instead of a
   cramped accident. */
.cart-supp-room-desc {
	font-size: 14px;
	font-weight: 700;
	color: var(--black-color);
	line-height: 1.3;
}

/* 4. Tighter vertical rhythm across the totals rows */


/* ----------------------------------------------------------------------
   14. FLOATING CART — bringing it up to the same standard as the rest
   of the page. Confirmed markup: .cart-remove > .fa-times (remove
   icon), .product_total_amount (price). Room-name font-family removed
   per the site-wide Fraunces rollback — base stylesheet's own treatment
   is used as-is.
------------------------------------------------------------------------- */
.cart-remove {
	color: var(--gray-500);
	font-size: 12px !important;
	padding: 4px !important;
	border-radius: var(--radius-pill);
	transition: background-color .15s var(--ease);
}
.cart-remove:hover {
	background-color: var(--red-100);
	cursor: pointer;
	color: var(--red-600);
}
/* Confirmed: this element also carries .x-remove, which has its own
   red color rule in the base stylesheet at the same specificity — a
   combined selector guarantees this wins regardless of rule order. */
.x-remove.cart-remove,
.cart-remove.x-remove {
	color: var(--gray-500) !important;
}
.x-remove.cart-remove:hover,
.cart-remove.x-remove:hover {
	color: var(--red-600) !important;
}
.product_total_amount {
	padding: 0px;
	font-size: 16px;
	font-weight: 700;
	color: var(--black-color);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   17. SUPPLEMENTS PAGE — motion + larger imagery
   .supp-block gets an explicit inline height from JS (confirmed in the
   markup: style="height: 214.36px;"), almost certainly to equalize
   card heights within a row. Entrance animation is safe regardless
   (transform/opacity don't affect layout height). Image enlargement is
   kept conservative — within the existing side-by-side split rather
   than a full stacked-hero reorder — to avoid fighting that JS-computed
   height in ways I can't predict without knowing what triggers it.
------------------------------------------------------------------------- */

/* Hover lift — the base stylesheet's own .supp-block:hover rule declares
   a transition but never actually changes transform/box-shadow, so
   nothing visibly moves on mouse-over (only the load-time entrance
   animation above was working). This adds the missing motion, matching
   the translateY(-2px) + shadow-md pattern used on .blu_btn /
   .label-best-price / .shopping-cart-button elsewhere in this file. */
.supp-block:hover {
	background-color: #fff !important;
	border-left: 1px solid var(--gray-200) !important;
	border-top: 1px solid var(--gray-200) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.supp-item-col-img {
	border-right: 0px solid #33749b30;
	min-height: auto !important;
	height: auto !important;
	padding: 0px 10px 10px 0px !important;
	flex: 0 0 42% !important;
	max-width: 42% !important;
}
.supp-item-col {
	min-height: auto !important;
	height: auto !important;
	padding: 0px 0px 10px 10px !important;
	flex: 0 0 58% !important;
	max-width: 58% !important;
}


/* Quantity stepper polish — .div-supp-adult-quantity is already a pill
   in the base stylesheet reusing the same .box-btn class as the room
   occupancy stepper, so this brings it up to the same visual finish
   (white background + shadow, slightly larger touch targets) rather
   than a full redesign. Scoped to this class specifically so it doesn't
   touch #rooms_search's stepper, which has its own distinct class. */
.div-supp-adult-quantity {
	white-space: nowrap;
	width: 80px;
	vertical-align: middle;
	background: transparent;
	padding: 5px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
}
.div-supp-adult-quantity .box-btn {
	width: 24px;
	height: 24px;
}

/* ----------------------------------------------------------------------
   15. SUPPLEMENTS / EXTRAS PAGE
   Confirmed markup: .supp-item-col-img img (thumbnail). Title
   font-family removed per the site-wide Fraunces rollback.
   .supp-block-item-desc (price tag) already uses the same
   --gold-tint-* tokens as the rest of the site — no change needed there.
------------------------------------------------------------------------- */
.supp-item-col-img img.img-thumbnail {
	max-height: none;
	height: 115px;
	width: 100%;
	object-fit: cover;
	padding: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* Added-confirmation ribbon — reuses the same corner-ribbon language as
   OFFERTA/LAST ROOM. Confirmed reliable signal: your base CSS already
   defines .remove_supps for the button's state after an item is added
   (it swaps from "Aggiungi" to a red "Rimuovi" button), so :has() keys
   off that class rather than trying to read the hidden quantity input's
   live value, which CSS attribute selectors can't reliably see once JS
   changes it. */
.supp-block {
	background-color: #fff;
	margin-bottom: 10px;
	min-height: 0;
	height: 100% !important;
	box-sizing: border-box;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	transition: box-shadow .15s var(--ease), transform .1s var(--ease);
	animation: rc-card-in .5s cubic-bezier(.22,1,.36,1) both;
	position: relative;
}
.supp-block:has(.remove_supps) {
	border-color: var(--green-300);
}
.supp-block:has(.remove_supps)::before {
	content: "ADDED";
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 2;
	background-color: var(--green-600);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 0 var(--radius-lg) 0 var(--radius-md);
}
html:has(#lang_bar a.active_lang[data-target="it"]) .supp-block:has(.remove_supps)::before { content: "AGGIUNTO"; }
html:has(#lang_bar a.active_lang[data-target="en"]) .supp-block:has(.remove_supps)::before { content: "ADDED"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .supp-block:has(.remove_supps)::before { content: "AJOUTÉ"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .supp-block:has(.remove_supps)::before { content: "AÑADIDO"; }

/* RIMUOVI button staying green until the page loses focus — the base
   stylesheet's .btn-one:hover/:focus rule (2 selectors, no !important)
   outranks a bare .remove_supps (1 selector), and the button is still
   focused right after the Aggiungi click fires it, so the red never
   showed until blur. !important on all three states forces red
   regardless of focus/hover. */
.remove_supps,
.remove_supps:focus {
	background-color: var(--red-color) !important;
	color: var(--white-color) !important;
}
.remove_supps:hover {
	background-color: var(--red-600) !important;
	color: var(--white-color) !important;
}

/* Sticky running total — confirmed: this page reuses the same
   #search-col.scroll-tab independently-scrolling sidebar as the search
   results page. If someone has multiple rooms in the cart pushing the
   total below the fold, this keeps it visible while they scroll through
   their own room list. Desktop only, same reasoning as the original
   search-button fix: doesn't apply where the page scrolls as one column. */
@media only screen and (min-width: 992px) {
	#row-total {
		position: sticky;
		bottom: 0;
	}
	#search-col.scroll-tab {
		padding-bottom: 12px;
	}
}

/* ----------------------------------------------------------------------
   8. OCCUPANCY STEPPER
   Confirmed markup: #rooms_search > .rm-cnt > two half-columns, adults
   matched by ".col-xs-6.text-center:not(.app_child_cnt)" (your own base
   CSS already uses this exact pattern to target it), children by
   ".app_child_cnt.col-xs-6". Scoped to #rooms_search only — those same
   utility classes may exist elsewhere in the markup and shouldn't be
   touched globally.
   Labels ("Adulti"/"Bambini") are added via language-detection, same
   #lang_bar technique proven for the CONSIGLIATA badge — not attr(title)
   or attr(), since the title attribute placement is inconsistent between
   the two columns (see comment above).
------------------------------------------------------------------------- */
#rooms_search .col-xs-6.text-center:not(.app_child_cnt),
#rooms_search .app_child_cnt.col-xs-6 {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 14px 8px !important;
	border: 0px solid var(--gray-200);
	border-bottom: 0px solid var(--gray-200) !important;
	border-radius: var(--radius-md);
	background-color: transparent;
	width: calc(50% - 4px) !important;
	max-width: calc(50% - 4px) !important;
	box-sizing: border-box;
}
#rooms_search .col-xs-6.text-center:not(.app_child_cnt) {
	margin-right: 8px;
}
#rooms_search .app_child_cnt.col-xs-6 {
	margin-left: 0;
}

#rooms_search .div-room-adult-occupancy,
#rooms_search .div-room-child-occupancy {
	order: -1; /* icon first, above the stepper */
	font-size: 18px;
	color: var(--cyan-700);
}

#rooms_search .div-room-adult-quantity,
#rooms_search .div-room-child-quantity {
	background-color: var(--white-color);
	box-shadow: var(--shadow-sm);
	padding: 6px 8px;
}

#rooms_search .box-btn {
	width: 26px;
	height: 26px;
}

/* Micro-labels, translated via the language-detection pattern already
   used for the CONSIGLIATA badge */
#rooms_search .col-xs-6.text-center:not(.app_child_cnt)::after,
#rooms_search .app_child_cnt.col-xs-6::after {
	order: 2;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--gray-800);
}
html:has(#lang_bar a.active_lang[data-target="it"]) #rooms_search .col-xs-6.text-center:not(.app_child_cnt)::after { content: "Adulti"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #rooms_search .col-xs-6.text-center:not(.app_child_cnt)::after { content: "Adults"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #rooms_search .col-xs-6.text-center:not(.app_child_cnt)::after { content: "Adultes"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #rooms_search .col-xs-6.text-center:not(.app_child_cnt)::after { content: "Adultos"; }
html:has(#lang_bar a.active_lang[data-target="it"]) #rooms_search .app_child_cnt.col-xs-6::after { content: "Bambini"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #rooms_search .app_child_cnt.col-xs-6::after { content: "Children"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #rooms_search .app_child_cnt.col-xs-6::after { content: "Enfants"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #rooms_search .app_child_cnt.col-xs-6::after { content: "Niños"; }


/* ----------------------------------------------------------------------
   9. PROMO CODE — quieter, secondary treatment
   Confirmed selector: #pin_div .promotional-code-input input[name="pin"]
------------------------------------------------------------------------- */
#pin_div {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 6px !important;
}
#pin_div .promotional-code-input input[name="pin"] {
	border: 1px dashed var(--gray-300);
	background-color: transparent;
	font-size: 12px;
	padding: 8px 12px 8px 32px;
	border-radius: var(--radius-sm);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.8L12.8 20.6a2 2 0 0 1-2.8 0l-7-7a2 2 0 0 1 0-2.8L10.8 3H19a2 2 0 0 1 2 2v7.8z'/%3E%3Ccircle cx='15' cy='9' r='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 14px 14px;
	transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
#pin_div .promotional-code-input input[name="pin"]:focus {
	border: 1px solid var(--cyan-600);
	background-color: #fff;
	outline: none;
}
#pin_div .promotional-code-input input[name="pin"]::placeholder {
	color: var(--gray-500);
	font-size: 12px;
}
/* ----------------------------------------------------------------------
   5. PAYMENT / TOTALS — unchanged from v3
------------------------------------------------------------------------- */
.containerx {
	margin-bottom: 20px;
	filter: drop-shadow(var(--shadow-lg));
	transform: scale(1.08);
}

/* ----------------------------------------------------------------------
   31. CART SUMMARY — declutter pass. Confirmed markup
   (#cart-container > #cart.cart-cls): the room card (.selected-item)
   and Net Amount / VAT / Total are siblings, not nested inside a shared
   wrapper, and .cart-cls itself is already a bordered, shadowed card.
   Four things were stacking up: the room card getting its own full
   shadow (a card inside a card), the price columns in Net/VAT/Total
   missing "no-padding" (present on every price column inside the room
   card), the ornate gradient+dot-pattern Total row, and three separate
   dashed dividers doing the same "new section" job in a row.
------------------------------------------------------------------------- */

/* a) Price alignment — the room card's price columns all carry
   "no-padding"; Net/VAT/Total's don't, leaving Bootstrap's default 15px
   right padding and pulling those numbers in from the edge the room
   card's prices sit flush against. */
.row-net > div:last-child,
.row-taxes > div:last-child,
#row-total > div:last-child {
	padding-right: 0;
}

/* b) .selected-item already sits inside .cart-cls (bordered + shadowed).
   Giving the room card its own shadow on top of that is a card floating
   on a card — dropping it removes a whole layer of elevation while the
   border still marks the section. */
.selected-item {
	box-shadow: none;
}

/* c) Flat tint + a top border says "this number matters most" with far
   less visual weight than a diagonal gradient plus a torn-ticket dot
   pattern next to an already-bordered room card. */
#row-total {
	background: var(--slate-tint-bg);
	border-top: 1px solid var(--gray-300);
}
#row-total::before {
	display: none;
}

/* d) Local Tax gets the same euro icon used for "Tasse e costi" in the
   rate conditions modal — .total-titles is shared with Net Amount/VAT,
   but only the Local Tax row sits inside .row-in-place, so this can't
   leak onto those. */
.row-in-place .total-titles {
	position: relative;
}
.row-in-place .total-titles::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 6px;
	color: var(--gray-500);
	font-size: 12px;
}

/* e) Three .row-in-place blocks (tax / cancellation / deposit) each had
   their own dashed divider on top of the left border already grouping
   them — two separators doing one job. Keeping only the first, which
   introduces the whole policy list once. */
#basket-penalties .local_taxes_hr {
	display: none;
}

#row-total {
	padding: 16px 18px;
	margin-top: 12px;
	font-weight: bold;
	background-color: var(--slate-tint-bg);
	border-radius: var(--radius-md);
	position: relative;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: linear-gradient(135deg, var(--slate-tint-bg), #dfe4e6);
}
#row-total .basket_total_span {
	font-size: 22px;
}
#row-total #floating_basket_total,
#row-total .price_format {
	font-size: 26px;
	font-variant-numeric: tabular-nums;
}
#row-total::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	height: 12px;
	background-image: radial-gradient(circle at 6px 6px, var(--gray-100) 5px, transparent 5.5px);
	background-size: 14px 12px;
	background-repeat: repeat-x;
	background-position: 4px 0;
}

/* Narrow-card fix: this same #row-total is used on the wider payment
   page (where 26px fits fine) and inside this much narrower cart
   popup, where the price sits in a fixed 5/12-width Bootstrap column
   and was wrapping onto two lines. Scoped to the cart contexts only —
   bypasses the rigid column split with flex, sized down to fit. */
.cart-cls #row-total,
.cart-cls-floating #row-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.cart-cls #row-total > div,
.cart-cls-floating #row-total > div {
	flex: 0 1 auto;
	width: auto;
	max-width: none;
}
.cart-cls #row-total #floating_basket_total,
.cart-cls-floating #row-total #floating_basket_total,
.cart-cls #row-total .price_format,
.cart-cls-floating #row-total .price_format {
	font-size: 20px;
	white-space: nowrap;
}

.item-price,
.cart-room-price,
.currency-font,
#span_net,
#span_local_tax {
	font-variant-numeric: tabular-nums;
}

.local_taxes_hr {
	border-top: 1px dashed var(--gray-400) !important;
	margin: 5px 10px;
	opacity: .8;
}

/* Matched to .row-in-place so the checkmark/shield rows and "Nessun
   pagamento" share one consistent left-bordered, left-aligned format.
   Confirmed markup difference: .row-totale-prepaid's content div is
   text-center by default, unlike the other two rows — overriding that
   is necessary, not just adding a border on top of mismatched alignment. */
.row-in-place {
	padding-top: 10px;
	margin-top: 4px;
	border-left: 2px solid var(--gray-200);
	margin-left: 15px;
	padding-left: 12px !important;
}
.row-in-place > div:last-child {
	padding-left: 0 !important;
}

/* f) First alignment pass (padding-right:0 on the price columns) wasn't
   the whole story. Two more causes, both confirmed against the same
   markup: #row-total carries its own "padding: 16px 18px" that Net/VAT
   don't have, so its price stopped 18px short of theirs even after the
   column fix — giving Net/VAT/Local Tax that same 18px right padding
   brings all four onto one shared edge instead of removing #row-total's
   (which doubles as breathing room inside its tinted box). Separately,
   .row-in-place's margin-left:15px shrinks the row's own box width
   (box-sizing:border-box), which pulls its right edge in too, on top of
   its price column still missing "no-padding" like the others did. */
.row-net,
.row-taxes {
	padding-right: 18px;
}
.row-in-place {
	margin-left: 0;
	padding-right: 18px;
}
.row-in-place > .col-lg-5 {
	padding-right: 0;
}

/* g) "Local Tax" still read as misaligned against the cancellation/
   deposit/prepayment rows even with the right-edge fix above — because
   its icon sits on the label, and that label (.col-lg-7) is text-right
   like Net Amount/VAT, so the icon floats wherever the text falls near
   the price rather than starting flush-left like the other three rows'
   icons do. Left-aligning just this label fixes the icon's start
   position while the price column stays text-right on its own. Bootstrap's
   .text-right on the same element is equal specificity and loads after
   this stylesheet, so !important is needed to reliably win. */
.row-in-place > .col-lg-7 {
	text-align: left !important;
}

.row-totale-prepaid {
	text-align: left !important;
	margin-top: 10px;
	border-left: 2px solid var(--gray-200);
	margin-left: 15px;
	padding-left: 12px !important;
}
.row-totale-prepaid > div {
	padding-left: 0 !important;
	text-align: left !important;
}

/* ----------------------------------------------------------------------
   19. GUEST DETAILS FORM — icons restored + sectioned layout + floating
   labels + "filled" indicator.

   Confirmed markup (#guest_detail_box_table): 6 .row children, every
   field is placeholder-only (no <label> anywhere), no type="email",
   pattern, or required on any input. That last point matters: native
   :valid/:invalid can't tell a real email from garbage since nothing
   constrains the field, so this does NOT attempt real validation —
   only an honest "has content" indicator via :not(:placeholder-shown).

   Per-field icon CSS below was live on the site previously but had
   fallen out of both the project file and this patch (confirmed via
   grep — restoring it here so this patch doesn't remove it on deploy).
   All selectors scoped to #guest_detail_box_table since .text.form-control,
   .form-group and field names like "email"/"city" are shared broadly
   across payment/address forms elsewhere on the page.
------------------------------------------------------------------------- */

/* --- restored per-field icons --- */


#guest_detail_box_table input[name="first_name"],
#guest_detail_box_table input[name="last_name"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="email"],
#guest_detail_box_table input[name="email_confirmation"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2'/%3E%3Cpath d='M4.5 7.5l7.5 6 7.5-6'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="clientAddress"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="city"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='9' height='18'/%3E%3Crect x='13' y='9' width='7' height='12'/%3E%3Cpath d='M7 7h2M7 11h2M7 15h2M16 13h1M16 17h1'/%3E%3C/svg%3E");
}
#guest_detail_box_table input[name="zipcode"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l8-8h5a2 2 0 0 1 2 2v5l-8 8a2 2 0 0 1-2.8 0l-4.2-4.2a2 2 0 0 1 0-2.8z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.3'/%3E%3C/svg%3E");
}

/* --- 3 sections, injected via ::before on the row that starts each
   group, no field reordering. Row order confirmed: 1=name, 2=email,
   3=address, 4=zip/country, 5=phone, 6=arrival/checkin/notes. --- */
#guest_detail_box_table > .row:nth-of-type(1),
#guest_detail_box_table > .row:nth-of-type(3),
#guest_detail_box_table > .row:nth-of-type(5) {
	position: relative;
	margin-top: 24px;
}
#guest_detail_box_table > .row:nth-of-type(1) {
	margin-top: 4px;
}
#guest_detail_box_table > .row:nth-of-type(1)::before,
#guest_detail_box_table > .row:nth-of-type(3)::before,
#guest_detail_box_table > .row:nth-of-type(5)::before {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cyan-700);
	padding: 0 15px 8px 15px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--gray-200);
}
#guest_detail_box_table > .row:nth-of-type(1)::before { content: "Ospite"; }
#guest_detail_box_table > .row:nth-of-type(3)::before { content: "Indirizzo"; }
#guest_detail_box_table > .row:nth-of-type(5)::before { content: "Soggiorno"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table > .row:nth-of-type(1)::before { content: "Guest"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table > .row:nth-of-type(3)::before { content: "Address"; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table > .row:nth-of-type(5)::before { content: "Stay details"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table > .row:nth-of-type(1)::before { content: "Client"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table > .row:nth-of-type(3)::before { content: "Adresse"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table > .row:nth-of-type(5)::before { content: "Séjour"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table > .row:nth-of-type(1)::before { content: "Huésped"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table > .row:nth-of-type(3)::before { content: "Dirección"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table > .row:nth-of-type(5)::before { content: "Estancia"; }

/* --- floating labels: no <label> element exists, so this uses a
   generated pseudo-label sat exactly over the (now-transparent) native
   placeholder at rest, lifted onto the border on focus/filled via
   :has() + :placeholder-shown. Applied to the 7 text/textarea fields
   only — selects and the phone field (custom flag widget) are left
   alone to avoid fighting their existing UI. --- */
#guest_detail_box_table input.text.form-control::placeholder,
#guest_detail_box_table textarea.text.form-control::placeholder {
	color: transparent;
}
/* Fixed box height so the label can move between "centered" and "docked
   at top" purely via padding, with box-sizing:border-box keeping the
   outer box the same size in both states — nothing ever needs to leave
   the input's own box, so there's no ancestor-overflow clipping risk. */
#guest_detail_box_table input.text.form-control {
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	height: 50px;
	padding-top: 14px;
	padding-bottom: 14px;
	transition: padding .12s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
#guest_detail_box_table .form-group:has(input:focus) input.text.form-control,
#guest_detail_box_table .form-group:has(input:not(:placeholder-shown)) input.text.form-control {
	padding-top: 22px;
	padding-bottom: 6px;
}
#guest_detail_box_table textarea.text.form-control {
	padding-left: 14px;
	background-image: none;
	transition: padding-top .12s var(--ease);
}
#guest_detail_box_table .form-group:has(textarea:focus) textarea.text.form-control,
#guest_detail_box_table .form-group:has(textarea:not(:placeholder-shown)) textarea.text.form-control {
	padding-top: 22px;
}

#guest_detail_box_table .form-group {
	position: relative !important;
}
#guest_detail_box_table .form-group::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	left: 44px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	transform-origin: left center !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--gray-500) !important;
	background-color: transparent !important;
	pointer-events: none !important;
	z-index: 999 !important;
	max-width: calc(100% - 60px) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	transition: top .12s var(--ease), transform .12s var(--ease), color .12s var(--ease) !important;
}
#guest_detail_box_table .form-group:has(textarea)::before {
	top: 24px !important;
}
#guest_detail_box_table .form-group:has(input:focus)::before,
#guest_detail_box_table .form-group:has(input:not(:placeholder-shown))::before,
#guest_detail_box_table .form-group:has(textarea:focus)::before,
#guest_detail_box_table .form-group:has(textarea:not(:placeholder-shown))::before {
	top: 15px !important;
	transform: translateY(0) scale(.79) !important;
	color: var(--cyan-700) !important;
}
#guest_detail_box_table .form-group:has(textarea.text.form-control)::before {
	left: 14px !important;
}

/* --- notes textarea has no .form-group/.input-group wrapper (confirmed
   markup: <textarea> sits directly in .guest-info-element) — every rule
   above silently didn't match it. Mirroring the same floating-label
   mechanics here, scoped to its real container. --- */
#guest_detail_box_table .guest-info-element:has(> textarea.text.form-control) {
	position: relative !important;
}
#guest_detail_box_table .guest-info-element:has(> textarea.text.form-control)::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	left: 14px !important;
	top: 24px !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--gray-500) !important;
	pointer-events: none !important;
	z-index: 999 !important;
	max-width: calc(100% - 30px) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	transition: top .12s var(--ease), transform .12s var(--ease), color .12s var(--ease) !important;
}
#guest_detail_box_table .guest-info-element:has(> textarea:focus)::before,
#guest_detail_box_table .guest-info-element:has(> textarea:not(:placeholder-shown))::before {
	top: 10px !important;
	transform: scale(.79) !important;
	transform-origin: left center !important;
	color: var(--cyan-700) !important;
}
#guest_detail_box_table .guest-info-element:has(> textarea:focus) > textarea.text.form-control,
#guest_detail_box_table .guest-info-element:has(> textarea:not(:placeholder-shown)) > textarea.text.form-control {
	padding-top: 26px !important;
}

#guest_detail_box_table .form-group:has(input[name="first_name"])::before { content: "Nome" !important; }
#guest_detail_box_table .form-group:has(input[name="last_name"])::before { content: "Cognome" !important; }
#guest_detail_box_table .form-group:has(input[name="email"])::before { content: "Email" !important; }
#guest_detail_box_table .form-group:has(input[name="email_confirmation"])::before { content: "Conferma Email" !important; }
#guest_detail_box_table .form-group:has(input[name="clientAddress"])::before { content: "Indirizzo" !important; }
#guest_detail_box_table .form-group:has(input[name="city"])::before { content: "Città" !important; }
#guest_detail_box_table .form-group:has(input[name="zipcode"])::before { content: "CAP" !important; }
#guest_detail_box_table .guest-info-element:has(> textarea[name="notes"])::before { content: "Richieste speciali" !important; }

html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="first_name"])::before { content: "First name" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="last_name"])::before { content: "Last name" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="email"])::before { content: "Email" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="email_confirmation"])::before { content: "Confirm Email" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="clientAddress"])::before { content: "Address" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="city"])::before { content: "City" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .form-group:has(input[name="zipcode"])::before { content: "ZIP Code" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #guest_detail_box_table .guest-info-element:has(> textarea[name="notes"])::before { content: "Special requests" !important; }

html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="first_name"])::before { content: "Prénom" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="last_name"])::before { content: "Nom" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="email"])::before { content: "Email" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="email_confirmation"])::before { content: "Confirmer l'email" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="clientAddress"])::before { content: "Adresse" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="city"])::before { content: "Ville" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .form-group:has(input[name="zipcode"])::before { content: "Code postal" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #guest_detail_box_table .guest-info-element:has(> textarea[name="notes"])::before { content: "Demandes spéciales" !important; }

html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="first_name"])::before { content: "Nombre" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="last_name"])::before { content: "Apellido" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="email"])::before { content: "Correo electrónico" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="email_confirmation"])::before { content: "Confirmar correo" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="clientAddress"])::before { content: "Dirección" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="city"])::before { content: "Ciudad" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .form-group:has(input[name="zipcode"])::before { content: "Código postal" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #guest_detail_box_table .guest-info-element:has(> textarea[name="notes"])::before { content: "Peticiones especiales" !important; }

/* --- "filled" indicator — NOT real validation (see header note): a
   green check once a field has content, via :not(:placeholder-shown).
   Right padding widened on filled fields so the check doesn't sit on
   top of typed text. !important throughout — same cascade issue as the
   labels above, confirmed via the same diagnostic. --- */
#guest_detail_box_table .input-group {
	position: relative !important;
}
#guest_detail_box_table .input-group:has(input.text.form-control:not(:placeholder-shown)) input.text.form-control {
	padding-right: 34px !important;
}
#guest_detail_box_table .input-group:has(input.text.form-control:not(:placeholder-shown))::after {
	font-family: "FontAwesome" !important;
	font-weight: normal !important;
	font-style: normal !important;
	content: "" !important;
	position: absolute !important;
	display: block !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--green-500) !important;
	font-size: 13px !important;
	z-index: 999 !important;
	pointer-events: none !important;
}

/* notes textarea — no .input-group wrapper (same gap as the label fix),
   using .guest-info-element as the real container instead */
#guest_detail_box_table .guest-info-element:has(> textarea.text.form-control:not(:placeholder-shown)) > textarea.text.form-control {
	padding-right: 34px !important;
}
#guest_detail_box_table .guest-info-element:has(> textarea.text.form-control:not(:placeholder-shown))::after {
	font-family: "FontAwesome" !important;
	font-weight: normal !important;
	font-style: normal !important;
	content: "" !important;
	position: absolute !important;
	display: block !important;
	right: 14px !important;
	top: 16px !important;
	color: var(--green-500) !important;
	font-size: 13px !important;
	z-index: 999 !important;
	pointer-events: none !important;
}

/* ----------------------------------------------------------------------
   20. PAYMENT — CREDIT CARD FORM. Same treatment as guest details
   (icons, floating labels, "filled" checkmark), same reasoning about
   honesty on validation (see section 19 header) — cc_security_code
   does carry a real pattern="[0-9]*" attribute so :invalid is
   technically meaningful there, but this still uses the same "filled"
   proxy as everywhere else rather than mixing metaphors between fields
   on the same form. All scoped to #cc_div specifically (not the wider
   #payments-info-div), since the OUTER payment-method radio selector
   also uses .form-group.has-feedback > .input-group — scoping any
   wider would apply this to that unrelated wrapper too. Confirmed
   markup: all 4 fields follow the same .form-group > .input-group >
   input pattern as guest details, no surprises this time.

   cc_number already gets a live brand-detection SVG badge from the
   card plugin (.ccicon, right side, not ours to touch) — so it's
   deliberately left without our own left-side icon or right-side
   checkmark, to avoid two icons competing for the same real estate.

   The previously-reported cut-off "Expiration (mm/yy)" placeholder is
   fixed as a side effect here: the native placeholder is hidden (same
   mechanism as guest details) and replaced with a shorter floating
   label ("Expiry"/"Scadenza") sized to actually fit the half-width
   column instead of overflowing it.
------------------------------------------------------------------------- */

#cc_div input.text.form-control {
	height: 50px;
	padding-top: 14px;
	padding-bottom: 14px;
	padding-left: 44px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
	transition: padding .12s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
#cc_div input#cc_number.text.form-control {
	padding-left: 14px;
	background-image: none !important;
}
#cc_div input#cc_holder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E");
}
#cc_div input#expirationdate {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
#cc_div input#securitycode {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}

#cc_div .form-group:has(#cc_holder:focus) input.text.form-control,
#cc_div .form-group:has(#cc_holder:not(:placeholder-shown)) input.text.form-control,
#cc_div .form-group:has(#cc_number:focus) input.text.form-control,
#cc_div .form-group:has(#cc_number:not(:placeholder-shown)) input.text.form-control,
#cc_div .form-group:has(#expirationdate:focus) input.text.form-control,
#cc_div .form-group:has(#expirationdate:not(:placeholder-shown)) input.text.form-control,
#cc_div .form-group:has(#securitycode:focus) input.text.form-control,
#cc_div .form-group:has(#securitycode:not(:placeholder-shown)) input.text.form-control {
	padding-top: 22px !important;
	padding-bottom: 6px !important;
}

#cc_div input.text.form-control::placeholder {
	color: transparent !important;
}

#cc_div .input-group::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	left: 44px !important;
	top: 18px !important;
	transform: none !important;
	transform-origin: left center !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--gray-500) !important;
	background-color: transparent !important;
	pointer-events: none !important;
	z-index: 999 !important;
	max-width: calc(100% - 60px) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	transition: top .12s var(--ease), transform .12s var(--ease), color .12s var(--ease) !important;
}

#cc_div .input-group:has(#cc_holder:focus)::before,
#cc_div .input-group:has(#cc_holder:not(:placeholder-shown))::before,
#cc_div .input-group:has(#cc_number:focus)::before,
#cc_div .input-group:has(#cc_number:not(:placeholder-shown))::before,
#cc_div .input-group:has(#expirationdate:focus)::before,
#cc_div .input-group:has(#expirationdate:not(:placeholder-shown))::before,
#cc_div .input-group:has(#securitycode:focus)::before,
#cc_div .input-group:has(#securitycode:not(:placeholder-shown))::before {
	top: 15px !important;
	transform: translateY(0) scale(.79) !important;
	color: var(--cyan-700) !important;
}

#cc_div .input-group:has(#cc_holder)::before { content: "Card holder" !important; }
#cc_div .input-group:has(#cc_number)::before {
	left: 14px !important;
	content: "Card Number" !important;
}
#cc_div .input-group:has(#expirationdate)::before { content: "Scadenza" !important; }
#cc_div .input-group:has(#securitycode)::before { content: "Security Code" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #cc_div .input-group:has(#cc_holder)::before { content: "Card holder" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #cc_div .input-group:has(#cc_number)::before { content: "Card Number" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #cc_div .input-group:has(#expirationdate)::before { content: "Expiry" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #cc_div .input-group:has(#securitycode)::before { content: "Security Code" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #cc_div .input-group:has(#cc_holder)::before { content: "Titulaire" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #cc_div .input-group:has(#cc_number)::before { content: "Numéro de carte" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #cc_div .input-group:has(#expirationdate)::before { content: "Expiration" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #cc_div .input-group:has(#securitycode)::before { content: "Code de sécurité" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #cc_div .input-group:has(#cc_holder)::before { content: "Titular" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #cc_div .input-group:has(#cc_number)::before { content: "Número de tarjeta" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #cc_div .input-group:has(#expirationdate)::before { content: "Caducidad" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #cc_div .input-group:has(#securitycode)::before { content: "Código de seguridad" !important; }

/* "filled" checkmark — same honest proxy as guest details. Skipped for
   cc_number since the plugin's own brand-detection badge already sits
   in that spot. */
#cc_div .input-group {
	position: relative !important;
}
#cc_div .form-group:has(#cc_holder:not(:placeholder-shown)) #cc_holder,
#cc_div .form-group:has(#expirationdate:not(:placeholder-shown)) #expirationdate,
#cc_div .form-group:has(#securitycode:not(:placeholder-shown)) #securitycode {
	padding-right: 34px !important;
}
#cc_div .input-group:has(#cc_holder:not(:placeholder-shown))::after,
#cc_div .input-group:has(#expirationdate:not(:placeholder-shown))::after,
#cc_div .input-group:has(#securitycode:not(:placeholder-shown))::after {
	font-family: "FontAwesome" !important;
	font-weight: normal !important;
	font-style: normal !important;
	content: "" !important;
	position: absolute !important;
	display: block !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--green-500) !important;
	font-size: 13px !important;
	z-index: 999 !important;
	pointer-events: none !important;
}

/* ----------------------------------------------------------------------
   21. CONFIRMATION PAGE
   Confirmed markup: #msg-tab (.confirm_msg has exactly two <strong> —
   1st is guest name, 2nd is booking reference, always in that fixed
   order, so :nth-of-type(2) reliably targets the reference without
   needing a class); #res-tab (same .resume_span_container/#cal_nights
   pattern already styled for #summary-tab elsewhere in this file, but
   scoped there only — extended here to #res-tab); .row-net/.row-taxes
   (already right-aligned/small by the base stylesheet, grouped here
   into one visual block leading into the already-polished #row-total);
   #map-tab/#map (Google Maps' internals are JS-rendered and not
   stylable — this only rounds/frames the outer container, matching
   the fix used before for #cc_div .containerx); #rc_powered/
   #privacy-tab-result (footer).
------------------------------------------------------------------------- */

/* --- thank-you header: success icon + prominent booking reference --- */
#msg-tab {
	padding: 28px 20px 22px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#msg-tab::before {
	content: "";
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	display: block;
	font-size: 42px;
	line-height: 1;
	color: var(--green-500);
	margin-bottom: 10px;
}
.confirm_msg {
	color: var(--gray-700);
	font-weight: 400;
	padding: 10px;
	font-size: 16px;
	line-height: 1.7;
}
.confirm_msg strong {
	color: var(--black-color);
}
.confirm_msg strong:nth-of-type(2) {
	display: inline-block;
	background-color: var(--cyan-700);
	color: #fff;
	font-family: "SF Mono", "Courier New", monospace;
	font-size: 15px;
	letter-spacing: .03em;
	padding: 3px 12px;
	border-radius: var(--radius-sm);
	margin: 6px 0 2px;
}

/* --- Riepilogo dates row: same pill treatment as #summary-tab,
   extended to #res-tab; date labels ("Check in"/"Check out") were
   hidden by the base stylesheet (.resume-dates-titles{display:none})
   — revealed here as small uppercase captions above each date. --- */
#res-tab .resume-dates-titles {
	display: block !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gray-500);
	margin-bottom: 2px;
}
#res-tab .resume_span_container {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
}
#res-tab #cal_nights,
#res-tab #cal_rooms,
#res-tab #cal_adults {
	font-weight: 800;
}
#res-tab .resume_span_container .fa-moon-o,
#res-tab .resume_span_container .fa-home,
#res-tab .resume_span_container .fa-male {
	color: var(--slate-tint-text);
	font-size: 13px;
}
#res-tab .resume_span_container .fa-moon-o::after,
#res-tab .resume_span_container .fa-home::after,
#res-tab .resume_span_container .fa-male::after {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 500 !important;
	font-style: normal !important;
	font-size: 11px !important;
	color: var(--gray-600) !important;
	margin-left: 4px !important;
	display: inline !important;
}
#res-tab .fa-moon-o::after { content: "notti" !important; }
#res-tab .fa-home::after { content: "camere" !important; }
#res-tab .fa-male::after { content: "persone" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #res-tab .fa-moon-o::after { content: "nights" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #res-tab .fa-home::after { content: "rooms" !important; }
html:has(#lang_bar a.active_lang[data-target="en"]) #res-tab .fa-male::after { content: "guests" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #res-tab .fa-moon-o::after { content: "nuits" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #res-tab .fa-home::after { content: "chambres" !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #res-tab .fa-male::after { content: "personnes" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #res-tab .fa-moon-o::after { content: "noches" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #res-tab .fa-home::after { content: "habitaciones" !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #res-tab .fa-male::after { content: "personas" !important; }

/* --- price breakdown: group the sub-total rows (net / VAT / city tax)
   into one tinted block, visually leading into #row-total below —
   .row-taxes is reused for both VAT and city tax, so both get grouped
   automatically. #row-total itself is untouched (already has its own
   receipt-perforated-edge treatment from a previous session). --- */
.row-net,
.row-taxes {
	background-color: var(--gray-100);
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
.row-net {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding-top: 12px !important;
}
.row-taxes:last-of-type {
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	padding-bottom: 12px !important;
}
.row-net .total-titles,
.row-taxes .total-titles {
	font-weight: 500;
	color: var(--gray-600);
}

/* --- map card: frame + round the outer container. Google's own map
   tiles/controls are JS-rendered and not ours to restyle — this only
   clips the corners of the whole widget, same technique as the
   .containerx credit-card frame. --- */
#map-tab {
	padding: 16px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
#map {
	height: 500px;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

/* --- footer: quieter badges row, tidier powered-by --- */
#privacy-tab-result {
	margin-top: 10px;
	padding: 16px 10px;
	opacity: .85;
}
#privacy_security img {
	max-width: 180px;
	height: auto;
}
#rc_powered {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
}
#rc_powered_inner {
	display: block;
	background-color: var(--gray-500);
	text-align: center;
	position: relative;
	border-radius: var(--radius-sm);
	margin: auto;
	padding: 5px 12px;
	max-width: fit-content;
}
#rc_powered_inner > span {
	color: var(--gray-700);
	font-size: 11px;
}
#rc_powered_inner > img {
	height: 16px;
	vertical-align: middle;
	margin-left: 4px;
}

/* ----------------------------------------------------------------------
   22. ROOM NUMBER BADGE — chip treatment (search sidebar stepper only)
   Confirmed selector from a prior session: .rm-cnt .div-room-num, with
   the house icon CSS-injected via ::before (content: "🏠"), not part of
   the markup text — safe to restyle without new markup confirmation.
   This deliberately reverses an earlier decision (plain cyan-700 text +
   emoji, no pill) per explicit new direction — was rejected before as
   "too heavy" for a bare identifier; today's ask specifically wants the
   more contained chip look here. Icon switched from emoji to FontAwesome
   to match the rest of the badge/chip language on the site (slate-tint
   info chips), rather than mixing an emoji into a chip context.
   NOT applied to the cart pill or extras-page header versions of this
   same room-number concept (.room-number-supp-block, .room-number-num,
   etc.) — need to confirm whether their house icon is CSS-injected the
   same way or literal text before touching those.
------------------------------------------------------------------------- */
.rm-cnt .div-room-num {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--slate-tint-text);
	background-color: var(--slate-tint-bg);
	border: none;
	padding: 5px 12px 5px 10px;
	border-radius: var(--radius-pill);
	margin-bottom: 10px;
}
.rm-cnt .div-room-num::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 6px;
	font-size: 13px;
}
.rm-cnt .div-room-num .x-remove {
	color: var(--slate-tint-text);
	margin-left: 8px;
	opacity: .7;
}
.rm-cnt .div-room-num .x-remove:hover {
	color: var(--red-color);
	opacity: 1;
}

/* --- cart item row: confirmed markup has .room-number-num ("#") and
   .room-number-supp ("1") as two separate sibling spans inside a plain
   Bootstrap column div (col-lg-1 col-md-1...) with no distinguishing
   class of its own — targeted via :has() on that specific child rather
   than the generic column classes, which are shared everywhere. No
   house icon exists here currently (plain "#1" text, color:white per
   the base stylesheet — presumably meant for a dark background
   elsewhere); this adds one fresh via ::before on the chip container,
   same icon/pill language as the sidebar stepper. --- */
#cart-items .div-room-num.item-row > div:has(.room-number-num) {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	background-color: var(--slate-tint-bg);
	padding: 4px 10px 4px 8px;
	border-radius: var(--radius-pill);
}
#cart-items .div-room-num.item-row > div:has(.room-number-num)::before {
	content: "";
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	margin-right: 4px;
	color: var(--slate-tint-text);
}
#cart-items .room-number-num,
#cart-items .room-number-supp {
	color: var(--slate-tint-text) !important;
	font-size: 12px !important;
}

/* --- extras page room-title header: confirmed markup is one single
   span, .room-number-supp-block, "#1" plain text, no icon. Note: the
   base stylesheet has two separate (conflicting) rules for this exact
   class already (a pill attempt and a later plain-text revert) — this
   rule is appended after both, so it wins cleanly via source order
   without needing to touch either of them. --- */
.room-number-supp-block {
	display: inline-flex;
	align-items: center;
	background-color: var(--slate-tint-bg) !important;
	color: var(--slate-tint-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 4px 10px !important;
	border-radius: var(--radius-pill) !important;
	margin-right: 8px;
}
.room-number-supp-block::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "";
	margin-right: 5px;
	font-size: 12px;
}

/* ----------------------------------------------------------------------
   23. CART OCCUPANCY/TOTAL ROW — confirmed markup: .item-row containing
   two columns, one with "2x" + .basket-occupancy-icon, the other with
   .product_total ("Tot.") + .product_total_amount (price). The row
   already gets a grouped gray-200 background from a prior session
   (.selected-item .item-row:has(.product_total)) — this refines what's
   inside it: the occupancy count becomes a small chip (consistent with
   the room-number chip just added) instead of bare icon+text, vertical
   centering between the two sides, and a clearer size contrast between
   the quiet "Tot." label and the actual price.
------------------------------------------------------------------------- */
.selected-item .item-row:has(.product_total) {
	background-color: var(--gray-100);
	border-radius: var(--radius-md);
	padding: 4px 10px 8px 10px;
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.product_detail_basket + .item-row:has(.product_total),
.product_detail_basket + .selected-item .item-row:has(.product_total) {
	border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
.selected-item .item-row:has(.product_total) > div:has(.basket-occupancy-icon) {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.selected-item .item-row:has(.product_total) .basket-occupancy-icon {
	color: var(--slate-tint-text) !important;
	font-size: 13px !important;
}
.selected-item .item-row:has(.product_total) > div:has(.product_total) {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	white-space: nowrap;
}
.selected-item .item-row:has(.product_total) .product_total {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 10px;
}
.selected-item .item-row:has(.product_total) .product_total_amount {
	font-size: 18px;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------
   24. ROOM NUMBER CHIP — text color fix + matching occupancy chip
   The "#1" text inside .rm-cnt .div-room-num was still rendering in a
   darker color than the icon despite color being set on the parent —
   some nested element evidently carries its own color. Forcing it on
   all descendants (except :hover states, which have higher-specificity
   rules already and are unaffected) rather than chasing the exact
   nested selector.

   .supp_occupancy — confirmed markup: <div class="... supp_occupancy">
   <span><span>2x </span><i class="fa fa-male fa-2x occupancy-icon">
   </i></span></div>. Converted to the same slate chip as the room-number
   badge and the cart's "2x" pill, for consistency across all three
   occupancy displays on the site.
------------------------------------------------------------------------- */
.rm-cnt .div-room-num,
.rm-cnt .div-room-num *:not(.x-remove):not(.x-remove *) {
	color: var(--slate-tint-text) !important;
}

.supp_occupancy {
	text-align: right;
	color: var(--cyan-700);
	font-weight: 600;
	font-size: 13px;
}
.supp_occupancy > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
}
.supp_occupancy .occupancy-icon {
	color: var(--slate-tint-text) !important;
	font-size: 13px !important;
}
/* ----------------------------------------------------------------------
   25. AVAILABLE OFFERS BLOCK (#offer_div) — previously untouched,
   rendering with RoomCloud's raw default look (flat blue banner, plain
   button). Confirmed markup: #offer_div > .offertitle (clickable
   toggle, wraps .room-title text) + #offerDescriptions > Bootstrap
   carousel > .offer-box row (.search-titles name, .room-hr divider,
   .activateOffer button which already carries .be-btn.btn-one and
   should inherit the site's sage action-button styling — left as-is
   rather than guessed at, since it's a shared class already working
   correctly elsewhere).
   Gold tint used since this is a deal/promo signal, consistent with
   the OFFERTA ribbon elsewhere on the site, rather than the default
   blue "info" banner color which doesn't map to anything else here.
------------------------------------------------------------------------- */
#offer_div {
	background-color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-top: 10px;
	padding: 0;
}
#offer_div .offertitle {
	background-color: var(--gold-tint-bg);
	cursor: pointer;
	padding: 14px 16px;
	margin: 0;
}
#offer_div .offertitle::before {
	font-family: "FontAwesome";
	font-weight: normal;
	font-style: normal;
	content: "\f06b";
	color: var(--gold-tint-text);
	margin-right: 8px;
	font-size: 13px;
}
#offer_div .offertitle .room-title {
	color: var(--gold-tint-text);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
#offerDescriptions {
	padding: 12px 16px 16px;
}
.offer-box {
	display: flex;
	align-items: center;
}
.offer-box .search-titles {
	font-size: 15px;
	font-weight: 700;
	color: var(--black-color);
}
.offer-box .room-hr {
	display: none;
}
.offer-box .activateOffer {
	width: 100%;
}


/* ----------------------------------------------------------------------
   26. DATE FIELD ERROR STATE — lighter, border-only treatment. Reverted
   the earlier full-block red version per explicit feedback ("I don't
   like it") — this only colors the field's border, keeps the note
   small and quiet rather than a solid colored block, matching the
   rest of the site's understated note language instead of a loud
   validation banner.
------------------------------------------------------------------------- */
.form-group.has-error .calendar_search_group {
	border: 1px solid var(--red-400) !important;
	border-radius: var(--radius-sm);
}
.form-group.has-error .calendar_search_group i {
	color: var(--red-500) !important;
}
.form-group.has-error .form-control-feedback {
	display: none !important;
}
.form-group.has-error small.help-block {
	display: block;
	color: var(--red-500);
	font-size: 11px;
	font-weight: 500;
	padding: 3px 12px 0;
}

/* ----------------------------------------------------------------------
   27. RESULT COLUMN — "disabled" black-and-white state while search is
   invalid, INCLUDING on first page load before any dates are picked.
   Reverted the Istruzioni-modal styling attempt entirely per feedback;
   this replaces that direction with a different idea — when the date
   fields fail validation (.form-group.has-error, added live by
   formValidation.js) OR are still empty (:placeholder-shown — NOT yet
   confirmed against live markup that #search_calendar actually carries
   a placeholder attribute; if this doesn't trigger on first load,
   that's why), the results column goes fully grayscale and inert,
   pulling attention to the search panel instead of a popup. No
   opacity — that let the background photo bleed through and muddied
   it; grayscale alone reads as "disabled" while staying fully legible.
   Color returns automatically once valid dates are picked, since
   formValidation.js calls revalidateField() on date change (confirmed
   in the page's own JS).

   #top_bar (currency/language switcher) is deliberately excluded so
   it stays usable throughout — but `filter` on a parent cannot be
   selectively undone on a child (unlike most properties, there's no
   escape hatch), so this couldn't be solved by excluding #top_bar
   from a single rule on #result-col. Instead the filter is applied
   individually to each of #top_bar's siblings under .transparent
   (confirmed shared parent) via :not(#top_bar), leaving the nav bar
   itself completely outside the filtered subtree.
------------------------------------------------------------------------- */
#main-row:has(#search_calendar:placeholder-shown) #result-col .transparent > *:not(#top_bar),
#main-row:has(#search_group_div .form-group.has-error) #result-col .transparent > *:not(#top_bar) {
	filter: grayscale(100%);
	pointer-events: none;
	user-select: none;
	transition: filter .3s var(--ease);
}

/* ----------------------------------------------------------------------
   28. ROOM NUMBER — corner ribbon (search sidebar). Reverted back to
   the diagonal sash after the flush-tag rework broke (element rendered
   in normal flow, pushing content down, for reasons that didn't
   resolve even after forcing every property with !important) — kept
   as diagonal per explicit direction rather than keep chasing it.
   Confirmed markup: .rm-cnt > .div-room-num > .room-number (real text
   "#1", "#2"...) + .div-room-action-add (remove button, only present
   for room 2+). The "Camera"/"Room"/etc. prefix is CSS-generated via
   ::before since content: can't read the span's own "#1" text.
------------------------------------------------------------------------- */
.rm-cnt {
	position: relative;
	overflow: hidden;
}
.rm-cnt .div-room-num {
	position: static;
	background: transparent;
	padding: 0;
	margin-bottom: 0;
	min-height: 34px;
}
.rm-cnt .div-room-num::before {
	content: none;
}
.rm-cnt .room-number {
	position: absolute;
	top: 14px;
	left: -34px;
	transform: rotate(-45deg);
	transform-origin: center;
	background-color: var(--slate-tint-bg);
	color: var(--slate-tint-text) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 38px;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}
.rm-cnt .room-number::before {
	content: "Persona";
}
html:has(#lang_bar a.active_lang[data-target="en"]) .rm-cnt .room-number::before { content: "Person"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) .rm-cnt .room-number::before { content: "Personne"; }
html:has(#lang_bar a.active_lang[data-target="es"]) .rm-cnt .room-number::before { content: "Persona"; }
.rm-cnt .div-room-action-add {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	pointer-events: auto;
}


/* ----------------------------------------------------------------------
   29. ROOM NUMBER — corner ribbon, cart panel. Reverted to match
   section 28. Anchored to .selected-item (the confirmed real card
   boundary — the inner .div-room-num.item-row is only 26px tall and
   clips a diagonal sash if the ribbon is anchored there instead).
------------------------------------------------------------------------- */
.selected-item {
	position: relative;
	overflow: hidden;
}
#cart-items .div-room-num.item-row > div:has(.room-number-num) {
	display: block !important;
	position: absolute !important;
	flex: none !important;
	max-width: none !important;
	width: auto !important;
	top: 14px;
	left: -34px;
	transform: rotate(-45deg);
	transform-origin: center;
	background-color: var(--slate-tint-bg);
	padding: 4px 38px !important;
	border-radius: 0 !important;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}
#cart-items .div-room-num.item-row > div:has(.room-number-num)::before {
	content: "Letto " !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--slate-tint-text) !important;
	margin-right: 0 !important;
}
html:has(#lang_bar a.active_lang[data-target="en"]) #cart-items .div-room-num.item-row > div:has(.room-number-num)::before { content: "Bed " !important; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #cart-items .div-room-num.item-row > div:has(.room-number-num)::before { content: "Lit " !important; }
html:has(#lang_bar a.active_lang[data-target="es"]) #cart-items .div-room-num.item-row > div:has(.room-number-num)::before { content: "Cama " !important; }
#cart-items .room-number-num,
#cart-items .room-number-supp {
	color: var(--slate-tint-text) !important;
	font-size: 11px !important;
	font-weight: 700;
}
#cart-items .div-room-num.item-row > .col-lg-10 {
	padding-left: 90px !important;
}

/* ----------------------------------------------------------------------
   30. HOTEL ADDRESS CARD — icon chips + breathing room. The glassmorphism
   treatment from section 6 stays untouched; this addresses what still
   read as flat within it: bare colored glyphs with no visual weight,
   tight row spacing, and no hover affordance on the address (which is
   clickable — opens the map modal via .map-open). Scoped to
   table.property-address specifically since .blu-icon has no other
   use elsewhere in this file.
------------------------------------------------------------------------- */
table.property-address td:first-child {
	width: 26px;
	padding-right: 8px;
}
table.property-address td:first-child i.blu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background-color: var(--slate-tint-bg);
	color: var(--btn-one-bg) !important;
	border-radius: 50%;
	font-size: 11px;
	font-weight: normal !important;
}
table.property-address td {
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12.5px;
}
.property-address .map-open {
	cursor: pointer;
	transition: color .15s var(--ease);
}
.property-address .map-open:hover {
	color: var(--cyan-700);
	text-decoration: underline;
}
.stars-color {
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
div.property-title div {
	margin-top: 2px;
}

/* ----------------------------------------------------------------------
   31. PRICE-MATCH COMPARATOR — corner tag (reworked). First attempt was
   a rotated diagonal sash and broke (double-rendered text, overflow) —
   replaced entirely with the same flush corner-tag pattern already
   proven on OFFERTA and ULTIMA CAMERA elsewhere in this file (small
   rectangular tag, no rotation, sitting flush against two card edges
   with a matching rounded outer corner), just mirrored to the top-left
   per explicit request instead of top-right. Reusing that exact
   mechanism is also simpler and more robust than the sash — no
   font-size:0 text-hiding trick needed, since a short flush tag can
   just show real content via a fresh ::before instead of fighting the
   original long text.
------------------------------------------------------------------------- */
#comparator-div {
	position: relative;
}
.best-offer {
	position: static;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
}
#comparator-div::before {
	content: "Miglior Prezzo";
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 2;
	background-color: var(--gold-tint-bg);
	color: var(--gold-tint-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: var(--radius-lg) 0 var(--radius-md) 0;
}
html:has(#lang_bar a.active_lang[data-target="en"]) #comparator-div::before { content: "Best Price"; }
html:has(#lang_bar a.active_lang[data-target="fr"]) #comparator-div::before { content: "Meilleur Prix"; }
html:has(#lang_bar a.active_lang[data-target="es"]) #comparator-div::before { content: "Mejor Precio"; }

#comparator > .clearfix {
	padding: 34px 20px 12px;
}
.site-offer, .portal-offer {
	padding: 6px 20px !important;
}

/* ----------------------------------------------------------------------
   32. PRICE-MATCH COMPARATOR — winning-column tint + "VS" divider badge.
   Two of the three suggestions from this round (the third — a computed
   savings amount — isn't achievable in CSS at all, flagged separately;
   no markup element exists to hold it and CSS can't subtract two text
   values to produce one). --green-100 used for the tint since no
   dedicated green-tint pair exists yet (unlike --gold-tint and
   --slate-tint) — reusing the existing green-100 swatch instead of
   inventing a new token pair for one component.
------------------------------------------------------------------------- */
.portal-offer {
	position: relative;
}
.portal-offer::before {
	content: "VS";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border: 1px solid var(--gray-300);
	color: var(--gray-500);
	font-size: 10px;
	font-weight: 700;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* ----------------------------------------------------------------------
   33. PRICE-MATCH COMPARATOR — compact single-line layout. Per direct
   feedback with real competitor examples attached — the label-above-
   amount stacked layout was the main reason the card felt tall.
   Putting the label inline before the amount (one line instead of two)
   roughly halves each column's height; smaller type throughout brings
   the rest down further.
------------------------------------------------------------------------- */
.title-font label,
.portal-desc {
	display: inline;
	font-size: 11px;
	margin-bottom: 0;
	margin-right: 8px;
}
.site-amount {
	font-size: 18px;
}
.site-currency {
	font-size: 12px;
}
.portal-amount {
	font-size: 14px;
}
.portal-currency {
	font-size: 11px;
}
.site-price::before {
	font-size: 12px;
	margin-right: 4px;
}
.site-offer, .portal-offer {
	padding: 4px 16px !important;
}
#comparator > .clearfix {
	padding: 30px 16px 10px;
}

/* ----------------------------------------------------------------------
   34. PRICE-MATCH COMPARATOR — nicer checkmark icon, no strikethrough
   on the OTA price. Bare check glyph swapped for the filled
   check-circle icon (reads as a "verified best price" badge rather
   than a plain tick); strikethrough removed since it read as
   more aggressive/salesy than intended, per feedback.
------------------------------------------------------------------------- */
.site-price::before {
	content: "\f058" !important;
	color: var(--green-600) !important;
}
.portal-amount,
.portal-currency {
	text-decoration: none !important;
}

/* ----------------------------------------------------------------------
   35. ROOM-ONLY TREATMENT PILL — icon + text unified. Confirmed
   markup: .tratment-div > div wraps .treatment-icon (bed icon) and
   .treatment_desc ("ROOM ONLY") as siblings — previously only the
   text span had the pill background/color, leaving the icon a
   separate cyan glyph floating outside it. Moving the pill styling to
   their shared wrapper and matching the icon's color to the text.
------------------------------------------------------------------------- */
.tratment-div > div {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--slate-tint-bg);
	padding: 3px 10px;
	border-radius: var(--radius-sm);
}
.treatment-icon {
	color: var(--slate-tint-text) !important;
	font-size: 12px !important;
}
.treatment_desc {
	display: inline;
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--slate-tint-text);
}