/* Solara CMS — shared overlays for theme/content/cards editing.
   Loaded on every page; only renders UI when in edit mode. */
[data-cms-editable]{ outline:0; transition:box-shadow .12s }
body.cms-edit [data-cms-editable]{ box-shadow:0 0 0 1px rgba(181,106,63,.35); border-radius:4px; cursor:text }
body.cms-edit [data-cms-editable]:hover{ box-shadow:0 0 0 2px rgba(181,106,63,.55) }
body.cms-edit [data-cms-editable]:focus{ box-shadow:0 0 0 2px var(--primary, #b56a3f); background:rgba(255,235,210,.35) }

#cmsBar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:99999;
  background:#1f1610; color:#fbf7ef; border-radius:999px; padding:8px 14px;
  font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.35); display:none; gap:10px; align-items:center;
  max-width:calc(100vw - 24px) }
#cmsBar.show{ display:inline-flex }
#cmsBar button{ appearance:none; border:0; background:rgba(255,255,255,.12); color:inherit;
  font:inherit; padding:6px 12px; border-radius:999px; cursor:pointer }
#cmsBar button.primary{ background:#d99060; color:#1f1610 }
#cmsBar button:hover{ filter:brightness(1.1) }
#cmsBar .cms-status{ font-weight:500; opacity:.8; padding:0 4px }

#cmsToast{ position:fixed; right:18px; bottom:18px; z-index:99999;
  background:#1f1610; color:#fff; padding:10px 14px; border-radius:10px;
  font:600 13px/1.2 system-ui,-apple-system,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none }
#cmsToast.show{ opacity:1; transform:none }
#cmsToast.err{ background:#7a2a2a }

/* ============ Website builder (per-section editing) ============ */
body.cms-website .cms-sec-pencil{
  position:absolute; top:14px; right:14px; z-index:9000;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  background:#b56a3f; color:#fff; border:2px solid #fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 2px rgba(181,106,63,.4);
  opacity:1; transition:transform .15s, box-shadow .15s;
  animation:cmsPencilPulse 2.4s ease-in-out infinite;
}
@keyframes cmsPencilPulse{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 2px rgba(181,106,63,.4) }
  50%    { box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 8px rgba(181,106,63,.18) }
}
body.cms-website .cms-sec-pencil:hover{ transform:translateY(-1px) scale(1.04) }
body.cms-website section[id], body.cms-website header.nav, body.cms-website footer{
  outline:2px dashed rgba(181,106,63,.55); outline-offset:-4px;
}
body.cms-website section[id]::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(181,106,63,.06), transparent 80px);
  z-index:1;
}

/* Section sidebar */
#cmsSecList{
  position:fixed; left:14px; top:80px; bottom:90px; z-index:99997;
  width:230px; max-width:46vw;
  background:#fff; color:#2a2118; border:1px solid #e6dcc8; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  display:flex; flex-direction:column; overflow:hidden;
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
#cmsSecList .cms-sl-head{
  padding:12px 14px; font:700 12px/1 system-ui; text-transform:uppercase; letter-spacing:.08em;
  color:#fbf7ef; background:#1f1610; border-bottom:1px solid #e6dcc8;
}
#cmsSecList .cms-sl-body{ flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:4px }
#cmsSecList .cms-sl-item{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid transparent; border-radius:10px; background:#fbf7ef;
  font:600 13px/1 system-ui; color:#2a2118; cursor:pointer; text-align:left;
}
#cmsSecList .cms-sl-item:hover{ border-color:#b56a3f; background:#fff }
#cmsSecList .cms-sl-foot{ padding:10px; border-top:1px solid #e6dcc8; background:#fbf7ef }
#cmsSecList .cms-sl-themes{
  width:100%; padding:11px 12px; border-radius:10px; border:0; cursor:pointer;
  background:#b56a3f; color:#fff; font:700 13px/1 system-ui; letter-spacing:.04em;
}
#cmsSecList .cms-sl-themes:hover{ filter:brightness(1.08) }
@media (max-width:720px){
  #cmsSecList{ left:8px; right:8px; width:auto; top:auto; bottom:70px; max-height:42vh }
}

#cmsSecPanel{
  position:fixed; right:18px; top:80px; z-index:99998; width:320px; max-width:calc(100vw - 36px);
  background:#fff; color:#2a2118; border:1px solid #e6dcc8; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;
}
#cmsSecPanel .cms-sp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #e6dcc8;
  background:#fbf7ef;
}
#cmsSecPanel .cms-sp-x{
  appearance:none; border:0; background:transparent; font-size:22px; line-height:1;
  cursor:pointer; color:#7a6a58; padding:2px 6px;
}
#cmsSecPanel .cms-sp-body{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow:auto }
#cmsSecPanel .cms-sp-body label{
  display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#7a6a58;
}
#cmsSecPanel .cms-sp-body label input[type=color]{
  width:46px; height:32px; border:1px solid #e6dcc8; border-radius:8px; padding:2px; background:#fff; cursor:pointer;
  grid-column:2;
}
#cmsSecPanel .cms-sp-body label input[type=url], #cmsSecPanel .cms-sp-body label select{
  grid-column:1/-1; padding:9px 10px; border:1px solid #e6dcc8; border-radius:8px;
  font:inherit; font-size:13px; background:#fff; color:#2a2118; text-transform:none; font-weight:400; letter-spacing:0;
}
#cmsSecPanel .cms-sp-clear{
  appearance:none; border:1px solid #e6dcc8; background:#fff; padding:6px 10px; border-radius:8px;
  font:600 11px/1 system-ui; text-transform:uppercase; letter-spacing:.04em; color:#7a6a58; cursor:pointer;
  grid-column:3;
}
#cmsSecPanel .cms-sp-foot{
  display:flex; justify-content:space-between; gap:8px; padding:10px 14px; border-top:1px solid #e6dcc8; background:#fbf7ef;
}
#cmsSecPanel .cms-sp-foot button{
  appearance:none; border:1px solid #e6dcc8; background:#fff; padding:8px 14px;
  border-radius:999px; cursor:pointer; font:600 12px/1 system-ui; letter-spacing:.04em; text-transform:uppercase;
}
#cmsSecPanel .cms-sp-foot .primary{ background:#b56a3f; color:#fbf7ef; border-color:#b56a3f }

