/*
 * Demo booking (Cal.com inline embed) on the product page's closing section.
 *
 * That section is the dark one; the booker Cal renders is a light widget, so it
 * sits in its own paper-coloured panel rather than bleeding onto the black.
 * Everything here is scoped under .book so it cannot reach the rest of the page,
 * whose styles live in the other static/css/product/*.css files.
 */

.book { margin-top: 32px; }

/* Both states start hidden and exactly one is revealed once the booking config
 * has been fetched - otherwise a slow response flashes the wrong one. */
.book-hidden { display: none; }

.book-panel {
  background: var(--paper);
  border-radius: 4px;
  padding: 10px;
  max-width: 980px;
  /* Cal sizes the iframe itself; this is a floor so the panel does not collapse
   * to nothing while the embed is still loading. */
  min-height: 620px;
}

.book-frame { width: 100%; overflow: hidden; }

/* Qualified with .close because product.html's own `.close p` rule is more
 * specific than a bare class and would otherwise win on colour and size. */
.close .book-note {
  color: #8d97a2;
  font-size: 14px;
  margin-top: 14px;
  max-width: 34em;
}

.close .book-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .book-panel { padding: 6px; min-height: 560px; }
}