:root{
  --sspa-radius: 14px;
}

.card, .btn, .form-control, .form-select {
  border-radius: var(--sspa-radius);
}

.card {
  border: 1px solid rgba(0,0,0,.06);
}

.btn.btn-dark {
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.sspa-ob-header .nav-link.active {
  background: rgba(0,0,0,.06);
}
.card {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}

.btn {
  border-radius: 12px;
}

.list-group-item {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.list-group-item:last-child {
  border-bottom: 0;
}
/* Side cards */
.sspa-sidecard {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Location info typography */
.sspa-locinfo {
  font-size: 14px;
  line-height: 1.35;
}
.sspa-locinfo a {
  text-decoration: none;
}
.sspa-locinfo a:hover {
  text-decoration: underline;
}

/* Map wrapper */
.sspa-mapwrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
#map {
  width: 100%;
  height: 180px; /* default desktop */
}

/* Business hours */
.sspa-hours {
  font-size: 14px;
}
.sspa-hours .day,
.sspa-hours .sspa-day { /* in case your existing markup uses different classes */
  font-weight: 600;
}
.sspa-hours .time,
.sspa-hours .sspa-time {
  color: rgba(0,0,0,.65);
}

/* Make side columns less visually loud than center */
.sspa-sidecard .card-body {
  padding: 16px;
}
.sspa-locinfo {
  font-size: 13.5px;
  line-height: 1.4;
}

.sspa-locinfo strong {
  font-weight: 600;
}

.sspa-locinfo a {
  color: #0d6efd;
  text-decoration: none;
}

.sspa-locinfo a:hover {
  text-decoration: underline;
}
#map {
  height: 140px; /* down from ~200 */
}
.sspa-locinfo .get-directions {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
}
.sspa-hours {
  font-size: 13.5px;
}

.sspa-hours .day {
  font-weight: 600;
  margin-top: 6px;
}

.sspa-hours .time {
  color: rgba(0,0,0,.6);
}
.sspa-hours > div {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}

.sspa-hours > div:last-child {
  border-bottom: 0;
}
.sspa-hours .closed {
  color: rgba(0,0,0,.45);
  font-style: italic;
}
header::before {
  height: 6px; /* or remove entirely */
}
/* Main booking panel */
.sspa-panel{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
}
.sspa-panel .card-body{
  padding: 22px;
}

/* Stepper */
.sspa-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 0 0 10px;
  padding: 0;
  list-style:none;
}
.sspa-steps .nav-link{
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  color: rgba(0,0,0,.65);
  background: rgba(0,0,0,.04);
}
.sspa-steps .nav-link.active{
  color: #fff;
  background: #111;
}
.sspa-steps .nav-link.disabled{
  opacity: .45;
  pointer-events: none;
}

/* Progress */
.sspa-progress{
  border-radius: 999px;
  background: rgba(0,0,0,.08);
}
.sspa-progress .progress-bar{
  border-radius: 999px;
  background: #111;
}
/* Make the booking area feel spacious */
#sspaObApp .card { border-radius: 16px; }
#sspaObApp .card-body { padding: 22px; }

#sspaObApp #obTitle { font-size: 30px; letter-spacing: -0.2px; }
#sspaObApp #obSubtitle { font-size: 15px; }

#sspaObApp .list-group-item {
  padding: 14px 14px;
  border-color: rgba(0,0,0,.06);
}

#sspaObApp .badge.bg-dark { padding: 8px 10px; border-radius: 999px; }
#sspaObApp .input-group { height: 46px; }
#sspaObApp .input-group .form-control { font-size: 16px; }

#sspaObApp .btn { border-radius: 12px; }
#sspaObApp .btn-sm { padding: 10px 12px; font-size: 14px; }
#sspaObApp .btn-lg { padding: 14px 16px; font-size: 16px; }

/* Give center panel more perceived width */
@media (min-width: 1200px) {
  #sspaObApp main .card { max-width: 860px; }
}

/* Stepper: less cramped */
#sspaObApp #obStepper .fw-semibold { font-size: 15px; }
#sspaObApp #obStepper .small { font-size: 13px; }

/* Prevent the left summary from feeling like a skinny receipt */
@media (min-width: 992px) {
  #sspaObApp aside .card-body { padding: 20px; }
}
/* when a category is selected, collapse category column on md+ */
@media (min-width: 768px){
  #obCategoryWrap.ob-cat-collapsed{
    width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
    overflow: hidden;
    padding-right: 0 !important;
  }
  #obCategoryWrap.ob-cat-collapsed .list-group,
  #obCategoryWrap.ob-cat-collapsed .fw-semibold:not(#obCategoryTitle){
    display: none !important;
  }
  #obCategoryHeader{
    display:flex !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    gap: 8px;
  }
  #obCategoryChange{
    writing-mode: horizontal-tb;
    transform: rotate(180deg);
  }
}
/* booking shell */
.sspa-ob-shell{ max-width: 1120px; margin: 0 auto; }
.sspa-ob-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sspa-ob-topbar .btn{ border-radius: 10px; }

/* plugin card */
.ob-card{ border-radius: 16px; }
.ob-card .progress{ border-radius: 999px; overflow:hidden; }
.ob-card .progress-bar{ border-radius: 999px; }

/* list groups feel modern */
#obCategoryList .list-group-item,
#obServiceList .list-group-item,
#obCartList .list-group-item{
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,.08);
}
#obCategoryList .list-group-item.active{
  border-color: rgba(0,0,0,.2);
}

/* avoid the “tiny island” look on large screens */
@media (min-width: 992px){
  .container-xxl{ padding-left: 24px; padding-right: 24px; }
}
.ob-weekstrip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
}
.ob-daychip{
  min-width: 92px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
  cursor:pointer;
  text-align:left;
}
.ob-daychip .d1{ font-weight:700; }
.ob-daychip .d2{ font-size:12px; opacity:.75; margin-top:2px; }
.ob-daychip.active{
  border-color: rgba(0,0,0,.30);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Step 1: 2-panel layout */
.ob-step1-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 992px){
  .ob-step1-grid{
    grid-template-columns: minmax(0, 1fr) 360px; /* left flexible, right fixed */
    align-items: start;
  }
}

/* Sticky cart */
.ob-cart-sticky{
  position: sticky;
  top: 18px;
}

