/* ==========================================================
   IL BRUCO B&B – CUSTOM CSS
   Joomla / Helix Ultimate / SP Page Builder
   ========================================================== */


/* ==========================================================
   VARIABILI COLORE
   ========================================================== */

:root {
  --ilbruco-verde: #93A290;
  --ilbruco-rosso: #ef4b64;
  --ilbruco-rosso-hover: #d94359;
  --ilbruco-arancio: #e87c24;
  --ilbruco-bianco: #ffffff;
  --ilbruco-testo: #333333;
}


/* ==========================================================
   FEATURE BOX – TITOLO BIANCO GENERICO
   Classe usata sugli addon Feature.
   Deve gestire solo il colore del titolo.
   ========================================================== */

.titolo-bianco .sppb-feature-box-title,
.titolo-bianco .sppb-feature-box-title a {
  color: var(--ilbruco-bianco) !important;
}


/* ==========================================================
   STAY / SOGGIORNARE – CARD APPARTAMENTI
   Fascia verde sotto immagine.
   Richiede classe sulla sezione/riga: stay-apartment-cards
   ========================================================== */

.stay-apartment-cards .titolo-bianco .sppb-addon-content,
.stay-apartment-cards .titolo-bianco .sppb-addon-feature,
.stay-apartment-cards .titolo-bianco .sppb-feature-box,
.stay-apartment-cards .titolo-bianco .sppb-media {
  position: relative !important;
}

.stay-apartment-cards .titolo-bianco .sppb-img-container,
.stay-apartment-cards .titolo-bianco .sppb-feature-box-img {
  display: block !important;
  margin-bottom: 0 !important;
}

.stay-apartment-cards .titolo-bianco img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0 !important;
}

