/* VignetteGo Dark Theme Styles */

/* Utility classes */
.hidden { display: none !important; }
.wizard-step.hidden { display: none !important; }
.wizard-step:not(.hidden) { display: block !important; }

/* Minimal utility styles (Tailwind-friendly) */
.step-badge{padding:.4rem .6rem;border-radius:.5rem;background:#f3f4f6}
.step-badge.active{background:#111827;color:#fff}
.step-card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:1rem}
.wizard-step{
  padding:1rem 0;
  margin-bottom:1rem;
  display: block;
}
.wizard-step.hidden {
  display: none !important;
}
.wizard-step:not(.hidden) {
  display: block !important;
}
.chip{padding:.4rem .6rem;border:1px solid #d1d5db;border-radius:999px}
.chip.active{background:#111827;color:#fff;border-color:#111827}
.btn-primary{background:#111827;color:#fff;padding:.6rem 1rem;border-radius:.75rem}
.btn-muted{background:#4b5563;color:#fff;padding:.6rem 1rem;border-radius:.75rem}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:1rem}

/* Dark foundation */
.vg-dark {
  color-scheme: dark;
  color: #E5E7EB;                     /* text-gray-200 */
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(99,102,241,.18), transparent 60%),
    #0B1220;  
}
.vg-dark ::selection { background:#2563EB; color:#fff; }

/* Cards, panels, sticky recap */
.vg-dark .step-card,
.vg-dark .sticky,
.vg-dark .card,
.vg-dark #stripeMount {
  background:#0F172A;            /* slate-900 */
  border:1px solid #1F2937;      /* gray-800 */
  border-radius: 1rem;
}

/* Step badges & chips */
.vg-dark .step-badge { background:#111827; color:#E5E7EB; }
.vg-dark .step-badge.active { background:#2563EB; color:#fff; }
.vg-dark .chip { border:1px solid #374151; color:#E5E7EB; background:transparent; }
.vg-dark .chip.active { background:#2563EB; border-color:#2563EB; color:#fff; }

/* Buttons */
.vg-dark .btn-primary { background:#6366F1; color:#fff; }
.vg-dark .btn-primary:hover { background:#7C83F6; }
.vg-dark .btn-muted { background:#374151; color:#fff; }
.vg-dark .btn-muted:hover { background:#4B5563; }

/* Inputs / selects / textareas */
.vg-dark input,
.vg-dark select,
.vg-dark textarea {
  background:#111827;            /* gray-900 */
  color:#F9FAFB;                 /* white-ish */
  border:1px solid #374151;      /* gray-700 */
  border-radius: 0.75rem;
}
.vg-dark input::placeholder,
.vg-dark textarea::placeholder { color:#9CA3AF; } /* gray-400 */

/* Focus states (accessibility) */
.vg-dark input:focus,
.vg-dark select:focus,
.vg-dark textarea:focus,
.vg-dark .btn-primary:focus,
.vg-dark .btn-muted:focus {
  outline: 2px solid #2563EB;
  outline-offset: 0;
  border-color:#2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* Checkbox / radio accent */
.vg-dark input[type=checkbox],
.vg-dark input[type=radio] { accent-color:#2563EB; }

/* Utility overrides for better contrast */
.vg-dark .text-gray-500 { color:#9CA3AF !important; }  /* lighter gray */
.vg-dark .text-gray-700 { color:#E5E7EB !important; }  /* almost white */
.vg-dark .border { border-color:#1F2937 !important; }

/* Header strip */
.vg-dark h1, .vg-dark h2, .vg-dark h3 { color:#F8FAFC; } /* text-slate-50 */

.vg-dark .bg-white { background:#0F172A !important; }  /* no more white in dark mode */
.vg-dark .border   { border-color:#1F2937 !important; }

/* Status badges in dark mode */
.vg-dark .bg-green-100 { background:#065F46 !important; }
.vg-dark .text-green-800 { color:#A7F3D0 !important; }
.vg-dark .bg-yellow-100 { background:#92400E !important; }
.vg-dark .text-yellow-800 { color:#FDE68A !important; }
.vg-dark .bg-blue-100 { background:#1E3A8A !important; }
.vg-dark .text-blue-800 { color:#BFDBFE !important; }
.vg-dark .bg-gray-100 { background:#374151 !important; }
.vg-dark .text-gray-800 { color:#D1D5DB !important; }

/* Additional UI enhancements */
.vg-dark .hover\:bg-gray-800:hover { background-color: rgba(31, 41, 55, 0.5) !important; }
.vg-dark .hover\:bg-gray-700:hover { background-color: rgba(55, 65, 81, 1) !important; }
.vg-dark .hover\:bg-gray-500:hover { background-color: rgba(107, 114, 128, 1) !important; }

/* Transitions for smooth interactions */
.vg-dark .transition-colors { transition-property: color, background-color, border-color; transition-duration: 0.15s; }

/* Table improvements */
.vg-dark table { border-collapse: separate; border-spacing: 0; }
.vg-dark .border-b { border-bottom-width: 1px; }
.vg-dark .border-gray-800 { border-color: #1F2937 !important; }
.vg-dark .border-gray-700 { border-color: #374151 !important; }

/* Form file inputs */
.vg-dark input[type="file"] {
  background: #111827;
  color: #F9FAFB;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
}

.vg-dark input[type="file"]::-webkit-file-upload-button {
  background: #4B5563;
  color: #F9FAFB;
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
}

.vg-dark input[type="file"]::-webkit-file-upload-button:hover {
  background: #6B7280;
}

/* International Tel Input Dark Theme */
.vg-dark .iti {
  width: 100%;
}

.vg-dark .iti__flag-container {
  background: #111827;
  border: 1px solid #374151;
  border-right: none;
  border-radius: 0.75rem 0 0 0.75rem;
}

.vg-dark .iti__selected-flag {
  background: #111827;
  border: none;
  padding: 0 8px;
}

.vg-dark .iti__selected-flag:hover {
  background: #1F2937;
}

.vg-dark .iti__country-list {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  max-height: 200px;
  overflow-y: auto;
}

.vg-dark .iti__country {
  color: #F9FAFB;
  padding: 8px 12px;
}

.vg-dark .iti__country:hover {
  background: #1F2937;
}

.vg-dark .iti__country.iti__highlight {
  background: #2563EB;
  color: #fff;
}

.vg-dark .iti__country-name {
  color: #E5E7EB;
}

.vg-dark .iti__dial-code {
  color: #9CA3AF;
}

.vg-dark .iti__search-input {
  background: #1F2937;
  border: 1px solid #374151;
  color: #F9FAFB;
  border-radius: 0.375rem;
  padding: 6px 10px;
  margin: 8px;
  width: calc(100% - 16px);
}

.vg-dark .iti__search-input::placeholder {
  color: #9CA3AF;
}

.vg-dark .iti__search-input:focus {
  border-color: #2563EB;
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.vg-dark .iti--allow-dropdown input {
  border-radius: 0 0.75rem 0.75rem 0;
  border-left: none;
  padding-left: 52px;
}

/* Error states for phone input */
.vg-dark .iti--allow-dropdown input.border-red-500 {
  border-color: #EF4444;
}

.vg-dark .iti--allow-dropdown input.border-red-500 + .iti__flag-container {
  border-color: #EF4444;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .vg-dark .step-card {
    padding: 0.75rem;
  }
  
  .vg-dark .text-2xl {
    font-size: 1.5rem;
  }
  
  .vg-dark .text-3xl {
    font-size: 1.875rem;
  }
  
  .vg-dark .iti__country-list {
    max-height: 150px;
  }
}