/* Prevent long lists from blowing layout */
#obCategoryList, #obServiceList{
  max-height: 800px;
  overflow: auto;
  padding-right: 0px; /* keeps scrollbar off content */
}

/* Optional: nicer scrollbars in WebKit (safe) */
#obCategoryList::-webkit-scrollbar,
#obServiceList::-webkit-scrollbar{
  width: 10px;
}
#obCategoryList::-webkit-scrollbar-thumb,
#obServiceList::-webkit-scrollbar-thumb{
  border-radius: 10px;
}
@media (max-width: 768px){
  /* Make the whole booking area single column */
  #sspaOnlineBookingV5 .row{ --bs-gutter-x: .75rem; }
  
  #sspaOnlineBookingV5 #obServiceList [data-ob-add] {
	  width: auto !important;
  }

  /* Hide the 3 slot columns and show a single unified list */
  #sspaOnlineBookingV5 .ob-slots-3col { display:none !important; }
  #sspaOnlineBookingV5 #obSlotsUnified { display:block !important; }

  /* Sticky header for context */
  #sspaOnlineBookingV5 .ob-mobile-sticky{
    position: sticky; top: 0; z-index: 1000;
    background: #fff; padding: .5rem .25rem; border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* Sticky cart footer */
  #sspaOnlineBookingV5 .ob-mobile-cartbar{
    position: sticky; bottom: 0; z-index: 1000;
    background: #fff; padding: .75rem; border-top: 1px solid rgba(0,0,0,.08);
  }
}
/* Step 4+: main area full width */
#sspaOnlineBookingV5[data-ob-step="4"] #obMainCol,
#sspaOnlineBookingV5[data-ob-step="5"] #obMainCol { width: 100%; }

/* Optional: keep confirmation readable on large screens */
#sspaOnlineBookingV5[data-ob-step="4"] #obInfoHost .card,
#sspaOnlineBookingV5[data-ob-step="5"] #obInfoHost .card {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
/* keep the checkbox row clean */
.ob-terms-row{
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

/* nicer alignment */
.ob-terms-check{
  margin: 0;
}
.ob-terms-check .form-check-input{
  margin-top: 4px;
}

/* tiny inline view link */
.ob-view-terms-link{
	text-decoration: none;
}
.ob-view-terms-link:hover{ text-decoration: underline; }

/* the panel */
.ob-terms-panel{
  max-width: 620px;
  margin: 12px auto 0;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  overflow: hidden;
}

.ob-terms-panel-hd{
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #e6e6e6;
  background: #f5f5f5;
}
.ob-terms-panel-hd i{ margin-right: 6px; opacity: .8; }

.ob-terms-panel-bd{
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  max-height: 160px;     /* scroll if long */
  overflow: auto;
  white-space: pre-wrap; /* preserve line breaks */
}
/* --- Step 3 confirm button + helper line --- */
#obConfirmBookingBtn{
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 600;
  letter-spacing: .1px;
}

/* this is the line under the button */
#obClientMsg{
  margin-top: 10px !important;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(0,0,0,.55) !important;
}

/* when you actually set a message, it looks like a proper status chip */
#obClientMsg:not(:empty){
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
}
/* ===== Modern baseline ===== */
html, body { height: 100%; }

body.sspa-obook-body{
  background: #f6f7fb;           /* gentle app background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(0,0,0,.86);
}

/* tighten default text a bit */
body.sspa-obook-body,
body.sspa-obook-body .form-control,
body.sspa-obook-body .btn{
  letter-spacing: -0.1px;
}
/* ===== Modern baseline ===== */
html, body { height: 100%; }

body.sspa-obook-body{
  background: #f6f7fb;           /* gentle app background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(0,0,0,.86);
}

/* tighten default text a bit */
body.sspa-obook-body,
body.sspa-obook-body .form-control,
body.sspa-obook-body .btn{
  letter-spacing: -0.1px;
}
/* ===== Cards ===== */
.card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.card-body{
  padding: 22px;
}
@media (max-width: 768px){
  .card-body{ padding: 16px; }
}
/* ===== Buttons ===== */
.btn{
  font-weight: 600;
}

.btn.btn-dark{
  background: #111;
  border-color: #111;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.btn.btn-dark:hover{
  background: #0b0b0b;
  border-color: #0b0b0b;
}

.btn-outline-secondary{
  border-color: rgba(0,0,0,.16);
  color: rgba(0,0,0,.75);
}
.btn-outline-secondary:hover{
	color: rgba(0,0,0,.9);
  background: rgba(0,0,0,.04);
}
/* ===== Stepper polish ===== */
.sspa-steps{ gap: 8px; }

.sspa-steps .nav-link{
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
}

.sspa-steps .nav-link.active{
  background: #111;
  border-color: #111;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.sspa-progress{
  height: 10px;
  background: rgba(0,0,0,.06);
}
.sspa-progress .progress-bar{
  background: #111;
}
/* ===== List items feel clickable ===== */
#obCategoryList .list-group-item,
#obServiceList .list-group-item,
#obCartList .list-group-item{
  background: #fff;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

#obCategoryList .list-group-item:hover,
#obServiceList .list-group-item:hover{
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
/* ===== Topbar ===== */
.sspa-ob-topbar{
  margin-bottom: 14px;
}

.sspa-ob-topbar-left{
  display:flex;
  gap: 8px;
}
:root{
  --sspa-radius-lg: 18px;
  --sspa-radius: 14px;
  --sspa-radius-sm: 12px;
}

.card{ border-radius: var(--sspa-radius-lg) !important; }
.btn{ border-radius: var(--sspa-radius-sm) !important; }
.form-control, .form-select{ border-radius: var(--sspa-radius) !important; }
/* ===== Categories: selected state readable ===== */
#obCategoryList .list-group-item.active,
#obCategoryList .list-group-item.active:hover,
#obCategoryList .list-group-item.active:focus{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

#obCategoryList .list-group-item.active *{
  color: #fff !important; /* covers nested spans/icons */
}

/* optional: hover for non-active */
#obCategoryList .list-group-item:not(.active):hover{
  background: rgba(0,0,0,.03);
}
/* ===== Footer: smaller + cleaner ===== */
#footer{
  padding: 10px 0 14px;
}

#footer hr{
  margin: 10px auto;
  max-width: 860px;
  opacity: .15;
}

