/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* =========================================================
   OnPoint Archery – SimplyBook.me booking page
   Card style: tinted card + coloured left strip + dark text
   Colours:  Open #169724 | Limited spots #EEE28E | Full #C73E1C
   - Grid columns: 5 wide / 3 medium / 2 phone
   - Counter reads "# spots left" (hidden on fully open slots)
   - FULL cards for full whole-hour slots (except 7:00 PM)
   - Colour legend: "Open" / "Limited spots available"
   - Half-hour slots hidden, except next to an hour slot
     with 6 or fewer spots left
   Hours: Tue–Fri 12–8 PM, Sat–Sun 10 AM–8 PM (last start 7 PM)
   ========================================================= */

/* 0. Grid – every cell (slot or FULL card) is exactly one column wide,
      with a small gap around each card */
*:has(> .slot) {
  container-type: inline-size;
}
.slot { --cols: 3; --gap: 6px; }
@container (min-width: 800px) { .slot { --cols: 5; } }
@container (max-width: 499px) { .slot { --cols: 2; } }

.slot {
  width: calc(100% / var(--cols)) !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  padding: calc(var(--gap) / 2) !important;
  border: none !important;
  background: transparent !important;
}

/* 0b. Card look – OPEN (green) */
.sb-cell {
  background-color: #ADDBB2 !important;
  border: none !important;
  border-left: 6px solid #169724 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  color: #0B4A12 !important;
  font-weight: 600 !important;
}
.sb-cell:hover {
  background-color: #96D09C !important;
}

