/* ═══════════════════════════════════════════════════════════════════════════
   quick-request-widget.css
   Self-contained. Every rule is scoped under #cmg-qr-root so this can be
   dropped onto any page without touching or being affected by that page's
   own styles. Palette matches checkout.css's navy/gold treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

#cmg-qr-root {
  font-family: Arial, sans-serif;
  /* Single calculated spacing scale — every field/row/label gap below
     references one of these instead of its own magic number. Dialed back
     one notch from the previous pass (4/8px read as too cramped) —
     --qr-space-xs (label→input) and --qr-space-sm (field→field, row→row —
     the only "between fields" gap anywhere) are still one deliberate unit,
     just a slightly roomier one. Every field uses the SAME bottom margin
     now — a one-off tighter margin on Email (meant to pair it closer to
     Description) used to make the gap around the "What happened?"
     textarea read as uneven next to every other field; removed so the
     rhythm is uniform top-to-bottom. */
  --qr-space-xs: 6px;
  --qr-space-sm: 10px;
}

#cmg-qr-root .cmg-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  /* Generous top/bottom inset so the form reads as a floating modal with
     the page visible above and below it, not a full-screen sheet. Grows
     past the minimum on notched phones via the safe-area insets. */
  padding:
    max(32px, calc(env(safe-area-inset-top, 0px) + 16px))
    16px
    max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(2px);
}

#cmg-qr-root .cmg-qr-overlay.cmg-qr-open {
  display: flex;
}

@media (min-width: 601px) {
  #cmg-qr-root .cmg-qr-overlay {
    padding: 48px 24px;
  }
}

body.cmg-qr-no-scroll {
  overflow: hidden;
}

#cmg-qr-root .cmg-qr-modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  /* Fallback first; the % value then fits the modal inside the overlay's
     padded area (the overlay is fixed with a definite height), so it
     tracks the real visible viewport on phones instead of 100vh. */
  max-height: calc(100vh - 64px);
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Side/bottom padding moved onto .cmg-qr-body (see below) — top padding
     stays here since the close button/title sit directly in the modal.
     This is WHY the payment icons were getting cut: .cmg-qr-sticky-footer
     used negative side/bottom margins to bleed past this padding out to
     the modal's edge, and a negative margin on the last child of an
     overflow:auto container shrinks how much scrollable height the
     container thinks it has — so the container stopped scrolling exactly
     enough to leave the sticky footer's painted background overlapping
     the still-visible tail of the Payment Method grid above it. Giving
     the footer its own padding instead of fighting the modal's removes
     the negative margin entirely, so there's nothing left to shrink the
     scrollable height. */
  /* Top padding lives on .cmg-qr-body now, so the sticky close button is
     measured from the modal's true top edge in every browser. */
  padding: 0;
  border-radius: 14px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 50% -10%, rgba(96, 165, 250, 0.16), transparent 40%),
    linear-gradient(180deg, #0b1220 0%, #07101f 60%, #050914 100%);
  border: 1px solid rgba(201, 167, 104, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Outer box is the real 44x44 tap target (Apple HIG minimum) — the visible
   32px circle is drawn by ::before, inset 6px on every side ((44-32)/2),
   so the button LOOKS identical to before while the actual hit area grows.
   Positioned so the circle's visual center matches where it sat at
   top/right:12px, width/height:32px previously. */
/* Carries the horizontal + bottom padding the modal used to have —
   everything except the close button sits inside this now, so title,
   subtitle and every field get the same 24px inset as before. */
#cmg-qr-root .cmg-qr-body {
  padding: 28px 24px 4px;
}

/* Close (×) — pinned. It used to be position:absolute inside the scrolling
   modal, so it scrolled away with the form. position:sticky keeps it at the
   top of the visible modal while the content moves under it.
   The negative top/bottom margins cancel its 44px height, so it takes no
   space in the flow (the title starts exactly where it did before).
   Look matches the site's own close button (checkout.css .splash-close):
   38px circle, faint white hairline, dark translucent fill, blur, white ×.
   The outer box stays a 44x44 tap target; the visible circle is the
   ::before, inset 3px. The button's own z-index creates the stacking
   context that keeps that circle above the modal background. */
#cmg-qr-root .cmg-qr-close {
  position: sticky;
  top: 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 6px -22px auto;
  padding: 0 0 2px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#cmg-qr-root .cmg-qr-close::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(15, 26, 46, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s, border-color 0.15s;
}
#cmg-qr-root .cmg-qr-close:hover::before {
  background: rgba(30, 48, 82, 0.88);
  border-color: rgba(255, 255, 255, 0.3);
}
#cmg-qr-root .cmg-qr-close:focus-visible {
  outline: 2px solid rgba(244, 200, 106, 0.8);
  outline-offset: -2px;
  border-radius: 50%;
}
/* Applied while a submission is in flight or a failure message is on
   screen awaiting acknowledgment, so it's visually obvious this control
   is temporarily inert — matches the submit button's own disabled look. */
