/* /includes/calendar/mtbg-calendar.css
 *
 * MTBG Shared Calendar Styles (LIGHT THEME)
 * - Scoped to .mtbg-calendar-wrapper to avoid theme bleed
 * - Light UI
 * - Collapsible inline flatpickr
 * - Stripe range selection (normal / last-minute / early-bird)
 * - Legend styling (3 columns)
 *
 * Expected JS classes:
 * - .mtbg-day--lastminute
 * - .mtbg-day--earlybird
 *
 * Expected markup:
 * <div class="mtbg-calendar-wrapper is-open?">
 *   <label class="mtbg-calendar-label">...</label>
 *   <input class="mtbg-calendar-input flatpickr-input" ...>
 *   (flatpickr inline calendar is injected here)
 * </div>
 */

.mtbg_rentals_totals_ui {width:100%}
.mtbg-reservations-heading{
  font-family: londrina solid;
  font-size: 2em;
  width:100%;
  text-align: center;
  margin-top: -20px;
}

/* ======================================================
   Stripe system (define ONCE)
   ====================================================== */
:root{
  --mtbg-stripe-angle: 135deg;
  --mtbg-stripe-a: 6px;    /* stripe thickness */
  --mtbg-stripe-b: 12px;   /* stripe repeat size */
}

/* ======================================================
   Wrapper + input (shared)
   ====================================================== */
.mtbg-calendar-wrapper{
  width: 100% !important;
  position: relative !important;

  /* Default stripe vars */
  --mtbg-stripe-base: #2b8aff;           /* normal */
  --mtbg-stripe-ink: #ffffff;
  --mtbg-stripe-alpha: 0.22;
}

