@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-primary: #FAF7F2;
  --bg-secondary: #FFFFFF;
  --bg-surface: #FFFFFF;
  --border-color: #E8EAEF;
  --border-glow: rgba(255, 107, 53, 0.2);

  --primary: #FF6B35;
  --primary-hover: #E85A2A;
  --primary-glow: rgba(255, 107, 53, 0.25);

  --success: #14B8A6;
  --success-bg: rgba(20, 184, 166, 0.1);
  --error: #EF4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);

  --text-primary: #1A1F36;
  --text-muted: #7A85A8;
  --text-dark: #5A6491;

  --transition-speed: 0.3s;
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header & Footer Styling */
header {
  border-bottom: 1px solid var(--border-color);
  background-color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo span {
  background: linear-gradient(135deg, #a78bfa 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--primary) 0%, #10b981 100%);
  border-radius: 6px;
  display: inline-block;
}

.nav-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.user-badge {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Main Layout */
main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Card / Container */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 4px 20px rgba(26, 31, 54, 0.06);
  transition: transform var(--transition-speed), border-color var(--transition-speed);
}

.card:hover {
  border-color: var(--border-glow);
}

.card-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.card-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Forms & Inputs */
.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

input:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Buttons */
.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 12px var(--primary-glow);
}

.btn:disabled {
  background: var(--bg-secondary);
  color: var(--text-dark);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: #F3F4F6;
  box-shadow: none;
}

.btn-danger {
  background: var(--error);
}
.btn-danger:hover {
  background: #DC2626;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* Steps / Verification Flow UI */
.step-container {
  display: none;
}

.step-container.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-bar-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.progress-step {
  height: 4px;
  flex: 1;
  background: var(--border-color);
  border-radius: 2px;
}

.progress-step.active {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.progress-step.completed {
  background: var(--success);
}

/* ID Upload Area */
.upload-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-speed), background var(--transition-speed);
  position: relative;
  background: #F9FAFB;
}

.upload-dropzone:hover {
  border-color: var(--primary);
  background: #FFF5F2;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.upload-text {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.upload-text span {
  color: var(--primary);
  font-weight: 500;
}

.preview-container {
  margin-top: 1rem;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: none;
  border: 1px solid var(--border-color);
  max-height: 200px;
  background: #FFFFFF;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(26, 31, 54, 0.7);
  border: none;
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Camera UI for Selfie Capture */
.camera-container {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #F3F4F6;
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 1rem;
}

.camera-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror camera stream */
}

/* Guide Overlay for Face Capture */
.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.face-oval {
  width: 50%;
  height: 65%;
  border: 2px dashed rgba(90, 100, 145, 0.5);
  border-radius: 50%/45%;
  box-shadow: 0 0 0 1000px rgba(250, 247, 242, 0.55);
  position: relative;
  transition: border-color 0.3s;
}

.face-oval.aligned {
  border-color: var(--success);
  border-style: solid;
  box-shadow: 0 0 0 1000px rgba(20, 184, 166, 0.1);
}

.camera-instruction {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 0.5rem 1.25rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  width: 80%;
  box-shadow: 0 4px 12px rgba(26, 31, 54, 0.1);
  border: 1px solid var(--border-color);
}

.challenge-indicator {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #FFFFFF;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Status Screen */
.status-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.status-icon.pending {
  background: #FFF7ED;
  color: #D97706;
  animation: rotateClockwise 2.5s linear infinite;
}

.status-icon.approved {
  background: #F0FDFA;
  color: #14B8A6;
}

.status-icon.rejected {
  background: #FEF2F2;
  color: #EF4444;
}

@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-text {
  font-weight: 600;
  font-size: 1.5rem;
}

.status-badge {
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 700;
}

.status-badge.pending { background: var(--warning); color: #000; }
.status-badge.approved { background: var(--success); color: #000; }
.status-badge.rejected { background: var(--error); color: #fff; }

.rejection-reason-box {
  background: #FEF2F2;
  border: 1px solid rgba(239, 68, 68, 0.15);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  color: #B91C1C;
  font-size: 0.9rem;
  max-width: 100%;
}

/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  display: none;
}

.alert-error {
  background: #FEF2F2;
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #B91C1C;
}

.alert-success {
  background: #F0FDFA;
  border: 1px solid rgba(20, 184, 166, 0.2);
  color: #0F766E;
}

/* ADMIN PANEL DESIGN */
.admin-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  width: 100%;
  align-items: stretch;
}

.admin-sidebar {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  height: fit-content;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.admin-main {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.5rem;
}

.submission-item {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  background: #F9FAFB;
}

.submission-item:hover,
.submission-item.active {
  background: #FFF5F2;
  border-color: var(--primary);
}

.submission-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.submission-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

/* Admin Details Section */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.detail-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

.doc-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.admin-doc-box {
  background: #F9FAFB;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
}

.admin-doc-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
  margin-bottom: 0.5rem;
}

.admin-doc-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.check-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.check-results-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.check-results-table td.label {
  color: var(--text-muted);
  font-weight: 500;
  width: 35%;
}

.check-results-table tr:last-child td {
  border-bottom: none;
}

.badge-passed {
  color: var(--success);
  background: var(--success-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}

.badge-failed {
  color: var(--error);
  background: var(--error-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}

.action-card {
  background: #FFF5F2;
  border: 1px solid rgba(255, 107, 53, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.audit-log-list {
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.8rem;
}

.audit-log-item {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.audit-log-item:last-child {
  border-bottom: none;
}

.audit-log-time {
  color: var(--text-dark);
  font-size: 0.75rem;
}

@media(max-width: 900px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    max-height: 200px;
  }
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Guide Overlay for ID Document Capture */
.card-rectangle {
  width: 75%;
  height: 50%;
  border: 2px dashed rgba(90, 100, 145, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 0 1000px rgba(250, 247, 242, 0.55);
  position: relative;
  transition: border-color 0.3s;
}

.card-rectangle.aligned {
  border-color: var(--success);
  border-style: solid;
  box-shadow: 0 0 0 1000px rgba(20, 184, 166, 0.1);
}

/* Document Selection Cards */
.doc-options-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.doc-option-card {
  display: block;
  cursor: pointer;
  position: relative;
}

.doc-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.doc-option-content {
  background: #F9FAFB;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all var(--transition-speed);
}

.doc-option-card:hover .doc-option-content {
  border-color: var(--border-glow);
  background: #FFF5F2;
  transform: translateY(-2px);
}

.doc-option-card input[type="radio"]:checked + .doc-option-content {
  border-color: var(--primary);
  background: #FFF5F2;
  box-shadow: 0 0 12px var(--primary-glow);
}

.doc-icon {
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.doc-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.doc-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.loader-spinner {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1.5rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================
   CARD FLIP OVERLAY
   ============================================= */
.flip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(250, 247, 242, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flipOverlayIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes flipOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.flip-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  padding: 2rem;
}

.flip-label-top {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
  margin: 0;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.2s ease forwards;
}

.flip-label-bottom {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.5s ease forwards;
}

.flip-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.7s ease forwards;
}

.flip-hint strong {
  color: var(--primary);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 3D Card — sized to ID card proportions ---- */
.flip-card-3d {
  width: 340px;
  height: 215px;
  perspective: 900px;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.3s ease forwards;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cardFlipLoop 2.4s 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes cardFlipLoop {
  0%   { transform: rotateY(0deg); }
  15%  { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  55%  { transform: rotateY(180deg); }
  85%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Front face — official government ID colour */
.flip-card-front {
  background: linear-gradient(160deg, #0d3b6e 0%, #0a2a52 60%, #102d60 100%);
}

/* Back face is rotated 180deg already */
.flip-card-back {
  background: linear-gradient(160deg, #0a2d50 0%, #081e38 60%, #0c2845 100%);
  transform: rotateY(180deg);
  padding: 0;
  justify-content: flex-start;
}

/* ---- ID card layout shared ---- */
.flip-card-front,
.flip-card-back {
  font-family: 'Courier New', monospace;
}

/* ====================================================
   PREMIUM ID CARD — FRONT & BACK
   ==================================================== */

/* Card dimensions — ISO ID-1 proportions */
.flip-card-3d {
  width: 360px;
  height: 228px;
  perspective: 1100px;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.3s ease forwards;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cardFlipLoop 2.6s 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes cardFlipLoop {
  0%   { transform: rotateY(0deg); }
  15%  { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  55%  { transform: rotateY(180deg); }
  85%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

/* Shared face rules */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
}

/* ===== FRONT FACE ===== */
.flip-card-front {
  background:
    linear-gradient(135deg, #0c3776 0%, #082357 45%, #0e2e6a 100%);
}

/* ===== BACK FACE ===== */
.flip-card-back {
  background:
    linear-gradient(135deg, #091e40 0%, #071530 50%, #0b2048 100%);
  transform: rotateY(180deg);
}

/* --- Holographic watermark sheen (CSS pattern) --- */
.idc-holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0px,
      transparent 6px,
      rgba(255,255,255,0.025) 6px,
      rgba(255,255,255,0.025) 7px
    ),
    repeating-linear-gradient(
      35deg,
      transparent 0px,
      transparent 12px,
      rgba(100,180,255,0.04) 12px,
      rgba(100,180,255,0.04) 13px
    );
  border-radius: 12px;
  animation: holoShift 4s ease-in-out infinite alternate;
}

.idc-holo--back {
  background:
    repeating-linear-gradient(
      55deg,
      transparent 0px,
      transparent 5px,
      rgba(255,255,255,0.02) 5px,
      rgba(255,255,255,0.02) 6px
    );
}

@keyframes holoShift {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* All content sits above the watermark */
.flip-card-front > *:not(.idc-holo),
.flip-card-back  > *:not(.idc-holo) {
  position: relative;
  z-index: 1;
}

/* ===== HEADER BAND ===== */
.idc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.32);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Flag stripes */
.idc-flag {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.idc-flag-r, .idc-flag-w, .idc-flag-b {
  display: block;
  width: 5px;
  height: 18px;
  border-radius: 1.5px;
}
.idc-flag-r { background: #e63946; }
.idc-flag-w { background: rgba(255,255,255,0.85); }
.idc-flag-b { background: #3d8ef0; }

/* Header text block */
.idc-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.idc-issuer {
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.88);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

.idc-issuer-sub {
  font-size: 0.38rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  font-family: Arial, sans-serif;
  font-style: italic;
}

/* Government seal */
.idc-seal {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.idc-seal svg { width: 100%; height: 100%; }

/* ===== CARD BODY ===== */
.idc-body {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 10px 12px 8px;
  overflow: hidden;
}

/* --- Photo column --- */
.idc-photo-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.idc-photo {
  width: 68px;
  height: 86px;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.2) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.idc-face-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.idc-photo-bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

.idc-biometric-icon {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0;
}

/* Validity strip */
.idc-validity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.idc-validity-label {
  font-size: 0.35rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  font-family: Arial, sans-serif;
}

.idc-validity-date {
  font-size: 0.42rem;
  font-family: 'Courier New', monospace;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* --- Info column --- */
.idc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.idc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idc-row--split {
  flex-direction: row;
  gap: 10px;
}

.idc-row--split .idc-field {
  flex: 1;
}

.idc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idc-lbl {
  font-size: 0.36rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

/* Value placeholders (shimmer bars) */
.idc-val {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.16);
  width: 85%;
}
.idc-val--xl   { width: 100%; height: 7px; }
.idc-val--lg   { width: 78%; }
.idc-val--md   { width: 60%; }
.idc-val--sm   { width: 45%; }
.idc-val--xs   { width: 18%; }

/* Monospace text values */
.idc-val--mono {
  background: none;
  height: auto;
  font-size: 0.46rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.idc-val--bright { color: rgba(180,220,255,0.8); }

/* FRONT / BACK corner watermark tag */
.flip-card-side-tag {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 0.4rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.15);
  font-family: Arial, sans-serif;
}

/* ===================================================
   BACK FACE LAYOUT
   =================================================== */

/* Security magnetic strip */
.idc-mag-strip {
  width: 100%;
  height: 38px;
  background:
    linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  flex-shrink: 0;
  position: relative;
}

.idc-mag-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 18px,
    rgba(255,255,255,0.02) 18px,
    rgba(255,255,255,0.02) 19px
  );
}

/* Back body = two columns */
.idc-back-body {
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 8px 12px 6px;
  overflow: hidden;
}

.idc-back-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.idc-back-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* QR placeholder */
.idc-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.idc-qr-grid {
  width: 52px;
  height: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: 3px;
}

/* QR finder squares */
.idc-qr-finder {
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  position: relative;
}

.idc-qr-finder::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}

/* QR data (random dot pattern) */
.idc-qr-data {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.25) 0px,
    rgba(255,255,255,0.25) 2px,
    transparent 2px,
    transparent 5px
  );
  border-radius: 1px;
}

.idc-qr-label {
  font-size: 0.36rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  font-family: Arial, sans-serif;
  text-align: center;
  line-height: 1.3;
}

/* Barcode */
.idc-barcode {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 2px;
}

.idc-barcode-bars {
  width: 130px;
  height: 26px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.75) 0px,   rgba(255,255,255,0.75) 2px,
    transparent            2px,   transparent            3px,
    rgba(255,255,255,0.55) 3px,   rgba(255,255,255,0.55) 4px,
    transparent            4px,   transparent            5px,
    rgba(255,255,255,0.75) 5px,   rgba(255,255,255,0.75) 6px,
    transparent            6px,   transparent            8px,
    rgba(255,255,255,0.6)  8px,   rgba(255,255,255,0.6)  9px,
    transparent            9px,   transparent            11px,
    rgba(255,255,255,0.75) 11px,  rgba(255,255,255,0.75) 13px,
    transparent            13px,  transparent            14px,
    rgba(255,255,255,0.5)  14px,  rgba(255,255,255,0.5)  15px,
    transparent            15px,  transparent            17px,
    rgba(255,255,255,0.75) 17px,  rgba(255,255,255,0.75) 18px,
    transparent            18px,  transparent            19px,
    rgba(255,255,255,0.6)  19px,  rgba(255,255,255,0.6)  21px,
    transparent            21px,  transparent            22px,
    rgba(255,255,255,0.75) 22px,  rgba(255,255,255,0.75) 24px,
    transparent            24px,  transparent            26px
  );
}

.idc-barcode-num {
  font-size: 0.36rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
}

/* ===== MRZ ZONE ===== */
.idc-mrz {
  width: 100%;
  background: rgba(0,0,0,0.45);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 5px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.idc-mrz-label {
  font-size: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.idc-mrz-line {
  font-family: 'Courier New', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.4;
}

/* Progress bar */
.flip-progress {
  width: 220px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.9s ease forwards;
}

.flip-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light, #7c3aed));
  transition: width 0.1s linear;
}

/* =============================================
   SELFIE INTRO OVERLAY
   ============================================= */
.selfie-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(250, 247, 242, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flipOverlayIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.selfie-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
  padding: 2rem;
  max-width: 360px;
}

.selfie-intro-tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success);
  margin: 0;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.15s ease forwards;
}

.selfie-intro-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.55s ease forwards;
}

/* ---- Face scene container ---- */
.selfie-face-scene {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeSlideUp 0.5s 0.3s ease forwards;
}

/* ---- Orbiting ring + dot ---- */
.selfie-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: orbitSpin 2.8s linear infinite;
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.selfie-orbit-dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 14px 4px rgba(255, 107, 53, 0.5);
}

/* ---- Face oval wrapper (for corners) ---- */
.selfie-face-oval-wrap {
  position: relative;
  width: 158px;
  height: 158px;
}

/* ---- Face oval itself ---- */
.selfie-face-oval {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 107, 53, 0.45);
  background: rgba(255, 107, 53, 0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: faceOvalPulse 2s 1s ease-in-out infinite;
}

@keyframes faceOvalPulse {
  0%, 100% { border-color: rgba(255, 107, 53, 0.45); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
  50%       { border-color: rgba(255, 107, 53, 0.85);  box-shadow: 0 0 24px 6px rgba(255, 107, 53, 0.25); }
}

/* ---- Scan beam ---- */
 .selfie-scan-beam {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.9), transparent);
  box-shadow: 0 0 16px 4px rgba(255, 107, 53, 0.4);
  animation: scanBeam 1.8s 0.8s ease-in-out infinite;
}

@keyframes scanBeam {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ---- Face SVG icon ---- */
.selfie-face-icon {
  width: 80px;
  height: 90px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* ---- Corner brackets ---- */
.selfie-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #FF6B35;
  border-style: solid;
  border-width: 0;
}

.selfie-corner--tl { top: -1px;  left: -1px;  border-top-width: 3px; border-left-width: 3px;  border-top-left-radius: 4px; }
.selfie-corner--tr { top: -1px;  right: -1px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 4px; }
.selfie-corner--bl { bottom: -1px; left: -1px;  border-bottom-width: 3px; border-left-width: 3px;  border-bottom-left-radius: 4px; }
.selfie-corner--br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 4px; }

/* ---- Tip card ---- */
.selfie-intro-tips {
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.75s ease forwards;
}

.selfie-tip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #FFF5F2;
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 10px;
  padding: 0.75rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all 0.4s ease;
}

.selfie-tip-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- Progress bar ---- */
.selfie-intro-progress {
  width: 200px;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: fadeSlideUp 0.4s 0.95s ease forwards;
}

.selfie-intro-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6, #a78bfa);
  transition: width 0.1s linear;
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */
@media (max-width: 640px) {
  body {
    background-image:
      radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 40%);
  }

  .nav-container {
    padding: 0.75rem 1rem;
  }

  .logo {
    font-size: 1rem;
  }

  main {
    padding: 1rem;
    align-items: flex-start;
  }

  .card {
    padding: 1.25rem;
    max-width: 100%;
    border-radius: 12px;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-subtitle {
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
  }

  /* Camera containers optimized for portrait mobile */
  .camera-container {
    aspect-ratio: 3/4;
    border-radius: 10px;
  }

  .camera-instruction {
    bottom: 0.75rem;
    width: 95%;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }

  /* ID card rectangle guide */
  .card-rectangle {
    width: 85%;
    height: 45%;
    border-radius: 8px;
  }

  /* Face oval guide */
  .face-oval {
    width: 60%;
    height: 50%;
  }

  .face-oval.aligned {
    box-shadow: 0 0 0 1000px rgba(16, 185, 129, 0.12);
  }

  /* Challenge indicator */
  .challenge-indicator {
    top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
  }

  /* Buttons */
  .btn {
    width: 100%;
    min-height: 48px;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  /* Flip overlay */
  .flip-overlay-content {
    padding: 1rem;
    gap: 0.8rem;
  }

  .flip-card-3d {
    width: 280px;
    height: 178px;
    perspective: 700px;
  }

  .flip-label-top {
    font-size: 0.75rem;
  }

  .flip-label-bottom {
    font-size: 1.1rem;
  }

  .flip-hint {
    font-size: 0.8rem;
  }

  .flip-progress {
    width: 160px;
  }

  /* Selfie intro overlay */
  .selfie-intro-content {
    padding: 1.25rem;
    gap: 1rem;
    max-width: 300px;
  }

  .selfie-face-scene {
    width: 160px;
    height: 160px;
  }

  .selfie-face-oval-wrap {
    width: 130px;
    height: 130px;
  }

  .selfie-face-icon {
    width: 65px;
    height: 75px;
  }

  .selfie-intro-title {
    font-size: 1.2rem;
  }

  .selfie-tip {
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
  }

  .selfie-intro-progress {
    width: 160px;
  }

  .selfie-corner {
    width: 14px;
    height: 14px;
  }

  /* Document options */
  .doc-option-content {
    padding: 1rem 1.25rem;
  }

  .doc-icon {
    font-size: 1.5rem;
  }

  .doc-title {
    font-size: 0.9rem;
  }

  .doc-desc {
    font-size: 0.75rem;
  }

  /* Status screen */
  .status-icon {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }

  .status-text {
    font-size: 1.25rem;
  }

  /* Form elements */
  .form-group {
    margin-bottom: 1rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select {
    padding: 0.65rem 0.875rem;
    font-size: 0.9rem;
  }

  /* Progress bar */
  .progress-bar-container {
    margin-bottom: 1.25rem;
  }

  /* ID card detail typography scaling */
  .idc-issuer {
    font-size: 0.45rem;
  }

  .idc-issuer-sub {
    font-size: 0.32rem;
  }

  .idc-photo {
    width: 55px;
    height: 70px;
  }

  .idc-mag-strip {
    height: 28px;
  }

  .idc-barcode-bars {
    width: 100px;
    height: 20px;
  }

  /* Make action rows stack */
  #stepIdCamera > div[style*="display: flex"],
  #stepSelfie > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  #stepIdCamera > div[style*="display: flex"] button,
  #stepSelfie > div[style*="display: flex"] button {
    flex: none !important;
    width: 100%;
  }
}