/* ============================================================================
   M Dental — SimplyBook booking widget theme
   ----------------------------------------------------------------------------
   PASTE INTO:  SimplyBook admin -> Custom Features -> Custom CSS  (then Save)
   There is no API for this setting, so it is pasted by hand, once. It applies
   to the booking page on book.m-dental.co.uk and to the iframe embedded at
   /book/greenwich/ and /book/canada-water/.

   Written against the LIVE DOM on 1 Oct 2026, not guessed. Every selector below
   was confirmed present on the running widget.

   Site palette:
     #1B2831  navy   headings, primary buttons
     #2B5672  teal   links
     #F7C93C  gold   accents, hover
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. THE BUG: the "Select" button is a <div class="btn select custom"> with a
   white colour, but the visible label is an <a> inside it which the theme
   colours #2B5672. Teal text on the navy button is close to unreadable, which
   is what showed on the service list. The <a> needs the colour, not the div.
   --------------------------------------------------------------------------- */
.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;   /* gold on hover, matching the site's CTAs */
}

/* ---------------------------------------------------------------------------
   2. Theme accents. The stock "minimal" theme ships a salmon accent (#CB8D75)
   used on the step heading and every "read more" link — 14 elements on the
   service step alone. Replaced with the site's teal.
   --------------------------------------------------------------------------- */
.title-small,
.read-more,
a.read-more,
.sb-read-more,
.service-item .read-more {
  color: #2B5672 !important;
}

/* The hairline under the step heading is also salmon. It is not a border on
   .title-small itself nor a pseudo-element on it, so it is caught broadly here
   rather than with a single selector. If a tan line survives, inspect it in the
   browser once this CSS is live and add the exact selector. */
hr,
.title-small + hr,
.sb-title-line,
.title-wrapper,
.title-small,
.service-list > .title,
[class*="title"] {
  border-color: #D6E0E7 !important;
}

/* ---------------------------------------------------------------------------
   3. Headings and body text in the site's own colours.
   --------------------------------------------------------------------------- */
h1, h2, h3,
.title-main,
.service-item .title,
.sb-title {
  color: #1B2831 !important;
}

.copyright {
  color: #2B5672 !important;   /* was #403733 warm brown */
}

.scroll-top-button {
  color: #1B2831 !important;   /* was #404040 */
}

/* ---------------------------------------------------------------------------
   4. Primary buttons. The widget renders these as a navy pill already; this
   pins it so a future theme update cannot reintroduce the orange gradient that
   still shows on the standalone booking page.
   --------------------------------------------------------------------------- */
.btn,
.btn.select,
.btn.custom,
.btn-primary {
  background-color: #1B2831 !important;
  background-image: none !important;
  border-color: #1B2831 !important;
}

.btn:hover,
.btn.select:hover,
.btn-primary:hover {
  background-color: #2B5672 !important;
  background-image: none !important;
  border-color: #2B5672 !important;
}

/* ---------------------------------------------------------------------------
   5. Side navigation on the standalone booking page. The minimal theme paints
   the slide-out panel and the hamburger with its orange gradient
   (#F8AD31 -> #FC591E), which is the single most off-brand thing on the page.
   Only visible on book.m-dental.co.uk; the embedded iframe hides the header.
   --------------------------------------------------------------------------- */
#header .nav-wrapper,
.nav-wrapper,
.nav-wrapper.clearfix,
#sb_menu,
.nav-trigger,
.nav-trigger.toggle-mnu,
button.nav-trigger {
  background-image: none !important;
  background-color: #1B2831 !important;
}

/* Menu links: white on the navy panel, gold on hover, matching the site nav. */
.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;
}

/* The hamburger bars and the thin separators between menu items also pick up
   the orange; both need to read against the new navy panel. */
.nav-trigger span,
.nav-wrapper span,
.nav-wrapper hr,
.nav-wrapper li + li {
  background-color: #ffffff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

/* ---------------------------------------------------------------------------
   6. Prices and links in brand colours rather than the theme's orange.
   --------------------------------------------------------------------------- */
.price,
.service-price {
  color: #1B2831 !important;
  font-weight: 700 !important;
}

a {
  color: #2B5672;
}

a:hover {
  color: #1B2831;
}