/* 1. Replace "9 / 10" with "9 spots left" */
.slot--available-slot {
  font-size: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.slot--available-slot::after {
  content: var(--left) " spots left";
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.slot--available-slot[aria-label^="1 / "]  { --left: "1"; }
.slot--available-slot[aria-label^="1 / "]::after { content: "1 spot left"; }
.slot--available-slot[aria-label^="2 / "]  { --left: "2"; }
.slot--available-slot[aria-label^="3 / "]  { --left: "3"; }
.slot--available-slot[aria-label^="4 / "]  { --left: "4"; }
.slot--available-slot[aria-label^="5 / "]  { --left: "5"; }
.slot--available-slot[aria-label^="6 / "]  { --left: "6"; }
.slot--available-slot[aria-label^="7 / "]  { --left: "7"; }
.slot--available-slot[aria-label^="8 / "]  { --left: "8"; }
.slot--available-slot[aria-label^="9 / "]  { --left: "9"; }
.slot--available-slot[aria-label^="10 / "] { --left: "10"; }
.slot--available-slot[aria-label^="11 / "] { --left: "11"; }
.slot--available-slot[aria-label^="12 / "] { --left: "12"; }
.slot--available-slot[aria-label^="13 / "] { --left: "13"; }
.slot--available-slot[aria-label^="14 / "] { --left: "14"; }
.slot--available-slot[aria-label^="15 / "] { --left: "15"; }
.slot--available-slot[aria-label^="16 / "] { --left: "16"; }
.slot--available-slot[aria-label^="17 / "] { --left: "17"; }
.slot--available-slot[aria-label^="18 / "] { --left: "18"; }
.slot--available-slot[aria-label^="19 / "] { --left: "19"; }
.slot--available-slot[aria-label^="20 / "] { --left: "20"; }
.slot--available-slot[aria-label^="21 / "] { --left: "21"; }
.slot--available-slot[aria-label^="22 / "] { --left: "22"; }
.slot--available-slot[aria-label^="23 / "] { --left: "23"; }
.slot--available-slot[aria-label^="24 / "] { --left: "24"; }
.slot--available-slot[aria-label^="25 / "] { --left: "25"; }
.slot--available-slot[aria-label^="26 / "] { --left: "26"; }
.slot--available-slot[aria-label^="27 / "] { --left: "27"; }
.slot--available-slot[aria-label^="28 / "] { --left: "28"; }
.slot--available-slot[aria-label^="29 / "] { --left: "29"; }
.slot--available-slot[aria-label^="30 / "] { --left: "30"; }

/* 1b. Hide the counter on fully open (green) slots, e.g. 10 / 10 */
.slot--available-slot:is(
  [aria-label^="1 / 1 "],  [aria-label^="2 / 2 "],  [aria-label^="3 / 3 "],
  [aria-label^="4 / 4 "],  [aria-label^="5 / 5 "],  [aria-label^="6 / 6 "],
  [aria-label^="7 / 7 "],  [aria-label^="8 / 8 "],  [aria-label^="9 / 9 "],
  [aria-label^="10 / 10 "],[aria-label^="11 / 11 "],[aria-label^="12 / 12 "],
  [aria-label^="13 / 13 "],[aria-label^="14 / 14 "],[aria-label^="15 / 15 "],
  [aria-label^="16 / 16 "],[aria-label^="17 / 17 "],[aria-label^="18 / 18 "],
  [aria-label^="19 / 19 "],[aria-label^="20 / 20 "],[aria-label^="25 / 25 "],
  [aria-label^="30 / 30 "]
) {
  display: none !important;
}

/* 2. Card look – LIMITED SPOTS (yellow) when at least 1 space is booked */
.sb-cell:has(> .slot--available-slot[aria-label*=" / "]:not(
  [aria-label^="1 / 1 "],  [aria-label^="2 / 2 "],  [aria-label^="3 / 3 "],
  [aria-label^="4 / 4 "],  [aria-label^="5 / 5 "],  [aria-label^="6 / 6 "],
  [aria-label^="7 / 7 "],  [aria-label^="8 / 8 "],  [aria-label^="9 / 9 "],
  [aria-label^="10 / 10 "],[aria-label^="11 / 11 "],[aria-label^="12 / 12 "],
  [aria-label^="13 / 13 "],[aria-label^="14 / 14 "],[aria-label^="15 / 15 "],
  [aria-label^="16 / 16 "],[aria-label^="17 / 17 "],[aria-label^="18 / 18 "],
  [aria-label^="19 / 19 "],[aria-label^="20 / 20 "],[aria-label^="25 / 25 "],
  [aria-label^="30 / 30 "]
)) {
  background-color: #EEE28E !important;
  border-left-color: #C9B536 !important;
  color: #4A4200 !important;
}

/* 3. Hover on limited-spots cards */
.sb-cell:has(> .slot--available-slot[aria-label*=" / "]:not(
  [aria-label^="1 / 1 "],  [aria-label^="2 / 2 "],  [aria-label^="3 / 3 "],
  [aria-label^="4 / 4 "],  [aria-label^="5 / 5 "],  [aria-label^="6 / 6 "],
  [aria-label^="7 / 7 "],  [aria-label^="8 / 8 "],  [aria-label^="9 / 9 "],
  [aria-label^="10 / 10 "],[aria-label^="11 / 11 "],[aria-label^="12 / 12 "],
  [aria-label^="13 / 13 "],[aria-label^="14 / 14 "],[aria-label^="15 / 15 "],
  [aria-label^="16 / 16 "],[aria-label^="17 / 17 "],[aria-label^="18 / 18 "],
  [aria-label^="19 / 19 "],[aria-label^="20 / 20 "],[aria-label^="25 / 25 "],
  [aria-label^="30 / 30 "]
)):hover {
  background-color: #E6D873 !important;
}

/* 4. FULL whole-hour cards
      A full hour (e.g. 2:00) also removes 1:30 and 2:30, so 1:00 is
      followed straight by 3:00. When an hour slot is NOT followed by
      its own :30 or the next hour, a "FULL" card is added after it.
      (No card for 7:00 PM – if it's full it simply disappears.) */

/* 4a. Detect the gap after each hour (one rule per hour, 11 AM – 6 PM) */
.slot:has(> a.sb-cell[href*="/time/10:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/10:30:00/"],[href*="/time/11:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "11:00 AM"; }
.slot:has(> a.sb-cell[href*="/time/11:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/11:30:00/"],[href*="/time/12:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "12:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/12:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/12:30:00/"],[href*="/time/13:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "1:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/13:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/13:30:00/"],[href*="/time/14:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "2:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/14:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/14:30:00/"],[href*="/time/15:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "3:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/15:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/15:30:00/"],[href*="/time/16:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "4:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/16:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/16:30:00/"],[href*="/time/17:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "5:00 PM"; }
.slot:has(> a.sb-cell[href*="/time/17:00:00/"]):not(:has(+ .slot > a.sb-cell:is([href*="/time/17:30:00/"],[href*="/time/18:00:00/"]))) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --next-hour: "6:00 PM"; }

/* 4b. Opening hour full (first slot of the day starts an hour late) */
.slot:first-child:has(> a.sb-cell[href*="/time/11:00:00/"]) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --prev-hour: "10:00 AM"; }
.slot:first-child:has(> a.sb-cell[href*="/time/13:00:00/"]) { display: contents !important; --split: calc(100% / var(--cols) - var(--gap)); --split-margin: calc(var(--gap) / 2); --prev-hour: "12:00 PM"; }

/* 4c. Only a split-out slot (next to a FULL card) gets a set width
       and its own gap – every other slot keeps its normal size */
.slot > a.sb-cell {
  width: var(--split, auto);
  margin: var(--split-margin, 0) !important;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* 4d. The FULL card itself – one cell, same height as a slot */
.slot::after  { content: var(--next-hour) "\A FULL"; }
.slot::before { content: var(--prev-hour) "\A FULL"; }
.slot::before,
.slot::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / var(--cols) - var(--gap));
  margin: calc(var(--gap) / 2);
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 87px;
  background-color: #EBBBB0;
  border-left: 6px solid #C73E1C;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  color: #7A220D;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: pre;
  pointer-events: none;
  cursor: not-allowed;
}

/* 5. Colour legend after "Available start times" – mini cards */
*:has(.slot--available-slot) > .container-caption {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

*:has(.slot--available-slot) > .container-caption::before,
*:has(.slot--available-slot) > .container-caption::after {
  order: 2;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
}

*:has(.slot--available-slot) > .container-caption::before {
  content: "Open";
  background-image: linear-gradient(to right, #169724 0 4px, #ADDBB2 4px);
}

*:has(.slot--available-slot) > .container-caption::after {
  order: 3;
  content: "Limited spots available";
  background-image: linear-gradient(to right, #C9B536 0 4px, #EEE28E 4px);
}

/* 6. Hide half-hour slots, EXCEPT when the hour slot just before
      or just after has 6 or fewer spots left */
.slot:has(> a.sb-cell[href*=":30:00/"]):not(

  .slot:has(> a.sb-cell > .slot--available-slot:is(
    [aria-label^="1 / "], [aria-label^="2 / "], [aria-label^="3 / "],
    [aria-label^="4 / "], [aria-label^="5 / "], [aria-label^="6 / "]
  )) + .slot,

  :has(+ .slot > a.sb-cell > .slot--available-slot:is(
    [aria-label^="1 / "], [aria-label^="2 / "], [aria-label^="3 / "],
    [aria-label^="4 / "], [aria-label^="5 / "], [aria-label^="6 / "]
  ))

) {
  display: none !important;
}