/* ============================================================
   CALENDAR — Definitieve, conflictvrije stylesheet
   - Checkin = top-right (blauw)
   - Checkout = bottom-left (blauw)
   - Selectie = groen (top-right of bottom-left)
   - Geen kwart-vakken, correcte layering
   ============================================================ */

:root{
  --color-booked: rgba(15,157,88,0.20);
  --color-booked-solid: rgba(15,157,88,0.95);
  --color-selected: rgba(59,130,246,0.25);
  --color-selected-solid: rgba(59,130,246,0.95);
  --calendar-cell-bg: transparent;
  --badge-bg: rgba(0,0,0,0.06);
}

/* Basis cel */
.calendar-day{
  position: relative;
  box-sizing: border-box;
  min-width: 40px;
  height: 48px;
  padding: 10px 6px;
  text-align: center;
  vertical-align: middle;
  background: var(--calendar-cell-bg);
  overflow: visible;
}

/* Full states (only for fully occupied or fully selected interior days) */
.calendar-day.day-booked {
  background: var(--color-booked);
}
.calendar-day.day-selected {
  background: var(--color-selected);
}

/* If any half/combined class exists, remove element background so pseudo-elements control visuals */
.calendar-day.day-booked-checkin-half,
.calendar-day.day-booked-checkout-half,
.calendar-day.day-selected-checkin-half,
.calendar-day.day-selected-checkout-half,
.calendar-day.combined-booked-checkin-selected-checkout,
.calendar-day.combined-booked-checkout-selected-checkin,
.calendar-day.combined-booked-selected,
.calendar-day.day-checkout-half {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Ensure pseudo-elements don't capture pointer events */
.calendar-day::before,
.calendar-day::after {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================
   BOOKING HALVES (drawn with ::before) — booking halves are under selection
   ::before uses semi-transparent color for normal view; combined classes use near-solid
   ============================================================ */

/* BOOKING CHECKIN (top-right red) */
.calendar-day.day-booked-checkin-half::before,
.calendar-day.combined-booked-checkin-selected-checkout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-booked);
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  z-index: 1;
}

/* BOOKING CHECKOUT (bottom-left red) */
.calendar-day.day-booked-checkout-half::before,
.calendar-day.combined-booked-checkout-selected-checkin::before,
.calendar-day.day-checkout-half::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-booked);
  clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
  z-index: 1;
}

/* For combined explicit classes we prefer slightly stronger colors to avoid visual blending */
.calendar-day.combined-booked-checkin-selected-checkout::before,
.calendar-day.combined-booked-checkout-selected-checkin::before {
  background: var(--color-booked-solid);
}

/* ============================================================
   SELECTION HALVES (drawn with ::after) — selection overlays are above booking halves
   ============================================================ */

/* SELECTIE CHECKIN (top-right green) */
.calendar-day.day-selected-checkin-half::after,
.calendar-day.combined-booked-checkout-selected-checkin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-selected);
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  z-index: 2;
}

/* SELECTIE CHECKOUT (bottom-left green) */
.calendar-day.day-selected-checkout-half::after,
.calendar-day.combined-booked-checkin-selected-checkout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-selected);
  clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
  z-index: 2;
}

/* For combined explicit classes use solid selection color to ensure visibility */
.calendar-day.combined-booked-checkin-selected-checkout::after,
.calendar-day.combined-booked-checkout-selected-checkin::after {
  background: var(--color-selected-solid);
}

/* ============================================================
   FALLBACK COMBINED (booked + selected) — booking behind, selection above
   ============================================================ */
.calendar-day.combined-booked-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-booked);
  z-index: 1;
}
.calendar-day.combined-booked-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-selected);
  z-index: 2;
}

/* ============================================================
   FULL SELECTED INTERIOR DAYS
   Show full green only when day-selected exists WITHOUT half modifiers
   ============================================================ */
.calendar-day.day-selected:not(.day-selected-checkin-half):not(.day-selected-checkout-half):not(.day-booked):not(.day-booked-checkin-half):not(.day-booked-checkout-half) {
  background: var(--color-selected) !important;
  background-image: none !important;
}

/* ============================================================
   TEXT & BADGE LAYERING
   ============================================================ */
.calendar-day > * {
  position: relative;
  z-index: 3; /* above pseudo elements */
}

/* Badge (kept for compatibility but you removed badges in JS; rule harmless) */
.booking-end-badge {
  font-weight: 600;
  color: #222;
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--badge-bg);
  padding: 2px 4px;
  border-radius: 3px;
  z-index: 4;
}

/* ============================================================
   GRAPES ICON (restore mask + fallback)
   ============================================================ */
.grapes-icon{
  width: 46px !important;
  height: 46px !important;
  display: inline-block;
  vertical-align: middle;
  background-color: #6b705c !important; /* fallback color */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  z-index: 10;
}

/* Prefer mask if available */
.grapes-icon{
  -webkit-mask-image: url("icons/italian_grapes.png");
  mask-image: url("icons/italian_grapes.png");
}

