/* hpop_design.css — the face of a designed paid pop-up (js/hpop_design.js).
   Loaded on the home page, in the admin panel and on the shop (shared.php).
   Sizes scale with the card (container query units), so the editor's preview
   and the live card on any phone keep the same layout. Fixed colours: the
   buyer chose them, and the card must look the same in light and dark. */
.wg-hpd-c { width: 100%; container-type: inline-size; }
.wg-hpd { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  background: #fff; color: #1a1a1a; text-align: left; font-size: 4.6cqw; line-height: 1.25; box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.wg-hpd * { box-sizing: border-box; }
.wg-hpd-spons { position: absolute; top: 3.4cqw; left: 3.4cqw; z-index: 2; font-size: 3.4cqw; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.45); padding: .25em .7em; border-radius: 999px; }
.wg-hpd-pill { align-self: flex-start; font-size: 3.4cqw; font-weight: 700; padding: .25em .7em; border-radius: 999px; background: #fff3cd; color: #7a5a00; }
.wg-hpd-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 800; line-height: 1.15; }
.wg-hpd-go { font-weight: 700; }
.wg-hpd-fill { flex: 1; }
.wg-hpd-kicker { font-size: 3.6cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wg-hpd-chips { display: flex; flex-wrap: wrap; gap: 2cqw; }
.wg-hpd-chips i { font-style: normal; font-size: 3.8cqw; font-weight: 700; padding: .3em .8em; border-radius: 999px; }
.wg-hpd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg-hpd-bg.is-empty { background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #f3f4f6 10px 20px); }

/* The poster's profile picture, or their initials */
.wg-hpd-logo { position: relative; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1f7a3a; font-weight: 800; overflow: hidden; flex: none; }
.wg-hpd-logo i { font-style: normal; }
.wg-hpd-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.wg-hpd-logo.is-big { width: 26cqw; height: 26cqw; font-size: 8cqw; background: rgba(255,255,255,.85); }
.wg-hpd-logo.is-mid { width: 21cqw; height: 21cqw; font-size: 6.6cqw; }
.wg-hpd-logo.is-ring { position: absolute; left: 5cqw; top: calc(52% - 9cqw); width: 18cqw; height: 18cqw; font-size: 6cqw; border: 1cqw solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 3; }

/* 1 Clean */
.wg-hpd-clean { display: flex; flex-direction: column; }
.wg-hpd-clean .wg-hpd-top { height: 44%; display: grid; place-items: center; }
.wg-hpd-clean .wg-hpd-body { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding: 4.5cqw; }
.wg-hpd-clean .wg-hpd-title { font-size: 6.4cqw; -webkit-line-clamp: 3; }
.wg-hpd-clean .wg-hpd-sub { color: #6b7280; font-size: 4.2cqw; }
.wg-hpd-clean .wg-hpd-pay { color: #1f7a3a; font-weight: 800; }
.wg-hpd-clean .wg-hpd-go { margin-top: auto; background: #2e9e4f; color: #fff; text-align: center; padding: 3cqw; border-radius: 3cqw; }

/* 2 Bold */
.wg-hpd-bold { display: flex; flex-direction: column; gap: 3cqw; padding: 7cqw 6.5cqw; color: #fff; }
.wg-hpd-bold .wg-hpd-kicker { color: #facc15; }
.wg-hpd-bold .wg-hpd-title { font-size: 9.4cqw; line-height: 1.08; -webkit-line-clamp: 4; }
.wg-hpd-bold .wg-hpd-sub { font-size: 4.4cqw; opacity: .88; }
.wg-hpd-bold .wg-hpd-chips i { background: rgba(255,255,255,.18); }
.wg-hpd-bold .wg-hpd-pay { font-size: 7cqw; font-weight: 800; color: #facc15; }
.wg-hpd-bold .wg-hpd-go { font-size: 4.4cqw; }
.wg-hpd-bold[data-c="#f4c542"] { color: #1a1a1a; }
.wg-hpd-bold[data-c="#f4c542"] .wg-hpd-kicker, .wg-hpd-bold[data-c="#f4c542"] .wg-hpd-pay { color: #1f3d2a; }
.wg-hpd-bold[data-c="#f4c542"] .wg-hpd-chips i { background: rgba(0,0,0,.08); }

/* 4 Split: photo (or colour) on top, the poster's picture on the seam */
.wg-hpd-split { display: flex; flex-direction: column; }
.wg-hpd-split .wg-hpd-top { position: relative; height: 52%; }
.wg-hpd-split .wg-hpd-body { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding: 10.5cqw 5cqw 4.5cqw; }
.wg-hpd-split .wg-hpd-co { font-size: 4cqw; font-weight: 700; color: #1f7a3a; }
.wg-hpd-split .wg-hpd-title { font-size: 6cqw; -webkit-line-clamp: 2; }
.wg-hpd-split .wg-hpd-sub { font-size: 4.2cqw; color: #374151; }
.wg-hpd-split .wg-hpd-go { margin-top: auto; background: #2e9e4f; color: #fff; text-align: center; padding: 3cqw; border-radius: 3cqw; }

/* 5 Pay first */
.wg-hpd-payfirst { display: flex; flex-direction: column; gap: 2cqw; padding: 7cqw 6.5cqw; border-top: 2.6cqw solid #2e9e4f; }
.wg-hpd-payfirst .wg-hpd-kicker { color: #6b7280; font-size: 3.4cqw; }
.wg-hpd-payfirst .wg-hpd-big { font-size: 14cqw; line-height: 1; font-weight: 800; margin-top: 2cqw; }
.wg-hpd-payfirst .wg-hpd-unit { font-size: 4.6cqw; color: #6b7280; }
.wg-hpd-payfirst .wg-hpd-title { font-size: 6.6cqw; -webkit-line-clamp: 3; margin-top: 3cqw; }
.wg-hpd-payfirst .wg-hpd-sub { font-size: 4.2cqw; color: #374151; }
.wg-hpd-payfirst .wg-hpd-chips i { background: #e6f6ec; color: #1f7a3a; font-weight: 600; }
.wg-hpd-payfirst .wg-hpd-go { margin-top: auto; background: #1a1a1a; color: #fff; text-align: center; padding: 3cqw; border-radius: 3cqw; }

/* 6 Ticket */
.wg-hpd-ticket { background: #f6f7f8; padding: 4.6cqw; display: flex; flex-direction: column; }
.wg-hpd-ticket .wg-hpd-stub { color: #fff; border-radius: 4.6cqw 4.6cqw 0 0; padding: 5.4cqw 5.4cqw 6cqw; display: flex; flex-direction: column; gap: 2cqw; }
.wg-hpd-ticket .wg-hpd-kicker { color: #facc15; }
.wg-hpd-ticket .wg-hpd-title { font-size: 6.6cqw; -webkit-line-clamp: 3; }
.wg-hpd-ticket .wg-hpd-perf { height: 0; border-top: .7cqw dashed #cbd5e1; margin: 0 3.4cqw; }
.wg-hpd-ticket .wg-hpd-rows { flex: 1; background: #fff; border-radius: 0 0 4.6cqw 4.6cqw; padding: 4cqw 5.4cqw; display: flex; flex-direction: column; gap: 2.8cqw; font-size: 4.3cqw; }
.wg-hpd-ticket .wg-hpd-rows > div { display: flex; justify-content: space-between; gap: 3cqw; }
.wg-hpd-ticket .wg-hpd-rows > div > span { color: #6b7280; }
.wg-hpd-ticket .wg-hpd-rows > div > b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-hpd-ticket .wg-hpd-go { margin-top: auto; background: #2e9e4f; color: #fff; text-align: center; padding: 3cqw; border-radius: 3cqw; }

/* 7 Gradient */
.wg-hpd-gradient { color: #fff; text-align: center; padding: 8cqw 7cqw; display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.wg-hpd-gradient .wg-hpd-pill { align-self: center; background: rgba(255,255,255,.2); color: #fff; }
.wg-hpd-gradient .wg-hpd-sub { font-size: 4.3cqw; opacity: .9; }
.wg-hpd-gradient .wg-hpd-title { font-size: 7.4cqw; -webkit-line-clamp: 3; }
.wg-hpd-gradient .wg-hpd-pay { font-size: 4.6cqw; font-weight: 700; }
.wg-hpd-gradient .wg-hpd-go { background: #fff; color: #0f766e; padding: 3.2cqw 8.6cqw; border-radius: 999px; font-weight: 800; }

/* 8 Flyer */
.wg-hpd-flyer { color: #111; padding: 7cqw 6.5cqw; display: flex; flex-direction: column; gap: 3cqw; }
.wg-hpd-flyer .wg-hpd-kicker { font-size: 3.4cqw; letter-spacing: 0; text-transform: none; font-weight: 700; color: #3a2a00; }
.wg-hpd-flyer .wg-hpd-shout { font-size: 11cqw; line-height: 1; font-weight: 900; }
.wg-hpd-flyer .wg-hpd-title { font-size: 5.6cqw; -webkit-line-clamp: 2; }
.wg-hpd-flyer .wg-hpd-tag { align-self: flex-start; background: #dc2626; color: #fff; font-weight: 800; font-size: 5.2cqw; padding: .25em .6em; border-radius: 2cqw; }
.wg-hpd-flyer .wg-hpd-ticks { display: flex; flex-direction: column; gap: 1cqw; font-size: 4.6cqw; }
.wg-hpd-flyer .wg-hpd-ticks i { font-style: normal; }
.wg-hpd-flyer .wg-hpd-go { background: #111; color: #facc15; text-align: center; padding: 3cqw; border-radius: 3cqw; font-weight: 800; }

/* 9 Dark */
.wg-hpd-dark { background: #111827; color: #fff; padding: 7cqw 6.5cqw; display: flex; flex-direction: column; gap: 3cqw; }
.wg-hpd-dark .wg-hpd-kicker { color: #f4c542; font-size: 3.4cqw; }
.wg-hpd-dark .wg-hpd-rule { width: 15cqw; height: 1cqw; background: #f4c542; border-radius: 1cqw; }
.wg-hpd-dark .wg-hpd-title { font-size: 8.6cqw; line-height: 1.1; -webkit-line-clamp: 4; }
.wg-hpd-dark .wg-hpd-sub { font-size: 4.3cqw; color: #d1d5db; }
.wg-hpd-dark .wg-hpd-lbl { font-size: 4cqw; color: #9ca3af; }
.wg-hpd-dark .wg-hpd-pay { font-size: 7cqw; font-weight: 800; color: #f4c542; margin-top: -2cqw; }
.wg-hpd-dark .wg-hpd-go { border: 1px solid #f4c542; color: #f4c542; text-align: center; padding: 3cqw; border-radius: 3cqw; }

/* Photo (no longer offered; still drawn for older cards) */
.wg-hpd-photo .wg-hpd-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.82) 100%); }
.wg-hpd-photo .wg-hpd-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 5.5cqw; display: flex; flex-direction: column; gap: 1.6cqw; color: #fff; }
.wg-hpd-photo .wg-hpd-title { font-size: 7.4cqw; -webkit-line-clamp: 3; }
.wg-hpd-photo .wg-hpd-sub { font-size: 4.2cqw; opacity: .9; }

/* Custom */
.wg-hpd-t { position: absolute; z-index: 1; max-width: calc(100% - 4cqw); font-size: calc(var(--hpd-s, 20) * .3333cqw); line-height: 1.12; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.35); white-space: pre-wrap; overflow-wrap: anywhere; }
.wg-hpd-t.is-edit { cursor: grab; touch-action: none; outline: 2px dashed transparent; outline-offset: 3px; }
.wg-hpd-t.is-edit.is-on { outline-color: #facc15; }
.wg-hpd-safe { display: none; }
.is-editing .wg-hpd-safe { display: block; position: absolute; top: 0; right: 0; width: 20cqw; height: 16cqw; z-index: 3;
  background: repeating-linear-gradient(45deg, rgba(239,68,68,.35) 0 6px, transparent 6px 12px); pointer-events: none; }

/* Admin review queue: a small copy of the buyer's card under the listing. */
.wg-padm-design { margin-top: 8px; max-width: 170px; }
.wg-padm-design small { display: block; margin-bottom: 4px; color: var(--wg-muted); }