/* Custom glue styles for the Hotale-skinned home page (not from the original template). */

/* ── Design tokens — edit here to restyle the entire home page ───────── */
:root {
    /* Brand accent — inherits from global.css :root */
    --color-accent:      var(--contrast-color, #B8963F);
    --color-accent-dark: var(--contrast-darker, #9E7F32);
    --color-accent-muted:     #a89880;  /* gold apagado */
    --color-accent-bg:        #f4ede3;  /* fondo suave dorado */
    --color-accent-bg-light:  #f1e4d2;  /* fondo suave dorado más claro */
    --menu-color:               white;
    --menu-background:          #141313;
    --color-topbar:              black;
    /* Paleta cálida (fondos y bordes) */
    --color-warm-50:    #fdf8f2;
    --color-warm-100:   #f7f3ee;
    --color-warm-200:   #f0ece5;
    --color-warm-250:   #f0ebe2;
    --color-warm-300:   #ece6dc;
    --color-warm-400:   #e5e0d8;
    --color-warm-450:   #e2dfd9;
    --color-warm-500:   #e2d9cc;
    --color-warm-600:   #d4c8b8;
    --color-warm-700:   #c0b9af;

    /* Texto */
    --color-text:         #2b2b2b;
    --color-text-darkest: #222222;
    --color-text-mid:     #555;
    --color-text-muted:   #777;
    --color-text-light:   #94959b;
    --color-text-lighter: #9e9e9e;
    --color-text-faint:   #aaa;

    /* Fondos generales */
    --color-white:    #fff;
    --color-bg-light: #f6f6f6;
    --color-bg-mid:   #f0f0f0;

    /* Bordes */
    --color-border:       #ddd;
    --color-border-light: #e5e5e5;

    /* Estado */
    --color-error: #e54e4e;
}

.hotale-home-page #header.hotale-header-wrap {
	position: relative;
	background: var(--color-white);
	z-index: 100;
	-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Sticky header: JS in home-sticky-header.js adds .emilia-header-fixed when the
   topbar scrolls out of view. position:sticky alone can't work here because the
   parent (#header) is only as tall as topbar+nav (~130px), so the sticky would
   stop after just 130px of scroll. */
.hotale-home-page .hotale-header-container.emilia-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--menu-background);
	-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}


/*.hotale-home-page .hotale-header-container.hotale-header-full{
	background-color: var(--color-text-darkest);
}*/

/* The Hotale source CSS hides .hotale-header-wrap below 999px because the original
   template swaps to a separate .hotale-mobile-header-wrap block we don't use. We only
   have one header, so keep it visible at all sizes (the menu inside still falls back to
   QloApps' own hamburger/slide-out panel below 768px - see further down). */
@media only screen and (max-width: 999px) {
	.hotale-home-page #header.hotale-header-wrap.hotale-header-style-plain {
		display: block !important;
	}
}

.hotale-home-page .hotale-header-container-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	/*padding: 18px 30px;*/
}

/* style-core sets .hotale-logo to position:absolute for the center-menu layout so the nav
   can be centered with the logo floating on top. We use flexbox instead, so the logo must
   stay in flow as a normal flex item. */
.hotale-home-page .hotale-header-style-plain.hotale-style-center-menu .hotale-logo {
	position: relative;
}

.hotale-home-page .hotale-logo-inner img {
	max-height: 50px;
}

.hotale-home-page .hotale-navigation {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	color: var(--color-text);
}

.hotale-home-page .hotale-navigation a{
	color: var(--menu-color);
}

.hotale-home-page .hotale-navigation .navbar-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
}

.hotale-home-page .hotale-navigation .navbar-nav > li {
	list-style: none;
}

.hotale-home-page .hotale-navigation #user_info_acc {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	padding: 0;
	line-height: normal;
	color: var(--menu-color);
}

.hotale-home-page .hotale-navigation #user_info_acc span.caret {
	border-top-color: var(--color-text);
}

.hotale-home-page .hotale-navigation .dropdown-menu {
	color: var(--color-text);
	background-color: var(--color-white) !important;
	opacity: 1;
	border: 1px solid var(--color-warm-400);
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	padding: 0;
	margin: 0;
}

.hotale-home-page .hotale-navigation .dropdown-menu > li {
	list-style: none;
}

.hotale-home-page .hotale-navigation .dropdown-menu > li > a {
	color: var(--color-text);
	padding: 8px 20px;
	font-size: 13px;
	display: block;
}

.hotale-home-page .hotale-navigation .dropdown-menu > li > a:hover,
.hotale-home-page .hotale-navigation .dropdown-menu > li > a:focus {
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	text-decoration: none;
}

/* Top thin bar: real contact info (hotelreservationsystem) + currency/language
   switchers (blockcurrencies/blocklanguages), all via the displayNav hook. */

.hotale-home-page .hotale-topbar {
	/*background: var(--color-warm-100);
	border-bottom: 1px solid var(--color-warm-300);*/
    background-color: var(--color-topbar);
    border-bottom: var(--color-topbar);
	position: relative;
	z-index: 3;
}

.hotale-home-page .hotale-topbar-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	padding: 8px 30px;
	font-size: 13px;
	color: var(--menu-color);
}

/* email/phone stay grouped on the left (their natural DOM order); currency+language
   are pushed as a group to the far right via margin-left:auto on the first of the two. */
.hotale-home-page .hotale-topbar-inner .currencies-block-wrap {
	margin-left: auto !important;
}

.hotale-home-page .hotale-topbar-inner .contact-item {
	display: inline-block;
	margin-right: 18px;
}

.hotale-home-page .hotale-topbar-inner .contact-item a {
	color: var(--menu-color);
}

.hotale-home-page .hotale-topbar-inner .contact-item i {
	margin-right: 5px;
}

.hotale-home-page .hotale-topbar-inner .currencies-block-wrap,
.hotale-home-page .hotale-topbar-inner .languages-block-wrap {
	display: inline-block;
	margin-left: 15px;
}

