/* ============================================================================
   M Dental — SimplyBook booking widget theme
   ----------------------------------------------------------------------------
   PASTE INTO BOTH TABS:
     Custom Features -> Custom CSS -> "Booking pages CSS"  AND  "Widget CSS"
   Booking pages CSS feeds book.m-dental.co.uk; Widget CSS feeds the iframe at
   /book/greenwich/ and /book/canada-water/. They are separate — a rule in one
   does not reach the other.

   Palette:  #1B2831 navy   #2B5672 teal   #F7C93C gold

   NOTE ON SPECIFICITY
   SimplyBook injects the company's colours in a runtime <style> block that sits
   AFTER this custom CSS in the same stylesheet. On a tie the later rule wins, so
   several rules below are deliberately over-qualified to beat the theme on
   specificity rather than order. Class-level tokens outrank element names: the
   theme's `.sb-cell.free:hover` (0,3,0) beats `html body a.cell:hover` (0,2,3),
   so matching chains need the same class count or more.
   ============================================================================ */

/* 1. "Select" button label. The button is a <div> with white text, but the
      visible label is an <a> inside it coloured teal by the theme. */
.btn a,
.btn.select a,
.btn.custom a,
.btn.select.custom a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn:hover a,
.btn.select:hover a,
.btn.select.custom:hover a {
  color: #F7C93C !important;
}

/* 2. Theme accents. The stock "minimal" theme uses a salmon (#CB8D75) on the step
      heading, "read more" links, the week navigation and the cookie links. */
.title-small,
.read-more,
a.read-more,
.sb-read-more,
.service-item .read-more,
.sb-cookie-notification a.link,
.sb-cookie-notification a {
  color: #2B5672 !important;
}

hr,
.title-small + hr,
.sb-title-line {
  border-color: #D6E0E7 !important;
}

/* 3. Headings and secondary text. */
h1, h2, h3,
.title-main,
.service-item .title,
.sb-title {
  color: #1B2831 !important;
}

.copyright         { color: #2B5672 !important; }
.scroll-top-button { color: #1B2831 !important; }

/* 4. The company name over the hero photo. The theme sets it to #AA5939 burnt
      orange at 60px, which sits on a busy photograph and is close to unreadable. */
html body .company-name,
html body .company-name.company-logo-and-name,
html body #sb_main .company-name {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
}

/* 5. Primary buttons. Pins the navy and removes the orange gradient. */
.btn,
.btn.select,
.btn.custom,
.btn-primary,
.btn-success {
  background-color: #1B2831 !important;
  background-image: none !important;
  border-color: #1B2831 !important;
}

.btn:hover,
.btn.select:hover,
.btn-primary:hover,
.btn-success:hover,
.btn--next-available-date:hover,
.btn--next-available-date:active,
.btn--next-available-date:focus,
.sb-start-chat-btn:hover,
.sb-start-chat-btn:active,
.sb-start-chat-btn:focus {
  background-color: #2B5672 !important;
  background-image: none !important;
  border-color: #2B5672 !important;
  color: #ffffff !important;
}

/* The theme throws an orange glow round any hovered button. */
.btn:hover {
  box-shadow: 0 0 10px 0 rgba(27, 40, 49, .45) !important;
}

/* 5a. EXCEPTION. `.btn-link` is a borderless, link-style button — the week
   date-range picker (#sb_label_container) is one. The blanket `.btn` fill above
   painted it navy while its own text stayed the theme's dark brown, so the dates
   became unreadable. It must carry no fill at all. */
html body .btn.btn-link,
html body #sb_label_container.btn.btn-link,
html body .datepicker-button .btn {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #1B2831 !important;
}

html body .btn.btn-link *,
html body #sb_label_container.btn.btn-link * {
  color: #1B2831 !important;
}

html body .btn.btn-link:hover,
html body .btn.btn-link:hover *,
html body #sb_label_container.btn.btn-link:hover * {
  color: #2B5672 !important;
}

