/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
.accua-form {
  /* Input border color - themes can override this variable */
  /* Using explicit color instead of currentColor to avoid issues with */
  /* inputs that use color:transparent for placeholder hiding (date fields) */
  --accua-form-input-border-color: #111;
}

/* Modern accessible spinner - replaces old gif spinner */
.accua_form_api_throbbler {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: accua-spinner-rotate 0.75s linear infinite;
  vertical-align: middle;
  opacity: 0.7;
}

/* Reduce motion for users who prefer it (EAA compliance) */
@media (prefers-reduced-motion: reduce) {
  .accua_form_api_throbbler {
    animation: none;
    opacity: 0.5;
  }
}

@keyframes accua-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

div.pfbc-error {
  background-color: #fff;
  border: 1px solid #ef9a9a;
  border-left-width: 4px;
  color: #c62828;
  padding: 1em 1.25em;
  margin: 1em 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pfbc-error-heading {
  display: block;
  font-size: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: #c62828;
}

.pfbc-error-list {
  margin: 0.5em 0 0;
  padding-left: 1.5em;
  color: #d32f2f;
}

/* Inline field errors with ARIA support - Modern 2025 Design
 * WCAG 2.2 / European Accessibility Act compliant:
 * - Adequate spacing for cognitive accessibility
 * - Minimum readable font size (13px)
 * - Proper contrast ratio (4.5:1+)
 * - Icon + text for non-color-only error indication
 * - Fast, smooth animation with height transition for fields below
 */
.pfbc-inline-error {
  color: #d32f2f;
  padding: 0;
  margin-top: 0.375em;
  /* ~6px breathing room below input */
  font-size: 0.8125rem;
  /* 13px - consistent sizing regardless of parent */
  line-height: 1.4;
  /* Better readability per WCAG */
  display: flex;
  align-items: center;
  gap: 0.375em;
  /* Better icon-text separation */
  max-height: 3em;
  /* Set explicitly for transition */
  overflow: hidden;
  /* Required for max-height animation */
  /* Fast smooth animation - 150ms with ease-in-out for natural feel */
  animation: pfbc-error-appear 0.15s ease-in-out forwards;
}

/* Smooth exit animation - mirrors entrance but in reverse (slides up and fades out) */
.pfbc-inline-error.pfbc-error-removing {
  animation: pfbc-error-disappear 0.15s ease-in-out forwards;
  pointer-events: none;
}

/* Smooth appear animation - slides down from above */
@keyframes pfbc-error-appear {
  from {
    opacity: 0;
    transform: translateY(-0.375em);
    max-height: 0;
    margin-top: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 3em;
    /* Enough for multi-line errors */
    margin-top: 0.375em;
  }
}

/* Smooth disappear animation - slides up and fades out (reverse of appear) */
@keyframes pfbc-error-disappear {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 3em;
    margin-top: 0.375em;
  }

  to {
    opacity: 0;
    transform: translateY(-0.375em);
    max-height: 0;
    margin-top: 0;
  }
}

/* Respect reduced motion preference (EAA compliance) */
@media (prefers-reduced-motion: reduce) {
  .pfbc-inline-error {
    animation: none;
  }
}

.pfbc-inline-error::before {
  content: "\26A0";
  /* ⚠ Warning sign */
  flex-shrink: 0;
  font-size: 1em;
  /* Match text size for proper alignment */
  line-height: 1.4;
  /* Match text line-height */
}

.pfbc-error-message {
  flex: 1;
}

/* Fieldwrap needs relative positioning for absolute error placement */
.pfbc-fieldwrap {
  position: relative;
}

/* File input help text styling */
.pfbc-help {

  font-size: small;
  color: #666;

}

.pfbc-element {
  position: relative;
}

/* Error state - semantic error message below field conveys the error */
/* Don't override borders/colors - let theme and user's control panel settings apply */
.pfbc-element-has-error .pfbc-label label {
  color: inherit;
}

/* Required field indicator with ARIA */
.pfbc-required {
  color: #dc3545;
  font-weight: bold;
}

/* Fieldset (fieldgroup) - no border by default; use modifier classes to opt in */
.accua-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5em 0;
}

/* Border variant */
.accua-form fieldset.accua-fieldset-border {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1em 1.25em;
}

