/* ═══════════════════════════════════════════════════════════════════════════
   processing-overlay.css
   Shared "processing / confirmation" splash used by checkout.js and
   quick-request-widget.js, via the CMGProcessingOverlay component in
   processing-overlay.js.

   Consolidated from checkout.html's inline <style> block (the loader,
   glow-ramp, step-indicator, error-card and support-line rules) and
   checkout.css's `.checkout-processing` / `.processing-card` container
   rules. All computed values (colors, timings, keyframe percentages, blur
   amounts, box-shadow layers) are unchanged from the original — this is a
   rename + relocation, not a restyle.

   Everything is under the cmg-po- ("processing overlay") prefix, distinct
   from cmg-qr-* (quick-request widget) and any other cmg-* class on the
   site, per project convention — no bare IDs, so multiple instances could
   coexist safely if that's ever needed.

   The one new addition (not present in the original): .cmg-po-retry-btn.
   The original retry button borrowed checkout.html's page-level `.pay-btn`
   class, which is only defined in checkout.css and doesn't exist on pages
   that don't load it (e.g. the homepage, where the quick-request widget
   lives). Copied here so the component is fully self-contained and the
   widget's error-card retry button isn't left unstyled.
   ═══════════════════════════════════════════════════════════════════════════ */

.cmg-po-overlay {
  --cmg-po-navy: #020817;
  --cmg-po-navy-2: #08142a;
  --cmg-po-ice: #f6d089;   /* was light blue; now pale gold (name kept: it is referenced below) */
  --cmg-po-gold: #C9A768;      /* muted, metallic gold — not bright amber */
  --cmg-po-gold-rgb: 201, 167, 104;

  position: fixed;
  inset: 0;
  z-index: 10000; /* strictly greater than the widget's own modal overlay
                      (#cmg-qr-overlay, z-index 9999), so "splash on top of
                      modal" is guaranteed regardless of DOM insertion
                      order. Also fine on checkout, which has nothing else
                      near this range. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, 0.75);
  backdrop-filter: blur(8px);
}

.cmg-po-overlay.cmg-po-show {
  display: flex;
}

.cmg-po-card {
  position: relative;
  z-index: 0;
  width: min(420px, 100%);
  background: linear-gradient(145deg, rgba(15,26,46,0.96), rgba(8,15,29,0.96));
  border: 1px solid rgba(147,197,253,0.16);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.cmg-po-heading {
  margin: 16px 0 8px;
  font-size: 20px;
}

.cmg-po-card p {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.5;
}

/* ─── Loader (ring / glow / logo) ─────────────────────────────────────── */
.cmg-po-loader {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmg-po-loader-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cmg-po-gold-rgb),.40), rgba(246, 208, 137,.28) 55%, transparent 72%);
  filter: blur(7px);
  animation: cmgPoGlowPulse 2.1s ease-in-out infinite;
}
@keyframes cmgPoGlowPulse {
  0%, 100% { opacity: .55; transform: scale(.90); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.cmg-po-loader-logo {
  position: relative;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  animation: cmgPoLogoPulse 2.1s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(var(--cmg-po-gold-rgb),.5));
}
@keyframes cmgPoLogoPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.cmg-po-loader-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--cmg-po-gold) 85deg, var(--cmg-po-ice) 180deg, transparent 265deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: cmgPoRingRotate 1.8s linear infinite;
  opacity: .9;
}
@keyframes cmgPoRingRotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cmg-po-loader-glow,
  .cmg-po-loader-logo,
  .cmg-po-loader-ring {
    animation: none !important;
  }
}

/* ─── Status message / safety note / step indicator ───────────────────── */
.cmg-po-message {
  transition: opacity .25s ease;
}
.cmg-po-message.is-fading {
  opacity: 0;
}
.cmg-po-safety-note {
  margin-top: 14px;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .01em;
}
.cmg-po-step-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.cmg-po-step-indicator:not([hidden]) {
  display: flex;
}
.cmg-po-step-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cmg-po-step {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  color: #cbd5e1;
}
.cmg-po-step--done {
  color: var(--cmg-po-gold);
  border-color: rgba(var(--cmg-po-gold-rgb),.35);
  background: rgba(var(--cmg-po-gold-rgb),.08);
}
.cmg-po-step--next {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, .4);
  background: rgba(148, 163, 184, .10);
}
.cmg-po-step-arrow {
  color: #64748b;
  font-size: 12px;
}