#footer p,
#footer small{
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0,0,0,.55);
  margin: 0;
}

#footer a{
  text-decoration: none;
}
#footer a:hover{
  text-decoration: underline;
}
#footer p, #footer small{ font-size: 11px; opacity: .9; }
/* ===== Category list: active must be readable ===== */
#obCategoryList .list-group-item{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 8px;
  background: #fff;
  color: rgba(0,0,0,.85);
}

#obCategoryList .list-group-item.active,
#obCategoryList .list-group-item.active:hover,
#obCategoryList .list-group-item.active:focus{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

/* covers nested <a>, <span>, icons inside list-group-item */
#obCategoryList .list-group-item.active a,
#obCategoryList .list-group-item.active span,
#obCategoryList .list-group-item.active i,
#obCategoryList .list-group-item.active small,
#obCategoryList .list-group-item.active strong{
  color: #fff !important;
  text-decoration: none;
}

/* hover affordance (non-active) */
#obCategoryList .list-group-item:not(.active):hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.14);
}
/* ===== Header / navbar polish ===== */
.sspa-ob-header .navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.sspa-ob-header .navbar-brand img{
  max-height: 46px !important;   /* 56 is a bit tall */
}

.sspa-ob-header .nav-link{
  border-radius: 999px;
  padding: 8px 12px !important;
  color: rgba(0,0,0,.72) !important;
  font-weight: 600;
}

.sspa-ob-header .nav-link.active{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.92) !important;
}
/* ===== Cart / summary panel ===== */
#obCartCol > .border.rounded-3.p-3.bg-light{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
}

#obCartCol .btn.btn-dark{
  border-radius: 14px;
  padding: 12px 14px;
}
/* ===== Footer smaller ===== */
#footer{
  padding: 8px 0 10px;
}

#footer hr{
  margin: 8px auto;
  max-width: 820px;
  opacity: .12;
}

#footer p,
#footer small{
  font-size: 11px;
  line-height: 1.2;
  color: rgba(0,0,0,.45);
  margin: 0;
}
@media (max-width: 590px){
  /* tighten the Step 1 header block */
  #sspaOnlineBookingV5 #obStepLabel{ font-size: 12px; margin-bottom: 2px; }
  #sspaOnlineBookingV5 #obStepName{ font-size: 26px; line-height: 1.1; margin-bottom: 8px; }

  /* progress slimmer */
  #sspaOnlineBookingV5 .progress{ height: 6px !important; }
}
@media (max-width: 590px){
  #obServiceList .list-group-item{ padding: 12px !important; }
  #obServiceList h5, #obServiceList .h5{ font-size: 16px !important; margin-bottom: 4px !important; }
  #obServiceList .text-muted{ font-size: 13px !important; }

  /* buttons inside service cards */
  #obServiceList .btn{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}
/* ===== Mobile categories: ONLY chip-style when NOT inside the dropdown ===== */
@media (max-width: 590px){

  /* If the list is living in the dropdown menu, force vertical list */
  #obCatMenu #obCategoryList{
    display: block !important;
    white-space: normal !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 55vh !important;
    padding: 8px !important;
  }

  #obCatMenu #obCategoryList .list-group-item{
    display: block !important;
    width: 100% !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 14px !important;
  }

  /* Optional: if the list is NOT in the dropdown (fallback), keep chip row */
  body:not(.ob-cats-in-menu) #obCategoryList{
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    padding-bottom: 6px;
    display: flex;
    gap: 10px;
  }
  body:not(.ob-cats-in-menu) #obCategoryList .list-group-item{
    flex: 0 0 auto;
    padding: 10px 14px !important;
    margin-bottom: 0 !important;
    border-radius: 999px !important;
  }
}
@media (max-width: 590px){
  /* Sticky selected services at bottom */
  #obCartCol{
    position: sticky;
    bottom: 0;
    background: #f6f7fb;
    padding-top: 10px;
  }

  /* Make the cart panel feel like a bottom sheet */
  #obCartCol > .border.rounded-3.p-3.bg-light{
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.10);
  }
}
@media (max-width: 590px){
  #sspaOnlineBookingV5 #obCatsCol{ display: none !important; }
}
@media (max-width: 590px){
  #sspaOnlineBookingV5 .card-body{ padding: 14px !important; }

  /* reduce spacing under progress + search */
  #sspaOnlineBookingV5 .progress{ margin-bottom: 10px !important; }
}
/* Mobile: remove Categories column entirely (real ID is obCatsCol) */
@media (max-width: 590px){
  #sspaOnlineBookingV5 #obCatsCol{
    display: none !important;
  }

  /* let Services take full width */
  #sspaOnlineBookingV5 #obSvcsCol{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 590px){
  /* Make cart feel like a bottom sheet */
  #sspaOnlineBookingV5 #obCartCol{
    position: sticky;
    bottom: 0;
    padding: 10px 0 0 !important;
    background: linear-gradient(to top, #f6f7fb 70%, rgba(246,247,251,0));
  }

  /* Compact padding */
  #sspaOnlineBookingV5 #obCartCol > .border.rounded-3.p-3.bg-light{
    padding: 12px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* Reduce extra text on mobile */
  #sspaOnlineBookingV5 #obCartEmpty,
  #sspaOnlineBookingV5 #obCartCol .small.text-muted.mt-2{
    display: none !important;
  }

  /* Keep Continue always visible and thumb-friendly */
  #sspaOnlineBookingV5 #obContinueBtn{
    margin-top: 10px !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }
}
/* ===== Mobile cart: collapsible bottom bar ===== */
@media (max-width: 590px){
  #obCartCol{
    position: sticky;
    bottom: 0;
    padding: 10px 0 0 !important;
    background: linear-gradient(to top, #f6f7fb 70%, rgba(246,247,251,0));
  }

  #obCartCol > .border.rounded-3.p-3.bg-light{
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.10);
  }

  /* Make the cart header feel tappable */
  #obCartCol .fw-semibold{
    cursor: pointer;
  }

  /* Collapsed state */
  #obCartCol.ob-cart-collapsed #obCartList,
  #obCartCol.ob-cart-collapsed #obCartEmpty{
    display: none !important;
  }

  /* tighten spacing when collapsed */
  #obCartCol.ob-cart-collapsed hr{
    margin: 10px 0 !important;
  }
}
/* Navbar: smaller, more "website" */
.sspa-ob-header .navbar { padding-top: 8px; padding-bottom: 8px; }

