/* ExamPicFix Professional Dark Mode Styles & Custom Controls */

/* Range Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #1E293B; /* slate-800 */
  border-radius: 9999px;
  outline: none;
  transition: all 0.2s ease;
}

input[type="range"]:focus {
  background: #334155; /* slate-700 */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6366F1; /* indigo-500 */
  cursor: pointer;
  border: 2px solid #0F172A; /* slate-900 */
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #818CF8; /* indigo-400 */
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.6);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6366F1;
  cursor: pointer;
  border: 2px solid #0F172A;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

/* Cropper Container Overrides (Dark Studio Aesthetic) */
.cropper-modal {
  background-color: rgba(2, 6, 23, 0.85) !important; /* slate-950 */
}

.cropper-view-box {
  outline: 2px solid #6366F1 !important;
  outline-color: rgba(99, 102, 241, 0.9) !important;
  border-radius: 4px;
}

.cropper-line {
  background-color: #6366F1 !important;
}

.cropper-point {
  background-color: #818CF8 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 2px;
}

.cropper-point.point-se {
  width: 11px !important;
  height: 11px !important;
  background-color: #A5B4FC !important;
}

/* Passport Photo Face Oval Alignment Guide */
.face-guide-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  height: 72%;
  border: 2px dashed rgba(129, 140, 248, 0.65);
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.4);
}

.face-guide-eyes {
  position: absolute;
  top: 42%;
  left: 10%;
  right: 10%;
  height: 1px;
  border-top: 1px dashed rgba(129, 140, 248, 0.7);
}

.face-guide-chin {
  position: absolute;
  bottom: 8%;
  left: 25%;
  right: 25%;
  height: 1px;
  border-top: 1px dashed rgba(129, 140, 248, 0.7);
}

/* Drag & Drop Visual State */
.drag-over {
  border-color: #6366F1 !important;
  background-color: rgba(99, 102, 241, 0.12) !important;
  transform: scale(1.008);
}

/* Metric Range Meter Gradient */
.gauge-gradient {
  background: linear-gradient(to right, #EF4444 0%, #10B981 20%, #10B981 80%, #EF4444 100%);
}

/* Checkmark Pop Animation */
@keyframes checkPop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-check-pop {
  animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Custom Dark Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #020617; /* slate-950 */
}

::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}