/* Copyright (c) 2020-2026 Aaron C. de Bruyn <aaron@ctrl-alt-it.com> */
/* Escape Dental — Patient Intake Kiosk */

/* ================================================================
   Design tokens
   ================================================================ */

:root {
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;

  --gray-50:  #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;

  --red-50:   #fef2f2;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --red-700:  #b91c1c;

  --green-50:  #f0fdf4;
  --green-500: #22c55e;
  --green-600: #16a34a;

  --yellow-50:  #fefce8;
  --yellow-600: #ca8a04;

  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

/* ================================================================
   Reset & base
   ================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   Layout
   ================================================================ */

.kiosk-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kiosk-main {
  flex: 1;
}

/* ================================================================
   Header
   ================================================================ */

.kiosk-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
}

.kiosk-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.kiosk-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal-800);
  letter-spacing: -0.02em;
}

.kiosk-logo h1 span {
  color: var(--teal-600);
}

.kiosk-subtitle {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin: 0;
}

/* ================================================================
   Cards
   ================================================================ */

.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.card h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.card .help,
.help {
  color: var(--gray-500);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* ================================================================
   Kiosk start screen
   ================================================================ */

.kiosk-welcome {
  text-align: center;
  padding: 3rem 1rem;
}

.kiosk-welcome h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.kiosk-welcome p {
  font-size: 1.1rem;
  color: var(--gray-500);
  margin-bottom: 2.5rem;
}

.kiosk-choices {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.kiosk-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 2.5rem;
  background: #fff;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  text-decoration: none;
  color: var(--gray-800);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: var(--shadow);
  min-width: 220px;
  cursor: pointer;
}

.kiosk-choice-btn:hover,
.kiosk-choice-btn:focus {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.kiosk-choice-btn:active {
  transform: translateY(0);
}

.kiosk-choice-btn svg {
  color: var(--teal-600);
}

.kiosk-choice-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
}

.kiosk-choice-desc {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ================================================================
   Forms — kiosk optimised (large touch targets)
   ================================================================ */

.kiosk-form-container {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.kiosk-form-container h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.kiosk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group-wide {
  grid-column: 1 / -1;
}

label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.required {
  color: var(--red-500);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--gray-800);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 48px;
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* ================================================================
   Buttons
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
  min-height: 44px;
}

.btn-lg {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  min-height: 52px;
  border-radius: 8px;
}

.btn-primary {
  background: var(--teal-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--teal-700);
  box-shadow: var(--shadow);
}

.btn-primary:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.btn-secondary {
  background: #fff;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-sm {
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  min-height: 36px;
}

.actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.kiosk-nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

/* ================================================================
   Step indicator (multi-step form)
   ================================================================ */

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.step-dot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-400);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.step-dot span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  border: 2px solid var(--gray-300);
  color: var(--gray-400);
  flex-shrink: 0;
}

.step-dot.active {
  color: var(--teal-700);
}

.step-dot.active span {
  border-color: var(--teal-600);
  background: var(--teal-600);
  color: #fff;
}

.step-dot.done {
  color: var(--gray-600);
}

.step-dot.done span {
  border-color: var(--teal-500);
  background: var(--teal-50);
  color: var(--teal-600);
}

/* ================================================================
   Form steps (show/hide)
   ================================================================ */

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

/* ================================================================
   Conditions checklist
   ================================================================ */

.conditions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.condition-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-transform: none;
  letter-spacing: 0;
  min-height: 48px;
}

.condition-check:hover {
  border-color: var(--teal-500);
  background: var(--teal-50);
}

.condition-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--teal-600);
  flex-shrink: 0;
}

/* ================================================================
   Consent blocks
   ================================================================ */

.consent-block {
  margin-bottom: 1.5rem;
}

.consent-block h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.consent-text {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.7;
}

.consent-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gray-700);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.consent-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--teal-600);
  flex-shrink: 0;
}

/* ================================================================
   Review summary (new patient step 5)
   ================================================================ */

.review-summary {
  margin-bottom: 1rem;
}

.review-section {
  margin-bottom: 1.5rem;
}

.review-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--teal-100);
}