#cmg-qr-root .cmg-qr-close--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Soft top edge: once the form scrolls, content fades out under the pinned
   close button instead of being clipped hard (and no longer collides with
   the "Best Value" pill). Takes no layout space. Only browsers with
   scroll-driven animations get it; elsewhere the old hard edge remains. */
@supports (animation-timeline: scroll()) {
  #cmg-qr-root .cmg-qr-modal::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 6;
    display: block;
    height: 56px;
    margin-bottom: -56px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, #0b1220 0%, rgba(11, 18, 32, 0.96) 55%, rgba(11, 18, 32, 0) 100%);
    animation: cmgQrTopFade linear both;
    animation-timeline: scroll(self block);
    animation-range: 0 28px;
  }
  @keyframes cmgQrTopFade { to { opacity: 1; } }
}

#cmg-qr-root .cmg-qr-title {
  margin: 0 28px 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
}

#cmg-qr-root .cmg-qr-subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  color: #94a3b8;
}

/* Vertical rhythm is a single calculated scale — every field/row gets the
   SAME 10px bottom margin, full stop. Rows carry their OWN margin-bottom;
   their child .cmg-qr-field elements are zeroed out (see
   .cmg-qr-row > .cmg-qr-field below) so a grid item's margin can't
   silently stack on top of the row's, which is what made the gap after
   the Rink/Date/Time row inconsistent with every other gap before. */
#cmg-qr-root .cmg-qr-field {
  margin-bottom: var(--qr-space-sm);
}

/* Matches checkout's .section-sub / .checkout-credit-save-accent treatment
   for the "Use what you need today. Save extras for future games." line,
   ported here so the Clip Package field carries the same reassurance
   copy checkout shows under its own package selector. */
#cmg-qr-root .cmg-qr-subcopy {
  margin: 0 0 var(--qr-space-sm);
  font-size: 12px;
  color: rgba(226, 237, 255, 0.82);
}
#cmg-qr-root .cmg-qr-subcopy-accent {
  color: #ffe8a6;
  font-weight: 750;
}

/* Two short fields sharing one row (e.g. Rink + Game Date) — collapses to
   a single column on very narrow viewports so nothing gets uncomfortably
   cramped. Children keep their own .cmg-qr-field bottom margin, so no
   override needed here. */
#cmg-qr-root .cmg-qr-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qr-space-sm);
  margin-bottom: var(--qr-space-sm);
}
#cmg-qr-root .cmg-qr-row > .cmg-qr-field {
  margin-bottom: 0;
}
#cmg-qr-root .cmg-qr-row--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#cmg-qr-root .cmg-qr-row > .cmg-qr-field {
  min-width: 0;
}
@media (max-width: 360px) {
  #cmg-qr-root .cmg-qr-row {
    grid-template-columns: 1fr;
  }
  #cmg-qr-root .cmg-qr-row--thirds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Arena (wide) + Rink (narrow) share a row; Game Date + Game Start Time
   share the next. Keeps every label on one line and every box sized to its
   answer. Arena/Rink stays two columns even below 360px (declared after the
   360px collapse above so it wins on source order). */
#cmg-qr-root .cmg-qr-row--arena-rink {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

#cmg-qr-root .cmg-qr-label {
  display: block;
  margin-bottom: var(--qr-space-xs);
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}

#cmg-qr-root .cmg-qr-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  /* 16px, not 15px: below 16px, iOS Safari auto-zooms the page when a
     field is focused, which is what made this modal shift left/right on
     phones. Same fix and same reasoning as checkout.css's form inputs. */
  font-size: 16px;
  font-family: inherit;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  outline: none;
}
#cmg-qr-root .cmg-qr-input {
  text-overflow: ellipsis;
}
#cmg-qr-root .cmg-qr-input::placeholder {
  color: #64748b;
  /* One placeholder size for every field. Field text stays 16px (iOS zoom);
     14px lets "e.g. Rink 1" fit its narrow column on 360px phones. */
  font-size: 14px;
}
/* The three-across row is narrow on phones. iOS only zooms based on the
   field's own text size (kept at 16px above), not the placeholder's, so
   the hint text here can be smaller and tighter without reintroducing
   the zoom. */
#cmg-qr-root .cmg-qr-row--thirds .cmg-qr-input,
#cmg-qr-root .cmg-qr-row--compact .cmg-qr-input {
  padding-left: 9px;
  padding-right: 9px;
}
#cmg-qr-root .cmg-qr-input:focus {
  border-color: rgba(244, 200, 106, 0.7);
  box-shadow: 0 0 0 3px rgba(244, 200, 106, 0.16);
}
/* Click-time validation error state — matches checkout.css's .input-error
   (border-color: #dc2626) so a rejected field looks the same way here as
   it does on the main checkout form. */
