/* =============================================================================
   itw-configurator – unified UI styles (WordPress 6.9 compatible)
   ========================================================================== */

/* ---------- UI base font (decoupled from body text) ---------- */
:root{
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Brand + tokens (safe defaults) ---------- */
:root{
  --brand:#EB6C0C;
  --brand-contrast:#ffffff;
  --secondary:#3A3B3B;
  --heading:#EB6C0C;
  --border:#7A7A7A;
  --bg:#ffffff;
}

/* Elementor globals bound to tokens */
body[class*="elementor-kit-"],
:root, html[class*="theme-"]{
  --e-global-color-primary:   var(--brand)     !important;
  --e-global-color-secondary: var(--secondary) !important;
  --e-global-color-text:      var(--border)    !important;
  --e-global-color-accent:    var(--heading)   !important;
  --e-global-color-5c12e54:   var(--brand)     !important;
}

/* Gentle defaults */
body{ color:var(--secondary); background:var(--bg); }
h1,h2,h3,h4,h5,h6{ color:var(--heading); }
.elementor-button{ background:var(--brand); color:var(--brand-contrast); border-color:var(--brand); }
.elementor-button:hover{ filter:brightness(.95); }
:is(svg,.e-font-icon-svg,.elementor-icon i,.elementor-icon svg){ color:var(--brand); fill:currentColor; stroke:currentColor; }
:is(.elementor-widget,.elementor-container,.e-con,.elementor-divider-separator){ border-color:var(--border); }
[style*="#EB6C0C"]{ color:var(--brand) !important; border-color:var(--brand) !important; background-color:var(--brand) !important; }

/* ---------- Font bindings ---------- */
:root{
  --font-heading:"Montserrat";
  --font-h2:"Montserrat";
  --font-subheading:"Montserrat";
  --font-body:"Roboto";
  --font-button:"Roboto";
}
h1, .elementor-widget-heading h1.elementor-heading-title{ font-family: var(--font-heading,"Montserrat"), sans-serif !important; }
h2, .elementor-widget-heading h2.elementor-heading-title{ font-family: var(--font-h2,"Montserrat"), sans-serif !important; }
h3,h4,h5,h6,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title{
  font-family: var(--font-subheading,"Montserrat"), sans-serif !important;
}
body, p, li, dd, dt,
.elementor-widget-text-editor,
.elementor-icon-list-item,
.elementor-tab-content,
.elementor-accordion .elementor-tab-content{
  font-family: var(--font-body,"Roboto"), system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
.elementor-button,
.elementor-button .elementor-button-text,
button[type="submit"],
input[type="submit"]{
  font-family: var(--font-button,"Roboto"), system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}

/* ---------- Design Master ---------- */
#design-master{
  position:fixed; left:12px; bottom:12px;
  z-index:2147483647;
}
#design-master .switch-toggle{
  padding:.45rem .95rem; border-radius:9999px;
  background:#fff; color:var(--brand);
  border:1px solid var(--brand);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff;
  cursor:pointer; transition:background .2s, color .2s, box-shadow .2s;
  font-family: var(--font-ui) !important;
}
#design-master .switch-toggle:hover{ background:var(--brand); color:#fff; }
#design-master .panel{
  position:absolute; bottom:calc(100% + 10px); left:0;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15), 0 0 0 6px #fff;
  inline-size:clamp(260px, 92vw, 360px);
  padding:.75rem .9rem .6rem;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transition:.18s; pointer-events:none;
}
#design-master.open .panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
#design-master .actions{ display:flex; flex-direction:column; gap:.5rem; }
#design-master .action-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:9999px; border:1px solid var(--brand);
  background:#fff; color:var(--brand); font:600 13px/1 var(--font-ui); cursor:pointer;
  font-family: var(--font-ui) !important;
}
#design-master .action-btn:hover{ background:var(--brand); color:#fff; }
#design-master .panel-footer{
  display:flex; align-items:center; justify-content:flex-end;
  margin-top:.65rem; padding-top:.55rem; border-top:1px solid #eef2f7;
}
#design-master .close{
  position:relative; display:grid; place-items:center;
  width:30px; height:30px; border-radius:9999px; background:var(--brand); border:0; cursor:pointer;
}
#design-master .close::before,#design-master .close::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:3px; background:#fff; border-radius:3px;
  transform-origin:center;
}
#design-master .close::before{ transform:translate(-50%,-50%) rotate(45deg); }
#design-master .close::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* Panels visibility guard */
#color-switcher .panel, #font-switcher .panel{ display:none; }
#color-switcher.open .panel, #font-switcher.open .panel{ display:block; }