.hotale-home-page .hotale-topbar-inner .currencies-block-wrap .btn,
.hotale-home-page .hotale-topbar-inner .languages-block-wrap .btn {
	color: var(--menu-color);
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
}

.hotale-home-page .hotale-topbar-inner .dropdown-menu {
	color: var(--color-text);
	background-color: var(--color-white) !important;
	opacity: 1;
	border: 1px solid var(--color-warm-400);
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hotale-home-page .hotale-topbar-inner .dropdown-menu > li > a {
	color: var(--color-text);
	padding: 8px 20px;
	font-size: 13px;
	display: block;
}

.hotale-home-page .hotale-topbar-inner .dropdown-menu > li > a:hover,
.hotale-home-page .hotale-topbar-inner .dropdown-menu > li > a:focus {
	background-color: var(--color-accent) !important;
	color: var(--color-white) !important;
	text-decoration: none;
}

.hotale-home-page .hotale-topbar-inner .dropdown-menu > li.active > a {
	background-color: var(--color-accent-bg) !important;
	color: var(--color-accent) !important;
}

/* Main nav: blocknavigationmenu's real menu (normally an off-canvas slide-out panel).
   Below 768px we leave it completely untouched - QloApps' own hamburger/slide-out
   behaviour already works on mobile. Only from tablet/desktop width up do we turn it
   into a plain horizontal bar (Hotale's look). */

.hotale-home-page .header-top-item {
	margin-left: 25px;
}

/* The mobile hamburger icon bars are white in the original theme (made for a dark
   header) - darken for our white one, same as the cart icon below. */
.hotale-home-page .nav_toggle .icon-bar {
	background-color: var(--menu-color);
}

@media (min-width: 768px) {
	.hotale-home-page .nav_toggle {
		display: none;
	}

	.hotale-home-page #menu_cont {
		position: static;
		width: auto;
		background: none;
		padding-top: 0;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.hotale-home-page #menu_cont .close_navbar {
		display: none;
	}

	.hotale-home-page .wk-nav-style {
		border-bottom: none;
		margin: 0;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

/* The cart icon (blockcart) is drawn with FontAwesome :before/:after pseudo-elements
   colored white in the original theme (made for a dark header) - darken for our white one. */
.hotale-home-page #header .shopping_cart > a:first-child:before,
.hotale-home-page #header .shopping_cart > a:first-child:after {
	color: var(--menu-color);
}

.hotale-home-page #header .shopping_cart > a:first-child {
	color: var(--color-text);
	display: inline-block;
	line-height: 22px;
	height: 22px;
	overflow: visible;
}

/* badge_style is position:absolute with no positioned ancestor in our markup, so it was
   escaping all the way up to the page; anchor it to the cart icon itself. */
.hotale-home-page #header .shopping_cart {
	position: relative;
}

/* Open the dropdown anchored to where the cart icon itself sits (like the old dark
   header did), instead of centering/floating it relative to the viewport. */
.hotale-home-page #header .cart_block {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
}

/* The global ".hotale-home-page table/td" reset (style-core.scoped.css) strips the
   horizontal cell padding and doesn't set a background/text color, so the booking
   dates table inside the cart dropdown - which was themed for the old dark header -
   ends up cramped and low-contrast. Restore it explicitly, with !important since the
   reset rules load after blockcart.css and would otherwise win on equal specificity.
   Every level (table-responsive wrapper, table, thead, tbody, tr, td) is covered
   because the old theme's bootstrap-ish table css set a white background at more than
   one of these levels depending on viewport - matching the header's flat dark look (no
   separate band behind "Duración/Cant./Precio") means none of them may stay light. */
.hotale-home-page #header .cart_block .table-responsive,
.hotale-home-page #header .cart_block table.table,
.hotale-home-page #header .cart_block table.table thead,
.hotale-home-page #header .cart_block table.table tbody,
.hotale-home-page #header .cart_block table.table tr,
.hotale-home-page #header .cart_block table.table th,
.hotale-home-page #header .cart_block table.table td {
	background-color: transparent !important;
	color: #EDEDED !important;
	text-align: left !important;
	border: none !important;
}

.hotale-home-page #header .cart_block table.table th,
.hotale-home-page #header .cart_block table.table td {
	padding: 9px 10px !important;
}

/* Give the date range and price room to fit on one line instead of wrapping. Forcing
   nowrap on all 3 text columns made them wider than the popup, which pushed the table
   past 100% and made .table-responsive's overflow-x:auto kick in as a tiny scrollbar
   on the side. Free up the space by dropping the side padding instead of capping the
   table's width. */
.hotale-home-page #header .cart_block table.table th,
.hotale-home-page #header .cart_block table.table td {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.hotale-home-page #header .cart_block table.table th:first-child,
.hotale-home-page #header .cart_block table.table td:first-child {
	width: 50% !important;
	white-space: nowrap !important;
}

/* Same for the price column (3rd of 4: Duración, Cant., Precio, remove icon) - it was
   narrow enough that "440,02 €" wrapped the currency sign onto its own line. */
.hotale-home-page #header .cart_block table.table th:nth-child(3),
.hotale-home-page #header .cart_block table.table td:nth-child(3) {
	white-space: nowrap !important;
}

/* The 4th column (remove-room "x") was left to shrink/grow with whatever space was
   left over, so its "x" landed at a different horizontal spot on every row and didn't
   line up with the product card's own remove "x" above it. Pin it to a fixed width
   flush against the same right edge on every row. */
.hotale-home-page #header .cart_block table.table th:nth-child(4),
.hotale-home-page #header .cart_block table.table td:nth-child(4) {
	width: 30px !important;
	text-align: right !important;
}

/* cart-prices-line already has a divider + padding, but the reset's tighter
   line-height makes the Impuesto/Cargos/Total/tax-note lines feel cramped. */
.hotale-home-page #header .cart_block .cart-prices-line {
	padding: 15px 0 !important;
}

.hotale-home-page #header .cart_block .cart-prices,
.hotale-home-page #header .cart_block .cart-prices p {
	text-align: left !important;
}

.hotale-home-page #header .cart_block .cart-prices p {
	margin-top: 8px !important;
}

