/* ==========================================================================
   Medicure Clinics Brand Theme — color-only override layer
   ==========================================================================
   Loaded LAST (after modules/frontend/style.css and all plugin CSS) so every
   rule here wins purely on source order, with selectors no more specific
   than the ones being overridden. No shapes, spacing, icons or markup are
   changed by this file except inside the brand-new `.mcc-hero-*` classes
   added to the Hero section only (see Modules/Frontend/Resources/views/
   components/section/banner.blade.php), which the client explicitly asked
   to be redesigned; every other section keeps its original HTML/JS and
   only gets recolored.

   Brand palette
   -------------
   Deep Teal   #13657D  (primary / CTA)      hover #2698B7 (Sky Blue)
   Navy        #082029  (dark surfaces: footer)
   Sky Cyan    #3AD4FA  (accent / badge / highlight, paired with Navy text)
   White/Mist  #FFFFFF / #F4FBFC (light backgrounds & cards)
   Text        #0B2530 (primary)  #5C7A85 (secondary / helper)
   Links       #13657D

   Variables & classes discovered in public/modules/frontend/style.css
   (this is the exhaustive inventory the whole file below is built from):
   - :root / [data-bs-theme=light]:
       --bs-primary #5670CC, --bs-secondary #F67E7D, --bs-link-color,
       --bs-heading-color, --bs-body-color, --bs-body-bg, --bs-emphasis-color,
       --bs-gray-800 (#1E1E24, only consumer is .footer .footer-top bg),
       --bs-gray-900 (#ffffff — already the "white card" tone, left as-is)
       plus each color's *-rgb / *-text-emphasis / *-bg-subtle /
       *-border-subtle / *-hover-bg / *-active-bg companions (lines ~127-460).
   - [data-bs-theme=dark]: same token set with dark-mode values (line ~254),
       used when a visitor toggles the header's light/dark switch.
   - Per-component button tokens (Bootstrap bakes literal hex into each
       class rather than referencing the root var, so these need their own
       overrides): .btn-primary, .btn-outline-primary, .btn-secondary,
       .btn-outline-secondary (--bs-btn-bg/border/hover-*/active-*/disabled-*,
       lines ~13476-13508 and ~13663-13850).
   - .section-bg (line 17034) = var(--bs-gray-900) = #fff already → no change
       needed, kept as the "light card" background.
   - .footer .footer-top (line 15791) = var(--bs-gray-800) → dark surface.
   - .footer .footer-bottom (line 15814) = hardcoded #28282E (not a var) →
       needs a direct selector override.
   - .footer-action-link / .footer-menu > li a hover states → var(--bs-primary).
   - .services-card .service-meta .service-meta-dentist (line 16794) =
       color: var(--bs-secondary) on a white chip → category tag text.
   - Status/semantic colors (--bs-success/--bs-warning/--bs-danger/--bs-info,
       used for Paid/Unpaid/Active/Closed/Completed/Pending badges) are
       intentionally left untouched — they're not part of the brand palette
       and recoloring them would break their meaning.
   - No literal #F9ABAA / #5B6FD1 strings exist in the compiled CSS; the
       closest real tokens are --bs-primary #5670CC and --bs-secondary
       #F67E7D, which is what this file targets.
   ========================================================================== */

:root,
[data-bs-theme=light] {
  /* Primary → Deep Teal (CTA) */
  --bs-primary: #13657D;
  --bs-primary-rgb: 19, 101, 125;
  --bs-primary-text-emphasis: #0d4a5c;
  --bs-primary-bg-subtle: #dcedf1;
  --bs-primary-border-subtle: #bcdce3;
  --bs-primary-hover-bg: #2698B7;
  --bs-primary-hover-border: #2698B7;
  --bs-primary-active-bg: #2698B7;
  --bs-primary-active-border: #2698B7;

  /* Secondary → secondary brand teal-blue tone (kept usable as both text & bg) */
  --bs-secondary: #2698B7;
  --bs-secondary-rgb: 38, 152, 183;
  --bs-secondary-text-emphasis: #1c7186;
  --bs-secondary-bg-subtle: #e0f4f9;
  --bs-secondary-border-subtle: #bfe6ee;
  --bs-secondary-hover-bg: #13657D;
  --bs-secondary-hover-border: #13657D;
  --bs-secondary-active-bg: #13657D;
  --bs-secondary-active-border: #13657D;

  --bs-gray-800: #082029; /* only consumer: .footer .footer-top background */

  --bs-body-color: #5C7A85;
  --bs-body-color-rgb: 92, 122, 133;
  --bs-body-bg: #F4FBFC;
  --bs-emphasis-color: #0B2530;
  --bs-heading-color: #0B2530;
  --bs-link-color: #13657D;
  --bs-link-color-rgb: 19, 101, 125;
  --bs-link-hover-color: #2698B7;
  --bs-link-hover-color-rgb: 38, 152, 183;
}