/* HIDE standalone toggles (so kein extra Button links unten) */
#color-switcher .switch-toggle,
#font-switcher  .switch-toggle{ display:none !important; }

/* ---------- Color Switcher UI ---------- */
#color-switcher{ position:fixed; left:12px; bottom:80px; z-index:2147483647; }
#color-switcher .panel{
  position:absolute; bottom:calc(100% + 10px); left:0;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15), 0 0 0 6px #fff;
  inline-size:clamp(320px,92vw,640px); max-width:92vw;
  padding:.75rem .9rem .6rem;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transition:.18s; pointer-events:none;
}
#color-switcher.open .panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
#color-switcher .row{
  display:grid; align-items:center;
  grid-template-columns:120px 1fr 150px;
  column-gap:12px; row-gap:8px;
  padding:.45rem 0; border-top:1px solid #eef2f7;
}
#color-switcher .row:first-child{ border-top:0; }
#color-switcher .label{ font:600 13px/1.25 var(--font-ui); color:#111; white-space:nowrap; }
#color-switcher .row-mid{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; min-width:0; }
#color-switcher .chips{ display:flex; gap:8px; flex-wrap:wrap; }
#color-switcher .chip{
  width:24px; height:24px; border-radius:6px; cursor:pointer;
  border:1px solid rgba(0,0,0,.25); box-shadow:0 0 0 2px #fff; background:#fff;
}
#color-switcher .picker-wrap{
  position:relative; flex:0 0 auto;
  width:44px; height:28px; border:1px solid #e5e7eb; border-radius:6px; background:#fff;
}
#color-switcher .picker-wrap .picker-viz{
  position:absolute; inset:0; pointer-events:none; border-radius:6px;
  background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow: inset 0 0 0 2px #fff;
}
#color-switcher .picker-wrap .picker{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; padding:0; margin:0; -webkit-appearance:none; appearance:none;
}
#color-switcher .row-right{ display:flex; align-items:center; justify-content:flex-end; gap:.5rem; }
#color-switcher .hex{
  width:100px; padding:.28rem .45rem; border:1px solid #e5e7eb; border-radius:6px; font:12px var(--font-ui);
}
#color-switcher .ok{
  padding:.32rem .6rem; border-radius:6px; border:1px solid var(--brand);
  background:#fff; color:var(--brand); font:600 12px var(--font-ui); cursor:pointer;
}
#color-switcher .ok:hover{ background:#fff; color:var(--brand); }
#color-switcher .panel-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.65rem; padding-top:.55rem; border-top:1px solid #eef2f7;
}
#color-switcher .panel-footer .close{
  position:relative; display:grid; place-items:center;
  width:30px; height:30px; border-radius:9999px; background:var(--brand); border:0; cursor:pointer;
}
#color-switcher .panel-footer .close::before,
#color-switcher .panel-footer .close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:3px; background:#fff; border-radius:3px; transform-origin:center;
}
#color-switcher .panel-footer .close::before{ transform:translate(-50%,-50%) rotate(45deg); }
#color-switcher .panel-footer .close::after { transform:translate(-50%,-50%) rotate(-45deg); }
@media (max-width:1023.98px){
  #color-switcher .panel{ inline-size:clamp(300px,92vw,520px); }
  #color-switcher .row{ grid-template-columns:1fr; row-gap:.6rem; }
  #color-switcher .row-mid{ flex-wrap:wrap; }
  #color-switcher .picker-wrap{ width:40px; height:28px; }
}

