/* ============================================
   NARDEEN HAIR STUDIO — Booking page (/book)

   The scheduler is Vagaro's, served from a cross-origin iframe
   (www.vagaro.com/Users/BusinessWidget.aspx). Its contentDocument is
   unreachable, so nothing inside it — background, type, button colour —
   can be restyled from here. That interior is changed only in Vagaro's
   own widget customiser.

   What is ours is the frame around it. The aim is to stop the white panel
   reading as a rectangle pasted onto black, and make it read as matted
   artwork: dark card, gold hairline, a margin of black between the border
   and the white, corners clipped to the site radius.
   ============================================ */

.booking { padding-top: 40px; }

/* Vagaro hard-codes width:250px on the .vagaro wrapper in the embed snippet
   and width="752" on the iframe. Neither is a size we chose, so the panel
   would sit narrower than the 800px container and read as misaligned rather
   than centred. Let the wrapper fill the column and the rules below scale
   the iframe to match. */
.booking .vagaro {
  width: 100% !important;
  max-width: 100% !important;
}

/* Vagaro's title slot. It ships empty (we set our own H1 in the hero), and
   its inline styling is light-theme Arial, so collapse it rather than let it
   reserve 26px of dead space above the panel. */
.embedded-widget-title:empty { display: none; }

/* --- The mat --- */
/* Vagaro's WidgetEmbeddedStyle sheet is injected by its loader script, so it
   lands *after* this file in the cascade and wins ties. Everything it also
   sets on .vagaro-container — padding, border, width — needs !important here
   or it silently reverts to a flush, borderless 752px block. Scoped under
   .booking so this never leaks past the booking page. */
.booking .vagaro-container.vagaro-embedded-widget {
  position: relative;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: border-color var(--transition);
}

.booking .vagaro-container.vagaro-embedded-widget:hover {
  border-color: var(--border-hover) !important;
}

/* Gold hairline across the top edge, fading at both ends — the same accent
   the section headers use, so the panel joins the page's vocabulary. */
.booking .vagaro-container.vagaro-embedded-widget::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 1;
}

/* --- The window onto Vagaro --- */
/* overflow:hidden is what clips the widget's square white corners to the
   site's radius; without it the border-radius above has nothing to bite on. */
.booking .vagaro-embedded-widget .vagaro-iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}

/* Vagaro sets width="752" as an attribute and drives height from its own
   script as the customer moves through the flow — override the width only,
   never the height, or the panel will clip mid-checkout. */
.booking .vagaro-embedded-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  border: 0;
}

/* The hidden popup-mode container ships alongside the embedded one. */
.vagaro-container.vagaro-window-widget:empty { display: none; }

@media (max-width: 640px) {
  .vagaro-container.vagaro-embedded-widget {
    padding: 8px;
    border-radius: var(--radius-sm);
  }
  .vagaro-container.vagaro-embedded-widget::before {
    left: 16px;
    right: 16px;
  }
}