/* ─── Glowing progress border ───────────────────────────────────────────
   The glow climbs continuously for as long as we're genuinely waiting —
   visibly alive the whole time, not just a quick flicker that goes flat.
   It never dims or bounces back down. The instant the order is actually
   confirmed, it springs up past its ambient ceiling to a bold, held gold
   glow — the payoff moment. */
.cmg-po-card--default::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: cmgPoGlowRampIn 9s cubic-bezier(.22, .61, .36, 1) 1 forwards;
}
@keyframes cmgPoGlowRampIn {
  0% {
    box-shadow:
      0 0 0 0   rgba(var(--cmg-po-gold-rgb), 0),
      0 0 0     rgba(var(--cmg-po-gold-rgb), 0),
      0 0 0     rgba(246, 208, 137, 0);
  }
  15% {
    box-shadow:
      0 0 0 1px  rgba(var(--cmg-po-gold-rgb), .28),
      0 0 16px   rgba(var(--cmg-po-gold-rgb), .16),
      0 0 34px   rgba(246, 208, 137, .09);
  }
  40% {
    box-shadow:
      0 0 0 1.5px rgba(var(--cmg-po-gold-rgb), .52),
      0 0 34px    rgba(var(--cmg-po-gold-rgb), .34),
      0 0 68px    rgba(246, 208, 137, .16);
  }
  70% {
    box-shadow:
      0 0 0 2px  rgba(var(--cmg-po-gold-rgb), .76),
      0 0 52px   rgba(var(--cmg-po-gold-rgb), .5),
      0 0 100px  rgba(var(--cmg-po-gold-rgb), .22),
      0 0 140px  rgba(246, 208, 137, .1);
  }
  100% {
    box-shadow:
      0 0 0 2.5px rgba(var(--cmg-po-gold-rgb), .92),
      0 0 64px    rgba(var(--cmg-po-gold-rgb), .62),
      0 0 120px   rgba(var(--cmg-po-gold-rgb), .3),
      0 0 170px   rgba(246, 208, 137, .12);
  }
}
/* Order confirmed — one confident spring past the ambient ceiling, then
   holds there rock-steady for the redirect countdown. */