/* ---------- Dock (centered proxy) ---------- */
#bottom-dock{
  position:fixed; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:18px;
  z-index:2147483646;
}
#bottom-dock .switch-toggle{
  padding:.85rem 1.35rem; border-radius:9999px;
  background:#fff; color:var(--brand);
  border:1.5px solid var(--brand);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff;
  cursor:pointer; transition:background .2s,color .2s;
  font:700 15px/1.15 var(--font-ui) !important;
}
#bottom-dock .switch-toggle:hover{ background:var(--brand); color:#fff; }
@media (max-width:1024px){ #bottom-dock .btn-view{ display:none !important; } }
#design-master .switch-toggle, #view-toggle .switch-toggle{
  visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
  position:fixed !important; left:-9999px !important; top:auto !important;
}

/* ---------- Reset button + modal ---------- */
#bottom-dock .btn-reset{
  width:44px; height:44px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--brand);
  border:1.5px solid var(--brand);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff;
  line-height:0; padding:0; background-clip:padding-box; cursor:pointer; transition:background .2s,color .2s;
}
#bottom-dock .btn-reset:hover{ background:var(--brand); color:#fff !important; }
#bottom-dock .btn-reset svg{ width:24px; height:24px; display:block; overflow:visible; transform:translateY(.5px); }
#bottom-dock .btn-reset svg, #bottom-dock .btn-reset svg *{
  fill:none !important; stroke:currentColor !important; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; pointer-events:none !important;
}
#bottom-dock .btn-reset:hover svg, #bottom-dock .btn-reset:hover svg *{ stroke:#fff !important; }
#reset-modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.45); z-index:2147483647;
}
#reset-modal.open{ display:grid; }
#reset-modal .reset-card{
  background:#fff; color:#111; border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  width:min(92vw,420px); padding:16px 18px 14px; text-align:center;
}
#reset-modal .title{ font:700 16px/1.2 var(--font-ui); margin-bottom:8px; }
#reset-modal p{ margin:0 0 16px; font:500 14px/1.4 var(--font-ui); color:#333; }
#reset-modal .actions{ display:flex; gap:10px; justify-content:center; }
#reset-modal .btn{ padding:.6rem 1rem; border-radius:9999px; cursor:pointer; border:1px solid transparent; font:700 14px/1 var(--font-ui); }
#reset-modal .btn-cancel{ background:#f3f4f6; border-color:#e5e7eb; color:#111; }
#reset-modal .btn-yes   { background:var(--brand); border-color:var(--brand); color:#fff; }
#reset-modal .btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- Variant groups + switcher ---------- */
.variant-group{ position:relative !important; overflow:visible !important; }
.variant-group > :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"]){
  position:absolute !important; left:12px !important; right:auto !important;
  top:var(--vs-top,16px) !important; z-index:50 !important; transform:none !important;
  inset-inline-end:auto !important;
}
#bottom-dock .switch-toggle,
.variant-group :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"])
  :is(.toggle,.switch-toggle,.vs-toggle){
  padding:.85rem 1.35rem; border-radius:9999px; background:#fff; color:var(--brand);
  border:1.5px solid var(--brand);
  font:700 15px/1.15 var(--font-ui) !important; cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff, 0 0 0 2px var(--brand), 0 0 36px rgba(235,108,12,.45);
}
@supports (color: color-mix(in srgb, red, blue)){
  #bottom-dock .switch-toggle,
  .variant-group :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"])
    :is(.toggle,.switch-toggle,.vs-toggle){
    box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff, 0 0 0 2px var(--brand),
               0 0 42px color-mix(in srgb, var(--brand) 55%, transparent);
  }
}
#bottom-dock .switch-toggle:hover,
.variant-group :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"])
  :is(.toggle,.switch-toggle,.vs-toggle):hover{
  background:var(--brand); color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.16), 0 0 0 6px #fff, 0 0 0 2px var(--brand), 0 0 48px rgba(235,108,12,.55);
}
.variant-group.component-kopfzeile{ --vs-top:30px; }
.variant-group.component-begrüßungsbereich{ --vs-top:16px; }
.variant-group.component-serviceübersicht{ --vs-top:30px; }
.variant-group.component-about{ --vs-top:30px; }
.variant-group.component-ctabanner{ --vs-top:16px; }
.variant-group.component-footer{ --vs-top:16px; }
.variant-group :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"]){ position:absolute !important; }
@media (max-width:480px){
  .variant-group :is(.variant-switcher,.variant-switcher-wrap,[class*="variant-switcher"])
    :is(.toggle,.switch-toggle,.vs-toggle){ padding:.75rem 1.05rem; font-size:14px !important; }
}

