/* ============================================================================
   Verkochtradar — house visual identity ("Bezorgd" direction).
   This file IS the identity: every page extends base.html + uses these tokens,
   so new pages inherit it automatically. Don't hardcode colors/fonts elsewhere.

   Direction: bold, confident, postal/dispatch. Wordmark-only logo.
   Palette: ink + a grass-green (Grasgroen) accent on paper.  Type: Bricolage Grotesque
   (display/wordmark) + Inter (body).
   ============================================================================ */
:root {
  --ink: #14161a;          /* text, headings */
  --accent: #16a34a;       /* brand accent (Grasgroen): primary actions, active, highlights */
  --accent-deep: #15803d;  /* hover / pressed */
  --accent-soft: #e9f7ee;  /* accent-tinted surfaces (hover rows, soft badges) */
  --paper: #ffffff;        /* base surface */
  --panel: #f4f5f7;        /* muted surface (thead, chips, panels) */
  --muted: #5a5f68;        /* secondary text */
  --line: #e7e8ec;         /* borders */
  --line-soft: #eef0f2;    /* hairline dividers */
  --danger: #c0392b;       /* destructive actions (opt-out / delete) */
  --danger-soft: #fdf4f3;  /* danger-tinted surface */
  --radar-green: #2fd06e;  /* luminous green for the dark radar hero (glows on near-black) */

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;

  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

/* ---- top banner (shared header: wordmark + menu) --------------------------- */
.site-header { background: var(--paper); border-bottom: 2px solid var(--ink);
               box-shadow: 0 5px 16px rgba(20,22,26,.06); position: sticky; top: 0; z-index: 20; }
/* header/footer inner rail — aligns the wordmark + nav with the page content width */
.site-bar { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.25rem;
            display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-bar.offer { max-width: 60rem; }
.site-bar.wide { max-width: 96rem; }
.site-header .site-bar { padding-top: .8rem; padding-bottom: .8rem; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--ink); line-height: 1; user-select: none;
}
.wordmark b { color: var(--accent); font-weight: 800; }
.wordmark .tld { color: var(--muted); font-weight: 700; }
.wordmark:hover { text-decoration: none; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; font-size: 1rem; font-weight: 600; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--accent); }
/* hamburger menu (mover-facing pages) */
.hmenu { position: relative; }
.hmenu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
             width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--line);
             border-radius: 9px; background: var(--paper); cursor: pointer; transition: border-color .12s ease; }
.hmenu-btn:hover { border-color: var(--accent); }
.hmenu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
.hmenu-list { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 220px; z-index: 30;
              background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
              box-shadow: 0 14px 36px rgba(20,22,26,.16); padding: .4rem; }
.hmenu-list a { display: block; padding: .6rem .75rem; border-radius: 7px; color: var(--ink);
                text-decoration: none; font-size: .95rem; font-weight: 500; }
.hmenu-list a:hover { background: var(--panel); text-decoration: none; }
.hmenu-list a.hmenu-danger { margin-top: .3rem; border-top: 1px solid var(--line);
                             padding-top: .7rem; color: var(--accent); }
.hmenu-list a.hmenu-danger:hover { background: var(--accent-soft); }

/* ---- layout + type -------------------------------------------------------- */
.wrap { max-width: 44rem; width: 100%; margin: 2rem auto 3.5rem; padding: 0 1.25rem; flex: 1 0 auto; }
.wrap.wide { max-width: 96rem; }
.wrap.offer { max-width: 60rem; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
     letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .35rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: .85em; }
code { font-family: var(--font-mono); background: var(--panel); padding: .1em .4em;
       border-radius: .25rem; font-size: .85em; }

/* ---- buttons -------------------------------------------------------------- */
.btn, .filters button, .summary button {
  font: inherit; font-weight: 600; background: var(--accent); color: #fff;
  border: 0; border-radius: 9px; padding: .55rem 1.1rem; cursor: pointer; text-decoration: none;
}
.btn:hover, .filters button:hover, .summary button:hover { background: var(--accent-deep); }

/* ---- admin table ---------------------------------------------------------- */
.toolbar { margin: .5rem 0 1rem; color: var(--muted); font-size: .9rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: .6rem; }
table { border-collapse: collapse; width: 100%; font-size: .82rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--panel); font-weight: 600; color: #3a3f47; z-index: 1; }
tbody tr:hover td { background: var(--accent-soft); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; background: var(--panel); color: #4a4f57; padding: .1em .5em;
         border-radius: .35rem; font-size: .78em; font-weight: 600; }
.badge.pipe { background: var(--accent-soft); color: var(--accent-deep); }

