/* ============================================================================
   Website widget page (B3, webapp-v4/seiten/35-website-widget.html, prefix ww-)
   The widget itself brings its own styles in a shadow root (lib/website_widget/w.js);
   this file only styles the page around it: variant sketches, the fake website
   in the preview frame, the code column and the legal notes.
   ========================================================================= */

.bl-v4 .ww-loc-form { display: flex; align-items: center; gap: 8px; }
.bl-v4 .ww-loc { min-width: 300px; }
.bl-v4 .ww-loc select { flex: 1 1 auto; }

/* Variant choice with sketches */
.bl-v4 .ww-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-v4 .ww-choices .bl-choice { gap: 4px; padding: 12px 12px 16px; }
.bl-v4 .ww-choices .bl-choice-title,
.bl-v4 .ww-choices .bl-choice-sub { padding: 0 4px; }
.bl-v4 .ww-thumb { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 72px; margin-bottom: 10px; padding: 0 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bl-v4 .bl-choice:has(input:checked) .ww-thumb { border-color: var(--accent-line, var(--accent)); background: var(--surface); }
.bl-v4 .ww-thumb i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.bl-v4 .ww-thumb .ww-s { background: var(--star); opacity: .85; }
.bl-v4 .ww-thumb .ww-th-link { margin-left: auto; background: var(--accent-line, var(--accent)); }
.bl-v4 .ww-th-bar { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.bl-v4 .ww-th-bar > span { display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.bl-v4 .bl-choice:has(input:checked) .ww-th-bar > span { background: var(--surface-2); }
.bl-v4 .ww-th-card { align-items: center; }
.bl-v4 .ww-th-card > span { display: flex; flex-direction: column; gap: 4px; width: 46%; padding: 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.bl-v4 .bl-choice:has(input:checked) .ww-th-card > span { background: var(--surface-2); }
.bl-v4 .ww-th-card i { height: 4px; }
.bl-v4 .ww-th-slide { flex-direction: row; align-items: center; gap: 6px; padding: 0 12px; }
.bl-v4 .ww-th-slide > span { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.bl-v4 .bl-choice:has(input:checked) .ww-th-slide > span { background: var(--surface-2); }
.bl-v4 .ww-th-slide i { height: 4px; }

/* Preview head */
.bl-v4 .ww-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.bl-v4 .ww-prev-label { display: flex; align-items: center; gap: 8px; }
.bl-v4 .ww-preview .bl-browser { box-shadow: none; }
.bl-v4 .ww-preview .bl-browser-body { padding: 0; }
.bl-v4 .ww-brand-opt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2, var(--ink)); }
.bl-v4 .ww-brand-opt .bl-help { margin: 0; }

/* The customer's website (foreign surface, fixed colours allowed) */
.bl-v4 .ww-site { --w-bg: #ffffff; --w-ink: #0c1b1e; --w-line: #e3e9e9; --w-bar: #e7ecec;
  container-type: inline-size; background: var(--w-bg); color: var(--w-ink); }
.bl-v4 .bl-browser-body.bl-is-dark .ww-site { --w-bg: #0f1a1c; --w-ink: #e6efee; --w-line: #253a3f; --w-bar: #1e3034; }
.bl-v4 .ww-site-nav { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--w-line); font-size: 14px; font-weight: 700; }
.bl-v4 .ww-site-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #7a4a1e; color: #fff; font-size: 10px; font-weight: 800; flex: none; }
.bl-v4 .ww-site-links { margin-left: auto; display: flex; gap: 20px; }
.bl-v4 .ww-site-main { padding: 28px 24px 32px; }
.bl-v4 .ww-ph { display: block; height: 9px; border-radius: 5px; background: var(--w-bar); }
.bl-v4 .ww-ph--h { height: 16px; width: 46%; margin-bottom: 14px; }
.bl-v4 .ww-ph + .ww-ph { margin-top: 9px; }
.bl-v4 .ww-site-links .ww-ph + .ww-ph { margin-top: 0; }
.bl-v4 .ww-ph-img { display: block; height: 150px; margin-top: 24px; border-radius: 10px; background: var(--w-bar); }
.bl-v4 .ww-ph-lines { margin-top: 20px; }
.bl-v4 .ww-ph-col { display: none; }
.bl-v4 .ww-slot { margin: 24px 0; }
.bl-v4 .ww-site--karte .ww-site-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.bl-v4 .ww-site--karte .ww-ph-col { display: block; }
.bl-v4 .ww-site--karte .ww-slot { margin: 0; }
.bl-v4 .ww-site--karte .ww-site-tail { display: none; }

@container (max-width: 640px) {
  .bl-v4 .ww-site-links { display: none; }
  .bl-v4 .ww-site-main { padding: 20px 16px 24px; }
  .bl-v4 .ww-site-nav { padding: 12px 16px; }
  .bl-v4 .ww-site--karte .ww-site-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bl-v4 .ww-site--karte .ww-ph-col { display: none; }
}

/* Add to the website */
.bl-v4 .ww-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; }
.bl-v4 .ww-build .bl-steps { margin-top: -16px; }
.bl-v4 .ww-code-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bl-v4 .ww-code-col .bl-codebox pre { padding-top: 16px; padding-right: 120px; white-space: pre; }
.bl-v4 .ww-code-help { display: flex; align-items: flex-start; gap: 8px; }
.bl-v4 .ww-code-help .bl-ic { flex: none; margin-top: 2px; color: var(--muted); }
.bl-v4 .ww-code-help.bl-is-changed,
.bl-v4 .ww-code-help.bl-is-changed .bl-ic { color: var(--warn); }

/* Legal notes in the card foot */
.bl-v4 .ww-legal { justify-content: flex-start; flex-direction: column; align-items: stretch; gap: 8px; }
.bl-v4 .ww-legal .bl-legal-note { color: var(--ink-2, var(--ink)); }
.bl-v4 .ww-legal .bl-legal-note .bl-ic { flex: none; margin-top: 2px; color: var(--muted); }
.bl-v4 .ww-legal .bl-legal-note strong { font-weight: 700; color: var(--ink); }

@media (max-width: 1023.98px) {
  .bl-v4 .ww-loc-form { width: 100%; }
  .bl-v4 .ww-loc { min-width: 0; width: 100%; height: 44px; }
  .bl-v4 .ww-choices { gap: 8px; }
  .bl-v4 .ww-choices .bl-choice { padding: 8px 8px 12px; align-items: center; text-align: center; }
  .bl-v4 .ww-choices .bl-choice-sub { display: none; }
  .bl-v4 .ww-thumb { height: 56px; margin-bottom: 6px; padding: 0 10px; width: 100%; }
  .bl-v4 .ww-th-slide { padding: 0 6px; gap: 4px; }
  .bl-v4 .ww-th-slide > span { padding: 6px 4px; }
  .bl-v4 .ww-th-card > span { width: 64%; }
  .bl-v4 .ww-prev-head { flex-wrap: wrap; margin-top: 24px; }
  .bl-v4 .ww-prev-head .bl-seg { width: 100%; }
  .bl-v4 .ww-prev-head .bl-seg-item { flex: 1 1 0; }
  .bl-v4 .ww-build { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bl-v4 .ww-code-col { order: 2; }
  .bl-v4 .ww-code-col .bl-codebox pre { padding-top: 56px; padding-right: 16px; min-height: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .bl-v4 .ww-code-col .bl-codebox .bl-btn { height: 40px; }
  .bl-v4 .ww-legal { padding: 16px; }
}