/* =====================================================================
   AC Direct cost calculator — front end
   Colours/fonts arrive as --acd-* variables from Settings → Styling.
   ===================================================================== */
.acd-calc{
  --acd-accent:#1786c9; --acd-dark:#0f2436; --acd-heading:#0f2436; --acd-text:#1b3a55;
  --acd-muted:#5b6f7e; --acd-highlight:#6fcbe0; --acd-bg:#eef4f8; --acd-surface:#fff;
  --acd-line:#dbe6ee; --acd-err:#c0392b; --acd-ok:#1f9d55; --acd-radius:14px;
  --acd-font-heading:inherit; --acd-font-body:inherit;
  --acd-accent-dk:color-mix(in srgb, var(--acd-accent) 78%, #000);
  --acd-accent-soft:color-mix(in srgb, var(--acd-accent) 10%, transparent);
  --acd-shadow:0 18px 44px -24px color-mix(in srgb, var(--acd-dark) 55%, transparent);
  --acd-shadow-sm:0 10px 22px -14px color-mix(in srgb, var(--acd-accent) 75%, transparent);
  container-type:inline-size; container-name:acd;
  font-family:var(--acd-font-body); color:var(--acd-text); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.acd-calc *,.acd-calc *::before,.acd-calc *::after{box-sizing:border-box;}
.acd-calc img{max-width:100%;}
.acd-calc .acd-hidden{display:none !important;}
.acd-calc .acd-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- layout ---------- */
.acd-calc .acd-wrap{display:grid;gap:22px;align-items:start;}
.acd-calc .acd-col{display:grid;gap:22px;min-width:0;}
@container acd (min-width: 880px){
  .acd-layout-columns .acd-wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);}
}

/* ---------- panels ---------- */
.acd-calc .acd-shell{
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acd-highlight) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--acd-bg) 45%, #fff) 0%, var(--acd-bg) 100%);
  border:1px solid var(--acd-line); border-radius:calc(var(--acd-radius) + 6px);
  padding:clamp(18px,4cqi,38px); box-shadow:var(--acd-shadow);
}
.acd-calc.acd-no-panels .acd-shell{background:none;border:0;box-shadow:none;padding:0;}
.acd-calc.acd-no-panels .acd-shell-result{padding:0;}

/* ---------- header ---------- */
.acd-calc .acd-head{max-width:640px;margin-bottom:clamp(18px,3cqi,28px);}
.acd-calc .acd-eyebrow{
  font-family:var(--acd-font-heading);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  font-size:.78rem;color:var(--acd-accent);display:inline-flex;align-items:center;gap:.5em;
}
.acd-calc .acd-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;}
.acd-calc .acd-title{
  font-family:var(--acd-font-heading);font-weight:700;color:var(--acd-heading);
  font-size:clamp(1.65rem,4.4cqi,2.45rem);line-height:1.05;letter-spacing:-.01em;margin:.35em 0 .3em;
}
.acd-calc .acd-lede{color:var(--acd-muted);font-size:1.02rem;margin:0;}

/* ---------- steps ---------- */
.acd-calc .acd-step{
  display:flex;gap:16px;background:var(--acd-surface);border:1px solid var(--acd-line);
  border-radius:var(--acd-radius);padding:clamp(16px,2.6cqi,24px);margin-bottom:16px;
}
.acd-calc .acd-step-no{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--acd-font-heading);font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(150deg,var(--acd-accent),var(--acd-accent-dk));box-shadow:var(--acd-shadow-sm);
}
.acd-calc .acd-step-body{flex:1 1 auto;min-width:0;}
.acd-calc .acd-step-title{
  font-family:var(--acd-font-heading);font-weight:600;font-size:1.28rem;color:var(--acd-heading);
  margin:.15em 0 .85em;line-height:1.2;
}
@container acd (max-width: 420px){
  .acd-calc .acd-step{flex-direction:column;gap:10px;}
}