/* Fallback: background image if mask unsupported */
.grapes-icon::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("icons/italian_grapes.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
}

/* ============================================================
   Accessibility & small tweaks
   ============================================================ */
.calendar-day:focus { outline: 2px solid rgba(0,0,0,0.08); outline-offset: 2px; }

/* ===== Erik: targeted fix voor kwart‑vakken + grapes fallback ===== */

/* 1) Zorg dat ALLE generieke td/td.calendar-day achtergronden geen effect hebben
   op cellen die halve/combined modifiers hebben. Dit blok is breed maar veilig:
*/
.calendar-day[class*="day-booked-checkin-half"],
.calendar-day[class*="day-booked-checkout-half"],
.calendar-day[class*="day-selected-checkin-half"],
.calendar-day[class*="day-selected-checkout-half"],
.calendar-day[class*="combined-booked-checkin-selected-checkout"],
.calendar-day[class*="combined-booked-checkout-selected-checkin"],
.calendar-day[class*="combined-booked-selected"],
.calendar-day[class*="day-checkout-half"] {
  /* remove any background set by global rules or inline styles */
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 2) Zorg dat pseudo-elementen expliciet de enige visuals zijn en stapelen correct */
.calendar-day::before,
.calendar-day::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* booking halves (green) under selection */
.calendar-day.day-booked-checkin-half::before,
.calendar-day.combined-booked-checkin-selected-checkout::before {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  background: rgba(15,157,88,0.20);
  z-index: 1;
}
.calendar-day.day-booked-checkout-half::before,
.calendar-day.combined-booked-checkout-selected-checkin::before,
.calendar-day.day-checkout-half::before {
  clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
  background: rgba(15,157,88,0.20);
  z-index: 1;
}

/* selection halves (light blue) always above booking halves */
.calendar-day.day-selected-checkin-half::after,
.calendar-day.combined-booked-checkout-selected-checkin::after {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  background: rgba(59,130,246,0.25);
  z-index: 2;
}
.calendar-day.day-selected-checkout-half::after,
.calendar-day.combined-booked-checkin-selected-checkout::after {
  clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
  background: rgba(59,130,246,0.25);
  z-index: 2;
}

/* 3) Tekst en badge altijd boven pseudo-elementen */
.calendar-day > * { position: relative; z-index: 4; }

/* 4) Herstel grapes icon fallback (zorg dat mask en background beide werken) */
.grapes-icon {
  width: 46px !important;
  height: 46px !important;
  display: inline-block;
  vertical-align: middle;
  background-color: #6b705c !important; /* fallback kleur */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  z-index: 10;
  /* prefer mask if available */
  -webkit-mask-image: url("icons/italian_grapes.png");
  mask-image: url("icons/italian_grapes.png");
}
/* fallback background-image if mask unsupported or asset missing */
.grapes-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("icons/italian_grapes.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
}

/* 5) (Optioneel debug) zet tijdelijk een dunne outline op problematische cellen
   Uncomment de volgende regel als je nog één cel wilt aanwijzen:
*/
/* .calendar-day[class*="day-booked-checkin-half"], .calendar-day[class*="day-booked-checkout-half"] { outline: 1px dashed rgba(0,0,0,0.08) !important; } */

/* ============================================================
   HEADER FULL-WIDTH FIX (desktop)
   - Forceert header container full width, behoudt centered inner container
   ============================================================ */

/* Target common header selectors; voeg of vervang selectors als jouw markup anders is */
#header-placeholder,
.header,
.site-header,
.header-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
  z-index: 60;
}

/* Inner content stays centered with a comfortable max width */
#header-placeholder > .inner,
.header > .inner,
.site-header > .inner,
.header-wrapper > .inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
}

/* Desktop tweak: more padding on large screens */
@media (min-width: 1024px) {
  #header-placeholder,
  .header,
  .site-header,
  .header-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
  #header-placeholder > .inner,
  .header > .inner,
  .site-header > .inner,
  .header-wrapper > .inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* If header is fixed, add a spacer element under the header to prevent content overlap */
.header-fixed-spacer {
  height: var(--header-height, 64px);
}

/* Safety override for Tailwind-like max-width utilities inside header */
#header-placeholder .max-w-2xl,
.header .max-w-2xl,
.site-header .max-w-2xl {
  max-width: none !important;
  width: 100% !important;
}

/* Header: forceer deze specifieke nav full width en verwijder centering utilities */
nav.fixed.top-0.left-0.right-0 {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 16px !important;   /* pas aan naar jouw spacing variabelen */
  padding-right: 16px !important;  /* pas aan naar jouw spacing variabelen */
  box-sizing: border-box;
  left: 0;
  right: 0;
}

/* Zorg dat inner content (zoals max-w-7xl) niet de nav zelf beperkt.
   Als je wél een centered inner container wilt, maak die expliciet en geef die max-width. */
nav.fixed.top-0.left-0.right-0 > .inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}