/* ══════════════════════════════════════════════════════════════════════════
   AD PREVIEW MODAL
══════════════════════════════════════════════════════════════════════════ */

.adpreview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.adpreview-modal {
  background: var(--surface); border-radius: 16px;
  width: 100%; max-width: 900px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

/* Header */
.adpreview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.adpreview-tabs { display: flex; gap: 4px; }
.adpreview-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: none; font-size: 13px; font-weight: 600; font-family: var(--font);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.adpreview-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.adpreview-ratio-badge {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.2);
  padding: 1px 5px; border-radius: 4px; letter-spacing: .04em;
}
.adpreview-tab:not(.active) .adpreview-ratio-badge { background: var(--border); color: var(--text-muted); }
.adpreview-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all .15s;
}
.adpreview-close:hover { background: var(--surface2); color: var(--text); }

/* Body */
.adpreview-body {
  display: grid; grid-template-columns: 240px 1fr;
  flex: 1; overflow: hidden; min-height: 0;
}

/* Controls panel */
.adpreview-controls {
  padding: 20px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; background: var(--surface2);
}
.adpreview-ctrl-group { display: flex; flex-direction: column; gap: 6px; }
.adpreview-ctrl-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-muted); font-family: var(--font-display);
}
.adpreview-ctrl-sub { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; }
.adpreview-caption-input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-family: var(--font);
  color: var(--text); background: var(--surface); resize: vertical;
  min-height: 90px; line-height: 1.5; transition: border-color .15s;
}
.adpreview-caption-input:focus { outline: none; border-color: var(--accent); }
.adpreview-headline-input, .adpreview-cta-select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-family: var(--font);
  color: var(--text); background: var(--surface); transition: border-color .15s;
}
.adpreview-headline-input:focus, .adpreview-cta-select:focus { outline: none; border-color: var(--accent); }
.adpreview-img-name { font-size: 12px; color: var(--text-muted); word-break: break-all; line-height: 1.4; }

