/* Full-screen InSync scheduler modal.
   Wrapper #sm-modal isolates these rules from the rest of the page.

   Structural spec: position:fixed; inset:0, a flex-column of
   [header, iframe] at any viewport width — no breakpoint-specific layout.
   The header takes its natural height and never scrolls; the iframe fills
   100% of whatever's left. */

#sm-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    background: #fff;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    overscroll-behavior: contain;
    /* Deliberately NO height here. top:0 + bottom:0 already size this to
       the viewport, and adding an explicit height over-constrains the box
       — CSS then discards bottom and honors height. That combination is
       what let the header drift out of reach on Android: fixed elements
       lay out against the *layout* viewport (URL bar retracted) while a
       dvh/vh height reports a different one, so the modal got anchored
       past the top of the visible area with no bottom edge to pull it
       back. scheduler-modal.js pins top/height to the visual viewport on
       browsers that expose it; this rule is the fallback. */
}

#sm-modal.sm-open {
    display: flex;
}

/* Scroll lock. The body is pinned rather than merely overflow:hidden
   because iOS Safari ignores overflow:hidden on body for touch scrolling;
   scheduler-modal.js saves/restores the scroll offset around this. */
html.sm-modal-open,
html.sm-modal-open body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

html.sm-modal-open body {
    position: fixed;
    width: 100%;
}

/* ---- Header: never scrolls ---- */
#sm-modal .sm-header {
    flex: 0 0 auto;
    background: rgb(107, 51, 53);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
    /* A swipe that starts on the header shouldn't scroll anything — the
       header is fixed furniture, only the frame below it scrolls. */
    touch-action: none;
}

/* The theme styles bare h1–h6 / a / button, and those rules beat plain
   inheritance from .sm-header — so every piece of header text states its
   own colour rather than relying on inheriting it. */
#sm-modal .sm-header,
#sm-modal .sm-header h2,
#sm-modal .sm-header a,
#sm-modal .sm-header button {
    color: #fff;
}

#sm-modal .sm-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Safe-area insets keep the text clear of the notch in landscape,
       while the header's background still runs edge to edge. */
    padding: 12px calc(20px + env(safe-area-inset-right, 0px)) 10px calc(20px + env(safe-area-inset-left, 0px));
}

#sm-modal .sm-title {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: 17px;
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
}

#sm-modal .sm-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

#sm-modal .sm-exit-link {
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 4px 2px;
}

#sm-modal .sm-exit-link:hover {
    opacity: 0.8;
}

#sm-modal .sm-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

#sm-modal .sm-close:hover {
    opacity: 0.8;
}

/* ---- Instructions ---- */
#sm-modal .sm-instructions {
    padding: 0 calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px));
    font-size: 14px;
    line-height: 1.55;
}

#sm-modal .sm-instructions.sm-collapsed {
    display: none;
}

#sm-modal .sm-instructions strong {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

#sm-modal .sm-instructions a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#sm-modal .sm-instructions a:hover {
    opacity: 0.85;
}

/* ---- Collapse toggle: thin bar at the bottom of the header ---- */
#sm-modal .sm-collapse {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 3px 0 4px;
    font-size: 11px;
    line-height: 1;
    font-family: inherit;
}

#sm-modal .sm-collapse:hover {
    background: rgba(0, 0, 0, 0.28);
}

#sm-modal .sm-collapse-icon {
    display: inline-block;
    opacity: 0.9;
}

/* ---- Frame ---- */
#sm-modal .sm-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    /* Keeps the scheduler's own fields out from under the notch and the
       home indicator. Invisible in practice — the padding is white on a
       white background, so the frame still reads as edge to edge. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* width:1px + min-width:100% is the iOS Safari fix: WebKit sizes an
   iframe to its content rather than to the CSS box, so a plain
   width:100% lets a desktop-width layout inside overflow the viewport
   and get clipped. Declaring a tiny width with a 100% floor forces the
   frame to the container width, so the responsive page inside reflows
   the same way it does when loaded directly. Same trick vertically. */
