/* FlowCraft Smart Popup — catalogue demo styles (extends site.css)
   Mirrors the buyer-delivered Tailwind popup with the site's own tokens.
   State classes (.is-open, .is-sheet, html.popup-scroll-lock) come from the
   unchanged buyer app.js. */

/* ---- The popup itself (same positioning as the buyer's style.css) ---- */
.fc-popup[hidden], .fc-popup [hidden] { display: none !important; }
.fc-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fc-popup-overlay { position: absolute; inset: 0; background: rgba(15, 27, 61, .6); opacity: 0; transition: opacity 250ms ease; }
.fc-popup-dialog { position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 24px; background: var(--surface); box-shadow: 0 30px 80px rgba(15, 27, 61, .35); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 250ms ease, transform 250ms ease; }
.fc-popup.is-open .fc-popup-overlay { opacity: 1; }
.fc-popup.is-open .fc-popup-dialog { opacity: 1; transform: none; }
.fc-popup-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .fc-popup-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fc-popup-media { height: 150px; background: #3b2a8f; }
.fc-popup-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .fc-popup-media { height: auto; min-height: 100%; } }
.fc-popup.is-sheet { inset: auto 0 0 0; padding: 0; align-items: flex-end; pointer-events: none; }
.fc-popup.is-sheet .fc-popup-overlay { display: none; }
.fc-popup.is-sheet .fc-popup-dialog { pointer-events: auto; max-width: none; max-height: 80vh; border-radius: 24px 24px 0 0; transform: translateY(100%); box-shadow: 0 -12px 40px rgba(15, 27, 61, .25); }
.fc-popup.is-sheet.is-open .fc-popup-dialog { transform: none; }
.fc-popup.is-sheet .fc-popup-media { height: 110px; }
html.popup-scroll-lock { overflow: hidden; }

.ppd-close { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink-muted); box-shadow: 0 2px 8px rgba(15, 27, 61, .18); cursor: pointer; }
.ppd-close:hover { color: var(--ink); background: #fff; }
.ppd-close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-line); }
.ppd-close svg { width: 20px; height: 20px; }
.ppd-body { padding: 26px 22px 24px; }
@media (min-width: 600px) { .ppd-body { padding: 34px 32px 28px; } }
.ppd-kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ppd-title { margin: 8px 0 0; font-size: 1.55rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ppd-text { margin: 8px 0 0; color: var(--ink-muted); }
.ppd-form { margin-top: 18px; }
.ppd-form input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cdd3e2; border-radius: 12px; font: inherit; color: var(--ink); background: #fff; }
.ppd-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ppd-form button[type="submit"] { width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.ppd-form button[type="submit"]:hover { background: var(--accent-strong); }
.ppd-form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.ppd-form .lead-form-note, .ppd-form .lead-form-feedback { margin: 8px 0 0; font-size: .8rem; }
.ppd-form .lead-form-note { color: var(--ink-muted); }
.ppd-form .lead-form-feedback { font-weight: 700; color: var(--dev); }
.ppd-form .lead-form-feedback.is-success { color: var(--ok); }
.ppd-form .lead-form-feedback.is-error { color: #b42339; }
.ppd-nothanks { display: block; width: 100%; margin-top: 10px; padding: 6px; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.ppd-nothanks:hover { color: var(--ink); text-decoration: underline; }
.ppd-sample { margin: 12px 0 0; font-size: .75rem; color: #9aa3c2; text-align: center; }

/* ---- Demo page: the trigger board (demo only, not part of the product) ---- */
.ppd-stage { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
@media (min-width: 820px) { .ppd-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.ppd-stage-media { background: #3b2a8f; }
.ppd-stage-media img { display: block; width: 100%; height: 220px; object-fit: cover; }
@media (min-width: 820px) { .ppd-stage-media img { height: 100%; } }
.ppd-stage-body { padding: 24px 18px 26px; min-width: 0; }
@media (min-width: 600px) { .ppd-stage-body { padding: 32px 30px; } }
.ppd-stage-title { margin: 6px 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.ppd-triggers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ppd-trigger { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ppd-trigger-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.ppd-trigger-icon svg { width: 20px; height: 20px; }
.ppd-trigger strong { display: block; font-size: .92rem; }
.ppd-trigger small { display: block; color: var(--ink-muted); font-size: .8rem; }
.ppd-state { padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; background: var(--bg-soft); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ppd-state.is-fired { background: var(--ok-soft); color: var(--ok); }
.ppd-state.is-off { background: var(--bg-soft); color: #9aa3c2; }
.ppd-meter { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.ppd-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.ppd-memory { margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-muted); }
.ppd-memory strong { color: var(--ink); }
.ppd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.ppd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px dashed var(--line); background: #fffbeb; font-size: .86rem; }
@media (min-width: 600px) { .ppd-controls { padding: 14px 30px; } }
.ppd-controls strong { color: #7a4b00; }
.ppd-controls button { padding: 7px 12px; border: 1px solid #f2d59b; border-radius: 10px; background: #fff; font: inherit; font-size: .84rem; font-weight: 700; color: #7a4b00; cursor: pointer; }
.ppd-controls button:hover { background: #fff3dc; }
.ppd-controls button:focus-visible { outline: none; box-shadow: 0 0 0 3px #f2d59b; }
.ppd-controls span { flex-basis: 100%; color: var(--ink-muted); font-size: .8rem; }

/* ---- Catalogue card: a static preview with an "open" button ---- */
.ppd-card { border-radius: 16px; overflow: hidden; background: var(--surface); }
.ppd-card img { display: block; width: 100%; height: 180px; object-fit: cover; }
.ppd-card-body { padding: 18px 16px 20px; }
.ppd-card .ppd-title { font-size: 1.25rem; }
.ppd-card .btn { margin-top: 14px; }
#smart-popup .product-head > *, #smart-popup .product-shot, #smart-popup .live-widget { min-width: 0; }
#smart-popup .live-badge { z-index: 10; }
@media (max-width: 479px) { #smart-popup .product-head { padding: 24px 14px; } }

@media (prefers-reduced-motion: reduce) {
  .fc-popup-overlay, .fc-popup-dialog, .ppd-meter i { transition: none; }
}