/* Preview area */
.adpreview-preview-area {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto; background: #F0F2F5;
}
.adpreview-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.adpreview-device-label {
  font-size: 11px; font-weight: 600; color: #8A8D91;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ── Instagram Phone Mockup ────────────────────────── */
.ig-phone {
  width: 320px; background: #000; border-radius: 36px;
  padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 0 0 1px #333;
}
.ig-phone-inner { background: #fff; border-radius: 26px; overflow: hidden; }
.ig-stories-bar {
  display: flex; gap: 12px; padding: 10px 12px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.ig-stories-bar::-webkit-scrollbar { display: none; }
.ig-story-bubble { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.ig-story-ring {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 2px; display: flex; align-items: center; justify-content: center;
}
.ig-story-ring-seen { background: #ccc; }
.ig-story-av {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; font-family: var(--font);
}
.ig-story-name { font-size: 10px; color: #262626; font-family: -apple-system, sans-serif; }
.ig-post-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ig-post-av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; font-family: var(--font);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
}
.ig-post-meta { flex: 1; }
.ig-post-username { font-size: 13px; font-weight: 600; color: #262626; font-family: -apple-system, sans-serif; }
.ig-post-sponsored { font-size: 11px; color: #8e8e8e; font-family: -apple-system, sans-serif; }
.ig-post-more { color: #262626; cursor: pointer; padding: 4px; }
/* --ad-ar is set per placement by meta-preview.js. It used to be a hardcoded
   4/5 here and 1/1 below, so five of Meta's eight placements drew the wrong
   shape — Facebook Story came out square. `contain` rather than `cover`: this
   is a preview, and cropping an asset into a frame it was never made for shows
   you something that does not exist. Letterboxing is the honest answer and
   makes a wrong-shaped asset obvious. */
.ig-image-wrap { width: 100%; aspect-ratio: var(--ad-ar, 4/5); overflow: hidden; background: #f0f0f0; }
.ig-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-post-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 4px; color: #262626;
}
.ig-actions-left { display: flex; gap: 14px; }
.ig-likes { font-size: 13px; font-weight: 600; color: #262626; padding: 2px 12px; font-family: -apple-system, sans-serif; }
.ig-caption-row { padding: 3px 12px 4px; font-family: -apple-system, sans-serif; line-height: 1.4; }
.ig-cap-user { font-size: 13px; font-weight: 700; color: #262626; margin-right: 5px; }
.ig-cap-text { font-size: 13px; color: #262626; }
.ig-comment-row { font-size: 12px; color: #8e8e8e; padding: 2px 12px; font-family: -apple-system, sans-serif; }
.ig-timestamp { font-size: 10px; color: #8e8e8e; padding: 2px 12px 12px; font-family: -apple-system, sans-serif; letter-spacing: .04em; }

/* The real Instagram ad CTA: a full-width row between the image and the action
   icons — label left, chevron right, hairline above and below. It used to be
   drawn with .ig-timestamp, which is 10px grey letter-spaced timestamp type and
   looks nothing like the control a person actually taps. */
.ig-cta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; background: #fff;
  border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb;
  font-family: -apple-system, sans-serif;
}
.ig-cta-label { font-size: 14px; font-weight: 600; color: #262626; }
.ig-cta-chevron { font-size: 15px; color: #262626; line-height: 1; }

/* ── Facebook Card Mockup ──────────────────────────── */
.fb-card {
  width: 360px; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15); overflow: hidden;
  font-family: -apple-system, 'Segoe UI', sans-serif;
}
.fb-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.fb-card-av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.fb-card-meta { flex: 1; }
.fb-card-name { font-size: 14px; font-weight: 600; color: #1C1E21; }
.fb-card-sponsored { font-size: 12px; color: #65676B; display: flex; align-items: center; gap: 3px; }
.fb-card-more { color: #65676B; cursor: pointer; padding: 4px 8px; }
.fb-card-caption { font-size: 14px; color: #1C1E21; padding: 4px 16px 10px; line-height: 1.5; }
.fb-image-wrap { width: 100%; aspect-ratio: var(--ad-ar, 4/5); overflow: hidden; background: #f0f0f0; }
.fb-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fb-card-link-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #F0F2F5; border-top: 1px solid #E4E6EB;
}
.fb-card-domain { font-size: 11px; color: #65676B; text-transform: uppercase; letter-spacing: .04em; }
.fb-card-headline { font-size: 14px; font-weight: 600; color: #1C1E21; margin-top: 1px; }
.fb-cta-btn {
  padding: 8px 12px; background: #E4E6EB; border: none; border-radius: 6px;
  font-size: 15px; font-weight: 600; color: #050505; cursor: pointer; flex-shrink: 0;
  font-family: inherit; line-height: 1.2; white-space: nowrap;
}
.fb-reactions-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px; border-bottom: 1px solid #E4E6EB;
}
.fb-reactions-left { display: flex; align-items: center; gap: 4px; }
.fb-reaction-icon { font-size: 16px; }
.fb-reaction-count { font-size: 14px; color: #65676B; margin-left: 2px; }
.fb-reactions-right { font-size: 14px; color: #65676B; }
.fb-action-bar { display: flex; }
.fb-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #65676B; font-family: inherit;
  transition: background .1s;
}
.fb-action-btn:hover { background: #F0F2F5; }

/* Card Ad Preview button */
.cfb-adpreview { color: var(--accent) !important; border-color: var(--accent-border) !important; font-weight: 600; }
.cfb-adpreview:hover { background: var(--accent-dim) !important; }

/* Hover overlay button on card thumbnail */
.card-adpreview-btn {
  position: absolute;
  bottom: 44px; left: 50%; transform: translateX(-50%) translateY(4px);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 700; font-family: var(--font);
  border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  opacity: 0; transition: opacity .15s, transform .15s;
  white-space: nowrap; z-index: 4; pointer-events: none;
  letter-spacing: .04em;
}
.persona-ad-card:hover .card-adpreview-btn,
.persona-ad-thumb-wrap:hover .card-adpreview-btn,
.ad-card-img-wrap:hover .card-adpreview-btn {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (max-width: 700px) {
  .adpreview-body { grid-template-columns: 1fr; }
  .adpreview-controls { border-right: none; border-bottom: 1px solid var(--border); }
  .ig-phone { width: 280px; }
  .fb-card { width: 300px; }
}


/* ── Story / Reels ──────────────────────────────────────────────────────────
   A Story or Reels ad is full screen, not a card in a feed: no likes row, no
   reactions bar, no caption block. The profile row sits ON the creative at the
   top and the CTA sits near the bottom. Drawing these as feed cards was the
   second half of the wrong-shape bug — right ratio, wrong furniture. */
.ad-story {
  position: relative; width: 300px; aspect-ratio: var(--ad-ar, 9/16);
  background: #111; border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  font-family: -apple-system, 'Segoe UI', sans-serif;
}
.ad-story-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ad-story-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ad-story-empty { color: #8b8b8b; font-size: 12.5px; }
.ad-story-scrim-top {
  position: absolute; left: 0; right: 0; top: 0; height: 96px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.ad-story-scrim-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.ad-story-progress {
  position: absolute; left: 10px; right: 10px; top: 9px; height: 2.5px;
  border-radius: 2px; background: rgba(255,255,255,.34);
}
.ad-story-progress span { display: block; width: 38%; height: 100%; border-radius: 2px; background: #fff; }
.ad-story-head {
  position: absolute; left: 11px; right: 11px; top: 19px;
  display: flex; align-items: center; gap: 8px;
}
.ad-story-av {
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent, #C4522A);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff; flex: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.85);
}
.ad-story-name { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.15; }
.ad-story-sponsored { font-size: 10.5px; color: rgba(255,255,255,.82); line-height: 1.15; }
.ad-story-copy {
  position: absolute; left: 14px; right: 14px; bottom: 62px;
  color: #fff; font-size: 12.5px; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.ad-story-headline { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.ad-story-cta {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px;
  display: flex; align-items: center; gap: 6px;
  background: #fff; color: #111; border: none; border-radius: 8px;
  padding: 8px 20px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.ad-story-cta-arrow { font-size: 12px; line-height: 1; }

/* The account's own profile picture, shipped at public/brand/e4e-avatar.png.
   These three containers used to hold the letters "E4E" on a flat accent circle;
   the mock-up should show the page the ad would actually run from. */
.fb-card-av img, .ig-post-av img, .ad-story-av img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.fb-card-av, .ig-post-av, .ad-story-av { overflow: hidden; background: #0E1A14; }