.sspa-ob-header .navbar-brand img{
  max-height: 40px !important; /* down from 46/56 */
}

.sspa-ob-header .nav-link{
  font-size: 14px !important;
  padding: 6px 10px !important;
  line-height: 1.1;
}

.sspa-ob-header .navbar-nav .nav-item{ margin-right: 4px; }

/* Mobile a touch smaller too */
@media (max-width: 590px){
  .sspa-ob-header .nav-link{ font-size: 13px !important; }
}
.sspa-ob-header .nav-link{ border-radius: 12px; }
.sspa-ob-header .nav-link.active{ background: rgba(0,0,0,.04); }

/* Business hours (modern rows) */
.sspa-hourslist{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sspa-hours-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff;
}

.sspa-hours-row.is-today{
  border-color: rgba(13,110,253,.25); /* bootstrap primary-ish */
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.sspa-hours-day{
  font-weight:600;
  color:#111;
}

.sspa-hours-val{
  text-align:right;
  font-weight:600;
}

.sspa-hours-time{
  font-weight:600;
}

.sspa-hours-badge-closed{
  font-weight:600;
  letter-spacing:.2px;
}
/* Mobile Biz Card */
.sspa-mbiz .card-body { border-radius: 14px; }
.sspa-mbiz-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.sspa-mbiz-sub { font-size: 13px; color: #6c757d; line-height: 1.2; }
.sspa-mbiz-actions { display:flex; align-items:center; gap:8px; }
.sspa-mbiz-actions .btn { border-radius: 999px; padding: 6px 10px; }
.sspa-mbiz-today { font-size: 12px; color:#6c757d; white-space:nowrap; }
.sspa-mbiz-more { line-height: 1.35; }
.sspa-mbiz-toggle { border-radius: 999px; white-space: nowrap; }
.sspa-mbiz-detail { padding-top: 6px; }
.sspa-mbiz-detail .text-muted.small { font-size: 12px; }
.sspa-mbiz-detail div { line-height: 1.3; }
.sspa-loc-addr { color:#5f6368; line-height:1.35; }

.sspa-loc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.sspa-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#f3f5f7;
  color:#111;
  text-decoration:none;
  font-weight:600;
}

.sspa-pill:hover{ background:#eef1f4; text-decoration:none; color:#111; }

.sspa-pill i{ font-size:18px; line-height:1; }

.sspa-pill-icon{
  width:48px;
  justify-content:center;
  padding-left:0;
  padding-right:0;
}
.sspa-locinfo a {
	color: #000000;
}
.sspa-locinfo a:hover {
	text-decoration: none;
}
/* ===== Step 1 Search (minimal) ===== */
#obServicesToolbar.ob-search{
  position: relative;
  display: block;
}

/* input */
#obServicesToolbar .ob-search-input{
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  padding-left: 44px;     /* room for search icon */
  padding-right: 44px;    /* room for clear button */
  font-size: 15px;
}

#obServicesToolbar .ob-search-input:focus{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
  outline: none;
}

/* left icon */
#obServicesToolbar .ob-search-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
}

/* small clear button */
#obServicesToolbar .ob-search-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

#obServicesToolbar .ob-search-clear i{
  font-size: 14px;
  opacity: .75;
}

#obServicesToolbar .ob-search-clear:hover{
  background: rgba(0,0,0,.07);
}

/* optional: make it a touch smaller on mobile */
@media (max-width: 590px){
  #obServicesToolbar .ob-search-input{ height: 40px; font-size: 14px; }
  #obServicesToolbar .ob-search-icon{ left: 14px; }
  #obServicesToolbar .ob-search-clear{ width: 28px; height: 28px; right: 7px; }
}
/* ===== Step 3: Optional details compact + no "(optional)" noise ===== */

/* Make the "Add details" toggle look like a small chip */
#obOptionalToggle,
#obOptionalToggle.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.80);
  box-shadow: none !important;
}
#obOptionalToggle:hover{
  background: rgba(0,0,0,.05);
}

/* Optional block container: less “big grey card” */
#obOptionalDetails .border.rounded-3.p-3.bg-light{
  background: rgba(0,0,0,.02) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

/* Reduce vertical spacing inside the optional block */
#obOptionalDetails .row.g-3{
  --bs-gutter-y: .65rem;
  --bs-gutter-x: .75rem;
}

/* Labels smaller + tighter */
#obOptionalDetails .form-label{
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,.70);
}

/* Inputs slightly shorter */
#obOptionalDetails .form-control{
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
}

/* Hide "(optional)" text even if it remains in your label string */
#obOptionalDetails .form-label{
  position: relative;
}
#obOptionalDetails .form-label{
  /* if the literal word optional is present, we’ll hide it by not relying on it */
}
/* Best-effort: if you keep "(optional)" in the label, hide it via a span wrapper.
   If you don't wrap it, skip this and just remove the text in HTML. */

/* Make optional layout more compact (2 columns on md+, 1 col on mobile) */
@media (min-width: 768px){
  #obOptionalDetails .col-md-4{ flex: 0 0 33.333%; max-width: 33.333%; }
  #obOptionalDetails .col-md-8{ flex: 0 0 66.666%; max-width: 66.666%; }

  /* tighten the small fields row */
  #obOptionalDetails .col-md-3{ flex: 0 0 25%; max-width: 25%; }
  #obOptionalDetails .col-md-6{ flex: 0 0 50%; max-width: 50%; }
}

/* Optional: make the entire optional block feel “secondary” */
#obOptionalDetails{
  margin-top: 10px !important;
}

/* Tiny language picker (navbar) */
.sspa-langbar{ display:flex; align-items:center; }

.sspa-lang-dd{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#9aa3b2;
  border:1px solid #e6eaf0;
  border-radius:999px;
  padding:3px 10px;
  background:#fff;
  line-height:1;
}

.sspa-lang-dd i{ opacity:.75; }

.sspa-lang-dd select{
  border:0;
  background:transparent;
  font-size:11px;
  color:#6b7280;
  outline:none;
  cursor:pointer;
  padding:0;
}

.ob-cat-mobile{ display:none; }