.review-table {
  width: 100%;
  border-collapse: collapse;
}

.review-table td {
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.review-label {
  font-weight: 500;
  color: var(--gray-500);
  width: 140px;
  white-space: nowrap;
}

/* ================================================================
   Search results (existing patient lookup)
   ================================================================ */

.search-results {
  margin-top: 2rem;
}

.search-results h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.75rem;
}

.patient-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.patient-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.15s;
}

.patient-result-card:hover {
  border-color: var(--teal-500);
}

.patient-result-info {
  display: flex;
  flex-direction: column;
}

.patient-result-info strong {
  font-size: 1rem;
  color: var(--gray-800);
}

/* ================================================================
   Complete/thank-you screen
   ================================================================ */

.kiosk-complete {
  text-align: center;
  padding: 4rem 1rem;
}

.complete-icon {
  margin-bottom: 1.5rem;
}

.kiosk-complete h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--teal-700);
  margin-bottom: 0.5rem;
}

.kiosk-complete p {
  font-size: 1.15rem;
  color: var(--gray-600);
  margin-bottom: 0.5rem;
}

.redirect-notice {
  font-size: 0.875rem !important;
  color: var(--gray-400) !important;
  margin-top: 2rem !important;
}

/* ================================================================
   Alerts
   ================================================================ */

.alert {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ================================================================
   Auth status (setup page)
   ================================================================ */

.auth-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.auth-connected {
  background: var(--green-50);
}

.auth-icon {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-600);
  flex-shrink: 0;
}

.auth-info {
  flex: 1;
}

.auth-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-800);
}

/* ================================================================
   Practice picker (setup page)
   ================================================================ */

.practice-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.practice-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

.practice-option:hover {
  border-color: var(--teal-500);
  background: var(--teal-50);
}

.practice-option input[type="radio"] {
  width: auto;
  accent-color: var(--teal-600);
}

.practice-option-info {
  display: flex;
  flex-direction: column;
}

.practice-option-info strong {
  font-size: 0.95rem;
  color: var(--gray-800);
}

.practice-option-info .help {
  margin: 0;
  font-size: 0.825rem;
}

/* ================================================================
   Spinner (htmx/loading indicator)
   ================================================================ */

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn-secondary .spinner {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--gray-600);
}

