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


/* --- Book More Sessions Button --- */
#sb_multiple_booking_btn span::before {
  content: "Book More Sessions";
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

#sb_multiple_booking_btn span {
  font-size: 0;
}

#sb_multiple_booking_btn::before {
  content: "Need to add more sessions?";
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
  text-align: center;
}


/* Fix size of Confirm Booking button */
#sb_book_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}

#sb_book_btn span {
  font-size: 0;
  position: relative;
  display: inline-block;
}

#sb_book_btn span::after {
  content: "Confirm Booking";
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#sb_book_btn::before {
  content: "All done?";
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
  text-align: center;
}


/* Hide any span that contains "Renewal $" in price formatter blocks */
.wrapper.price-formatter span:before {
  content: '';
}

.wrapper.price-formatter span {
  font-size: 0 !important;
}

.wrapper.price-formatter:not(.tctr) {
  margin-top: -20px !important;
}

.info-container.v2 + .active-container.v3 {
  margin-top: -20px !important;
}

div.active-container.v2 > .wrapper.btn.price-formatter {
  margin-top: -8px !important;
}


#about-us .section-pd .title-main::after {
  content: "";
  display: block;
  background-image: url('https://i.imgur.com/ZJELhvY.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 230px;
  margin-top: -10px;
}

#about-us .section-pd .title-main {
  font-size: 0;
  position: relative;
}

#about-us .section-pd .title-main::before {
  content: "Choose a Plan. Book a Class.";
  font-size: 22px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #000000;
  display: block;
}

#about-us .font_8.wixui-rich-text__text::before {
  content: "\AThe Circle Performance";
  display: block;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  color: #232323;
  margin-top: 18px;
  margin-bottom: -1px;
  text-align: left;
  padding-left: -28px;
}



/* =====================================
   REMOVE Sport(s) field entirely
   ===================================== */

/* Hide the entire Sport(s) checkbox block */
#client-login #sb_additional_fields .form-group-sport,
#client-login #sb_additional_fields .form-group-sports,
#client-login #sb_additional_fields .form-group-sport_s,
#client-login #sb_additional_fields .custom-checkbox,
#client-login #sb_additional_fields label[for*="sport"],
#client-login #sb_additional_fields input[name*="sport"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* REMOVE Sports checkbox entirely */
#client-login #sb_additional_fields .custom-checkbox {
  display: none !important;
}

/* =====================================
   MOBILE: Fix pricing buttons (KEEP dropdown arrow)
   ===================================== */
@media (max-width: 520px) {

  /* Stack dropdown + button cleanly */
  #events .active-container,
  #events .wrapper.btn.price-formatter{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Black "Select / Start for $" button */
  #events .wrapper.btn.price-formatter .btn,
  #events .wrapper.btn.price-formatter button{
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  /* WHITE dropdown box (DO NOT kill arrow) */
  #events .dropdown,
  #events .dropdown-toggle{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-right: 36px !important; /* space for arrow */
    position: relative !important;
  }

  /* Ensure caret/arrow stays visible */
  #events .dropdown-toggle::after{
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  /* Prevent arrow clipping */
  #events .dropdown,
  #events .dropdown-toggle{
    overflow: visible !important;
  }
}

/* ==========================================
   FORCE "Details" text on the white read-more box
   (works even if spans aren't empty / not under #events)
   ========================================== */
@media (max-width: 768px){

  /* The actual element from your inspect */
  a.btn.btn-read-more{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 92px !important;
    height: 34px !important;
    padding: 0 12px !important;
  }

  /* Hide whatever SBM puts in the text span (blank/whitespace/etc.) */
  a.btn.btn-read-more .btn-txt,
  a.btn.btn-read-more .btn-txt-part{
    font-size: 0 !important;
  }

  /* Always inject visible label */
  a.btn.btn-read-more::before{
    content: "Details" !important;
    font-size: 12px !important;
    opacity: .85 !important;
  }

  /* Keep the icon visible */
  a.btn.btn-read-more i{
    display: inline-block !important;
    opacity: .75 !important;
  }
}

/* ==========================================
   NEW CLIENT SIGNUP — 2 COLUMN LAYOUT (SBM)
   ========================================== */

/* Target ONLY the right column (New clients) */
#client-login .row > div:last-child form{
  max-width: 520px !important;   /* optional: keeps it from getting too skinny */
  margin: 0 auto !important;
}

/* Make the signup fields wrap into 2 columns */
#client-login .row > div:last-child form .form-group{
  float: none !important;
  clear: none !important;
  width: auto !important;
}

/* Turn the signup form into a wrapping flex layout */
#client-login .row > div:last-child form{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 18px !important; /* row gap, column gap */
  align-items: flex-end !important;
}

/* Each field becomes half width */
#client-login .row > div:last-child form .form-group{
  flex: 1 1 calc(50% - 18px) !important;
  min-width: 220px !important;
}

/* Inputs/selects fill their column */
#client-login .row > div:last-child form input,
#client-login .row > div:last-child form select{
  width: 100% !important;
}

/* Full-width items (checkbox area + button + anything SBM marks as checkbox) */
#client-login .row > div:last-child form .custom-checkbox,
#client-login .row > div:last-child form .checkbox,
#client-login .row > div:last-child form .form-actions,
#client-login .row > div:last-child form button,
#client-login .row > div:last-child form .btn{
  flex: 1 1 100% !important;
  width: 100% !important;
}

/* Mobile: stack back to 1 column */
@media (max-width: 768px){
  #client-login .row > div:last-child form .form-group{
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ==========================================
   CLIENT LOGIN PAGE — MAKE IT WIDER
   ========================================== */

/* Widen the white box area */
#client-login .container,
#client-login .container-fluid,
#client-login .sb-widget,
#client-login .content,
#client-login .wrapper {
  max-width: 980px !important;
}

/* Make the two panels use the width better */
#client-login .row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
}

/* Existing clients (left) smaller */
#client-login .row > div:first-child{
  flex: 0 0 34% !important;
  max-width: 34% !important;
}

/* New clients (right) bigger */
#client-login .row > div:last-child{
  flex: 1 1 0 !important;
  max-width: 66% !important;
}

/* ==========================================
   NEW CLIENTS — 2 COLUMNS INSIDE FIELDS
   ========================================== */

#client-login .row > div:last-child #sb_additional_fields{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 18px !important;
}

/* each field half-width */
#client-login .row > div:last-child #sb_additional_fields .form-group{
  float: none !important;
  clear: none !important;
  flex: 1 1 calc(50% - 18px) !important;
  min-width: 260px !important; /* adjust smaller if needed */
}