/**
 * The request-a-quote dialog.
 *
 * Extracted from device.css in section 15, when the catalog's comparison columns gained their own
 * Request Quote buttons: the dialog is now rendered on the catalog page too, and device.css is the
 * device page's stylesheet in its entirety - far more than the catalog needs, and named for a
 * page the catalog is not.
 *
 * One copy, loaded by both pages, so the two surfaces cannot drift. It depends on the design
 * tokens device.css declares on :root, so the two are enqueued together.
 */

/* Tokens, declared on the dialog rather than inherited.
   device.css scopes the palette to `.calamp-device`, which the dialog sits inside on a device page
   and outside on the catalog. Declaring them here makes this file standalone; on a device page the
   element-level values simply shadow the inherited ones, and they are identical. */
.calamp-device__quote {
  --calamp-cyan: #00afd7;
  --calamp-ink: #253746;
  --calamp-muted: #4f4f4f;
  --calamp-divider: #dde5ed;
  --calamp-canvas: #fff;
  --calamp-surface: #f4f8fa;
  --calamp-radius-lg: 20px;
}

/* The mockup's shared eyebrow: small, spaced, uppercase, cyan on a dark tile. Moved here from
   device.css because the dialog needs it on the catalog page, where that file is not loaded. The
   device page's CTA banner uses the same class and the two stylesheets are always enqueued
   together, so there is still one copy. */
.calamp-device__eyebrow {
  margin: 0 0 14px;
  color: var(--calamp-cyan);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* The dialog element itself is the full-viewport centering box, so it carries no chrome - the
   panel inside does. That split is what lets a click on this element mean "backdrop". */
.calamp-device__quote {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 24px;
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
  visibility: hidden;
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: -1;
}

.calamp-device__quote[open] {
  display: grid;
  place-items: center;
  visibility: visible;
  position: static;
  pointer-events: all;
  z-index: auto;
}

.calamp-device__quote::backdrop {
  background: rgba(5, 22, 37, 0.62);
}

.calamp-device__quote-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--calamp-divider);
  border-radius: var(--calamp-radius-lg);
  color: var(--calamp-ink);
  background: var(--calamp-canvas);
  box-shadow: 0 28px 80px rgba(5, 22, 37, 0.35);
}

.calamp-device__quote-panel h2 {
  margin: 0 0 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--calamp-cyan);
  color: var(--calamp-cyan);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.1;
}

.calamp-device__quote-panel > p:not(.calamp-device__eyebrow) {
  max-width: 570px;
  margin: 0 0 24px;
  color: var(--calamp-muted);
}

.calamp-device__quote-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--calamp-muted);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: color 180ms ease-out, background-color 180ms ease-out;
}

.calamp-device__quote-close:hover,
.calamp-device__quote-close:focus-visible {
  color: var(--calamp-ink);
  background: var(--calamp-surface);
}

.calamp-device__quote-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

/* Gravity Forms brings its own styling, which the rest of the site already uses - the only thing
   asked of it here is that it not overflow the panel. */
.calamp-device__quote-panel .gform_wrapper {
  margin: 0;
}