/* =========================================================
   Inspecto Form — Premium (Clean Final)
   File: assets/css/ic-form.css
========================================================= */

:root{
  /* Neutrals shared tokens se (ic-tokens.css) — hex sirf fallback. */
  --if-bg:     var(--ic-surface,  #fafbfc);
  --if-card:   var(--ic-card,     #ffffff);
  --if-border: var(--ic-hairline, #e8edf1);
  --if-text:   var(--ic-ink,      #0f172a);
  --if-muted:  var(--ic-muted,    #64748b);

  /* BRAND — client ka apna rang (Theme Branding). CTA, section titles aur
     progress bars isi par chalte hain. */
  --if-brand:  var(--inspecto-primary, var(--ic-green-dark, #16a34a));

  /* STATUS — inhein kabhi brand par mat lo: ye pass/weak/fail ka MATLAB hain. */
  --if-green:  var(--ic-pass, #16a34a);
  --if-amber:  var(--ic-weak, #f59e0b);
  --if-red:    var(--ic-fail, #ef4444);
  --if-gray:   var(--ic-na,   #6b7280);

  --if-radius:   var(--ic-radius, 12px);
  --if-shadow:   var(--ic-shadow,    0 8px 30px rgba(15,23,42,.06));
  --if-shadow-2: var(--ic-shadow-lg, 0 10px 40px rgba(2,6,23,.10));

  --if-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* =========================================================
   THEME CONTAINER FIX (ONLY for this form page)
   Fixes: mobile left extra space (theme padding/margins)
========================================================= */
body:has(#ic-form-root) .wp-site-blocks,
body:has(#ic-form-root) .wp-block-post-content,
body:has(#ic-form-root) .entry-content,
body:has(#ic-form-root) .site-main,
body:has(#ic-form-root) main,
body:has(#ic-form-root) article{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* some themes wrap content in inner constrained div */
body:has(#ic-form-root) .wp-site-blocks > *,
body:has(#ic-form-root) .wp-block-post-content > *,
body:has(#ic-form-root) .entry-content > *{
  max-width: 100% !important;
}

/* =========================================================
   WRAP + CONTAINER (FINAL - Desktop wide + Mobile full)
========================================================= */

/* make root truly full width */
.ic-form-root,
#ic-form-root{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--if-font);
  background: var(--if-bg);
}
.ic-form-root *{ box-sizing:border-box; }

/* DESKTOP: wide but not ugly on ultra-wide */
.ic-form{
  width: min(1800px, 96vw) !important;  /* ✅ wide desktop */
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* MOBILE: real full width + equal spacing */
@media (max-width: 768px){
  .ic-form{
    width: 100% !important;            /* ✅ important */
    max-width: none !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   FORM HEAD/FOOT
========================================================= */
.ic-form-head,
.ic-form-foot{
  background:var(--if-card);
  border:1px solid var(--if-border);
  border-radius:var(--if-radius);
  box-shadow:var(--if-shadow);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 14px;
}
.ic-form-foot{ margin:14px 0 0; }

.ic-h1{
  font-size:20px;
  font-weight:1000;
  color:var(--if-text);
  letter-spacing:.2px;
}
.ic-muted{ color:var(--if-muted); font-size:13px; }
.ic-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

/* BUTTON */
.ic-btn{
  border:0;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  font-weight:1000;
  cursor:pointer;
  background:var(--if-brand);
  color:#fff;
  box-shadow:0 12px 28px rgba(22,163,74,.18);
}
.ic-btn:hover{ filter:brightness(.96); transform:translateY(-1px); box-shadow:var(--if-shadow-2); }

/* =========================================================
   CARDS (SECTIONS)
========================================================= */
.ic-card{
  background:var(--if-card);
  border:1px solid var(--if-border);
  border-radius:var(--if-radius);
  box-shadow:var(--if-shadow);
  margin:14px 0;
  overflow:hidden;
}

.ic-card > .ic-title{
  margin:0 !important;
  padding:12px 16px !important;
  background:var(--if-brand) !important;
  color:#fff !important;
  font-size:17px !important;
  font-weight:1000 !important;
  letter-spacing:.2px;
}

/* fields area (12-col grid; default field width=4 => 3 columns) */
.ic-card > .ic-fields{
  padding:14px 16px;
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 1100px){
  .ic-card > .ic-fields{ grid-template-columns:repeat(12, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .ic-card > .ic-fields{ grid-template-columns:1fr; }
}

/* =========================================================
   SECTION PROGRESS (yellow-style percentage bar)
========================================================= */
.ic-sec-progress{
  padding: 0 16px 16px;
}
.ic-sec-progress__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin: 2px 0 8px;
}
.ic-sec-progress__label{
  font-weight:1000;
  font-size:14px;
  color:var(--if-text);
}
.ic-sec-progress__pct{
  font-weight:1000;
  font-size:13px;
  color:var(--if-muted);
}
.ic-sec-progress__track{
  height:10px;
  background:#e9edf5;
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  overflow:hidden;
}
.ic-sec-progress__fill{
  height:100%;
  width:0%;
  background: var(--if-brand);
  border-radius:999px;
  transition: width .25s ease;
}

/* Body map progress in legend */
.ic-bm-progress{ margin-top:8px; }
.ic-bm-progress__top{ display:flex; justify-content:flex-end; margin:0 0 8px; }
.ic-bm-progress__pct{ font-weight:1000; font-size:13px; color:var(--if-muted); }
.ic-bm-progress__track{
  height:10px;
  background:#e9edf5;
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  overflow:hidden;
}
.ic-bm-progress__fill{
  height:100%;
  width:0%;
  background: var(--if-brand);
  border-radius:999px;
  transition: width .25s ease;
}

/* width helpers */
.ic-w-12{ grid-column: span 12; }
.ic-w-6{ grid-column: span 6; }
.ic-w-4{ grid-column: span 4; }
.ic-w-3{ grid-column: span 3; }

@media (max-width: 720px){
  .ic-w-12, .ic-w-6, .ic-w-4, .ic-w-3{ grid-column: span 1; }
}

/* =========================================================
   FIELD
========================================================= */
.ic-field{ min-width:0; }

.ic-field > label{
  display:block;
  font-weight:1000;
  font-size:15px;
  margin:0 0 6px;
  color:var(--if-text);
}
.ic-req{ color:var(--if-red); font-weight:1000; }

/* inputs */
.ic-field input[type="text"],
.ic-field input[type="number"],
.ic-field input[type="email"],
.ic-field input[type="date"],
.ic-field input[type="time"],
.ic-field select,
.ic-field textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--if-border);
  border-radius:12px;
  padding:11px 12px;
  font-size:14px;
  outline:none;
  color:var(--if-text);
  transition:.15s ease;
}

.ic-field textarea{ min-height:90px; resize:vertical; }

.ic-field input:focus,
.ic-field select:focus,
.ic-field textarea:focus{
  border-color:rgba(22,163,74,.45);
  box-shadow:0 0 0 4px rgba(22,163,74,.12);
}

/* =========================================================
   RADIO PILLS
========================================================= */
/* Options layout (radio/checkbox): clean 4 items inline, no overlap */
.ic-options{
  display:grid;
  grid-template-columns: repeat(4, max-content);
  column-gap:16px;
  row-gap:8px;
  align-items:center;
}

@media (max-width: 700px){
  .ic-options{ grid-template-columns: repeat(2, max-content); }
}

/* SIMPLE choice (native inputs visible) */
.ic-choice{
  display:inline-flex;
  /* flex-start, center nahi: label do satar ka ho jaye to radio pehli
     satar ke saath rahe, beech mein taerta hua nahi.                   */
  align-items:flex-start;
  gap:8px;
  font-weight:800;
  font-size:13px;
  color:var(--if-text);
  /* Yahan pehle `white-space:nowrap` tha. Chhoti pills (Pass/Weak/Fail/
     NA) ke liye wo theek tha, magar YEHI class booking form ke package
     chooser par bhi lagti hai — "Luxury Pre-Purchase Inspection —
     AED 499" jaisa label 360px screen par 453px tak nikal jata tha.
     Ab lapetne dete hain; pills ke liye nowrap unke apne scope mein
     neeche wapas laga diya hai.                                        */
  white-space:normal;
  overflow-wrap:break-word;
  min-width:0;
}
.ic-choice input{
  position:static !important;
  opacity:1 !important;
  pointer-events:auto !important;
  margin:0;
}
.ic-choice__label{ line-height:1.35; min-width:0; }

/* Status pills (Pass/Good/Weak/Fail/NA) */
.ic-status{ display:flex; flex-wrap:wrap; gap:10px; }
.ic-status-opt{ position:relative; display:inline-flex; }
.ic-status-opt input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.ic-status-opt span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  transition:.15s ease;
  color:var(--if-text);
  background:#fff;
}
.ic-status-opt input[type="radio"]:checked + span{
  border-color:rgba(15,23,42,.25);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.ic-status-opt.is-pass input:checked + span{ background:rgba(34,197,94,.14); box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.ic-status-opt.is-good input:checked + span{ background:rgba(34,197,94,.14); box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.ic-status-opt.is-weak input:checked + span{ background:rgba(245,158,11,.14); box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.ic-status-opt.is-fail input:checked + span{ background:rgba(239,68,68,.14); box-shadow:0 0 0 4px rgba(239,68,68,.18); }
.ic-status-opt.is-na input:checked + span{ background:rgba(148,163,184,.14); box-shadow:0 0 0 4px rgba(148,163,184,.18); }

.ic-opt{ position:relative; display:inline-flex; }
.ic-opt input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Hide native checkbox (design fix) */
.ic-opt input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ic-opt span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  padding:9px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  font-weight:1000;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  transition:.15s ease;
  color:var(--if-text);
  background:#fff;
}

/* Generic checkbox active state (for non-status checkboxes) */
.ic-opt input[type="checkbox"]:checked + span{
  background:rgba(22,163,74,.12);
  border-color:rgba(22,163,74,.35);
  box-shadow:0 0 0 4px rgba(22,163,74,.10);
}

/* default tinted by value */
.ic-opt input[value="pass"] + span{ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.25); }
.ic-opt input[value="weak"] + span{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.28); }
.ic-opt input[value="fail"] + span{ background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.25); }
.ic-opt input[value="na"]   + span{ background:rgba(100,116,139,.10); border-color:rgba(100,116,139,.25); }

.ic-opt span:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(2,6,23,.10);
}

/* checkbox selected (neutral green highlight) */
.ic-opt input[type="checkbox"]:checked + span{
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.35);
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
 }

/* checked solid */
.ic-opt input[value="pass"]:checked + span{ background:var(--if-green); border-color:var(--if-green); color:#fff; box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.ic-opt input[value="weak"]:checked + span{ background:var(--if-amber); border-color:var(--if-amber); color:#111827; box-shadow:0 0 0 3px rgba(245,158,11,.14); }
.ic-opt input[value="fail"]:checked + span{ background:var(--if-red); border-color:var(--if-red); color:#fff; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.ic-opt input[value="na"]:checked   + span{ background:var(--if-gray); border-color:var(--if-gray); color:#fff; box-shadow:0 0 0 3px rgba(100,116,139,.12); }

/* =========================================================
   FILE UPLOAD + PREVIEW
========================================================= */
.ic-field input[type="file"]{
  width:100%;
  border:1px dashed rgba(15,23,42,.18);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}

.ic-preview{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 820px){
  .ic-preview{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .ic-preview{ grid-template-columns:1fr; }
}

.ic-preview img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}

/* =========================================================
   BODY MAP (60/40) + labels bottom + colored selection dots
========================================================= */
.ic-field:has(.ic-bodymap),
.ic-field:has(.ic-bodymap-grid){
  grid-column: 1 / -1 !important;
}

.ic-bodymap-grid{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.ic-map-col{ flex:0 0 60%; min-width:0; }
.ic-legend-col{ flex:0 0 40%; min-width:260px; }

@media (max-width: 980px){
  .ic-bodymap-grid{ flex-direction:column; }
  .ic-map-col, .ic-legend-col{ flex:1 1 auto; width:100%; min-width:0; }
}

.ic-map-stage{
  position:relative;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:0;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;  /* clip part boxes that go out of bounds */
}

.ic-map-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center;
  border-radius:12px;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.ic-bodymap-canvas{
  position:relative;
  width:100%;
  height:auto;
  min-height:320px;
  border-radius:14px;
  overflow:visible;
  border:1px solid rgba(15,23,42,.10);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-color:#fff;
  background-image:url("../images/bodymap.png");
}

/* DOTTED PART BOX (big rectangle) */
.ic-part-box{
  position:absolute;
  left: calc(var(--x) * 1%);
  top:  calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  transform: translate(-50%, -50%);
  border:2px dashed rgba(55, 163, 255, .9);
  border-radius:10px;
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:8px;
  cursor:pointer;
  z-index: 5;
  pointer-events: auto;
  transition:.15s ease;
}
.ic-part-box:hover{
  background: rgba(55,163,255,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  transform: translate(-50%, -50%) scale(1.01);
}

/* Selected dots inside part (center) */
.ic-part-badges{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:90%;
  pointer-events:none;
  z-index:3;
}

/* Label pinned to bottom */
.ic-part-label{
  font-size:11px;
  line-height:1.15;
  font-weight:700;
  color:#fff;
  background: rgba(0,0,0,.65);
  padding:5px 9px;
  border-radius:8px;
  white-space:nowrap;
  max-width:92%;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:4;
}

/* Legend card */
.ic-legend-card{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.ic-legend-title{
  background:#0a0a0a;
  color:#fff;
  padding:18px 18px;
  font-size:26px;
  font-weight:800;
}

.ic-legend-list{
  padding:14px 18px 18px;
  display:grid;
  gap:10px;
}

.ic-legend-item{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:14px;
  font-weight:600;
  color:#111;
}

/* =========================================================
   DOT COLORS (Legend + Popup + Selected)
========================================================= */
.ic-dot{
  width:26px; height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.ic-part-badges .ic-dot{
  width:22px;
  height:22px;
  font-size:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  border:none;                 /* ✅ white border removed */
}


.ic-dot.s1{ background:#16a34a; }
.ic-dot.s2{ background:#ef4444; }
.ic-dot.s3{ background:#f97316; }
.ic-dot.s4{ background:#b91c1c; }
.ic-dot.s5{ background:#3b82f6; }
.ic-dot.s6{ background:#7c3aed; }
.ic-dot.s7{ background:#eab308; color:#111; }
.ic-dot.s8{ background:#a16207; }
.ic-dot.s9{ background:#111827; }
.ic-dot.s10{ background:#0ea5e9; }
.ic-dot.s11{ background:#6366f1; }
.ic-dot.s12{ background:#facc15; color:#111; }
.ic-dot.s13{ background:#9ca3af; color:#111; }

/* =========================================================
   BODY MAP: Modal
========================================================= */
.ic-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}
.ic-modal.is-open{ display:block; }

.ic-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
}

.ic-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(560px, calc(100% - 24px));
  background:#fff;
  border-radius:16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
}

.ic-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #e2e8f0;
}
.ic-modal__title{ font-size:16px; font-weight:900; color:var(--ic-ink); }
.ic-modal__close{
  width:36px;height:36px;border-radius:10px;
  border:1px solid #e2e8f0;background:#fff;
  font-size:20px;line-height:1;color:var(--ic-ink);
  cursor:pointer;
}

.ic-modal__body{ padding:14px 16px; }
.ic-modal__chips{
  display:grid;
  gap:10px;
  max-height: 320px;
  overflow:auto;
  padding-right: 4px;
}

/* each row in popup */
.ic-modal-item{
  width:100%;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  text-align:left;
}
.ic-modal-item.is-on{
  border-color:#0ea5e9;
  background: rgba(14,165,233,.10);
}
.ic-modal-item__label{
  font-weight:800;
  color:var(--ic-ink);
}

.ic-modal__hint{
  margin-top:12px;
  font-size:12px;
  color:var(--ic-muted);
}

.ic-modal__foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid #e2e8f0;
}

/* basic buttons */
.ic-btn-ghost{
  background:var(--ic-hairline-soft);
  color:var(--ic-ink);
}
.ic-btn-primary{
  background:var(--if-brand);
  color:#052e16;
}

/* =========================================================
   LIVE PREVIEW: Force center even if theme overrides alignwide/full styles
========================================================= */
body.inspecto-live-preview .ic-form-wrap,
body.inspecto-live-preview .ic-form-root,
body.inspecto-live-preview #ic-form-root{
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.inspecto-live-preview .ic-form-wrap{
  padding-left: 16px;
  padding-right: 16px;
}

/* =========================================================
   LIVE PREVIEW (/?inspecto_preview_form=ID) — FORCE CENTER
========================================================= */
body.inspecto-live-preview .ic-form-wrap,
body.inspecto-live-preview .ic-form{
  max-width: 1100px !important;
  width: min(1100px, 96vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.inspecto-live-preview #ic-form-root,
body.inspecto-live-preview .ic-form-root{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   LIVE PREVIEW OVERRIDES
   - Ensure centered layout even when theme uses alignwide/full
========================================================= */
body.inspecto-live-preview .ic-form-wrap{
  max-width: 1100px !important;
  margin: 0 auto !important;
}
body.inspecto-live-preview .ic-form{
  width: min(1100px, 96vw) !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.inspecto-live-preview .ic-form-root,
body.inspecto-live-preview #ic-form-root{
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* =========================================================
   SIMPLE CHECKBOX + RADIO (classic UI like your screenshot)
   ========================================================= */

/* STATUS radios row (Pass / Week / Fail / Not Available) */
.ic-status{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:16px;
}
@media (max-width: 680px){
  .ic-status{ flex-wrap:wrap; }
}

.ic-status-opt{
  display:inline-flex;
  align-items:center;
}

/* show native radio */
.ic-status-opt input[type="radio"]{
  position:static !important;
  opacity:1 !important;
  pointer-events:auto !important;
  margin:0 7px 0 0;
}

/* make label simple text (no pill) */
.ic-status-opt span{
  padding:0 !important;
  min-width:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.1;
}

.ic-status-opt span:hover{ transform:none !important; box-shadow:none !important; }
.ic-status-opt input[type="radio"]:checked + span{
  text-decoration:none;
}

/* subtle color by value on checked */
.ic-status-opt.is-pass input:checked + span,
.ic-status-opt.is-good input:checked + span{ color: var(--if-green); }
.ic-status-opt.is-weak input:checked + span{ color: var(--if-amber); }
.ic-status-opt.is-fail input:checked + span{ color: var(--if-red); }
.ic-status-opt.is-na input:checked + span{ color: var(--ic-ink-soft); }


/* CHECKBOX options (Payment / Engine Type / Vin-Km-Color etc.) */
.ic-opt{
  display:inline-flex;
  align-items:center;
}

.ic-opt input[type="checkbox"]{
  position:static !important;
  opacity:1 !important;
  pointer-events:auto !important;
  margin:0 7px 0 0;
}

.ic-opt span{
  padding:0 !important;
  min-width:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:700 !important;
  font-size:13px !important;
}

.ic-opt span:hover{ transform:none !important; box-shadow:none !important; }

/* keep checkbox groups in one line when there's space */
.ic-field .ic-opt{ margin-right:18px; margin-bottom:8px; }

/* headings a bit bigger */
.ic-field > label,
.ic-field label.ic-label,
.ic-sec-title{
  font-size:14px !important;
  font-weight:800 !important;
}
/* --- FIX: Remove bold from option labels (Radio + Checkbox) --- */
.ic-field .ic-options label,
.ic-field .ic-options label span,
.ic-field .ic-options .ic-option-label,
.ic-field .ic-options .option-label {
  font-weight: 400 !important;  /* removes bold */
}

/* If you are using custom wrappers */
.ic-field .ic-option,
.ic-field .ic-choice {
  font-weight: 400 !important;
}


/* =========================
   Multi Image Uploader
   ========================= */
.ic-uploader { margin-top: 6px; }
.ic-uploader__input { display:none !important; }
.ic-dropzone{
  border: 2px dashed rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: .15s ease;
}
.ic-dropzone.is-drag{
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.02);
}
.ic-dropzone.is-hover{
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.02);
}
.ic-dropzone:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.ic-dropzone__text{ font-weight: 600; margin-bottom: 10px; }
.ic-uploader__btn{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}
.ic-uploader__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 720px){
  .ic-uploader__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ic-thumb{
  position: relative;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ic-thumb__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.ic-thumb__remove{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.15);
  background:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.ic-thumb--add{
  background: rgba(0,0,0,.02);
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}
.ic-thumb--add .ic-plus{ font-size: 28px; font-weight: 800; }
.ic-thumb--add .ic-addmore{ font-weight: 700; }

/* ic-common.css mein `.ic-form .ic-btn` (0,2,0) hai — us se jeetne ke liye ghost
   ko bhi wahi specificity chahiye, warna "Save as Draft" bhi bhara hua primary
   jaisa kaala dikhta hai (pehle exactly yahi ho raha tha). */
.ic-form .ic-btn--ghost,
.ic-btn--ghost{background:transparent;border:1px solid var(--ic-hairline,#cfd6df);color:var(--ic-navy,#1c1650)}
.ic-form .ic-btn--ghost:hover,
.ic-btn--ghost:hover{background:var(--ic-surface,#f3f5f7)}


/* Actions row: keep Submit + Draft close and aligned */
.ic-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ic-form-actions .ic-btn{margin-top:0}

.ic-form-head .ic-btn, .ic-form-foot .ic-btn{margin-top:0}



/* =========================================================
   Bodymap label responsive sizing
========================================================= */
@media (max-width: 768px){
  .ic-part-label{
    font-size:10px;
    padding:4px 7px;
    border-radius:7px;
    max-width:90%;
  }
}
@media (max-width: 420px){
  .ic-part-label{
    font-size:9px;
    padding:3px 6px;
    border-radius:6px;
    max-width:88%;
  }
}

/* =========================================================
   Mobile center + prevent horizontal scroll (form pages only)
========================================================= */
body:has(#ic-form-root){
  max-width:100%;
  overflow-x:hidden;
}

/* === IC MOBILE BODYMAP DOTS: ALWAYS SHOW + AUTO WRAP (ZAID PATCH) === */
/* Keep dots INSIDE each part box (adaptive to each box size)
   - Uses available vertical space (top+bottom) inside the part
   - Starts centered (visual center), but NEVER overflows outside
   - Adds a new column only when needed
   - If too many dots, scroll inside the part box (still inside) */

.ic-part-box{
overflow: hidden !important;      /* hard stop: don't spill outside */
}

/* Fill the part box with safe insets (leave label space at bottom) */
.ic-part-badges{
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  top: 6px !important;
  bottom: 34px !important;          /* label space */
  transform: none !important;

  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;

  gap: 4px !important;
  justify-content: center !important;  /* center vertically */
  align-content: center !important;     /* center columns */

  max-height: calc(100% - 40px) !important;  /* adapt per part */
  max-width: 100% !important;

  overflow: auto !important;          /* if too many, scroll INSIDE */
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  padding-right: 2px;                 /* scrollbar space */
  z-index: 5;
}

.ic-part-badges .ic-dot,
.ic-part-badges .ic-badge,
.ic-part-badges .badge{
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
  line-height: 22px !important;
  flex: 0 0 auto !important;
}

@media (max-width: 768px){
  .ic-part-badges{
    left: 4px !important;
    right: 4px !important;
    top: 4px !important;
    bottom: 30px !important;
    gap: 4px !important;
    max-height: calc(100% - 34px) !important;
  }

  .ic-part-badges .ic-dot,
  .ic-part-badges .ic-badge,
  .ic-part-badges .badge{
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }
}

/* ============================================================
   Per-field evidence — optional note + photo
   Har field ke neeche do chhote buttons. Band halat mein ye
   nazar-andaz karne layak hone chahiyen, warna 154 fields wali
   form dekhne mein hi thaka deti hai.
   ============================================================ */
.ic-ev { margin-top: 6px; }

.ic-ev__bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ic-ev__t {
  appearance: none;
  border: 1px dashed var(--ic-border);
  background: transparent;
  color: var(--ic-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ic-ev__t:hover,
.ic-ev__t:focus-visible {
  color: var(--ic-green-ink);
  border-color: var(--ic-green-ink);
  background: var(--ic-green-soft);
}
.ic-ev__t.is-on {
  border-style: solid;
  color: var(--ic-green-ink);
  border-color: var(--ic-green-ink);
  background: var(--ic-green-tint);
}

.ic-ev__panel { margin-top: 8px; }
.ic-ev__panel[hidden] { display: none; }

.ic-ev__panel textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
}

/* Evidence uploader ko asli photo field se chhota rakhte hain — ye zameeni
   saboot hai, form ka main khana nahi. */
.ic-ev__panel .ic-uploader { margin-top: 0; }
.ic-ev__panel .ic-dropzone { padding: 10px 12px; }
.ic-ev__panel .ic-dropzone__text { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ic-ev__t { transition: none; }
}

/* Ungli se chalne wali screens par 24px ka button chhota parta hai. Poore
   44px nahi de sakte — 200 fields par wo safhe ko hazaar pixel lamba kar
   deta — magar 32px se nishana theek lag jata hai. */
@media (pointer: coarse) {
  .ic-ev__t {
    min-height: 32px;
    padding: 7px 12px;
  }
}

/* =========================================================
   STATUS — segmented control
   171 checkpoints ek phone par bharne hote hain. Pehle yahan
   13px ke native radio the: angoothe se nishana mushkil, aur
   bhare hue form mein Pass/Weak/Fail teeno bilkul ek jaise
   dikhte the. Ab chaar barabar khane, poori chaurai, aur
   chuna hua khana apne matlab ka rang le leta hai — is se
   tap asaan aur wapas parhna ek nazar ka kaam ho jata hai.
   Rang wahi hain jo report par status pill ke hain, taake
   inspector jo dekh kar bhare, khareedar wahi dekhe.
========================================================= */
.ic-form .ic-options.ic-options--status{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
  align-items:stretch;
}

.ic-form .ic-options.ic-options--status .ic-choice{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:6px 4px;
  gap:0;
  border:1px solid var(--if-border);
  border-radius:10px;
  background:#fff;
  font-size:12px;
  /* Purana block `.ic-field .ic-choice{font-weight:400 !important}` sab
     option labels ko patla kar deta hai. Segmented control mein wazan
     maani rakhta hai, is liye yahan uske barabar zor lagana parta hai. */
  font-weight:700 !important;
  line-height:1.2;
  color:var(--ic-ink-3);
  cursor:pointer;
  user-select:none;
  text-align:center;
  /* Base `.ic-choice` ab lapetne deta hai (wajah wahan likhi hai);
     segmented control ki pills ek hi satar mein rehni chahiyen.        */
  white-space:nowrap;
  line-height:1.2;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}

/* Native circle chhupa dete hain — poora khana hi target hai.
   .ic-choice input par !important laga hua tha, is liye yahan bhi. */
.ic-form .ic-options.ic-options--status .ic-choice input{
  position:absolute !important;
  opacity:0 !important;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none !important;
}

.ic-form .ic-options.ic-options--status .ic-choice:hover{ border-color:var(--ic-line-strong, #cbd5e1); }
.ic-form .ic-options.ic-options--status .ic-choice:focus-within{
  border-color:var(--ic-green-dark);
  box-shadow:0 0 0 3px rgba(22,163,74,.18);
}

/* Chuna hua khana — matlab ka rang.
   Yahan :has() istemal NAHI karte: 176 status groups par har tap us ka
   dobara hisaab karta hai aur browser saaf taur par ruk jata hai (test
   karte waqt renderer hi jam gaya tha). Us ke bajaye JS ek class laga
   deta hai — dekho syncStatusPills() in ic-form.js. Ye sasta bhi hai
   aur cascade mein saaf bhi. */
.ic-form .ic-options.ic-options--status .ic-choice.is-on{ font-weight:900 !important; }
.ic-form .ic-options.ic-options--status .ic-choice.is-pass,
.ic-form .ic-options.ic-options--status .ic-choice.is-good{
  background:rgba(34,197,94,.12); color:#15803d; border-color:rgba(34,197,94,.55);
}
.ic-form .ic-options.ic-options--status .ic-choice.is-weak{
  background:rgba(245,158,11,.14); color:#92400e; border-color:rgba(245,158,11,.60);
}
.ic-form .ic-options.ic-options--status .ic-choice.is-fail{
  background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(239,68,68,.55);
}
.ic-form .ic-options.ic-options--status .ic-choice.is-na{
  background:rgba(148,163,184,.20); color:var(--ic-ink-3); border-color:rgba(148,163,184,.60);
}

/* Chhoti screen par "Not Available" 72px ke khane mein nahi samata */
.ic-choice__abbr{ display:none; }
@media (max-width: 560px){
  .ic-form .ic-options.ic-options--status .ic-choice__label.is-long{ display:none; }
  .ic-form .ic-options.ic-options--status .ic-choice__abbr{ display:inline; }
}

/* Ungli wali screen par nishana bara chahiye */
@media (pointer: coarse){
  .ic-form .ic-options.ic-options--status .ic-choice{ min-height:44px; font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  .ic-form .ic-options.ic-options--status .ic-choice{ transition:none; }
}

/* =========================================================
   STICKY NAV — kahan hoon, kitna hua, kahan jana hai
========================================================= */
.ic-nav{
  position:sticky;
  top:var(--ic-nav-top, 0px);
  z-index:40;
  display:grid;
  /* minmax(0,…) warna pehla track apne content se chhota nahi hota aur
     lambe section-naam ke saath "124/176" kat jata hai. */
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 14px 12px;
  margin:0 0 14px;
  background:var(--if-card);
  border:1px solid var(--if-border);
  border-radius:var(--if-radius);
  box-shadow:0 6px 20px rgba(15,23,42,.08);
}

.ic-nav__btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:32px;
  cursor:pointer;
  color:var(--if-text);
  text-align:left;
}
.ic-nav__sec{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ic-nav__chev{ flex:0 0 auto; color:var(--ic-muted); transition:transform .15s ease; }
.ic-nav.is-open .ic-nav__chev{ transform:rotate(180deg); }

.ic-nav__count{
  font-size:13px;
  font-weight:700;
  color:var(--ic-muted);
  white-space:nowrap;
}
.ic-nav__count strong{ color:var(--if-text); font-weight:900; }

.ic-nav__track{
  grid-column:1 / -1;
  height:4px;
  border-radius:999px;
  background:var(--ic-surface-2);
  overflow:hidden;
}
.ic-nav__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--ic-green-dark);
  transition:width .2s ease;
}
.ic-nav.is-complete .ic-nav__fill{ background:var(--ic-pass); }

/* Section list — patti par tap karne se khulti hai */
.ic-nav__sheet{
  grid-column:1 / -1;
  margin-top:4px;
  max-height:min(52vh, 420px);
  overflow:auto;
  display:grid;
  gap:4px;
  padding-top:8px;
  border-top:1px solid var(--if-border);
}
.ic-nav__sheet[hidden]{ display:none; }

.ic-nav__item{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  color:var(--if-text);
}
.ic-nav__item:hover,
.ic-nav__item:focus-visible{ background:var(--ic-surface-2); }
.ic-nav__item-name{
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ic-nav__item-count{
  font-size:12px;
  font-weight:800;
  color:var(--ic-muted);
  white-space:nowrap;
}
.ic-nav__item.is-done .ic-nav__item-count{ color:var(--ic-green-ink); }
.ic-nav__item.is-done .ic-nav__item-count::after{ content:" ✓"; }

@media (pointer: coarse){
  .ic-nav__item{ min-height:46px; }
}
@media (prefers-reduced-motion: reduce){
  .ic-nav__fill, .ic-nav__chev{ transition:none; }
}

/* =========================================================
   FOOT — phone par hamesha pahunch mein
   25,000px ki form ke aakhir mein rakha Submit ka matlab hai
   150 khane bharne ke baad 31 screen ka safar. Sticky bottom
   se wo hamesha angoothe ke neeche rehta hai.
========================================================= */
@media (max-width: 720px){
  .ic-form-foot{
    position:sticky;
    bottom:0;
    z-index:35;
    margin:14px 0 0;
    flex-wrap:wrap;
    background:var(--if-card);
    box-shadow:0 -6px 20px rgba(15,23,42,.10);
  }
  .ic-form-foot .ic-btn{ flex:1 1 auto; }
  /* Sar par sticky patti hai, sar wale buttons ki nuqal ki zaroorat nahi */
  .ic-form-head{ flex-wrap:wrap; }
  .ic-form-head .ic-btn{ flex:1 1 auto; }
}

/* Body map: phone par part ke naam "Fr…", "Fro…", "Rea…" tak kat jate hain —
   itni si ibarat kuchh nahi batati, bas naqsha bhar deti hai. Chhoti screen
   par sirf nuqte rehne dete hain: gaari ke naqshe par JAGAH hi pehchaan hai,
   aur tap karne par poora naam popup mein aata hai (button par aria-label
   aur title dono maujood hain). */
@media (max-width: 560px){
  .ic-part-box .ic-part-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* =========================================================
   SHELL — form ka apna chehra
   Yahan tak chrome hi sab se buland cheez thi: thos sabz
   slab har section par, unwaan do lines mein tootta hua,
   teen mukhtalif rang ke buttons jinka text bhi tut raha
   tha, aur ek mara hua "Version: —". Asal cheez — jawab ke
   rangeen khane — un sab ke neeche dab gayi thi.
   Ab chrome khamosh hai aur data buland.
========================================================= */

/* ---------- Header ---------- */
.ic-form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border-radius:16px;
}
.ic-form-head__id{ min-width:0; }

.ic-form-head__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--if-muted);
  margin:0 0 4px;
}
.ic-form-head__ver{
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--ic-ink-3);
  background:var(--ic-surface-2);
  border-radius:999px;
  padding:2px 8px;
}

.ic-form .ic-h1{
  margin:0;
  font-size:19px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--if-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ic-form-head__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* Buttons: ek hi qad, text kabhi na tootay. Pehle "Submit Inspection"
   do lines mein bant jata tha — wahi cheez safhe ko kachcha dikhati hai. */
.ic-form .ic-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
/* Rang gehra rakhna parta hai: safed ibarat #16a34a par sirf 3.30:1 deti
   hai, aur 13px bold ko 4.5:1 chahiye. green-deep par 5.02:1 milta hai.
   (Client apna brand rang de to zimmedari uski, magar default sahi ho.) */
.ic-form .ic-btn--primary{
  background:var(--ic-green-deep);
  border-color:var(--ic-green-deep);
  color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.10);
}
.ic-form .ic-btn--primary:hover{ background:var(--ic-green-ink); border-color:var(--ic-green-ink); }
.ic-form .ic-btn--ghost{
  background:#fff;
  border-color:var(--if-border);
  color:var(--ic-ink-3);
}
.ic-form .ic-btn--ghost:hover{ border-color:var(--ic-line-strong,#cbd5e1); color:var(--if-text); }
/* Test ka auzaar — mojood, magar kabhi asli amal jaisa na lage */
.ic-form .ic-btn--test{
  background:transparent;
  border:1px dashed var(--if-border);
  color:var(--if-muted);
  font-weight:600;
  margin-right:4px;
}
.ic-form .ic-btn--test:hover{ color:var(--ic-ink-3); border-color:var(--ic-line-strong,#cbd5e1); }

/* ---------- Section card ---------- */
.ic-form .ic-card{
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);
  margin:12px 0;
}

/* Thos sabz slab ki jagah — halka header, chhoti rangeen lakeer, aur count */
.ic-form .ic-card > .ic-title{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:transparent !important;
  color:var(--if-text) !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-.005em;
  padding:16px 20px 12px !important;
  border-bottom:1px solid var(--if-border);
}
.ic-form .ic-card > .ic-title .ic-title__text{
  position:relative;
  padding-left:12px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ic-form .ic-card > .ic-title .ic-title__text::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:4px; height:15px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--if-brand);
}
.ic-title__count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  color:var(--ic-ink-3);   /* muted par 4.43:1 tha — baal barabar kam */
  background:var(--ic-surface-2);
  border-radius:999px;
  padding:3px 10px;
}
.ic-title__count[hidden]{ display:none; }
.ic-title__count.is-done{ color:var(--ic-green-ink); background:var(--ic-green-tint); }

.ic-form .ic-card > .ic-fields{ padding:16px 20px 18px; }

/* ---------- Field typography ----------
   Har label 15px/1000 kaala tha — poora safha cheekh raha tha aur
   jawab ke rangeen khane us shor mein gum the. */
.ic-form .ic-field > label{
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--ic-ink-3);
  margin:0 0 6px;
}

/* ---------- Foot ---------- */
.ic-form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px;
  border-radius:16px;
}

@media (max-width: 720px){
  .ic-form-head{ flex-direction:column; align-items:stretch; gap:14px; padding:16px; }
  .ic-form .ic-h1{ white-space:normal; }
  .ic-form-head__actions{ flex-wrap:wrap; }
  .ic-form-head__actions .ic-btn{ flex:1 1 auto; }
  .ic-form .ic-card > .ic-title{ padding:14px 16px 11px !important; }
  .ic-form .ic-card > .ic-fields{ padding:14px 16px 16px; }
  .ic-form-foot{ padding:12px 16px; }
}

@media (prefers-reduced-motion: reduce){
  .ic-form .ic-btn{ transition:none; }
}

/* Workspace: cards safed hain aur unke neeche ki satah bhi taqreeban safed
   (#fafbfc) thi — do fisad ka farq, is liye card kabhi card jaisa laga hi
   nahi, safha ek behta hua safed maidan tha. Halka sa gehra karne se har
   card apni jagah par baith jata hai. */
/* Selector mein #ic-form-root bhi shamil hai kyunki maujooda rule
   `.ic-form-root, #ic-form-root` hai — us list mein ID ki wajah se poore
   rule ko ID ki specificity milti hai, aur sirf class se likha hua rule
   us se haar jata hai. */
.ic-form-root, #ic-form-root{
  background:#f1f4f7;
  padding:14px 0 22px;
  border-radius:18px;
}
@media (max-width: 720px){
  .ic-form-root{ padding:10px 0 16px; border-radius:0; }
}

/* .ic-form ko `width: min(1100px, 96vw)` se majboor kiya gaya tha, magar uska
   parent .ic-form-root 1068px ka nikalta hai — natija ye ke poori form aur
   har card 32px daaen taraf se bahar nikal jate the, aur wrapper ka
   overflow-x unhe kaat deta tha. Isi liye cards ka daayan kinara katta hua
   lagta tha aur workspace ka rang unke ird-gird nazar hi nahi aata tha.
   Parent ke andar rehna hi sahi hai. */
.ic-form,
body.inspecto-live-preview .ic-form{
  width:100% !important;
  max-width:100% !important;
  padding-left:16px !important;
  padding-right:16px !important;
  box-sizing:border-box !important;
}
@media (max-width: 720px){
  .ic-form,
  body.inspecto-live-preview .ic-form{ padding-left:10px !important; padding-right:10px !important; }
}

/* =========================================================
   BODY MAP LEGEND
   Pehle yahan ek thos kaala slab tha jis par 26px ka lafz
   "Legend" likha hota — safhe ka sab se buland lafz, aur
   kehta kuchh nahi. Neeche "100%" gyarah pixel ka, yani
   asal maloomat sab se chhoti. Aur bar shuru se hi poori
   sabz bhari hoti thi jabke gaari abhi dekhi bhi nahi gayi.
   Ab: halat ka adad hero hai, rang halat ke mutabiq badalta
   hai, aur codes ek saaf key ki tarah neeche baithe hain.
========================================================= */
.ic-legend-card{
  border-radius:16px;
  border:1px solid var(--if-border);
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);
}

/* Kaala slab hataya */
.ic-legend-title{ display:none; }

/* ---- Halat ---- */
.ic-legend-score{ padding:18px 18px 16px; }

.ic-legend-score__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ic-legend-score__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--if-muted);
}
.ic-legend-score__state{
  font-size:11px;
  font-weight:800;
  padding:3px 9px;
  border-radius:999px;
  background:var(--ic-surface-2);
  color:var(--ic-ink-3);
  white-space:nowrap;
}
.ic-legend-score.is-good .ic-legend-score__state{ background:var(--ic-green-tint); color:var(--ic-green-ink); }
.ic-legend-score.is-avg  .ic-legend-score__state{ background:var(--ic-weak-bg);   color:#92400e; }
.ic-legend-score.is-bad  .ic-legend-score__state{ background:var(--ic-fail-bg);   color:#b91c1c; }

.ic-legend-score__num{
  margin:6px 0 10px;
  font-size:38px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--if-text);
  font-variant-numeric:tabular-nums;
}
/* Andar ka span purane rule se 13px/1000 le leta tha, is liye "58%" chhota
   reh jata. Adad hi is card ka hero hai — usay parent se qad lene do. */
.ic-legend-score__num .ic-bm-progress__pct{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  line-height:inherit;
}
.ic-legend-score.is-empty .ic-legend-score__num{ color:var(--ic-faint); }

.ic-bm-progress__track{
  height:8px;
  border-radius:999px;
  background:var(--ic-surface-2);
  overflow:hidden;
}
.ic-bm-progress__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--ic-ink-3);
  transition:width .25s ease, background .2s ease;
}
.ic-legend-score.is-good .ic-bm-progress__fill{ background:var(--ic-pass); }
.ic-legend-score.is-avg  .ic-bm-progress__fill{ background:var(--ic-weak); }
.ic-legend-score.is-bad  .ic-bm-progress__fill{ background:var(--ic-fail); }

.ic-legend-score__hint{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--if-muted);
}

/* ---- Codes ---- */
.ic-legend-codes{
  border-top:1px solid var(--if-border);
  padding:14px 18px 18px;
  background:var(--ic-surface);
}
.ic-legend-codes__head{
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--if-muted);
  margin:0 0 10px;
}
.ic-legend-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}
.ic-legend-item{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:13px;
  font-weight:600;
  color:var(--ic-ink-3);
  min-width:0;
}
.ic-legend-item__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ic-legend-card .ic-dot{
  width:22px; height:22px;
  font-size:11px;
  flex:0 0 22px;
}

/* Tang jagah par ek qatar mein terah cheezein bohat lambi ho jati hain */
@media (max-width: 1100px){
  .ic-legend-list{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:14px; }
}
@media (max-width: 520px){
  .ic-legend-list{ grid-template-columns:1fr; }
  .ic-legend-score__num{ font-size:32px; }
}

@media (prefers-reduced-motion: reduce){
  .ic-bm-progress__fill{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE GUTTERS — padding ko tehon mein jamaa hone se roko
   ═══════════════════════════════════════════════════════════════════
   Ye masla localhost par kabhi nazar nahi aaya kyunki wahan form
   STANDALONE khulta hai. Asli site par wo theme ke container ke andar
   shortcode se aata hai, aur har teh apni padding daal deti hai:

     375  screen
     345  .container      -30  (host theme)
     317  .ic-form-wrap   -28
     297  .ic-form        -20
     263  .ic-card        -32   <- ic-common.css ka purana rule
     231  .ic-field             <- asal content

   Yani 375 mein se 144px (38%) sirf padding. Nateeja: Pass/Weak/Fail/NA
   ki pills sirf 53px chauRi — form ka jo kaam sab se zyada hota hai
   wahi sab se tang. */

/* 1) Card ki apni padding KHATAM — us ke bachche khud padding rakhte hain
      (.ic-title aur .ic-fields, dekho upar). ic-common.css:28 ka
      `padding:16px` us redesign se pehle ka hai aur ab dohra parhta hai.
      Ye har screen par 32px wapas deta hai, sirf mobile par nahi. */
.ic-form .ic-card{ padding:0; }

@media (max-width: 600px){
  /* 2) Bahar ki do tehon mein se EK hi gutter rakho. Host theme apni
        padding pehle hi de raha hota hai; standalone surat mein
        .ic-form-wrap akela kaafi hai. */
  .ic-form-wrap{ padding-left:12px; padding-right:12px; }
  .ic-form{
    padding-left:0 !important;      /* base rule !important hai, isay bhi chahiye */
    padding-right:0 !important;
    width:100% !important;
  }

  /* 3) Card ke andar bhi 16 se 12 — chhoti screen par har pixel ginta hai. */
  .ic-form .ic-card > .ic-title{  padding:12px 12px 9px; }
  .ic-form .ic-card > .ic-fields{ padding:12px 12px 14px; }
  .ic-form .ic-card > .ic-sec-progress{ padding:0 12px 12px; }
}

/* HTML/notice block (e.g. diagnosis disclaimer) */
.ic-form-html{background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.6;color:#4b3a00;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
.ic-form-html p{margin:0 0 8px}
.ic-form-html p:last-child{margin-bottom:0}
.ic-form-html strong{color:#92400e}
.ic-form-html ul{margin:6px 0 0 18px;padding:0}
.ic-form-html li{margin:5px 0}

/* v1.1.12 — PDF thumbs + skipped-file note in uploader */
.ic-thumb--pdf{ background:#fff7ed; border-color:#fdba74; }
.ic-thumb__pdf{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; height:100%; min-height:92px; padding:8px; text-decoration:none; color:#9a3412; font-size:12px; font-weight:700; text-align:center; }
.ic-thumb__pdfico{ font-size:28px; line-height:1; }
.ic-thumb__pdfname{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-uploader__note{ margin-top:8px; font-size:13px; color:#9a3412; background:#fff7ed; border:1px solid #fdba74; border-radius:10px; padding:8px 10px; }
.ic-upload-warn{ margin-top:12px; }