/*
 * The kind of ad, the blocks editor and its preview (mockup CLAUDE/specs/makiety/Kreator-reklama-z-blokow.html) - the
 * wizard (inside .order-app, its colours), the admin's house ads (.mgn-editor: Bootstrap 4 theme, light or dark) and the
 * advertiser's ad page (.mgn-editor under data-bs-theme: Bootstrap 5).
 */
.order-app, .mgn-editor {
    --be-surface: var(--o-surface, #fff);
    --be-soft: var(--o-soft, #f8f9fc);
    --be-ink: var(--o-ink, inherit);
    --be-ink-2: var(--o-ink-2, #6e7687);
    --be-line: var(--o-line, #e3e6f0);
    --be-accent: var(--o-accent, #2f6fe4);
    --be-accent-ink: #fff;
    --be-accent-soft: var(--o-accent-soft, #e8effc);
    --be-bad: var(--o-bad, #c0392b);
}
/* the advertiser's panel (Bootstrap 5.3: data-bs-theme on <html>) */
[data-bs-theme] .mgn-editor {
    --be-surface: var(--bs-main-bg, var(--bs-body-bg));
    --be-soft: var(--bs-tertiary-bg);
    --be-ink-2: var(--bs-secondary-color);
    --be-line: var(--bs-border-color);
    --be-accent: var(--mgn-accent, var(--bs-primary));
    --be-accent-soft: rgba(var(--bs-primary-rgb), .1);
    --be-bad: var(--bs-danger);
}
[data-theme-style="dark"] .mgn-editor {
    --be-surface: #1b1e27;
    --be-soft: rgba(255, 255, 255, .04);
    --be-ink-2: #9aa3b2;
    --be-line: #2d3343;
    --be-accent: #3f78e6;
    --be-accent-soft: rgba(63, 120, 230, .18);
    --be-bad: #e66767;
}

/* the kind of ad */
.be-types { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 22px; }
@media (max-width: 760px) { .be-types { grid-auto-flow: row; } }
.be-type { position: relative; border: 1px solid var(--be-line); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; margin: 0; }
.be-type input { position: absolute; opacity: 0; pointer-events: none; }
.be-type b { font-size: .9375rem; font-weight: 600; }
.be-type span { font-size: .8125rem; color: var(--be-ink-2); line-height: 1.45; }
.be-type:has(input:checked) { border-color: var(--be-accent); box-shadow: inset 0 0 0 1px var(--be-accent); background: var(--be-accent-soft); }
.be-type:has(input:focus-visible) { outline: 2px solid var(--be-accent); outline-offset: 2px; }

/* layouts */
.be-label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 8px; }
.be-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.be-layout { position: relative; cursor: pointer; border: 1px solid var(--be-line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; text-align: center; font-size: .8125rem; margin: 0; }
.be-layout input { position: absolute; opacity: 0; pointer-events: none; }
.be-layout:has(input:checked) { border-color: var(--be-accent); box-shadow: inset 0 0 0 1px var(--be-accent); }
.be-layout:has(input:focus-visible) { outline: 2px solid var(--be-accent); outline-offset: 2px; }
.be-layout svg { width: 100%; height: auto; display: block; color: var(--be-ink-2); }
.be-layout:has(input:checked) svg { color: var(--be-accent); }
@media (max-width: 640px) { .be-layouts { gap: 6px; } .be-layout { padding: 6px; font-size: .75rem; } }

/* blocks */
.be-blocks { margin-top: 22px; display: grid; gap: 10px; }
.be-block { border: 1px solid var(--be-line); border-radius: 12px; }
.be-block > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.be-block > header b, .be-block > header label { font-size: .875rem; font-weight: 600; flex: 1; margin: 0; }
.be-block > header small { color: var(--be-ink-2); font-size: .75rem; }
.be-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.be-body textarea { resize: vertical; min-height: 64px; }
.be-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.be-sub { font-size: .8125rem; color: var(--be-ink-2); min-width: 64px; }
.be-count { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--be-ink-2); }
.be-picture { display: flex; gap: 12px; align-items: center; }
.be-thumb { width: 56px; height: 56px; border-radius: 8px; background: var(--be-soft); border: 1px solid var(--be-line); display: grid; place-items: center; overflow: hidden; flex: none; }
.be-thumb img { max-width: 100%; max-height: 100%; }
.be-pick { cursor: pointer; color: var(--be-accent); text-decoration: underline; font-size: .875rem; margin: 0; }
.be-hint { font-size: .75rem; color: var(--be-ink-2); line-height: 1.5; margin-top: 2px; }
.be-alert { padding: 10px 12px; border-radius: 8px; font-size: .8125rem; background: color-mix(in srgb, var(--be-bad) 12%, transparent); color: var(--be-bad); }
.be-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.be-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--be-surface); box-shadow: 0 0 0 1px var(--be-line); cursor: pointer; padding: 0; margin: 0; }
.be-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--be-accent); }
.be-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#e33, #ec3, #3c5, #3ad, #63e, #e33); }
.be-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.be-seg { display: inline-flex; border: 1px solid var(--be-line); border-radius: 8px; overflow: hidden; }
.be-seg button { border: 0; background: var(--be-surface); color: var(--be-ink); padding: 6px 11px; font-size: .8125rem; cursor: pointer; }
.be-seg button[aria-pressed="true"] { background: var(--be-accent); color: var(--be-accent-ink); }

/* the preview: the same ad in a computer's panel and in a phone strip */
.be-stage { border-radius: 10px; background: #111; padding: 12px; display: grid; gap: 6px; }
.be-stage small { color: rgba(255, 255, 255, .6); font-size: .6875rem; }
.be-stage-desktop { width: 100%; aspect-ratio: 860 / 950; }
.be-stage-desktop + small { margin-top: 8px; }
.be-stage-mobile { width: 100%; aspect-ratio: 3 / 1; border-radius: 4px; overflow: hidden; }

/* a video (partials/video_editor.php, mockup Kreator-wideo.html): the drop zone while there is none, the files with
   their progress - the advertiser's ad page and the admin's own ads (the wizard has the same in order.css) */
.be-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border: 1.5px dashed var(--be-line); border-radius: 12px; padding: 24px 18px; cursor: pointer; background: var(--be-soft); margin: 0; }
.be-drop:hover, .be-drop.is-over { border-color: var(--be-accent); }
.be-drop[hidden] { display: none; }
.be-drop-title { font-weight: 600; }
.be-drop-button { display: inline-block; padding: 8px 16px; border-radius: 10px; background: var(--be-accent); color: var(--be-accent-ink); font-weight: 600; font-size: .875rem; }
.be-drop-help { font-size: .8125rem; color: var(--be-ink-2); }
.be-video-alert { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: .8125rem; color: var(--be-bad); background: color-mix(in srgb, var(--be-bad) 12%, transparent); }
.be-uploads { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.be-uploads:empty { display: none; }
.be-upload { border: 1px solid var(--be-line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .8125rem; }
.be-upload.is-empty, .be-upload.is-removed { border-style: dashed; }
.be-upload.is-removed .be-thumb { opacity: .35; }
.be-upload h4 { margin: 0 0 2px; font-size: .875rem; font-weight: 600; }
.be-upload .be-muted { color: var(--be-ink-2); }
.be-upload .be-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-thumb { position: relative; width: 72px; height: 72px; border-radius: 6px; background: var(--be-soft); display: grid; place-items: center; overflow: hidden; }
.be-thumb img { max-width: 100%; max-height: 100%; display: block; }
.be-thumb .be-len { position: absolute; right: 4px; bottom: 4px; font-size: 10px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 4px; padding: 3px 4px; }
.be-links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; }
.be-links button { border: 0; background: none; padding: 0; color: var(--be-accent); font-size: .8125rem; cursor: pointer; text-decoration: underline; }
.be-links button:disabled { opacity: .4; cursor: default; }
.be-new { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: .6875rem; font-weight: 600; background: var(--be-accent-soft); color: var(--be-accent); }
.be-bar { height: 6px; border-radius: 3px; background: var(--be-soft); overflow: hidden; margin: 8px 0 6px; }
.be-bar i { display: block; height: 100%; background: var(--be-accent); border-radius: 3px; transition: width .2s; }
.be-bar.is-wait i { width: 35%; animation: be-wait 1.4s ease-in-out infinite; }
@keyframes be-wait { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.be-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--be-line); border-top-color: var(--be-accent); animation: be-spin .8s linear infinite; }
@keyframes be-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .be-bar.is-wait i, .be-spin { animation-duration: 3s; } }
.be-fit { margin-top: 16px; display: grid; gap: 8px; }
.be-fit .be-label { margin-bottom: 0; }
.be-fit-row { display: flex; align-items: center; gap: 12px; font-size: .875rem; }
.be-fit-row > span { min-width: 90px; }
.be-fit-choice { display: inline-flex; border: 1px solid var(--be-line); border-radius: 8px; overflow: hidden; }
.be-fit-choice label { display: block; margin: 0; cursor: pointer; font-weight: 400; }
.be-fit-choice input { position: absolute; opacity: 0; pointer-events: none; }
.be-fit-choice span { display: block; padding: 6px 10px; font-size: .75rem; line-height: 1.5; }
.be-fit-choice input:checked + span { background: var(--be-accent); color: var(--be-accent-ink); }
.be-fit-choice input:focus-visible + span { outline: 2px solid var(--be-accent); outline-offset: -2px; }
[data-video-frame] { position: relative; }
[data-video-frame] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }