/* PresentTool Ad Studio — shared content picker design (templates, formats, platforms) */

/* ─── Platform chips ─── */
.platform-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.platform-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-0);
  font-size: 13px; font-weight: 500; color: var(--pt-text-muted);
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.platform-chip__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--chip-accent, var(--pt-text-subtle));
}
.platform-chip.sel {
  border-color: var(--chip-accent, var(--pt-primary));
  color: var(--pt-text);
  background: var(--pt-surface-1);
}
.platform-chip:not(.sel):hover { border-color: var(--pt-border-strong); color: var(--pt-text); }

/* ─── Content type cards ─── */
.content-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.content-type-card {
  text-align: left; cursor: pointer;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-0);
  border-radius: var(--pt-radius-md, 10px);
  padding: 0; overflow: hidden;
  font: inherit; color: inherit; width: 100%;
  transition: border-color .15s, transform .12s;
}
.content-type-card:hover { border-color: var(--pt-border-strong); transform: translateY(-1px); }
.content-type-card.sel { border-color: var(--pt-primary); outline: 2px solid var(--pt-accent-soft, rgba(139,69,19,.12)); outline-offset: -1px; }
.content-type-card.is-soon { opacity: .72; cursor: not-allowed; }
.content-type-card__visual {
  aspect-ratio: 4/3;
  position: relative;
  background: var(--pt-surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.content-type-card__visual svg { width: 28px; height: 28px; color: var(--pt-text-subtle); opacity: .7; }
.content-type-card__ratio {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.88); color: var(--pt-text-muted);
  font-family: ui-monospace, monospace;
}
.content-type-card__soon {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--pt-surface-3); color: var(--pt-text-muted);
}
.content-type-card__body { padding: 12px 14px 14px; }
.content-type-card__name { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.content-type-card__desc { font-size: 12px; color: var(--pt-text-muted); line-height: 1.4; margin: 0; }

/* Mini wireframes per content type */
.ct-visual--static::before {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid var(--pt-border); border-radius: 6px;
  background: linear-gradient(180deg, var(--pt-surface-3) 55%, var(--pt-surface-0) 55%);
}
.ct-visual--carousel::before {
  content: ''; position: absolute; width: 36%; height: 70%; left: 18%; top: 15%;
  border: 1px solid var(--pt-border); border-radius: 4px; background: var(--pt-surface-3);
  box-shadow: 14px 0 0 -2px var(--pt-surface-0), 14px 0 0 0 var(--pt-border), 28px 0 0 -2px var(--pt-surface-0), 28px 0 0 0 var(--pt-border);
}
.ct-visual--short::before {
  content: ''; position: absolute; width: 38%; height: 78%; left: 31%; top: 11%;
  border: 1px solid var(--pt-border); border-radius: 8px;
  background: linear-gradient(180deg, #2a2018 40%, #f4f0eb 40%);
}
.ct-visual--story::before {
  content: ''; position: absolute; width: 32%; height: 82%; left: 34%; top: 9%;
  border: 1px solid var(--pt-border); border-radius: 12px;
  background: var(--pt-surface-3);
}
.ct-visual--pin::before {
  content: ''; position: absolute; width: 42%; height: 78%; left: 29%; top: 11%;
  border: 1px solid var(--pt-border); border-radius: 8px;
  background: linear-gradient(135deg, var(--pt-surface-3), var(--pt-surface-2));
}
.ct-visual--yt_thumb::before {
  content: ''; position: absolute; width: 72%; height: 50%; left: 14%; top: 25%;
  border: 1px solid var(--pt-border); border-radius: 6px;
  background: var(--pt-surface-3);
}
.ct-visual--linkedin_cover::before {
  content: ''; position: absolute; width: 80%; height: 28%; left: 10%; top: 36%;
  border: 1px solid var(--pt-border); border-radius: 4px;
  background: linear-gradient(90deg, var(--pt-surface-3), var(--pt-surface-2));
}
.ct-visual--thread::before {
  content: ''; position: absolute; width: 70%; height: 12%; left: 15%; top: 28%;
  border-radius: 4px; background: var(--pt-surface-3);
  box-shadow: 0 18px 0 var(--pt-surface-2), 0 36px 0 var(--pt-surface-3);
}

/* ─── Short video template cards ─── */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.tpl-card {
  text-align: left; cursor: pointer;
  border: 1px solid var(--pt-border);
  background: var(--pt-surface-0);
  border-radius: var(--pt-radius-md, 10px);
  padding: 0; overflow: hidden;
  font: inherit; color: inherit; width: 100%;
  transition: border-color .15s, transform .12s;
}
.tpl-card:hover { border-color: var(--pt-border-strong); transform: translateY(-1px); }
.tpl-card.sel { border-color: var(--pt-primary); outline: 2px solid rgba(139,69,19,.15); outline-offset: -1px; }
.tpl-card__frame {
  aspect-ratio: 9/14;
  position: relative;
  background: #141210;
  overflow: hidden;
}
.tpl-card__dur {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 10px; font-weight: 600; font-family: ui-monospace, monospace;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.9);
}
.tpl-card__body { padding: 10px 12px 12px; }
.tpl-card__name { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.tpl-card__blurb { font-size: 11px; color: var(--pt-text-muted); line-height: 1.35; margin: 0; }

/* Template preview mini-frames */
.tpl-preview { position: absolute; inset: 0; }
.tpl-preview--editorial {
  background: linear-gradient(180deg, #3d3028 0%, #3d3028 52%, #f5f0ea 52%, #f5f0ea 100%);
}
.tpl-preview--editorial::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pt-primary, #8B4513);
}
.tpl-preview--transform {
  background: linear-gradient(180deg, #2a2826 0%, #2a2826 100%);
}
.tpl-preview--transform::before {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 28%;
  height: 4px; border-radius: 2px; background: rgba(255,255,255,.15);
}
.tpl-preview--transform::after {
  content: ''; position: absolute; left: 10%; bottom: 28%; width: 55%; height: 4px;
  border-radius: 2px; background: var(--pt-primary, #8B4513);
}
.tpl-preview--swipe {
  background: linear-gradient(90deg, #4a4a48 0%, #4a4a48 50%, #6b5344 50%, #6b5344 100%);
}
.tpl-preview--swipe::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  margin-left: -1px; background: var(--pt-primary, #8B4513);
}
.tpl-preview--punch {
  background: linear-gradient(180deg, #555 0%, #555 18%, #5c4a3a 18%, #5c4a3a 55%, #f0ebe5 55%);
}
.tpl-preview--mood {
  background: linear-gradient(180deg, #4a4038 0%, #4a4038 58%, #f5f0ea 58%);
}
.tpl-preview--cinematic {
  background: radial-gradient(ellipse at 30% 40%, #5a4a3a, #2a2420);
}
.tpl-preview--cinematic::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg, transparent, #f5f0ea);
}
.tpl-preview--build {
  background: linear-gradient(90deg, #444 0%, #444 35%, #5a4a3a 35%, #5a4a3a 65%, #f0ebe5 65%);
}

/* ─── File filter chip marks ─── */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; }
.filter-chip__mark {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--pt-text-subtle);
}
.filter-chip--render .filter-chip__mark { background: #8b7355; }
.filter-chip--leefbeeld .filter-chip__mark { background: #6b5b95; }
.filter-chip--topview .filter-chip__mark { background: #4a7a9a; }
.filter-chip--moodboard .filter-chip__mark { background: #8b5a9a; }
.filter-chip--clip .filter-chip__mark { background: #3d3d42; }
.filter-chip--leefclip .filter-chip__mark { background: #3a5570; }
.filter-chip--tour .filter-chip__mark { background: #5a4a30; }
.filter-chip--model_3d .filter-chip__mark { background: #3a6b50; }
.filter-chip--walkthrough .filter-chip__mark { background: #6b5530; }
.filter-chip--input .filter-chip__mark { background: #666; }
.filter-chip--marketing .filter-chip__mark { background: #a0722a; }
.filter-chip--marketing_pdf .filter-chip__mark { background: #8b4030; }
.filter-chip--marketing_image .filter-chip__mark { background: #3a7058; }
.filter-chip--marketing_video .filter-chip__mark { background: #304878; }

/* ─── File card type placeholders ─── */
.thumb-ph { display: flex; align-items: center; justify-content: center; }
.thumb-ph--pdf {
  background: linear-gradient(145deg, #3a2218, #5a3828) !important;
  color: #ffece6; font-weight: 700; font-size: 15px; letter-spacing: .08em;
}
.thumb-ph--pdf span { opacity: .95; }
.thumb-ph--3d {
  background: linear-gradient(145deg, #1a2332, #2d3a4a) !important;
}
.thumb-ph--3d svg { width: 40px; height: 40px; color: rgba(255,255,255,.5); }
.thumb-ph--walk {
  background: linear-gradient(145deg, #1f2937, #374151) !important;
}
.thumb-ph--walk svg { width: 40px; height: 40px; color: rgba(255,255,255,.45); }
.thumb-ph--video {
  background: linear-gradient(145deg, #1a1a1e, #2a2a30) !important;
}
.thumb-ph--marketing_image { background: linear-gradient(145deg, #2a4038, #3a5848) !important; }
.thumb-ph--input { background: linear-gradient(145deg, #3a3a3a, #4a4a4a) !important; }

/* ─── Mockup result grid ─── */
.mockup-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.mockup-result-card {
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md, 10px);
  overflow: hidden;
  background: var(--pt-surface-0);
}
.mockup-result-card__frame {
  position: relative;
  background: #0c0a09;
  display: flex; align-items: center; justify-content: center;
}
.mockup-result-card__frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mockup-result-card__badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0,0,0,.55); color: #fff;
}
.mockup-result-card__actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--pt-border);
}