:root{--sq-header-offset:110px;}

/* Dales Curtains & Blinds — Calculator CSS */

#calc{
  --bg: rgba(255,255,255,.92);
  --bd: rgba(0,0,0,.12);
  --tx: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.65);
  --rad: 18px;
  --sh: 0 10px 30px rgba(0,0,0,.06);

  /* Graphics colours */
  --win: #2b6cb0;   /* window opening */
  --pole: #2f855a;  /* pole */
  --blind: #c53030; /* blind */
  --dim: rgba(0,0,0,.55);

  color: var(--tx);
  padding-top: var(--sq-header-offset, 90px); /* avoid sticky header overlap */
}

#calc .wrap{max-width:1100px;margin:18px auto 0;padding:0 16px 24px;}
#calc .header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
#calc .title{font-size:28px;font-weight:700;margin:0;}
#calc .sub{margin:6px 0 0;opacity:.75;}

#calc .tabs{display:flex;gap:8px;margin-top:14px;}
#calc .tab{border:1px solid rgba(0,0,0,.15);padding:10px 12px;border-radius:10px;cursor:pointer;user-select:none;}
#calc .tab.active{border-color:rgba(0,0,0,.45);font-weight:700;}

#calc .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px;}
@media (max-width:900px){#calc .grid{grid-template-columns:1fr;}}

#calc .card{
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--rad);
  box-shadow:var(--sh);
  padding:14px;
}

#calc .seg{display:flex;gap:8px;flex-wrap:wrap;}
#calc .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

#calc .btn{
  border:1px solid rgba(0,0,0,.22);
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
  cursor:pointer;
  font:inherit;
  user-select:none;
  display:inline-block;
}
#calc .btn.on{border-color:rgba(0,0,0,.45);font-weight:700;background:rgba(0,0,0,.04);}

#calc .row{display:grid;grid-template-columns:1fr;gap:10px;} /* one box per line */

#calc label{display:block;font-size:12px;opacity:.8;margin-bottom:6px;}
#calc input,#calc select{
  width:100%;
  padding:10px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  font:inherit;
}

#calc .muted{opacity:.75;font-size:12px;}
#calc .hr{height:1px;background:rgba(0,0,0,.08);margin:12px 0;}
#calc .kpi{font-size:22px;font-weight:800;margin:4px 0 0;}

#calc .line{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.08);}
#calc .line:last-child{border-bottom:none;}

#calc .warn{border:1px solid rgba(0,0,0,.15);background:rgba(255,245,200,.6);padding:10px 12px;border-radius:12px;font-size:13px;}
#calc .ok{border:1px solid rgba(0,0,0,.12);background:rgba(220,255,230,.5);padding:10px 12px;border-radius:12px;font-size:13px;}

/* Graphics */
#calc .diagram{border:1px dashed rgba(0,0,0,.18);border-radius:14px;padding:10px;background:rgba(0,0,0,.02);margin:10px 0 10px;}
#calc .diagram svg{width:100%;height:240px;color:var(--dim);}

#calc .diagram-wrap{display:grid;grid-template-columns:1fr 190px;gap:12px;align-items:start;}
@media (max-width:720px){#calc .diagram-wrap{grid-template-columns:1fr;}}

#calc .key{border:1px solid rgba(0,0,0,.15);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.75);font-size:12px;}
#calc .key h4{margin:0 0 8px;font-size:12px;letter-spacing:.02em;opacity:.85;}
#calc .key-item{display:flex;gap:8px;align-items:center;margin:6px 0;}
#calc .swatch{width:14px;height:10px;border-radius:3px;flex:0 0 auto;}
#calc .swatch.win{background:var(--win);}
#calc .swatch.pole{background:var(--pole);}
#calc .swatch.blind{background:var(--blind);}

#calc .infobox{border:1px solid rgba(0,0,0,.15);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.75);margin:0 0 14px;font-size:12px;}

/* ---- Overrides for Dales calculator (key on top, avoid header overlap) ---- */
#calc{
  padding-top: 20px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

#calc .tabs{
  margin-top: 14px;
  position: relative;
  z-index: 5;
}

#calc .tab{
  display: inline-block;
  position: relative;
  z-index: 6;
}

/* Put the Key above the diagram (full width).
   Works for BOTH diagrams:
   - Curtains: .diagram-wrap children = [wrapper div, .key]
   - Roman:    .diagram-wrap children = [.diagram, .key]
*/
#calc .diagram-wrap{
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "key"
    "main";
  gap: 12px;
}
#calc .diagram-wrap > .key{ grid-area: key; width: 100%; }
#calc .diagram-wrap > :not(.key){ grid-area: main; }

/* Give the diagram more vertical room */
#calc .diagram svg{ height: 300px; }
/* Desktop sticky-header offset (prevents tabs hiding under Squarespace 
header) */
@media (min-width: 768px){
  #calc { padding-top: 140px !important; }
}
@media (max-width: 767px){
  #calc { padding-top: 0 !important; }
}


/* ADMIN EXTRAS CLICK FIX v2 */
[data-adminadds="1"] { position: relative; }

[data-adminadds="1"] input,
[data-adminadds="1"] textarea,
[data-adminadds="1"] select {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* This button is overlaying the extras inputs — force it to be normal flow */
[data-adminadds="1"] button[data-act="admin_extra_add"]{
  position: static !important;
  width: auto !important;
  display: inline-block !important;
  z-index: 1 !important;
}

/* Avoid any parent styles turning buttons into overlay blocks */
[data-adminadds="1"] .btn{
  position: relative;
}