/* ============================================
   ARDUVEX — Websitescan pop-up
   ============================================ */

.popup-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 16, 32, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.popup-overlay.active { opacity: 1; visibility: visible; }

.popup-card {
  position: relative;
  width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 40px 36px;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease);
}
.popup-overlay.active .popup-card { transform: none; }

.popup-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-muted); background: var(--color-bg);
  transition: background-color .2s, color .2s;
}
.popup-close:hover { background: var(--color-soft); color: var(--color-ink); }

.popup-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-50); margin-bottom: 22px;
}
.popup-icon svg { width: 26px; height: 26px; stroke: var(--color-primary); }

.popup-title { font-size: 28px; letter-spacing: -0.03em; margin-bottom: 10px; }
.popup-subtitle { color: var(--color-muted); font-size: 16px; margin-bottom: 26px; }
.popup-subtitle strong { color: var(--color-ink); }
.popup-tags {
  display: block; margin-top: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary);
}

.popup-form-group { margin-bottom: 12px; }
.popup-form-group.hidden { display: none; }
.popup-form-group input[type="text"],
.popup-form-group input[type="email"],
.popup-form-group input[type="tel"],
.popup-form-group input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; color: var(--color-ink);
  background: var(--color-bg);
  border: 1.5px solid var(--color-line);
  border-radius: 12px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.popup-form-group input::placeholder { color: #98A1B3; }
.popup-form-group input:focus {
  outline: none; background: #fff; border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(10, 85, 230, .12);
}

.checkbox-group { margin: 6px 0 16px; }
.checkbox-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-custom {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--color-faded); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.checkbox-label input:checked + .checkbox-custom {
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--color-primary);
}
.checkbox-label input:focus-visible + .checkbox-custom { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.checkbox-text { font-size: 15px; color: var(--color-text); }

.popup-form-error {
  margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  background: #FEF3F2; color: #B42318; font-size: 14px;
}

.popup-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--color-primary); color: #fff;
  font-size: 16px; font-weight: 600;
  transition: background-color .25s, box-shadow .25s;
}
.popup-btn:hover { background: var(--color-primary-d); box-shadow: 0 10px 24px rgba(10, 85, 230, .28); }
.popup-btn:disabled { opacity: .7; cursor: wait; }
.popup-btn-loading { align-items: center; gap: 10px; }
.popup-spinner { animation: spin 1s linear infinite; }

.popup-disclaimer { margin-top: 14px; text-align: center; font-size: 13px; color: var(--color-muted); }

.popup-success { text-align: center; padding: 12px 0 4px; }
.popup-success-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center; background: var(--color-primary-50);
}
.popup-success-icon svg { width: 30px; height: 30px; stroke: var(--color-primary); }
.popup-success h3 { font-size: 24px; margin-bottom: 8px; }
.popup-success p { color: var(--color-muted); }

/* Mobiele balk */
.scan-mobile-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px;
  background: var(--color-dark); color: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: translateY(140%);
  transition: transform .45s var(--ease);
}
.scan-mobile-bar.visible { transform: none; }
.scan-bar-text { flex: 1; font-size: 15px; font-weight: 600; }
.scan-bar-btn {
  padding: 11px 16px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 600;
}
.scan-bar-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .7);
}

@media (min-width: 769px) { .scan-mobile-bar { display: none; } }

@media (max-width: 480px) {
  .popup-card { padding: 40px 22px 28px; }
  .popup-title { font-size: 24px; }
}