/* Réservation modal */
.rndv-modal {
  width: 50vw;
  max-width: 50vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  color: #000;
  z-index: 1000;
  will-change: transform;
  /* Slide from right */
  transform: translateX(100%);
  transition: transform 300ms ease;
}

.rndv-modal.is-open {
  transform: translateX(0);
}

/* When <dialog> is not supported and we force [open], mimic fixed panel */
.rndv-modal[open] {
  display: grid;
}

.rndv-modal::backdrop {
  background: rgba(227, 225, 221, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease;
}

/* Tie the visible state to the animated class, not the [open] attr, so we can fade out before close() */
.rndv-modal.is-open::backdrop {
  opacity: 1;
}

button.rndv-modal__close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  padding: 48px;
  color: #000;
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 2;
}

.rndv-modal__body {
  overflow: auto;
  height: 100%;
  padding: 64px 132px 64px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  scrollbar-width: none;

  @media (max-width: 1024px) {
    padding: 64px var(--padding-x);
  }
}

.rndv-widget-container {
  @media (min-width: 1025px) {
    width: 80%;
  }

  @media (max-width: 1024px) {
    width: 100%;
  }
}

/* Mobile behavior: full screen */
@media (max-width: 1024px) {
  .rndv-modal {
    width: 100vw;
    max-width: 100vw;
  }
}

/* Button spacing near variations */
#rndv-open {
  @media (max-width: 1024px) {
    position: fixed;
    inset: auto var(--padding-x) var(--padding-x);
    z-index: 1;
  }
}

/* Scroll lock when modal is open */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
}