/* Lodgify Calendar Styles (no prices; clear classes) */
.lodgify-calendar { --gap: 6px; --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.08); }
.lodgify-calendar__inner { border: 1px solid #eee; border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
.lodgify-calendar__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-nav { border: 1px solid #ddd; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }
.cal-current-month { font-weight:600; }

.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
.cal-grid-weekdays { display: contents; }
.cal-wd { font-size:.85rem; font-weight:600; text-align:center; padding:4px 0; }

.cal-date { height: 64px; border:1px solid #eee; border-radius: 8px; display:flex; align-items:flex-start; justify-content:flex-end; padding:6px; position:relative; }
.cal-date__num { font-size:.9rem; }

/* Status classes */
.cal-date--invalid { background:#f7f7f7; color:#aaa; }
.cal-date--booked { background:#ffe6e6; border-color:#ffcccc; }
.cal-date--available { background:#eaf7ea; border-color:#cfe8cf; }

.cal-legend { display:flex; gap:12px; margin-top:10px; font-size:.85rem; }
.legend { display:inline-flex; align-items:center; gap:6px; }
.legend::before { content:''; display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #ddd; }
.legend--available::before { background:#eaf7ea; border-color:#cfe8cf; }
.legend--booked::before { background:#ffe6e6; border-color:#ffcccc; }
.legend--invalid::before { background:#f7f7f7; border-color:#eee; }

/* Basic responsiveness */
@media (max-width: 600px){
  .cal-date { height: 48px; }
}


/* Debug block styling */
.lodgify-calendar__error { padding:10px; border:1px solid #f3c2c2; background:#fff5f5; border-radius:8px; margin:6px 0; }
.lodgify-calendar__debug { margin-top:6px; }
.lodgify-calendar__debug summary { cursor:pointer; font-weight:600; }
.lodgify-calendar__debug pre { white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; background:#fafafa; padding:8px; border:1px dashed #ddd; border-radius:6px; }



/* === 12-maanden raster === */
.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolommen */
  gap: 12px;
}

/* Maandbox compact */
.cal-month-box {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.cal-month-box__header {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6px;
}

/* Compacte kalender grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px; /* kleiner */
}

.cal-grid-weekdays {
  display: contents;
}

.cal-wd {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
  opacity: 0.85;
}

/* Dag-cel compact */
.cal-date {
  height: 26px;           /* compact hoogte */
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 4px;       /* compact padding */
  position: relative;
  font-size: 0.75rem;     /* kleiner cijfer */
  line-height: 1;
}

/* Status-kleuren */
.cal-date--invalid { background:#f7f7f7; color:#aaa; }
.cal-date--booked  { background:#ffe6e6; border-color:#ffcccc; }
.cal-date--available { background:#eaf7ea; border-color:#cfe8cf; }

/* Legend compact */
.cal-legend {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.8rem;
}
.legend { display:inline-flex; align-items:center; gap:6px; }
.legend::before { content:''; display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #ddd; }
.legend--available::before { background:#eaf7ea; border-color:#cfe8cf; }
.legend--booked::before { background:#ffe6e6; border-color:#ffcccc; }
.legend--invalid::before { background:#f7f7f7; border-color:#eee; }

/* Debug details styling (optioneel) */
.lodgify-calendar__error { padding:8px; border:1px solid #f3c2c2; background:#fff5f5; border-radius:6px; margin:6px 0; }
.lodgify-calendar__debug { margin-top:6px; }
.lodgify-calendar__debug summary { cursor:pointer; font-weight:600; }
.lodgify-calendar__debug pre { white-space:pre-wrap; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; background:#fafafa; padding:8px; border:1px dashed #ddd; border-radius:6px; }

/* (Optioneel) responsief: verlaag kolommen op smalle schermen
   Wil je ALTIJD 4 kolommen, verwijder deze media queries. */
@media (max-width: 1100px){
  .cal-year-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .cal-year-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile hardening (stack months, prevent overflow) --- */
.lodgify-calendar,
.lodgify-calendar * {
  box-sizing: border-box;
  min-width: 0; /* stop nested grids/flex from forcing width */
}

@media (max-width: 600px){
  .lodgify-calendar,
  .lodgify-calendar__inner,
  .cal-year-grid,
  .cal-month-box {
    width: 100%;
    max-width: 100%;
  }

  /* 1 column on small screens so it never overflows */
  .cal-year-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Compact headers and safely truncate long month names */
  .cal-month-box__header {
    font-size: .85rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
  }

  /* Tighten inner calendar so 7 columns fit */
  .cal-grid { gap: 2px; }
  .cal-wd { font-size: .7rem; padding: 1px 0; }
  .cal-date {
    height: 22px;
    font-size: .65rem;
    padding: 1px 2px;
    border-radius: 4px;
  }

  /* Keep the whole widget inside the layout, no sideways scroll */
  .lodgify-calendar { overflow-x: hidden; }
}

/* Optional: if you’d rather keep 2 columns on mobile with safe horizontal scroll, swap the 1fr rule above for this: */
/*
@media (max-width: 600px){
  .cal-year-grid {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cal-month-box { scroll-snap-align: start; }
}
*/


/* === Half-day check-in/out (rand van boekingen) === */
/* Startdag van een boeking: rechterhelft rood (check-in mogelijk) */
.cal-date--booked.cal-date--booked-start:not(.cal-date--booked-end) {
  background: linear-gradient(to right, transparent 0 50%, #ffe6e6 50% 100%);
  border-color: #ffcccc;
}

/* Einddag van een boeking: linkerhelft rood (check-out mogelijk) */
.cal-date--booked.cal-date--booked-end:not(.cal-date--booked-start) {
  background: linear-gradient(to right, #ffe6e6 0 50%, transparent 50% 100%);
  border-color: #ffcccc;
}

/* Ééndagsboeking: blijft visueel “vol” (optioneel: een subtiele middenlijn) */
.cal-date--booked.cal-date--booked-start.cal-date--booked-end {
  background: #ffe6e6;
  border-color: #ffcccc;
  position: relative;
}
.cal-date--booked.cal-date--booked-start.cal-date--booked-end::after {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px; left: 50%;
  width: 1px;
  background: rgba(0,0,0,.06); /* subtiele middenlijn */
  transform: translateX(-0.5px);
}

/* Zorg dat het dagcijfer boven de gradient blijft */
.cal-date__num {
  position: relative;
  z-index: 1;
}

/* === Half-day op aangrenzende vrije dag === */
/* Start −1: groen (links) -> rood (rechts) */
.cal-date--available.cal-date--adj-start:not(.cal-date--adj-end) {
  background: linear-gradient(to right, #eaf7ea 0 50%, #ffe6e6 50% 100%);
  border-color: #cfe8cf;
}

/* Einde +1: rood (links) -> groen (rechts) */
.cal-date--available.cal-date--adj-end:not(.cal-date--adj-start) {
  background: linear-gradient(to right, #ffe6e6 0 50%, #eaf7ea 50% 100%);
  border-color: #cfe8cf;
}

/* Hoekcase: als een vrije dag zowel voor start als na einde staat (kan bijna niet), toon neutraal groen */
.cal-date--available.cal-date--adj-start.cal-date--adj-end {
  background: #eaf7ea;
}

/* Zorg dat het cijfertje zichtbaar blijft */
.cal-date__num { position: relative; z-index: 1; }



/* === Wisseldag (changeover) diagonal styles ===
   Diagonal = bottom-left → top-right (45° line)
   FRONT  = day before first booked  => left GREEN, right RED
   END    = day after last booked    => left RED,   right GREEN
*/
.cal-date--available.cal-date--wissel,
.cal-date--invalid.cal-date--wissel {
  /* keep numbers above the paint */
  position: relative;
  overflow: hidden;
}

/* FRONT: green → red across the 45° diagonal */
.cal-date--available.cal-date--wissel-front {
  background: linear-gradient(135deg, #eaf7ea 0 50%, #ffe6e6 50% 100%);
  border-color: #cfe8cf;
}

/* END: red → green across the 45° diagonal */
.cal-date--available.cal-date--wissel-end {
  background: linear-gradient(135deg, #ffe6e6 0 50%, #eaf7ea 50% 100%);
  border-color: #cfe8cf;
}

/* Optional: thin diagonal accent line for extra clarity */
.cal-date--available.cal-date--wissel-front::after,
.cal-date--available.cal-date--wissel-end::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      transparent calc(50% - 0.5px),
      rgba(0,0,0,.08) 0,
      transparent calc(50% + 0.5px)
    );
  pointer-events: none;
}

/* Make sure the date number stays visible above the gradients */
.cal-date__num { position: relative; z-index: 1; }


/* Ensure wissel cells can be painted even without --available / --booked */
.cal-date--wissel { position: relative; overflow: hidden; }

/* Day 0 (front) — green → red across the diagonal */
.cal-date--wissel-front:not(.cal-date--available):not(.cal-date--booked) {
  background: linear-gradient(135deg, #eaf7ea 0 50%, #ffe6e6 50% 100%);
  border-color: #cfe8cf;
}

/* (If ever needed) End on a neutral cell — red → green across the diagonal */
.cal-date--wissel-end:not(.cal-date--available):not(.cal-date--booked) {
  background: linear-gradient(135deg, #ffe6e6 0 50%, #eaf7ea 50% 100%);
  border-color: #cfe8cf;
}

/* Keep the date number above any diagonal paint */
.cal-date__num { position: relative; z-index: 1; }