/*! idealbeach resort   Grid Calendar CSS v1.1.5
 *  Changes vs 1.1.2:
 *   - Sharp START/END diagonals using clip-path that overlap adjacent days (no blur).
 *   - Mobile perf: content-visibility virtualization for rows/left list,
 *     iOS scroll polish (will-change + -webkit-overflow-scrolling).
 *   - Keeps your existing layout/UX intact.
 */

:root{
  --ibr-left-col-w: 150px;
  --ibr-day-col-w: 40px;
  --ibr-row-h: 30px;
  --ibr-category-h: 30px;
  --ibr-border: 1px solid rgba(0,0,0,0.09);
  --ibr-bg: #fff;
  --ibr-muted: #6b7280;
  --ibr-accent: #0ea5e9;
  --ibr-band-bg: #f3f4f6;
  --ibr-today: #ef4444;

  /* tone cycling for booked stripes (every 3 unit rows) */
  --ibr-booked-1: #0ea1b5;  /* teal 1 */
  --ibr-booked-2: #20b2b7;  /* teal 2 */
  --ibr-booked-3: #03B1FC;  /* teal 3 */
  --ibr-blocked:  #5DCDFD;  /* soft amber */

  /* diagonal depth (how far wedge overlaps into neighboring day) */
  --ibr-diag-w: 18px;
}

/* utilities */
.ibr-relative{ position: relative; }

