/* ==========================================================================
   Moner Moto Daktar — public site theme
   Loaded after md-modern.css on the public and client pages only (the admin
   and expert panels keep their own look). Flat colour, no gradients.

   Palette
     Deep blue      #1D4E89   primary: buttons, links, active states
     Deep blue 700  #163E6E   hover / pressed, footer
     Blue 50        #EDF3FA   tints, chips, focus rings
     Cream          #FBF7F0   page background
     Cream 200      #F3ECDF   alternate bands, quiet panels
     White          #FFFFFF   cards
     Sand           #B8862F   small highlights only (stars, eyebrows)
     Ink            #172235   headings      Ink 2  #46546A  body
     Muted          #6B778A   secondary     Line   #E8E1D3  borders
   ========================================================================== */

:root {
  --ms-blue: #1D4E89;
  --ms-blue-700: #163E6E;
  --ms-blue-50: #EDF3FA;
  --ms-blue-100: #DCE7F4;
  --ms-cream: #FBF7F0;
  --ms-cream-200: #F3ECDF;
  --ms-sand: #B8862F;
  --ms-ink: #172235;
  --ms-ink-2: #46546A;
  --ms-muted: #6B778A;
  --ms-line: #E8E1D3;
  --ms-white: #FFFFFF;
  --ms-r: 14px;
  --ms-r-lg: 22px;
  --ms-sh: 0 1px 2px rgba(23, 34, 53, .05), 0 6px 20px rgba(23, 34, 53, .06);

  /* Re-point the shared tokens so every md-* component follows. */
  --md-brand: var(--ms-blue);
  --md-brand-dark: var(--ms-blue-700);
  --md-brand-light: var(--ms-blue-50);
  --md-brand-ring: rgba(29, 78, 137, .2);
  --md-ink: var(--ms-ink);
  --md-ink-soft: var(--ms-ink-2);
  --md-ink-muted: var(--ms-muted);
  --md-bg: var(--ms-cream);
  --md-line: var(--ms-line);
  --md-line-strong: #DCD3C2;
  --md-r: var(--ms-r);
  --md-r-lg: var(--ms-r-lg);
  --md-sh-sm: 0 1px 2px rgba(23, 34, 53, .05);
  --md-sh: var(--ms-sh);

  --dk-brand: var(--ms-blue);
  --dk-brand-2: var(--ms-blue-700);
  --dk-brand-soft: var(--ms-blue-50);
  --dk-line: var(--ms-line);
}

body.md-app, body { background: var(--ms-cream) !important; color: var(--ms-ink-2); }
h1, h2, h3, h4, h5, h6 { color: var(--ms-ink); letter-spacing: -.01em; }
a { color: var(--ms-blue); }
a:hover { color: var(--ms-blue-700); }
::selection { background: var(--ms-blue-100); }

/* ------------------------------------------------------------ buttons -- */
.btn { border-radius: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--ms-blue) !important; border-color: var(--ms-blue) !important; color: #fff !important; box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--ms-blue-700) !important; border-color: var(--ms-blue-700) !important; }
.btn-outline-primary { color: var(--ms-blue) !important; border: 1.5px solid var(--ms-blue) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--ms-blue-50) !important; }
.btn-secondary { background: var(--ms-cream-200) !important; border-color: var(--ms-cream-200) !important; color: var(--ms-ink) !important; }
.btn:focus-visible, .form-control:focus { box-shadow: 0 0 0 3px var(--md-brand-ring) !important; border-color: var(--ms-blue) !important; }

