/* Builder page UI (shortcode) */
:root { --bll-primary:#111827; --bll-accent:#3B82F6; }
.bll-builder { display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start; }
.bll-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; }
.bll-card h2, .bll-card h3 { margin:0 0 10px; }
.bll-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.bll-col-span-2 { grid-column: span 2; }
label span { display:block; font-size:12px; color:#6b7280; margin-bottom:6px; }
input[type="text"], textarea, select, input[type="color"] { width:100%; padding:10px; border-radius:10px; border:1px solid #e5e7eb; }
.bll-actions { display:flex; gap:10px; margin-top:12px; }
.bll-btn { border-radius:999px; padding:10px 16px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:600; }
.bll-btn-primary { background: var(--bll-accent); border-color: var(--bll-accent); color:#fff; }

.bll-preview-header { display:flex; align-items:baseline; justify-content:space-between; }
.bll-note { color:#6b7280; font-size:12px; }
.bll-preview .bll-empty { color:#6b7280; padding:40px 0; text-align:center; }

/* Inline Editor */
.bll-section { border:1px dashed #e5e7eb; border-radius:14px; padding:14px; margin-bottom:12px; }
.bll-section h4 { margin:0 0 6px; }
.bll-field { margin-bottom:8px; }
.bll-field input, .bll-field textarea { width:100%; padding:8px; border:1px solid #e5e7eb; border-radius:10px; font-family:inherit; }
.bll-row { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }

/* Hide theme chrome on the builder page only */
body.bll-blank .wp-site-blocks > header,
body.bll-blank .wp-site-blocks > footer,
body.bll-blank header.wp-block-template-part,
body.bll-blank footer.wp-block-template-part { display: none !important; }

/* Use Outfit everywhere in the builder UI */
.bll-builder, .bll-card, .bll-card h2, .bll-card h3,
input[type="text"], textarea, select, .bll-btn { font-family: Outfit !important; font-weight:400; }

/* Stack: form first, preview second */
.bll-builder { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

@media (max-width: 1024px){
  .bll-builder { grid-template-columns: 1fr; }
}