/* ==========================================================================
   CasaMia RD B&B — availability calendar widget
   Self-contained stylesheet: does not depend on custom properties defined
   elsewhere in style.css, so it can be dropped in without touching it.
   Colors are sampled from the palette already used across the site
   (jade greens, terracotta/rust, gold, cream, ink).

   Every selector is scoped under #availabilityWidget and colors carry
   !important: the widget sits inside the "book" section, which styles its
   own text for a dark background ("on-dark" sections elsewhere on the
   site) — these overrides guarantee the widget's light card stays readable
   regardless of those broader page rules.
   ========================================================================== */

#availabilityWidget.avail-widget {
  background: #faf7ef;
  color: #2a2620 !important;
  border-radius: 18px;
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  max-width: 480px;
  margin: 2.5rem auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

#availabilityWidget .eyebrow {
  color: #c2603c !important;
  font-size: 0.78rem;
}

#availabilityWidget .avail-heading {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.3;
  color: #2f7a6c !important;
  margin: 0.3rem 0 0.5rem;
}

#availabilityWidget .avail-sub {
  font-size: 0.92rem;
  color: #5a4f3d !important;
  margin-bottom: 1.4rem;
}

#availabilityWidget .avail-cal-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  gap: 0.4rem;
  width: 100%;
}

#availabilityWidget .avail-month {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a2620 !important;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

#availabilityWidget .avail-nav {
  background: none;
  border: 1px solid #cdbf94;
  color: #2a2620 !important;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.15s;
}

#availabilityWidget .avail-nav:hover:not(:disabled) {
  background: #e7dcc0;
}

#availabilityWidget .avail-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

#availabilityWidget .avail-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: #8c8064 !important;
  margin-bottom: 0.3rem;
}

#availabilityWidget .avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

#availabilityWidget .avail-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: #f1ead9;
  color: #2a2620 !important;
  font-family: "Work Sans", sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#availabilityWidget .avail-day:hover:not(.avail-day-disabled) {
  background: #dcece6;
}

#availabilityWidget .avail-day-empty {
  background: transparent;
  cursor: default;
}

#availabilityWidget .avail-day-off,
#availabilityWidget .avail-day-disabled {
  background: transparent;
  color: #c9bea4 !important;
  cursor: default;
}

#availabilityWidget .avail-day-busy {
  background: #f3ddd2;
  color: #a8502f !important;
  text-decoration: line-through;
}

#availabilityWidget .avail-day-today {
  box-shadow: inset 0 0 0 1.5px #2f7a6c;
}

#availabilityWidget .avail-day-selected {
  background: #2f7a6c;
  color: #fff !important;
}

#availabilityWidget .avail-day-endpoint {
  background: #e0a958;
  color: #2a2620 !important;
  font-weight: 600;
}

#availabilityWidget .avail-day-loading {
  opacity: 0.5;
}

#availabilityWidget .avail-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: #5a4f3d !important;
  align-items: center;
}

#availabilityWidget .legend-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

#availabilityWidget .legend-free {
  background: #f1ead9;
}

#availabilityWidget .legend-busy {
  background: #f3ddd2;
}

#availabilityWidget .legend-selected {
  background: #2f7a6c;
}

#availabilityWidget .avail-selection {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid #e7dcc0;
}

#availabilityWidget .avail-dates {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}

#availabilityWidget .avail-dates span {
  display: block;
  color: #8c8064 !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#availabilityWidget .avail-dates strong {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  color: #2a2620 !important;
}

#availabilityWidget .avail-result {
  font-weight: 600;
  margin-bottom: 0.9rem;
}

#availabilityWidget .avail-result-ok {
  color: #2f7a6c !important;
}

#availabilityWidget .avail-result-pending {
  color: #8c8064 !important;
  font-weight: 400;
}

#availabilityWidget .avail-result-ctas {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

#availabilityWidget .avail-reset {
  background: none;
  border: none;
  color: #a8502f !important;
  text-decoration: underline;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

#availabilityWidget .avail-status {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #8c8064 !important;
  text-align: center;
}

#availabilityWidget .avail-status-error {
  color: #a8502f !important;
}

@media (max-width: 480px) {
  #availabilityWidget.avail-widget {
    padding: 1.5rem 1.1rem;
  }

  #availabilityWidget .avail-month {
    font-size: 0.78rem;
    letter-spacing: 0;
  }

  #availabilityWidget .avail-nav {
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.8rem;
    font-size: 1rem;
  }
}