/* Modal shell */
.dpb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.55);
}

.dpb-modal-overlay.is-open {
  display: block;
}

/* The hidden attribute is the source of truth when the modal is closed. */
.dpb-modal-overlay[hidden] {
  display: none;
}

.dpb-modal-dialog {
  position: relative;
  background: #fff;
  max-width: 980px;
  margin: 4vh auto;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 8px;
}

/* Full-bleed sheet on mobile: the widget lays out its own gutters and expects
   the full viewport width, so the dialog contributes no margin or padding. */
@media (max-width: 782px) {
  .dpb-modal-dialog {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh; /* excludes mobile browser chrome where supported */
    max-height: none;
    border-radius: 0;
  }

  /* No dialog padding left to sit in, so inset the close button slightly and
     keep it legible over whatever the widget renders underneath. */
  .dpb-modal-close {
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }
}

.dpb-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #eee;
  color: #222;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.dpb-modal-close:hover {
  background: #ddd;
}

.dpb-modal-close:focus-visible {
  outline: 2px solid #0b5cab;
  outline-offset: 2px;
}

/* Admin-only placeholder shown by [book_button] before credentials are saved. */
.dpb-unconfigured {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed #c00;
  border-radius: 4px;
  color: #c00;
  font-size: 14px;
}

/* Make the DigiPharma panel flow inside the modal instead of fixed-overlaying
   the viewport. The widget renders a position:fixed card by design; these
   overrides pin it into the document flow within our dialog.

   Deliberately no max-height override: the widget sets its own inline
   `max-height: min(92vh, 100vh - 32px)` and scrolls its content internally.
   Removing that cap makes the panel outgrow the viewport and forces a second,
   nested scrollbar on the dialog. */
#digipharma-booking-widget > div.fixed {
  position: static !important;
  inset: auto !important;
}

/* Let wheel scrolling chain out to the modal and page once an inner area has
   nothing left to scroll, but leave the widget's own scrolling intact.
   Do NOT add overflow:visible here. The service list is its own scroller
   (ul.max-h-[50vh].overflow-y-auto); unsetting its overflow spills the whole
   list out of the panel, whose overflow:hidden then clips it out of reach. */
#digipharma-booking-widget > div.fixed .overscroll-contain,
#digipharma-booking-widget > div.fixed [class~="overflow-y-auto"] {
  overscroll-behavior: auto !important;
}

/* The widget applies a body scroll-lock on open; the modal manages scrolling
   itself via the html.dpb-modal-open class below. */
body:has(#digipharma-booking-widget) {
  overflow: auto !important;
}

html.dpb-modal-open {
  overflow: hidden;
}