/* Default theme (fallback) */
:root,
:root[data-cx-theme="default"]{
  /* Brand */
  --cx-brand-primary: #394f4d; /* teal */
  --cx-brand-accent:  #8e5042; /* terracotta */
  --cx-brand-cream:   #e5ede9;

  /* Neutrals */
  --cx-white: #ffffff;
  --cx-black: #111111;

  --cx-text-strong: #484848;
  --cx-text:        #666666;
  --cx-text-soft:   #949494;
  --cx-text-icon:   #8a8a8a;

  --cx-border-soft: #e6e6e6;
  --cx-border-ui:   #dddddd;
  --cx-border-ui-hover: #bbbbbb;

  /* Surfaces */
  --cx-surface:   #ffffff;
  --cx-surface-2: #f9f9f9;
  --cx-footer-top: #182322;

  /* Status / misc */
  --cx-disabled: #999999;
  --cx-ui-disabled-border: #f4f5f8;
  --cx-ui-disabled-bg: #ffebeb;

  /* WhatsApp */
  --cx-whatsapp: #25D366;
  --cx-whatsapp-hover: #1ebe5d;

  /* Derived tokens (built from the theme colors) */
  --cx-primary: var(--cx-brand-primary);
  --cx-accent:  var(--cx-brand-accent);

  --cx-link: var(--cx-primary);

  --cx-focus-ring: color-mix(in srgb, var(--cx-brand-primary) 30%, var(--cx-white));
  --cx-form-check: color-mix(in srgb, var(--cx-brand-primary) 65%, var(--cx-white));

  --cx-alert-bg: #f8f5f0; /* kept as-is for consistency */
  --cx-shadow-soft: 0 8px 18px rgba(0,0,0,.15);

  /* Gradient helper for footer phone */
  --cx-phone-grad-a: #cccccc;
  --cx-phone-grad-b: #ffffff;

  /* Video play button */
  --cx-video-icon-border: rgba(255, 255, 255, 0.2);
  --cx-video-inner-border: #eeeeee;
}

/* Custom theme (edit these to create a new look) */
:root[data-cx-theme="custom"]{
  /* Brand */
  --cx-brand-primary: #3b3b3b;
  --cx-brand-accent:  #c9b579;
  --cx-brand-cream:   #fffdf4;

  /* Neutrals */
  --cx-text-strong: #1f2a2e;
  --cx-text:        #4b5a62;
  --cx-text-soft:   #7a8891;

  /* Surfaces */
  --cx-surface:   #ffffff;
  --cx-surface-2: #f3f7f9;
  --cx-footer-top: #000;

  /* Status / misc */
  --cx-alert-bg: #f3efe9;

  /* Optional: slightly different phone gradient */
  --cx-phone-grad-a: #c9d3d8;
  --cx-phone-grad-b: #ffffff;
}

/* =========================================================
   2) BASE / LAYOUT
   ========================================================= */

.logo-img,.nav-scroll .logo-img{width:250px;padding:0}
.navbar{height:90px}

.progress-wrap {position: fixed;bottom: 22px;right: 20px;z-index:9999}
.progress-wrap::after{color:var(--cx-accent)}
.progress-wrap svg.progress-circle path{stroke:var(--cx-accent)}

.navbar .navbar-toggler-icon, .navbar .icon-bar{color:var(--cx-text-icon)}
.navbar .navbar-nav .nav-link{color:var(--cx-text-soft);font-size:1.2rem;letter-spacing:2px}
.navbar .dropdown-menu{min-width:190px; width:275px}

.navbar .navbar-nav .active, .navbar .dropdown-menu .dropdown-item.active{color: var(--cx-brand-accent) !important; }
.navbar .navbar-nav .nav-link:hover,
.navbar .dropdown-menu .dropdown:hover > .dropdown-item,
.navbar .dropdown-menu .dropdown-item:hover,
.reservations .text a,
.reservations .icon span {color: var(--cx-primary) !important;}

.navbar .dropdown-menu .dropdown-item{color: var(--cx-text-soft);font-size: 1rem;letter-spacing: -0.5px;}

.footer-about-social-list a{ color:var(--cx-white);font-size:2rem}
.footer-about-social-list a:hover{color:var(--cx-accent)}