#sm-modal .sm-frame {
    display: block;
    width: 1px;
    min-width: 100%;
    height: 1px;
    min-height: 100%;
    border: 0;
}

/* ---- Trigger button ([metis_schedule_button]) ----
   Matches the site's existing "Request an Appointment" button, which is
   Elementor Global Widget 3330. That widget's colours are emitted as
   page-scoped CSS (.elementor-1156 .elementor-global-3330 .elementor-button
   { … }), so a button anywhere else can't inherit them — the values are
   restated here to match:
       background #914547 · text/fill #F8F8F8 · 18px · square corners

   The shortcode also emits Elementor's button markup, so the icon/text
   layout comes from Elementor's own stylesheet.

   Colour carries !important because the theme styles bare links and was
   winning — that's what produced burgundy-on-burgundy text and a colour
   shift on hover. Scoped to this one class, so it can't leak. */
a.metis-schedule-btn,
a.metis-schedule-btn:link,
a.metis-schedule-btn:visited,
a.metis-schedule-btn:hover,
a.metis-schedule-btn:focus,
a.metis-schedule-btn:active {
    color: #F8F8F8 !important;
    fill: #F8F8F8;
    background-color: #914547;
    text-decoration: none !important;
}

/* Hover affordance is an underline on the label only — not the icon, and no
   colour shift. Applied to .elementor-button-text rather than the anchor
   because the content wrapper is inline-flex, and text-decoration doesn't
   propagate into an atomic inline-level box like that. */
a.metis-schedule-btn:hover .elementor-button-text,
a.metis-schedule-btn:focus-visible .elementor-button-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.metis-schedule-btn {
    display: inline-block;
    font-size: 18px;
    line-height: 1.4;
    padding: 14px 28px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
}

/* Deliberately no hover colour or opacity change — the site's button
   doesn't shift, so the underline above carries the hover state alone. */

a.metis-schedule-btn .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: row;
}

a.metis-schedule-btn .elementor-button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: block;
}

/* ---- Exit confirmation ---- */
#sm-modal .sm-confirm {
    border: none;
    border-radius: 10px;
    padding: 26px 28px 22px;
    max-width: 380px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    color: #333;
    font-family: 'Roboto', sans-serif;
}

#sm-modal .sm-confirm::backdrop {
    background: rgba(20, 10, 10, 0.55);
}

#sm-modal .sm-confirm h2 {
    font-family: Georgia, 'Iowan Old Style', serif;
    color: rgb(145, 69, 71);
    font-size: 20px;
    margin: 0 0 20px;
    font-weight: 500;
}

#sm-modal .sm-confirm-actions {
    display: flex;
    gap: 10px;
}

#sm-modal .sm-confirm-actions button {
    /* Basis 0 rather than auto, so both buttons come out identical instead
       of being sized by their label lengths. Together they fill the row. */
    flex: 1 1 0;
    min-width: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

#sm-modal .sm-confirm-exit {
    background: transparent;
    border: 1.5px solid #bbb;
    color: #555;
}

#sm-modal .sm-confirm-exit:hover {
    border-color: rgb(145, 69, 71);
    color: rgb(145, 69, 71);
}

#sm-modal .sm-confirm-continue {
    background: rgb(145, 69, 71);
    border: 1.5px solid rgb(145, 69, 71);
    color: #fff;
}

#sm-modal .sm-confirm-continue:hover {
    background: rgb(107, 51, 53);
    border-color: rgb(107, 51, 53);
}

@media (max-width: 640px) {
    #sm-modal .sm-titlebar {
        padding: 10px calc(14px + env(safe-area-inset-right, 0px)) 8px calc(14px + env(safe-area-inset-left, 0px));
    }

    #sm-modal .sm-title {
        font-size: 15.5px;
    }

    #sm-modal .sm-instructions {
        padding: 0 calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));
        font-size: 13.5px;
    }

    #sm-modal .sm-confirm-actions button {
        padding: 12px 10px;
    }
}