/*
    Battersea Power Wash — SimplyBook UNIFIED CSS (v5)
    Paste this ONE file into BOTH custom-CSS panels in SimplyBook:
      1. Website / booking site CSS  (covers /v2/ + /v2/#book on simplybook.me)
      2. Widget CSS                  (covers iframe embed on batterseapowerwash.com)

    Real selectors discovered via DevTools:
      body class:    --theme-minimal
      layout:        .sb-layout, .page--booking
      header:        #header.web
      hamburger:     button.nav-trigger.toggle-mnu (open: + .on)
      nav menu:      .nav-wrapper > #sb_menu > ul.nav > li.menu-item
      cart:          #sb_cart > .cart.sb-cart-btn > i.fa
      cart popup:    .full-info--cart.sb-cart-popup
      step nav:      nav#steps-nav > ul.clearfix > li.step_info_item.active
                    > a > .content > .title-small / .title-sub
      service card:  section > .container-fluid.column > .tab.tab-col.tab-with-popup
                    > .full-info > (h3 / p / .read-more / .bar)
      book button:   a.btn.book.custom (inside .bar)
      read-more:     span.read-more (data-target="#category…")
      "our time":    .col-xs-12 > .time
  */

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Sora:wght@500;600;700&display=swap');

  /* ════════════════════════════════════════════════════════
    1. THEME VARIABLES (override built-in colors)
    ════════════════════════════════════════════════════════ */
  body[class*="--theme-minimal"],
  body.\--theme-minimal,
  :root {
    --primary-color: #C9A66B !important;
    --main-color: #C9A66B !important;
    --btn-color: #C9A66B !important;
    --link-color: #C9A66B !important;
    --background: #080809 !important;
    --background-color: #080809 !important;
    --text-color: #f5f5f5 !important;
  }

  /* ════════════════════════════════════════════════════════
    2. GLOBAL SHELL (body, layout, typography)
    ════════════════════════════════════════════════════════ */
  html,
  body[class*="--theme-minimal"],
  .sb-layout,
  .page--booking,
  #content, #main {
    background: #080809 !important;
    color: #f5f5f5 !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, .title, .heading {
    font-family: 'Sora', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    color: #f5f5f5 !important;
    letter-spacing: 0.01em;
  }

  a, a:visited { color: #C9A66B !important; text-decoration: none !important; }
  a:hover      { color: #d9b886 !important; }

  /* ════════════════════════════════════════════════════════
    3. HEADER & HAMBURGER
    ════════════════════════════════════════════════════════ */
  #header.web,
  #header {
    background: rgba(8, 8, 9, 0.92) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(201, 166, 107, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* Hamburger button (closed and open states) — high specificity */
  html body button.nav-trigger,
  html body button.nav-trigger.toggle-mnu,
  html body button.nav-trigger.on,
  html body button.nav-trigger.toggle-mnu.on,
  button.nav-trigger.toggle-mnu,
  .nav-trigger.toggle-mnu,
  .nav-trigger.on {
    background: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    background-image: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    background-color: #C9A66B !important;
    border: none !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 6px 18px rgba(201, 166, 107, 0.35) !important;
    cursor: pointer !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease !important;
  }

  button.nav-trigger.toggle-mnu:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(201, 166, 107, 0.5) !important;
  }

  button.nav-trigger.toggle-mnu span,
  button.nav-trigger.toggle-mnu span::before,
  button.nav-trigger.toggle-mnu span::after {
    background: #080809 !important;
    background-color: #080809 !important;
    height: 2px !important;
    border-radius: 2px !important;
  }

  /* ════════════════════════════════════════════════════════
    4. NAV MENU (.nav-wrapper) — kills orange gradient
    ════════════════════════════════════════════════════════ */
  html body[class*="--theme-minimal"] .nav-wrapper,
  html body[class*="--theme-minimal"] div.nav-wrapper,
  html body[class*="--theme-minimal"] .nav-wrapper.clearfix,
  #header .nav-wrapper,
  #header div.nav-wrapper.clearfix,
  .nav-wrapper {
    background: #080809 !important;
    background-image: none !important;
    background-color: #080809 !important;
  }

  #sb_menu,
  #sb_menu_list_items_container,
  ul.nav.clearfix {
    background: #080809 !important;
    background-image: none !important;
    list-style: none !important;
  }

  li.menu-item {
    border-bottom: 1px solid rgba(201, 166, 107, 0.15) !important;
    background: transparent !important;
  }
  li.menu-item:last-child { border-bottom: none !important; }

  li.menu-item a,
  #sb_menu_list_items_container a,
  .nav-wrapper a {
    color: rgba(245, 245, 245, 0.7) !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.04em !important;
    text-transform: lowercase !important;
    padding: 16px 24px !important;
    display: block !important;
    background: transparent !important;
    transition: color 0.2s ease, background 0.2s ease !important;
  }

  li.menu-item a:hover,
  li.menu-item.active a,
  li.menu-item.current a {
    color: #C9A66B !important;
    background: rgba(201, 166, 107, 0.06) !important;
  }

  /* ════════════════════════════════════════════════════════
    5. CART (header icon + popup)
    ════════════════════════════════════════════════════════ */
  #sb_cart, #sb_cart .cart-container, .cart-header-module {
    background: transparent !important;
    background-image: none !important;
  }

  #sb_cart .cart.item-container.sb-cart-btn,
  .cart.sb-cart-btn {
    background: rgba(20, 20, 24, 0.85) !important;
    background-image: none !important;
    border: 1px solid rgba(201, 166, 107, 0.4) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #C9A66B !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
  }

  #sb_cart .cart.sb-cart-btn:hover {
    border-color: #C9A66B !important;
    background: rgba(201, 166, 107, 0.12) !important;
    color: #d9b886 !important;
  }

  #sb_cart i.fa, .sb-cart-btn i.fa, .cart i.fa {
    color: #C9A66B !important;
    font-size: 18px !important;
    opacity: 1 !important;
  }

  #sb_cart .badge,
  #sb_cart [class*="count"],
  .cart-container .badge,
  .sb-cart-btn .badge {
    background: #C9A66B !important;
    background-color: #C9A66B !important;
    background-image: none !important;
    color: #080809 !important;
    border: 2px solid #080809 !important;
    font-weight: 700 !important;
    font-family: 'Sora', sans-serif !important;
  }

  /* Cart popup — high specificity */
  html body[class*="--theme-minimal"] .full-info--cart,
  html body[class*="--theme-minimal"] .full-info--cart.sb-cart-popup,
  html body[class*="--theme-minimal"] .full-info.full-info--cart,
  html body[class*="--theme-minimal"] .sb-cart-popup,
  html body div.full-info--cart.sb-cart-popup,
  .full-info.full-info--cart,
  .full-info--cart.sb-cart-popup,
  .sb-cart-popup {
    background: rgba(20, 20, 24, 0.95) !important;
    background-image: none !important;
    background-color: rgba(20, 20, 24, 0.95) !important;
    border: 1px solid rgba(201, 166, 107, 0.3) !important;
    border-radius: 16px !important;
    color: #f5f5f5 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .full-info--cart h1, .full-info--cart h2, .full-info--cart h3,
  .sb-cart-popup h1, .sb-cart-popup h2, .sb-cart-popup h3,
  .full-info--cart .title {
    color: #f5f5f5 !important;
    font-family: 'Sora', sans-serif !important;
  }

  .full-info--cart p, .full-info--cart label,
  .sb-cart-popup p, .sb-cart-popup label,
  .full-info--cart span:not(.read-more):not(.badge),
  .sb-cart-popup span:not(.read-more):not(.badge) {
    color: rgba(245, 245, 245, 0.85) !important;
  }

  button.btn.btn--primary-outline.sb-cart-popup-close {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(201, 166, 107, 0.5) !important;
    color: #C9A66B !important;
    box-shadow: none !important;
  }

  button.btn.btn--primary-outline.sb-cart-popup-close:hover {
    background: rgba(201, 166, 107, 0.1) !important;
    border-color: #C9A66B !important;
    color: #d9b886 !important;
  }

  /* ════════════════════════════════════════════════════════
    6. STEP NAV (nav#steps-nav) — booking flow
    ════════════════════════════════════════════════════════ */
  nav#steps-nav, #steps-nav {
    background: #080809 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(201, 166, 107, 0.15) !important;
  }

  #steps-nav ul, #steps-nav ul.clearfix {
    background: transparent !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .step_info_item {
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
  }

  .step_info_item a {
    background: transparent !important;
    color: rgba(245, 245, 245, 0.45) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 14px 18px !important;
    transition: color 0.2s ease !important;
  }

  .step_info_item a:hover { color: #f5f5f5 !important; }

  .step_info_item .title-small {
    font-family: 'Sora', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em !important;
    color: inherit !important;
  }

  .step_info_item .title-sub {
    font-size: 0.78rem !important;
    color: rgba(245, 245, 245, 0.45) !important;
    font-family: 'Outfit', sans-serif !important;
  }

  .step_info_item.active a,
  .step_info_item.active .title-small {
    color: #C9A66B !important;
    font-weight: 600 !important;
  }

  .step_info_item.active {
    border-bottom-color: #C9A66B !important;
    position: relative;
  }

  .step_info_item.active::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 18px; right: 18px;
    height: 2px;
    background: #C9A66B;
    border-radius: 2px 2px 0 0;
  }

  /* ════════════════════════════════════════════════════════
    7. "OUR TIME" header row — has child <div><b>Our time</b>...</div>
    (scoped: only when .time has a > div child, not the hours grid)
    ════════════════════════════════════════════════════════ */
  .col-xs-12 > .time,
  .col-xs-12:has(> .time) {
    background: #080809 !important;
    background-image: none !important;
    color: rgba(245, 245, 245, 0.6) !important;
    padding: 10px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
  }
  .col-xs-12 > .time b       { color: rgba(245, 245, 245, 0.5) !important; font-weight: 500 !important; }
  .col-xs-12 > .time > div   { color: #C9A66B !important; font-weight: 600 !important; }

  /* (Working hours grid styled in section 14 below — `.overview`) */

  /* ════════════════════════════════════════════════════════
    8. SERVICE CARDS (.tab.tab-col.tab-with-popup)
    ════════════════════════════════════════════════════════ */
  .tab.tab-col.tab-with-popup,
  .tab-with-popup,
  .tab.tab-col {
    background: rgba(20, 20, 24, 0.7) !important;
    background-image: none !important;
    background-color: rgba(20, 20, 24, 0.7) !important;
    border: 1px solid rgba(201, 166, 107, 0.18) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    color: #f5f5f5 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  }

  .tab.tab-col.tab-with-popup:hover, .tab-with-popup:hover {
    border-color: #C9A66B !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(201, 166, 107, 0.18) !important;
  }

  /* Card body — was WHITE — but EXCLUDE cart popup which uses .full-info too */
  .full-info:not(.full-info--cart) {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    color: #f5f5f5 !important;
    padding: 18px 20px !important;
  }

  .full-info h1, .full-info h2, .full-info h3, .full-info h4, .full-info h5,
  .full-info .title, .tab .title, .tab h3, .tab h4 {
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    color: #f5f5f5 !important;
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
  }

  .full-info p, .full-info .description, .tab p {
    color: rgba(245, 245, 245, 0.7) !important;
    line-height: 1.55 !important;
  }

  .bar { background: transparent !important; background-image: none !important; }

  /* ════════════════════════════════════════════════════════
    9. READ-MORE — HIDDEN (modal is broken on SimplyBook)
       Show full description on the card instead.
    ════════════════════════════════════════════════════════ */
  span.read-more,
  .read-more,
  .read-more-fade,
  .fade-out,
  .text-fade {
    display: none !important;
  }

  /* Show full description on card — no truncation */
  .full-info p,
  .full-info .description,
  .tab p {
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
  }

  /* Kill the white fade gradient pseudos */
  .full-info::before,
  .full-info::after,
  .tab.tab-with-popup::before,
  .tab.tab-with-popup::after {
    display: none !important;
    content: none !important;
  }

  /* ════════════════════════════════════════════════════════
    10. BUTTONS (Book Now, Reserve, Save, etc)
    ════════════════════════════════════════════════════════ */
  a.btn, a.btn.book, a.btn.book.custom,
  .bar a.btn,
  .btn, .btn-primary, button.btn,
  .book-btn,
  input[type="submit"],
  #events input.reserve_time_btn,
  #eventForm #save_button {
    background: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    background-image: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    background-color: #C9A66B !important;
    color: #080809 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    box-shadow: 0 8px 22px rgba(201, 166, 107, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  }

  /* Force dark text on button children — every nesting level */
  a.btn,
  a.btn.book,
  a.btn.book.custom,
  .bar a.btn,
  .btn, .btn-primary, button.btn,
  .book-btn,
  a.btn *, a.btn.book *, a.btn.book.custom *,
  .bar a.btn *, .btn *, .btn-primary *, button.btn *,
  .btn span, .btn div, .btn em, .btn strong,
  a.btn span, a.btn div, a.btn em, a.btn strong,
  .bar a.btn span, .bar a.btn div {
    color: #080809 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #080809 !important;
  }

  a.btn:hover, a.btn.book:hover,
  .btn:hover, .btn-primary:hover, button.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 12px 32px rgba(201, 166, 107, 0.5) !important;
    color: #080809 !important;
  }

  /* Secondary outline buttons */
  .btn-default, .btn-secondary,
  input.select_another_btn,
  #events input.select_another_btn {
    background: transparent !important;
    background-image: none !important;
    color: #f5f5f5 !important;
    border: 1px solid rgba(201, 166, 107, 0.4) !important;
    border-radius: 999px !important;
    padding: 11px 24px !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: none !important;
  }
  .btn-default:hover, .btn-secondary:hover {
    border-color: #C9A66B !important;
    background: rgba(201, 166, 107, 0.08) !important;
    color: #d9b886 !important;
  }

  /* ════════════════════════════════════════════════════════
    11. CART BOOKING LIST / EXTRAS
    ════════════════════════════════════════════════════════ */
  #sb_multiple_booking_list,
  .full-info--cart_list,
  .full-info--cart_service-list {
    background: rgba(20, 20, 24, 0.5) !important;
    border: 1px solid rgba(201, 166, 107, 0.15) !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }

  #events .event_price, .event-price, .service-price, .price {
    display: inline-block !important;
    background: rgba(201, 166, 107, 0.12) !important;
    color: #C9A66B !important;
    border: 1px solid rgba(201, 166, 107, 0.35) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
  }

  /* ════════════════════════════════════════════════════════
    12. LEGACY EVENT LISTING + jQuery UI CALENDAR + TIMELINE
    ════════════════════════════════════════════════════════ */
  #events h3 { color: #f5f5f5 !important; font-family: 'Sora', sans-serif !important; }
  #events p.duration, #events div.duration {
    color: #C9A66B !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
  }
  #events p.description, #events div.description {
    color: rgba(245, 245, 245, 0.65) !important;
    line-height: 1.55 !important;
  }
  #events .selectedEvent {
    background: rgba(201, 166, 107, 0.08) !important;
    border-color: #C9A66B !important;
    box-shadow: 0 0 0 1px rgba(201, 166, 107, 0.4), 0 8px 24px rgba(201, 166, 107, 0.12) !important;
  }

  div.ui-widget-content {
    background: rgba(20, 20, 24, 0.85) !important;
    color: #f5f5f5 !important;
    border: 1px solid rgba(201, 166, 107, 0.2) !important;
    border-radius: 14px !important;
    font-family: 'Outfit', sans-serif !important;
  }
  div.ui-widget-header {
    background: rgba(201, 166, 107, 0.12) !important;
    color: #C9A66B !important;
    border: none !important;
    border-bottom: 1px solid rgba(201, 166, 107, 0.2) !important;
    font-family: 'Sora', sans-serif !important;
  }
  .ui-widget-content .ui-state-default {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #f5f5f5 !important;
    border-radius: 8px !important;
  }
  .ui-widget-content .ui-state-hover {
    background: rgba(201, 166, 107, 0.15) !important;
    border-color: rgba(201, 166, 107, 0.3) !important;
    color: #C9A66B !important;
  }
  .ui-widget-content .ui-state-active,
  .ui-widget-content .ui-state-highlight {
    background: #C9A66B !important;
    color: #080809 !important;
    border-color: #C9A66B !important;
  }

  #timeline-container table.timeline {
    border-collapse: separate !important;
    border-spacing: 4px !important;
    background: transparent !important;
  }
  .timeline td {
    border-radius: 8px !important;
    padding: 10px 6px !important;
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.2s ease !important;
  }
  .timeline td.not_worked_time { background: rgba(35, 35, 40, 0.4) !important; color: rgba(245, 245, 245, 0.25) !important; }
  .timeline td.free_time {
    background: rgba(20, 20, 24, 0.7) !important;
    border: 1px solid rgba(201, 166, 107, 0.2) !important;
    color: #f5f5f5 !important;
  }
  .timeline td.free_time:hover {
    background: rgba(201, 166, 107, 0.1) !important;
    border-color: #C9A66B !important;
    color: #C9A66B !important;
  }
  .timeline td.selected_time {
    background: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    color: #080809 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(201, 166, 107, 0.3) !important;
  }
  .timeline td.reserved_time {
    background: rgba(80, 30, 30, 0.4) !important;
    color: rgba(245, 245, 245, 0.4) !important;
    text-decoration: line-through;
  }

  /* ════════════════════════════════════════════════════════
    13. FORMS + EXTENSION DATA
    ════════════════════════════════════════════════════════ */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"],
  textarea, select,
  #eventForm input[type="text"], #eventForm input[type="email"],
  #eventForm input[type="tel"], #eventForm textarea, #eventForm select {
    background: rgba(20, 20, 24, 0.6) !important;
    border: 1px solid rgba(201, 166, 107, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #f5f5f5 !important;
    font-family: 'Outfit', sans-serif !important;
  }

  input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: #C9A66B !important;
    box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.15) !important;
  }

  #eventForm dd.extention_data {
    background: rgba(20, 20, 24, 0.5) !important;
    border: 1px solid rgba(201, 166, 107, 0.15) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-top: 12px !important;
  }
  dd.extention_data dl.zend_form dt {
    color: #C9A66B !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
  }
  dd.extention_data dl.zend_form dd label {
    color: rgba(245, 245, 245, 0.85) !important;
  }

  /* ════════════════════════════════════════════════════════
    14. BUSINESS HOURS + CARDS + LOADING
    ════════════════════════════════════════════════════════ */
  .card, .section, .review, .testimonial,
  .business-hours, .opening-hours {
    background: rgba(20, 20, 24, 0.6) !important;
    border: 1px solid rgba(201, 166, 107, 0.18) !important;
    border-radius: 16px !important;
    color: #f5f5f5 !important;
    padding: 20px 24px !important;
  }

  .business-hours strong, .business-hours b,
  .opening-hours strong, .business-hours .day-name {
    color: #C9A66B !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
  }

  /* Working hours overview — adaptive grid (no overlap) */
  .overview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    background: transparent !important;
  }

  .overview > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    padding: 14px 4px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Day-of-week label */
  .overview div.day,
  div.day {
    color: #C9A66B !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Time block — vertical stacked, "07:30" / "20:00" */
  .overview div.time,
  div.time:has(> span) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-align: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .overview div.time > span,
  div.time > span {
    color: #f5f5f5 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* Kill any pseudo-separator the theme might inject */
  .overview div.time::before,
  .overview div.time::after,
  .overview div.time > span::before,
  .overview div.time > span::after {
    display: none !important;
    content: none !important;
  }

  /* Mobile: 3-col grid */
  @media (max-width: 640px) {
    .overview {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  div#loading {
    background: rgba(8, 8, 9, 0.85) !important;
    color: #C9A66B !important;
  }

  /* ════════════════════════════════════════════════════════
    15. HIDE BROKEN UI ELEMENTS
    ════════════════════════════════════════════════════════ */
  /* "Show on map" button does nothing — hide it */
  .btn.map,
  .btn-with-image.map,
  div.btn.map.btn-with-image,
  div.btn.map.btn-with-image.custom,
  [class*="btn"][class*="map"] {
    display: none !important;
  }

  /* Style any future description-field <a> link with the gold-pill
     look (in case SimplyBook strips inline style attrs). The native
     a.btn.book is left visible — already styled in section 10. */
  .full-info a[href*="batterseapowerwash.com"],
  .tab a[href*="batterseapowerwash.com"] {
    display: inline-block !important;
    padding: 14px 36px !important;
    background: linear-gradient(135deg, #C9A66B 0%, #b08d52 100%) !important;
    color: #080809 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 22px rgba(201, 166, 107, 0.3) !important;
    margin-top: 16px !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  }

  .full-info a[href*="batterseapowerwash.com"]:hover,
  .tab a[href*="batterseapowerwash.com"]:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 12px 32px rgba(201, 166, 107, 0.5) !important;
    transform: translateY(-1px) !important;
    color: #080809 !important;
  }

  /* ════════════════════════════════════════════════════════
    16. CATEGORY STEP — preserve reverse order on desktop
    ════════════════════════════════════════════════════════ */
  @media (min-width: 992px) {
    #sb_category_step_container {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
    }
  }