/* ---------- fields ---------- */
.acd-calc .acd-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
@container acd (max-width: 520px){ .acd-calc .acd-grid-2{grid-template-columns:1fr;} }
.acd-calc .acd-field{display:block;margin:0;}
.acd-calc .acd-follow{margin-top:14px;}
.acd-calc .acd-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px;color:var(--acd-text);}
.acd-calc .acd-unit-hint{color:var(--acd-muted);font-weight:500;}
.acd-calc .acd-help{color:var(--acd-muted);font-size:.82rem;margin:8px 0 12px;line-height:1.45;}
.acd-calc .acd-control{
  width:100%;font:inherit;font-size:.98rem;color:var(--acd-heading);background:var(--acd-surface);
  border:1.5px solid var(--acd-line);border-radius:10px;padding:11px 13px;min-height:46px;margin:0;
  box-shadow:none;transition:border-color .15s, box-shadow .15s;
}
.acd-calc select.acd-control{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background-repeat:no-repeat;background-position:right 13px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6f7e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.acd-calc .acd-control:focus{outline:none;border-color:var(--acd-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--acd-accent) 18%, transparent);}
.acd-calc .acd-control.acd-invalid{border-color:var(--acd-err);}

.acd-calc .acd-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--acd-text);margin:0;}
.acd-calc .acd-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--acd-accent);cursor:pointer;}

/* ---------- unit cards ---------- */
.acd-calc .acd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
@container acd (max-width: 380px){ .acd-calc .acd-cards{grid-template-columns:1fr 1fr;gap:10px;} }
.acd-calc .acd-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;margin:0;
  background:var(--acd-surface);border:1.5px solid var(--acd-line);border-radius:calc(var(--acd-radius) - 2px);
  overflow:hidden;transition:border-color .15s, box-shadow .15s, transform .15s;
}
.acd-calc .acd-card:hover{border-color:color-mix(in srgb, var(--acd-accent) 45%, var(--acd-line));transform:translateY(-1px);}
.acd-calc .acd-card-media{
  aspect-ratio:4/3;display:grid;place-items:center;background:color-mix(in srgb, var(--acd-bg) 70%, #fff);
  color:color-mix(in srgb, var(--acd-muted) 55%, transparent);overflow:hidden;
}
.acd-calc .acd-card-media img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .3s;}
.acd-calc .acd-card:hover .acd-card-media img{transform:scale(1.04);}
.acd-calc .acd-ph{width:62%;height:auto;}
.acd-calc .acd-card-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;}
.acd-calc .acd-card-name{font-family:var(--acd-font-heading);font-weight:700;font-size:1.02rem;color:var(--acd-heading);line-height:1.2;}
.acd-calc .acd-card-meta{font-size:.78rem;color:var(--acd-muted);line-height:1.35;}
.acd-calc .acd-card-from{font-size:.8rem;font-weight:600;color:var(--acd-accent);margin-top:3px;}
.acd-calc .acd-card-badge{
  align-self:flex-start;margin-top:6px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--acd-accent-dk);background:var(--acd-accent-soft);border-radius:999px;padding:3px 8px;
}
.acd-calc .acd-card-tick{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--acd-accent);opacity:0;transform:scale(.6);transition:opacity .15s, transform .15s;
}
.acd-calc .acd-card:has(input:checked){border-color:var(--acd-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--acd-accent) 16%, transparent);}
.acd-calc .acd-card:has(input:checked) .acd-card-tick{opacity:1;transform:none;}
.acd-calc .acd-card:has(input:focus-visible){outline:3px solid color-mix(in srgb, var(--acd-accent) 55%, transparent);outline-offset:2px;}
/* fallback for browsers without :has() */
.acd-calc .acd-card.is-selected{border-color:var(--acd-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--acd-accent) 16%, transparent);}
.acd-calc .acd-card.is-selected .acd-card-tick{opacity:1;transform:none;}

/* ---------- selected unit detail ---------- */
.acd-calc .acd-detail{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:14px;padding:14px;
  border-radius:calc(var(--acd-radius) - 2px);background:var(--acd-accent-soft);
  border:1px solid color-mix(in srgb, var(--acd-accent) 22%, transparent);
  animation:acdIn .25s ease;
}
@container acd (max-width: 520px){ .acd-calc .acd-detail{grid-template-columns:1fr;} }
.acd-select-dropdown .acd-detail{margin-top:16px;}
@keyframes acdIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.acd-calc .acd-detail-main{
  aspect-ratio:4/3;border-radius:10px;background:var(--acd-surface);display:grid;place-items:center;overflow:hidden;
  color:color-mix(in srgb, var(--acd-muted) 55%, transparent);
}
.acd-calc .acd-detail-main img{width:100%;height:100%;object-fit:contain;padding:8px;}
.acd-calc .acd-detail-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.acd-calc .acd-detail-thumbs button{
  width:48px;height:48px;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--acd-surface);
  border:1.5px solid var(--acd-line);
}
.acd-calc .acd-detail-thumbs button[aria-current="true"]{border-color:var(--acd-accent);}
.acd-calc .acd-detail-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.acd-calc .acd-detail-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.acd-calc .acd-detail-name{font-family:var(--acd-font-heading);font-weight:700;font-size:1.2rem;color:var(--acd-heading);margin:0;line-height:1.2;}
.acd-calc .acd-detail-tag{font-size:.86rem;color:var(--acd-muted);margin:0 0 6px;}
.acd-calc .acd-finishes{margin-top:6px;}
.acd-calc .acd-pills{display:flex;flex-wrap:wrap;gap:8px;}
.acd-calc .acd-pill{
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  color:var(--acd-text);background:var(--acd-surface);border:1.5px solid var(--acd-line);border-radius:999px;padding:6px 12px 6px 8px;
}
.acd-calc .acd-pill[aria-checked="true"]{border-color:var(--acd-accent);color:var(--acd-accent-dk);box-shadow:0 0 0 2px color-mix(in srgb, var(--acd-accent) 14%, transparent);}
.acd-calc .acd-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:var(--sw,#ccc);}

/* ---------- buttons ---------- */
.acd-calc .acd-btn{
  display:block;margin:20px 0 0;width:100%;font:inherit;font-weight:600;font-size:1.02rem;line-height:1.3;color:#fff;cursor:pointer;
  background:linear-gradient(150deg,var(--acd-accent),var(--acd-accent-dk));border:0;border-radius:11px;padding:14px 20px;
  box-shadow:var(--acd-shadow-sm);transition:transform .12s, box-shadow .12s, opacity .12s;text-transform:none;letter-spacing:normal;
}
.acd-calc .acd-btn:hover{transform:translateY(-1px);color:#fff;}
.acd-calc .acd-btn:focus-visible{outline:3px solid color-mix(in srgb, var(--acd-accent) 50%, transparent);outline-offset:2px;}
.acd-calc .acd-btn[disabled]{opacity:.65;cursor:progress;transform:none;}

/* ---------- price readout ---------- */
.acd-calc .acd-readout{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--acd-radius);padding:26px 24px 22px;
  background:linear-gradient(160deg,var(--acd-dark) 0%, color-mix(in srgb, var(--acd-dark) 82%, var(--acd-accent)) 100%);
  box-shadow:var(--acd-shadow);
}
.acd-calc .acd-readout-glow{
  position:absolute;inset:-40% -10% auto -10%;height:70%;pointer-events:none;filter:blur(6px);opacity:.7;
  background:radial-gradient(60% 100% at 30% 0%, color-mix(in srgb, var(--acd-highlight) 55%, transparent), transparent 70%);
  animation:acdDrift 9s ease-in-out infinite alternate;
}
@keyframes acdDrift{from{transform:translateX(-8%);}to{transform:translateX(12%);}}
.acd-calc .acd-readout-label{
  position:relative;font-family:var(--acd-font-heading);text-transform:uppercase;letter-spacing:.13em;
  font-size:.76rem;color:var(--acd-highlight);font-weight:600;
}
.acd-calc .acd-price{position:relative;margin:6px 0 2px;min-height:56px;display:flex;align-items:center;}
.acd-calc .acd-price-empty{font-size:.95rem;color:rgba(255,255,255,.66);line-height:1.4;}
.acd-calc .acd-price-value{font-family:var(--acd-font-heading);font-weight:700;font-size:clamp(2.5rem,8cqi,3.6rem);line-height:1;letter-spacing:-.01em;color:#fff;}
.acd-calc .acd-price-value small{font-size:.42em;font-weight:600;opacity:.75;margin-left:.2em;letter-spacing:0;}
.acd-calc .acd-price-survey{font-family:var(--acd-font-heading);font-weight:700;font-size:1.6rem;line-height:1.15;color:#fff;}
.acd-calc .acd-spec{position:relative;list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:9px;}
.acd-calc .acd-spec li{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;margin:0;}
.acd-calc .acd-spec li span:first-child{color:rgba(255,255,255,.66);}
.acd-calc .acd-spec li span:last-child{font-weight:600;text-align:right;}
.acd-calc .acd-note{
  position:relative;margin:14px 0 0;font-size:.86rem;color:#fff;line-height:1.5;
  background:color-mix(in srgb, var(--acd-highlight) 14%, transparent);border:1px solid color-mix(in srgb, var(--acd-highlight) 38%, transparent);
  border-radius:10px;padding:10px 12px;
}
.acd-calc .acd-note p{margin:0;}
.acd-calc .acd-note p + p{margin-top:6px;}
.acd-calc .acd-disclaimer{position:relative;list-style:none;margin:16px 0 0;padding:0;font-size:.76rem;color:rgba(255,255,255,.6);line-height:1.45;display:grid;gap:3px;}
.acd-calc .acd-disclaimer li{margin:0;padding-left:12px;position:relative;}
.acd-calc .acd-disclaimer li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:currentColor;}
.acd-calc .acd-readout.is-stale .acd-price-empty{color:#fff;}

/* ---------- enquiry ---------- */
.acd-calc .acd-shell-enquire{animation:acdIn .3s ease;}
.acd-calc .acd-enquire-lede{color:var(--acd-muted);font-size:.95rem;margin:-.3em 0 1.1em;}
.acd-calc .acd-form{margin:0;}
.acd-calc .acd-form .acd-field{margin-bottom:14px;}
.acd-calc .acd-form .acd-grid-2 .acd-field{margin-bottom:0;}
.acd-calc .acd-form .acd-grid-2{margin-bottom:14px;}
.acd-calc .acd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.acd-calc .acd-consent{font-size:.76rem;color:var(--acd-muted);margin:10px 0 0;text-align:center;}

/* uploads */
.acd-calc .acd-upload .acd-help{margin-top:0;}
.acd-calc .acd-drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;margin:0;
  padding:18px 14px;border:1.5px dashed color-mix(in srgb, var(--acd-accent) 40%, var(--acd-line));border-radius:12px;
  background:var(--acd-surface);color:var(--acd-accent);transition:background .15s, border-color .15s;
}
.acd-calc .acd-drop:hover,.acd-calc .acd-drop.is-over{background:var(--acd-accent-soft);border-color:var(--acd-accent);}
.acd-calc .acd-drop:has(input:focus-visible){outline:3px solid color-mix(in srgb, var(--acd-accent) 50%, transparent);outline-offset:2px;}
.acd-calc .acd-drop-text{font-size:.92rem;color:var(--acd-text);}
.acd-calc .acd-drop-text strong{color:var(--acd-accent);}
.acd-calc .acd-drop-or{color:var(--acd-muted);}
.acd-calc .acd-drop-limits{font-size:.75rem;color:var(--acd-muted);}
.acd-calc .acd-drop.is-full{opacity:.55;pointer-events:none;}
.acd-calc .acd-thumbs{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;}
.acd-calc .acd-thumbs:empty{display:none;}
.acd-calc .acd-thumbs li{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--acd-bg);margin:0;}
.acd-calc .acd-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.acd-calc .acd-thumbs li.is-busy::after{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) center/22px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%231786c9' stroke-width='3' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}
.acd-calc .acd-thumbs button{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;font-size:16px;line-height:1;color:#fff;background:rgba(15,36,54,.72);
}
.acd-calc .acd-thumbs button:hover{background:var(--acd-err);}

.acd-calc .acd-error{
  color:var(--acd-err);font-size:.88rem;font-weight:500;margin:14px 0 0;
  background:color-mix(in srgb, var(--acd-err) 8%, #fff);border:1px solid color-mix(in srgb, var(--acd-err) 28%, #fff);border-radius:9px;padding:9px 12px;
}

/* success */
.acd-calc .acd-success{text-align:center;padding:10px 0 4px;outline:none;}
.acd-calc .acd-tick{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--acd-ok);box-shadow:0 10px 22px -10px color-mix(in srgb, var(--acd-ok) 80%, transparent);
}
.acd-calc .acd-success h4{font-family:var(--acd-font-heading);font-size:1.4rem;font-weight:700;color:var(--acd-heading);margin:.2em 0 .3em;}
.acd-calc .acd-success p{color:var(--acd-muted);margin:0 auto;max-width:420px;}

@media (prefers-reduced-motion: reduce){
  .acd-calc .acd-readout-glow{animation:none;}
  .acd-calc .acd-btn,.acd-calc .acd-card,.acd-calc .acd-card-media img{transition:none;}
  .acd-calc .acd-detail,.acd-calc .acd-shell-enquire{animation:none;}
}