/* Floats here were fighting with the reset and wrapping the label under the price;
   flex guarantees label-left/value-right on one line regardless of markup order. */
.hotale-home-page #header .cart_block .cart-prices-line {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	text-align: left !important;
	gap: 10px;
}

.hotale-home-page #header .cart_block .cart-prices-line .price {
	float: none !important;
	text-align: right !important;
	white-space: nowrap;
}

/* The markup always puts the price span first and the label span second - but on the
   convenience-fee line the label span ALSO carries the "price" class (a markup quirk),
   so selecting by ".price" picked both spans there and broke the order. Selecting by
   position instead works for every line regardless of which classes are present. */
.hotale-home-page #header .cart_block .cart-prices-line > span:first-child {
	order: 2;
}

.hotale-home-page #header .cart_block .cart-prices-line > span:last-child {
	order: 1;
}

.hotale-home-page #header .cart_block table.table th {
	color: #fff !important;
	font-weight: bold !important;
}

/* Same reset also zeroes dt's padding (20px 10px 16px 20px in blockcart.css), which is
   what gives each product block in the cart dropdown room to breathe; without it the
   thumbnail/name/price sit flush against the booking-dates table below them. */
.hotale-home-page #header .cart_block dt {
	padding: 20px 10px 16px 20px !important;
}

.hotale-home-page #header .shopping_cart .badge_style {
	position: absolute;
	top: -8px;
	left: auto;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	line-height: 16px;
	font-size: 10px;
	text-align: center;
	border-radius: 8px;
	background-color: var(--color-accent);
	color: var(--color-white);
}

/* Hover indicator on the main menu uses a box-shadow instead of border-bottom so it never
   changes the link's box height/layout (the original border-bottom color swap could shift
   neighbouring flex items by a sub-pixel amount). Desktop-only, same as the rest of the
   horizontal-menu conversion above. */
@media (min-width: 768px) {
	.hotale-home-page .wk-nav-style li {
		margin: 0 18px;
		float: none;
		border-bottom: none !important;
	}

	.hotale-home-page .navigation-link {
		font-family: 'Jost', sans-serif;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 1px;
		display: inline-block;
		padding-bottom: 17px;
		-webkit-box-shadow: 0 2px 0 0 transparent;
		box-shadow: 0 2px 0 0 transparent;
		-webkit-transition: -webkit-box-shadow .2s;
		transition: box-shadow .2s;
	}

	header .header-top-item .header-top-link:hover,
	.hotale-home-page .navigation-link:hover,
	.hotale-home-page .navigation-link:focus {
		-webkit-box-shadow: 0 2px 0 0 var(--color-accent);
		box-shadow: 0 2px 0 0 var(--color-accent);
	}
}

.hotale-home-page .header_user_info a {
	/*font-family: 'Jost', sans-serif;*/
	font-size: 14px;
	text-transform: uppercase;
	/*letter-spacing: 1px;*/
}

.hotale-home-page .hotale-navigation .dropdown-menu > li > a:hover, .hotale-home-page .hotale-navigation .dropdown-menu > li > a{
    text-transform: capitalize;
}

.hotale-home-page .hotale-hero-banner {
	position: relative;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	/* 124px = topbar (~37px) + logo/nav bar (~87px). Subtracting it makes the hero
	   fill exactly the remaining viewport so title + search bar are both visible on load. */
	min-height: calc(100vh - 124px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 50px 20px 110px;
	text-align: left;
}

.hotale-home-page .hotale-hero-banner-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.45);
}

.hotale-home-page .hotale-hero-banner-content {
	position: relative;
	z-index: 2;
	color: var(--color-white);
	width: 100%;
}

.hotale-home-page .hotale-hero-title {
	font-family: 'Jost', sans-serif;
	font-size: 48px;
	font-weight: 600;
	color: var(--color-white);
	margin: 0 0 10px;
}

.hotale-home-page .hotale-hero-subtitle {
	font-family: 'Merriweather', serif;
	font-size: 18px;
	font-style: italic;
	color: var(--color-accent-bg-light);
	margin: 0 0 30px;
}

/* Hotel name/tagline (headerHotelDescBlock.tpl, real & editable from the back office) now
   rendered inside the hero instead of a hardcoded title - undo its old "absolute full-cover,
   behind everything" positioning (it was built for the old fixed-height header) and restyle
   it like the Hotale hero title. */

.hotale-home-page .header-desc-container {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	z-index: 2 !important;
	width: 100%;
}

.hotale-home-page .header-desc-wrapper {
	display: block;
	height: auto;
}

.hotale-home-page .header-desc-primary {
	display: block;
}

.hotale-home-page .header-hotel-name {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	color: var(--color-white);
}

.hotale-home-page .header-hotel-desc {
	font-family: 'Merriweather', serif;
	font-style: italic;
	color: var(--color-accent-bg-light);
}

/* ── CTA sobre #body-banner (encima de las reseñas, texto/URL editable desde BO) ── */
#body-banner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
}

#body-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
}

.front-body-banner-cta-wrap {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 20px;
	max-width: 700px;
}

.front-body-banner-title {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-size: 42px;
	font-weight: 600;
	color: var(--color-white);
	margin: 0 0 18px;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.front-body-banner-subtitle {
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255,255,255,0.88);
	margin: 0 0 32px;
	line-height: 1.7;
	text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.front-body-banner-cta-btn {
	display: inline-block;
	background: transparent;
	color: var(--color-white);
	border: 2px solid var(--color-white);
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 48px;
	border-radius: 4px;
	text-decoration: none;
	-webkit-transition: background 0.25s, color 0.25s, border-color 0.25s;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.front-body-banner-cta-btn:hover,
.front-body-banner-cta-btn:focus {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
	text-decoration: none;
}

/* Room search bar (.hotale-search-bar wraps the module's real, unmodified search form -
   only the container/inputs are re-skinned, no class/id used by its JS is touched). */

.hotale-home-page .hotale-search-bar {
	background: none;
	/* keep the original absolute/bottom-pinned positioning from wk-landing-page-search.css
	   so the bar overlaps the bottom of the hero image like in Hotale */
}

.hotale-home-page .hotale-search-bar .header-rmsearch-wrapper {
	display: block;
	height: auto;
}

.hotale-home-page .hotale-search-bar .header-rmsearch-primary {
	display: block;
}

.hotale-home-page .hotale-search-bar .header-rmsearch-inner-wrapper {
	background: var(--color-white);
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	padding: 20px;
	margin: 0 auto 0;
	max-width: 1100px;
	overflow: visible;
}

/* Gap between grid cells and between the last field and the button */
.hotale-home-page .hotale-search-bar #search_form_fields_wrapper {
	gap: 10px;
	overflow: visible;
}

.hotale-home-page .hotale-search-bar #search_form_fields_wrapper .grid-item {
	overflow: visible;
}