@media (max-width: 590px){
  .ob-cat-mobile{ display:block; margin: 10px 0 12px; }

  .ob-cat-toggle{
    width: 100%;
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight: 600;
  }

	.ob-cat-mobile{ position: relative; } /* anchor */
	.ob-cat-menu{ display:none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1200; }
  .ob-cat-menu.is-open{ display:block; }

  .ob-cat-menu-inner{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(0,0,0,.12);
    overflow: hidden;
  }

  #obCatMenu #obCategoryList{
    max-height: 55vh;
    overflow:auto;
    padding: 8px;
  }

  .ob-cat-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.20);
    z-index: 1150;
  }
}

/* Native date input helper (hidden but usable) */
.ob-datepicker-native{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Date picker icon wrapper */
.ob-datepick-wrap{
  position: relative;
  display: inline-flex;
}

/* Invisible input sitting on top of the icon button */
.ob-datepick-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;          /* invisible */
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Step 1: Mobile - keep "Add" button small + anchored (no full-width bars) */
@media (max-width: 590px){

  /* each service card becomes an anchor */
  #obServiceList .list-group-item{
    position: relative;
    padding-right: 96px !important; /* room for the Add chip */
  }

  /* target the button inside each service row only */
  #obServiceList .list-group-item .btn{
    position: absolute;
    top: 12px;
    right: 12px;

    width: auto !important;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    line-height: 1.1 !important;

    box-shadow: 0 6px 18px rgba(0,0,0,.10);
  }

  /* if bootstrap utilities are forcing full width, kill it */
  #obServiceList .list-group-item .btn.w-100{
    width: auto !important;
  }

  /* prevent title overlap under the button */
  #obServiceList .list-group-item h5,
  #obServiceList .list-group-item .h5{
    margin-right: 0 !important;
  }
}
/* compact staff filter in Step 1 toolbar */
#obServicesToolbar { position: relative; }

#obStaffFilterWrap.ob-staff-filter-wrap{
  float: right;                 /* BS3 */
  display: inline-block;
  margin: 0 0 8px 10px;         /* small bottom space, little left gap */
  white-space: nowrap;
}

#obStaffFilterWrap .ob-staff-filter-label{
  display: inline-block;
  margin: 0 6px 0 0;
  font-size: 12px;
  color: #6b7280;
  vertical-align: middle;
}

#obStaffFilterWrap .ob-staff-filter{
  display: inline-block;
  width: 180px;                /* keep it compact */
  vertical-align: middle;
}

/* on small screens, let it stack nicely */
@media (max-width: 590px){
  #obStaffFilterWrap.ob-staff-filter-wrap{
    float: none;
    display: block;
    margin: 0 0 8px 0;
  }
  #obStaffFilterWrap .ob-staff-filter{
    width: 100%;
  }
  #obStaffFilterWrap .ob-staff-filter-label{
    display: none;              /* optional: hide label on mobile */
  }
}
/* Discrete staff picker */
#obStaffPickerWrap.ob-staff-dd{
  float: right;
  margin: 0 0 8px 10px;
  position: relative;
}

#obStaffPickerBtn.ob-staff-btn{
  padding: 4px 8px;
  border-radius: 16px;
}

.ob-staff-ava{
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
  background: #f3f4f6;
  text-align: center;
  line-height: 22px;
}

.ob-staff-ava img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ob-staff-txt{
  vertical-align: middle;
  max-width: 140px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-staff-caret{
  margin-left: 6px;
  color: #6b7280;
}

.ob-staff-menu{
  position: absolute;
  right: 0;
  top: 34px;
  min-width: 240px;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  z-index: 9999;
}

.ob-staff-menu-head{
  padding: 10px 12px;
  font-size: 12px;
  color: #6b7280;
  border-bottom: 1px solid #f0f0f0;
}

.ob-staff-list{
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.ob-staff-list li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #111827;
  text-decoration: none;
}

.ob-staff-list li a:hover{
  background: #f7f7f7;
}

.ob-staff-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 590px){
  #obStaffPickerWrap.ob-staff-dd{
    float: none;
    margin: 0 0 8px 0;
  }
  .ob-staff-txt{ max-width: 100%; }
  .ob-staff-menu{ left: 0; right: 0; min-width: auto; }
}
.ob-staff-clear{
  padding: 0 4px;
  margin-left: 4px;
  color: #999;
  vertical-align: middle;
}
.ob-staff-clear:hover{ color:#333; text-decoration:none; }
.ob-staff-locked{ cursor: default; opacity: .95; }

#obStaffPickerWrap { position:relative; flex:0 0 auto; }
#obStaffPickerBtn.ob-staff-btn { border-radius:999px; }

/* === Step 1 toolbar layout === */
#obServicesToolbar{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* search field becomes a flex item */
#obServicesToolbar .ob-search-field{
  position: relative;
  flex: 1 1 auto;
}

/* input stays full-width inside field */
#obServicesToolbar .ob-search-input{
  width: 100%;
}

/* Make staff picker feel secondary */
#obStaffPickerBtn.ob-staff-btn{
  padding: 4px 10px;
  font-size: 13px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
}

#obStaffPickerBtn.ob-staff-btn:hover{
  background: rgba(0,0,0,.03);
}

.ob-staff-ava{
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.ob-staff-caret{
  font-size: 11px;
}
/* Mobile: toolbar stacks, but keep search internals aligned */
@media (max-width: 590px){
  #obServicesToolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  #obStaffPickerBtn.ob-staff-btn{
    padding: 4px 10px;
    font-size: 13px;
  }

  /* Search field takes full row */
  #obServicesToolbar .ob-search-field{
    flex: 0 0 100%;
    width: 100%;
  }

  /* Staff picker becomes second row, left aligned */
  #obStaffPickerWrap.ob-staff-dd{
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  /* Ensure dropdown positions relative to pill, not the whole toolbar */
  #obStaffPickerWrap.ob-staff-dd{ position: relative; }
}
/* staff mount under search */
#obStaffPickerMount{
  margin: 0 0 0 0;
}

/* optional: align staff pill to the right under search (like your screenshot) */
#obStaffPickerMount{
  display: flex;
  justify-content: flex-end;
}

/* Keep sticky cart above page content, but BELOW any modal/backdrop */
#sspaOnlineBookingV5 #obCartCol{
  z-index: 1040 !important; /* bootstrap backdrop is 1050 */
}