/* ---- admin filters + sortable headers ------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 1rem; font-size: .85rem; }
.filters label { display: flex; flex-direction: column; gap: .2rem; color: var(--muted); }
.filters input, .filters select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line);
                                   border-radius: .4rem; background: #fff; color: inherit; }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--accent);
                                               box-shadow: 0 0 0 3px rgba(229,50,43,.14); }
.filters .clear { align-self: center; }
thead th a { color: #3a3f47; }
thead th a:hover { color: var(--accent); text-decoration: none; }
thead th .arrow { color: var(--accent); }

/* ---- offer / selection page (/kies/{token}) ------------------------------- */
.notice { padding: .7rem 1rem; border-radius: .5rem; background: var(--panel); color: var(--ink);
          margin: 1.2rem 0 0; font-size: .92rem; border-left: 3px solid var(--accent); }
.notice.ok { background: var(--accent-soft); }
.notice.err { background: var(--panel); border-left: 4px solid var(--accent); }

/* hero: tagline + explainer */
.offer-hero { margin: .4rem 0 1.4rem; }
.offer-eyebrow { font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
                 color: var(--accent); margin: 0 0 .55rem; }
.offer-hero h1 { font-size: 2.5rem; line-height: 1.05; margin: 0 0 .85rem; }
.a { color: var(--accent); }
.lead-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 62ch; }
.lead-intro b { color: var(--ink); font-weight: 700; }
.lead-intro .hl { color: var(--ink); font-weight: 500; text-decoration: underline;
                  text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* listing cards */
ul.leads { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
ul.leads li { border: 1px solid var(--line); border-radius: .7rem; background: var(--paper);
              transition: background .12s ease, border-color .12s ease; }
ul.leads li:hover { border-color: #d6d8de; }
ul.leads li:has(input:not(:checked)) { background: #fafafb; }
ul.leads li:has(input:not(:checked)) .lead { opacity: .45; }
ul.leads .row-inner { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; }
ul.leads .lead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; cursor: pointer; }
ul.leads .line1 { font-size: 1.05rem; }
ul.leads .line1 b { font-weight: 700; }
ul.leads .line2 { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.leads li.out { display: none; }
/* per-lead source: the proof teaser (first 3 with a link) vs the visibly locked rest */
.src { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.src-open { color: var(--accent); text-decoration: none; }
.src-open:hover { text-decoration: underline; }
.src-locked { appearance: none; border: 0; background: none; padding: 0; font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; }

/* distance range filter */
.range-filter { margin: 1.6rem 0 0; padding: .95rem 1.1rem; border: 1px solid var(--line);
                border-radius: .7rem; background: var(--panel); }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
              margin-bottom: .55rem; font-size: .95rem; }
.range-head label b { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.range-count { color: var(--muted); font-size: .86rem; white-space: nowrap; }
.range-count b { color: var(--ink); font-weight: 700; }
.range-filter input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.filters-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.6rem 0 0; }
.filters-2 .range-filter { margin: 0; }
@media (max-width: 560px) { .filters-2 { grid-template-columns: 1fr; } }

/* list controls: property-type filter + sort */
.list-controls { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
                 flex-wrap: wrap; margin: .8rem 0 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; background: var(--paper); }
.seg button { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent;
              font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); padding: .5rem .95rem;
              cursor: pointer; transition: background .12s ease, color .12s ease; }
.seg button:last-child { border-right: 0; }
.seg button:not(.active):hover { background: var(--panel); color: var(--ink); }
.seg button.active { background: var(--accent); color: #fff; }
.sort { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.sort select { font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer;
               padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); }
.sort select:hover { border-color: #d6d8de; }
@media (max-width: 460px) {
  .list-controls { flex-direction: column; align-items: stretch; }
  .seg { justify-content: stretch; } .seg button { flex: 1; }
}

/* selection toggle */
.toggle { position: relative; display: inline-block; width: 2.7rem; height: 1.55rem; flex: none; }
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.toggle .slider { position: absolute; inset: 0; background: #cdd0d6; border-radius: 999px; transition: background .15s ease; }
.toggle .slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1.15rem; height: 1.15rem;
                          background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(1.15rem); }
.toggle input:disabled { cursor: default; }
.toggle input:disabled + .slider { opacity: .5; }

/* featured flyer — a full-width crop of the branded top of the mover's own flyer; click to enlarge */
.showcase-intro { margin: 0 0 1.3rem; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 62ch; }
.flyer-card { position: relative; border: 1px solid var(--line); border-radius: .9rem; overflow: hidden;
              background: #fff; box-shadow: 0 10px 30px rgba(20,22,26,.12); }
.flyer-hero { position: relative; width: 100%; aspect-ratio: 21 / 14; overflow: hidden; background: #fff; }
.flyer-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; }
.flyer-scroll img { width: 100%; height: auto; display: block; }
/* footer action bar attached under the preview (edit + drukproef) */
.flyer-bar { display: flex; align-items: center; justify-content: flex-end; gap: .7rem 1rem;
             flex-wrap: wrap; padding: .85rem 1.1rem; background: var(--panel); border-top: 1px solid var(--line); }
.flyer-bar-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.flyer-bar .btn, .flyer-bar .btn-ghost { font-size: .92rem; padding: .55rem 1.1rem; }
.flyer-bar .btn-ghost { background: var(--paper); }
.flyer-bar .btn-ghost:hover { background: var(--paper); border-color: #cfd2d8; }
@media (max-width: 460px) {
  .flyer-bar { flex-direction: column; align-items: stretch; }
  .flyer-bar-actions { justify-content: stretch; }
  .flyer-bar .btn, .flyer-bar .btn-ghost { flex: 1; text-align: center; }
}
/* reusable modal / popover (drukproef confirmation now; payment later) */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(20,22,26,.5); }
.modal-card { position: relative; z-index: 1; width: 100%; max-width: 29rem; background: var(--paper);
              border-radius: 14px; box-shadow: 0 24px 60px rgba(20,22,26,.3); padding: 2rem 1.9rem; }
.modal-close { position: absolute; top: .6rem; right: .7rem; width: 2rem; height: 2rem; border: 0;
               background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 6px; }
.modal-close:hover { background: var(--panel); color: var(--ink); }
.modal-body { text-align: center; }
.modal-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; margin: .2rem 0 .5rem; }
.modal-body p { margin: 0 0 .5rem; color: var(--muted); line-height: 1.55; }
.modal-body .modal-lead { max-width: 34ch; margin: 0 auto 1.2rem; }
.modal-body .btn { margin-top: 1rem; }
.modal-spinner { width: 2.6rem; height: 2.6rem; margin: .3rem auto 1.2rem; border: 3px solid var(--line);
                 border-top-color: var(--accent); border-radius: 50%; animation: modal-spin .7s linear infinite; }
@keyframes modal-spin { to { transform: rotate(360deg); } }
.modal-check { width: 3rem; height: 3rem; margin: .2rem auto 1rem; border-radius: 50%; background: var(--accent);
               color: #fff; font-size: 1.5rem; line-height: 3rem; font-weight: 700; }
.modal-icon { font-size: 2.2rem; line-height: 1; margin-bottom: .6rem; }
.modal-addr { background: var(--panel); border-radius: 9px; padding: .85rem 1rem; margin: 1rem 0;
              font-size: .95rem; color: var(--ink); line-height: 1.55; text-align: left; }
.modal-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.3rem; }
.modal-actions .btn, .modal-actions .btn-ghost { margin-top: 0; }
.btn-ghost { display: inline-block; padding: .7rem 1.2rem; border-radius: 9px; border: 1px solid var(--line);
             background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { background: var(--panel); }
.btn-ghost:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost:disabled:hover { background: none; }
.dp-form { display: flex; flex-direction: column; gap: .9rem; text-align: left; margin-top: 1rem; }
.dp-field { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.dp-field input { font: inherit; font-weight: 500; color: var(--ink); padding: .55rem .7rem;
                  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.dp-field input:focus { outline: none; border-color: var(--accent); }
.dp-field input[readonly] { background: var(--panel); color: var(--muted); }
.dp-row { display: flex; gap: .8rem; }
.dp-row .dp-pc { flex: 0 0 8.5rem; }
.dp-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .4rem; }
.dp-actions .btn, .dp-actions .btn-ghost { margin-top: 0; }
.dp-legend { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.order-summary { text-align: right; margin-top: .3rem; padding: .85rem 1rem; border-radius: 10px; background: var(--panel); }
.recap-grand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.recap-grand b { color: var(--accent); font-weight: 800; }
.recap-vat { margin-top: .15rem; font-size: .82rem; color: var(--muted); }
.recap-vat b { color: var(--ink); font-weight: 600; }
.pay-options { display: flex; flex-direction: column; gap: .7rem; margin: 1.1rem 0 .3rem; text-align: left; }
.pay-option { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;
              column-gap: .85rem; row-gap: .1rem; width: 100%; padding: .95rem 1rem; border: 1px solid var(--line);
              border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.pay-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-icon { grid-row: 1 / span 2; display: flex; color: var(--accent); }
.pay-label { font-weight: 700; color: var(--ink); font-size: 1rem; }
.pay-desc { grid-column: 2; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.pay-option.is-soon { cursor: not-allowed; opacity: .6; }
.pay-option.is-soon:hover { border-color: var(--line); background: #fff; }
.pay-option.is-soon .pay-icon { color: var(--muted); }
.pay-badge { position: absolute; top: .7rem; right: .8rem; font-size: .62rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: .05em; color: var(--muted); background: var(--panel); padding: .18rem .45rem; border-radius: 999px; }
.modal-body .modal-sub { margin-top: 1rem; }
.modal-body .modal-sub a { font-size: .9rem; }

/* verzonden flyers list — same row language as the offer page (ul.leads + peek magnifier) */
ul.leads .sent-inner { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; }
.status-badge { flex: none; font-size: .82rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px;
                white-space: nowrap; }
.status-badge.wait { background: var(--panel); color: var(--muted); }
.status-badge.go   { background: #fdecec; color: var(--accent); }
.status-badge.done { background: #e6f6ec; color: #157347; }
.status-badge.bad  { background: #fff4e5; color: #a15c00; }
.empty-state { margin: 2rem 0; color: var(--muted); }
.back-link { margin-top: 2.2rem; }
.back-link a { color: var(--muted); text-decoration: none; }
.back-link a:hover { color: var(--ink); }
.inv-dl { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem;
          border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink);
          font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.inv-dl:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.inv-dl svg { width: 1.05rem; height: 1.05rem; }
/* settings page */
.settings-form { display: flex; flex-direction: column; gap: 2rem; margin: 1.6rem 0 0; max-width: 32rem; }
.set-section { display: flex; flex-direction: column; gap: 1rem; }
.set-legend { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); margin: 0; }
.set-field { display: flex; flex-direction: column; gap: .25rem; }
.set-text { width: 100%; margin-top: .3rem; font: inherit; font-weight: 500; color: var(--ink);
            padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.set-text:focus { outline: none; border-color: var(--accent); }
.set-text[readonly] { background: var(--panel); color: var(--muted); }
.set-row { display: flex; gap: 1rem; }
.set-row .set-pc { flex: 0 0 9rem; }
.set-row .set-field { flex: 1; }
.set-label { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.set-hint { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.set-input { display: inline-flex; align-items: center; gap: .5rem; margin-top: .45rem; }
.set-input input { width: 5rem; font: inherit; font-weight: 600; color: var(--ink); text-align: right;
                   padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.set-input input:focus { outline: none; border-color: var(--accent); }
.set-unit { color: var(--muted); font-size: .95rem; }
.set-actions { margin-top: .4rem; }
.danger-zone { margin: 2.6rem 0 0; padding: 1.3rem 1.4rem; max-width: 34rem;
               border: 1px solid #efd6d3; border-radius: .8rem; background: var(--danger-soft); }
.danger-zone h2 { margin: 0 0 .4rem; font-family: var(--font-display); font-weight: 800;
                  font-size: 1.15rem; color: var(--danger); }
.danger-zone p { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.btn-danger { display: inline-block; padding: .6rem 1.2rem; border-radius: 9px; border: 1px solid var(--danger);
              background: #fff; color: var(--danger); font: inherit; font-weight: 700; cursor: pointer; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-outline { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem;
               border: 1.5px solid var(--ink); border-radius: 8px; font: inherit; font-size: .9rem;
               font-weight: 600; color: var(--ink); background: var(--paper); text-decoration: none; cursor: pointer; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-primary { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .04rem;
               padding: .62rem 1.2rem; border: 0; border-radius: 9px; background: var(--accent); color: #fff;
               font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.15; cursor: pointer;
               text-decoration: none; box-shadow: 0 6px 16px rgba(229,50,43,.28);
               transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px);
                     box-shadow: 0 10px 24px rgba(229,50,43,.38); }
.btn-primary .btn-sub { font-size: .76rem; font-weight: 500; opacity: .9; }

.peek-btn { flex: none; display: inline-flex; align-items: center; justify-content: center;
            width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: .5rem;
            background: var(--paper); color: var(--muted); cursor: zoom-in;
            transition: color .12s ease, border-color .12s ease, background .12s ease; }
.peek-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.peek-btn svg { width: 1.05rem; height: 1.05rem; }

.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
            justify-content: center; padding: 2rem; background: rgba(18,20,24,.86); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(540px, 92vw); max-height: 92vh; border-radius: 5px;
                box-shadow: 0 24px 70px rgba(0,0,0,.55); }

@media (max-width: 560px) {
  .flyer-band { flex-direction: column; text-align: center; }
  .flyer-band-text p { max-width: none; }
}

/* summary + discount nudge */
.summary { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; text-align: right;
           max-width: 25rem; margin: 1.8rem 0 0 auto; padding: 1.1rem 1.2rem;
           border: 1px solid var(--line); border-radius: .8rem; background: var(--paper); }
.summary .totals { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.summary .totals .line { color: var(--muted); font-size: .95rem; }
.summary .grand { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin-top: .1rem; }
.summary .grand b { color: var(--accent); font-weight: 800; }
.summary .vat-line { color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.summary .vat-line span { color: var(--ink); }
.summary button { padding: .75rem 1.75rem; font-size: 1rem; }
.disc-nudge { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: .6rem;
              text-align: center; padding: .7rem .9rem; border-radius: .6rem; background: var(--accent-soft); }
.disc-nudge[hidden] { display: none; }
.disc-ico { font-size: 1.3rem; line-height: 1; flex: none; }
.disc-txt { font-size: .92rem; font-weight: 600; color: var(--ink); }
.summary .disc-line { color: var(--accent-deep); font-size: .95rem; font-weight: 600; }

/* ---- how it works (3 steps) ----------------------------------------------- */
.section-kicker { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
                  letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1rem; }
.how { margin: 2.2rem 0 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
         grid-template-columns: repeat(3, 1fr); }
.steps li { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.1rem;
            border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); }
.steps .step-n { flex: none; display: inline-flex; align-items: center; justify-content: center;
                 width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff;
                 font-family: var(--font-display); font-weight: 800; font-size: .9rem; }
.steps b { display: block; font-size: .98rem; margin-bottom: .12rem; }
.steps p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* ---- assurances (trust strip, below the payment block) -------------------- */
.assurances { margin: 2.5rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line);
              display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.assurances p { margin: 0; padding-left: 1.7rem; position: relative; font-size: .88rem;
                line-height: 1.5; color: var(--muted); }
.assurances p b { display: block; color: var(--ink); font-weight: 700; margin-bottom: .15rem; }
.assurances p::before { content: "✓"; position: absolute; left: 0; top: .1rem; color: var(--accent);
                        font-weight: 800; font-family: var(--font-display); }
@media (max-width: 620px) { .assurances { grid-template-columns: 1fr; gap: .9rem; } }
/* ===========================================================================
   LANDING PAGE (public homepage) — the dark radar hero is the one bold move;
   everything below it stays quiet and on paper.
   =========================================================================== */
.site-nav a.site-cta { background: var(--accent); color: #fff; font-weight: 600; padding: .45rem .95rem;
            border-radius: 9px; font-size: .95rem; }
.site-nav a.site-cta:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }
.btn-lg { padding: .78rem 1.45rem; font-size: 1.02rem; border-radius: 11px; }

.lp > section { margin-top: clamp(3rem, 7vw, 5rem); }
.lp > section:first-child { margin-top: .5rem; }

/* ---- hero: dark radar scope ------------------------------------------------ */
.lp-hero { position: relative; overflow: hidden; border-radius: 1.3rem;
           background: radial-gradient(125% 130% at 82% 8%, #12281d 0%, #0a1712 46%, #060f0b 100%);
           color: #e7efea; padding: clamp(1.7rem, 4vw, 3.1rem);
           display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem);
           align-items: center; box-shadow: 0 26px 64px rgba(6,14,11,.34); }
.lp-hero-copy h1 { color: #fff; font-family: var(--font-display); font-weight: 800;
                   font-size: clamp(2.05rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em;
                   margin: 0 0 1rem; }
.lp-hero-copy h1 .a { color: var(--radar-green); }
.lp-sub { color: #eef3f0; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6;
          margin: 0 0 1.7rem; max-width: 42ch; }
.lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
/* the scope itself */
.radar { --house: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M4%2010%20L12%203%20L20%2010%20L20%2021%20L14%2021%20L14%2014%20L10%2014%20L10%2021%20L4%2021%20Z'/%3E%3C/svg%3E");
         position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto;
         border-radius: 50%; overflow: hidden;
         background: radial-gradient(circle at 50% 42%, #0d4b2c 0%, #072418 56%, #04140d 100%);
         box-shadow: inset 0 0 46px rgba(0,0,0,.62), 0 0 0 1px rgba(47,208,110,.28),
                     0 18px 50px rgba(4,20,13,.6); }
.radar-grid { position: absolute; inset: 0; z-index: 0; border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(120,230,170,.13) calc(50% - .5px),
                    rgba(120,230,170,.13) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(120,230,170,.13) calc(50% - .5px),
                    rgba(120,230,170,.13) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-radial-gradient(circle at center, rgba(120,230,170,.14) 0 1px,
                    transparent 1px, transparent 22%); }
.radar-sweep { position: absolute; inset: 0; z-index: 2; border-radius: 50%; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 272deg,
                             rgba(47,208,110,.05) 300deg, rgba(47,208,110,.18) 336deg,
                             rgba(47,208,110,.38) 360deg);  /* glow TRAILS the leading line, not ahead of it */
  animation: lp-sweep 6s linear infinite; }
.radar.js .radar-sweep { animation: none; }  /* JS drives rotation so it can sync detections to the beam */
.radar-sweep::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 50%;
  background: linear-gradient(to bottom, rgba(47,208,110,0), rgba(47,208,110,.75)); }
.radar-core { position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem;
  border-radius: 50%; background: var(--radar-green); z-index: 3;
  box-shadow: 0 0 9px rgba(47,208,110,.95); animation: lp-core 2.6s ease-out infinite; }
.blip { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--radar-green); -webkit-mask: var(--house) center/contain no-repeat;
  mask: var(--house) center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(47,208,110,.78)); opacity: 0; z-index: 1;
  will-change: opacity, transform; }  /* houses are created + driven by JS (see home.html): the beam
                                         lights each one as it passes, then it fades fast and respawns */
@keyframes lp-sweep { to { transform: rotate(360deg); } }
@keyframes lp-core { 0% { box-shadow: 0 0 9px rgba(47,208,110,.95), 0 0 0 0 rgba(47,208,110,.5); }
  70% { box-shadow: 0 0 9px rgba(47,208,110,.95), 0 0 0 13px rgba(47,208,110,0); }
  100% { box-shadow: 0 0 9px rgba(47,208,110,.95), 0 0 0 0 rgba(47,208,110,0); } }

/* ---- how-it-works: anchor offset so the sticky header doesn't hide it ------ */
.how { scroll-margin-top: 5rem; }

/* ---- in your own brand: the flyer mock ------------------------------------ */
.lp-brand { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center; }
.lp-brand-copy p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 46ch; }
.lp-ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.lp-ticks li { position: relative; padding-left: 1.6rem; font-size: .93rem; }
.lp-ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent);
  font-weight: 800; font-family: var(--font-display); }
/* the same flyer wearing three different brands — the section's whole point */
.lp-flyers { --house: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M4%2010%20L12%203%20L20%2010%20L20%2021%20L14%2021%20L14%2014%20L10%2014%20L10%2021%20L4%2021%20Z'/%3E%3C/svg%3E");
  position: relative; width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 1 / 0.94; }
.lp-flyers .lp-flyer { --brand: #2f6bd6; position: absolute; top: 50%; left: 50%; width: 44%;
  aspect-ratio: 1 / 1.4; border-radius: .5rem; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(20,22,26,.22);
  display: flex; flex-direction: column; }
.lp-flyers .brand-a { --brand: #e2603a; transform: translate(-94%, -47%) rotate(-10deg); }
.lp-flyers .brand-b { --brand: #7b52d0; transform: translate(-6%, -47%) rotate(10deg); }
.lp-flyers .brand-c { --brand: #2f6bd6; transform: translate(-50%, -53%) rotate(0deg); z-index: 2; }
.lp-flyer-head { background: var(--brand); padding: .5rem .5rem .55rem; display: flex; align-items: center; gap: .35rem; }
.lp-flyer-mark { flex: none; width: 1.05rem; height: 1.05rem; background: #fff;
  -webkit-mask: var(--house) center/contain no-repeat; mask: var(--house) center/contain no-repeat; }
.lp-flyer-name { height: .32rem; width: 2.2rem; border-radius: .2rem; background: rgba(255,255,255,.85); }
.lp-flyer-body { flex: 1; padding: .55rem .5rem .5rem; display: flex; flex-direction: column; }
.lp-flyer-rating { display: flex; align-items: center; gap: .28rem; }
.lp-flyer-stars { color: #f5a623; font-size: .58rem; letter-spacing: .03em; line-height: 1; }
.lp-flyer-rating b { color: var(--ink); font-size: .5rem; font-weight: 700; }
.lp-flyer-h { height: .38rem; width: 78%; border-radius: .2rem; background: var(--brand); opacity: .82;
  margin: .4rem 0 0; }
.lp-flyer-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.lp-flyer-qr { width: 1.5rem; height: 1.5rem; border-radius: .12rem;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 50% / .32rem .32rem; }
.lp-flyer-cta { width: 44%; height: .55rem; border-radius: 1rem; background: var(--brand); }

/* ---- pricing --------------------------------------------------------------- */
.lp-price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
.lp-price-card { border: 1px solid var(--line); border-radius: .8rem; background: var(--paper);
  padding: 1.35rem 1.2rem; text-align: center; }
.lp-price-card.lead { border-color: var(--accent); background: var(--accent-soft); }
.lp-price-fig { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem;
  color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.lp-price-lbl { display: block; margin-top: .5rem; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.lp-price-note { text-align: center; color: var(--muted); font-size: .88rem; margin: 1.1rem 0 0; }

/* ---- closing CTA ----------------------------------------------------------- */
.lp-close { text-align: center; background: var(--panel); border-radius: 1.15rem;
  padding: clamp(2rem, 5vw, 3.3rem); }
.lp-close h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.1; margin: 0 0 .6rem; }
.lp-close p { color: var(--muted); max-width: 48ch; margin: 0 auto 1.5rem; font-size: 1.02rem; line-height: 1.6; }

/* ---- area lookup: "wat is er bij jou verkocht" ---------------------------- */
.lp-lookup { scroll-margin-top: 5rem; }
.lp-lookup .section-kicker { margin-bottom: .4rem; }
.lp-lookup-intro { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 54ch; }
.lp-lookup-panel { background: var(--panel); border-radius: 1.15rem; padding: clamp(1.6rem, 4vw, 2.6rem); }
.lp-lookup-form { display: grid; grid-template-columns: minmax(9rem, 11rem) 1fr 1fr; gap: 1.1rem 1.5rem;
  align-items: end; }
.lk-field { display: flex; flex-direction: column; gap: .5rem; }
.lk-label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.lk-label b { color: var(--ink); font-weight: 700; }
.lp-lookup input[type="text"] { font: inherit; font-size: 1.1rem; letter-spacing: .04em; width: 100%;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); color: var(--ink); }
.lp-lookup input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lp-lookup input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.lp-lookup-out:not(:empty) { margin-top: 1.7rem; }
.lk-count { display: flex; align-items: center; gap: 1rem; margin: 0; }
.lk-num { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 2.9rem;
  color: var(--accent-deep); line-height: 1; letter-spacing: -.03em; }
.lk-count-txt { display: flex; flex-direction: column; gap: .12rem; }
.lk-count-txt b { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.lk-sub { color: var(--muted); font-size: .9rem; }
.lk-hint { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.lk-examples-label { margin: 1.5rem 0 .7rem; color: var(--muted); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; }
.lk-cards { margin-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lk-card { display: flex; flex-direction: column; gap: .28rem; padding: 1rem 1.1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: .7rem; text-decoration: none; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease; }
.lk-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(20,22,26,.08); text-decoration: none; }
.lk-card-type { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-deep); }
.lk-card-addr { font-weight: 600; font-size: .98rem; }
.lk-card-meta { color: var(--muted); font-size: .82rem; }
.lk-card-link { margin-top: auto; padding-top: .4rem; color: var(--accent); font-size: .82rem; font-weight: 600; }
.lk-check { margin: 1.1rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* ---- legal pages (algemene voorwaarden, privacyverklaring) ---------------- */
.legal { color: #2b2f36; }
.legal h1 { font-size: 2rem; margin: 0 0 .25rem; }
.legal .legal-meta { color: var(--muted); font-size: .88rem; margin: 0 0 1.8rem; }
.legal .legal-lead { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.6rem; }
.legal h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em;
  color: var(--ink); margin: 2rem 0 .55rem; }
.legal p { margin: 0 0 .85rem; font-size: .97rem; line-height: 1.65; }
.legal ul { margin: 0 0 .85rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .4rem; font-size: .97rem; line-height: 1.6; }
.legal b { color: var(--ink); font-weight: 700; }
.legal a { font-weight: 500; }
@media (max-width: 720px) {
  .lp-lookup-form { grid-template-columns: 1fr; }
  .lk-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* stack + centre the hero, and hide the radar (too much screen equity on a phone) */
  .lp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .lp-hero-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
  .lp-scope { display: none; }
  .lp-hero-actions { justify-content: center; }
  .lp-sub { margin: 0 auto; }
}
@media (max-width: 620px) {
  .lp-brand { grid-template-columns: 1fr; }
  .lp-price-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-sweep { animation: none; transform: rotate(38deg); }
  .radar-core { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- footer --------------------------------------------------------------- */
.site-footer { border-top: 2px solid var(--ink); margin-top: 3.5rem; background: var(--paper); flex-shrink: 0; }
.foot-rail { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.foot-rail.offer { max-width: 60rem; }
.foot-rail.wide { max-width: 96rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 1.6rem 3rem; padding-top: 2.4rem; padding-bottom: 1.9rem; }
.foot-brand { max-width: 28rem; }
.wordmark.small { font-size: 1.2rem; }
.foot-brand p { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.foot-links { display: grid; gap: .55rem; align-content: start; }
.foot-links a { color: var(--muted); font-size: .92rem; font-weight: 500; }
.foot-links a:hover { color: var(--accent-deep); text-decoration: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem;
  padding-top: 1.2rem; padding-bottom: 1.6rem; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: .82rem; }
.foot-tag { font-family: var(--font-display); font-weight: 700; color: #6b7078; }

/* ---- flyer showcase (section 2) ------------------------------------------- */
.showcase { margin: 3.5rem 0 0; }

/* ---- selection section header (filters + list) ---------------------------- */
.select-head { margin-top: 3.5rem; }

/* ---- flyer editor (/flyer/{token}) ---------------------------------------- */
.editor { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; margin-top: 1.6rem; }
.editor-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.editor-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem;
                     font-weight: 600; color: var(--ink); }
.editor-form label .hint { font-weight: 400; color: var(--muted); }
.editor-form input[type="text"], .editor-form textarea {
  font: inherit; font-weight: 400; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: .5rem; background: var(--paper); color: var(--ink); resize: vertical; }
.editor-form input[type="text"]:focus, .editor-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229,50,43,.14); }
.editor-form fieldset { border: 1px solid var(--line); border-radius: .6rem; padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .5rem; }
.editor-form legend { font-size: .85rem; font-weight: 700; padding: 0 .35rem; }
.rev-carousel { min-height: 5.5rem; }
.rev-card { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem 1.1rem; }
.rev-card .rev-text { margin: 0 0 .55rem; font-size: 1rem; font-style: italic; line-height: 1.55; color: var(--ink); }
.rev-card cite { display: block; font-style: normal; font-size: .9rem; font-weight: 600; color: var(--muted); }
.rev-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rev-controls button { font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .7rem;
                       border: 1px solid var(--line); border-radius: .5rem; background: var(--paper);
                       color: var(--ink); cursor: pointer; }
.rev-controls button:hover { border-color: var(--accent); color: var(--accent); }
.rev-controls #revPos { font-size: .82rem; color: var(--muted); }
.rev-controls .rev-pick { margin-left: auto; border-color: var(--accent); color: var(--accent); }
.rev-controls .rev-pick:hover { background: var(--accent-soft); }
.editor-form > button { align-self: flex-start; font: inherit; font-weight: 600; background: var(--accent);
  color: #fff; border: 0; border-radius: 9px; padding: .7rem 1.6rem; font-size: 1rem;
  cursor: pointer; margin-top: .4rem; }
.editor-form > button:hover { background: var(--accent-deep); }
.editor-preview { position: sticky; top: 5rem; }
.editor-preview img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 10px 30px rgba(20,22,26,.14); }
.editor-preview p { margin: .8rem 0 0; text-align: center; }
@media (max-width: 640px) { .editor { grid-template-columns: 1fr; } .editor-preview { position: static; } }

/* ---- inline flyer editor (contenteditable flyer in an iframe) --------------- */
.editor2 { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.flyer-stage { width: 100%; display: flex; justify-content: center; }
.flyer-wrap { width: 635px; height: 899px; max-width: 100%; }
.flyer-frame { width: 794px; height: 1123px; border: 0; border-radius: 12px; background: #fff;
               box-shadow: 0 14px 44px rgba(20,22,26,.16); transform: scale(.8); transform-origin: top left; }
.editor2-controls { width: 635px; max-width: 100%; display: flex; flex-direction: column; gap: 1.25rem; }
.rev-block { display: flex; flex-direction: column; gap: .55rem; }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.save-row .btn { font-size: 1rem; padding: .7rem 1.6rem; }
.save-row .btn:disabled { opacity: .45; cursor: not-allowed; background: var(--accent); }
.fit-warning {
  margin: 0; padding: .7rem .9rem; border-radius: .5rem; line-height: 1.45;
  background: #fff5f5; border: 1px solid #f2c7c7; color: #9f2d2d; font-size: .92rem; font-weight: 500;
}
.qr-field { display: flex; flex-direction: column; gap: .35rem; }
.qr-label, .rev-heading { font-size: .9rem; font-weight: 700; }
.qr-field input { font: inherit; font-size: .95rem; padding: .6rem .75rem; border: 1px solid var(--line);
                  border-radius: .5rem; background: var(--paper); color: var(--ink); }
.qr-field input:focus { outline: none; border-color: var(--accent); }
.qr-hint { font-size: .82rem; color: var(--muted); }
.qr-hint a { font-weight: 600; }