.stay-apartment-cards .titolo-bianco .sppb-media-body {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.stay-apartment-cards .titolo-bianco .sppb-feature-box-title,
.stay-apartment-cards .titolo-bianco .sppb-feature-box-title a {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  background-color: var(--ilbruco-verde) !important;
  color: var(--ilbruco-bianco) !important;

  margin: 0 !important;
  padding: 12px 15px !important;

  text-align: center !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-decoration: none !important;

  box-sizing: border-box !important;
}

.stay-apartment-cards .titolo-bianco .sppb-feature-box-title a:hover {
  color: var(--ilbruco-bianco) !important;
  text-decoration: none !important;
}


/* ==========================================================
   HOME HERO – IL BRUCO B&B
   Richiede classe sulla sezione: home-hero-ilbruco
   ========================================================== */

.home-hero-ilbruco h1,
.home-hero-ilbruco .sppb-addon-title,
.home-hero-ilbruco .sppb-title-heading,
.home-hero-ilbruco .sp-slider-title {
  color: var(--ilbruco-verde) !important;
  font-weight: 300 !important;
  letter-spacing: 1px;
}

.home-hero-ilbruco .sppb-btn,
.home-hero-ilbruco .sppb-btn-primary,
.home-hero-ilbruco a.sppb-btn,
.home-hero-ilbruco .sp-slider-btn-text,
.home-hero-ilbruco a.sp-slider-btn-text,
.home-hero-ilbruco .sp-slider-content a {
  display: inline-block !important;

  background-color: var(--ilbruco-rosso) !important;
  color: var(--ilbruco-bianco) !important;
  border: 1px solid var(--ilbruco-rosso) !important;

  border-radius: 10px !important;
  padding: 10px 22px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.home-hero-ilbruco .sppb-btn:hover,
.home-hero-ilbruco .sppb-btn-primary:hover,
.home-hero-ilbruco a.sppb-btn:hover,
.home-hero-ilbruco .sp-slider-btn-text:hover,
.home-hero-ilbruco a.sp-slider-btn-text:hover,
.home-hero-ilbruco .sp-slider-content a:hover {
  background-color: var(--ilbruco-rosso-hover) !important;
  border-color: var(--ilbruco-rosso-hover) !important;
  color: var(--ilbruco-bianco) !important;
}


/* ==========================================================
   BUTTON CUSTOM – FIX HELIX / SPPB
   ========================================================== */

.btn-custom,
a.btn-custom,
.sppb-btn.btn-custom {
  display: inline-block !important;

  background-color: var(--ilbruco-rosso) !important;
  color: var(--ilbruco-bianco) !important;
  border: 1px solid var(--ilbruco-rosso) !important;

  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;

  padding: 10px 22px;
  border-radius: 10px !important;

  text-decoration: none !important;
  box-shadow: none;

  transition: all 0.3s ease;
}

.btn-custom:hover,
a.btn-custom:hover,
.sppb-btn.btn-custom:hover {
  background-color: var(--ilbruco-rosso-hover) !important;
  border-color: var(--ilbruco-rosso-hover) !important;
  color: var(--ilbruco-bianco) !important;

  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}


/* ==========================================================
   HELIX – RIMOZIONE ONDE / SHAPES PAGE TITLE
   ========================================================== */

.sp-page-title::before,
.sp-page-title::after,
.sp-page-title svg,
.sp-page-title .sppb-shape-container,
.sp-page-title .sppb-bottom-shape,
.sp-page-title .sppb-top-shape {
  display: none !important;
  content: none !important;
  background: none !important;
}

.sp-page-title {
  overflow: hidden;
}


/* ==========================================================
   ARTICOLI – RIMOZIONE EFFETTI GRAFICI SOTTO IMMAGINI
   ========================================================== */

.item-image::before,
.item-image::after,
.article-intro-image::before,
.article-intro-image::after,
.article-featured-image::before,
.article-featured-image::after,
.view-article .article-details .blog-details-img-wrapper::after,
.view-article .article-details .blog-details-img-wrapper.active::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

.item-image svg,
.article-intro-image svg,
.article-featured-image svg,
.sppb-article-image svg,
.sppb-addon-article-image svg,
.item-image .sppb-bottom-shape,
.item-image .sppb-top-shape,
.article-intro-image .sppb-bottom-shape,
.article-featured-image .sppb-bottom-shape {
  display: none !important;
}

.item-image,
.article-intro-image,
.article-featured-image {
  overflow: hidden;
}


/* ==========================================================
   BED-BOOKING WIDGET – COLONNA 4/12
   ========================================================== */

.bb-widget-room-4col {
  width: 100%;
  max-width: 318px;
  min-height: 520px;

  margin: 0 auto;

  overflow-x: hidden;
  overflow-y: visible;

  box-sizing: border-box;
}

.bb-widget-room-4col *,
.bb-widget-room-4col {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.bb-widget-room-4col iframe {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 520px !important;

  border: 0 !important;
}


/* ==========================================================
   BED-BOOKING / REACT-DATES – FIX CALENDARIO
   ========================================================== */

.DayPicker,
.DayPicker__withBorder,
.DateRangePicker,
.SingleDatePicker,
.DayPicker_transitionContainer {
  max-width: calc(100vw - 24px) !important;
  overflow-x: hidden !important;
}

.CalendarMonth,
.CalendarMonth_table,
.bb-widget-room-4col .CalendarMonth_table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.CalendarDay,
.bb-widget-room-4col .CalendarDay {
  width: 14.2857% !important;
  min-width: 14.2857% !important;
  height: 42px !important;
}

.CalendarDay > div,
.bb-widget-room-4col .CalendarDay > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;
}

.CalendarDay span,
.bb-widget-room-4col .CalendarDay span {
  font-size: 12px !important;
  line-height: 1 !important;
}

.CalendarMonth_caption,
.bb-widget-room-4col .CalendarMonth_caption {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {
  .datepicker,
  .date-picker,
  .calendar,
  [class*="datepicker"],
  [class*="date-picker"],
  [class*="Calendar"] {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 767px) {
  .stay-apartment-cards .titolo-bianco .sppb-feature-box-title,
  .stay-apartment-cards .titolo-bianco .sppb-feature-box-title a {
    font-size: 24px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 480px) {
  .DayPicker,
  .CalendarMonthGrid {
    width: 100% !important;
  }
}