/* ============================================
   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: '';
}

/* The arrow the select rules above draw after turning the native one off.
   More specific and !important: a theme's `background` shorthand on the
   fields, even an !important one (common in themes written for 1.x, where the
   native arrow was left on), would clear it, and the select would look like a
   text field. Only the arrow's own properties: the theme keeps the colour. */
form.accua-form-view-standard select.pfbc-select,
form.accua-form-view-sidebyside select.pfbc-select,
form.accua-form-view-inlinelabel .pfbc-inline-label-wrapper select.pfbc-select {
  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") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
}

/* 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 - still submitted with the
   form. It stays in the flow at zero height, so where a layout sizes the field
   to its content (a theme's flex row) the dropdown is as wide as the native
   select would have been, instead of shrinking to its own text. !important:
   the view rules give selects vertical padding with more specific selectors
   (inline labels), which would leave the hidden select a visible gap. */
.pfbc-post-select-wrapper[data-enhanced="true"]>select {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* 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;
}