/* The date-range and occupancy popups must escape the search bar container */
.hotale-home-page .hotale-search-bar,
.hotale-home-page .hotale-search-bar .header-rmsearch-wrapper,
.hotale-home-page .hotale-search-bar .header-rmsearch-primary {
	overflow: visible !important;
}

.hotale-home-page .hotale-search-bar #search_hotel_block_form .header-rmsearch-input {
	height: 48px;
	border: 1px solid var(--color-warm-450);
	border-radius: 3px;
	font-family: 'Jost', sans-serif;
}

/* The occupancy and date inputs carry a background SVG icon at ~8px from the left.
   global.css sets padding-left:35px on .input-occupancy/.input-date but the high-
   specificity selector above can shadow it; repeat it here so the icon never
   overlaps the text. */
.hotale-home-page .hotale-search-bar #search_hotel_block_form .input-occupancy,
.hotale-home-page .hotale-search-bar #search_hotel_block_form .input-date {
	padding-left: 38px;
}

.hotale-home-page .hotale-search-bar #search_room_submit {
	height: 48px;
	width: 100%;
	background: var(--color-accent);
	border-color: var(--color-accent);
	font-family: 'Jost', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.hotale-home-page .hotale-search-bar #search_room_submit:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}


.header-rmsearch-container {
	bottom: 20% !important;
}

.header-rmsearch-wrapper .btn-primary {
	padding: 8px 20px;
}

.header-rmsearch-wrapper .btn-primary:hover {
	background-color: var(--contrast-darker)
}

#search_occupancy_wrapper .add_new_occupancy_btn {	
	color: var(--contrast-color);
}
#search_occupancy_wrapper .add_new_occupancy_btn:active, #search_occupancy_wrapper .add_new_occupancy_btn:focus, #search_occupancy_wrapper .add_new_occupancy_btn:hover{
	color: var(--contrast-darker);
}

.badge_style{
	z-index: 2;
}
/* Occupancy +/- buttons: plain text symbols, bigger and proportional to the calendar */
#search_occupancy_wrapper .qty_direction {
    width: 22px;
    flex: 0 0 22px;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#search_occupancy_wrapper .qty_direction a {
    font-size: 0;
    font-weight: 400;
    line-height: 1;
    width: 100%;
    height: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-mid);
    float: none;
    position: relative;
}
/* The icon font glyph renders as a circled +/- in this theme - hide it and
   draw a plain +/- instead, so only the square button border is visible. */
#search_occupancy_wrapper .qty_direction a i {
    display: none;
}
#search_occupancy_wrapper .qty_direction a::before {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}
#search_occupancy_wrapper .occupancy_quantity_up::before {
    content: "+";
}
#search_occupancy_wrapper .occupancy_quantity_down::before {
    content: "\2212";
}
#search_occupancy_wrapper .qty_direction a:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
}
#search_occupancy_wrapper .occupancy_count {
    float: none;
    flex: 0 0 auto;
    width: 50px;
    min-width: 0;
    box-sizing: border-box;
}
/* The hotale-home-page reset zeroes out Bootstrap's .row negative margins,
   so the column padding drifts everything right relative to the "Room - 1"
   heading (which sits outside the grid). Restore the negative margins. */
#search_occupancy_wrapper .row {
    margin-left: -15px;
    margin-right: -15px;
}
/* ...and it also zeroes the columns' own padding, which is what the negative
   row margin above is meant to cancel out - restore that too. */
#search_occupancy_wrapper [class*="col-sm-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
/* Adults (col-sm-5) and Children (col-sm-7) are different grid widths, which
   made the Adults number box render narrower than the Children one. Force an
   even 50/50 split. */
#search_occupancy_wrapper .occupancy_count_block {
    width: 50%;
}
/* Stretch the +/- column to the same height as the number box next to it. */
#search_occupancy_wrapper .occupancy_count_block > div {
    display: flex;
    align-items: stretch;
}
#search_occupancy_wrapper .occupancy_count {
    display: flex;
    align-items: center;
    justify-content: center;
}

#search_occupancy_wrapper .children_ages select{
	font-size: 14px;
}
/* Custom child-age dropdown (replaces native <select>) */
.child-age-custom-dropdown {
    width: 100%;
}
.child-age-custom-dropdown .child-age-btn {
    width: 100%;
    text-align: left;
    background-color: var(--color-white);
    border: 1px solid var(--color-warm-400);
    border-radius: 4px;
    color: var(--color-text);
    font-size: 13px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.child-age-custom-dropdown .child-age-btn .caret {
    color: var(--color-accent);
    border-top-color: var(--color-accent);
}
.child-age-custom-dropdown .child-age-btn:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(196, 151, 94, 0.2);
}
/* Menu appended to <body> so overflow on the panel doesn't clip it */
.child-age-fixed-menu {
    position: absolute;
    z-index: 99999;
    list-style: none;
    margin: 2px 0 0;
    padding: 4px 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-warm-400);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
}
.child-age-fixed-menu li a {
    color: var(--color-text);
    font-size: 13px;
    padding: 7px 16px;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}
.child-age-fixed-menu li a:hover,
.child-age-fixed-menu li a:focus {
    background-color: var(--color-accent);
    color: var(--color-white);
}
.child-age-fixed-menu li.active a {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}

