/* Billboard Creative Studio — frontend. Mirrors the booking plugin's plain-CSS approach. */
/* Self-contained white card like the booking form (.obb-booking): the studio
   must read identically on light and dark themes — Caleb's dark Neve theme
   rendered it as loose elements on near-black. */
.bcs-studio{max-width:1080px;margin:0 auto;font-size:16px;line-height:1.5;color:#1a1a2e;background:#fff;border:1px solid #e3e5e8;border-radius:12px;padding:28px 32px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
@media (max-width:600px){.bcs-studio{padding:18px 14px;border-radius:8px;}}
.bcs-studio h2{margin:.2em 0 .6em;}
.bcs-error{color:#b32d2e;font-weight:600;}
.bcs-status{color:#2271b1;font-weight:600;}
.bcs-board-line{color:#666;margin-top:-.4em;}
.bcs-studio [hidden]{display:none!important;}

.bcs-btn{display:inline-block;padding:.55em 1.2em;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:1em;font-weight:600;text-decoration:none;}
.bcs-btn:focus-visible{outline:2px solid #1a1a2e;outline-offset:2px;}
.bcs-visually-hidden:focus-visible + [data-bcs-logo-label]{outline:2px solid #1a1a2e;outline-offset:2px;}
.bcs-btn-primary{background:#1a1a2e;color:#fff;}
.bcs-btn-primary:hover{background:#30304d;color:#fff;}
.bcs-btn-primary[disabled]{opacity:.5;cursor:default;}
.bcs-btn-ghost{background:transparent;border-color:#bbb;color:#333;}

.bcs-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.bcs-template-card{border:2px solid #ddd;border-radius:8px;padding:10px;cursor:pointer;background:#fff;text-align:left;}
.bcs-template-card:hover{border-color:#1a1a2e;}
.bcs-template-card .bcs-thumb{position:relative;width:100%;overflow:hidden;border-radius:4px;background:#111;}
.bcs-template-card .bcs-thumb iframe{position:absolute;top:0;left:0;border:0;pointer-events:none;transform-origin:top left;max-width:none!important;max-height:none!important;}
.bcs-template-card h4{margin:.5em 0 0;font-size:1em;}

.bcs-back-top{display:inline-block;margin:0 0 14px;padding:2px 0;background:none;border:0;cursor:pointer;font-size:1em;font-weight:600;color:#1a1a2e;text-decoration:none;}
.bcs-back-top:hover{text-decoration:underline;}
.bcs-back-top:focus-visible{outline:2px solid #1a1a2e;outline-offset:2px;}
.bcs-editor{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:24px;align-items:start;}
/* Keep the live preview in view while the (much longer) form scrolls —
   picking backgrounds/photos blind defeats a live preview. align-items:start
   on the grid is what lets sticky work here. */
.bcs-preview{position:sticky;top:16px;}
@media (max-width:860px){
	.bcs-editor{grid-template-columns:1fr;}
	/* Single column: the preview moves above the form and stays pinned while
	   editing. The solid background stops form text bleeding through. */
	.bcs-preview{order:-1;top:0;z-index:20;background:#fff;padding-bottom:10px;box-shadow:0 8px 12px -10px rgba(0,0,0,.25);}
}
.bcs-field{margin:0 0 1em;}
.bcs-field label{display:block;font-weight:600;margin-bottom:.3em;}
.bcs-field input[type=text]{width:100%;padding:.5em;border:1px solid #bbb;border-radius:4px;font-size:1em;}
.bcs-field input.bcs-input-error{border-color:#b32d2e;box-shadow:0 0 0 1px #b32d2e;}
.bcs-field .bcs-count{float:right;color:#999;font-weight:400;font-size:.85em;}
.bcs-colors input[type=color]{width:56px;height:38px;padding:2px;border:1px solid #bbb;border-radius:4px;cursor:pointer;}
.bcs-variant-group{margin:0 0 1em;}
.bcs-variant-group .bcs-radio{margin-right:1em;font-weight:400;display:inline-block;}
.bcs-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
.bcs-bg-swatch{height:44px;border-radius:4px;border:2px solid #ddd;cursor:pointer;background-size:cover;background-position:center;padding:0;}
.bcs-bg-swatch.is-active{border-color:#1a1a2e;box-shadow:0 0 0 2px rgba(26,26,46,.35);}
.bcs-actions{display:flex;gap:10px;margin-top:1.2em;flex-wrap:wrap;}
.bcs-guest-actions{display:flex;gap:10px;margin-top:1.2em;flex-wrap:wrap;align-items:center;border-top:1px solid #e2e4e7;padding-top:14px;}
.bcs-email-form{display:inline-flex;gap:8px;align-items:center;}
.bcs-email-form input[type=email]{padding:.5em;border:1px solid #bbb;border-radius:4px;font-size:1em;min-width:220px;}

.bcs-preview-frame{position:relative;width:100%;overflow:hidden;background:#0b0d10;border-radius:8px;}
/* Themes commonly ship `iframe{max-width:100%}` for responsive embeds — that
   clamps our fixed-size preview iframes to the container BEFORE the scale
   transform, painting a cropped left slice (Caleb's live Neve site). The
   preview iframes are always transform-scaled to fit, so the responsive
   clamp must never apply to them. */
.bcs-preview-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;max-width:none!important;max-height:none!important;}
.bcs-dims{color:#666;font-size:.9em;margin-top:.5em;}

.bcs-notice{padding:14px 18px;border-left:4px solid #b32d2e;background:#fdf0f0;border-radius:0 6px 6px 0;max-width:640px;}
.bcs-preview-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#9fb2c8;font-size:.95em;margin:0;z-index:1;}
.bcs-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.bcs-logo-filename{color:#666;font-size:.9em;margin-left:6px;}

.bcs-offer{margin-top:1em;}

.bcs-industry-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.bcs-chip{border:1px solid #c3c4c7;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;}
.bcs-chip.is-active{background:#1a1a2e;border-color:#1a1a2e;color:#fff;}

/* --- Billboard mockup scene (pure CSS, self-contained) --- */
.bcs-preview-tools{display:flex;gap:8px;margin:0 0 10px;}
.bcs-mockup-scene.is-mockup{background:linear-gradient(180deg,#0e1726 0%,#1b2a45 55%,#0a0f18 100%);border-radius:12px;padding:48px 56px 0;overflow:hidden;}
.bcs-mockup-scene.is-mockup .bcs-preview-frame{border:10px solid #23262b;border-bottom-width:14px;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 40px rgba(255,255,255,.06);transform:perspective(1400px) rotateX(1.5deg) rotateY(-4deg);}
.bcs-mockup-scene.is-mockup::after{content:"";display:block;width:14%;height:64px;margin:0 auto;background:linear-gradient(90deg,#2c3138,#41474f 45%,#23262b);border-radius:2px 2px 0 0;}

/* Selected-element toolbar (A-/A+ sizing + free-text block tools). */
.bcs-el-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#fafafa;}
.bcs-block-tools{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.bcs-block-tools input[type="text"]{padding:.4em .6em;border:1px solid #bbb;border-radius:6px;font-size:.95em;min-width:170px;}
.bcs-swatch{width:26px;height:26px;border-radius:6px;border:1px solid #999;cursor:pointer;padding:0;}
.bcs-swatch.is-white{background:#ffffff;}
.bcs-swatch.is-black{background:#111111;}
.bcs-swatch[aria-pressed="true"]{outline:2px solid #1a1a2e;outline-offset:1px;}
.bcs-el-toolbar .bcs-btn[aria-pressed="true"]{background:#1a1a2e;color:#fff;}

/* Per-visitor language toggle */
.bcs-lang-toggle { text-align: right; margin: 0 0 4px; font-size: 13px; }
.bcs-lang-toggle a { color: #667085; text-decoration: underline; }

/* Align + distribute toolbar */
.bcs-align-tools { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid #e2e5ea; }
.bcs-align-tools .bcs-btn { min-width: 30px; padding: 4px 7px; }

/* Original-background swatch: dashed ring marks "the template's own look" */
.bcs-bg-swatch.is-original { outline: 2px dashed #98a2b3; outline-offset: 1px; background-color: #f4f5f7; }
.bcs-align-hint { display: block; font-size: 12px; color: #667085; margin-top: 4px; }