/* Visually hide label but keep accessible */
.mtbg-calendar-wrapper .mtbg-calendar-label{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Input matches LIGHT select styling */
.mtbg-calendar-wrapper .mtbg-calendar-input,
.mtbg-calendar-wrapper .flatpickr-input{
  background: #ffffff !important;
  color: #111827 !important;               /* slate-ish */
  border: 2px solid #d1d5db !important;    /* gray-300 */
  padding: 10px 42px 10px 12px !important; /* room for icon */
  height: 42px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  text-align:center;
}

.mtbg-calendar-wrapper .mtbg-calendar-input::placeholder,
.mtbg-calendar-wrapper .flatpickr-input::placeholder{
  color: #6b7280 !important; /* gray-500 */
  opacity: 1 !important;
}

.mtbg-calendar-wrapper .mtbg-calendar-input:hover,
.mtbg-calendar-wrapper .flatpickr-input:hover{
  border-color: #9ca3af !important; /* gray-400 */
}

.mtbg-calendar-wrapper .mtbg-calendar-input:focus,
.mtbg-calendar-wrapper .flatpickr-input:focus{
  border-color: #01cb68 !important; /* blue-400 */
}

/* ======================================================
   Collapsible inline calendar (shared)
   ====================================================== */
.mtbg-calendar-wrapper .flatpickr-calendar.inline{
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  display: block !important;
  margin-top: 10px;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 240ms ease, opacity 160ms ease;
}

.mtbg-calendar-wrapper.is-open .flatpickr-calendar.inline{
  max-height: 560px;
  opacity: 1;
  pointer-events: auto;
}

/* Stretch inner calendar parts */
.mtbg-calendar-wrapper .flatpickr-innerContainer,
.mtbg-calendar-wrapper .flatpickr-rContainer,
.mtbg-calendar-wrapper .flatpickr-days,
.mtbg-calendar-wrapper .dayContainer{
  width: 100% !important;
  max-width: 100% !important;
}

.mtbg-calendar-wrapper .dayContainer{
  min-width: 100% !important;
}

/* Use grid for seamless days */
.mtbg-calendar-wrapper .dayContainer{
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  justify-content: stretch !important;
  align-content: start !important;
  gap: 0 !important;
}

/* Let the grid control sizing; remove seams */
.mtbg-calendar-wrapper .flatpickr-day{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  border: 0 !important;
  position: relative;
}

/* Range bar rounding */
.mtbg-calendar-wrapper .flatpickr-day.inRange{
  border-radius: 0 !important;
}
.mtbg-calendar-wrapper .flatpickr-day.startRange{
  border-radius: 999px 0 0 999px !important;
}
.mtbg-calendar-wrapper .flatpickr-day.endRange{
  border-radius: 0 999px 999px 0 !important;
}
.mtbg-calendar-wrapper .flatpickr-day.startRange.endRange{
  border-radius: 999px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  text-transform: uppercase;
  font-weight: 800;
  color: #111827; /* dark text */
}

/* ======================================================
   Base Flatpickr (LIGHT mode)
   ====================================================== */
.mtbg-calendar-wrapper .flatpickr-calendar{
  border-radius: 6px;
  background: #ffffff;
  border: 2px solid #d1d5db;
}

.mtbg-calendar-wrapper .flatpickr-months .flatpickr-month{
  height: 50px;
  font-weight: 800;
  color: #111827;
}

.mtbg-calendar-wrapper .flatpickr-current-month{
  padding: 0px;
}

.mtbg-calendar-wrapper .flatpickr-months .flatpickr-next-month svg,
.mtbg-calendar-wrapper .flatpickr-months .flatpickr-prev-month svg{
  fill: #374151; /* gray-700 */
}

.mtbg-calendar-wrapper .flatpickr-months .flatpickr-next-month:hover svg,
.mtbg-calendar-wrapper .flatpickr-months .flatpickr-prev-month:hover svg{
  fill: #111827;
}

.mtbg-calendar-wrapper span.flatpickr-weekday{
  color: #374151; /* gray-700 */
  font-weight: 800;
}

.mtbg-calendar-wrapper .flatpickr-day{
  color: #111827;
}

/* Disabled days */
.mtbg-calendar-wrapper .flatpickr-day.flatpickr-disabled,
.mtbg-calendar-wrapper .flatpickr-day.flatpickr-disabled:hover{
  color: #cbd5e1 !important; /* slate-300 */
  background: transparent !important;
}

/* Neutral hover/focus background for non-selected days */
.mtbg-calendar-wrapper .flatpickr-day:hover,
.mtbg-calendar-wrapper .flatpickr-day:focus{
  background: #f3f4f6; /* gray-100 */
  border-color: transparent;
  font-weight: 800;
}

/* ======================================================
   Day highlights (labels only)
   ====================================================== */
/* Last-minute dates (within window) */
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute{
  color: #fc7c81;
  font-weight: 800;
}

/* Early-bird dates (>= threshold) */
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird{
  color: #ffa662; /* amber-700-ish */
  font-weight: 800;
}

/* ======================================================
   Striped selections (selected / range)
   ====================================================== */
.mtbg-calendar-wrapper .flatpickr-day.selected,
.mtbg-calendar-wrapper .flatpickr-day.inRange,
.mtbg-calendar-wrapper .flatpickr-day.startRange,
.mtbg-calendar-wrapper .flatpickr-day.endRange,
.mtbg-calendar-wrapper .flatpickr-day.selected.inRange,
.mtbg-calendar-wrapper .flatpickr-day.startRange.inRange,
.mtbg-calendar-wrapper .flatpickr-day.endRange.inRange{
  border-color: transparent !important;
  box-shadow: none !important;

  background-color: var(--mtbg-stripe-base) !important;
  background-image: repeating-linear-gradient(
    var(--mtbg-stripe-angle),
    rgba(255,255,255,var(--mtbg-stripe-alpha)) 0px,
    rgba(255,255,255,var(--mtbg-stripe-alpha)) var(--mtbg-stripe-a),
    rgba(255,255,255,0) var(--mtbg-stripe-a),
    rgba(255,255,255,0) var(--mtbg-stripe-b)
  ) !important;

  color: var(--mtbg-stripe-ink) !important;
  font-weight: 800;
}

/* Ensure flatpickr doesn't re-add borders for edge states */
.mtbg-calendar-wrapper .flatpickr-day.selected,
.mtbg-calendar-wrapper .flatpickr-day.startRange,
.mtbg-calendar-wrapper .flatpickr-day.endRange,
.mtbg-calendar-wrapper .flatpickr-day.selected.inRange,
.mtbg-calendar-wrapper .flatpickr-day.startRange.inRange,
.mtbg-calendar-wrapper .flatpickr-day.endRange.inRange,
.mtbg-calendar-wrapper .flatpickr-day.selected:focus,
.mtbg-calendar-wrapper .flatpickr-day.startRange:focus,
.mtbg-calendar-wrapper .flatpickr-day.endRange:focus,
.mtbg-calendar-wrapper .flatpickr-day.selected:hover,
.mtbg-calendar-wrapper .flatpickr-day.startRange:hover,
.mtbg-calendar-wrapper .flatpickr-day.endRange:hover,
.mtbg-calendar-wrapper .flatpickr-day.selected.prevMonthDay,
.mtbg-calendar-wrapper .flatpickr-day.startRange.prevMonthDay,
.mtbg-calendar-wrapper .flatpickr-day.endRange.prevMonthDay,
.mtbg-calendar-wrapper .flatpickr-day.selected.nextMonthDay,
.mtbg-calendar-wrapper .flatpickr-day.startRange.nextMonthDay,
.mtbg-calendar-wrapper .flatpickr-day.endRange.nextMonthDay{
  border-color: transparent !important;
}

/* Last-minute selected/range (red stripes) */
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute.selected,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute.inRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute.startRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute.endRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--lastminute.selected.inRange{
  --mtbg-stripe-base: #b91c1c;
  --mtbg-stripe-ink: #ffffff;
  --mtbg-stripe-alpha: 0.28;
}

/* Early-bird selected/range (amber stripes) */
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird.selected,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird.inRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird.startRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird.endRange,
.mtbg-calendar-wrapper .flatpickr-day.mtbg-day--earlybird.selected.inRange{
  --mtbg-stripe-base: #f59e0b;
  --mtbg-stripe-ink: #ffffff;  /* readable on amber in light UI */
  --mtbg-stripe-alpha: 0.22;
}

/* Disabled days must remain unstyled (no stripes) */
.mtbg-calendar-wrapper .flatpickr-day.flatpickr-disabled,
.mtbg-calendar-wrapper .flatpickr-day.flatpickr-disabled.mtbg-day--lastminute,
.mtbg-calendar-wrapper .flatpickr-day.flatpickr-disabled.mtbg-day--earlybird{
  background: transparent !important;
  background-image: none !important;
  color: #cbd5e1 !important;
}

/* ======================================================
   MTBG Calendar Legend (real legend: swatch + label)
   Always 3 columns (even on mobile); labels wrap cleanly
   ====================================================== */
.mtbg-calendar-wrapper{margin-bottom:10px;}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend-wrap{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,0.10);
}

