/*
  Float & Flow Yoga - Clean Reset CSS
  Replace ALL current custom CSS with this.
  This restores image/button/text placement and only makes safe visual improvements.
*/

/* =========================================================
   1. BASIC PAGE STYLE
   ========================================================= */

body,
#sb_main {
  background: #f7fbfa !important;
}

/* Keep the booking page centered without changing hero/image layout */
#sb_main #main,
#sb_main #main-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   2. IMPORTANT RESET: RESTORE HERO / IMAGE / BOOK NOW AREA
   ========================================================= */

/* Restore the Book Now/image section back to normal SimplyBook layout */
#main-buttons {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: block !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* Restore images so they keep original width/height behavior */
#main-buttons img,
#sb_main img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
  object-position: initial !important;
}

/* Restore all buttons inside the hero section */
#main-buttons .btn,
#main-buttons a.btn,
#main-buttons button,
#main-buttons input[type="button"],
#main-buttons input[type="submit"] {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 auto !important;
  z-index: auto !important;
}

/* Make sure Float & Flow Yoga text is not cut off */
#main-buttons *,
#sb_main * {
  overflow: visible;
}

/* =========================================================
   3. FIX FLOAT & FLOW YOGA TITLE LOCATION
   ========================================================= */

/* This keeps the Float & Flow Yoga title from being clipped or pushed */
#main-buttons h1,
#main-buttons h2,
#main-buttons h3,
#main-buttons .company-name,
#main-buttons .name,
#main-buttons .brand-title,
#main-buttons .title-main {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  display: block !important;
  visibility: visible !important;

  width: auto !important;
  max-width: 100% !important;
  height: auto !important;

  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;

  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}

/* =========================================================
   4. BOOKING AREA STYLE - SAFE ONLY
   ========================================================= */

/* Class title styling */
#events h3 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #24413c !important;
  margin-bottom: 8px !important;
}

/* Duration text */
#events p.duration,
#events div.duration {
  font-size: 14px !important;
  color: #5f746f !important;
}

/* Description text */
#events p.description,
#events div.description {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #415a55 !important;
}

/* Selected class */
#events .selectedEvent {
  border: 2px solid #87bfb0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(36, 65, 60, 0.12) !important;
}

/* Booking buttons only inside booking flow */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button {
  border-radius: 999px !important;
  background: #2f7f73 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  min-height: 44px !important;
  box-shadow: 0 6px 16px rgba(47, 127, 115, 0.25) !important;
}

/* Button hover */
#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover,
#eventForm #save_button:hover {
  background: #25675d !important;
}

/* Date/time headings */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  font-size: 22px !important;
  color: #24413c !important;
  font-weight: 600 !important;
}

/* Calendar box */
div.ui-widget-content {
  border-radius: 18px !important;
  border: 1px solid #d7e6e2 !important;
  background: #ffffff !important;
}

/* Calendar header */
div.ui-widget-header {
  background: #2f7f73 !important;
  color: #ffffff !important;
  border-radius: 16px 16px 0 0 !important;
  border: none !important;
}

/* Timeline */
#timeline-container table.timeline {
  border-spacing: 8px !important;
  border-collapse: separate !important;
  width: 100% !important;
}

/* Available times */
.timeline td.free_time {
  background: #ffffff !important;
  border: 1px solid #b9d8d0 !important;
  color: #24413c !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.timeline td.free_time:hover {
  background: #e8f5f2 !important;
  cursor: pointer !important;
}

/* Selected time */
.timeline td.selected_time {
  background: #2f7f73 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

/* Unavailable times */
.timeline td.not_worked_time,
.timeline td.reserved_time {
  background: #edf3f1 !important;
  color: #9aa9a5 !important;
  border-radius: 10px !important;
}

/* =========================================================
   5. MOBILE CLEANUP
   ========================================================= */

@media only screen and (max-width: 768px) {
  #sb_main #main,
  #sb_main #main-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #events h3 {
    font-size: 21px !important;
    text-align: center !important;
  }

  #events p.description,
  #events div.description {
    font-size: 14px !important;
    text-align: center !important;
  }

  #events input.reserve_time_btn,
  #events input.select_another_btn,
  #eventForm #save_button {
    width: 100% !important;
    max-width: 340px !important;
    display: block !important;
    margin: 10px auto !important;
  }

  .timeline td.free_time,
  .timeline td.selected_time,
  .timeline td.reserved_time,
  .timeline td.not_worked_time {
    font-size: 14px !important;
    padding: 10px 6px !important;
  }

  #main-buttons h1,
  #main-buttons h2,
  #main-buttons h3,
  #main-buttons .company-name,
  #main-buttons .name,
  #main-buttons .brand-title,
  #main-buttons .title-main {
    text-align: center !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   FINAL FIX: Hide black Float & Flow Yoga text in image
   and move only Book Now button in line with Home
   ========================================================= */

/* Hide the black Float & Flow Yoga text in the center of the image */
#main-buttons h1,
#main-buttons h2,
#main-buttons h3,
#main-buttons .company-name,
#main-buttons .name,
#main-buttons .brand-title,
#main-buttons .title-main {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Move ONLY the Book Now button to the top center, in line with Home */
#main-buttons .btn,
#main-buttons a.btn,
#main-buttons button,
#main-buttons input[type="button"],
#main-buttons input[type="submit"] {
  position: fixed !important;
  top: 31px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;

  display: inline-block !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: 220px !important;

  margin: 0 !important;
  padding: 10px 24px !important;

  background: #25aaa3 !important;
  color: #163b38 !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

/* Mobile adjustment */
@media only screen and (max-width: 768px) {
  #main-buttons .btn,
  #main-buttons a.btn,
  #main-buttons button,
  #main-buttons input[type="button"],
  #main-buttons input[type="submit"] {
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 135px !important;
    max-width: 180px !important;
    font-size: 16px !important;
    padding: 9px 18px !important;
  }
}
/* =========================================================
   FIX: Stop cursive Float & Flow Yoga image text from cropping
   in wide / desktop mode
   ========================================================= */

/* Keep the top image from being cropped on wide screens */
#main-buttons,
#main-buttons .wrapper,
#main-buttons .inner,
#main-buttons .container,
#main-buttons .content {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}

/* If the image is loaded as an actual image, keep the full image visible */
#main-buttons img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Give the image area enough height on wider screens so the cursive text is not clipped */
@media only screen and (min-width: 769px) {
  #main-buttons {
    min-height: 430px !important;
  }
}

/* Keep mobile from becoming too tall */
@media only screen and (max-width: 768px) {
  #main-buttons {
    min-height: auto !important;
  }
}