/* ------------------------------------------------------------- navbar -- */
nav.navbar.navgrid, nav.navbar.fixed-top {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--ms-line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  min-height: 68px;
}
.navbar.navgrid .navbar-brand img { height: 48px; width: auto; }
.navbar.navgrid .nav-link, .navbar.navgrid .nav-link-color {
  color: var(--ms-ink-2) !important; font-weight: 600; font-size: .95rem; border-radius: 10px; padding: 8px 14px !important;
}
.navbar.navgrid .nav-link:hover { color: var(--ms-blue) !important; background: var(--ms-blue-50); }
.navbar.navgrid .nav-item.active > .nav-link { color: var(--ms-blue) !important; background: var(--ms-blue-50); }
.navbar.navgrid .md-nav-cta { background: var(--ms-blue) !important; color: #fff !important; padding: 9px 18px !important; }
.navbar.navgrid .md-nav-cta:hover { background: var(--ms-blue-700) !important; }
.navbar.navgrid .navbar-toggler { border-color: var(--ms-line); }
.navbar.navgrid .navbar-toggler-icon { filter: invert(1) brightness(.35); }
.navbar.navgrid .dropdown-menu { border: 1px solid var(--ms-line); border-radius: 12px; box-shadow: var(--ms-sh); }

.ms-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ms-cream-200); margin: 0 6px; }
.ms-lang a { padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--ms-ink-2) !important; text-decoration: none !important; line-height: 1.2; }
.ms-lang a.is-on { background: #fff; color: var(--ms-blue) !important; box-shadow: 0 1px 2px rgba(23, 34, 53, .12); }

/* ------------------------------------------------------------- footer -- */
footer.footer, footer.footergrad {
  background: var(--ms-blue-700) !important; background-image: none !important; color: #DCE6F2 !important; margin-top: 72px;
}
footer.footer .ft-title { color: #fff !important; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
footer.footer a { color: #fff !important; }
footer.footer a:hover { color: var(--ms-blue-100) !important; }
footer.footer small, footer.footer .text, footer.footer li { color: #C9D6E6 !important; }
footer.footer .ft-social-list a { background: rgba(255, 255, 255, .1) !important; }
footer.footer hr, footer.footer section + section { border-color: rgba(255, 255, 255, .12) !important; }

/* ---------------------------------------------------------- page bits -- */
.md-eyebrow { color: var(--ms-sand) !important; letter-spacing: .12em; }
.md-card { background: #fff; border: 1px solid var(--ms-line) !important; border-radius: var(--ms-r) !important; box-shadow: var(--ms-sh) !important; }
.md-page-head__title { color: var(--ms-ink); }
.md-chip { background: var(--ms-blue-50); color: var(--ms-blue); }
.alert-info { background: var(--ms-blue-50) !important; border-color: var(--ms-blue-100) !important; color: var(--ms-blue-700) !important; }
.modal-content { border: 0; border-radius: var(--ms-r-lg); box-shadow: 0 20px 60px rgba(23, 34, 53, .2); }
.modal-header { border-bottom: 1px solid var(--ms-line); }
.modal-footer { border-top: 1px solid var(--ms-line); }
.modal-body p { line-height: 1.85; color: var(--ms-ink-2); }

/* Section heading used down the long pages. */
.ms-head { text-align: center; margin: 88px auto 34px; max-width: 720px; }
.ms-head__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; margin: 0; }
.ms-head__rule { width: 44px; height: 4px; border-radius: 4px; background: var(--ms-blue); margin: 14px auto 0; }

/* ------------------------------------------------------- preview marks -- */
/* Only present in the admin's website-content preview. */
.st-mark { outline: 1px dashed rgba(29, 78, 137, .35); outline-offset: 2px; border-radius: 3px; cursor: pointer; transition: outline-color .15s, background .15s; }
.st-mark:hover { outline: 2px solid var(--ms-blue); background: rgba(29, 78, 137, .06); }
.st-mark.is-focus { outline: 2px solid #d9a23d; background: rgba(217, 162, 61, .12); }

/* Floating "Book appointment" + WhatsApp, on every public and client page. */
.md-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1035; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.md-fab__btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; box-shadow: 0 8px 22px rgba(16, 34, 45, .24); transition: transform .15s ease, box-shadow .15s ease; }
.md-fab__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 34, 45, .3); }
.md-fab__btn i { font-size: 1.25rem; line-height: 1; }
.md-fab__btn--book { background: var(--ms-blue, #1f6fb2); }
.md-fab__btn--wa { background: #25d366; }
@media (max-width: 575.98px) {
  .md-fab { right: 12px; bottom: 12px; }
  .md-fab__btn { padding: 12px 14px; }
  .md-fab__btn--wa span { display: none; }
}

/* Country picker + number on one line. */
.md-phone { display: flex; gap: 8px; }
.md-phone__country { flex: 0 0 38%; max-width: 230px; }
.md-phone__number { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) { .md-phone { flex-direction: column; } .md-phone__country { flex-basis: auto; max-width: none; } }

/* Time slots on the booking form. */
.md-bslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
.md-bslot { padding: 9px 6px; border: 1px solid #d7dee6; border-radius: 10px; background: #fff; font-weight: 700; font-size: .88rem; line-height: 1.2; cursor: pointer; text-align: center; }
.md-bslot small { display: block; font-weight: 600; font-size: .7rem; color: #6b7a8a; }
.md-bslot:hover:not(:disabled) { border-color: var(--ms-blue, #1f6fb2); }
.md-bslot.is-picked { background: var(--ms-blue, #1f6fb2); border-color: var(--ms-blue, #1f6fb2); color: #fff; }
.md-bslot.is-picked small { color: #dbe9f6; }
.md-bslot:disabled { background: #f1f3f5; color: #9aa6b2; cursor: not-allowed; text-decoration: line-through; }
.md-bslot:disabled small { text-decoration: none; }