/* LIVE "Indicative availability" calendar (template-parts/villa-single/
   availability-live.php, drawn by assets/js/villa-availability.js).
   Loaded only for a rendered SuperControl villa, after main.css. Reuses
   main.css's ".avail", ".avail-head", ".cal-nav" (44px buttons),
   ".avail-months" (2 columns, 1 under 680px), ".cal-title", ".cal-dow",
   ".avail-foot", ".avail-legend" and ".sw"; everything here is scoped to
   ".s4u-live-avail" so the demo calendar is never affected. */

/* The weekday header: Monday first - no day is emphasised (the demo one
   marks Saturday, its change-over day). */
.s4u-live-avail .cal-dow span:first-child{
  color:var(--muted);
}

.s4u-cal-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--line);
}

.s4u-cal-day{
  position:relative;
  display:block;
  min-width:0;
  padding:10px 0;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  background:var(--stone);
}

.s4u-cal-day.is-blank{
  background:transparent;
}

/* Shown as open: plain light ground, as the demo's "available". */
.s4u-cal-day.is-open{
  background:var(--stone);
}

/* Shown as unavailable: the demo's soft stripes, muted - no strike-through
   (it is not necessarily a booking). */
.s4u-cal-day.is-unavailable{
  color:var(--muted);
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px);
}

/* Unknown (outside the feed or unreadable): cream ground, faded number. */
.s4u-cal-day.is-unknown{
  color:#A9A59D;
  background:var(--sand);
}

.s4u-cal-day.is-past{
  color:#C6C3BC;
  background:var(--stone);
}

/* Date picking (fresh data only): choosable days are buttons with a thin
   ink underline; open days that cannot be chosen right now are lighter;
   your arrival / departure take the site's citron (as the demo's "your
   dates"), the nights in between a paler citron. */
button.s4u-cal-day{
  width:100%;
  margin:0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:background .2s,box-shadow .2s;
}

.s4u-cal-day.is-candidate{
  font-weight:500;
  box-shadow:inset 0 -2px 0 var(--ink);
}

.s4u-cal-day.is-candidate:hover{
  box-shadow:inset 0 0 0 1px var(--ink);
}

.s4u-cal-day.is-candidate:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:-2px;
}

.s4u-cal-day.is-blocked{
  color:var(--muted);
}

.s4u-cal-day.is-range{
  background:rgba(255,248,83,.38);
}

.s4u-cal-day.is-arrival,
.s4u-cal-day.is-departure,
.s4u-cal-day.is-arrival:hover,
.s4u-cal-day.is-departure:hover{
  background:var(--citron);
  color:var(--ink);
  font-weight:700;
  box-shadow:inset 0 0 0 1px var(--ink);
}

.s4u-live-avail__pick{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.6rem 1.4rem;
  flex-wrap:wrap;
  margin:0 0 18px;
}

.s4u-live-avail__pick[hidden]{
  display:none;
}

.s4u-live-avail__hint{
  margin:0;
  font-size:.9rem;
  color:var(--ink);
  max-width:60ch;
}

.s4u-live-avail__clear{
  background:none;
  border:0;
  padding:0 0 3px;
  min-height:44px;
  cursor:pointer;
  font-family:var(--sans);
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  border-bottom:1px solid transparent;
}

.s4u-live-avail__clear:hover,
.s4u-live-avail__clear:focus-visible{
  color:var(--ink);
  border-color:currentColor;
}

/* Booking sidebar: the picked dates (template-parts/villa-single/booking.php). */
.s4u-live-stay{
  margin:0 0 1.6rem;
  padding:1.1rem 0 0;
  border-top:1px solid var(--line);
}

.s4u-live-stay__dates{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:.9rem 1rem;
  margin:0 0 1.2rem;
}

.s4u-live-stay__dates dt{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin:0 0 .35rem;
}

.s4u-live-stay__dates dd{
  margin:0;
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.3;
  color:var(--ink);
}

.s4u-live-stay__cap{
  margin:.4rem 0 0;
  font-size:.78rem;
  color:var(--muted);
}

/* Adults / Children / Pets - three narrow selects side by side (".enquiry
   .f" / select styles from main.css). */
.s4u-live-party{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 .7rem;
}

.s4u-live-party .f{
  min-width:0;
  margin-bottom:.4rem;
}

.s4u-live-party select{
  min-height:44px;
}

.s4u-live-party select[aria-invalid="true"]{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}

.s4u-live-party__msg{
  margin:.3rem 0 0;
  font-size:.76rem;
  line-height:1.4;
  color:var(--ink);
}

.s4u-live-party__msg:empty{
  display:none;
}

.s4u-live-stay__warn{
  margin:.6rem 0 0;
  font-size:.8rem;
  line-height:1.45;
  color:var(--ink-soft);
}

.s4u-live-stay__warn[hidden]{
  display:none;
}

.s4u-live-check__btn{
  min-height:44px;
  margin-top:1.1rem;
}