/* Switcher internals */
.variant-switcher{
  position:absolute; top:.5rem; left:.5rem; right:auto;
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:.4rem; z-index:9999;
}
.variant-switcher .switch-toggle{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .9rem; border-radius:9999px; cursor:pointer;
  font:600 13px/1 var(--font-ui); background:#fff; border:1px solid var(--brand); color:var(--brand);
}
.variant-switcher .switch-toggle:hover{ background:var(--brand); color:#fff; }
.variant-switcher .switch-panel{
  all:unset; position:absolute; top:calc(100% + 10px); left:0; right:auto;
  display:flex; flex-wrap:nowrap; align-items:center; gap:.45rem;
  padding:.6rem .7rem; min-width:max-content; white-space:nowrap;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-4px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.variant-switcher.open .switch-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.variant-switcher .vs-btn{
  all:unset; display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:9999px; cursor:pointer;
  font:600 13px/1 var(--font-ui); background:#fff;
  border:1px solid var(--brand); color:var(--brand);
}
.variant-switcher .vs-btn.is-active,
.variant-switcher .vs-btn:hover{ background:var(--brand); color:#fff; }
.variant-switcher .switch-close{
  all:unset; position:relative; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9999px; background:var(--brand); cursor:pointer;
}
.variant-switcher .switch-close::before,
.variant-switcher .switch-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:16px; height:3px; border-radius:3px; background:#fff; transform-origin:center;
}
.variant-switcher .switch-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.variant-switcher .switch-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.variant-switcher .switch-close{ font-size:0 !important; color:transparent !important; }
.variant-switcher .switch-close > *{ display:none !important; }

/* Sticky header pin */
:root{ --admin-offset:0px; }
body.admin-bar{ --admin-offset:32px; }
@media (max-width:782px){ body.admin-bar{ --admin-offset:56px; } }
.variant-group.component-kopfzeile > .variant-switcher{
  position:fixed !important;
  top:calc(var(--admin-offset) + 10px) !important;
  left:10px !important; right:auto !important; z-index:99999 !important;
}

/* ---------- Variant visibility ---------- */
.variant-group > .variant{ position:relative; transition:opacity .18s ease; }
.variant.v1{ display:block; }
.variant.is-active{ visibility:visible; opacity:1; pointer-events:auto; position:relative; z-index:1; }
.variant-group > .variant:not(.is-active){
  position:absolute; inset:0; visibility:hidden; opacity:0; pointer-events:none; z-index:0;
}

/* ---------- Elementor sticky guard ---------- */
.variant:not(.is-active) .elementor-sticky--active,
.variant:not(.is-active) .elementor-sticky--effects{
  border-radius:0 !important; box-shadow:none !important; transform:none !important; filter:none !important;
}
.variant:not(.is-active) .elementor-sticky__spacer{ display:none !important; }

/* ---------- Submit Overlay: close button ---------- */
#cfg-submit-overlay .cfg-close{
  position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:9999px;
  background:var(--e-global-color-5c12e54, var(--brand));
  display:grid; place-items:center; cursor:pointer; border:0; box-shadow:0 6px 18px rgba(0,0,0,.15);
}
#cfg-submit-overlay .cfg-close::before, #cfg-submit-overlay .cfg-close::after{
  content:""; width:18px; height:3px; border-radius:3px; background:#fff;
  position:absolute; left:50%; top:50%; transform-origin:center;
}
#cfg-submit-overlay .cfg-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
#cfg-submit-overlay .cfg-close::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------- Preview trigger ---------- */
#view-toggle{
  position:fixed; left:50%; bottom:12px; transform:translateX(-50%);
  z-index:2147483647; display:block;
}
#view-toggle .switch-toggle{
  padding:.85rem 1.35rem; border-radius:9999px;
  background:#fff; color:var(--brand); border:1.5px solid var(--brand);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 6px #fff;
  cursor:pointer; transition:background .2s,color .2s;
  font:600 15px/1.15 var(--font-ui)!important;
}
#view-toggle .switch-toggle:hover{ background:var(--brand); color:#fff; }

