/* Content Builder — editor + public block styles.
   Scoped to .cb-* so it won't collide with Slate's admin design system. */

/* ---- Editor layout ---- */
.cb-editor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .cb-editor-grid { grid-template-columns: 1fr; } }

.cb-canvas { display: flex; flex-direction: column; gap: .6rem; min-height: 120px; }
.cb-canvas-empty { border: 2px dashed #e0e0e0; border-radius: 8px; padding: 2rem; text-align: center; color: #999; }

.cb-block { border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.cb-block-head { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem; background: #f9fafb; border-bottom: 1px solid #eef0f3; border-radius: 8px 8px 0 0; }
.cb-block-type { font-weight: 600; font-size: .8rem; color: #475467; }
.cb-block-controls { display: flex; gap: .25rem; }
.cb-block-body { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }

.cb-icon-btn { width: 26px; height: 26px; border: 1px solid #d0d5dd; background: #fff; border-radius: 5px; cursor: pointer; line-height: 1; }
.cb-icon-btn:hover { background: #f0f2f5; }
.cb-icon-btn.cb-danger:hover { background: #fee; border-color: #f5b5b5; color: #b42318; }

.cb-field { display: flex; flex-direction: column; gap: .2rem; }
.cb-field-label { font-size: .72rem; color: #667085; }
.cb-field-input { width: 100%; padding: .4rem .55rem; border: 1px solid #d0d5dd; border-radius: 6px; font: inherit; }
textarea.cb-field-input { resize: vertical; }

.cb-cols-editor { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cb-col-editor { border: 1px dashed #d0d5dd; border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.cb-col-label { font-size: .72rem; color: #98a2b3; text-transform: uppercase; letter-spacing: .04em; }
.cb-col-add { padding: .3rem; border: 1px solid #d0d5dd; border-radius: 6px; font: inherit; }

.cb-terms { display: flex; flex-direction: column; gap: .3rem; max-height: 220px; overflow: auto; }
.cb-term { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }

.btn-block { display: block; width: 100%; text-align: center; }

/* ---- Public-facing block output ---- */
.cb-public { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #1d2939; }
.cb-page { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem; }
.cb-heading { line-height: 1.2; margin: 1.4em 0 .5em; }
.cb-paragraph { margin: 0 0 1em; }
.cb-image { margin: 1.25em 0; }
.cb-image img { display: block; border-radius: 8px; }
.cb-image-full img { width: 100%; height: auto; }
.cb-image-wide img { width: 100%; max-width: 900px; height: auto; }
.cb-image-normal img { max-width: 100%; height: auto; }
.cb-button { margin: 1.25em 0; }
.cb-button .btn { display: inline-block; padding: .65rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.cb-button .btn-primary { background: #2563eb; color: #fff; }
.cb-button .btn-secondary { background: #eef2ff; color: #2563eb; }
.cb-columns { display: grid; gap: 1.25rem; margin: 1.25em 0; }
.cb-cols-2 { grid-template-columns: 1fr 1fr; }
.cb-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .cb-columns { grid-template-columns: 1fr; } }
.cb-post-list { list-style: none; padding: 0; margin: 1.25em 0; display: flex; flex-direction: column; gap: 1rem; }
.cb-post-list-item a { font-size: 1.1rem; font-weight: 600; color: #2563eb; text-decoration: none; }
.cb-post-list-excerpt { margin: .25rem 0 0; color: #667085; }
.cb-empty { color: #98a2b3; }

/* ---- Admin management rows ---- */
.cb-rows { display: flex; flex-direction: column; }
.cb-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
          padding: .7rem 0; border-bottom: 1px solid #eef0f3; }
.cb-row:last-child { border-bottom: 0; }
.cb-row-main { min-width: 0; }
.cb-row-main code { background: #f2f4f7; padding: .05rem .3rem; border-radius: 4px; }
.cb-row-actions { display: flex; gap: .4rem; flex-shrink: 0; align-items: center; }

/* ---- Template picker (editor) ---- */
.cb-template-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .6rem; }
.cb-template-card { display: flex; flex-direction: column; gap: .2rem; padding: .8rem; border: 1px solid #e4e7ec;
                    border-radius: 8px; text-decoration: none; color: inherit; background: #fff; }
.cb-template-card:hover { border-color: var(--cb-accent,#2563eb); background: #f9fafb; }

/* ---- Menu builder add panel ---- */
.cb-menu-add { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .75rem;
               padding-top: .75rem; border-top: 1px solid #eef0f3; }
@media (max-width: 700px){ .cb-menu-add { grid-template-columns: 1fr; } }
.mt-2 { margin-top: .5rem; }

/* ---- Public theme: header / nav / footer ---- */
.cb-site-header { border-bottom: 1px solid #e8eaed; background: #fff; }
.cb-site-header-inner { max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem;
                        display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cb-brand { text-decoration: none; color: #111827; display: flex; flex-direction: column; }
.cb-brand-name { font-size: 1.25rem; font-weight: 700; }
.cb-brand-tagline { font-size: .8rem; color: #6b7280; }
.cb-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cb-nav-link { text-decoration: none; color: #374151; font-weight: 500; }
.cb-nav-link:hover { color: var(--cb-accent,#2563eb); }

.cb-site-footer { border-top: 1px solid #e8eaed; background: #fafafa; margin-top: 3rem; }
.cb-site-footer-inner { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem; text-align: center; }
.cb-footer-nav { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.cb-footer-link { text-decoration: none; color: #4b5563; }
.cb-footer-link:hover { color: var(--cb-accent,#2563eb); }
.cb-footer-copy { color: #9ca3af; font-size: .85rem; margin: 0; }

.cb-preview-banner { background: #fef3c7; color: #92400e; padding: .5rem 1rem; text-align: center;
                     font: 14px system-ui, sans-serif; }

/* Use the accent color for public buttons */
.cb-public .cb-button .btn-primary { background: var(--cb-accent,#2563eb); }

/* ---- Image field: picker button + thumbnail preview ---- */
.cb-img-actions { margin-top: .4rem; }
.cb-img-preview { margin-top: .5rem; }
.cb-img-preview img { max-width: 100%; max-height: 140px; border-radius: 6px; border: 1px solid #e4e7ec; display: block; }

/* ============================================================
   PUBLIC THEME — design tokens + sections (system fonts only)
   ============================================================ */
.cb-public { font-family: var(--cb-font-body, system-ui, sans-serif); }
.cb-public h1,.cb-public h2,.cb-public h3 { font-family: var(--cb-font-heading, system-ui, sans-serif); }
.cb-public .cb-btn { display:inline-block; padding:.7rem 1.4rem; border-radius:var(--cb-radius,10px);
                     text-decoration:none; font-weight:600; border:0; cursor:pointer; }
.cb-public .cb-btn-primary { background:var(--cb-accent,#2563eb); color:#fff; }
.cb-public .cb-btn-primary:hover { background:var(--cb-accent-dark,#1d4ed8); }

/* Header presets */
.cb-header-centered .cb-site-header-inner { flex-direction:column; text-align:center; }
.cb-header-centered .cb-nav { justify-content:center; }
.cb-header-minimal .cb-brand-name { font-size:1.05rem; }
.cb-header-minimal { border-bottom-width:1px; }

/* Footer presets */
.cb-footer-minimal .cb-footer-nav { display:none; }

/* Hero */
.cb-hero { padding:4rem 1.25rem; background:#f8fafc; }
.cb-hero-inner { max-width:760px; margin:0 auto; }
.cb-hero-center { text-align:center; }
.cb-hero-center .cb-hero-inner { margin:0 auto; }
.cb-hero-left { text-align:left; }
.cb-hero-title { font-size:2.5rem; line-height:1.1; margin:0 0 .5rem; }
.cb-hero-sub { font-size:1.15rem; color:#475569; margin:0 0 1.5rem; }
.cb-hero-image { background-size:cover; background-position:center; color:#fff; position:relative; }
.cb-hero-image::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.cb-hero-image .cb-hero-inner { position:relative; }
.cb-hero-image .cb-hero-sub { color:#e5e7eb; }

/* Generic section + responsive grids */
.cb-section { padding:3.5rem 1.25rem; }
.cb-section-inner { max-width:1080px; margin:0 auto; }
.cb-section-title { font-size:1.9rem; text-align:center; margin:0 0 2rem; }
.cb-grid { display:grid; gap:1.5rem; }
.cb-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .cb-grid-3 { grid-template-columns:1fr; } }

/* Icon box grid */
.cb-icon-box { text-align:center; padding:1.5rem; border-radius:var(--cb-radius,10px); background:#fff; border:1px solid #eef0f3; }
.cb-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
           border-radius:50%; background:var(--cb-accent,#2563eb); color:#fff; margin-bottom:1rem; }
.cb-icon-box-title { font-size:1.15rem; margin:0 0 .4rem; }
.cb-icon-box-text { color:#64748b; margin:0; }

/* Image box grid */
.cb-image-box { display:block; text-decoration:none; color:inherit; border-radius:var(--cb-radius,10px);
                overflow:hidden; border:1px solid #eef0f3; background:#fff; }
.cb-image-box-img img { width:100%; height:200px; object-fit:cover; display:block; }
.cb-image-box-title { font-size:1.15rem; margin:1rem 1rem .3rem; }
.cb-image-box-text { color:#64748b; margin:0 1rem 1rem; }
a.cb-image-box:hover { border-color:var(--cb-accent,#2563eb); }

/* CTA */
.cb-cta { padding:3.5rem 1.25rem; background:var(--cb-accent,#2563eb); }
.cb-cta-inner { max-width:680px; margin:0 auto; text-align:center; color:#fff; }
.cb-cta-title { font-size:1.9rem; margin:0 0 .5rem; }
.cb-cta-text { margin:0 0 1.5rem; opacity:.92; }
.cb-cta .cb-btn-primary { background:#fff; color:var(--cb-accent-dark,#1d4ed8); }
.cb-cta .cb-btn-primary:hover { background:#f1f5f9; }

/* Testimonial */
.cb-testimonial { padding:3.5rem 1.25rem; }
.cb-testimonial-inner { max-width:680px; margin:0 auto; text-align:center; }
.cb-testimonial-quote { font-size:1.4rem; line-height:1.5; font-style:italic; margin:0 0 1.25rem; color:#1e293b; }
.cb-testimonial-cite { display:flex; align-items:center; justify-content:center; gap:.75rem; }
.cb-testimonial-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.cb-testimonial-role { display:block; color:#64748b; font-size:.9rem; }

/* ---- Admin: branding swatches + repeater ---- */
.cb-swatch-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.cb-swatch { display:flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border:1px solid #d0d5dd;
             border-radius:8px; cursor:pointer; font-size:.85rem; }
.cb-swatch.is-active { border-color:#2563eb; background:#eff6ff; }
.cb-swatch-dot { width:16px; height:16px; border-radius:50%; display:inline-block; }
.cb-repeater { display:flex; flex-direction:column; gap:.6rem; }
.cb-repeater-item { border:1px solid #e4e7ec; border-radius:8px; padding:.6rem; }
.cb-repeater-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem;
                    font-size:.75rem; color:#667085; }

/* ---- Theme preset picker (admin) ---- */
.cb-theme-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: .75rem; }
.cb-theme-card { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border: 2px solid #e4e7ec;
                 border-radius: 10px; cursor: pointer; background: #fff; }
.cb-theme-card.is-active { border-color: #2563eb; }
.cb-theme-swatch { display: flex; gap: 3px; height: 40px; border-radius: 6px; overflow: hidden; padding: 6px; align-items: stretch; }
.cb-theme-swatch > span { flex: 1; border-radius: 3px; }
.cb-theme-name { font-size: .8rem; font-weight: 500; text-align: center; }

/* ============================================================
   v1.6.0 — Admin UI/UX redesign: palette tiles + page list
   ============================================================ */

/* ---- Block palette: icon tiles ---- */
.cb-palette { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0 0 1rem; margin-bottom: 1rem;
              border-bottom: 1px solid #eceef1; align-items: flex-start; }
.cb-palette-group { display: flex; flex-direction: column; gap: .5rem; }
.cb-palette-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #98a2b3; font-weight: 600; }
.cb-palette-tiles { display: flex; flex-direction: column; gap: .35rem; }
.cb-tile { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border: 1px solid #e4e7ec;
           border-radius: 9px; background: #fff; cursor: pointer; transition: all .13s ease; text-align: left; min-width: 150px; }
.cb-tile:hover { border-color: #2563eb; background: #f5f8ff; transform: translateX(2px); }
.cb-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
                border-radius: 7px; background: #f2f4f7; color: #475467; flex-shrink: 0; transition: all .13s ease; }
.cb-tile:hover .cb-tile-icon { background: #2563eb; color: #fff; }
.cb-tile-label { font-size: .85rem; font-weight: 500; color: #344054; }

/* ---- Page list rows ---- */
.cb-list { display: flex; flex-direction: column; }
.cb-list-row { display: flex; align-items: center; gap: .9rem; padding: .85rem .5rem;
               border-bottom: 1px solid #f0f1f3; transition: background .12s ease; }
.cb-list-row:hover { background: #fafbfc; }
.cb-list-row:last-child { border-bottom: 0; }
.cb-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cb-dot-ok   { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.15); }
.cb-dot-warn { background: #f79009; box-shadow: 0 0 0 3px rgba(247,144,9,.15); }
.cb-dot-bad  { background: #f04438; box-shadow: 0 0 0 3px rgba(240,68,56,.15); }
.cb-list-main { flex: 1; min-width: 0; }
.cb-list-title { font-weight: 600; font-size: .95rem; color: #1d2939; text-decoration: none; }
.cb-list-title:hover { color: #2563eb; }
.cb-list-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .2rem;
                font-size: .78rem; color: #98a2b3; }
.cb-slug-pill { background: #f2f4f7; color: #475467; padding: .05rem .45rem; border-radius: 5px; font-family: ui-monospace, monospace; font-size: .72rem; }
.cb-meta-sep { color: #d0d5dd; }
.cb-list-actions { display: flex; gap: .3rem; flex-shrink: 0; align-items: center; }
.cb-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
          border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; color: #667085; cursor: pointer; transition: all .12s ease; }
.cb-act:hover { border-color: #98a2b3; color: #1d2939; background: #f9fafb; }
.cb-act-go:hover { border-color: #12b76a; color: #12b76a; background: #f0fdf6; }
.cb-act-danger:hover { border-color: #f04438; color: #f04438; background: #fef3f2; }

/* ---- Filter chips refresh ---- */
.filter-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-block; padding: .35rem .9rem; border-radius: 999px; border: 1px solid #e4e7ec;
        background: #fff; color: #475467; text-decoration: none; font-size: .82rem; font-weight: 500; transition: all .12s ease; }
.chip:hover { border-color: #98a2b3; }
.chip-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ---- Apply refined row styling to other admin lists (.cb-rows) ---- */
.cb-rows { display: flex; flex-direction: column; }
.cb-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
          padding: .85rem .5rem; border-bottom: 1px solid #f0f1f3; transition: background .12s ease; }
.cb-row:hover { background: #fafbfc; }
.cb-row:last-child { border-bottom: 0; }
.cb-row-main strong { font-size: .95rem; color: #1d2939; }
.cb-row-main code { background: #f2f4f7; padding: .05rem .4rem; border-radius: 5px; font-size: .72rem; }
.cb-row-actions { display: flex; gap: .4rem; flex-shrink: 0; align-items: center; }