/* ============================================================
   Hotale-style: "Vive La Experiencia" — features block reskin
   Clean flat structure: heading wrapper + full-width amenity rows.
   No Bootstrap container around rows → no JS position hack needed.
   ============================================================ */

/* ---- Section heading ---- */
#hotelAmenitiesBlock .amenities-heading-wrap {
    padding: 100px 15px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
#hotelAmenitiesBlock .home_block_heading {
    font-size: 36px;
    font-weight: 500;
    color: var(--color-text-darkest);
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.2;
}
#hotelAmenitiesBlock .home_block_description {
    font-size: 16px;
    color: var(--color-text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 8px;
    line-height: 1.6;
}
#hotelAmenitiesBlock .home_block_desc_line {
    border: none;
    border-top: 5px solid var(--color-accent);
    width: 70px;
    margin: 0 auto;
}

/* ---- Each amenity: full-width row with image col + text col ---- */
#hotelAmenitiesBlock .amenity-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: 480px;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 50px 0;
}

#hotelAmenitiesBlock .amenity-image-col,
#hotelAmenitiesBlock .amenity-text-col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* ---- Image cell fills full height ---- */
#hotelAmenitiesBlock .amenity_img_primary {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#hotelAmenitiesBlock .amenity_img_secondary {
    padding-bottom: 0 !important;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 480px;
    background-size: cover;
    background-position: center center;
}

/* ---- Text cell ---- */
#hotelAmenitiesBlock .amenity_desc_primary {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#hotelAmenitiesBlock .amenity_desc_secondary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 80px 100px;
    text-align: left;
}
#hotelAmenitiesBlock .amenity_heading {
    font-size: 30px;
    font-weight: 500;
    color: var(--color-text-darkest);
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    margin-bottom: 0;
    line-height: 1.25;
    text-transform: none;
}
#hotelAmenitiesBlock .amenity_desc_hr {
    border: none;
    border-top: 5px solid var(--color-accent);
    width: 70px;
    margin: 20px 0 24px;
    display: block;
}
#hotelAmenitiesBlock .amenity_description {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.7;
    font-weight: 400;
}

/* ---- Full-row alternating solid backgrounds ---- */
#hotelAmenitiesBlock .amenity-row-odd {
    background-color: var(--color-warm-200);
}
#hotelAmenitiesBlock .amenity-row-even {
    background-color: var(--color-white);
}

/* ---- Shared pseudo-element base ---- */
#hotelAmenitiesBlock .amenity-row::before,
#hotelAmenitiesBlock .amenity-row::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* ODD: circle top-right corner */
#hotelAmenitiesBlock .amenity-row-odd::before {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background-color: var(--color-warm-500);
    top: -160px;
    right: -140px;
    opacity: 0.55;
    z-index: 0;
}
/* ODD: dots just left of the image (centre of the row) */
#hotelAmenitiesBlock .amenity-row-odd::after {
    width: 160px;
    height: 200px;
    bottom: 20px;
    left: calc(50% - 180px);
    background-image: radial-gradient(circle, var(--color-accent-muted) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.55;
    z-index: 0;
}

/* EVEN: circle bottom-left corner */
#hotelAmenitiesBlock .amenity-row-even::before {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background-color: var(--color-warm-500);
    bottom: -160px;
    left: -140px;
    opacity: 0.55;
    z-index: 0;
}
/* EVEN: dots bottom-right corner */
#hotelAmenitiesBlock .amenity-row-even::after {
    width: 160px;
    height: 200px;
    top: 20px;
    right: 30px;
    background-image: radial-gradient(circle, var(--color-accent-muted) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.55;
    z-index: 0;
}

/* Content columns sit above decorations */
#hotelAmenitiesBlock .amenity-image-col,
#hotelAmenitiesBlock .amenity-text-col {
    position: relative;
    z-index: 1;
}

/* Space between consecutive blocks */
#hotelAmenitiesBlock .amenity-row + .amenity-row {
    /*margin-top: 20px;*/
}

/* Tablet/Mobile: stack as image-top / text-bottom, always */
@media (max-width: 991px) {
    #hotelAmenitiesBlock .amenity-row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    #hotelAmenitiesBlock .amenity-image-col,
    #hotelAmenitiesBlock .amenity-text-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Image always on top regardless of DOM order (even rows have text first) */
    #hotelAmenitiesBlock .amenity-image-col {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        order: 1;
    }
    #hotelAmenitiesBlock .amenity-text-col {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    #hotelAmenitiesBlock .amenity_img_secondary {
        min-height: 260px;
    }
    #hotelAmenitiesBlock .amenity_desc_secondary,
    #hotelAmenitiesBlock .amenity-row-even .amenity-text-col .amenity_desc_secondary {
        padding: 36px 24px;
        max-width: 100%;
    }
    /* Reduce decoration circles on small screens */
    #hotelAmenitiesBlock .amenity-row::before {
        width: 250px;
        height: 250px;
    }
}


/* ── Mobile menu improvements (max-width: 767px) ──────────────────────── */