#cmg-qr-root .cmg-qr-input--error {
  border-color: #dc2626;
}
/* A flagged field keeps its red border while focused (no gold ring). */
#cmg-qr-root .cmg-qr-input--error:focus {
  border-color: #dc2626;
  box-shadow: none;
}
/* "How did you hear about us?" — optional select, mirrors checkout's
   .checkout-heard-about block. Same input chrome as the text fields; the
   native arrow is replaced so it matches the dark theme, and 16px (from
   .cmg-qr-input) keeps iOS from zooming on focus. */
#cmg-qr-root .cmg-qr-optional {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}
#cmg-qr-root .cmg-qr-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
#cmg-qr-root .cmg-qr-select option {
  color: #0f172a;
  background: #ffffff;
}
#cmg-qr-root .cmg-qr-heard-other {
  margin-top: var(--qr-space-xs);
}
#cmg-qr-root .cmg-qr-heard-other[hidden] {
  display: none;
}
#cmg-qr-root .cmg-qr-textarea {
  min-height: 64px;
  resize: vertical;
}

/* No reserved min-height when empty — with 7+ of these in the form, a
   permanent 16px+margin per field (even with no error) was the single
   biggest source of dead vertical space. Grows to fit only once
   flagQrFieldError() actually puts text in it. */
#cmg-qr-root .cmg-qr-error {
  display: block;
  font-size: 12px;
  color: #f87171;
}
#cmg-qr-root .cmg-qr-error:not(:empty) {
  margin-top: var(--qr-space-xs);
}

#cmg-qr-root .cmg-qr-package-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* One row, always: each option takes an equal share of the width whether
   there are 3 (CAD: PayPal / Interac / Card) or 2 (USD: Interac is hidden).
   minmax(0, 1fr) lets columns shrink below their content, so a long label
   wraps inside its button instead of forcing a second row. */
#cmg-qr-root .cmg-qr-payment-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
#cmg-qr-root .cmg-qr-option--payment {
  min-width: 0;
  min-height: 68px;
  padding: 10px 4px;
}
/* "Interac e-Transfer" is the only text label; it wraps to two short
   lines ("Interac" / "e-Transfer") rather than stretching its column. */
#cmg-qr-root .cmg-qr-option--payment .cmg-qr-option-main {
  font-size: 12px;
  line-height: 1.15;
  text-wrap: balance;
}
@media (min-width: 401px) {
  #cmg-qr-root .cmg-qr-payment-grid {
    gap: 8px;
  }
}
@media (max-width: 340px) {
  #cmg-qr-root .cmg-qr-payment-grid {
    gap: 4px;
  }
  #cmg-qr-root .cmg-qr-option--payment {
    padding: 8px 2px;
  }
  #cmg-qr-root .cmg-qr-option--payment .cmg-qr-option-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
}

#cmg-qr-root .cmg-qr-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  font-family: inherit;
  font-size: 13px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* Hover and selected are soft gold, the same states checkout's package and
   payment tiles use. */
#cmg-qr-root .cmg-qr-option:hover {
  border-color: rgba(244, 200, 106, 0.5);
}
#cmg-qr-root .cmg-qr-option:focus-visible {
  outline: none;
  border-color: rgba(244, 200, 106, 0.85);
  box-shadow: 0 0 0 3px rgba(244, 200, 106, 0.22);
}
#cmg-qr-root .cmg-qr-option--active {
  border-color: rgba(244, 200, 106, 0.7);
  background: rgba(244, 200, 106, 0.06);
  box-shadow: 0 0 18px rgba(244, 200, 106, 0.10);
  color: #f8fafc;
}
#cmg-qr-root .cmg-qr-option--active:focus-visible {
  box-shadow: 0 0 0 3px rgba(244, 200, 106, 0.22), 0 0 18px rgba(244, 200, 106, 0.10);
}
#cmg-qr-root .cmg-qr-option-main {
  font-weight: 700;
}
#cmg-qr-root .cmg-qr-option-sub {
  font-size: 11px;
  color: #94a3b8;
}
#cmg-qr-root .cmg-qr-option-badge {
  display: inline-block;
  max-width: 100%;
  margin-top: 1px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}
/* "Most Popular": soft-gold outline, no fill — same as checkout's .option-badge.
   (Class keeps its old name because JS emits it.) */
#cmg-qr-root .cmg-qr-option-badge--blue {
  background: transparent;
  border: 1px solid rgba(244, 200, 106, 0.42);
  color: #ffe8a6;
}
/* "Best Value" / "Recommended": filled soft gold, brighter than "Most Popular",
   same as checkout's .option-badge--green. The class keeps its old name
   because JS emits it (green is for live / success only). */
