/* ================================
   ICONS / SOCIAL / SHARE
================================ */

/* Hide the share icon (fa-share-alt) */
.fa-share-alt {
  display: none !important;
}

/* Force-hide any social auth buttons */
[class*="social"],
[class*="facebook"],
[class*="google"],
.sb-social,
.sb-social-login {
  display: none !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;
}

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

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

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

/* ================================
   MEMBERSHIPS / PACKAGES
================================ */

#sb_package_list_container .excerpt-info .content div:nth-child(2),
#sb_package_list_container .excerpt-info .content div:nth-child(3) {
  display: none !important;
}

.alert.alert-info {
  color: #5a9ca7;
}

a.link,
.alert.alert-info a {
  color: #5a9ca7;
  text-decoration: underline;
  transition: color .25s ease-in-out;
}

a.link:hover,
.alert.alert-info a:hover {
  opacity: .75;
}

#sb_membership_container .alert.alert-info {
  font-size: 24px;
  line-height: 32px;
}

.membership-service__list {
  display: none !important;
}

.membership-item > .tab {
  background-color: transparent !important;
}

.membership-item > .tab > .excerpt-info {
  border-radius: 8px;
  border: solid 2px #5a9ca7;
}

#sb_package_list_container .package-item {
  margin-bottom: 0 !important;
}

#sb_package_list_container .package-item .tab {
  background: transparent !important;
}

#sb_package_list_container .excerpt-info {
  border: 2px solid #7da4a2;
  border-radius: 8px;
}

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

/* ================================
   MOBILE (≤767px)
================================ */

@media (max-width: 767px) {

  body .custom-page .page-content table {
    width: 100% !important;
  }

  #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: 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: start !important;
    text-align: left !important;
  }

  #sb_time_grid_weekly_container
  .grid-weekly-header .grid-weekly-header-item:nth-child(2) {
    display: none !important;
  }

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

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

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

/* =========================
   WEBSITE (non-PWA): hide subscribe/promotions opt-in
   ========================= */
body:not([class*="pwa"]) .promotions-letter-flag { display: none !important; }


/* =========================
   PWA / APP: hide subscribe/promotions opt-in
   ========================= */
body[class*="pwa"] .input-container--checkbox:has(#sb_promotion_letters_flag) {
  display: none !important;
}
/* ================================
   TIME VIEW: show ONLY Location (Provider) filter
   Keep: .form-group.provider_id (sb_grid_provider_id)
   Hide: Services + Morning/Afternoon/Evening
================================ */

/* 1) Do NOT hide the whole first row anymore */
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row {
  display: flex !important;
}

/* 2) Hide every form-group in that row EXCEPT provider/location */
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row .form-group:not(.provider_id) {
  display: none !important;
}

/* 3) Hide the Morning / Afternoon / Evening buttons (if present) */
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row .btn-group,
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row .time-of-day,
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row .nav-pills {
  display: none !important;
}

/* 4) Make the remaining provider/location filter take the available width nicely */
#sb_timeview_container .grid-weekly-inner .tab-pd .top-inline-steps .row .form-group.provider_id {
  width: 100% !important;
  max-width: 520px; /* adjust if you want */
}

/* TIME VIEW: hide Morning / Afternoon / Evening buttons */
#sb_timeview_container .grid-weekly-inner .top-inline-steps .parts-of-day {
  display: none !important;
}
/* =========================================
   TIME VIEW — HARD LOCK DAYS-OF-WEEK HORIZONTAL
========================================= */

/* Ensure the container itself is horizontal */
#sb_timeview_container
.grid-weekly-inner
.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;
}

/* Force each day button to behave like a button, not a column */
#sb_timeview_container
.grid-weekly-inner
.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 */
#sb_timeview_container
.grid-weekly-inner
.top-inline-steps
.days-of-week > div,
#sb_timeview_container
.grid-weekly-inner
.top-inline-steps
.days-of-week > a {
  display: inline-flex !important;
}
/* =====================================
   TIME VIEW — FINAL CLEAN LAYOUT FIX
===================================== */

/* Stack rows vertically (override SB flex) */
#sb_timeview_container .top-inline-steps {
  display: block !important;
}

/* Kill Bootstrap columns inside filter rows */
#sb_timeview_container .top-inline-steps .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Days-of-week: centered, single horizontal row */
#sb_timeview_container .top-inline-steps .days-of-week {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  margin-bottom: 12px !important;
}

/* Location dropdown: centered under days */
#sb_timeview_container .top-inline-steps .form-group.provider_id {
  max-width: 320px !important;
  margin: 0 auto 12px auto !important;
}
/* =====================================
   TIME VIEW — LEFT ALIGN Locations + Days
===================================== */

/* Stack rows normally (no centering) */
#sb_timeview_container .top-inline-steps{
  display: block !important;
}

/* Remove any forced centering/padding */
#sb_timeview_container .top-inline-steps,
#sb_timeview_container .top-inline-steps .row{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Location filter: left aligned */
#sb_timeview_container .top-inline-steps .form-group.provider_id{
  margin-left: 0 !important;
  margin-right:
}
/* =========================================================
   MASTER OVERRIDE (place at VERY BOTTOM)
   Time View: show ONLY Location filter + Days-of-week
   Left-aligned; days never wrap; hide parts-of-day
========================================================= */

/* Undo the old "hide first row" */
#sb_timeview_container .grid-weekly-inner .tab-pd .row:first-child{
  display: flex !important;
}

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

/* Make each row full width and remove 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 other form groups 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_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: keep 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;
}

/* Location filter: left aligned */
#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): Header bar shows ONLY the Date
   Hide: Class Name + Available spaces + Location (and any other header items)
===================================================== */
@media (max-width: 767px) {

  /* Hide every header item except the Date item */
  #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;
  }

  /* Make the Date header take the full bar nicely */
  #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 + App/PWA)
===================================================== */

/* --- 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;     /* safe on small screens */
  line-height: 1.2 !important;
  min-width: 48px !important;     /* prevents flex collapse */
  text-align: center !important;
}

/* --- MOBILE APP / PWA (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;     /* app font needs 1px more */
  line-height: 1.1 !important;
  min-width: 56px !important;     /* stops 2 / 8 from stacking */
  text-align: right !important;
}