/* Legend: inline title sitting on the border line */
.accua-form fieldset legend {
  padding: 0 0.5em;
  font-weight: 600;
}

/* Title before the fieldset (outside/above the border) */
.accua-form .accua-fieldset-title-outer {
  font-weight: 600;
  margin: 0 0 0.5em 0;
}

/* Title inside the fieldset as a heading block */
.accua-form .accua-fieldset-title-inner {
  font-weight: 600;
  margin: 0 0 0.75em 0;
}

/* Last element in fieldset: no bottom margin */
.accua-form fieldset>.pfbc-element:last-of-type {
  margin-bottom: 0;
}

/* standard (labels on top) */
.accua-form-view-standard .pfbc-element {
  margin-bottom: 1.25em;
  position: relative;
}

.accua-form-view-standard .pfbc-label {
  margin-bottom: 0.375em;
}

.accua-form-view-standard .pfbc-label label {
  display: block;
  width: 100%;
}

.accua-form-view-standard .pfbc-textbox,
.accua-form-view-standard .pfbc-textarea,
.accua-form-view-standard .pfbc-select {
  width: 100%;
  display: block;
  padding: 0.5em 0.75em;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid;
  border-color: inherit;
  background-color: inherit;
}

.accua-form-view-standard .pfbc-select {
  padding-right: 2.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.accua-form-view-standard .pfbc-select::-ms-expand {
  display: none;
}

.accua-form-view-standard .pfbc-textarea {
  min-height: 6em;
  resize: vertical;
}

.accua-form-view-standard .pfbc-fieldwrap {
  width: 100%;
  display: block;
  position: relative;
}

.accua-form-view-standard .pfbc-buttons {
  text-align: right;
}

/* sidebyside (labels on left) */
/* Uses float layout (not flex) so custom JS using .css('display','block') to */
/* show/hide fields doesn't break the label-beside-input alignment. */
.accua-form-view-sidebyside {
  container-type: inline-size;
}

.accua-form-view-sidebyside .pfbc-element {
  margin-bottom: 0.5em;
  position: relative;
}

.accua-form-view-sidebyside .pfbc-element::after {
  content: "";
  display: table;
  clear: both;
}

.accua-form-view-sidebyside .pfbc-elementbottom {
  clear: both;
}

.accua-form-view-sidebyside .pfbc-label {
  float: left;
  width: 25%;
  padding-top: 0.25rem;
  padding-right: 0.5em;
  box-sizing: border-box;
}

.accua-form-view-sidebyside .pfbc-label label {
  display: block;
}

.accua-form-view-sidebyside .pfbc-fieldwrap {
  margin-left: 25%;
  position: relative;
}

/* Elements without a label (e.g. single checkboxes) should be left-aligned */
.accua-form-view-sidebyside .pfbc-element>.pfbc-fieldwrap:first-child {
  margin-left: 0;
}


.accuaform-fieldtype-checkbox,
.accuaform-fieldtype-multicheckbox {
  min-width: 1rem;
  min-height: 1rem;
  margin-left: 0;
}


.accua-form-view-sidebyside .pfbc-textbox,
.accua-form-view-sidebyside .pfbc-textarea,
.accua-form-view-sidebyside .pfbc-select {
  width: 100%;
  display: block;
  padding: 0.5em 0.75em;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid;
  border-color: inherit;
  background-color: inherit;
}

.accua-form-view-sidebyside .pfbc-select {
  padding-right: 2.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.accua-form-view-sidebyside .pfbc-select::-ms-expand {
  display: none;
}

.accua-form-view-sidebyside .pfbc-textarea {
  min-height: 6em;
  resize: vertical;
}

.accua-form-view-sidebyside .pfbc-buttons {
  text-align: right;
}

/* Responsive: stack labels on top when form container is narrow */
@container (max-width: 500px) {
  .accua-form-view-sidebyside .pfbc-label {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-bottom: 0.25em;
  }
  .accua-form-view-sidebyside .pfbc-fieldwrap {
    margin-left: 0;
  }
}

.pfbc-error {
  padding: .5em;
  margin-bottom: 1em;
}

.pfbc-error ul {
  padding-left: 1.75em;
  margin: 0;
  margin-top: .25em;
}

/* .pfbc-checkbox {
  padding: 0.5em 0;
  border-bottom: 1px solid #f4f4f4;
} */

/* Accessibility: Focus styles for keyboard navigation */
.pfbc-textbox:focus,
.pfbc-textarea:focus,
.pfbc-select:focus,
.accua-form input[type="checkbox"]:focus,
.accua-form input[type="radio"]:focus,
.accua-form button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}


.accua-form .pfbc-element input.wp-color-picker {
  margin-bottom: 0;
  background-color: transparent;
  padding: 1px 0;
  color: inherit;
  font-size: inherit;
  /* Let theme and user's control panel settings handle borders */
}

/* HTML5 Color Picker Styling */
.pfbc-color-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.accua-form .pfbc-color-input {
  /* Match height of text inputs */
  width: 3em;
  height: 2.5em;
  min-height: 2.5em;
  padding: 0.25em;
  border: 1px solid #767676;
  border-radius: 4px;
  cursor: pointer;
  /* Remove browser default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}

/* Remove the inner color swatch border in WebKit browsers */
.pfbc-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.pfbc-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

/* Firefox color swatch */
.pfbc-color-input::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

/* Focus state for accessibility */
.pfbc-color-input:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

.pfbc-color-hex {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: #555;
  min-width: 5.5em;
  letter-spacing: 0.02em;
}

/* Inline label mode adjustments for color picker */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-color-wrapper {
  padding-top: 0.5em;
}

@media (min-width: 300px) and (max-width: 400px) {
  .accua_forms_recaptcha2_container {
    transform: scale(0.75);
    transform-origin: 0 0;
  }
}

@media (max-width: 300px) {
  .accua_forms_recaptcha2_container {
    transform: scale(0.6);
    transform-origin: 0 0;
  }
}

/* Captcha fields with the title hidden (default): the label stays in the
   markup, visually hidden but available to screen readers and to the error
   summary label lookup. !important: this sr-only utility must beat the
   layout-specific label rules (e.g. the inline-label floating label). */
.accua-captcha-title-hidden .pfbc-label,
.accua-captcha-title-hidden .pfbc-floating-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* reCAPTCHA notice printed in place of the floating badge when the badge is
   hidden in the plugin settings (Google requires the branding to stay visible
   somewhere in the user flow). */
.accua-forms-recaptcha3-notice {
  font-size: 0.75em;
  line-height: 1.4;
  opacity: 0.8;
  margin: 0.5em 0 0;
}

/* ========================================================================
   Inline Label Layout - Material Design Inspired Floating Labels
   ======================================================================== */

/**
 * Inline Label Layout with Floating Labels
 * 
 * This layout implements Material Design-inspired floating labels that:
 * - Start inside the input field (inline)
 * - Float to the top border when focused or filled
 * - Use smooth transitions (200ms)
 * - Maintain accessibility (WCAG 2.1 AAA compliant)
 * - Prevent layout shift and flickering
 */

.accua-form-view-inlinelabel .pfbc-element {
  margin-bottom: 1em;
}

.accua-form-view-inlinelabel .pfbc-inline-label-wrapper {
  position: relative;
  width: 100%;
}

/* Input field styling with space for floating label */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-textbox,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-textarea,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-select {
  width: 100%;
  /* Balanced padding: top slightly larger for label space, but visually centered */
  padding: 1em 0.75em 0.85em 0.75em;
  box-sizing: border-box;
  /* Use CSS variable for border color to ensure consistency across all inputs */
  /* This prevents issues where color:transparent (used for date placeholder hiding) */
  /* would make borders invisible when using border-color: inherit */
  border: 1px solid var(--accua-form-input-border-color);
  /* Increase font size for better readability */
  font-size: 1rem;
  line-height: 1.2;
  background-color: inherit;
}

/* Add right padding to select elements for caret spacing */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-select {
  padding-right: 2.5em;
  /* Remove native appearance for consistent cross-browser styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom dropdown caret using CSS */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  /* Firefox-specific fixes for dropdown rendering */
  text-indent: 0.01px;
  text-overflow: '';
}

/* Firefox-specific: ensure dropdown opens properly with appearance:none */
@-moz-document url-prefix() {
  .accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-select {
    /* Firefox needs explicit color to render dropdown properly */
    color: inherit;
  }
}

/* Remove IE's native arrow */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-select::-ms-expand {
  display: none;
}

/* Textarea specific adjustments */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-textarea {
  min-height: 6em;
  resize: vertical;
}

/* Floating label - starts inside the field, vertically centered for inputs */
/* Uses fixed position (1.6em from top) instead of 50% to prevent shift when error appears */
/* Calculation: input has padding 1em top + 0.85em bottom + ~1.2em line-height + border ≈ 3.15em total */
/* Center point ≈ 1.6em from top, adjusted for label's own height via translateY(-50%) */
.accua-form-view-inlinelabel .pfbc-floating-label {
  position: absolute;
  left: 0.75em;
  top: 1.6em;
  /* Fixed position = center of input, independent of wrapper height */
  font-size: 1rem;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-50%);
  transform-origin: left center;
  padding: 0;
  z-index: 1;
  max-width: calc(100% - 1.5em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.6;
}

/* Textarea label - position at top instead of center */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper:has(.pfbc-textarea) .pfbc-floating-label {
  top: 1.25em;
  transform: translateY(0);
}

/* Floating label - when field is focused or has value */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused .pfbc-floating-label,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value .pfbc-floating-label {
  top: 0;
  left: 0.625em;
  font-size: 0.75em;
  opacity: 1;
  background-color: var(--wp--preset--color--base, #fff);
  padding: 0 0.375em;
  transform: translateY(-50%);
  max-width: calc(100% - 1.5em);
}

/* Description text below field */
.accua-form-view-inlinelabel .pfbc-description {
  margin-top: 0.375em;
  font-size: 0.875em;
  line-height: 1.4;
  opacity: 0.7;
}

/* Required asterisk */
.accua-form-view-inlinelabel .pfbc-floating-label .pfbc-required {
  opacity: 0.85;
}

/* Fieldwrap for inline labels */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-fieldwrap {
  position: relative;
  width: 100%;
  display: block;
  padding-bottom: 0;
}

/* Standard labels for checkboxes, radios, file inputs */
.accua-form-view-inlinelabel .pfbc-label {
  margin-bottom: 0.5em;
  display: block;
}

.accua-form-view-inlinelabel .pfbc-label label {
  display: block;
  font-weight: 500;
}

/* Buttons */
.accua-form-view-inlinelabel .pfbc-buttons {
  text-align: right;
  margin-top: 1.5em;
}

/* Accessibility: High contrast mode support.
   'more' is the standard value; 'high' is kept for older WebKit. */
@media (prefers-contrast: more), (prefers-contrast: high) {
  .accua-form-view-inlinelabel .pfbc-floating-label {
    font-weight: 600;
    opacity: 1;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .accua-form-view-inlinelabel .pfbc-floating-label {
    transition: none;
  }
}

/* Hide placeholders and date field text when unfocused (prevents overlap with label) */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-textbox::placeholder,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-textarea::placeholder {
  opacity: 0;
  transition: opacity 200ms;
}

/* Hide date input placeholder text in all browsers */
/* WebKit browsers (Chrome, Safari, Edge) */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-datetime-edit-text,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-datetime-edit-month-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-datetime-edit-day-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-datetime-edit-year-field {
  opacity: 0;
}

/* Firefox fallback - use color transparent to hide placeholder when empty */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]:not(.has-value):not(:focus) {
  color: transparent;
  opacity: 1;
}

/* Show placeholders when focused or has value */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused .pfbc-textbox::placeholder,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused .pfbc-textarea::placeholder,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value .pfbc-textbox::placeholder,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value .pfbc-textarea::placeholder {
  opacity: 0.5;
}

/* Show date input text when focused or has value */
/* WebKit browsers */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused input[type="date"]::-webkit-datetime-edit-text,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused input[type="date"]::-webkit-datetime-edit-month-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused input[type="date"]::-webkit-datetime-edit-day-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.is-focused input[type="date"]::-webkit-datetime-edit-year-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value input[type="date"]::-webkit-datetime-edit-text,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value input[type="date"]::-webkit-datetime-edit-month-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value input[type="date"]::-webkit-datetime-edit-day-field,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper.has-value input[type="date"]::-webkit-datetime-edit-year-field {
  opacity: 1;
}

/* Firefox fallback - show color when focused or has value */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]:focus,
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"].has-value {
  color: inherit;
}

/* Date input - ensure consistent height and picker icon alignment */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"] {
  /* Same padding as other inputs */
  padding: 1em 0.75em 0.85em 0.75em;
  cursor: pointer;
  /* Use same font as other inputs for consistency and accessibility */
  font-family: inherit;
  font-size: 1rem;
}

