/* ==========================================================================
   Site-wide buttons — ONE design for every button, copied from the header's
   "Book Appointment" button (.sdh-btn):
     · solid orange (#E8681A), white text, 1px orange border
     · rectangle with 5px corners
     · Lexend 16px / 500, padding 14px 28px (13px 22px / 15px below 1400px)
     · icon or arrow sits after the text, no coloured circle behind it

   Hover (Stadum-style "fill from the left", timings from finaldesign.md):
     · a solid navy fill (--btn-hover-fill) grows from the LEFT edge to the
       right edge — width 0 → 100%, 0.7s
     · text stays white and the border turns navy — 0.5s
     · the trailing arrow/icon slides 6px to the right — 0.4s

   Works without markup changes. Selectors start with `:root body` so they
   outrank the per-page button rules (some of those use !important too).
   Position / width / margin are left alone, so every button stays where
   its page puts it.

   BUTTON LIST — keep the same list in every :is(...) below:
     .sdh-btn  .smh-btn  .sh-svc__btn  .spt-book  .spt-view-all  .spt-nums a
     .med-appt-submit-btn  .mh-banner__btn  .sd-about__btn  .cs-btn
     .cs-submit  .faq-btn  .btn-view  .btn-appointment  .contact-submit-btn
     .quick-call-btn  .quick-whatsapp-btn  .quick-appointment-btn
     .sdh-wcu__button  .svc-btn
     .btn-sdh-primary  .btn-sdh-outline  .btn-submit-booking  .btn-zoom-img
     .btn-modal-action  (Facilities page)
     + Bootstrap .btn, except close/link/dropdown and the admin colour
       variants (.btn-danger, -success, -warning, -info, -secondary, -light)
       and small sizes (.btn-sm, .btn-xs), so admin pages keep their colours.
   ========================================================================== */
:root {
    --btn-bg: #E8681A;           /* site orange (same as header --sdh-primary) */
    --btn-text: #fff;
    --btn-hover-fill: #06304F;   /* Shri Datta navy (home page --blue-deep) */
    --btn-hover-text: #fff;
}

/* ---- the look ------------------------------------------------------------ */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 28px !important;
    border: 1px solid var(--btn-bg) !important;
    border-radius: 5px !important;
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    font-family: 'Lexend', 'Segoe UI', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    cursor: pointer;
    /* hover-fill plumbing */
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    transition: color .5s, border-color .5s !important;
}

@media (max-width: 1399px) {
    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
                   .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) {
        padding: 13px 22px !important;
        font-size: 15px !important;
    }
}

/* phones — same sizes the header button uses on small screens */
@media (max-width: 767px) {
    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
                   .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) {
        padding: 11px 18px !important;
        font-size: 14px !important;
        gap: 8px;
    }
}

@media (max-width: 420px) {
    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
                   .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) {
        padding: 10px 14px !important;
    }
}

/* Services mega-menu promo card: the card is only ~200px wide inside its
   padding, so its button spans the card with tighter padding (it stuck out
   past the right edge with the standard 28px padding) */
:root body .sdh-header .sdh-promo .sdh-btn {
    align-self: stretch !important;
    width: 100%;
    padding: 12px 14px !important;
    font-size: 15px !important;
    justify-content: center;
}

/* header button inside the mobile menu drawer (shown ≤1199px) */
:root body .sdh-header .sdh-drawer-btn {
    width: 100%;
    margin-top: 22px;
}

/* text and icons inside a button: white, no own colours / circles */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) :is(span, b, strong, i, em) {
    color: inherit !important;
    font: inherit !important;
}

/* icon wrappers that used to be coloured circles (slider, services tabs,
   appointment form) become a plain icon after the text, like the header */
:root body :is(.smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico) {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    transform: none !important;
}

    :root body :is(.smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico) svg {
        width: 16px !important;
        height: 16px !important;
        color: inherit !important;
        stroke: currentColor;
    }

/* Services "Read more" (index.css .svc-btn): it lives in the card's
   slide-up panel, which ignores the pointer — let the button itself take
   hover (clicks are handed to the card link in index.js). */
.svc-card .svc-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* ---- the hover fill ------------------------------------------------------ */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs)))::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--btn-hover-fill) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: -1 !important;
    pointer-events: none;
    transition: width .7s !important;
}

/* per-page ::after effects (corner circles, skewed fills) are switched off */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs)))::after {
    content: none !important;
}

/* trailing arrow / icon */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))) > :is(svg, i, img, .smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico):last-child {
    transition: transform .4s !important;
}

/* ---- hover / keyboard focus --------------------------------------------- */
:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))):is(:hover, :focus-visible) {
    background: var(--btn-bg) !important;   /* fill does the colour change */
    color: var(--btn-hover-text) !important;
    border-color: var(--btn-hover-fill) !important;
    transform: none !important;
}

:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))):is(:hover, :focus-visible)::before {
    width: 100% !important;
}

:root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
               .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
               .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
               .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
               .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action,
               .btn:where(:not(.btn-close, .btn-link, .dropdown-toggle, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-sm, .btn-xs))):is(:hover, :focus-visible) > :is(svg, i, img, .smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico):last-child {
    transform: translateX(6px) !important;
}

/* ---- reduced motion: colour change is instant, nothing slides ----------- */
@media (prefers-reduced-motion: reduce) {
    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action, .btn)::before,
    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action, .btn) > :is(svg, i, img, .smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico):last-child {
        transition: none !important;
    }

    :root body :is(.sdh-btn, .smh-btn, .sh-svc__btn, .spt-book, .spt-view-all, .spt-nums a,
                   .med-appt-submit-btn, .mh-banner__btn, .sd-about__btn, .cs-btn,
                   .cs-submit, .faq-btn, .btn-view, .btn-appointment, .contact-submit-btn,
                   .quick-call-btn, .quick-whatsapp-btn, .quick-appointment-btn,
                   .sdh-wcu__button, .svc-btn, .btn-sdh-primary, .btn-sdh-outline, .btn-submit-booking, .btn-zoom-img, .btn-modal-action, .btn):hover > :is(svg, i, img, .smh-btn-ico, .sh-svc__btn-ico, .med-appt-btn-badge, .btn > .ico):last-child {
        transform: none !important;
    }
}