/* ============================================================
   MACRO GOLF — Booking pages theme
   Matches macrogolfonline.co.uk: black backgrounds, Anton display
   type, Karla body copy, FFD900 yellow accent, sharp 2px corners.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Karla:wght@400;500;600;700&display=swap');

#sb_main {
  --mg-black: #0b0b0b;
  --mg-dark: #15191b;
  --mg-panel: #1d2225;
  --mg-yellow: #FFD900;
  --mg-white: #ffffff;
  --mg-grey: #9aa0a3;
}

/* ---------- Base ---------- */
html, body {
  background: #0b0b0b !important;
}
#sb_main {
  background: var(--mg-black) !important;
  color: var(--mg-white) !important;
  font-family: 'Karla', Arial, sans-serif !important;
  min-height: 100vh !important;
}
#sb_main .container-fluid,
#sb_main .sb-layout,
#sb_main .content,
#sb_main .section,
#sb_main .wrapper {
  background: transparent !important;
}
/* the vertical steps list (Location/Service/Time/Client) sits in a
   bare <nav> element with an inline white background */
#sb_main nav {
  background: var(--mg-panel) !important;
}
/* the Home/Reviews/My Bookings menu wrapper also has a white background */
#sb_main #sb_menu {
  background: var(--mg-panel) !important;
}
/* remove the stock "sport" photo behind the hero header */
#sb_main #main-buttons.default-bg,
#sb_main .default-bg {
  background-image: none !important;
  background-color: #000 !important;
}

/* ---------- Headings / display type ---------- */
#sb_main h1,
#sb_main h2,
#sb_main h3,
#sb_main h4,
#sb_main .company-name,
#sb_main .title-small,
#sb_main .title-sub,
#sb_main .service-item .name,
#sb_main .step_info_item {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--mg-white) !important;
}

/* ---------- Header / hero ---------- */
#sb_main .header,
#sb_main header,
#sb_main .web {
  background: #000 !important;
  border-bottom: 3px solid var(--mg-yellow) !important;
}
#sb_main .company-name {
  color: var(--mg-yellow) !important;
  font-size: 22px !important;
}
#sb_main .header a,
#sb_main .web a,
#sb_main .nav a {
  color: var(--mg-grey) !important;
}
#sb_main .header a:hover,
#sb_main .nav a:hover,
#sb_main .nav-item.active a {
  color: var(--mg-yellow) !important;
}
#sb_main .book-btn-container .btn,
#sb_main a[href="#book"] {
  background: var(--mg-yellow) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ---------- Sidebar / booking steps ---------- */
#sb_main .nav-wrapper,
#sb_main .timeline-sidebar,
#sb_main .timeline-wrapper {
  background: var(--mg-panel) !important;
  border-radius: 4px !important;
  border: 1px solid #262b2e !important;
}
#sb_main .nav-trigger .circle {
  background: var(--mg-yellow) !important;
}
#sb_main .nav-trigger .bar {
  background: #000 !important;
}
#sb_main .menu-item,
#sb_main .step_info_item {
  color: var(--mg-grey) !important;
}
#sb_main .menu-item.active,
#sb_main .step_info_item.active,
#sb_main .menu-item .selected {
  color: var(--mg-yellow) !important;
}
#sb_main .bar-service,
#sb_main .timeline-wrapper .bar {
  background: var(--mg-yellow) !important;
}

/* ---------- Cards: locations / services / summary ---------- */
#sb_main .excerpt-info,
#sb_main .item-container,
#sb_main .service-item,
#sb_main .full-info {
  background: var(--mg-panel) !important;
  border-left: 4px solid var(--mg-yellow) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--mg-white) !important;
}
#sb_main .excerpt-info .link,
#sb_main .item-container a,
#sb_main .full-info a {
  color: var(--mg-yellow) !important;
}
#sb_main .no-img-block {
  background: var(--mg-dark) !important;
}

/* ---------- Buttons ---------- */
#sb_main .btn,
#sb_main .btn.select,
#sb_main .buttons .btn {
  background: var(--mg-yellow) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  box-shadow: none !important;
}
#sb_main .btn:hover,
#sb_main .btn.select:hover {
  background: var(--mg-white) !important;
  color: #000 !important;
}

/* ---------- Calendar ---------- */
#sb_main .calendar {
  background: var(--mg-panel) !important;
  border-radius: 4px !important;
  border: 1px solid #262b2e !important;
}
#sb_main .weeks-name {
  color: var(--mg-grey) !important;
}
#sb_main .date.day-on {
  color: var(--mg-white) !important;
}
#sb_main .date.day-off,
#sb_main .date.passed {
  color: #45494b !important;
}
#sb_main .date.selected,
#sb_main .date.today {
  background: var(--mg-yellow) !important;
  color: #000 !important;
  border-radius: 50% !important;
}
#sb_main .date.available:hover {
  background: rgba(255, 217, 0, 0.25) !important;
  border-radius: 50% !important;
}

/* ---------- Time slots (booking flow only — .time is reused by the
   plain "Opening Hours" table on the Home page, so scope narrowly) ---------- */
#sb_main .slots-view .time,
#sb_main .datetime-step .time,
#sb_main .slot {
  background: transparent !important;
  border: 1px solid var(--mg-yellow) !important;
  color: var(--mg-white) !important;
  border-radius: 2px !important;
}
#sb_main .slots-view .time:hover,
#sb_main .slots-view .time.selected,
#sb_main .datetime-step .time:hover,
#sb_main .datetime-step .time.selected,
#sb_main .slot.selected {
  background: var(--mg-yellow) !important;
  color: #000 !important;
}
/* Opening Hours table (Home page) */
#sb_main table.overview {
  background: transparent !important;
}
#sb_main table.overview td {
  border-color: #262b2e !important;
  color: var(--mg-white) !important;
  background: transparent !important;
}

/* ---------- Forms ---------- */
#sb_main input,
#sb_main select,
#sb_main textarea {
  background: var(--mg-dark) !important;
  border: 1px solid #333a3d !important;
  color: var(--mg-white) !important;
  border-radius: 2px !important;
}
#sb_main input::placeholder {
  color: var(--mg-grey) !important;
}
#sb_main label,
#sb_main .txt {
  color: var(--mg-white) !important;
}

/* ---------- Order summary ---------- */
#sb_main .full-info .title-small {
  color: var(--mg-yellow) !important;
}
#sb_main .price {
  color: var(--mg-white) !important;
}

/* ---------- Modals / info popups ---------- */
#sb_main .modal-dialog,
#sb_main .modal {
  background: var(--mg-panel) !important;
  color: var(--mg-white) !important;
}

/* ---------- Footer ---------- */
#sb_main .copyright,
#sb_main footer,
#sb_main #footer {
  background: #000 !important;
  color: var(--mg-grey) !important;
}
#sb_main .copyright a {
  color: var(--mg-yellow) !important;
}