/* 6. The final "Book" button on the details step. The theme targets it through a
      five-ID chain, so the chain is repeated with html body in front to win. */
html body #sb-timeline #steps #steps-content #sb_booking_content .detail-step .right-side #sb_book_btn,
html body #sb_book_btn {
  background: #1B2831 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #1B2831 !important;
}

html body #sb_book_btn:hover {
  background: #2B5672 !important;
  background-image: none !important;
}

/* 7. Timeline: weekend day headings and week navigation. "Sat" is painted
      #FC591E and "Prev/Next Week" salmon. */
html body .day,
html body .grid-weekly-table .day,
html body .timeline-wrapper .day {
  color: #1B2831 !important;
}

html body .arrow .txt,
html body span.txt,
html body .prev-week .txt,
html body .next-week .txt {
  color: #2B5672 !important;
}

/* 7a. Time slots on hover and when chosen. The theme's rule is
   `.sb-cell.free:hover` — specificity (0,3,0). An earlier attempt used
   `html body a.cell:hover`, which is (0,2,3) and LOSES: class-level tokens
   outrank element names however many elements are stacked in front. These match
   the theme's class chain and add elements on top, giving (0,3,2). */
html body .sb-cell.free.hovered,
html body .sb-cell.free:hover,
html body .sb-cell.free.selected,
html body .sb-cell.free.active,
html body a.cell.sb-cell.free:hover,
html body a.cell.sb-cell.free.hovered,
html body #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .flexible-weekly-inner .content-container #sb_time_flexible .sb-cell.free:hover {
  background: #1B2831 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #1B2831 !important;
}

html body .sb-cell.free:hover *,
html body .sb-cell.free.hovered *,
html body .sb-cell.free.selected * {
  color: #ffffff !important;
}

html body .grid-weekly-item.grid-weekly-item--selected,
html body .pagination-wrapper .current,
html body .pagination-wrapper .arrow:hover,
html body .pagination-wrapper .current:hover {
  background: #1B2831 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #1B2831 !important;
}

html body .pagination-wrapper .current * {
  color: #ffffff !important;
}

/* The back link turns orange on hover. */
html body #sb_main #sb-main-container .return-btn a:hover,
html body #sb_main #sb-main-container #sb_back_button a:hover {
  color: #2B5672 !important;
}

/* 8. Side navigation on the standalone booking page. */
html body #header div.nav-wrapper,
html body #header div.nav-wrapper.clearfix,
html body #header div.nav-wrapper.menu-in,
html body #header div.nav-wrapper.active,
html body #header #sb_menu,
html body #header button.nav-trigger,
html body #header button.nav-trigger.on,
html body #header button.nav-trigger.toggle-mnu {
  background: #1B2831 !important;
  background-image: none !important;
}

.nav-wrapper a,
.nav-wrapper .nav-item a,
#sb_menu a,
.nav-wrapper li a {
  color: #ffffff !important;
}

.nav-wrapper a:hover,
#sb_menu a:hover,
.nav-wrapper li a:hover {
  color: #F7C93C !important;
}

/* Menu items get a hairline divider, NOT a background. An earlier version used
   `li + li { background-color:#fff }`, which painted the second and third items
   as solid white blocks. Backgrounds are forced transparent so that cannot
   recur. */
.nav-wrapper .menu-item,
.nav-wrapper li.menu-item,
.nav-wrapper ul.nav li {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
}

.nav-wrapper .menu-item:last-child {
  border-bottom: 0 !important;
}

/* Hamburger bars only — scoped with > so it cannot reach menu content. */
.nav-trigger > span,
.nav-trigger > span::before,
.nav-trigger > span::after {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* 9. Prices and links. */
.price,
.service-price {
  color: #1B2831 !important;
  font-weight: 700 !important;
}

a       { color: #2B5672; }
a:hover { color: #1B2831; }