/* ============================================================
   KoorPlus Website Builder — editor chrome (builder.css)
   Loaded on the main site; styles are namespaced (wb-*, pm-*, kp-edit-frame)
   so public pages are untouched.
   ============================================================ */

/* ---------- editor shell ---------- */
.wb { display: flex; flex-direction: column; height: calc(100vh - 130px); min-height: 560px; }
.wb-top { display: flex; align-items: center; gap: 8px; background: var(--navy-900, #0E1B2E); color: #fff; padding: 8px 14px; border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.wb-top .btn.xs { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.wb-top .btn.xs.success { background: var(--orange, #F26B1D); border-color: var(--orange, #F26B1D); }
.wb-top .btn.xs.ghost:hover { background: rgba(255,255,255,.2); }
.wb-top b.small { font-size: var(--fs-13); }
.wb-dev { display: flex; gap: 2px; background: rgba(255,255,255,.08); padding: 3px; border-radius: 8px; margin-inline-start: 10px; }
.wb-dev button { background: transparent; border: 0; color: #B9C6D4; padding: 5px 9px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; }
.wb-dev button.active { background: var(--orange, #F26B1D); color: #fff; }
.wb-dev .sp, .wb-top .sp { flex: 1; }
#wbSaveState { font-size: var(--fs-11); color: #9fb2c5; }

.wb-body { display: flex; flex: 1; min-height: 0; border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; background: #e9edf3; }

/* ---------- left: navigator ---------- */
.wb-left { width: 232px; flex: none; background: #fff; border-inline-end: 1px solid var(--line-2); overflow-y: auto; padding: 10px; }
.wb-navhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wb-nitem { display: flex; align-items: center; gap: 6px; padding: 8px 8px; border-radius: 9px; cursor: grab; border: 1.5px solid transparent; font-size: var(--fs-12); margin-bottom: 4px; background: #f7f9fc; user-select: none; }
.wb-nitem:hover { border-color: var(--line-2); }
.wb-nitem.sel { border-color: var(--orange, #F26B1D); background: rgba(242,107,29,.08); }
.wb-nitem.off { opacity: .55; }
.wb-nitem.over { border-top: 2.5px solid var(--orange, #F26B1D); }
.wb-drag { color: var(--muted); font-size: 13px; cursor: grab; }
.wb-nlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wb-eye { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 2px; }

/* ---------- center: canvas ---------- */
.wb-canvas { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; align-items: flex-start; }
.wb-devwrap { width: 100%; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 10px 34px rgba(14,27,46,.14); overflow: hidden; transition: width .25s ease; }
#wbFrame { width: 100%; height: calc(100vh - 240px); min-height: 480px; border: 0; display: block; background: #fff; }

/* ---------- right: inspector ---------- */
.wb-right { width: 320px; flex: none; background: #fff; border-inline-start: 1px solid var(--line-2); overflow-y: auto; padding: 14px; }
.wb-insp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1.5px solid var(--line-2); margin-bottom: 12px; }
.wb-insp-empty { text-align: center; padding: 46px 12px; color: var(--muted); }
.wb-insp-empty .ic { width: 34px; height: 34px; opacity: .4; }
.wb-langs { margin-bottom: 6px; }
.wb-lt { display: flex; gap: 4px; margin-bottom: 6px; }
.wb-lt .pill { padding: 4px 12px; font-size: var(--fs-11); cursor: pointer; border: 1.5px solid var(--line-2); background: #fff; }
.wb-lt .pill.active { background: var(--orange, #F26B1D); color: #fff; border-color: var(--orange, #F26B1D); }
.wb-tri { width: 100%; border: 1.5px solid var(--line-2); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: var(--fs-13); resize: vertical; min-height: 58px; }
.wb-tri:focus { outline: 0; border-color: var(--orange, #F26B1D); }
.wb-mini { display: flex; gap: 8px; align-items: center; background: #f7f9fc; border-radius: 9px; padding: 6px; margin-bottom: 6px; }
.wb-mini img { width: 74px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.wb-mini-b { flex: 1; min-width: 0; }
.wb-w { flex: 1; min-width: 130px; border: 1.5px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: var(--fs-12); }
.wb-colcard { background: #f7f9fc; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }

/* template picker */
.wb-tplgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wb-tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; transition: .15s; }
.wb-tpl .ic { width: 26px; height: 26px; color: var(--orange, #F26B1D); }
.wb-tpl b { font-size: var(--fs-12); text-align: center; }
.wb-tpl:hover { border-color: var(--orange, #F26B1D); box-shadow: 0 6px 16px rgba(242,107,29,.15); transform: translateY(-2px); }

/* ---------- media picker / library ---------- */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pm-card { border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; transition: .15s; }
.pm-card:hover { border-color: var(--orange, #F26B1D); box-shadow: 0 6px 16px rgba(14,27,46,.12); }
.pm-card img { width: 100%; height: 92px; object-fit: cover; display: block; background: var(--cream); }
.pm-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; }
.wb-drop { border: 2px dashed var(--line-2); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); transition: .15s; }
.wb-drop.over { border-color: var(--orange, #F26B1D); background: rgba(242,107,29,.06); }
.wb-drop .ic { width: 28px; height: 28px; opacity: .5; }

/* ---------- edit mode inside preview iframe ---------- */
html.kp-edit-frame [data-kp-id] { position: relative; }
html.kp-edit-frame [data-kp-id]:hover { outline: 2px dashed rgba(242,107,29,.55); outline-offset: -2px; }
html.kp-edit-frame [data-kp-id].kp-sel { outline: 3px solid var(--orange, #F26B1D) !important; outline-offset: -3px; }
html.kp-edit-frame [data-kp-id].kp-sel::before { content: '⚙'; position: absolute; top: 8px; inset-inline-end: 10px; background: var(--orange, #F26B1D); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; z-index: 60; box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .wb-right { width: 270px; }
  .wb-left { width: 190px; }
  .wb-tplgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .wb { height: auto; }
  .wb-body { flex-direction: column; }
  .wb-left, .wb-right { width: 100%; border: 0; border-top: 1px solid var(--line-2); max-height: 320px; }
  .wb-canvas { padding: 10px; }
  #wbFrame { height: 60vh; }
}