/* Ocultar topbar (email/teléfono) en móvil — aparecerán dentro del menú */
@media (max-width: 767px) {
	.hotale-home-page .hotale-topbar {
		display: none !important;
	}

	/* Panel del menú: más ancho y con scroll suave */
	#menu_cont {
		/*width: 85vw !important;*/
		max-width: auto;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		padding: 0 !important;
	}

	/* Cabecera del panel: botón de cierre con más espacio */
	#menu_cont .close_navbar {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		height: 56px;
		padding: 0 18px;
		font-size: 22px;
		border-bottom: 1px solid var(--color-warm-200);
		color: var(--color-text);
	}

	/* Lista de navegación: sin margen superior extra */
	.hotale-home-page .wk-nav-style,
	#menu_cont .wk-nav-style {
		padding: 10px 0 10px !important;
		margin-top: 0 !important;
		border-bottom: 1px solid var(--color-warm-200) !important;
	}

    .hotale-home-page .hotale-navigation a{
        color: var(--color-text);
    }

	#menu_cont .wk-nav-style > li {
		border-bottom: none !important;
	}

	/* Botón de cierre: solo X, sin círculo */
	#menu_cont .close_navbar {
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		outline: none !important;
		width: auto !important;
		height: auto !important;
		padding: 18px 20px !important;
		font-size: 22px !important;
		color: var(--color-text) !important;
		opacity: 1 !important;
		line-height: 1 !important;
	}

	#menu_cont .close_navbar * {
		border: none !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	#menu_cont .close_navbar i {
		font-size: 22px;
		color: var(--color-text);
		display: block;
	}

	#menu_cont .wk-nav-style > li > a.navigation-link {
		display: block;
		padding: 25px 24px !important;
		font-family: 'Jost', sans-serif;
		font-size: 14px !important;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: var(--color-text) !important;
		border-left: 3px solid transparent;
		transition: border-color 0.2s, color 0.2s, background 0.2s;
	}

	#menu_cont .wk-nav-style > li > a.navigation-link:hover,
	#menu_cont .wk-nav-style > li > a.navigation-link:focus {
		color: var(--color-accent) !important;
		border-left-color: var(--color-accent);
		background: var(--color-warm-50);
		text-decoration: none;
	}

	/* Secciones extra del menú (currency, language, login) */
	#menu_cont .header-top-item {
		padding: 10px 24px;
		font-size: 14px;
		color: var(--color-text-mid);
	}

	/* Estilos para el bloque de email/teléfono del hook (external-navigation-hook) */
	#menu_cont .wk-nav-style li a[href^="mailto:"],
	#menu_cont .wk-nav-style li a[href^="tel:"] {
		font-family: 'Jost', sans-serif;
		font-size: 13px !important;
		color: var(--color-text-muted) !important;
		text-transform: none;
		letter-spacing: 0;
		padding: 10px 24px !important;
	}

	#menu_cont .wk-nav-style li a[href^="mailto:"]:hover,
	#menu_cont .wk-nav-style li a[href^="tel:"]:hover {
		color: var(--color-accent) !important;
		border-left-color: var(--color-accent);
		background: var(--color-warm-50);
	}

	#menu_cont .wk-nav-style li a[href^="mailto:"] i,
	#menu_cont .wk-nav-style li a[href^="tel:"] i {
		color: var(--color-accent);
		margin-right: 8px;
	}

	/* Selectores de moneda/idioma (btn-currency-selector-popup / btn-language-selector-popup)
	   se generan como su propio <ul class="wk-nav-style"><li><a> fuera del listado principal,
	   así que no heredan el padding/tipografía de .navigation-link - lo igualamos aquí. */
	#menu_cont .wk-nav-style li a.btn-currency-selector-popup,
	#menu_cont .wk-nav-style li a.btn-language-selector-popup {
		display: block;
		padding: 18px 24px !important;
		font-family: 'Jost', sans-serif;
		font-size: 14px !important;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: var(--color-text) !important;
		border-left: 3px solid transparent;
		transition: border-color 0.2s, color 0.2s, background 0.2s;
	}

	#menu_cont .wk-nav-style li a.btn-currency-selector-popup:hover,
	#menu_cont .wk-nav-style li a.btn-language-selector-popup:hover {
		color: var(--color-accent) !important;
		border-left-color: var(--color-accent);
		background: var(--color-warm-50);
		text-decoration: none;
	}

	#menu_cont .wk-nav-style li a.btn-currency-selector-popup .caret,
	#menu_cont .wk-nav-style li a.btn-language-selector-popup .caret {
		border-top-color: var(--color-accent);
		margin-left: 4px;
	}
}

/* ── Mobile/tablet fancybox search modal (applies up to 999px) ──────── */
@media (max-width: 999px) {
    /* Modal ocupa casi toda la pantalla y hace scroll internamente */
    .fancybox-wrap {
        width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }
    .fancybox-outer,
    .fancybox-skin,
    .fancybox-inner {
        width: 100% !important;
        box-sizing: border-box;
    }
    /* height:auto overrides the inline style fancybox JS sets on .fancybox-inner */
    .fancybox-inner {
        height: auto !important;
        overflow-y: auto !important;
        max-height: 85vh !important;
    }

    /* Fix wk-landing-page-search.css: height:calc(100vw-60px) provoca overflow */
    .header-rmsearch-wrapper {
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    /* Occupancy popup: sin min-width fijo para que quepa en pantalla pequeña */
    #search_occupancy_wrapper {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        position: static !important;
        box-shadow: none;
        border: 1px solid var(--color-warm-400);
        border-radius: 4px;
        margin-top: 4px;
    }

    /* Espacio entre campos y botón */
    .fancybox-inner #search_form_fields_wrapper .grid-item + .grid-item {
        margin-top: 10px;
    }
    .fancybox-inner .search_room_submit_block {
        margin-top: 16px !important;
    }

    /* Cruz de cierre dentro del recuadro blanco */
    .fancybox-skin {
        position: relative;
    }
    .fancybox-close {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        z-index: 9999 !important;
    }

    /* Campos en una sola columna */
    .fancybox-inner #search_form_fields_wrapper {
        display: block !important;
        width: 100% !important;
    }
    .fancybox-inner #search_form_fields_wrapper .grid-item {
        display: block !important;
        margin-bottom: 10px;
        width: 100% !important;
        grid-column: span 1 !important;
    }
    .fancybox-inner .header-rmsearch-input,
    .fancybox-inner .input-date,
    .fancybox-inner .input-occupancy,
    .fancybox-inner #search_room_submit {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Calendario: se despliega inline dentro del modal (no flota fuera) */
    .fancybox-inner .date-picker-wrapper {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid var(--color-warm-400) !important;
        margin-top: 4px;
    }

	.header-rmsearch-inner-wrapper{
		padding: 20px 0px;
	}

	 .hotale-home-page ul,
	.hotale-home-page ol{
		margin-left: 0px;
		margin-bottom: 0px;
	}

}

