/* Avocado inline CMS — editor UI (loaded on the page; only active for admins) */
:root{ --av-accent:#B5662B; --av-accent-d:#95511F; --av-ink:#232E1C; }

/* toolbar */
.av-bar{ position:fixed; top:0; left:0; right:0; z-index:9000; display:flex; align-items:center; gap:1rem;
  padding:.55rem 1rem; background:#232E1C; color:#F2F1E2; box-shadow:0 4px 20px rgba(0,0,0,.3);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.9rem; transform:translateY(-100%); transition:transform .3s ease; }
.av-bar.is-on{ transform:none; }
.av-bar__dot{ width:.6rem; height:.6rem; border-radius:50%; background:#9DBE54; box-shadow:0 0 0 4px rgba(157,190,84,.25); }
.av-bar__title{ font-weight:700; }
.av-bar__hint{ color:rgba(242,241,226,.6); font-size:.82rem; }
.av-bar__sp{ margin-left:auto; }
.av-bar__status{ font-size:.82rem; color:#9DBE54; opacity:0; transition:opacity .3s; }
.av-bar__status.show{ opacity:1; }
.av-btn{ border:none; border-radius:999px; padding:.5rem 1.1rem; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.av-btn--out{ background:transparent; color:#F2F1E2; border:1px solid rgba(242,241,226,.3); }
.av-btn--out:hover{ border-color:#fff; }
.av-btn--accent{ background:var(--av-accent); color:#fff; }
.av-btn--accent:hover{ background:var(--av-accent-d); }
.av-btn--danger{ background:#9b2c2c; color:#fff; }
body.av-edit{ padding-top:48px; }

/* editable highlights */
body.av-edit [data-e]{ position:relative; }
body.av-edit [data-et="text"]{ outline:1px dashed rgba(181,102,43,.0); outline-offset:3px; transition:outline-color .15s, background .15s; cursor:text; border-radius:4px; }
body.av-edit [data-et="text"]:hover{ outline-color:rgba(181,102,43,.7); background:rgba(181,102,43,.06); }
body.av-edit [data-et="text"].av-editing{ outline:2px solid var(--av-accent); background:rgba(181,102,43,.08); cursor:auto; }

/* pencil badge */
.av-pencil{ position:absolute; top:-10px; right:-10px; z-index:30; width:26px; height:26px; border-radius:50%;
  background:var(--av-accent); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25); }
.av-pencil svg{ width:14px; height:14px; fill:#fff; }
body.av-edit [data-e]:hover > .av-pencil{ display:flex; }

/* edit popover */
.av-pop{ position:absolute; z-index:9100; display:flex; gap:.4rem; transform:translateY(8px);
  background:#232E1C; padding:.4rem; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.av-pop .av-btn{ padding:.4rem .8rem; font-size:.8rem; }

/* images: floating replace button (no DOM restructuring) */
body.av-edit img[data-e]{ cursor:pointer; outline-offset:3px; transition:outline-color .15s; outline:2px solid transparent; }
body.av-edit img[data-e]:hover{ outline-color:rgba(181,102,43,.7); }
.av-imgbtn{ position:absolute; z-index:9100; display:none; border:none; border-radius:999px; padding:.55rem 1.1rem;
  background:var(--av-accent); color:#fff; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3); }
.av-imgbtn.show{ display:block; }
.av-imgbtn:hover{ background:var(--av-accent-d); }

/* video card controls */
body.av-edit figure[data-et="video"]{ position:relative; }
.av-vbar{ position:absolute; top:8px; left:8px; right:8px; z-index:40; display:none; gap:.35rem; flex-wrap:wrap; justify-content:center; }
body.av-edit figure[data-et="video"]:hover .av-vbar{ display:flex; }
.av-vbar .av-btn{ padding:.35rem .7rem; font-size:.74rem; box-shadow:0 2px 8px rgba(0,0,0,.3); }

/* add-video tile */
.av-add-tile{ display:flex; align-items:center; justify-content:center; min-height:120px; border:2px dashed rgba(181,102,43,.6);
  border-radius:18px; color:var(--av-accent); background:rgba(181,102,43,.05); cursor:pointer; font:inherit; font-weight:700;
  aspect-ratio:9/16; }
.av-add-tile:hover{ background:rgba(181,102,43,.12); }

/* modal */
.av-modal-bg{ position:fixed; inset:0; z-index:9500; background:rgba(20,24,16,.7); display:grid; place-items:center; padding:1.5rem; }
.av-modal{ width:min(100%,440px); background:#F2F1E2; color:var(--av-ink); border-radius:18px; padding:1.6rem;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.av-modal h3{ font-size:1.1rem; margin-bottom:1rem; }
.av-modal label{ display:block; font-size:.82rem; font-weight:700; margin:.9rem 0 .4rem; }
.av-modal input[type=file]{ width:100%; font:inherit; font-size:.85rem; }
.av-modal__row{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.4rem; }
.av-toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px); z-index:9600;
  background:#232E1C; color:#F2F1E2; padding:.7rem 1.2rem; border-radius:999px; font-family:system-ui,sans-serif; font-size:.88rem;
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.av-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.av-toast--err{ background:#7a2727; }
.av-spin{ pointer-events:none; opacity:.6; }
@media (prefers-reduced-motion:reduce){ .av-bar,.av-toast{ transition:none; } }