/* header area */
.ibr-header{ background: var(--ibr-bg); border: var(--ibr-border); border-radius: 10px; padding: 10px 12px; margin-top: -2px; }
.ibr-header h1{ margin: 0 0 8px 0; font-size: 28px; color: #0b6ba8; text-align: center; }
.ibr-controls{ display: grid; grid-template-columns: 3fr 3fr 1fr; gap: 8px; margin:auto; }
.ibr-input{ border: 1px solid #e5e7eb; box-shadow:  2px 2px 8px 2px rgba(215, 215, 215, 0.9); border-radius: 9px; padding: 10px 14px; font-size: 14px; width:100%; }
.ibr-book-btn{ border: 0; border-radius: 10px; padding: 2px 5px; font-weight: 600; box-shadow:  2px 2px 8px 2px rgba(215, 215, 215, 0.9); background:#0ea5e9; color:#fff; width:100%; cursor:pointer; margin-right: 10px; font-size: 13px; }
#ibr-price-popover{ position:fixed; right:2vw; top:20vh; background:#fff; border:var(--ibr-border); border-radius:8px; padding:8px 10px; display:none; box-shadow:0 8px 20px rgba(0,0,0,.18); z-index: 20; min-width: 220px;}
#ibr-price-popover h4{ margin:0 0 6px 0; font-size:13px; color:#111827;}
.ibr-line{ display:flex; justify-content:space-between; font-size:13px; padding:2px 0;}
.ibr-hr{ height:1px; background:#e5e7eb; margin:4px 0; }
.ibr-total{ font-weight:700; }

/* the sticky head rows wrapper */
.ibr-head{ display:grid; grid-template-columns: var(--ibr-left-col-w) 1fr; border: var(--ibr-border); border-radius:8px 8px 0 0; overflow:visible; }
.ibr-left-head{ background:#f8fafc; padding:8px 10px; font-weight:600; border-right: var(--ibr-border); display:flex; align-items:center; justify-content:space-between; }
.ibr-head-icons{ display:flex; gap:4px; }
.ibr-head-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.ibr-scroll-x{ overflow-x:auto; overflow-y:hidden; }
.ibr-scroll-x::-webkit-scrollbar{ height:0; }
.ibr-scroll-x{ scrollbar-width:none; }
button.ibr-head-icon{ margin: 1px; padding: 2px;}
.ibr-months-row, .ibr-weekdays-row, .ibr-days-row{
  display:grid; grid-template-columns: repeat(var(--ibr-days-count, 365), var(--ibr-day-col-w));
}
.ibr-month{ text-align:center; font-weight:600; font-size:13px; padding:6px 0; color:#111827; background:#f8fafc; border-left:var(--ibr-border); }
.ibr-weekday-head{ margin-top: -5px; text-align:center; font-size:12px; color:var(--ibr-muted); padding:0px 0; background:#f9fafb; border-left:var(--ibr-border); }
.ibr-day-head{ font-weight: 500; margin-top: 0px; text-align:center; font-size:12px; color:#111827; padding:0px 0; background:#fff; border-left:var(--ibr-border); }

/* body with two synced scroll panes */
.ibr-body{ display:grid; grid-template-columns: var(--ibr-left-col-w) 1fr; border: var(--ibr-border); border-top: 0; border-radius:0 0 8px 8px; overflow:hidden; }
.ibr-left-scroll{ height: 64dvh; padding-bottom:0px; overflow:auto; border-right: var(--ibr-border); background:#fff; }
.ibr-grid-scroll{ height: 64dvh; overflow:auto; position:relative; background:#fff; }
.ibr-left-scroll::-webkit-scrollbar{ height:0; }
.ibr-left-scroll{ scrollbar-width:none; }
.ibr-grid-scroll::-webkit-scrollbar{ height:0; }
.ibr-grid-scroll{ scrollbar-width:none; }

/* iOS scroll polish */
#ibr-head-scroll, #ibr-body-scroll, #ibr-bottom-scroll { will-change: scroll-position; }
.ibr-grid-scroll, .ibr-left-scroll { -webkit-overflow-scrolling: touch; }

/* left column rows */
.ibr-category-left{ border-bottom-left-radius:20px ;border-top-left-radius: 20px; background: #ccc; height: var(--ibr-category-h); line-height: var(--ibr-category-h); maring-bottom:10px; padding:0 10px; font-weight:700; color:#000; border-bottom: var(--ibr-border); }
.ibr-unit{ margin-top: 2px; display:flex; align-items:center; height: var(--ibr-row-h); padding:0 10px; border-bottom:var(--ibr-border); text-decoration:none; font-size:12px; color:#0b6ba8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* paint only when visible (big win on iPhone) */
  content-visibility: auto; contain-intrinsic-size: var(--ibr-row-h);
}
.ibr-focused {
  transition: border-radius 0.3s ease-in-out;
  border-radius: 20px; /* Adjust this value for the desired curve */
}

/* right grid rows */
.ibr-grid{ display:grid; grid-template-columns: 1fr; }
.ibr-row{ margin-bottom: 2px; display:grid; grid-template-columns: repeat(var(--ibr-days-count, 365), var(--ibr-day-col-w));
  /* paint only when visible */
  content-visibility: auto; contain-intrinsic-size: var(--ibr-row-h);
}
.ibr-category-row{ margin: 0px; height: var(--ibr-category-h); }
.ibr-category-band{ background: #ccc; color:#ccc; font-weight:700; display:flex; align-items:center; position: sticky; padding-left:40vw; border-bottom:var(--ibr-border); }

.ibr-day{ height: var(--ibr-row-h); border-left: var(--ibr-border); border-bottom: var(--ibr-border); position:relative; display:flex; align-items:center; justify-content:center; font-size:11px; user-select:none; overflow: visible; }
.ibr-price{ position:absolute; right:6px; bottom:0px; font-size:10px; color:#32415195; font-weight:600; z-index: 2; }
.ibr-price:hover{ color: #000;}
/* today stripe */
.ibr-today-stripe{ position:absolute; top:0; bottom:0; width:37px; background: var(--ibr-today); opacity:0.12; pointer-events: auto; z-index: 0; height: 1708px; overflow:hidden;}

/* =========================
   CRISP DIAGONAL OVERLAPS
   ========================= */

/* remove any background paint on boundary cells; we draw with ::after polygons */
.booked-start, .booked-end, .blocked-start, .blocked-end{
  background: transparent !important;
}

/* SOLID middle fills (tone 1 by default) */
.booked-middle{ border: none; height:29px; inset: 0; padding-bottom: 0; background: var(--ibr-booked-1); }
.blocked-middle{ border: none; height:29px; background: var(--ibr-blocked); }

/* START wedge:
   - extends LEFT by --ibr-diag-w (so it overlaps into the previous day)
   - clip-path cuts a diagonal on the left
*/
.ibr-day.booked-start::after,
.ibr-day.blocked-start::after{
  content:""; position:absolute; top:0; bottom:0;
  left: calc(-1 * var(--ibr-diag-w)); width: calc(100% + var(--ibr-diag-w));
  background: var(--ibr-booked-1); /* overridden for blocked + tone variations below */
  clip-path: polygon(var(--ibr-diag-w) 0, 100% 0, 100% 100%, 0 100%);
  z-index: 3; pointer-events:none;
}

/* END wedge:
   - extends RIGHT by --ibr-diag-w (so it overlaps into the next day)
   - clip-path cuts a diagonal on the right
*/
.ibr-day.booked-end::after,
.ibr-day.blocked-end::after{
  content:""; position:absolute; border: none; top:0; bottom:0;
  right: calc(-1 * var(--ibr-diag-w)); width: calc(100% + var(--ibr-diag-w));
  background: var(--ibr-booked-1); /* overridden for blocked + tone variations below */
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--ibr-diag-w)) 100%);
  z-index: 3; pointer-events:none;
}

/* BLOCKED color for wedges */
.ibr-day.blocked-start::after,
.ibr-day.blocked-end::after{ pointer-events: none !important; background: var(--ibr-blocked); }

/* tone cycling for BOOKED */
.row-tone-2 .booked-middle{ background: var(--ibr-booked-2); }
.row-tone-3 .booked-middle{ background: var(--ibr-booked-3); }
.row-tone-2 .ibr-day.booked-start::after,
.row-tone-2 .ibr-day.booked-end::after{ background: var(--ibr-booked-2); }
.row-tone-3 .ibr-day.booked-start::after,
.row-tone-3 .ibr-day.booked-end::after{ background: var(--ibr-booked-3); }

/* (optional) you can also tone-cycle BLOCKED to match booked tones.
   If you prefer blocked to stay amber, keep only the base rule above. */

/* states */
.disabled{ opacity:0.45; pointer-events:none; }
.beyond-cutoff{ background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 4px, #e5e7eb 4px, #e5e7eb 8px); }
.allowed-start{ cursor: pointer; border-radius: 10px; padding: 1px 0 1px; background:#B3E5FC; border:2px dashed #03A9F4; box-shadow: inset 0 0 0 1px #93c5fd; }
.is-allowed-start{ cursor: pointer; background:#B3E5FC !important; border-radius: 10px !important; border:2px dashed #03A9F4 !important; }
.allowed-end{ cursor: pointer; background:#FFECB3; border-radius: 10px !important; border:2px dashed #FFC107; }
.allowed-end-7-day{ cursor: pointer; background:#FFECB3; border:2px dashed #FFC107; border-radius: 10px !important; box-shadow: inset 0 0 0 1px #facc15; }
.allowed-end-start{ cursor: pointer; background:#FFECB3 !important; border-radius: 10px !important; border:2px dashed #FFC107 !important; }

.selected{ border-radius: 10px; outline:2px solid #0ea5e9; outline-offset:-2px; }
.in-range{ background: #cfeffd; border:none; }

/* sticky header rows inside right pane */
#ibr-body-scroll .ibr-months-row,
#ibr-body-scroll .ibr-weekdays-row,
#ibr-body-scroll .ibr-days-row{ position: sticky; top: 0; z-index: 5; }

.ibr-left-head{ position: sticky; top: 0; z-index: 6; }

/* Ensure consistent column counts */
.ibr-months-row, .ibr-weekdays-row, .ibr-days-row, .ibr-row{
  grid-template-columns: repeat(var(--ibr-days-count, 365), var(--ibr-day-col-w));
}

/* full-screen mode */
.ibr-fullscreen{
  position: fixed !important;
  inset: 0 !important;
  background: #fff !important;
  z-index: 9999 !important;
  padding: 10px !important;
  overflow: hidden !important;
}

/* responsive tweaks */
@media (max-width: 850px){
  .ibr-header h1{ font-size: 20px; }
  :root{ --ibr-left-col-w: 100px; --ibr-day-col-w: 36px; }
  .ibr-unit{ display:flex; align-items:center; height: var(--ibr-row-h); padding:0 10px; border-bottom:var(--ibr-border); text-decoration:none; font-size: 10px;}
}

/* ==== Fill viewport & kill page-level overflow ==== */
html, body { height: 100%; margin-left: -4px; }
.ibr-relative{
  min-height: 10vh;
  min-height: 10dvh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow: hidden;
}
.ibr-body{ flex: 1; min-height: 0; }

/* ==== Hovers & layering (kept from your build) ==== */
/* Only apply hover to days that are NOT booked-middle */
.ibr-day:not(.booked-middle, .blocked-middle):hover {
  background: rgba(17,24,39,.1);
}
.ibr-unit.row-hover{ background: #ccc7 }
.ibr-row.row-hover .ibr-day::before{
  content:""; position:absolute; inset:0; background: var(--ibr-row-hover); pointer-events: none; z-index: 0;
}
.ibr-day:not(.disabled):hover::before{
  content:""; position:absolute ; inset:0; background: var(--ibr-day-hover); pointer-events: none; z-index: 1;
}
/* ---- put this near your :root block ---- */
:root{
  /* ...your existing vars... */
  --ibr-diag-w: 20px; /* diagonal depth / overlap width */
}

/* Let wedges extend across cell boundaries */
.ibr-day{ overflow: visible; }

/* We draw sharp polygons; kill any old gradient paint. */
.booked-start, .booked-end, .blocked-start, .blocked-end{
  background: transparent !important;
}

/* Solid fills remain the same */
.booked-middle{ background: var(--ibr-booked-1); height: 29px; }
.blocked-middle{ background: var(--ibr-blocked);  height: 29px; }

/* ========== START wedges (lean like "/") ========== */
/* extends LEFT by --ibr-diag-w so it overlaps the previous day */
.ibr-day.booked-start::after,
.ibr-day.blocked-start::after{
  content:""; position:absolute; border: none !important; top:0; bottom:0;
  left: calc(0.5 * var(--ibr-diag-w)); width: calc(100% + var(--ibr-diag-w));
  background: var(--ibr-booked-1); /* overridden for blocked + tones below */
  /* left edge: diagonal from (0 100%) -> (diag 0)  ==> "/" */
  clip-path: polygon(var(--ibr-diag-w) 0, 100% 0, 100% 100%, 0 100%);
  z-index: 3; pointer-events:none;
}

/* START color for blocked */
.ibr-day.blocked-start::after{ background: var(--ibr-blocked); }

/* tone cycling for START wedges */
.row-tone-2 .ibr-day.booked-start::after{ background: var(--ibr-booked-2); }
.row-tone-3 .ibr-day.booked-start::after{ background: var(--ibr-booked-3); }

/* ========== END wedges (lean like "\") ========== */
/* extends RIGHT by --ibr-diag-w so it overlaps the next day */
.ibr-day.booked-end::after,
.ibr-day.blocked-end::after{
  content:""; position:absolute; top:0; bottom:0;
  right: calc( -1.45 * var(--ibr-diag-w)); width: calc(130% + var(--ibr-diag-w));
  background: var(--ibr-booked-1);
  /* right edge: diagonal from (100% 0) -> (100%-diag 100%)  ==> "\" */
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ibr-diag-w)) 100%, 0 100%);
  z-index: 3; pointer-events:none;
}

/* END color for blocked */
.ibr-day.blocked-end::after{ background: var(--ibr-blocked); }

/* tone cycling for END wedges */
.row-tone-2 .ibr-day.booked-end::after{ background: var(--ibr-booked-2); }
.row-tone-3 .ibr-day.booked-end::after{ background: var(--ibr-booked-3); }