iframe {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.show-dining-reserve {
  &::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgb(0, 0, 0, 0.5);

    animation: getBlur 0.5s forwards var(--ease);
    z-index: 88;
  }
  &.hide-reserve {
    &::before {
      animation: outBlur 0.5s forwards var(--ease);
    }
  }
}

.dining-reservation{
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(350px, 40vw, 100%);
  height: 100vh;
  height: 100svh;
  z-index: 200;
  border: none;
  background-color: #fff;
  &.show-me {
    animation: showReservation 0.5s forwards var(--ease);
  }
  &.hide-me {
    animation: hideReservation 0.5s forwards var(--ease);
  }
}

.close-reservation {
  position: fixed;
  top: 1rem;
  right: 40vw;
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHOSURBVHgB3dnvbcIwEAVwiwkYIZu0G7QjdIOyAd2AkRiBbpARGOHViXzqqZWTOPGfe36SP0BIfD8ckB075wPg7NtnaIPrJN5y8e0Z2pe8Ofg24jdjD+gJiP95dWFU/4YaHcFOuZ4i5wy+3RnR4da9Rg5/y+93jHwjVCO9MLLz6OoPDuzozVh1Ai06GatOpEPvxqoL0KAPY9WFzKOzYdUFzaKzY9WFzaGLYVUHZtDFsaqj5uhqWNVhM3R1rOq4OroZVhVQDd0cqwopjjaDVQUVQ5vDqsKyo81iVYHZ0OaxkhxoGqzkCJoOK9mDpsVKUtD0WMkWdDdYyQr62RVWsoLuCytJQPNjJQG9dBvfXKWcXJ18+HZeOP6ODjbw5mD531hnpEcnYPnRK9gbOtnAm4MNkwp0sIE3BwkzKHo0dkwXadE4MDemQyPDQoAGjYyrHvNoFFjimUWj4HrWHBoVFu9m0Kj4pKI5Gg0eyzRDo+EzqOrollhVQx20BayqpSzaElbVVAZtEatqy4u2jJVkQzNgJYfRTFjJbjQjVpKMZsZKNqN7wEo2oRHfAqHc61lB32Ng6o2tJfR08NITVhJBP+Tg2wT17cV1lIB+yO08vf4Bfcq470WYYDsAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: var(--primary);
  cursor: pointer;
  z-index: 200;

  animation: showCloseReserve 0.5s forwards var(--ease);
  transition: background-color 0.5s var(--ease);
  &:hover {
    background-color: var(--primary) 2;
  }
  &.hide-me {
    animation: hideCloseReserve 0.5s forwards var(--ease);
  }
}