/* quote-send.css — the fullscreen "Sending your request…" takeover shown
   while a quote request posts (see assets/js/storefront/quote-send.js).
   Purple start to finish (owner 2026-10-01): a quote submission is purple. */

.qsend { position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 32px 20px; background: linear-gradient(150deg, #7c3aed, #4c1d95); font-family: 'Montserrat', system-ui, sans-serif; }
.qsend.show { display: flex; animation: qsend-in 0.28s ease both; }
@keyframes qsend-in { from { opacity: 0; } to { opacity: 1; } }

/* the ring: progress fills it, the plane rides inside */
.qsend-ring { position: relative; width: 132px; height: 132px; margin-bottom: 26px; }
.qsend-ring svg.qsend-track { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.qsend-ring .qsend-bg { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 6; }
.qsend-ring .qsend-fg { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 364.4; stroke-dashoffset: 364.4; transition: stroke-dashoffset 0.4s ease; }
.qsend-ring .qsend-glow { position: absolute; inset: 14px; border-radius: 50%; background: rgba(255,255,255,0.1); animation: qsend-breathe 2.2s ease-in-out infinite; }
.qsend-plane, .qsend-check { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.qsend-plane { animation: qsend-fly 1.8s ease-in-out infinite; }
.qsend-check { opacity: 0; transform: scale(0.4); }
.qsend.done .qsend-plane { animation: qsend-away 0.4s ease-in both; }
.qsend.done .qsend-check { animation: qsend-pop 0.5s 0.15s cubic-bezier(0.34,1.4,0.64,1) both; }
.qsend.done .qsend-glow { animation: none; }
@keyframes qsend-fly { 0%,100% { transform: translate(-3px, 3px) rotate(-4deg); } 50% { transform: translate(4px, -4px) rotate(3deg); } }
@keyframes qsend-away { to { transform: translate(40px, -40px) scale(0.6); opacity: 0; } }
@keyframes qsend-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes qsend-breathe { 0%,100% { transform: scale(0.92); opacity: 0.6; } 50% { transform: scale(1.04); opacity: 1; } }

.qsend-title { font-size: clamp(1.45rem, 4.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; }
.qsend-status { font-size: 0.98rem; font-weight: 600; opacity: 0.92; min-height: 1.5em; transition: opacity 0.25s ease; }
.qsend-status.swap { opacity: 0; }
.qsend-dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: qsend-dots 1.2s steps(4, end) infinite; }
.qsend.done .qsend-dots::after { animation: none; content: ''; }
@keyframes qsend-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.qsend-note { margin-top: 26px; font-size: 0.78rem; opacity: 0.7; }

/* Error inside the overlay is never shown — failures close it and the page
   shows the message next to the button, with the form exactly as it was. */

@media (prefers-reduced-motion: reduce) {
    .qsend.show, .qsend-plane, .qsend-ring .qsend-glow, .qsend-dots::after { animation: none; }
    .qsend-ring .qsend-fg { transition: none; }
}