/* If you have a sticky header too, keep it below modals as well */
#sspaOnlineBookingV5 .ob-mobile-sticky{
  z-index: 1040 !important;
}
#sspaPayMsg {
	text-align: center;
}

#obGiftCertToggle, #obGiftCertToggle.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	background: rgba(0,0,0,.03);
	border: 1px solid rgba(0,0,0,.10);
	color: rgba(0,0,0,.80);
	box-shadow: none !important;
}
/* =========================================================
   Categories UI breakpoint fix
   - Use dropdown for <= 991px (tablet portrait included)
   - Use sidebar for >= 992px
   ========================================================= */

/* default: desktop sidebar ON, mobile dropdown OFF */
#obCatsMobile { display: none; }

/* <= 991px: show dropdown, hide sidebar */
@media (max-width: 991.98px){
  #obCatsMobile { display: block; margin: 10px 0 12px; }

  /* hide desktop categories column */
  #sspaOnlineBookingV5 #obCatsCol { display: none !important; }

  /* services take full width */
  #sspaOnlineBookingV5 #obSvcsCol{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* dropdown positioning + style (works for tablet too) */
  #obCatsMobile{ position: relative; }

  #obCatsMobile .ob-cat-toggle{
    width: 100%;
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight: 600;
  }

  #obCatsMobile .ob-cat-menu{
    display:none;
    position:absolute;
    left:0; right:0;
    top: calc(100% + 8px);
    z-index: 1200;
  }
  #obCatsMobile .ob-cat-menu.is-open{ display:block; }

  #obCatsMobile .ob-cat-menu-inner{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(0,0,0,.12);
    overflow: hidden;
  }

  /* IMPORTANT: your mobile list id is obCategoryListMobile (not obCategoryList) */
  #obCatsMobile #obCategoryListMobile{
    max-height: 55vh;
    overflow:auto;
    padding: 8px;
  }

  #obCatsMobile #obCategoryListMobile .list-group-item{
    display:block;
    width:100%;
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.08);
    background:#fff;
  }

  #obCatBackdrop{
    display:none; /* JS can toggle to block */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.20);
    z-index: 1150;
  }
  #obCatBackdrop.is-open{ display:block; }
}

/* >= 992px: ensure sidebar is visible (in case older rules hid it) */
@media (min-width: 992px){
  #sspaOnlineBookingV5 #obCatsCol{ display: block !important; }
}
/* default */
.ob-cat-mobile { display:none; }
#obCatMenu { display:none; }
#obCatBackdrop { display:none; }

/* <= tablet */
@media (max-width: 991.98px){
  .ob-cat-mobile{ display:block; margin:10px 0 12px; }

  #obCatMenu.is-open{ display:block; }
  #obCatBackdrop.is-open{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.20);
    z-index:1150;
  }

  /* hide desktop column */
  #sspaOnlineBookingV5 #obCatsCol{ display:none !important; }
  #sspaOnlineBookingV5 #obSvcsCol{ width:100% !important; flex:0 0 100% !important; max-width:100% !important; }

  /* IMPORTANT: you are moving #obCategoryList, so style it inside the menu */
  #obCatMenu #obCategoryList{
    display:block !important;
    max-height:55vh;
    overflow:auto;
    padding:8px;
  }
}

/* >= desktop */
@media (min-width: 992px){
  .ob-cat-mobile{ display:none !important; }
  #sspaOnlineBookingV5 #obCatsCol{ display:block !important; }
}
/* =========================================================
   Step 1 services: compact rows on mobile + tablet (< 992px)
   ========================================================= */
@media (max-width: 992px){

  /* tighter card padding */
  #obServiceList .list-group-item{
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    border-radius: 12px;
  }

  /* tighten the top row spacing */
  #obServiceList .ob-svc-top{
    gap: 8px !important;
  }

  /* title: smaller + tighter line height */
  #obServiceList .ob-svc-title{
    font-size: 15px;
    line-height: 1.2;
  }

  /* notes: reduce top margin + font size */
  #obServiceList .ob-svc-notes{
    margin-top: 6px !important;
    font-size: 12.5px;
    line-height: 1.25;
  }

  /* meta line: your renderer uses .text-muted.small.mt-2 without a class */
  #obServiceList .text-muted.small.mt-2{
    margin-top: 6px !important;
    font-size: 12.5px;
    line-height: 1.2;
  }

  /* add button: smaller and shorter */
  #obServiceList .ob-svc-btn.btn-sm{
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 12px;
  }
  /* Give the page room so the bottom bar doesn't cover last service row */
  #sspaOnlineBookingV5{
    padding-bottom: 140px; /* adjust if your cart bar is taller */
    width:100%;
  }

  /* Bottom bar cart */
  #sspaOnlineBookingV5 #obCartCol{
    position: fixed !important;   /* sticky can fail in embeds; fixed is reliable */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040 !important;
    padding: 10px 12px 12px !important;
    background: linear-gradient(to top, #f6f7fb 70%, rgba(246,247,251,0));
  }

  /* Make it feel like a bottom sheet */
  #sspaOnlineBookingV5 #obCartCol > .border.rounded-3.p-3.bg-light{
    padding: 12px !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.10);
  }
}

/* ===== Cart collapse (universal) ===== */
#obCartCol.ob-cart-collapsed #obCartList,
#obCartCol.ob-cart-collapsed #obCartEmpty,
#obCartCol.ob-cart-collapsed .list-group{
  display: none !important;
}
#obCartCol .fw-semibold{
  cursor: pointer;
  user-select: none;
}
/* =========================================================
   Step 1: Services list – tighter rows (all sizes)
   ========================================================= */
#obServiceList .ob-svc-item{
  padding: 12px 14px !important;     /* down from your 14/14+ combos */
  margin-bottom: 6px !important;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

#obServiceList .ob-svc-top{
  gap: 10px;
}

/* Title: slightly smaller + tighter line height */
#obServiceList .ob-svc-title{
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.15px;
}

/* Notes: smaller + less margin */
#obServiceList .ob-svc-notes{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.25;
  opacity: .9;
}

/* Meta line: smaller + less margin */
#obServiceList .ob-svc-meta{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.2;
  opacity: .85;
}

/* Tiny dot spacing */
#obServiceList .ob-dot{
  opacity: .55;
}

/* Add button: a bit smaller/shorter */
#obServiceList .ob-svc-btn.btn-sm{
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 14px !important;
  line-height: 1.1;
}