.htmx-request .spinner,
.htmx-request.spinner {
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   Footer
   ================================================================ */

.kiosk-footer {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.kiosk-footer p {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* ================================================================
   Lookup form
   ================================================================ */

.lookup-form {
  margin-top: 1rem;
}

/* ================================================================
   Field validation error state
   ================================================================ */

input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field-error-msg {
  color: var(--red-600);
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

/* ================================================================
   Responsive adjustments
   ================================================================ */

@media (max-width: 640px) {
  .kiosk-form-grid {
    grid-template-columns: 1fr;
  }

  .form-group-wide {
    grid-column: auto;
  }

  .conditions-grid {
    grid-template-columns: 1fr;
  }

  .kiosk-choices {
    flex-direction: column;
    align-items: stretch;
  }

  .kiosk-choice-btn {
    min-width: auto;
  }

  .kiosk-nav {
    flex-direction: column;
  }

  .kiosk-nav .btn {
    width: 100%;
  }

  .step-dot {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
  }

  .patient-result-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .review-label {
    width: auto;
    white-space: normal;
  }

  .actions {
    flex-direction: column;
  }

  .btn {
    justify-content: center;
  }
}

/* Large tablet kiosk mode: use more generous spacing */
@media (min-width: 768px) {
  .kiosk-welcome {
    padding: 4rem 2rem;
  }

  .kiosk-choice-btn {
    padding: 2.5rem 3rem;
  }

  .kiosk-complete {
    padding: 5rem 2rem;
  }
}

/* ================================================================
   Picker placeholder screens (escape-kiosk#15)
   ================================================================ */

.kiosk-placeholder {
  text-align: center;
  padding: 3.5rem 1.25rem 2rem;
  max-width: 560px;
  margin: 0 auto;
}

.kiosk-placeholder-icon {
  margin-bottom: 1.25rem;
}

.kiosk-placeholder h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.35rem;
}

.kiosk-placeholder-lede {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--teal-700);
  margin-bottom: 1rem;
}

.kiosk-placeholder .help {
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.kiosk-placeholder-actions {
  display: flex;
  justify-content: center;
}

.kiosk-placeholder-actions .btn {
  min-width: 220px;
}

/* ================================================================
   Reset / Clear-my-data bar (escape-kiosk#15)

   Anchored to the bottom of the viewport on every screen EXCEPT the
   home picker.  The main column reserves bottom padding so the bar
   never covers the last form field at the smallest tablet size.
   ================================================================ */

body.kiosk-has-reset .kiosk-container {
  padding-bottom: 6rem;
}

.kiosk-reset-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(250, 250, 249, 0.96) 60%, rgba(250, 250, 249, 0));
  display: flex;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
}

.kiosk-reset-btn {
  pointer-events: auto;
  /* Min 64px tall for a comfortable adult-finger target on a tablet.
     Slightly higher than .btn-lg's 52px so this stays the obvious
     escape hatch even when there's a primary submit button nearby. */
  min-height: 64px;
  padding: 1rem 1.75rem;
  background: #fff;
  color: var(--red-700);
  border: 2px solid var(--red-500);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kiosk-reset-btn:hover,
.kiosk-reset-btn:focus {
  background: var(--red-50);
  border-color: var(--red-600);
  color: var(--red-700);
}

.kiosk-reset-btn svg {
  color: var(--red-600);
}

/* ================================================================
   New-patient intake (escape-kiosk#17)
   ================================================================ */

.np-screen-reader-only {
  /* Visually hidden, still announced by screen readers.  Used for the
     overall <h2> on the new-patient screen so AT users hear a name
     for the page without the visual h2 cluttering the form. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kiosk-newpatient .form-step h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
  text-transform: none;
  letter-spacing: 0;
}

.kiosk-newpatient fieldset {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.25rem;
}

.kiosk-newpatient fieldset legend {
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Insurance card photo slots --- */

.np-card-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.np-card-slot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--gray-50);
}

.np-card-slot label {
  margin-bottom: 0;
}

/* The native file input renders consistently across tablets when
   left in its OS-supplied form -- styling it would break the
   capture="environment" camera-launch UX on iOS.  Constrain its
   size so the layout doesn't jump when a long filename comes back. */
.np-card-slot input[type="file"] {
  font-size: 0.9rem;
  padding: 0.4rem 0;
  max-width: 100%;
}

.np-card-status {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.np-card-captured {
  color: var(--teal-700);
  font-weight: 500;
}

.np-card-empty {
  color: var(--gray-400);
  font-style: italic;
}

.np-card-clear {
  align-self: flex-start;
}

/* --- Signature pad --- */

.np-signature-wrap {
  position: relative;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff;
  /* The canvas paints into the full box.  Aspect ratio keeps the
     pad legible on portrait tablets without forcing inline
     min-height tuning per device size. */
  aspect-ratio: 4 / 1;
  overflow: hidden;
}

.np-signature-pad {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  /* Disable touch panning so finger-drag draws instead of scrolling. */
  touch-action: none;
}

.np-signature-clear {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
}

.np-signature-error {
  margin-top: 0.5rem;
}

/* --- Spinner inside the new-patient submit button (white on teal) --- */
.kiosk-newpatient #np-submit-btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}

@media (max-width: 640px) {
  .np-card-photos {
    grid-template-columns: 1fr;
  }
  .np-signature-wrap {
    aspect-ratio: 3 / 1;
  }
}

/* ================================================================
   Tablet pairing — QR scanner viewport
   ================================================================ */

.pair-card {
  /* Give the scanner enough room without forcing the page off-screen
     on portrait tablets. */
  max-width: 720px;
}

.qr-scanner {
  /* html5-qrcode injects a <video> + overlay <canvas> here. Pin a
     stable aspect ratio so the layout doesn't pop when the stream
     attaches. */
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--gray-900);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1.5rem;
  position: relative;
}

.qr-scanner video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}