.cmg-po-card--default.is-complete {
  animation: cmgPoCardPop .7s cubic-bezier(.34, 1.56, .64, 1) 1 forwards;
}
.cmg-po-card--default.is-complete::before {
  animation: cmgPoGlowSeal .7s cubic-bezier(.34, 1.56, .64, 1) 1 forwards;
}
@keyframes cmgPoCardPop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes cmgPoGlowSeal {
  0% {
    box-shadow:
      0 0 0 2.5px rgba(var(--cmg-po-gold-rgb), .92),
      0 0 64px    rgba(var(--cmg-po-gold-rgb), .62),
      0 0 120px   rgba(var(--cmg-po-gold-rgb), .3),
      0 0 170px   rgba(246, 208, 137, .12);
  }
  100% {
    box-shadow:
      0 0 0 3px  rgba(var(--cmg-po-gold-rgb), 1),
      0 0 80px   rgba(var(--cmg-po-gold-rgb), .9),
      0 0 150px  rgba(var(--cmg-po-gold-rgb), .55),
      0 0 210px  rgba(246, 208, 137, .18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cmg-po-card--default::before {
    animation: none !important;
    box-shadow:
      0 0 0 2.5px rgba(var(--cmg-po-gold-rgb), .92),
      0 0 64px    rgba(var(--cmg-po-gold-rgb), .62),
      0 0 120px   rgba(var(--cmg-po-gold-rgb), .3),
      0 0 170px   rgba(246, 208, 137, .12);
  }
  .cmg-po-card--default.is-complete {
    animation: none !important;
  }
  .cmg-po-card--default.is-complete::before {
    box-shadow:
      0 0 0 3px  rgba(var(--cmg-po-gold-rgb), 1),
      0 0 80px   rgba(var(--cmg-po-gold-rgb), .9),
      0 0 150px  rgba(var(--cmg-po-gold-rgb), .55),
      0 0 210px  rgba(246, 208, 137, .18);
  }
}

/* ─── Error card ─────────────────────────────────────────────────────────
   The gold "confidence" glow is a success/progress signal, so it's
   switched off here rather than inherited from .cmg-po-card; glowing
   brighter in gold while saying something went wrong would be a mismatched
   signal. The card itself stays calm and neutral so the message gets full
   attention. The one gold touch left is on the button that gets you back
   into the flow. */
.cmg-po-card--error {
  text-align: center;
  position: relative;
}
.cmg-po-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}
.cmg-po-error-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

/* Self-contained retry-button styling — visually identical to checkout's
   page-level .pay-btn (same metallic-gold family used across the site),
   copied here rather than depended on so this component doesn't assume
   the host page loads checkout.css. */
.cmg-po-retry-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: 13px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #241a06;
  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),
    inset 0 -1px 0 rgba(40, 28, 10, 0.22);
  position: relative;
  isolation: isolate;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cmg-po-retry-btn:hover {
  background: linear-gradient(180deg, #fbdca0 0%, #edb954 45%, #c8933a 100%);
  border-color: rgba(251, 220, 160, 0.75);
  transform: translateY(-1px);
}
.cmg-po-retry-btn:active {
  transform: translateY(0);
}
.cmg-po-retry-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: cmgPoRetryPulse 2.1s ease-in-out infinite;
}
@keyframes cmgPoRetryPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px  rgba(var(--cmg-po-gold-rgb), .3),
      0 0 20px   rgba(var(--cmg-po-gold-rgb), .18);
  }
  50% {
    box-shadow:
      0 0 0 2px  rgba(var(--cmg-po-gold-rgb), .68),
      0 0 42px   rgba(var(--cmg-po-gold-rgb), .4),
      0 0 78px   rgba(var(--cmg-po-gold-rgb), .16);
  }
}
.cmg-po-retry-btn:hover::after,
.cmg-po-retry-btn:focus-visible::after {
  animation-play-state: paused;
  box-shadow:
    0 0 0 2.5px rgba(var(--cmg-po-gold-rgb), .85),
    0 0 50px    rgba(var(--cmg-po-gold-rgb), .5),
    0 0 90px    rgba(var(--cmg-po-gold-rgb), .22);
}
@media (prefers-reduced-motion: reduce) {
  .cmg-po-retry-btn {
    transition: none;
  }
  .cmg-po-retry-btn::after {
    animation: none !important;
    box-shadow:
      0 0 0 1.5px rgba(var(--cmg-po-gold-rgb), .5),
      0 0 34px    rgba(var(--cmg-po-gold-rgb), .28);
  }
}

/* ─── Support line / copy-email button ──────────────────────────────────── */
.cmg-po-support-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: #94a3b8;
}
.cmg-po-support-line__prompt {
  line-height: 1;
}
.cmg-po-support-email {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.cmg-po-support-email__link {
  color: #e3ab41;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 2px;
  line-height: 1;
  border-bottom: 1px solid rgba(var(--cmg-po-gold-rgb), .4);
  transition: color .15s ease, border-color .15s ease;
}
.cmg-po-support-email__link:hover,
.cmg-po-support-email__link:focus-visible {
  color: #f6d089;
  border-color: rgba(246, 208, 137, .6);
}
.cmg-po-support-email__link::selection {
  background: rgba(var(--cmg-po-gold-rgb), .35);
  color: #f8fafc;
}
.cmg-po-copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cmg-po-copy-btn:hover,
.cmg-po-copy-btn:focus-visible {
  background: rgba(var(--cmg-po-gold-rgb), .12);
  color: var(--cmg-po-gold);
  outline: none;
}
.cmg-po-copy-btn__stack {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.cmg-po-copy-btn__stack .cmg-po-copy-icon,
.cmg-po-copy-btn__stack .cmg-po-check-icon {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.cmg-po-copy-btn__stack .cmg-po-check-icon {
  opacity: 0;
  transform: scale(.6);
  color: #34d399;
}
.cmg-po-copy-btn__stack .cmg-po-copy-icon {
  opacity: 1;
  transform: scale(1);
}
.cmg-po-copy-btn.is-copied .cmg-po-copy-icon {
  opacity: 0;
  transform: scale(.6);
}
.cmg-po-copy-btn.is-copied .cmg-po-check-icon {
  opacity: 1;
  transform: scale(1);
}
.cmg-po-copy-btn.is-copied {
  background: rgba(52, 211, 153, .12);
  color: #34d399;
}
.cmg-po-copy-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cmg-po-copy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
}
.cmg-po-copy-btn.is-copied .cmg-po-copy-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}