.slider-fade .owl-dots .owl-dot.active {border-color: #fff;background: rgba(255,255,255,.7);}

.header .caption h1{font-size:40px;letter-spacing:5px}
.header-navbar-custom{background:rgba(255,255,255,.97)}
.checkbox-large {transform: scale(1.5);margin-right: 6px;vertical-align: middle;cursor: pointer;}
select optgroup {font-style: normal;font-weight: 600;color: #444;}
p{font-size:18px;font-family:'Outfit', sans-serif}
.ui-datepicker .ui-datepicker-header, .ui-state-hover, .ui-state-highlight{background: var(--cx-primary) !important;border: var(--cx-primary) !important;color: #fff !important;}

.footer-top{background-color:var(--cx-footer-top)}
.footer-bottom{background-color:var(--cx-primary);padding-bottom:120px}

.footer-about-text, .footer-contact-text, .footer-contact-phone:hover{color:var(--cx-white)}

.text-primary{color:var(--cx-primary) !important}
.section-title {color:var(--cx-primary)}
.section-subtitle{color:var(--cx-text-strong)}
h3,.facilties .single-facility span{color:var(--cx-accent)}
.services .content .cont h4{color:var(--cx-primary)}

.footer-language {width:200px}
.footer-language select{
  width: 100%;
  height: 50px;
  background: var(--cx-primary);
  color: var(--cx-white);
  border: 1px solid var(--cx-primary);
  padding:0 15px !important
}
.footer-language i{color:var(--cx-white);right: 14px;top: 19px;}

.lingueFlag{padding: 5px;}
.lingueFlag img, .lingueFlagDrop img{width:20px;height:auto}

.section-subtitle{ line-height:2rem}

.footer-contact-mail:hover,.footer-bottom-copy-right a:hover{
  color: color-mix(in srgb, var(--cx-brand-cream) 70%, #ffede9);
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #869791 !important;border:1px solid #869791;
}

.header.slider-fade .owl-item{height:92vh}
.header {min-height: 92vh; }
.header.small-slider {min-height: 70vh !important; }
.header.small-slider .owl-item {height:70vh !important; }

figure{margin:0 }

.bg-cream{background:var(--cx-brand-cream)}

.pages.section-padding {padding: 80px 0 20px;}

/* =========================================================
   3) FORMS / UI
   ========================================================= */

#btn_invia_email:disabled,#btn_invia_email[disabled]{background-color:var(--cx-disabled) !important}

.form-check-input[type=checkbox] {border-radius: 0;padding: 10px;}

.ui-state-disabled{text-decoration: line-through}
.ui-state-disabled .ui-state-default ,
.ui-state-disabled .ui-widget-content .ui-state-default {
  border: 1px solid var(--cx-ui-disabled-border);
  background: var(--cx-ui-disabled-bg);
  color: var(--cx-disabled);
}

.ui-datepicker td,.ui-datepicker td span, .ui-datepicker td a { text-align: center;}

.map_contact iframe{height:550px}
.accetta_cookies_iframe{z-index:-1;left: 50%;transform: translateX(-50%);color:var(--cx-primary) }

ul li, ol li{
  font-weight: 400;
  line-height: 1.75em;
  color: var(--cx-text);
  font-size:16px;
  font-family:'Outfit', sans-serif
}

/* Bootstrap alert tokens (kept as CSS vars) */
.alert-primary {
  --bs-alert-color: var(--cx-primary) !important;
  --bs-alert-bg: var(--cx-alert-bg) !important;
  --bs-alert-border-color: var(--cx-border-soft) !important;
}

/* Footer phone "animated gradient" text */
.footer-contact-phone a {
  background-image: linear-gradient(to right,
    var(--cx-phone-grad-a),
    var(--cx-phone-grad-a) 50%,
    var(--cx-phone-grad-b) 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}
.footer-contact-phone a:hover {background-position: 0;color:var(--cx-white)}
.footer-contact-phone a:hover::before {width:100%;}

/* WhatsApp variant */
.footer-contact-phone.whatsapp a {
  background-image: linear-gradient(to right,
    var(--cx-whatsapp),
    var(--cx-whatsapp) 50%,
    var(--cx-phone-grad-b) 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}
.footer-contact-phone.whatsapp a:hover {background-position: 0;color:var(--cx-white)}
.footer-contact-phone.whatsapp a:hover::before {width:100%;}

.page-list-text p{font-size:18px}

/* Form focus + checked */
.form-check-input:checked {background-color: var(--cx-form-check);border-color: var(--cx-form-check);}
.form-check-input:focus {
  border-color: var(--cx-form-check);
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--cx-focus-ring);
}
.form-control:focus, .select2:focus{
  border-color: var(--cx-form-check);
  box-shadow: 0 0 0 .25rem var(--cx-focus-ring) !important;
}

/* =========================================================
   4) COMPONENTS
   ========================================================= */

.owl-theme .owl-nav{
  z-index:999999 !important;
  font-size:35px !important;
  background: transparent;
  border: 0px;
  color: var(--cx-primary);
}
.owl-theme .owl-nav [class*=owl-]:hover{
  font-size:35px !important;
  background: transparent;
  border: 0px;
  color: var(--cx-accent);
}

.news .item .con {background-color: var(--cx-surface-2) !important;}

.team .info .social {background-color: var(--cx-primary) !important;}
.team .info .social p{color:var(--cx-white) !important}

/* Edifici filter */
.edifici-filter-wrap{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.btn-edificio{
  border: 1px solid var(--cx-border-ui);
  background: var(--cx-surface);
  padding: 10px 16px;
  border-radius: 999px;
  font-size:1rem;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-edificio:hover{transform: translateY(-1px);border-color:var(--cx-border-ui-hover);}
.btn-edificio.active{
  background: var(--cx-black);
  color: var(--cx-white);
  border-color: var(--cx-black);
  box-shadow: var(--cx-shadow-soft);
}

.fade-sistemazioni{transition: opacity .45s ease, transform .45s ease;}
.fade-sistemazioni.is-fading{opacity: 0;transform: translateY(8px);}

/* WhatsApp button */
a.btn-whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  background-color: var(--cx-whatsapp) !important;
  color: var(--cx-white) !important;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
a.btn-whatsapp:hover,
a.btn-whatsapp:focus,
a.btn-whatsapp:active {
  background-color: var(--cx-whatsapp-hover) !important;
  color: var(--cx-white) !important;
  text-decoration: none !important;
}
a.btn-whatsapp i,
a.btn-whatsapp svg {font-size: 18px;color: var(--cx-white) !important;}

/* ======= Rooms style  ======= */
.rooms {position: relative;}
.rooms:last-child { margin-bottom: 20px;}
.rooms figure {margin: 0;position: relative; width: 80%;margin-left: auto;}
.rooms.left figure {margin-left: 0;margin-right: auto;}
.rooms figure img:hover { transform: scale(0.98);}
.rooms .caption {
  background: var(--cx-surface);
  position: absolute;
  left: 0;
  top: 50%;
  width: 50%;
  padding: 4%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.rooms.left .caption {left: auto;right: 0;background: var(--cx-surface);padding: 4%;}
.rooms .caption.padding-left {padding-left: 4%;}
.rooms.left .caption.padding-left {padding-right: 4%;}

.rooms .caption h4,
.rooms .caption h4 a {font-size: 35px;color: var(--cx-accent);margin-bottom: 5px;}
.rooms .caption h3,
.rooms .caption h3 a { font-size: 24px;color: var(--cx-primary);margin-bottom: 0px; }
.rooms .caption h3 span {font-size: 15px;color: #676977;font-family: 'Barlow', sans-serif;}
.rooms .caption h6 {display: inline-block;color: #676977;font-family: 'Barlow', sans-serif;font-weight: 400;font-size: 10px;margin-bottom: 10px;letter-spacing: 5px;text-transform: uppercase;-webkit-align-self: flex-start;-ms-flex-item-align: start;align-self: flex-start;}
.rooms .caption .info-wrapper {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;
flex-wrap: wrap;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.rooms .caption .info-wrapper .more { color: #676977;text-decoration: none;font-size: 14px;}
.rooms .caption .info-wrapper .more i {color: #676977;font-size: 10px;}
.rooms .caption .info-wrapper .date {
  color: var(--cx-accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  background: transparent;
  border: 1px solid var(--cx-primary);
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 3px 12px;
}
.rooms .caption .info-wrapper .date:hover {background: transparent;border: 1px solid var(--cx-primary);color: var(--cx-primary);}

@media (max-width: 991.98px) {
  .rooms figure {width: auto; margin: 0;}
  .rooms .caption {position: relative;left: 0;top: 0;width: auto;padding: 30px 20px;-ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);transform: translate(0, 0);}
}

/* Buttons */
.butn-dark, .butn-dark-booking,.butn-dark2 {position: relative;line-height: 1.2em;}
.butn-dark a,.butn-dark2  {
  font-weight: 400;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  background: var(--cx-primary);
  color: var(--cx-white);
  padding: 15px 30px;
  margin: 0;
  position: relative;
  font-size: 15px;
  letter-spacing: 3px;
}
.butn-dark-booking a {
  font-weight: 400;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  background: var(--cx-primary);
  color: var(--cx-white);
  padding: 26px 12px;
  margin: 0;
  position: relative;
  font-size: 15px;
  letter-spacing: 3px;
}
.butn-dark a:after , .butn-dark2:after{
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 100%;
  z-index: 1;
  background: var(--cx-accent);
  color: #000;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.butn-dark-booking a:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 100%;
  z-index: 1;
  background: #b4b4b4;
  color: #000;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.butn-dark a span,.butn-dark-booking a span {position: relative;z-index: 2;}
.butn-dark a:hover:after, .butn-dark-booking a:hover:after  {width: 100%;left: 0;-webkit-transition: width 0.3s ease;transition: width 0.3s ease;}
.butn-dark a:hover span, .butn-dark-booking a:hover span  {color: var(--cx-white);}

.guest-buttons {display: flex;gap: 10px;flex-wrap: wrap;}
.guest-btn {background-color: #f2f2f2;padding: 6px 14px;border-radius: 30px;font-size: 1.2rem;color: #333;display: inline-flex;align-items: center;gap: 6px;white-space: nowrap;margin-bottom:10px}
.guest-btn i {font-size: 1.2rem;}

/* video section */
.video-wrapper {min-height: 500px;}
.video-wrapper  {position: relative;z-index: 8;}
.video-wrapper  .vid-butn:hover .icon {color: var(--cx-white);}
.video-wrapper .vid-butn:hover .icon:before {-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}
.video-wrapper .vid-butn .icon {
  color: var(--cx-accent);
  width: 100px;
  height: 100px;
  border: 1px solid var(--cx-video-icon-border);
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  position: relative;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.video-wrapper .vid-butn .icon:after {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 5px;
  left: 5px;
  border: 1px solid var(--cx-video-inner-border);
  border-radius: 50%;
  z-index: -1;
}
.video-wrapper .vid-butn .icon:before {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 5px;
  left: 5px;
  background: var(--cx-white);
  border-radius: 50%;
  z-index: -1;
  -webkit-transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}


 .table>thead{   background: var(--cx-primary);
background: -moz-linear-gradient(top, var(--cx-primary) 20%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--cx-primary)), color-stop(100%, #000));
background: -webkit-linear-gradient(top, var(--cx-primary) 20%, #000 100%);
background: -o-linear-gradient(top, var(--cx-primary) 20%, #000 100%);
background: -ms-linear-gradient(top, var(--cx-primary) 20%, #000 100%);
background: linear-gradient(to bottom, var(--cx-primary) 20%, #000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#var(--cx-primary)',endColorstr='##000',GradientType=0);
padding:0 0 5px ; color:white;font-weight:200 !important }

.table-hover>tbody>tr:hover>* { --bs-table-accent-bg: var(--cx-accent);  color: #fff;}

/* --- 16:9 per entrambe le tipologie --- */
.item-img,
.gallery-img {aspect-ratio: 16 / 9;width: 100%;overflow: hidden;border-radius: inherit;position: relative;
}
.item-img picture {display: block;width: 100%;height: 100%;}

.item-img img,
.gallery-img img {width: 100%;height: 100%;object-fit: cover;display: block;}
.item-img img,
.gallery-img img {object-position: center;}

/* Fallback per browser vecchi che non supportano aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .item-img,
  .gallery-img {
    height: 0;
    padding-top: 56.25%; /* 9/16 */
  }
  .item-img picture,
  .item-img img,
  .gallery-img img {
    position: absolute;
    inset: 0;
  }
}


/* =========================================================
   5) RESPONSIVE
   ========================================================= */

@media screen and (max-width: 991px) {
  .logo-img{width:170px}
  .nav-scroll .logo-img{width:130px !important;padding:0}
  .navbar{height:70px}
  .logo-wrapper {float: left;padding: 0 0 0px 7px;}
  .rooms1 .item .con{bottom:-85px  !important}
}

@media screen and (max-width: 767px) {
  .header .caption h1{font-size:30px;letter-spacing:0}
  .about #circle{display:none}
  .footer-language{margin:0 auto;}
}

@media screen and (max-width: 426px) {
   .guest-buttons {justify-content: center;}
/*   .small-slider .caption{display:none}*/
  p{font-size:18px;line-height: 1.55em;}
  .section-padding{padding:30px 0}
  .section-subtitle{ text-align:center  !important }
  .section-title {font-size:38px;text-align:center !important}
  .footer-bottom{padding-bottom:130px}
  .progress-wrap{bottom:80px;z-index:9999}
  .header.slider-fade .owl-item{height:60vh} /* slider main full or small */
  .header {min-height: 60vh; } 
  .pages.section-padding {padding: 40px 0;}
  .header.small-slider {min-height: 33vh !important; }
  .header.small-slider .owl-item {height: 32vh !important; }
  .rooms .caption h4, .rooms .caption h4 a{font-size:27px }

}

@media screen and (max-width: 400px) {
  .header.small-slider {min-height: 32vh !important; }
  .header.small-slider .owl-item {height: 32vh !important; }
}