:root {
  --gize-primary: #00897b;
  --gize-accent: #ff9800;
  --gize-bg: #f6f8f7;
  --gize-surface: #ffffff;
  --gize-text: #222222;
  --gize-success: #2e7d32;
  --gize-danger: #c62828;
  --gize-radius: 8px;
}

body {
  background: radial-gradient(circle at 0% 0%, #e3f2fd, transparent 45%), var(--gize-bg);
  color: var(--gize-text);
  font-family: "Noto Sans Ethiopic", "Poppins", sans-serif;
}

.form-page {
  animation: gize-fade-in 260ms ease-out;
}

@keyframes gize-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gize-scanner-wrap {
  position: relative;
  border-radius: var(--gize-radius);
  overflow: hidden;
  min-height: 240px;
  background: #111;
}

.gize-scanner-video {
  width: 100%;
  min-height: 240px;
  object-fit: cover;
}

.gize-scan-indicator {
  position: absolute;
  inset: 10% 12%;
  border: 2px solid var(--gize-accent);
  border-radius: 10px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.25);
}

.form-control,
.awesomplete input,
textarea,
select {
  min-height: 48px;
  border-radius: var(--gize-radius);
}

.btn-primary {
  background: var(--gize-primary);
  border-color: var(--gize-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: #007266;
  border-color: #007266;
}

@media (max-width: 640px) {
  .layout-main-section {
    padding: 12px;
  }

  .form-control,
  .btn {
    font-size: 16px;
  }
}

html[dir="rtl"] .form-column {
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}