/* =======================================================
   webscanner_addon.css  WebScanner responsive add-on
   Must be loaded LAST, after law25_responsive_fixes.css
======================================================= */

/* Desktop/tablet section layout */
.how-to-setup2 .smart-questionnaire-2-1-parent,
.how-to-setup3 .smart-questionnaire-2-1-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 72px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.how-to-setup2 .smart-questionnaire-2-1-parent > img,
.how-to-setup3 .smart-questionnaire-2-1-parent > img {
  display: block !important;
  max-width: 520px !important;
  width: 45% !important;
  height: auto !important;
}

.smart-questionnaires-parent {
  width: 100% !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}

.smart-questionnaire-2-1-parent {
  font-size: 16px !important;
}

/* Feature pills */
.ws-feature-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
}

.ws-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  color: #3d3d3d !important;
  background: #fff !important;
  border: 1px solid #e0e4ea !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  letter-spacing: normal !important;
}

.ws-pill--check::before,
.ws-pill--star::before,
.ws-pill--lock::before {
  content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.ws-pill--check::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%232e7d32' stroke-width='1.4'/%3E%3Cpath d='M4.5 7l2 2 3-3' stroke='%232e7d32' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.ws-pill--star::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 1.5l1.5 3.2 3.5.5-2.5 2.4.6 3.5L7 9.5l-3.1 1.6.6-3.5L2 5.2l3.5-.5z' stroke='%23854F0B' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.ws-pill--lock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Crect x='2' y='5.5' width='10' height='7' rx='1.5' stroke='%23185FA5' stroke-width='1.2'/%3E%3Cpath d='M4.5 5.5V4a2.5 2.5 0 015 0v1.5' stroke='%23185FA5' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Mini mockup */
.ws-mini-mockup {
  display: block !important;
  width: 100% !important;
  max-width: 340px !important;
  margin-top: 0 !important;
  background: #fff !important;
  border: 1px solid #e0e4ea !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  color: #3d3d3d !important;
  box-sizing: border-box !important;
}

.ws-mini-mockup *,
.ws-mini-mockup *::before,
.ws-mini-mockup *::after {
  box-sizing: border-box !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: normal !important;
}

.ws-mini-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #1a2744 !important;
  padding: 7px 10px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.ws-mini-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.ws-mini-bar-label {
  display: inline-block !important;
  color: #aab0bd !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin-left: 5px !important;
}

.ws-mini-body {
  display: block !important;
  padding: 10px 12px !important;
  background: #fff !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.ws-mini-label {
  display: block !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  color: #8e9aad !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.ws-mini-scan-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 8px 0 !important;
}

.ws-mini-input {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 7px !important;
  border: 1px solid #e0e4ea !important;
  border-radius: 4px !important;
  background: #f4f6fa !important;
  color: #8e9aad !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.ws-mini-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 4px !important;
  background: #2e7d32 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ws-mini-fw-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.ws-mini-chip {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.ws-mini-pass { background: #EAF3DE !important; color: #3B6D11 !important; }
.ws-mini-fail { background: #FCEBEB !important; color: #A32D2D !important; }
.ws-mini-warn { background: #FAEEDA !important; color: #854F0B !important; }

.ws-mini-stat-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ws-mini-stat {
  display: block !important;
  background: #f4f6fa !important;
  border-radius: 4px !important;
  padding: 5px 7px !important;
  margin: 0 !important;
}

.ws-mini-stat-num {
  display: block !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.ws-mini-stat-lbl {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #8e9aad !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.ws-mini-green { color: #3B6D11 !important; }
.ws-mini-red { color: #A32D2D !important; }
.ws-mini-amber { color: #854F0B !important; }

.ws-mini-score-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 0 8px 0 !important;
}

.ws-mini-score-box {
  display: block !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
}

.ws-mini-score-green { background: #EAF3DE !important; }
.ws-mini-score-red { background: #FCEBEB !important; }

.ws-mini-reqs {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.ws-mini-req-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  background: #f4f6fa !important;
  border-radius: 3px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
}

.ws-mini-req-row > span:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* iPhone/mobile hard override */
@media (max-width: 768px) {
  .how-to-setup2,
  .how-to-setup3 {
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .how-to-setup2 .smart-questionnaire-2-1-parent,
  .how-to-setup3 .smart-questionnaire-2-1-parent {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  .how-to-setup2 .smart-questionnaire-2-1-parent > img,
  .how-to-setup3 .smart-questionnaire-2-1-parent > img {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    order: 2 !important;
  }

  .how-to-setup2 .smart-questionnaires-parent,
  .how-to-setup3 .smart-questionnaires-parent {
    order: 1 !important;
    width: 100% !important;
    max-width: 340px !important;
    display: block !important;
    font-size: 16px !important;
    text-align: left !important;
  }

  .ws-feature-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: 16px 0 !important;
  }

  .ws-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .ws-mini-mockup {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 16px auto 0 auto !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .ws-mini-topbar {
    display: flex !important;
  }

  .ws-mini-body {
    display: block !important;
  }

  .ws-mini-scan-row {
    display: flex !important;
    flex-direction: row !important;
  }

  .ws-mini-fw-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .ws-mini-stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}