/* Make the row feel less "tall" on mobile/tablet */
@media (max-width: 992px){
  #obServiceList .ob-svc-item{
    padding: 10px 12px !important;
  }
  #obServiceList .ob-svc-title{
    font-size: 15px;
  }
  #obServiceList .ob-svc-btn.btn-sm{
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* =========================================================
   Mobile cart: true 1-row collapsed bar
   ========================================================= */
@media (max-width: 992px){

  /* keep your fixed bottom-sheet behavior */
  #sspaOnlineBookingV5{
    padding-bottom: 120px; /* room for bar */
  }

  #sspaOnlineBookingV5 #obCartCol{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1040 !important;
    padding: 10px 12px 12px !important;
    background: linear-gradient(to top, #f6f7fb 70%, rgba(246,247,251,0));
  }

  #sspaOnlineBookingV5 #obCartCol > .border.rounded-3.p-3.bg-light{
    padding: 10px 12px !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.10);
  }

  /* Make the header row the “bar” */
  #sspaOnlineBookingV5 #obCartCol .fw-semibold{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
  }

  /* Hide the divider line under title when collapsed */
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed hr{
    display: none !important;
  }

  /* Collapsed: hide everything except header + Continue */
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartList,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartEmpty,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .list-group,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .small.text-muted.mt-2{
    display: none !important;
  }

  /* Collapsed: hide the “Total time / Estimated total” rows */
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .ob-cart-totals,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .ob-cart-totalrow{
    display: none !important;
  }

  /* Continue becomes compact in collapsed mode */
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obContinueBtn{
    margin-top: 8px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  /* OPTIONAL: make expanded view still reasonable */
  #sspaOnlineBookingV5 #obCartCol:not(.ob-cart-collapsed) #obContinueBtn{
    padding: 14px 14px !important;
    border-radius: 16px !important;
  }
}

/* Mobile: show time buckets in 3 columns */
@media (max-width: 590px) {
  .ob-slots-grid {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .75rem;
  }

  .ob-slots-grid > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  /* Optional: hide headings to save vertical space */
  .ob-slots-grid .fw-semibold {
    display: none;
  }

  /* Buttons: tighter */
  .ob-slots-grid .btn {
    padding: .6rem .5rem;
    font-size: 14px;
    white-space: nowrap;
  }
  
  .ob-slots-grid .fw-semibold {
    display: block;
    font-size: 12px;
    text-align: center;
    margin-bottom: .25rem !important;
    opacity: .8;
  }
}
.ob-svc-item[role="button"] { cursor: pointer; }
.ob-svc-item[aria-disabled="true"] { cursor: default; opacity: 0.85; }
/* Extra-small buttons for mobile header */
.btn-xs{
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
}

/* Inline actions alignment */
.sspa-mbiz-actions-inline .btn{
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sspa-mbiz-title{ font-size: 14px; font-weight: 600; }
.sspa-mbiz-sub{ font-size: 12px; opacity: .75; }
.sspa-mbiz-today{ font-size: 11px; white-space: nowrap; }

/* ===== Compact Category Selector (mobile/tablet) ===== */
@media (max-width: 991.98px){

  /* tighten the wrapper spacing */
  .ob-cat-mobile{
    margin: 6px 0 10px !important;
  }

  /* the button itself (your toggle) */
  #obCatToggleBtn.ob-cat-toggle{
    padding: 7px 12px !important;     /* ↓ height */
    min-height: 36px !important;      /* enforce compact */
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* hide the "Category:" label to save vertical/visual bulk */
  #obCatToggleBtn .ob-cat-toggle-label{
    display: none !important;
  }

  /* make the selected value the main thing */
  #obCatToggleBtn .ob-cat-toggle-value{
    font-weight: 600;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* smaller caret */
  #obCatToggleBtn .ob-cat-toggle-caret{
    font-size: 12px !important;
    opacity: .7;
    margin-left: 10px;
  }

  /* optional: reduce menu offset so it feels tighter */
  .ob-cat-menu{
    top: calc(100% + 6px) !important;
  }

  /* optional: slightly tighter menu padding */
  #obCatMenu #obCategoryList{
    padding: 6px !important;
  }
}

/* Row wrapper */
.ob-top-filters{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

/* Default: categories take full width */
.ob-top-filters #obCatsMobile{
  flex:1 1 auto;
  min-width:0;
}

/* Staff mount: no extra width unless used */
.ob-top-filters #obStaffPickerMount{
  flex:0 0 auto;
    margin-left:auto; 
}

/* Only when staff picker is actually rendered */
.ob-top-filters.has-staff #obStaffPickerMount{
  display:block;
}
.ob-top-filters:not(.has-staff) #obStaffPickerMount{
  display:none;
}

/* Make both controls match height + look compact */
.ob-cat-toggle,
.ob-staff-btn{
  height:38px;
  padding:6px 12px;
  border-radius:999px;
  line-height:24px;
}

/* Force consistent height on mobile */
@media (max-width: 991.98px){
  .ob-staff-btn,
  #obStaffPickerBtn.ob-staff-btn{
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 6px 10px !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  /* Keep avatar compact */
  .ob-staff-ava{
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
  }
  
  /* Text doesn't add height */
  .ob-staff-txt{
    line-height: 1.1 !important;
    font-size: 14px !important;
  }
}

/* Category button should fill available space nicely */
#obCatsMobile .ob-cat-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Keep staff pill from getting too wide */
.ob-top-filters.has-staff #obStaffPickerWrap{
  white-space:nowrap;
}
.ob-top-filters.has-staff .ob-staff-btn{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Optional: on very small screens allow wrapping */
@media (max-width: 360px){
  .ob-top-filters{
    flex-wrap:wrap;
  }
  .ob-top-filters.has-staff #obStaffPickerMount{
    width:100%;
  }
  .ob-top-filters.has-staff #obStaffPickerBtn{
    width:100%;
  }
}
/* Full overlay */
.ob-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,.85);
  display: none;
}

/* Center card */
.ob-loader-card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  max-width: calc(100% - 40px);
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Simple spinner (no BS dependency) */
.ob-spinner{
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  animation: obspin .8s linear infinite;
}

@keyframes obspin { to { transform: rotate(360deg); } }

