/*
	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 */
}


/* Nikita Sky: show the whole home-page banner on every screen size (banner is 1672x941, 16:9, and carries her name). */
#main-buttons {
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #f8f4f0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 56.28% 0 0 !important;
}
/* Large screens: cap the banner at 1100px wide so "Book Now" stays on the first screen. */
@media (min-width: 1100px) {
  #main-buttons {
    background-size: 1100px auto !important;
    padding-top: 619px !important;
  }
}
#main-buttons .company-name {
  display: none !important;
}
#main-buttons .container-fluid,
#main-buttons .wrapper {
  height: auto !important;
  min-height: 0 !important;
}
#main-buttons .wrapper {
  padding: 20px 0 !important;
  margin: 0 !important;
}

/* Phones/tablets: SimplyBook hides the reading's picture + description on the
   date & time step (column has hidden-xs hidden-sm). Show it above the calendar. */
@media (max-width: 991px) {
  .datetime-step .col-md-3.hidden-xs.hidden-sm {
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  /* Put the reading info ABOVE the top calendar: unwrap its block so the
     panel and the time slots become their own items, then order the panel first. */
  .datetime-step > .col-sm-12:has(.timeline-sidebar),
  .datetime-step > .col-sm-12 > .row:has(.timeline-sidebar) {
    display: contents !important;
  }
  .datetime-step .col-md-3.hidden-xs.hidden-sm {
    order: -1;
    flex: 0 0 100% !important;
  }
  .datetime-step .col-md-9 {
    flex: 0 0 100% !important;
  }
  .timeline-sidebar .item__picture-wrapper {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}
/* Swipeable strip of her slides at the top of each reading's description. */
.ns-slides {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px !important;
  margin: 0 0 12px !important;
}
/* Short (collapsed) view: show the whole slide strip, keep the text behind "Read more". */
.item__description.short:has(.ns-slides) {
  height: auto !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}
.item__description.short:has(.ns-slides) > :not(.ns-slides):not(.item__read-more) {
  display: none !important;
}
.ns-slides img {
  flex: 0 0 78% !important;
  max-width: 78% !important;
  height: auto !important;
  scroll-snap-align: start;
  border-radius: 8px !important;
}
/* Forecasts (Tides / Terrain): no cancelling (Nikita, 6 Nov). Hide "Cancel" on the page right after booking when the booking's Google Calendar link names a 2027 Forecast. */
body:has(a.calendar-popup__btn[href*="Forecast"]) .sb_cancel_btn {
  display: none !important;
}