[data-bs-theme=dark] {
  --bs-body-bg: #082029;
  --bs-body-bg-rgb: 8, 32, 41;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #ffffff;
  --bs-link-color: #3AD4FA;
  --bs-link-hover-color: #6fe0fb;
  --bs-primary-text-emphasis: #6fe0fb;
  --bs-secondary-text-emphasis: #3AD4FA;
}

/* Buttons: unify both old CTA colors (blue primary / coral secondary) into
   the one Deep Teal brand button, with the Sky Blue hover specified by the
   client. Shape/padding/border-radius tokens are untouched — color only. */
.btn-primary,
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #13657D;
  --bs-btn-border-color: #13657D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2698B7;
  --bs-btn-hover-border-color: #2698B7;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d4a5c;
  --bs-btn-active-border-color: #0d4a5c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #13657D;
  --bs-btn-disabled-border-color: #13657D;
  --bs-btn-focus-shadow-rgb: 38, 152, 183;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: #13657D;
  --bs-btn-border-color: #13657D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #13657D;
  --bs-btn-hover-border-color: #13657D;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #13657D;
  --bs-btn-active-border-color: #13657D;
  --bs-btn-disabled-color: #13657D;
  --bs-btn-disabled-border-color: #13657D;
  --bs-btn-focus-shadow-rgb: 38, 152, 183;
}

/* Footer: this theme's footer is genuinely dark (gray-800 / hardcoded
   #28282E), matching the "dark element → Navy" rule. Text already uses
   white/body-color tokens above so contrast is preserved. */
.footer .footer-bottom {
  background-color: #082029;
}

/* Category tag chip on public service cards (white bg, colored text) —
   overridden directly for guaranteed contrast rather than relying solely
   on the --bs-secondary cascade. */
.services-card .service-meta .service-meta-dentist {
  color: #13657D;
}

/* ==========================================================================
   Hero section only — brand-new classes added in banner.blade.php.
   These are additive (no pre-existing rules to override) and implement the
   layout the client attached, scoped strictly to .mcc-hero so no other
   section is affected.
   ========================================================================== */
.mcc-hero {
  position: relative;
  background-color: #FFFFFF;
  padding: 3rem 0;
}
.mcc-hero-content {
  position: relative;
  padding: 0;
}
.mcc-hero-text-col {
  padding: 0;
}
.mcc-hero-search-box .form-control {
  border: none;
}
.mcc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #3AD4FA;
  color: #082029;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.9rem;
  border-radius: 50rem;
  margin-bottom: 1.25rem;
}
.mcc-hero-title {
  color: #0B2530;
}
.mcc-hero-subtext {
  color: #5C7A85;
  font-size: 1.05rem;
  max-width: 34rem;
}
.mcc-hero-actions .btn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.mcc-hero-media {
  position: relative;
}
.mcc-hero-media-inner {
  border-radius: var(--bs-border-radius-xl, 1rem);
  overflow: hidden;
  box-shadow: 0 0.625rem 1.875rem rgba(8, 32, 41, 0.12);
}
.mcc-hero-media-inner .main-banner .slick-item {
  height: 26rem !important;
}
.mcc-hero-media-inner .main-banner .slick-item::before {
  background-color: rgba(8, 32, 41, 0.15) !important;
}
.mcc-hero-badge-floating {
  position: absolute;
  bottom: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ffffff;
  color: #0B2530;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-radius: 50rem;
  box-shadow: 0 0.625rem 1.875rem rgba(8, 32, 41, 0.15);
}
.mcc-hero-badge-floating i {
  color: #13657D;
}
@media (max-width: 991.98px) {
  .mcc-hero-media {
    margin-top: 2rem;
  }
}

/* The old full-bleed background-image hero relied on the quick-booking
   widget overlapping its bottom edge on purpose (margin-top: -2rem in
   style.css line ~17381). The new white, normal-flow hero has nothing to
   overlap, so this needs to sit in normal flow with a positive gap. */
.book-appointment-box {
  margin-top: 2rem !important;
}