/* Theme picker modal */
#cmsThemePicker{
  position:fixed; inset:0; z-index:99999; background:rgba(15,12,10,.72);
  display:flex; align-items:center; justify-content:center; padding:24px;
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
#cmsThemePicker .cms-tp-shell{
  width:min(1100px,100%); max-height:calc(100vh - 48px); background:#fbf7ef;
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
#cmsThemePicker .cms-tp-head{
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:#1f1610; color:#fbf7ef; border-bottom:1px solid #2c2118;
}
#cmsThemePicker .cms-tp-head strong{ font-size:15px; letter-spacing:.04em }
#cmsThemePicker .cms-tp-hint{ flex:1; font-size:12px; opacity:.75 }
#cmsThemePicker .cms-tp-x{
  appearance:none; border:0; background:transparent; color:#fbf7ef;
  font-size:26px; cursor:pointer; line-height:1; padding:2px 8px;
}
#cmsThemePicker .cms-tp-grid{
  overflow:auto; padding:16px;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
#cmsThemePicker .cms-tp-card{
  appearance:none; cursor:pointer; padding:14px; min-height:120px; text-align:left;
  border:2px solid #e6dcc8; border-radius:12px;
  display:flex; flex-direction:column; gap:10px;
  font:inherit; transition:transform .12s, box-shadow .12s;
}
#cmsThemePicker .cms-tp-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.25) }
#cmsThemePicker .cms-tp-name{ font:700 13px/1.2 system-ui; letter-spacing:.02em }
#cmsThemePicker .cms-tp-swatch{ display:flex; gap:6px }
#cmsThemePicker .cms-tp-swatch i{ width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.15); display:inline-block }
#cmsThemePicker .cms-tp-meta{ margin-top:auto; font:600 10px/1 system-ui; text-transform:uppercase; letter-spacing:.08em; opacity:.7 }

/* Section entrance transitions */
.cms-trans-fade{ opacity:0; transition:opacity .8s ease }
.cms-trans-fade.cms-trans-in{ opacity:1 }
.cms-trans-slide-up{ opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease }
.cms-trans-slide-up.cms-trans-in{ opacity:1; transform:none }
.cms-trans-slide-left{ opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease }
.cms-trans-slide-left.cms-trans-in{ opacity:1; transform:none }
.cms-trans-zoom{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease }
.cms-trans-zoom.cms-trans-in{ opacity:1; transform:none }

/* v50.57 — admin gate overlay + sidebar additions */
#cmsAdminGate{
  position:fixed; inset:0; z-index:100000; background:rgba(18,12,8,.78);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(6px);
}
#cmsAdminGate .cms-gate-card{
  max-width:440px; width:100%; background:#fbf7ef; color:#2a2118;
  border-radius:16px; padding:26px 24px; box-shadow:0 30px 80px rgba(0,0,0,.4);
  border:1px solid #e6dcc8;
}
#cmsAdminGate h2{ margin:0 0 8px; font:700 20px/1.25 system-ui; color:#2a2118 }
#cmsAdminGate p{ margin:0 0 18px; font:400 14px/1.5 system-ui; color:#5a4a38 }
#cmsAdminGate .cms-gate-row{ display:flex; gap:10px; flex-wrap:wrap }
#cmsAdminGate .cms-gate-btn{
  flex:1 1 auto; text-align:center; text-decoration:none;
  padding:11px 14px; border-radius:10px; font:600 14px/1 system-ui;
  background:#fff; color:#2a2118; border:1px solid #e6dcc8;
}
#cmsAdminGate .cms-gate-btn.primary{ background:#b56a3f; color:#fbf7ef; border-color:#b56a3f }
#cmsAdminGate .cms-gate-btn:hover{ filter:brightness(1.05) }

#cmsSecList .cms-sl-who{
  display:block; font:500 11px/1.3 system-ui; opacity:.7; margin-top:2px;
  text-transform:none; letter-spacing:0;
}
#cmsSecList .cms-sl-back{
  display:block; text-align:center; margin-top:8px; padding:8px;
  font:600 12px/1 system-ui; color:#7a6a58; text-decoration:none;
  border-radius:8px; border:1px solid transparent;
}
#cmsSecList .cms-sl-back:hover{ background:#fff; border-color:#e6dcc8; color:#2a2118 }
