/* Structure only — inherits theme fonts/colors */
.surveyflow-form { margin: 1rem 0; }
.surveyflow-page { margin-bottom: 1rem; }
.surveyflow-section { margin: .5rem 0 1rem; }
.surveyflow-section h3 { margin: 0 0 .25rem; }
.surveyflow-section .sf-desc { margin: 0; opacity: .85; }

.surveyflow-question { margin: .75rem 0; }
.surveyflow-question .sf-label { display:block; margin-bottom:.25rem; }
.surveyflow-question .sf-input,
.surveyflow-question textarea,
.surveyflow-question select { width:100%; max-width:100%; box-sizing:border-box; }

.surveyflow-media { margin: .5rem 0; }
.surveyflow-media img { max-width:100%; height:auto; display:block; }

.surveyflow-nav { display:flex; gap:.5rem; margin-top: 1rem; }
.surveyflow-message { margin-top: 1rem; }

.sf-option { display:inline-flex; align-items:center; gap:.35rem; }
.sf-other { margin-left:.35rem; }


/* === SurveyFlow Page Transitions === */
.surveyflow-page {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: none;
}

.surveyflow-page.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Slide animations */
.surveyflow-page.slide-out {
  opacity: 0;
  transform: translateX(-30px);
}

.surveyflow-page.slide-in {
  opacity: 0;
  transform: translateX(30px);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .surveyflow-page {
    transition: none !important;
    transform: none !important;
  }
}
/* Navigation buttons */
.surveyflow-nav {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.surveyflow-nav .button {
    font-size: 15px;
    line-height: 1.4;
    padding: 8px 16px;
}

/* =========================
   Validation / Error UI
   ========================= */

/* Highlight invalid question block */
.surveyflow-question.has-error {
    border-left: 3px solid #cc0000;   /* subtle red indicator */
    padding-left: 10px;
    margin-bottom: 12px;
}

/* The inline error message */
.surveyflow-error-msg {
    font-size: 13px;
    color: #cc0000;
    margin-top: 4px;
    display: block;
}

/* Inputs marked aria-invalid="true" */
.surveyflow-question [aria-invalid="true"] {
    outline: none !important;
    border-color: #cc0000 !important;
    box-shadow: 0 0 0 1px #cc0000 !important;
}

/* Error styling for select, textarea, input */
.surveyflow-question.has-error input,
.surveyflow-question.has-error select,
.surveyflow-question.has-error textarea {
    border-color: #cc0000;
}
.surveyflow-question.has-error .sf-label {
    color: #cc0000;
}


/* Better spacing after radio/checkbox error */
.surveyflow-question.has-error .sf-option:last-of-type {
    margin-bottom: 4px;
}


/* Required asterisk */
.surveyflow-required {
    color: inherit; /* inherits theme color */
    font-weight: bold;
}

/* Hidden progress bar (enabled later) */
.surveyflow-progress {
    display: none; /* enabled by JS later */
    height: 6px;
    background: #e5e5e5;
    margin-bottom: 16px;
    border-radius: 3px;
    overflow: hidden;
}

.surveyflow-progress-bar {
    height: 100%;
    width: 0;
    background: #007cba; /* WP primary blue */
    transition: width .3s ease;
}