/* Pay4All Form — public ticket validation page styles.
 *
 * Loaded by Frontend\Endpoints::render_ticket_page() via a <link> tag.
 * This page is a standalone HTML response (no wp_head() / wp_footer()),
 * so we can't go through wp_enqueue_style — we ship the file as a
 * regular asset and reference it directly with its full URL.
 */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f7fa;color:#222;margin:0;padding:24px}
.card{width:100%;box-sizing:border-box;margin:48px auto;background:#fff;border:1px solid #d8dee9;border-radius:10px;padding:28px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.card h1{margin:0 0 14px;font-size:20px}
.muted{color:#665665;font-size:14px;line-height:1.5}
/* Product description shown under the title on the validation page. */
.ticket-desc{color:#444;font-size:15px;line-height:1.5;margin:4px 0 16px}
/* Big primary action — the gatekeeper at the venue needs to hit this
 * button reliably with a thumb, so it spans 80% of the card width and
 * uses roughly 3× the visual area of the previous compact button. */
.btn{display:block;width:80%;margin:24px auto;padding:28px 32px;background:#1f8a39;color:#fff;border:0;border-radius:10px;font-size:26px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;box-sizing:border-box}
/* Secondary action — "Valider une autre place" — visually distinct from
 * the green primary button so the gatekeeper doesn't mistake the rescan
 * shortcut for the validation button. */
.btn-secondary{display:block;width:80%;margin:16px auto 0;padding:24px 28px;background:#2563eb;color:#fff;border:0;border-radius:10px;font-size:22px;font-weight:700;cursor:pointer;text-align:center;box-sizing:border-box;font-family:inherit}

/* Live QR scanner overlay opened by ticket.js when the button is tapped.
 * Full-screen so the gatekeeper can frame the next QR with one hand;
 * close button stays anchored top-right for thumb access; hint text at
 * the bottom explains what to do. */
#p4all-scan-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:99999;display:flex;align-items:stretch;justify-content:center}
#p4all-scan-overlay video{width:100%;height:100%;object-fit:cover;background:#000}
.p4all-scan-hint{position:absolute;left:0;right:0;bottom:32px;text-align:center;color:#fff;font-size:16px;line-height:1.4;padding:0 24px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.p4all-scan-close{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* Spinner shown after a QR is recognised — the camera is already off but
 * the dark overlay stays in place so the previous ticket's page doesn't
 * flash through while the next ticket's URL is loading. */
.p4all-scan-loading{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:p4all-scan-spin .8s linear infinite}
@keyframes p4all-scan-spin{to{transform:rotate(360deg)}}
.bad{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;padding:14px 18px;border-radius:8px;font-weight:600}
.ok{background:#dcfce7;color:#166534;border:1px solid #86efac;padding:14px 18px;border-radius:8px;font-weight:600}
/* Big-friendly OK panel shown right after a fresh validation — the
 * gatekeeper at the door wants a single unambiguous "go" signal. */
.ok-big{text-align:center;font-size:48px;line-height:1.2;padding:32px 18px;letter-spacing:.05em}