.s4u-live-check__btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.s4u-live-check__btn:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* Result of "Check availability": quiet tones, a thin ink rule on the
   left; available gets the site's citron, problems stay neutral. */
.s4u-live-check{
  margin:.9rem 0 .8rem;
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink);
}

.s4u-live-check:empty{
  display:none;
}

.s4u-live-check[class*="is-"]{
  padding:.7rem .9rem;
  border-left:2px solid var(--line);
  background:var(--stone);
}

.s4u-live-check.is-available{
  border-left-color:var(--ink);
  background:rgba(255,248,83,.38);
}

.s4u-live-check.is-unavailable,
.s4u-live-check.is-rule,
.s4u-live-check.is-invalid{
  border-left-color:var(--ink);
}

.s4u-live-check.is-error,
.s4u-live-check.is-enquiry,
.s4u-live-check.is-info{
  border-left-color:var(--muted);
  color:var(--ink-soft);
}

.s4u-live-check.is-loading{
  color:var(--ink-soft);
}

.s4u-live-stay__status{
  margin:0 0 .6rem;
  font-size:.88rem;
  font-weight:500;
  color:var(--ink);
}

.s4u-live-stay__links{
  margin:0;
  font-size:.86rem;
}

/* Legend swatches (".sw" size/border from main.css). */
.s4u-sw-open{
  background:var(--stone);
}

.s4u-sw-unavailable{
  background:repeating-linear-gradient(135deg,var(--stone) 0 3px,var(--line) 3px 4px);
}

.s4u-sw-unknown{
  background:var(--sand);
}

.s4u-sw-past{
  background:var(--stone);
  opacity:.45;
}

.s4u-sw-candidate{
  background:var(--stone);
  box-shadow:inset 0 -2px 0 var(--ink);
}

.avail-legend li[hidden]{
  display:none;
}

/* One month (mobile, or a feed of one month) - main.css already stacks
   ".avail-months" under 680px; this keeps a single month from stretching
   to half width on desktop. */
.s4u-live-avail .avail-months.s4u-one-month{
  grid-template-columns:minmax(0,1fr);
  max-width:560px;
}

.s4u-live-avail .cal-month{
  min-width:0;
}

/* "Contact us" message (no data / old data / no JavaScript). */
.s4u-live-avail__safe{
  margin:0;
  padding:22px 0 4px;
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:60ch;
}

.s4u-live-avail__safe .link-arrow{
  display:inline-block;
  margin-left:.4rem;
  color:var(--ink);
}

/* Stale / incomplete warning. */
.s4u-live-avail__alert{
  margin:0 0 22px;
  padding:.8rem 1rem;
  border-left:2px solid var(--ink);
  background:var(--sand);
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink);
}

/* Stale: the days stay readable but clearly muted. */
.s4u-live-avail.is-stale .avail-months{
  opacity:.55;
  filter:grayscale(1);
}

/* Under the (longer) legend, left-aligned on every width. */
.s4u-live-avail__note{
  margin:0;
  flex-basis:100%;
  max-width:60ch;
  font-size:.82rem;
  color:var(--muted);
  text-align:left;
}

@media (max-width:680px){
  .s4u-cal-day,
  button.s4u-cal-day{
    padding:9px 0;
    font-size:.86rem;
  }
}

@media (max-width:400px){
  .s4u-live-stay__dates{
    grid-template-columns:1fr 1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .s4u-live-avail .cal-nav button,
  button.s4u-cal-day{
    transition:none;
  }
}

/* SuperControl Calendar widget (template-parts/villa-single/
   calendar-widget.php) - only a width container: the full content column,
   never wider than it (contain: inline-size keeps a wide widget from
   stretching the ".villa-layout" grid; anything wider scrolls inside the
   box instead of the page). The widget's own styles are not touched. */
.s4u-sc-widget{
  width:100%;
  max-width:100%;
  min-height:120px;
  overflow-x:auto;
  contain:inline-size;
  -webkit-overflow-scrolling:touch;
}

.s4u-sc-widget__note{
  margin:1.2rem 0 0;
  font-size:.92rem;
  color:var(--muted);
}

/* Booking card of the widget villa (template-parts/villa-single/
   booking-widget.php). The pre-filled widget sits inside the sticky
   ".enquiry" card: it never gets wider than the card (the same contained
   wrapper as above; the iframe element itself is capped at the card's
   width - nothing inside SuperControl's widget is styled). With a result
   the card is taller than most screens, so it stops being sticky -
   otherwise its lower part (price, booking button) could sit below the
   viewport and never scroll into view. */
.s4u-sc-booking__form{
  margin:0;
}

.s4u-sc-booking__error{
  margin:0 0 14px;
  font-size:.86rem;
  color:var(--ink);
}

.s4u-sc-widget--card{
  min-height:0;
  margin:1.6rem 0 0;
}

.s4u-sc-widget--card iframe{
  max-width:100%;
}

.s4u-sc-booking--result{
  position:static;
}

.s4u-sc-booking__contact{
  margin-top:1.4rem;
}