#cmg-qr-root .cmg-qr-option-badge--green {
  background: rgba(244, 200, 106, 0.18);
  border: 1px solid rgba(244, 200, 106, 0.65);
  color: #fff3c4;
  box-shadow: 0 0 10px rgba(244, 200, 106, 0.14);
}

/* Payment method icons — same source assets as the main checkout form
   (checkout.css's .payment-logo family), resized for this smaller,
   icon-above-label button layout instead of checkout's inline row. */
#cmg-qr-root .cmg-qr-payment-icon {
  display: block;
  height: 20px;
  width: auto;
  max-width: 68px;
  object-fit: contain;
}
#cmg-qr-root .cmg-qr-payment-icon--paypal {
  height: 15px;
}
#cmg-qr-root .cmg-qr-payment-icon--interac {
  height: 24px;
  border-radius: 3px;
}
#cmg-qr-root .cmg-qr-payment-icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#cmg-qr-root .cmg-qr-payment-icon--visa {
  height: 11px;
}
#cmg-qr-root .cmg-qr-payment-icon--mastercard {
  height: 16px;
}

/* No reserved min-height when empty — inside the compact sticky footer
   that empty 18px + margins read as dead grey space above the button.
   Text still pushes the button down naturally when a status appears. */
#cmg-qr-root .cmg-qr-status {
  margin: 0 0 8px;
  font-size: 13px;
  color: #94a3b8;
}
#cmg-qr-root .cmg-qr-status:empty {
  margin: 0;
}
#cmg-qr-root .cmg-qr-status--success {
  color: #86efac;
}
#cmg-qr-root .cmg-qr-status--error {
  color: #f87171;
}

#cmg-qr-root .cmg-qr-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 13px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(246, 208, 137, 0.55);
  background: linear-gradient(180deg, #f6d089 0%, #e3ab41 45%, #bd8330 100%);
  box-shadow:
    0 14px 30px rgba(189, 131, 48, 0.28),
    0 0 20px rgba(227, 171, 65, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
#cmg-qr-root .cmg-qr-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #fbdca0 0%, #edb954 45%, #c8933a 100%);
  transform: translateY(-1px);
}
#cmg-qr-root .cmg-qr-submit:focus-visible {
  outline: 2px solid #fbdca0;
  outline-offset: 3px;
}
/* Disabled AND processing ("Creating Order...") — clearly flatter and
   duller than the live gold so it never looks clickable mid-submit. */
#cmg-qr-root .cmg-qr-submit:disabled {
  cursor: default;
  opacity: 0.55;
  filter: saturate(0.55);
  box-shadow: none;
  transform: none;
}
#cmg-qr-root .cmg-qr-submit-main {
  font-size: 15px;
  font-weight: 700;
  color: #241a06;
}
#cmg-qr-root .cmg-qr-submit-sub {
  font-size: 12px;
  color: rgba(36, 26, 6, 0.75);
}

@media (max-width: 420px) {
  #cmg-qr-root .cmg-qr-package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sticky CTA footer — mirrors checkout.css's .checkout-cta-bar treatment
   (same gradient/blur/gold border-top) so the submit button stays
   reachable without scrolling the whole modal down, matching the "fits on
   one page" goal on phones. Carries its OWN horizontal padding now
   (instead of the modal's), because it's a plain sibling of .cmg-qr-body
   at the modal's true edge — no negative margins required to reach it,
   which is the actual fix for the payment-icon overlap (see the note on
   .cmg-qr-modal above). Now sticky at every screen size (see rule below). */
#cmg-qr-root .cmg-qr-sticky-footer {
  /* Sticky at ALL sizes now (was <=600px only) — on a short desktop
     window the modal scrolls internally, and the submit button scrolled
     away with the form. The footer's own bottom padding also gives the
     button breathing room from the modal's rounded edge when nothing
     overflows. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: var(--qr-space-sm);
  padding: 8px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(201, 167, 104, 0.32);
  background: linear-gradient(
    180deg,
    rgba(5, 9, 20, 0) 0%,
    rgba(7, 16, 31, 0.85) 25%,
    #050914 55%
  );
  backdrop-filter: blur(6px);
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}

/* One-line reassurance under the submit button — same wording as the main
   checkout's CTA trust line. Kept to a single small line so the sticky
   footer stays compact on short windows. */
#cmg-qr-root .cmg-qr-trust {
  margin: 6px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(203, 213, 225, 0.78);
}
/* Thin line padlock (replaces the emoji) — same drawing and stroke as
   checkout's .checkout-cta-trust__icon. */
#cmg-qr-root .cmg-qr-trust__icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}