/* ============================================================
   Hotale-style: "Nuestros Alojamientos" — room carousel section
   Matches hotel2's rooms block: 3-column slider, nav arrows,
   gold divider, ribbon badges, tourmaster card look.
   ============================================================ */

/* ── Section wrapper ── */
.hotale-rooms-section {
    background: var(--color-white);
    padding: 90px 0 80px;
    position: relative;
    overflow: hidden;
}

/* ── Dot-grid decoration top-right ── */
.hotale-rooms-bg-deco {
    position: absolute;
    top: 30px;
    right: 0;
    width: 220px;
    height: 320px;
    background-image: radial-gradient(circle, var(--color-warm-700) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

/* ── Large beige half-circle left (same as hotel2) ── */
/*.hotale-rooms-section::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background-color: var(--color-warm-250);
    top: -160px;
    left: -140px;
    pointer-events: none;
    z-index: 0;
}*/

/* ── Dot-grid decoration bottom-right ── */
.hotale-rooms-section::after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 220px;
    height: 320px;
    background-image: radial-gradient(circle, var(--color-warm-700) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.hotale-rooms-section-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* ── Section header ── */
.hotale-rooms-section-header {
    text-align: center;
    margin-bottom: 50px;
    /* max-width and centering set in the carousel-wrap block above */
}

.hotale-rooms-section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 500;
    color: var(--color-text-darkest);
    margin: 0 0 14px;
    line-height: 1.2;
}

/* .hotale-rooms-section-divider defined with !important in the override block below */

.hotale-rooms-section-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-light);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Carousel wrapper: arrows + viewport in a flex row ── */
.hotale-rooms-carousel-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* The header (title/divider/subtitle) is constrained to a narrower centre column */
.hotale-rooms-section-header {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hotale-rooms-carousel-viewport {
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* ── Carousel track ── */
.hotale-rooms-carousel-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* ── Each slide — width set in px by JS (rooms-carousel.js) ── */
.hotale-rooms-carousel-slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* No padding here — gap is created by margin on the card inside */
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none !important;
}

/* ── Gap between cards: margin on the card wrapper ── */
.hotale-rooms-carousel-slide .tourmaster-room-grid2 {
    margin: 0 14px !important;
}

/* ── Equal-height cards: flex chain from slide down to card ──
   The track stretches all slides to the tallest one.
   Each level must be display:flex to pass that height down. ── */
.hotale-rooms-carousel-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.hotale-rooms-carousel-slide .tourmaster-room-grid2,
.hotale-rooms-carousel-slide .tourmaster-room-grid2.tourmaster-grid-frame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.tourmaster-room-grid-inner {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
}

/* ── Thumbnail: fixed height + object-fit so all images look the same ── */
.tourmaster-room-thumbnail {
    position: relative;
    overflow: hidden;
    height: 310px;          /* fixed height — all images cropped to this */
    -ms-flex-negative: 0;
    flex-shrink: 0;         /* don't let the image area shrink when card stretches */
}

.tourmaster-room-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
}

.tourmaster-room-thumbnail:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

/* ── Ribbon badge ── */
.tourmaster-ribbon {
    position: absolute;
    top: 18px;
    right: 0;
    background: var(--color-error);
    color: var(--color-white);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px 5px 10px;
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.5px;
    z-index: 2;
    text-transform: uppercase;
}

/* ── Room content: grows to fill card height, pushes price row to bottom ── */
.tourmaster-room-content-wrap {
    padding: 26px 30px 30px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
	background-color: white !important;
}

.tourmaster-room-title {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--color-text-darkest);
}

.tourmaster-room-title a {
    color: var(--color-text-darkest);
    text-decoration: none;
}

.tourmaster-room-title a:hover {
    color: var(--color-accent);
}

/* ── Bed / guest / min-los info ── */
.tourmaster-info-wrap {
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-bg-mid);
}

.tourmaster-info {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.tourmaster-info span:first-child {
    margin-right: 5px;
    font-size: 15px;
    color: var(--color-accent);
}

.tourmaster-tail {
    font-size: 13px;
}

/* ── Price + Book Now row: pinned to bottom of card ── */
.tourmaster-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 20px;
}

.tourmaster-price-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 4px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tourmaster-price {
    font-family: 'Jost', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-darkest);
}

.tourmaster-price-discount {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: var(--color-text-faint);
    text-decoration: line-through;
}

.tourmaster-price-wrap .tourmaster-tail {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
}

/* ── Book Now button ── */
.tourmaster-read-more.tourmaster-type-button {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 4px;
    text-decoration: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    white-space: nowrap;
}

.tourmaster-read-more.tourmaster-type-button:hover {
    background: var(--color-accent-dark);
    color: var(--color-white);
}

/* ── Prev / Next nav arrows ── */
.hotale-rooms-nav {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: var(--color-bg-light);
    border: none;
    border-radius: 5px;
    color: var(--color-text-lighter);
    font-size: 15px;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
}

.hotale-rooms-prev {
    margin-right: 18px;
}

.hotale-rooms-next {
    margin-left: 18px;
}

.hotale-rooms-nav:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.hotale-rooms-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── "Ver todos" button ── */
.hotale-rooms-view-all-wrap {
    text-align: center;
    margin-top: 44px;
}

.hotale-rooms-view-all-btn {
    display: inline-block;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent);
	background-color: white !important;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    text-transform: uppercase;
    padding: 15px !important;
    border-radius: 5px;
    text-decoration: none;
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.hotale-rooms-view-all-btn i {
    margin-right: 6px;
    font-size: 18px;
}

.hotale-rooms-view-all-btn:hover {
    background: var(--color-accent) !important;
    color: var(--color-white);
}

/* ── Override tourmaster-room.scoped.css defaults inside the carousel ── */
.hotale-rooms-section .tourmaster-room-grid2 {
    margin-bottom: 0 !important;
}
.hotale-rooms-section .tourmaster-room-grid2 .tourmaster-room-thumbnail {
    margin-bottom: 0 !important;
}
/* Restore border/radius and enforce flex-column equal height */
.hotale-rooms-section .tourmaster-room-grid2 .tourmaster-room-grid-inner {
    border: 1px solid var(--color-border-light) !important;
    border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    overflow: hidden !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}
