/* ================================
   SOCIAL LOGIN: hide Google/Facebook + hide "or"
   (Does NOT affect Instagram links anywhere else)
================================ */

/* Hide ONLY Google + Facebook auth buttons */
a[href*="/v2/client/openid/provider/google/"],
a[href*="/v2/client/openid/provider/facebook/"]{
  display: none !important;
}

/* Hide the "or" line + remove its spacing */
.social.clearfix .txt,
.social.clearfix .txt::before,
.social.clearfix .txt::after{
  display: none !important;
  content: none !important;
}
.social.clearfix{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}


/* ================================
   PWA LOGIN / SIGNUP CLEANUP
================================ */

/* Remove "Or sign up via" separator in PWA */
body[class*="pwa"] .client-login-bar,
body[class*="pwa"] .client-login-bar::before,
body[class*="pwa"] .client-login-bar::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hide PWA push notification block */
#sb_pwa_push_notifications > div > div.push-notifications--body {
  display: none !important;
}

/* ================================
   PROFILE FORM
================================ */

#client-profile-edit label {
  color: #585858;
  width: 100%;
}

/* ================================
   CUSTOM PAGE TABLES
================================ */

body .custom-page .page-content table {
  width: 560px !important;
  margin: 16px 0;
  border-collapse: collapse;
}

.custom-page table tbody td span {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
}

.custom-page table tbody td {
  padding: 8px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.custom-page table tbody tr {
  height: auto !important;
}

.custom-page table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Mobile custom page tables */
@media (max-width: 767px) {
  body .custom-page .page-content table {
    width: 100% !important;
  }
}

/* ================================
   HERO / TITLE BACKGROUND
================================ */

.company-name {
  background-color: rgba(255, 255, 255, 0.75) !important;
  padding: 12px !important;
  border-radius: 5px !important;
  display: inline-block !important;
}

/* =========================
   HIDE SUBSCRIBE / PROMOTIONS OPT-IN
   Website (non-PWA) + PWA/App
   NOTE: :has() may not work in some embedded webviews
========================= */

/* Website */
body:not([class*="pwa"]) .promotions-letter-flag {
  display: none !important;
}

/* PWA/App */
body[class*="pwa"] .input-container--checkbox:has(#sb_promotion_letters_flag) {
  display: none !important;
}

/* ================================
   TIME VIEW (DESKTOP + MOBILE)
   Goal: Show ONLY Days-of-week + Location (Provider) filter
         Hide Services + Parts-of-day (Morning/Afternoon/Evening)
================================ */

/* Remove extra padding in time view container */
#sb_timeview_container .grid-weekly-inner .tab-pd {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

#sb_timeview_container .grid-weekly-inner .days-of-week {
  padding-top: 0 !important;
}

/* Ensure the top area stacks cleanly */
#sb_timeview_container .top-inline-steps {
  display: block !important;
  width: 100% !important;
}

/* Make rows full-width and neutralize bootstrap column behavior */
#sb_timeview_container .top-inline-steps .row,
#sb_timeview_container .top-inline-steps .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide all filters except provider/location */
#sb_timeview_container .top-inline-steps .row .form-group:not(.provider_id) {
  display: none !important;
}

/* Hide Morning / Afternoon / Evening */
#sb_timeview_container .top-inline-steps .parts-of-day,
#sb_timeview_container .top-inline-steps .time-of-day,
#sb_timeview_container .top-inline-steps .btn-group,
#sb_timeview_container .top-inline-steps .nav-pills,
#sb_morning_part,
#sb_afternoon_part,
#sb_evening_part {
  display: none !important;
}

/* Days-of-week: always horizontal, never wrap, left aligned */
#sb_timeview_container .top-inline-steps .days-of-week {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
}

/* Day buttons compact */
#sb_timeview_container .top-inline-steps .days-of-week .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 40px !important;
  white-space: nowrap !important;
}

/* Kill any column/grid styles applied by theme to children */
#sb_timeview_container .top-inline-steps .days-of-week > div,
#sb_timeview_container .top-inline-steps .days-of-week > a {
  display: inline-flex !important;
}

/* Location dropdown: left aligned, reasonable max width */
#sb_timeview_container .top-inline-steps .form-group.provider_id {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 0 10px 0 !important;
}