/* Style the native calendar picker in WebKit browsers (Chrome, Safari, Edge) */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  margin: 0;
}

.accua-form-view-inlinelabel .pfbc-inline-label-wrapper input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ==========================================================================
   File Upload - Accessible Drag & Drop
   WCAG 2.2 AA Compliant / European Accessibility Act
   ========================================================================== */

/* Wrapper */
.accua-file-upload-wrapper {
  position: relative;
  width: 100%;
}

/* Dropzone */
.accua-file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1.5rem 1rem;
  border: 2px dashed #ccc;
  background-color: #fafafa;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  text-align: center;
}

/* Dropzone hover state */
.accua-file-dropzone:hover {
  border-color: #999;
  background-color: #f5f5f5;
}

/* Dropzone focus state - WCAG 2.2 AA requires visible focus indicator */
.accua-file-dropzone:focus,
.accua-file-dropzone-focused {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-color: #005fcc;
}

/* Dropzone drag-over state */
.accua-file-dropzone-drag {
  border-color: #005fcc;
  background-color: #e8f4ff;
  border-style: solid;
}

/* Dropzone text */
.accua-file-dropzone-text {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Dropzone icon */
.accua-file-dropzone-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Browse button styling */
.accua-file-browse-btn {
  color: #005fcc;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

.accua-file-browse-btn:hover {
  color: #003d99;
  text-decoration: none;
}

/* Hide the native file input visually but keep it accessible */
.accua-file-upload-wrapper input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

/* File list */
.accua-file-list {
  margin-top: 0.75rem;
}

.accua-file-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accua-file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  background-color: #f0f0f0;
  font-size: 0.9rem;
}

.accua-file-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

/* Remove file button */
.accua-file-remove-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #dc3545;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.accua-file-remove-btn:hover {
  background-color: #c82333;
}

