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

a[href*="/v2/client/openid/provider/google/"],
a[href*="/v2/client/openid/provider/facebook/"]{
  display: none !important;
}

.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
================================ */

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;
}

#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;
}

@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
========================= */

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

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

/* ================================
   TIME VIEW (DESKTOP + MOBILE)
================================ */

#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;
}

#sb_timeview_container .top-inline-steps {
  display: block !important;
  width: 100% !important;
}

#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;
}

#sb_timeview_container .top-inline-steps .row .form-group:not(.provider_id) {
  display: none !important;
}

#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;
}

#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;
}

#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;
}

#sb_timeview_container .top-inline-steps .days-of-week > div,
#sb_timeview_container .top-inline-steps .days-of-week > a {
  display: inline-flex !important;
}

#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)
================================ */

@media (max-width: 767px) {

  #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;
  }

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

  #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
================================ */

#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;
}

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

#sb_membership_container .item__connected-services,
#sb_membership_module_li .item__connected-services,
.membership-item .item__connected-services {
  display: none !important;
}

#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;
}

#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: Make red alert text readable
===================================================== */

body:not([class*="pwa"])
#sb_time_grid_weekly_container
.alert.alert-danger {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35) !important;
  font-weight: 600 !important;
}

/* =====================================================
   PWA: SHOW ONLY Locations + Days of week
===================================================== */

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;
}

body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item
.parts-of-day {
  display: none !important;
}

body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item
label[for*="Part"] {
  display: none !important;
}

body[class*="pwa"]
.grid-weekly__filter
.grid-weekly__filter-item {
  margin-bottom: 0 !important;
}

/* ================================
   WEBSITE ONLY: readability fixes
================================ */

body:not([class*="pwa"]) .help.help-info-block {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
}

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;
}

/* ================================
   BUTTON LABEL OVERRIDES
================================ */

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;
}

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"
================================ */

.client-login-bar {
  display: none !important;
}

/* ================================
   SIGN IN/SIGN UP: White border boxes
================================ */

#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;
}

@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"
================================ */

span.slot--available-slot {
  display: inline-block !important;
  overflow: hidden !important;
  max-width: 9px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#sb_time_grid_weekly_container .grid-weekly-header .grid-weekly-item.grid-weekly-available-slots {
  display: none !important;
}

body[class*="pwa"] .sb-timetable__block .sb-timetable__available-places,
body[class*="pwa"] .grid-weekly-item.grid-weekly-available-slots {
  min-width: 0 !important;
}

body[class*="pwa"] span.slot--available-slot {
  display: inline-block !important;
  overflow: hidden !important;
  max-width: 10px !important;
  white-space: nowrap !important;
}

/* =========================================
   HOME – Contact Us Instagram row
========================================= */

/* Hide the share icon and empty icon div */
#contacts li.item_soc-links .fa-share-alt,
#contacts li.item_soc-links div.icon {
  display: none !important;
}

/* Match sibling row layout */
#contacts li.item_soc-links {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 15px !important;
  padding: 0 !important;
}

/* Strip white box from the anchor, fix size and direction */
#contacts li.item_soc-links a.btn--action.ig {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Remove white box from icon span, match size to other icons */
#contacts li.item_soc-links span.icon--instagram {
  background: transparent !important;
  border-radius: 0 !important;
  width: 16px !important;
  height: 16px !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Make SVG white */
#contacts li.item_soc-links span.icon--instagram svg {
  width: 16px !important;
  height: 16px !important;
}

#contacts li.item_soc-links span.icon--instagram svg path {
  fill: #ffffff !important;
}

/* Show handle text */
#contacts li.item_soc-links a.btn--action.ig::after {
  content: "@bluespacearuba" !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  font-family: inherit !important;
  display: inline !important;
}

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