#sb_timeview_container .top-inline-steps .form-group.provider_id label {
  text-align: left !important;
}

/* ================================
   MOBILE (≤767px)
   Weekly grid row layout tweaks
================================ */

@media (max-width: 767px) {

  /* Keep weekly rows readable */
  #sb_time_grid_weekly_container .grid-weekly-table .grid-weekly-row {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    width: 100% !important;
    background-color: transparent !important;
    justify-content: flex-start !important;
  }

  #sb_time_grid_weekly_container .grid-weekly-table .grid-weekly-row .grid-weekly-item {
    width: initial !important;
    min-width: initial !important;
    background: transparent !important;
  }

  #sb_time_grid_weekly_container .grid-weekly-table .grid-weekly-row .grid-weekly-item:nth-child(2) {
    flex: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Smaller day buttons */
  #sb_timeview_container .days-of-week .btn {
    height: 32px !important;
    line-height: 32px !important;
    width: 40px !important;
    padding: 0 8px !important;
  }

  /* Header bar shows ONLY the Date */
  #sb_time_grid_weekly_container
  .grid-weekly-header
  .grid-weekly-header-row
  .grid-weekly-header-item:not(.grid-weekly-date-time) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #sb_time_grid_weekly_container
  .grid-weekly-header
  .grid-weekly-header-row
  .grid-weekly-header-item.grid-weekly-date-time {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    align-items: center !important;
  }
}

/* ================================
   AVAILABLE SPACES — NEVER WRAP
   Website + PWA/App
================================ */

/* Website (grid view) */
#sb_time_grid_weekly_container .grid-weekly-item.grid-weekly-available-slots,
#sb_time_grid_weekly_container .grid-weekly-item.grid-weekly-available-slots * {
  white-space: nowrap !important;
}

#sb_time_grid_weekly_container .grid-weekly-item.grid-weekly-available-slots {
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-width: 48px !important;
  text-align: center !important;
}

/* PWA/App (list view) */
body[class*="pwa"] .sb-timetable__block .sb-timetable__available-places,
body[class*="pwa"] .sb-timetable__block .sb-timetable__available-places * {
  white-space: nowrap !important;
}

body[class*="pwa"] .sb-timetable__block .sb-timetable__available-places {
  font-size: 14px !important;
  line-height: 1.1 !important;
  min-width: 56px !important;
  text-align: right !important;
}
/* =====================================================
   MEMBERSHIPS: HIDE ATTACHED SERVICES (Website + PWA/App)
   Target: div.item__connected-services.membership-service__list...
===================================================== */

/* Hide the entire attached-services container (this is what your screenshot shows) */
#sb_membership_container .item__connected-services,
#sb_membership_module_li .item__connected-services,
.membership-item .item__connected-services {
  display: none !important;
}

/* Optional: also hide the small "Attached service(s)" row in the info bar (if present) */
#sb_membership_container .info-bar--item--included-service,
#sb_membership_module_li .info-bar--item--included-service,
.membership-item .info-bar--item--included-service {
  display: none !important;
}
/* =====================================================
   MEMBERSHIPS: HIDE "Filter by attached items" (Website)
===================================================== */

/* Hide the whole filter wrapper */
#sb_membership_filter_container,
#sb_membership_filter_container * {
  display: none !important;
}
.membership-item.v3.panel:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
/* =====================================================
   BOOK NOW (WEBSITE): Make red alert text readable
===================================================== */

/* Website only */
body:not([class*="pwa"]) 
#sb_time_grid_weekly_container 
.alert.alert-danger {
  color: #ffffff !important;                 /* white text */
  background-color: rgba(255,255,255,0.15) !important; /* subtle contrast */
  border-color: rgba(255,255,255,0.35) !important;
}

/* Optional: make the text slightly stronger */
body:not([class*="pwa"]) 
#sb_time_grid_weekly_container 
.alert.alert-danger {
  font-weight: 600 !important;
}
/* =====================================================
   PWA / APP: SHOW ONLY Locations + Days of week
   Hide: Services + Parts of day (Morning/Afternoon/Evening)
===================================================== */

/* Hide Services filter (PWA) */
body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item:has(label[for*="Services"]),
body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item:has(label[for*="service"]) {
  display: none !important;
}

