/* LP360 Hero Content Editor — 2026-09-24 v4 tight auto-size + 2D drag */
#heroContentEditorPanel[hidden]{display:none!important}
.hero-content-editor-panel{
  position:fixed!important;right:12px!important;top:50%!important;transform:translateY(-50%)!important;
  z-index:65020!important;width:286px!important;max-width:calc(100vw - 24px)!important;max-height:92vh!important;
  overflow:auto!important;background:#fff!important;color:#172033!important;border:1px solid #dfe4ec!important;
  border-radius:14px!important;box-shadow:0 18px 48px rgba(15,23,42,.24)!important;padding:12px!important;
  font-family:inherit!important
}
.hero-content-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.hero-content-editor-head h3{margin:0!important;font-size:16px!important;line-height:1.25!important;color:#172033!important}
.hero-content-editor-head p{margin:2px 0 0!important;font-size:11px!important;color:#64748b!important;line-height:1.35!important}
.hero-content-editor-close{border:0!important;background:#f1f5f9!important;color:#334155!important;width:28px!important;height:28px!important;border-radius:8px!important;font-size:19px!important;line-height:1!important;cursor:pointer!important}
.hero-editor-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #eef2f7}
.hero-editor-label{font-size:12px!important;font-weight:700!important;color:#334155!important}
.hero-editor-stepper{display:flex;align-items:center;gap:5px}
.hero-editor-stepper button,.hero-editor-align button,.hero-editor-eye{
  border:1px solid #dbe2ea!important;background:#fff!important;color:#243041!important;border-radius:7px!important;
  min-width:28px!important;height:28px!important;padding:0 7px!important;cursor:pointer!important;font-size:12px!important;font-weight:700!important
}
.hero-editor-stepper output{min-width:44px;text-align:center;font-size:11px;font-weight:800;color:#0f766e}
.hero-editor-align{display:flex;gap:4px}
.hero-editor-align button.is-active{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}
.hero-editor-font-style{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.hero-editor-font-style button{border:1px solid #dbe2ea!important;background:#fff!important;color:#243041!important;border-radius:7px!important;height:28px!important;padding:0 7px!important;cursor:pointer!important;font-size:10.5px!important;font-weight:700!important}
.hero-editor-font-style button.is-active{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}
.hero-editor-colors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px 0;border-top:1px solid #eef2f7}
.hero-editor-color{display:grid;gap:4px;font-size:10px!important;font-weight:700!important;color:#475569!important;text-align:center}
.hero-editor-color input[type=color]{width:100%!important;height:30px!important;padding:2px!important;border:1px solid #dbe2ea!important;border-radius:7px!important;background:#fff!important;cursor:pointer!important}
.hero-editor-eye{display:flex!important;align-items:center!important;gap:6px!important;justify-content:center!important;min-width:88px!important}
.hero-editor-eye.is-off{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important}
.hero-editor-note{font-size:10.5px!important;line-height:1.4!important;color:#64748b!important;background:#f8fafc!important;border-radius:8px!important;padding:7px 8px!important;margin:7px 0!important}
.hero-editor-status{min-height:17px!important;font-size:10.5px!important;line-height:1.35!important;color:#64748b!important;margin-top:4px!important}
.hero-editor-status.is-error{color:#b91c1c!important}.hero-editor-status.is-ok{color:#047857!important}
.hero-editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.hero-editor-actions button{height:34px!important;border-radius:8px!important;font-size:11.5px!important;font-weight:800!important;cursor:pointer!important}
#heroContentEditorCancel{background:#fff!important;border:1px solid #cbd5e1!important;color:#334155!important}
#heroContentEditorSave{background:#0f766e!important;border:1px solid #0f766e!important;color:#fff!important}
#heroContentEditorSave:disabled{opacity:.55!important;cursor:wait!important}
body.hero-content-editing #home.hero{outline:2px dashed rgba(15,118,110,.55)!important;outline-offset:-2px!important}
body.hero-content-editing #home.hero .hero-content:not([style*="display: none"]){outline:2px dashed #2dd4bf!important;outline-offset:0!important;cursor:move!important;touch-action:none!important}
body.hero-content-editing #home.hero .hero-content.hero-content-dragging{cursor:grabbing!important}
@media(max-width:640px){.hero-content-editor-panel{right:8px!important;width:min(280px,calc(100vw - 16px))!important}.hero-editor-colors{grid-template-columns:1fr 1fr 1fr}}

/* Admin trigger: fixed at the right edge of the viewport. Visibility is still controlled by .admin-only. */
#heroContentEditorButton{
  position:fixed!important;right:0!important;top:50%!important;left:auto!important;bottom:auto!important;
  transform:translateY(-50%)!important;z-index:65010!important;margin:0!important;
  border-radius:10px 0 0 10px!important;box-shadow:0 8px 24px rgba(15,23,42,.18)!important;
  white-space:nowrap!important
}
@media(max-width:640px){#heroContentEditorButton{right:0!important;top:54%!important;font-size:11px!important;padding:8px 9px!important}}


/* Overlay controls added to the Header text editor. The selected color/intensity
   replaces only the tint layer while keeping the real Hero image. */
.hero-editor-overlay-control{display:grid;grid-template-columns:94px 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid #eef2f7}
.hero-editor-overlay-color{display:grid;grid-template-columns:auto 36px;align-items:center;gap:6px;font-size:10.5px!important;font-weight:700!important;color:#475569!important}
.hero-editor-overlay-color input[type=color]{width:36px!important;height:30px!important;padding:2px!important;border:1px solid #dbe2ea!important;border-radius:7px!important;background:#fff!important;cursor:pointer!important}
.hero-editor-overlay-opacity{display:grid;grid-template-columns:auto 1fr 38px;align-items:center;gap:6px;font-size:10.5px!important;font-weight:700!important;color:#475569!important}
.hero-editor-overlay-opacity input[type=range]{width:100%!important;accent-color:#0f766e!important;cursor:pointer!important}
#heroOverlayOpacityValue{text-align:right;font-size:10.5px!important;font-weight:800!important;color:#0f766e!important}

/* Replace the dark tint used by each Template without covering the actual image. */
body.lp-template2 #websiteHeroOverlay.lp-hero-overlay-managed::after{background:var(--lp-hero-overlay-fill,var(--lp-hero-overlay-rgba,transparent))!important}
body.lp-template3 #websiteHeroOverlay.lp-hero-overlay-managed::before{background:var(--lp-hero-overlay-fill,var(--lp-hero-overlay-rgba,transparent))!important}
body.lp-template4 #home.hero.lp-hero-overlay-managed::before,
body.lp-template5 #home.hero.lp-hero-overlay-managed::before,
body.lp-template6 #home.hero.lp-hero-overlay-managed::before,
body.lp-template7 #home.hero.lp-hero-overlay-managed::before,
body.lp-template8 #home.hero.lp-hero-overlay-managed::before{background:var(--lp-hero-overlay-fill,var(--lp-hero-overlay-rgba,transparent))!important}
@media(max-width:640px){.hero-editor-overlay-control{grid-template-columns:88px 1fr;gap:6px}}

/* Template5 visibility rule — hide only the editable tint layer.
   Keep the original diagonal blue/green field and the other Template5 hero artwork. */
body.lp-template5 #home.hero.lp-hero-overlay-managed::before,
body.lp-template5 .hero.lp-hero-overlay-managed::before{
  background:
    var(--lp-hero-overlay-fill,linear-gradient(transparent,transparent)),
    linear-gradient(165deg,transparent 0 60%,rgba(15,93,255,.70) 60% 76%,rgba(115,255,56,.73) 76% 100%)!important;
}

/* Overlay intensity direction: left fade, right fade, or uniform. */
.hero-editor-overlay-mode{padding:8px 0 4px;border-top:1px solid #eef2f7}
.hero-editor-overlay-mode-title{display:block;margin-bottom:6px;font-size:11px!important;font-weight:800!important;color:#334155!important}
.hero-editor-overlay-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hero-editor-overlay-modes button{height:28px!important;padding:0 5px!important;border:1px solid #dbe2ea!important;border-radius:7px!important;background:#fff!important;color:#334155!important;font-size:9.5px!important;font-weight:800!important;cursor:pointer!important;white-space:nowrap!important}
.hero-editor-overlay-modes button.is-active{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}
/* Custom Header box must shrink to its content so it can be dragged on both axes. */
body.hero-content-editing #home.hero .hero-content{min-height:0!important;height:auto!important;user-select:none!important;-webkit-user-select:none!important}


/* Tight auto-size Hero text container.
   The box follows the longest visible text line; explicit line breaks are preserved. */
#home.hero .hero-content.lp-hero-content-managed{
  padding:0!important;margin:0!important;min-width:0!important;min-height:0!important;height:auto!important;
  width:max-content!important;box-sizing:border-box!important;overflow:visible!important
}
#home.hero .hero-content.lp-hero-content-managed :is(#heroKickerText,#heroTitleText,#heroDescriptionText){
  margin:0!important;padding-left:0!important;padding-right:0!important;max-width:100%!important;
  white-space:pre-line!important;overflow-wrap:break-word!important;word-break:normal!important
}
body.hero-content-editing #home.hero .hero-content.lp-hero-content-managed{padding:0!important}

#heroContentEditorSave.is-saving::before{content:"";display:inline-block!important;width:13px!important;height:13px!important;margin-right:7px!important;border:2px solid currentColor!important;border-right-color:transparent!important;border-radius:50%!important;vertical-align:-2px!important;animation:lp360-save-spin .7s linear infinite!important}
@keyframes lp360-save-spin{to{transform:rotate(360deg)}}