/* =========================
   THEME: LIQUID GLASS
   ========================= */

.ppcf-form.ppcf-theme-glass {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
}

.ppcf-theme-glass .ppcf-field label,
.ppcf-theme-glass .ppcf-checkbox-label {
  color: rgba(255, 255, 255, 0.92);
}

.ppcf-theme-glass .ppcf-field input:not([type="checkbox"]):not([type="radio"]),
.ppcf-theme-glass .ppcf-field textarea,
.ppcf-theme-glass .ppcf-field select {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

.ppcf-theme-glass .ppcf-field input::placeholder,
.ppcf-theme-glass .ppcf-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.ppcf-theme-glass .ppcf-field input:focus,
.ppcf-theme-glass .ppcf-field textarea:focus,
.ppcf-theme-glass .ppcf-field select:focus {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
}

.ppcf-theme-glass .ppcf-error {
  color: rgba(251, 113, 133, 0.95);
}

/* Buttons */
.ppcf-theme-glass .ppcf-submit,
.ppcf-theme-glass .ppcf-next {
  background: linear-gradient(135deg, rgba(56,189,248,0.85), rgba(99,102,241,0.85));
  color: rgba(255,255,255,0.96);
  box-shadow: 0 18px 36px rgba(0,0,0,0.30);
}

.ppcf-theme-glass .ppcf-prev {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Progress */
.ppcf-theme-glass .ppcf-steps-progress-text {
  color: rgba(255, 255, 255, 0.82);
}

.ppcf-theme-glass .ppcf-progress-bar {
  background: rgba(255, 255, 255, 0.12);
}

.ppcf-theme-glass .ppcf-progress-fill {
  background: linear-gradient(90deg, rgba(56,189,248,0.95), rgba(99,102,241,0.95));
}

/* Bullets */
.ppcf-theme-glass .ppcf-bullet-btn {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
}

.ppcf-theme-glass .ppcf-bullet-index {
  background: rgba(56, 189, 248, 0.20);
  color: rgba(255, 255, 255, 0.94);
}

.ppcf-theme-glass .ppcf-bullet.is-active .ppcf-bullet-btn {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.35);
}

.ppcf-theme-glass .ppcf-bullet.is-complete .ppcf-bullet-index {
  background: rgba(34, 197, 94, 0.85);
  color: rgba(6, 18, 10, 0.95);
}

/* Blocks */
.ppcf-theme-glass .ppcf-block {
  /*background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);*/
  color: rgba(255, 255, 255, 0.88);
}

/* Modal */
.ppcf-theme-glass .ppcf-modal-backdrop {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
}

.ppcf-theme-glass .ppcf-modal-panel {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.40);
}

.ppcf-theme-glass .ppcf-modal-header {
  background: rgba(255, 255, 255, 0.08);
}

.ppcf-theme-glass .ppcf-modal-title,
.ppcf-theme-glass .ppcf-modal-body {
  color: rgba(255,255,255,0.92);
}

.ppcf-theme-glass .ppcf-modal-btn {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
}


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

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

  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.05);

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

/* Hover / focus states */
.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file > label:hover::after{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.25);
}

/* Focus ring when tabbing onto the hidden input */
.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file input[type="file"]:focus + .ppcf-error,
.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file input[type="file"]:focus-visible + .ppcf-error{
  outline: none;
}

/* This part is the accessibility hook: when input is focused, highlight the label */
.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file input[type="file"]:focus-visible ~ label::after{
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
  border-color: rgba(99,102,241,0.6);
}

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

.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file > label:not([data-ppcf-file-label])::after{
  content: "Drop file here or click to upload";
}


.ppcf-form.ppcf-theme-glass .ppcf-field.ppcf-field-file > label::after{
  text-align: center;
  border-style: dashed;
  padding: 18px 14px;
}