/* Hide Parts of day filter (PWA) */
body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item
.parts-of-day {
  display: none !important;
}

/* Hide Parts-of-day label if rendered separately */
body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item
label[for*="Part"] {
  display: none !important;
}

/* Cleanup: remove extra spacing from hidden filter rows */
body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item {
  margin-bottom: 0 !important;
}
/* WEBSITE ONLY: make help info readable */
body:not([class*="pwa"]) .help.help-info-block {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
}
/* WEBSITE ONLY: fix red danger alert readability */
body:not([class*="pwa"]) .alert.alert-danger {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #d9d9d9 !important;
}
.sb-class-desc {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4;
}

/* =========================================
   HOME – Contact Us Instagram row
   (convert share icon row → Instagram row)
========================================= */

/* Replace the share icon with Instagram icon */
#contacts li.item_soc-links .fa-share-alt::before {
  content: "\f16d" !important; /* Instagram */
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

/* Make the row use flexbox like other contact rows */
#contacts li.item_soc-links {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important; /* Between 8px and 12px */
  margin-bottom: 15px !important;
  cursor: pointer;
  position: relative;
}

/* Icon column */
#contacts li.item_soc-links .icon {
  flex: 0 0 auto !important;
}

/* Text container */
#contacts li.item_soc-links .links {
  flex: 1 !important;
}

/* Inject Instagram handle text - match font size of other contact text */
#contacts li.item_soc-links .links::before {
  content: "@bluespacearuba";
  color: #ffffff;
  white-space: nowrap;
  font-size: inherit !important;
}

/* Hide any default content in .links */
#contacts li.item_soc-links .links > * {
  display: none !important;
}

/* Hover effect */
#contacts li.item_soc-links:hover {
  opacity: 0.85;
}

/* Make entire row clickable */
#contacts li.item_soc-links::after {
  content: "";
  position: absolute;
  inset: 0;
}

#contacts li.item_soc-links a,
#contacts li.item_soc-links {
  text-decoration: none !important;
}

/* Hide the white square IG button */
#contacts li.item_soc-links .btn-bar__social-links,
#contacts li.item_soc-links .btn--action,
#contacts li.item_soc-links .btn--action .icon,
#contacts li.item_soc-links .icon--instagram {
  display: none !important;
}

/* More universal approach */
button.mdc-list-item[data-target*="provider"] {
  font-size: 0 !important;
  line-height: 0;
}

button.mdc-list-item[data-target*="provider"]::after {
  content: "Location details";
  font-size: 16px;
  line-height: normal;
  display: inline-block;
}

/* Change Service details to Class details */
button.mdc-list-item[data-target*="service"] {
  font-size: 0 !important;
  line-height: 0;
}

button.mdc-list-item[data-target*="service"]::after {
  content: "Class details";
  font-size: 16px;
  line-height: normal;
  display: inline-block;
}

/* ================================
   HIDE "You can use social media to continue" MESSAGE
================================ */

/* Hide the entire client-login-bar */
.client-login-bar {
  display: none !important;
}

/* Ensure Instagram links elsewhere remain visible */
a[href*="instagram.com"],
.icon--instagram {
  display: inline-block !important;
}

/* ================================
   SIGN IN/SIGN UP: Add white border boxes around each section
================================ */

/* Target the form containers directly */
#sb_sign_in_form,
#sb_sign_up_form {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  #sb_sign_in_form,
  #sb_sign_up_form {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
  }
}
/* ================================
   AVAILABLE SLOTS: Hide "/capacity" — show available number only
================================ */
span.slot--available-slot {
  display: inline-block !important;
  overflow: hidden !important;
  max-width: 9px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
/* Hide "Available spaces" column header */
#sb_time_grid_weekly_container .grid-weekly-header .grid-weekly-item.grid-weekly-available-slots {
  display: none !important;
}
/* PWA: remove min-width that was preventing clip */
body[class*="pwa"] .sb-timetable__block .sb-timetable__available-places,
body[class*="pwa"] .grid-weekly-item.grid-weekly-available-slots {
  min-width: 0 !important;
}

/* PWA: clip to show only the available number */
body[class*="pwa"] span.slot--available-slot {
  display: inline-block !important;
  overflow: hidden !important;
  max-width: 10px !important;
  white-space: nowrap !important;
}