/* Live Well product verification — modal + result page styles */
.vm-hidden { display: none !important; }

#verifyProductBtn {
  position: fixed; bottom: 84px; right: 24px; z-index: 9999;
  background: #7cc4a8; color: #0e2a3d;
  padding: 14px 24px; border-radius: 40px;
  text-decoration: none; font-family: Arial, sans-serif;
  font-size: 14px; font-weight: bold; letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border: 2px solid #fff; transition: all 0.3s;
}
#verifyProductBtn:hover { background: #69b398; }

#verifyModal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10,24,38,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; font-family: Arial, sans-serif;
}
.vm-card {
  background: #fff; border-radius: 16px; max-width: 480px; width: 100%;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: vm-pop 0.25s ease;
}
@keyframes vm-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vm-head { background: #1c3d5a; color: #fff; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; }
.vm-head h3 { margin: 0; font-size: 17px; }
.vm-head .vm-logo { color: #7cc4a8; font-size: 12px; }
.vm-close { background: none; border: 0; color: #b9c8dd; font-size: 26px; cursor: pointer; line-height: 1; }
.vm-tabs { display: flex; border-bottom: 1px solid #e3e9f1; }
.vm-tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; font-size: 13px; color: #5b6a7c; background: #f7f9fc; border: 0; }
.vm-tab.vm-active { background: #fff; color: #1c3d5a; font-weight: bold; box-shadow: inset 0 -3px 0 #7cc4a8; }
.vm-body { padding: 22px; }
.vm-scan { display: flex; flex-direction: column; gap: 12px; }
#vmReader { width: 100%; border-radius: 10px; overflow: hidden; background: #0e2a3d; }
#vmReader video { width: 100% !important; border-radius: 10px; }
.vm-field label { display: block; font-size: 12px; color: #5b6a7c; margin-bottom: 5px; }
.vm-field input[type=text], .vm-field input[type=email] {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid #c9d6e4; border-radius: 8px; font-size: 15px;
}
.vm-btn {
  display: inline-block; background: #1c3d5a; color: #fff;
  border: 0; border-radius: 8px; padding: 12px 20px;
  font-size: 14px; font-weight: bold; cursor: pointer; text-decoration: none;
}
.vm-btn:disabled { opacity: 0.5; cursor: default; }
.vm-btn-green { background: #2e7d5b; }
.vm-hint { font-size: 12px; color: #7d8ea1; line-height: 1.55; margin: 10px 0 0; }
.vm-status { font-size: 12.5px; color: #9a6b00; margin-top: 8px; min-height: 16px; }
.vm-err { color: #b3261e; }

/* photo upload dropzone */
.vm-dropzone {
  border: 2px dashed #b7c6d6; border-radius: 10px; padding: 18px 12px;
  text-align: center; color: #5b6a7c; cursor: pointer; background: #f7f9fc;
  transition: all 0.2s;
}
.vm-dropzone:hover { border-color: #7cc4a8; background: #f0f7f4; }
.vm-dropzone.vm-dz-over { border-color: #2e7d5b; background: #e8f4ee; }
.vm-dz-inner strong { color: #1c3d5a; }
.vm-dz-inner span { font-size: 12px; }

/* verified report (optional self-identification) */
.vm-vr { margin-top: 14px; border-top: 1px solid #e3e9f1; padding-top: 12px; }
.vm-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #5b6a7c; line-height: 1.5; margin-top: 10px; cursor: pointer; }
.vm-consent input { margin-top: 2px; }
.vr-verified { color: #2e7d5b; font-weight: bold; }

/* result page */
.vm-result-page { margin: 0; background: #eef2f8; font-family: Arial, sans-serif; }
.vr-wrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.vr-card { background: #fff; border-radius: 16px; max-width: 620px; width: 100%; overflow: hidden; box-shadow: 0 16px 50px rgba(10,24,38,0.18); }
.vr-head { background: #1c3d5a; color: #fff; padding: 22px 28px; }
.vr-logo { font-size: 20px; font-weight: bold; }
.vr-logo span { color: #7cc4a8; }
.vr-sub { font-size: 12px; color: #b9c8dd; margin-top: 3px; }
.vr-body { padding: 28px; }
.vr-badge { display: inline-block; padding: 7px 14px; border-radius: 40px; font-size: 12px; font-weight: bold; letter-spacing: 0.8px; }
.vr-badge.red { background: #fdecea; color: #b3261e; }
.vr-badge.amber { background: #fdf3e0; color: #9a6b00; }
.vr-badge.gray { background: #eef1f4; color: #5b6a7c; }
.vr-title { font-size: 21px; color: #1d2733; margin: 16px 0 6px; }
.vr-barcode { color: #5b6a7c; font-size: 14px; margin: 0 0 16px; }
.vr-msg { border-radius: 10px; padding: 16px 18px; font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.vr-msg p { margin: 0 0 8px; }
.vr-msg p:last-child { margin-bottom: 0; }
.vr-msg-red { background: #fdecea; color: #6d1a14; border: 1px solid #f5c6c1; }
.vr-msg-amber { background: #fdf3e0; color: #5f4300; border: 1px solid #f0dcb6; }
.vr-msg-gray { background: #f3f5f8; color: #3d4a58; border: 1px solid #e0e6ec; }
.vr-gs1 { margin: 6px 0 16px; }
.vr-btn { display: inline-block; border: 0; border-radius: 8px; padding: 12px 22px; font-size: 14px; font-weight: bold; cursor: pointer; text-decoration: none; }
.vr-btn-gs1 { background: #0a6ebd; color: #fff; }
.vr-btn-back { background: #eef1f4; color: #1c3d5a; }
.vr-hint { font-size: 12px; color: #7d8ea1; margin: 10px 0 0; line-height: 1.5; }
.vr-note { font-size: 13px; color: #5b6a7c; line-height: 1.6; margin: 10px 0 0; }
.vr-foot { margin-top: 22px; }
.vr-badge.green { background: #e8f4ee; color: #2e7d5b; }
.vr-msg-green { background: #e8f4ee; color: #1f5c42; border: 1px solid #bfe3d0; }