/* ============================================
   Page Builder UI
   ============================================ */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Jost', sans-serif;
    background: #eef1f5;
    overflow: hidden;
}

/* ---- Top bar ---- */
.pb-topbar {
    height: 58px;
    background: #1e293b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    z-index: 50;
}
.pb-top-left, .pb-top-center, .pb-top-right { display: flex; align-items: center; gap: 12px; }
.pb-back { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.85rem; }
.pb-back:hover { color: #fff; }
.pb-title { font-weight: 600; }
.pb-top-center label { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.pb-top-center select {
    background: #334155; color: #fff; border: 1px solid #475569;
    border-radius: 6px; padding: 8px 12px; font-family: 'Jost', sans-serif; font-size: 0.85rem;
}
.pb-btn {
    padding: 9px 16px; border: 1px solid rgba(255,255,255,0.2); background: transparent;
    color: #fff; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-family: 'Jost', sans-serif;
    transition: all 0.2s;
}
.pb-btn:hover { background: rgba(255,255,255,0.1); }
.pb-save { background: #10b981; border-color: #10b981; font-weight: 500; }
.pb-save:hover { background: #059669; }
.pb-save.dirty { animation: pbPulse 1.6s infinite; }
.pb-reset { border-color: #ef4444; color: #fca5a5; }
.pb-reset:hover { background: #ef4444; color: #fff; }
@keyframes pbPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5);} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0);} }

/* ---- Workspace layout ---- */
.pb-workspace {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    height: calc(100vh - 58px);
}

/* ---- Library ---- */
.pb-library {
    background: #fff;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    padding: 20px 16px;
}
.pb-library h3 { font-family: 'Jost', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; margin-bottom: 16px; }
.pb-blocks { display: flex; flex-direction: column; gap: 8px; }
.pb-block-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 0.85rem;
    color: #334155; text-align: left; transition: all 0.15s;
}
.pb-block-btn:hover { background: #4A2C40; color: #fff; border-color: #4A2C40; transform: translateX(2px); }
.pb-block-icon { font-size: 1.2rem; }

/* ---- Canvas ---- */
.pb-canvas-wrap { overflow-y: auto; padding: 24px; background: #eef1f5; }
.pb-canvas {
    max-width: 1100px; margin: 0 auto; background: #fff;
    min-height: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.06); border-radius: 6px; overflow: hidden;
    transition: max-width 0.3s;
}
.pb-canvas.mobile { max-width: 400px; }
.pb-loading { padding: 80px; text-align: center; color: #94a3b8; }

.pb-empty { padding: 100px 40px; text-align: center; color: #94a3b8; }
.pb-empty p { font-size: 1.05rem; }
.pb-empty .pb-sub { font-size: 0.9rem; margin-top: 8px; color: #cbd5e1; }

/* ---- Section wrapper ---- */
.pb-section { position: relative; border: 2px solid transparent; transition: border-color 0.15s; }
.pb-section:hover { border-color: #c7d2e0; }
.pb-section.selected { border-color: #C89B54; }
.pb-section.dragging { opacity: 0.4; }
.pb-section.drop-target { border-color: #10b981; border-style: dashed; }
.pb-section.hidden-mobile .pb-preview { opacity: 0.55; }

.pb-sec-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    background: rgba(30,41,59,0.94); color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; font-size: 0.78rem;
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.pb-section:hover .pb-sec-bar, .pb-section.selected .pb-sec-bar { opacity: 1; pointer-events: all; }
.pb-sec-name { font-weight: 500; letter-spacing: 0.5px; }
.pb-sec-actions { display: flex; gap: 4px; }
.pb-sec-actions button {
    width: 26px; height: 26px; border: none; background: rgba(255,255,255,0.12);
    color: #fff; border-radius: 4px; cursor: pointer; font-size: 0.8rem;
}
.pb-sec-actions button:hover { background: rgba(255,255,255,0.28); }
.pb-sec-actions button.danger:hover { background: #ef4444; }

.pb-preview { cursor: pointer; }
/* neutralize fixed/hero heights so previews stack nicely in canvas */
.pb-preview .hero { min-height: 420px; }
.pb-preview .page-hero { min-height: 300px; }
.pb-preview .navbar { display: none; }

/* ---- Settings panel ---- */
.pb-settings {
    background: #fff; border-left: 1px solid #e2e8f0; overflow-y: auto; padding: 0;
}
.pb-settings-empty { padding: 40px 24px; text-align: center; color: #94a3b8; font-size: 0.9rem; }
.pb-settings-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; background: #fff; z-index: 2;
}
.pb-settings-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: #4A2C40; }
.pb-close { border: none; background: #f1f5f9; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: #64748b; }
.pb-close:hover { background: #e2e8f0; }

#pbFields { padding: 20px; }
.pb-field { margin-bottom: 16px; }
.pb-field > label {
    display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
    color: #64748b; font-weight: 500; margin-bottom: 6px;
}
.pb-field input[type=text], .pb-field input[type=url], .pb-field input[type=number],
.pb-field textarea, .pb-field select {
    width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-family: 'Jost', sans-serif; font-size: 0.88rem; color: #1e293b;
}
.pb-field input:focus, .pb-field textarea:focus, .pb-field select:focus { outline: none; border-color: #C89B54; }
.pb-field input[type=color] { width: 48px; height: 34px; padding: 2px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; }

/* image field */
.pb-image-field { display: flex; flex-direction: column; gap: 8px; }
.pb-image-preview {
    width: 100%; height: 90px; background: #f1f5f9 center/cover no-repeat;
    border-radius: 6px; border: 1px solid #e2e8f0;
}
.pb-upload-btn {
    padding: 8px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 6px;
    cursor: pointer; font-family: 'Jost', sans-serif; font-size: 0.82rem; color: #475569;
}
.pb-upload-btn:hover { background: #4A2C40; color: #fff; border-color: #4A2C40; }

/* list field */
.pb-list-field { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #f8fafc; }
.pb-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pb-list-head label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #64748b; font-weight: 600; }
.pb-list-add { padding: 5px 12px; background: #4A2C40; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.78rem; font-family: 'Jost', sans-serif; }
.pb-list-add:hover { background: #362030; }
.pb-list-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin-bottom: 10px; }
.pb-list-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pb-list-item-head span { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }
.pb-list-controls { display: flex; gap: 4px; }
.mini { width: 24px; height: 24px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 4px; cursor: pointer; font-size: 0.72rem; }
.mini:hover { background: #e2e8f0; }
.mini.danger:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* toast */
.pb-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: #1e293b; color: #fff; padding: 14px 26px; border-radius: 8px;
    font-size: 0.9rem; z-index: 100; opacity: 0; transition: all 0.3s; box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.pb-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.pb-toast.error { background: #ef4444; }

@media (max-width: 1100px) {
    .pb-workspace { grid-template-columns: 200px 1fr 280px; }
}