/* wp-content/plugins/notts-osteo-elements/assets/css/booking.css
 *
 * The booking frame.
 *
 * Author: Sean Burn
 */

.nosteo-book__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nosteo-hair-soft);
  border-radius: 16px;
  background: var(--nosteo-white);
  box-shadow: 0 1px 2px rgba(50, 62, 72, 0.05), 0 30px 64px -34px rgba(50, 62, 72, 0.34);
  /* Once the booking system reports its own height the frame follows it rather than jumping. */
  transition: min-height 420ms var(--nosteo-ease);
}

/* ---------------------------------------------------------------- waiting
 *
 * A shape, not a spinner over a void. The skeleton is roughly the proportions of a booking form —
 * a couple of wide rows and a grid of slots — so the space is already the right shape when the
 * real thing lands in it.
 */

.nosteo-book__wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(24px, 4vw, 56px);
  background: var(--nosteo-white);
  transition: opacity 400ms var(--nosteo-ease);
}

.nosteo-book__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--nosteo-hair);
  border-top-color: var(--nosteo-accent);
  animation: nosteo-book-spin 760ms linear infinite;
}
@keyframes nosteo-book-spin { to { transform: rotate(360deg); } }

.nosteo-book__waiting {
  margin: 0;
  font-size: 15px;
  color: var(--nosteo-muted);
}

.nosteo-book__skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 560px);
  margin-top: 8px;
}
.nosteo-book__skeleton i {
  display: block;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--nosteo-surface) 25%,
    var(--nosteo-tint) 37%,
    var(--nosteo-surface) 63%
  );
  background-size: 400% 100%;
  animation: nosteo-book-sheen 1.5s ease-in-out infinite;
}
/* The first two run full width, so it reads as fields above a grid of times. */
.nosteo-book__skeleton i:nth-child(1),
.nosteo-book__skeleton i:nth-child(2) { grid-column: 1 / -1; height: 48px; }
.nosteo-book__skeleton i:nth-child(4) { animation-delay: 0.12s; }
.nosteo-book__skeleton i:nth-child(5) { animation-delay: 0.24s; }
.nosteo-book__skeleton i:nth-child(6) { animation-delay: 0.36s; }

@keyframes nosteo-book-sheen {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* Fifteen seconds in with nothing loaded: stop pretending it is about to arrive. */
.nosteo-book__frame.is-slow .nosteo-book__spinner { animation-duration: 2.4s; opacity: 0.5; }
.nosteo-book__frame.is-slow .nosteo-book__skeleton { opacity: 0.4; }

.nosteo-book__frame.is-loaded .nosteo-book__wait {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the frame */

.nosteo-book__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  opacity: 0;
  transition: opacity 420ms var(--nosteo-ease);
}
.nosteo-book__frame.is-loaded .nosteo-book__iframe,
.nosteo-book__iframe.is-ready { opacity: 1; }

/* Once a height has been posted out, the iframe owns it and stops being stretched to the frame. */
.nosteo-book__frame.is-sized .nosteo-book__iframe { height: auto; min-height: 0; }

.nosteo-book__fallback {
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--nosteo-muted);
}
.nosteo-book__fallback a {
  color: var(--nosteo-ink);
  font-weight: var(--nosteo-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Colour restated on both states — the theme sets a global a:hover colour at a specificity that
   beats a single class, so a hover rule without `color` protects nothing. */
.nosteo-book .nosteo-book__fallback a:hover,
.nosteo-book .nosteo-book__fallback a:focus { color: var(--nosteo-accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .nosteo-book__frame,
  .nosteo-book__wait,
  .nosteo-book__iframe { transition: none; }
  .nosteo-book__spinner { animation-duration: 2s; }
  .nosteo-book__skeleton i { animation: none; }
}