.accua-file-remove-btn:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Screen reader only text */
.accua-file-sr-announcement,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* File upload error display */
.accua-file-error {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fef2f2;
  border: 1px solid #dc3545;
  color: #991b1b;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ============================================
   Form Success/Error Message Container
   ============================================ */

/* Anchor elements - invisible but provide scroll targets */
.accua-form-anchor {
  display: block;
  position: relative;
  top: -1em;
  /* Offset so message isn't hidden under fixed headers */
  visibility: hidden;
  height: 0;
}

/* Message container - appears above form after submission */
.accua-form-messages {
  margin-bottom: 1.5em;
  animation: accua-message-appear 0.4s ease-out;
}

/* Empty state - hide container completely */
.accua-form-messages:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Ensure content inside messages has reasonable typography */
.accua-form-messages h2,
.accua-form-messages h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.accua-form-messages p {
  margin-bottom: 0.75em;
}

.accua-form-messages p:last-child {
  margin-bottom: 0;
}

/* Smooth fade-in animation for message appearance */
@keyframes accua-message-appear {
  0% {
    opacity: 0;
    transform: translateY(-0.5em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .accua-form-messages {
    animation: none;
  }
}

.accua-file-error-item {
  display: block;
}

.accua-file-error-item strong {
  font-weight: 600;
}

/* Error state for dropzone when file error occurs */
.accua-file-upload-wrapper.has-file-error .accua-file-dropzone {
  border-color: #dc3545;
}

/* Floating label compatibility - ensure wrapper doesn't break floating label layout */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .accua-file-upload-wrapper {
  width: 100%;
}

/* Remove default label float behavior for file inputs since we have custom dropzone */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper:has(.accua-file-upload-wrapper) .pfbc-label {
  position: static;
  transform: none;
  font-size: inherit;
  margin-bottom: 0.5rem;
  display: block;
}

/* Error state for dropzone */
.accua-file-upload-wrapper.has-error .accua-file-dropzone {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Admin form builder styles - match the admin theme */
.wp-admin .accua-file-dropzone {
  background-color: #f6f7f7;
  border-color: #c3c4c7;
}

.wp-admin .accua-file-dropzone:hover {
  border-color: #8c8f94;
  background-color: #f0f0f1;
}

.wp-admin .accua-file-dropzone:focus,
.wp-admin .accua-file-dropzone-focused {
  outline-color: #2271b1;
  border-color: #2271b1;
}

.wp-admin .accua-file-dropzone-drag {
  border-color: #2271b1;
  background-color: #f0f7fc;
}

.wp-admin .accua-file-browse-btn {
  color: #2271b1;
}

.wp-admin .accua-file-browse-btn:hover {
  color: #135e96;
}

/* ==========================================================================
   Validation Summary Area
   WCAG 2.2 AA / European Accessibility Act compliant
   ========================================================================== */

.pfbc-validation-summary {
  padding: 1em 1.25em;
  margin-top: 1em;
  border: 1px solid;
  font-size: 0.9375rem;
  line-height: 1.5;
  /* Smooth transitions between states (loading → success/error) */
  transition: background-color 0.25s ease-out,
    border-color 0.25s ease-out,
    color 0.25s ease-out,
    opacity 0.25s ease-out;
}

/* Loading state - neutral blue color scheme */
.pfbc-validation-loading {
  background-color: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.pfbc-validation-loading .pfbc-summary-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: accua-spinner-rotate 0.75s linear infinite;
  vertical-align: -0.125em;
  margin-right: 0.5em;
}

.pfbc-validation-error {
  background-color: #fef2f2;
  border-color: #dc3545;
  color: #991b1b;
}

.pfbc-validation-success {
  background-color: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}

.pfbc-summary-icon {
  font-weight: bold;
  margin-right: 0.25em;
}

.pfbc-summary-header {
  margin: 0 0 0.5em 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.pfbc-summary-list {
  margin: 0;
  padding-left: 1.5em;
  list-style-type: disc;
}

.pfbc-summary-list li {
  margin-bottom: 0.25em;
  font-size: 0.875rem;
}

.pfbc-summary-list li:last-child {
  margin-bottom: 0;
}

.pfbc-summary-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.pfbc-summary-link:hover,
.pfbc-summary-link:focus {
  text-decoration: none;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Respect user preference for reduced motion (EAA compliance) */
@media (prefers-reduced-motion: reduce) {
  .pfbc-validation-summary {
    transition: none;
  }

  .pfbc-validation-loading .pfbc-summary-spinner {
    animation: none;
    /* Show static spinner for users who prefer no motion */
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* ============================================
   Post Select - Searchable Dropdown
   WCAG 2.2 AA / European Accessibility Act compliant
   @since 2.0.0-beta.29
   ============================================ */

/* Wrapper - contains both native select (pre-JS) and custom UI (post-JS) */
.pfbc-post-select-wrapper {
  position: relative;
  width: 100%;
}

/* Native select BEFORE JS enhancement - styled like regular select for no flash */
.pfbc-post-select-wrapper[data-enhanced="false"]>select {
  /* Use native select appearance initially - matches other selects */
  width: 100%;
  display: block;
}

/* Hide native select AFTER JS enhancement runs - keep accessible for form submission */
.pfbc-post-select-wrapper[data-enhanced="true"]>select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  display: block;
}

/* Container for custom dropdown */
.pfbc-post-select-container {
  position: relative;
  width: 100%;
}

/* Trigger button - matches standard select styling */
.pfbc-post-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5em 0.75em;
  padding-right: 2.5em;
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
  background-color: #fff;
  border: 1px solid;
  border-color: inherit;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
}

.pfbc-post-select-trigger:hover {
  border-color: #888;
}

.pfbc-post-select-trigger:focus {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
}

/* Invalid state for validation errors */
.pfbc-post-select-trigger.pfbc-invalid {
  border-color: #c00;
}

/* Arrow indicator */
.pfbc-post-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  pointer-events: none;
}

.pfbc-post-select-container.open .pfbc-post-select-arrow {
  border-top: none;
  border-bottom: 5px solid currentColor;
}

/* Display text */
.pfbc-post-select-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown panel */
.pfbc-post-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid;
  border-color: inherit;
  border-top: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

/* Search input container */
.pfbc-post-select-search {
  padding: 0.5em;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.pfbc-post-select-search-input {
  width: 100%;
  padding: 0.5em 0.75em;
  font-size: 0.9375rem;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 0;
  box-sizing: border-box;
  font-family: inherit;
  background-color: #fff;
  color: inherit;
}

.pfbc-post-select-search-input::placeholder {
  color: #999;
}

.pfbc-post-select-search-input:focus {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
  border-color: #ccc;
}

/* Options list */
.pfbc-post-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 220px;
  flex: 1;
}

/* Individual option */
.pfbc-post-select-option {
  padding: 0.5em 0.75em;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
}

.pfbc-post-select-option:hover,
.pfbc-post-select-option.highlighted {
  background-color: #f0f0f0;
}

.pfbc-post-select-option.selected {
  background-color: #0073aa;
  color: #fff;
}

.pfbc-post-select-option.selected:hover,
.pfbc-post-select-option.selected.highlighted {
  background-color: #005a87;
}

/* No results message */
.pfbc-post-select-no-results {
  padding: 1em;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* Loading indicator */
.pfbc-post-select-loading {
  padding: 0.75em;
  text-align: center;
  color: #666;
  font-size: 0.875rem;
  background: #f9f9f9;
  border-top: 1px solid #eee;
}

.pfbc-post-select-loading::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: accua-spinner-rotate 0.75s linear infinite;
  vertical-align: -0.125em;
  margin-right: 0.5em;
}

/* Screen reader only - live region */
.pfbc-post-select-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for keyboard users */
.pfbc-post-select-option:focus-visible {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
}

/* High contrast mode support.
   'more' is the standard value; 'high' is kept for older WebKit. */
@media (prefers-contrast: more), (prefers-contrast: high) {
  .pfbc-post-select-trigger {
    border-width: 2px;
  }

  .pfbc-post-select-dropdown {
    border-width: 2px;
  }

  .pfbc-post-select-option.highlighted {
    outline: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pfbc-post-select-loading::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* ============================================
   Post Select - Inline Label Mode (Floating Labels)
   Material Design inspired integration
   ============================================ */

/* Trigger button styling for inline label mode - matches .pfbc-select */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-post-select-trigger {
  /* Match the padding from .pfbc-select in inline mode */
  padding: 1em 0.75em 0.85em 0.75em;
  padding-right: 2.5em;
  font-size: 1rem;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  /* Override flex display to block for consistent height calculation */
  display: block;
  text-align: left;
  /* Ensure consistent border styling */
  border: 1px solid;
  border-color: inherit;
}

/* Text span needs inline-block to maintain height when empty */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-post-select-text {
  display: inline-block;
  min-height: 1.2em;
  /* Match line-height to ensure consistent height when empty */
  vertical-align: middle;
}

/* Arrow styling for inline labels - use SVG instead of CSS triangle */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-post-select-arrow {
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* Post-select uses same floating label behavior as regular select:
   - Label inside field when empty
   - Label floats to border when has value or focused
   No special CSS needed - inherits from .pfbc-inline-label-wrapper.has-value rules */

/* Container must not have margins that would shift the label */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-post-select-container {
  width: 100%;
}

/* Ensure wrapper is properly positioned */
.accua-form-view-inlinelabel .pfbc-inline-label-wrapper .pfbc-post-select-wrapper {
  width: 100%;
  display: block;
}

/* ============================================
   Post Select - Standard Label Mode (Labels on Top)
   ============================================ */

.accua-form-view-standard .pfbc-post-select-wrapper {
  width: 100%;
}

.accua-form-view-standard .pfbc-post-select-trigger {
  width: 100%;
}

/* ============================================
   Post Select - Sidebyside Label Mode (Labels on Left)
   ============================================ */

.accua-form-view-sidebyside .pfbc-post-select-wrapper {
  width: 100%;
}

.accua-form-view-sidebyside .pfbc-post-select-trigger {
  width: 100%;
}

/* ============================================
   Post Select - Inline Form Mode
   ============================================ */

.accua-form-view-inline .pfbc-post-select-trigger {
  width: auto;
  min-width: 200px;
}

/* ============================================
   Turnstile CAPTCHA
   ============================================ */

.cf-turnstile iframe {
  border: none;
}