@charset "utf-8";

/* =================================================================
   Cifuentes Horizon — Smoobu calendar widget styles
   Replaces Smoobu's default singleCalendarWidget.css.
   All colours reference the site's dark-section glass palette;
   typography inherits from the page so no external fonts are loaded.
   ================================================================= */

.multiCalendarWidget {
  max-width: 1000px;
  width: 100%;
  display: inline-table;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding-top: 0;
  border-radius: 0;
}

.multiCalendarWidget .fullCalendar {
  width: 50%;
  float: left;
}

.multiCalendarWidget .fullCalendar.smallDevices {
  width: 100%;
  float: left;
}

.multiCalendarWidget a {
  text-decoration: none;
  color: inherit;
}

/* Month / year heading */
.multiCalendarWidget h2 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 0.75em;
  color: #ffffff;
}

.multiCalendarWidget .logo {
  display: none;
}

.multiCalendarWidget h3 {
  font-size: 1em;
  line-height: 1;
  margin: 0.33em 0;
}

.multiCalendarWidget .singleCalendarWidget,
.multiCalendarWidget .singleCalendarWidget h2 {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.multiCalendarWidget .singleCalendarWidget .header,
.multiCalendarWidget .singleCalendarWidget h2 .header {
  position: relative;
}

.multiCalendarWidget .singleCalendarWidget .header div,
.multiCalendarWidget .singleCalendarWidget h2 .header div {
  position: relative;
}

.bookingform-note,
.multiCalendarWidget .singleCalendarWidget .header > div {
  font-size: var(--type-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.multiCalendarWidget .singleCalendarWidget h2,
.multiCalendarWidget .singleCalendarWidget h2 h2 {
  text-transform: uppercase;
}

.multiCalendarWidget .singleCalendarWidget table,
.multiCalendarWidget .singleCalendarWidget h2 table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Day-name header row */
.multiCalendarWidget .singleCalendarWidget table thead,
.multiCalendarWidget .singleCalendarWidget h2 table thead {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Day number cells */
.multiCalendarWidget .singleCalendarWidget table tbody,
.multiCalendarWidget .singleCalendarWidget h2 table tbody {
  color: rgba(255, 255, 255, 0.85);
}

.multiCalendarWidget .singleCalendarWidget table tr,
.multiCalendarWidget .singleCalendarWidget h2 table tr {
  width: 100%;
}

.multiCalendarWidget .singleCalendarWidget table td,
.multiCalendarWidget .singleCalendarWidget h2 table td {
  padding: 0;
  box-sizing: border-box;
  height: 66px;
  line-height: 66px;
  text-align: center;
}

/* Booked / unavailable day */
.bookingform-note .reserved,
.multiCalendarWidget .singleCalendarWidget table td.normal,
.multiCalendarWidget .singleCalendarWidget h2 table td.normal {
  background-color: rgba(212, 80, 70, 0.38);
  color: rgba(255, 255, 255, 0.5);
}

.bookingform-note .reserved{
    padding: 6px 4px;
}

/* Arrival: free → booked diagonal */
.multiCalendarWidget .singleCalendarWidget table td.arrival,
.multiCalendarWidget .singleCalendarWidget h2 table td.arrival {
  background: linear-gradient(to right bottom, transparent 50%, rgba(212, 80, 70, 0.38) 50%);
}

/* Departure: booked → free diagonal */
.multiCalendarWidget .singleCalendarWidget table td.departure,
.multiCalendarWidget .singleCalendarWidget h2 table td.departure {
  background: linear-gradient(to right bottom, rgba(212, 80, 70, 0.38) 50%, transparent 50%);
}

/* Today — warm sandy outline */
.multiCalendarWidget .singleCalendarWidget table td.current-day,
.multiCalendarWidget .singleCalendarWidget h2 table td.current-day {
  border: 2px solid #E8CFA6;
  color: #E8CFA6;
}

/* Prev / next navigation arrows */
.multiCalendarWidget .btn-prev,
.multiCalendarWidget .btn-next {
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  height: 32px;
  font-size: 16px;
  line-height: 28px;
  margin: -12px;
  position: absolute;
  top: 32%;
  width: 32px;
  transition: color 0.15s ease;
}

.multiCalendarWidget .btn-prev:hover,
.multiCalendarWidget .btn-next:hover {
  color: #ffffff;
}

/* SVG arrows are <img> with hardcoded black fill — use filter to recolour */
.multiCalendarWidget .btn-prev img,
.multiCalendarWidget .btn-next img {
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.multiCalendarWidget .btn-prev:hover img,
.multiCalendarWidget .btn-next:hover img {
  opacity: 1;
}

.multiCalendarWidget .btn-prev.smallDevices,
.multiCalendarWidget .btn-next.smallDevices {
  top: -20px;
}

.multiCalendarWidget .btn-prev {
  left: 26px;
}

.multiCalendarWidget .btn-prev.smallDevices {
  left: 16px;
}

.multiCalendarWidget .btn-next {
  right: 26px;
}

.multiCalendarWidget .btn-next.first {
  display: none;
}

.multiCalendarWidget .btn-next.smallDevices {
  right: 16px;
}

.multiCalendarWidget .btn-next.smallDevices.first {
  display: inherit;
}

.multiCalendarWidget .btn-next.smallDevices.last {
  display: none;
}

.multiCalendarWidget .logo {
  float: right;
  margin: 15px 20px 15px 15px;
  opacity: 0.35;
}

.booking-form-container {
  max-width: 860px;
  margin: 0 auto;
}

/* =================================================================
   Cifuentes Horizon — Booking page styles
   Smoobu CSS variable overrides + section layout.
   ================================================================= */


/* White section that holds the Smoobu booking iframe */
.section-bookingform {
  background: #fff;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 80px);
}

/* Centre and constrain the iframe container */
#apartmentIframe3288487 {
  max-width: 860px;
  margin: 0 auto;
}

/* Ensure the generated iframe fills the container without extra margin */
#apartmentIframe3288487 iframe {
  display: block;
  width:  100% !important;
  border: none;
}