.ob-loader-title{
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.ob-loader-sub{
  font-size: 12px;
  color: #666;
}
/* ================================
   MOBILE BIZ HEADER – COMPACT
================================== */
/* ==========================================
   Mobile business header (mbiz) – extra compact
   Put this at the VERY END of your CSS
========================================== */
@media (max-width: 991.98px){

  /* kill card-body padding bloat */
  .sspa-mbiz .card-body{
    padding: 6px 10px !important;
  }

  /* title smaller than your current 14 + tighter */
  #mbiz_title.sspa-mbiz-title{
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
    margin: 0 !important;
  }

  /* second row */
  #mbiz_addr.sspa-mbiz-sub{
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }
  #sspa_hours_today.sspa-mbiz-today{
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* reduce spacing between the two rows */
  .sspa-mbiz .mt-1{ margin-top: 2px !important; }

  /* buttons: enforce square-ish icon pills */
  .sspa-mbiz-actions-inline .btn{
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sspa-mbiz-actions-inline .btn i{
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* if phone button injects text, hide it (keeps icon) */
  #mbiz_call{
    font-size: 0 !important;
  }
  #mbiz_call i{
    font-size: 14px !important;
  }
}
/* Merchant welcome instructions under the step title */
#obWelcomeInstructions.ob-custom-msg{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.25;
  color: rgba(0,0,0,.58);
  max-width: 60ch;
}

#obWelcomeInstructions.ob-custom-msg{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.25;
  color: rgba(0,0,0,.58);
  max-width: 60ch;

  /* critical: make sure it WRAPS */
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  /* helps with long words/URLs */
  overflow-wrap: anywhere;
  word-break: break-word;
}

#obWelcomeInstructions .ob-custom-msg-more{
  font-size: 12px;
  margin-left: 6px;
  text-decoration: none;
}

#obWelcomeInstructions .ob-custom-msg-more:hover{ text-decoration: underline; }
/* Step header row: allow welcome to break onto its own line */
#sspaOnlineBookingV5 .d-flex.align-items-start.justify-content-between{
  align-items: flex-start;
}

/* Make the welcome message a full-width row inside the flex header */
#obWelcomeInstructions{
  flex: 0 0 100%;
  width: 100%;
  order: 3;                 /* after title + restart */
  margin-top: 6px;
}

/* Keep restart aligned to the top-right */
#obRestartBtn{
  order: 2;
  margin-left: auto;
}

/* Title block stays first */
#sspaOnlineBookingV5 #obStepLabel,
#sspaOnlineBookingV5 #obStepName{
  order: 1;
}
#obWelcomeInstructions.ob-custom-msg{
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

/* container */
#obWelcomeInstructions.ob-custom-msg{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0; /* critical for flex truncation */
  color: rgba(0,0,0,.58);
  font-size: 12.5px;
  line-height: 1.25;
  max-width: 60ch;
}

/* clamped text span */
#obWelcomeInstructions .ob-custom-msg-text{
  min-width: 0;
  flex: 1 1 auto;
}

#obWelcomeInstructions .ob-custom-msg-text.is-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* chevron button */
#obWelcomeInstructions .ob-custom-msg-toggle{
  flex: 0 0 auto;
  border: 0;
  background: rgba(0,0,0,.04);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.55);
  cursor: pointer;
  padding: 0;
}

#obWelcomeInstructions .ob-custom-msg-toggle:hover{
  background: rgba(0,0,0,.07);
  color: rgba(0,0,0,.85);
}
.gap-3 {
	gap: 0rem!important;
}

/* =========================================================
   iOS/Android: prevent auto-zoom on input focus
   (iOS Safari zooms when computed font-size < 16px)
   Put at END of CSS
   ========================================================= */
@media (max-width: 991.98px){

  /* All common form controls */
  input,
  select,
  textarea,
  .form-control{
    font-size: 16px !important;
  }

  /* Your Step 1 search specifically */
  #obServicesToolbar .ob-search-input{
    font-size: 16px !important;
  }
}

/* ===== Step 1 Search - Fix icon cutoff on small screens ===== */
@media (max-width: 991.98px){
  
  #obServicesToolbar .ob-search-input{
    padding-left: 40px !important;  /* Ensure room for icon */
    padding-right: 40px !important; /* Ensure room for clear button */
  }
  
  #obServicesToolbar .ob-search-icon{
    left: 12px; /* Adjust icon position */
  }
}

@media (max-width: 590px){
  #obServicesToolbar .ob-search-input{
    padding-left: 38px !important;
    padding-right: 38px !important;
  }
  
  #obServicesToolbar .ob-search-icon{
    left: 11px;
  }
}

/* =========================================
   STEP 1 – CATEGORY LIST CLEANUP
   Better balance for real-world long labels
========================================= */

@media (min-width: 992px){
  #sspaOnlineBookingV5 #obCatsCol{
    flex: 0 0 260px !important;
    max-width: 260px !important;
  }

  #sspaOnlineBookingV5 #obSvcsCol{
    flex: 1 1 auto !important;
    max-width: calc(100% - 260px) !important;
  }
}

#obCategoryList{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 800px;
  overflow: auto;
  padding-right: 2px;
}

#obCategoryList .list-group-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;

  padding: 12px 14px !important;
  margin-bottom: 0 !important;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px !important;
  background: #fff;
  color: rgba(0,0,0,.88);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#obCategoryList .list-group-item:not(.active):hover{
  background: #fafafa;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

#obCategoryList .list-group-item.active,
#obCategoryList .list-group-item.active:hover,
#obCategoryList .list-group-item.active:focus{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

#obCategoryList .list-group-item .ob-cat-name,
#obCategoryList .list-group-item .category-name,
#obCategoryList .list-group-item strong,
#obCategoryList .list-group-item .fw-semibold{
  grid-column: 1;
  min-width: 0;
  margin: 0;

  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.1px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#obCategoryList .list-group-item .ob-cat-count,
#obCategoryList .list-group-item .badge,
#obCategoryList .list-group-item .category-count{
  grid-column: 2;
  justify-self: end;
  align-self: center;

  min-width: 30px;
  height: 30px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.62);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

#obCategoryList .list-group-item.active .ob-cat-count,
#obCategoryList .list-group-item.active .badge,
#obCategoryList .list-group-item.active .category-count{
  background: rgba(255,255,255,.14);
  color: #fff;
}