/* Also ensure the ul itself has no list styling */
.hotale-rooms-carousel-track {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* Divider: override any hr/border resets from the base theme */
.hotale-rooms-section-divider {
    display: block !important;
    width: 70px !important;
    height: 5px !important;
    background-color: var(--color-accent) !important;
    border: none !important;
    margin: 0 auto 22px !important;
}

/* ── Responsive (slide widths are set in px by JS) ── */
@media (max-width: 991px) {
    .hotale-rooms-section-inner { padding: 0 10px; }
}
@media (max-width: 600px) {
    .hotale-rooms-section-inner { padding: 0 6px; }
}

/* ============================================================
   Hotale-style: "What Our Clients Are Saying" — testimonials block
   3-column card carousel: circular image, name, text, stars.
   Matches hotel2's gdlr-core-testimonial-style-center-4 look.
   ============================================================ */

.hotale-testimonial-section {
    padding: 100px 0 80px;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* Dot-grid decoration left */
.hotale-testimonial-section::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 200px;
    width: 200px;
    height: 260px;
    background-image: radial-gradient(circle, var(--color-warm-700) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* Beige quarter-circle bottom-right */
.hotale-testimonial-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background-color: var(--color-warm-500);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.hotale-testimonial-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* ── Heading ── */
.hotale-testimonial-heading-wrap {
    text-align: center;
    margin-bottom: 50px;
}

.hotale-testimonial-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 500;
    color: var(--color-text-darkest);
    margin: 0 0 18px;
    line-height: 1.2;
}

.hotale-testimonial-divider {
    display: block;
    width: 114px;
    height: 5px;
    background-color: var(--color-accent);
    border: none;
    margin: 0 auto;
    border-radius: 0;
}

/* ── Card ── */
.hotale-testimonial-card {
    padding: 0 10px;
}

.hotale-testimonial-card-inner {
    background-color: var(--color-bg-light);
    padding: 30px 28px 28px;
    text-align: center;
    position: relative;
}

/* Large decorative opening quote — top-right */
.hotale-testimonial-quote {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 80px;
    line-height: 1;
    color: var(--color-warm-600);
    font-family: Georgia, serif;
    pointer-events: none;
    user-select: none;
}

/* Circular author image */
.hotale-testimonial-author-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
}

.hotale-testimonial-author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hotale-testimonial-author-name {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 14px;
}

.hotale-testimonial-content {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 18px;
}

.hotale-testimonial-content p {
    margin: 0;
}

.hotale-testimonial-content {
    flex: 1;
}

/* ── Owl carousel bullets ── */
.hotale-testimonial-carousel-wrap .owl-controls {
    margin-top: 36px;
    text-align: center;
}

.hotale-testimonial-carousel-wrap .owl-page span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--color-text-lighter);
    margin: 0 5px;
    -webkit-transition: border-color 0.2s, background 0.2s;
    transition: border-color 0.2s, background 0.2s;
}

.hotale-testimonial-carousel-wrap .owl-page.active span,
.hotale-testimonial-carousel-wrap .owl-page:hover span {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Hide default owl nav arrows */
.hotale-testimonial-carousel-wrap .owl-buttons {
    display: none;
}


.hotale-rooms-section-title,
.hotale-testimonial-title{
	letter-spacing: normal;
}




/* ── Responsive ── */
@media (max-width: 991px) {
    .hotale-testimonial-section {
        padding: 60px 0 50px;
    }
}

/* ── Popups de moneda e idioma (FancyBox) — responsive en móvil ──────── */
@media (max-width: 767px) {
	/* Contenedor FancyBox: ancho casi completo, centrado */
	.fancybox-blockcurrencies .fancybox-wrap,
	.fancybox-blocklanguages .fancybox-wrap {
		width: calc(100vw - 40px) !important;
		left: 20px !important;
		right: 20px !important;
	}

	.fancybox-blockcurrencies .fancybox-outer,
	.fancybox-blockcurrencies .fancybox-skin,
	.fancybox-blockcurrencies .fancybox-inner,
	.fancybox-blocklanguages .fancybox-outer,
	.fancybox-blocklanguages .fancybox-skin,
	.fancybox-blocklanguages .fancybox-inner {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.fancybox-blockcurrencies .fancybox-inner,
	.fancybox-blocklanguages .fancybox-inner {
		height: auto !important;
		max-height: 70vh !important;
		overflow-y: auto !important;
	}

	/* Espacio arriba para que la X no solape la primera opción */
	.fancybox-blockcurrencies .fancybox-skin,
	.fancybox-blocklanguages .fancybox-skin {
		padding-top: 40px !important;
	}

	/* Lista de opciones: ancho completo, ítems legibles */
	.fancybox-blockcurrencies .list-group,
	.fancybox-blocklanguages .list-group {
		margin: 0;
		border-radius: 0;
	}

	.fancybox-blockcurrencies .list-group-item,
	.fancybox-blocklanguages .list-group-item {
		width: 100%;
		box-sizing: border-box;
		padding: 14px 20px;
		font-family: 'Jost', sans-serif;
		font-size: 15px;
		color: var(--color-text);
		border-left: none;
		border-right: none;
		border-radius: 0 !important;
	}

	.fancybox-blockcurrencies .list-group-item.active,
	.fancybox-blocklanguages .list-group-item.active {
		background-color: var(--color-accent) !important;
		border-color: var(--color-accent) !important;
		color: var(--color-white) !important;
	}

	.fancybox-blockcurrencies .list-group-item:hover,
	.fancybox-blocklanguages .list-group-item:hover {
		background-color: var(--color-warm-50);
		color: var(--color-accent);
		text-decoration: none;
	}
}


.copyRightWrapper .copyRight{
    font-size: 14px;
}

#order-opc .alert-warning,
#order .alert-warning {
    background-color: #e9e9e9 !important;
    border-color: #e9e9e9 !important;
    color: #555 !important;
}