/* =========================
   THEME: DARK
   ========================= */

.ppcf-form.ppcf-theme-dark {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  border-radius: 18px;
  padding: 18px;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

.ppcf-theme-dark .ppcf-field label,
.ppcf-theme-dark .ppcf-checkbox-label {
  color: rgba(226, 232, 240, 0.90);
}

.ppcf-theme-dark .ppcf-required {
  color: rgba(148, 163, 184, 0.9);
}

.ppcf-theme-dark .ppcf-field input:not([type="checkbox"]):not([type="radio"]),
.ppcf-theme-dark .ppcf-field textarea,
.ppcf-theme-dark .ppcf-field select {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.55);
  color: rgba(226, 232, 240, 0.92);
}

.ppcf-theme-dark .ppcf-field input::placeholder,
.ppcf-theme-dark .ppcf-field textarea::placeholder {
  color: rgba(148, 163, 184, 0.75);
}

.ppcf-theme-dark .ppcf-field input:focus,
.ppcf-theme-dark .ppcf-field textarea:focus,
.ppcf-theme-dark .ppcf-field select:focus {
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22);
}

.ppcf-theme-dark .ppcf-error {
  color: #fb7185;
}

.ppcf-theme-dark .ppcf-submit,
.ppcf-theme-dark .ppcf-next {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 14px 26px rgba(99, 102, 241, 0.22);
}

.ppcf-theme-dark .ppcf-prev {
  background: rgba(226, 232, 240, 0.10);
  color: rgba(226, 232, 240, 0.90);
}

.ppcf-theme-dark .ppcf-steps-progress-text {
  color: rgba(226, 232, 240, 0.78);
}

.ppcf-theme-dark .ppcf-progress-bar {
  background: rgba(226, 232, 240, 0.10);
}

.ppcf-theme-dark .ppcf-progress-fill {
  background: #6366f1;
}

.ppcf-theme-dark .ppcf-bullet-btn {
  background: rgba(226, 232, 240, 0.08);
  border-color: rgba(226, 232, 240, 0.12);
  color: rgba(226, 232, 240, 0.86);
}

.ppcf-theme-dark .ppcf-bullet-index {
  background: rgba(99, 102, 241, 0.18);
  color: rgba(199, 210, 254, 0.95);
}

.ppcf-theme-dark .ppcf-bullet.is-active .ppcf-bullet-btn {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.38);
}

.ppcf-theme-dark .ppcf-bullet.is-complete .ppcf-bullet-index {
  background: #22c55e;
  color: #06120a;
}

/* Content blocks */
.ppcf-theme-dark .ppcf-block {
  /*background: rgba(226, 232, 240, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.10);*/
  color: rgba(226, 232, 240, 0.90);
}

/* Modal */
.ppcf-theme-dark .ppcf-modal-backdrop {
  background: rgba(0,0,0,0.55);
}

.ppcf-theme-dark .ppcf-modal-panel {
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 28px 70px rgba(0,0,0,0.60);
}

.ppcf-theme-dark .ppcf-modal-header {
  background: rgba(226, 232, 240, 0.06);
}

.ppcf-theme-dark .ppcf-modal-title {
  color: rgba(226, 232, 240, 0.92);
}

.ppcf-theme-dark .ppcf-modal-body {
  color: rgba(226, 232, 240, 0.82);
}

.ppcf-theme-dark .ppcf-modal-close {
  color: rgba(226, 232, 240, 0.85);
}

.ppcf-theme-dark .ppcf-modal.is-success .ppcf-modal-header {
  background: rgba(34, 197, 94, 0.12);
}
.ppcf-theme-dark .ppcf-modal.is-error .ppcf-modal-header {
  background: rgba(244, 63, 94, 0.14);
}

.ppcf-theme-dark .ppcf-modal-btn {
  background: rgba(226, 232, 240, 0.10);
  color: rgba(226, 232, 240, 0.90);
}


/* ================================
   Dark theme - modern file upload
   ================================ */

/* Create a “button + filename” row using a pseudo element */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file > label::after{
  content: attr(data-ppcf-file-label);
  display: block;

  margin-top: 8px;
  padding: 18px 14px;
  border-radius: 12px;

  text-align: center;
  border-style: dashed;

  /* dark theme colors */
  color: rgba(255,255,255,0.88);
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);

  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

/* Placeholder text when no filename is set */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file > label:not([data-ppcf-file-label])::after{
  content: "Drop file here or click to upload";
  color: rgba(255,255,255,0.72);
}

/* Hover / focus states */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file > label:hover::after{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

/* Drag-over state (if you add .is-dragover to the wrapper like your JS does) */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file.is-dragover > label::after{
  background: rgba(99,102,241,0.14);
  border-color: rgba(99,102,241,0.65);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.20);
}

/* Focus ring when tabbing onto the hidden input */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file input[type="file"]:focus-visible ~ label::after{
  box-shadow: 0 0 0 3px rgba(99,102,241,0.28);
  border-color: rgba(99,102,241,0.75);
}

/* Make label click open the file dialog */
.ppcf-form.ppcf-theme-dark .ppcf-field.ppcf-field-file > label{
  cursor: pointer;
}