/* ---------- Preview overlay ---------- */
#viewport-preview{ position:fixed; inset:0; z-index:2147483647; display:none; pointer-events:none; }
#viewport-preview.is-open{ display:block; }
#vp-stack{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:30px; pointer-events:auto; }
#vp-toolbar{
  display:flex; gap:12px; align-items:center; background:#fff;
  border:1.5px solid rgba(0,0,0,.08); border-radius:9999px;
  box-shadow:0 10px 24px rgba(0,0,0,.15); padding:10px; z-index:3;
}
#vp-toolbar .btn{
  padding:.75rem 1.05rem; border-radius:9999px; border:1.5px solid var(--brand);
  background:#fff; color:var(--brand); font:600 14px/1.1 var(--font-ui); cursor:pointer;
}
#vp-toolbar .btn.is-active, #vp-toolbar .btn:hover{ background:var(--brand); color:#fff; }
#vp-toolbar .btn-close{
  position:relative; width:38px; height:38px; border-radius:9999px; border:0;
  background:var(--brand); color:#fff; cursor:pointer;
}
#vp-toolbar .btn-close::before,#vp-toolbar .btn-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:3px; background:#fff; border-radius:3px; transform-origin:center;
}
#vp-toolbar .btn-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
#vp-toolbar .btn-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
#vp-device-wrap{ position:relative; width:320px; height:640px; }
#vp-device{
  position:absolute; left:0; top:0; width:390px; height:844px;
  transform-origin:top left; background:#111; border-radius:18px; padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 6px #fff; z-index:1;
}
#vp-frame{ display:block; width:100%; height:100%; border:0; background:#fff; border-radius:12px; overflow:auto; }
#vp-drag{
  position:absolute; left:50%; top:-18px; transform:translateX(-50%);
  width:120px; height:14px; border-radius:9999px; background:#d1d5db !important;
  box-shadow:0 0 0 6px #fff; cursor:grab; user-select:none; z-index:2;
}
#vp-zoom{
  position:absolute; right:10px; bottom:10px; width:36px; height:36px;
  border-radius:9999px; background:var(--brand);
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:3;
}
#vp-zoom::before, #vp-zoom::after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:3px; background:#fff; border-radius:3px; transform:translate(-50%,-50%);
}
#vp-zoom.is-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
#vp-zoom.is-minus::after{ display:none; }

/* ---------- Preview (iframe embed guard) ---------- */
html.cfg-preview-embed #design-master,
html.cfg-preview-embed #view-toggle,
html.cfg-preview-embed #color-switcher,
html.cfg-preview-embed #font-switcher,
html.cfg-preview-embed .variant-switcher,
html.cfg-preview-embed .variant-switcher-wrap,
html.cfg-preview-embed .variant-group .variant-switcher{
  display:none !important;
}