.mtbg-calendar-legend__notice{margin-bottom:10px;}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__notice,
.mtbg-calendar-legend__text{
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
  color: #6b7280; /* gray-500 */
}

/* Always 3 columns */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

/* Each item: swatch + wrapping label */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__item{
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
}

/* Swatch */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__swatch{
  width: 16px;
  height: 12px;
  border-radius: 3px;

  background-color: var(--mtbg-stripe-base);
  background-image: repeating-linear-gradient(
    var(--mtbg-stripe-angle),
    rgba(255,255,255,var(--mtbg-stripe-alpha)) 0px,
    rgba(255,255,255,var(--mtbg-stripe-alpha)) var(--mtbg-stripe-a),
    rgba(255,255,255,0) var(--mtbg-stripe-a),
    rgba(255,255,255,0) var(--mtbg-stripe-b)
  );
}

/* Label wraps, never forces the column wider */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__label{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  color: #111827;

  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 520px){
  .mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend{
    gap: 8px;
    padding: 0 10px 10px;
  }
  .mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__label{
    font-size: 14px;
    color: #111827;
  }
}

/* Legend item sets only colors */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__item--lastminute{
  --mtbg-stripe-base: #b91c1c;
  --mtbg-stripe-alpha: 0.28;
}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__item--normal{
  --mtbg-stripe-base: #2b8aff;
  --mtbg-stripe-alpha: 0.22;
}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__item--earlybird{
  --mtbg-stripe-base: #f59e0b;
  --mtbg-stripe-alpha: 0.22;
}


/* ======================================================
   Seamless "single module" look (input + inline calendar)
   ====================================================== */

/* Remove the gap */
.mtbg-calendar-wrapper .flatpickr-calendar.inline{
  margin-top: 0 !important;
}

/* When open: input becomes the "top half" of the module */
.mtbg-calendar-wrapper.is-open .mtbg-calendar-input,
.mtbg-calendar-wrapper.is-open .flatpickr-input{
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 0 !important;
}

/* Calendar becomes the "bottom half" */
.mtbg-calendar-wrapper.is-open .flatpickr-calendar{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 0 !important;
}

/* Ensure both halves share the same background */
.mtbg-calendar-wrapper .mtbg-calendar-input,
.mtbg-calendar-wrapper .flatpickr-input,
.mtbg-calendar-wrapper .flatpickr-calendar{
  background: #ffffff !important;
}

/* ======================================================
   Icon positioning
   ====================================================== */
.mtbg-calendar-wrapper .mtbg-calendar-field{
  position: relative;
  width: 100%;
}

.mtbg-calendar-wrapper .mtbg-calendar-field .mtbg-calendar-icon{
  position: absolute !important;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280; /* gray-500 */
}

/* ======================================================
   Legend mobile hard-override
   ====================================================== */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__item{
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  grid-column: auto !important;
  justify-self: start !important;
  min-width: 0 !important;
}

.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__swatch{
  flex: 0 0 auto !important;
}

/* Your markup uses __text (not __label) */
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__text,
.mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__label{
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-align:left;
  line-height: 1.1 !important;
}

@media (max-width: 520px){
  .mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend{
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__text,
  .mtbg-calendar-wrapper .flatpickr-calendar .mtbg-calendar-legend__label{
    font-size: 14px !important;
  }
}
.mtbg-calendar-wrapper .mtbg-calendar-input-row{
  position: relative;
}