/* ============================================
   SERVICES MODAL — bottom-sheet popup.

   The panel stays *inside* its source card so
   every "#<card-id> .child" rule keeps matching.
   When .sv-card--open is set we promote the panel
   to a fixed bottom sheet (full-width, slides up
   from the bottom). A backdrop + close button live
   as siblings of the cards and become visible
   whenever body.sv-modal-active is set. The user
   can swipe / drag the handle at the top of the
   sheet downward to dismiss it.
   ============================================ */

/* ---- Backdrop ---- */
.sv-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity 360ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s linear 360ms;
}
body.sv-modal-active .sv-modal-backdrop {
    visibility: visible;
    opacity: 1;
    transition: opacity 360ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s;
}

/* ---- Close button ---- */
.sv-modal-close {
    position: fixed;
    top: calc(var(--space-4) + var(--space-2));
    right: calc(var(--space-4) + var(--space-2));
    z-index: 1102;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: var(--color-pure-white);
    color: var(--color-text-primary);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transition: background 200ms ease, transform 200ms ease,
                opacity 320ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s linear 320ms;
}
.sv-modal-close:hover {
    background: var(--color-pure-white);
    transform: scale(1.05);
}
body.sv-modal-active .sv-modal-close {
    visibility: visible;
    opacity: 1;
    transition: background 200ms ease, transform 200ms ease,
                opacity 320ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s;
}

/* ---- The open card's panel becomes a bottom sheet.
   Pinned to the bottom edge, full width, slides in
   from translateY(100%) to translateY(0) when body
   gets .sv-modal-active. The card's inline transform/
   transition (from the scroll-reveal) is wiped in JS
   *before* this class is added, so position:fixed
   resolves against the viewport. ---- */
.sv-card--open .sv-card__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1101;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-pure-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.28);
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform 480ms cubic-bezier(0.4, 0, 0.1, 1);
    will-change: transform;
}
body.sv-modal-active .sv-card--open .sv-card__panel {
    transform: translateY(0);
}

/* While the user is actively dragging, disable the slide transition
   so inline transform updates are immediate. */
.sv-card--open .sv-card__panel.is-dragging {
    transition: none;
}

/* ---- Drag handle (injected by JS at the top of each panel) ----
   Sticky so it stays visible when the user scrolls inside the panel.
   touch-action: none lets pointermove handlers run without the
   browser hijacking the gesture for scroll. */
.sv-modal-handle {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    padding-top: 10px;
    margin: 0 0 4px;
    background: var(--color-pure-white);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.sv-modal-handle:active { cursor: grabbing; }
/* The dash/pill that used to sit here is now visually replaced by the
   sv-modal-logo sticker that hangs above the panel's top edge. The
   handle itself stays as a generous drag region inside the panel. */

/* ---- Logo sticker above the panel ----
   Fixed-positioned, anchored to the panel's top edge via the
   --sv-panel-height CSS var (set by services-page.js on open / drag /
   resize). transform: translate(-50%, 50%) puts the logo's center on
   the panel's top edge, so the top half sticks out above the popup.
   Drag-to-dismiss is wired to this element so the gesture matches the
   visual affordance. */
.sv-modal-logo {
    position: fixed;
    left: 50%;
    bottom: var(--sv-panel-height, 0px);
    z-index: 1102;
    width: 78px;
    height: 78px;
    transform: translate(-50%, 50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 480ms cubic-bezier(0.4, 0, 0.1, 1),
                opacity 320ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s linear 320ms;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.sv-modal-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
.sv-modal-logo:active { cursor: grabbing; }
body.sv-modal-active .sv-modal-logo {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: transform 480ms cubic-bezier(0.4, 0, 0.1, 1),
                opacity 320ms cubic-bezier(0.4, 0, 0.1, 1),
                visibility 0s;
}
/* When the user is actively dragging, disable transform transitions
   so inline transform updates apply immediately. Specificity has to
   beat the body.sv-modal-active rule above. */
body.sv-modal-active .sv-modal-logo.is-dragging { transition: none; }

body.sv-modal-active { overflow: hidden; }