/**
 * WPFlowForms — Public Form Renderer Styles
 *
 * Rendering modes:
 *   .ff-fullpage   position:fixed; inset:0  (full-page / preview route)
 *   (default)      position:relative, inline shortcode — sized by parent
 *
 * Animation system:
 *   .ff-entry      Staggered fade-up for each screen element on entry
 *   .ff-exit       Simultaneous slide-down + fade-out for whole screen on exit
 *
 * Timing constants (keep in sync with FormApp.js):
 *   EXIT_DURATION  260ms
 *   BG_FADE        400ms
 *   ENTRY_STAGGER  80ms per element
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/*
 * Selectors use :where() so specificity is 0 — every .ff-* rule wins.
 */

:where(.flowform-container) *,
:where(.flowform-container) *::before,
:where(.flowform-container) *::after { box-sizing: border-box; }

:where(.flowform-container p,
       .flowform-container h1, .flowform-container h2, .flowform-container h3,
       .flowform-container h4, .flowform-container h5, .flowform-container h6) {
  margin: 0; padding: 0; font-size: inherit; font-weight: inherit;
  line-height: inherit; color: inherit; border: none; background: transparent;
}

:where(.flowform-container ul, .flowform-container ol) { margin: 0; padding: 0; list-style: none; }

:where(.flowform-container a) { color: inherit; text-decoration: none; background: transparent; }

:where(.flowform-container button) {
  margin: 0; padding: 0; border: none; background: transparent;
  font-family: inherit; font-size: inherit; line-height: normal;
  color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal;
  text-shadow: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}

:where(.flowform-container input,
       .flowform-container textarea,
       .flowform-container select) {
  margin: 0; padding: 0; border: none; background: transparent;
  font-family: inherit; font-size: inherit; line-height: normal; color: inherit;
  outline: none; box-shadow: none; text-shadow: none; letter-spacing: normal;
  -webkit-appearance: none; appearance: none;
}

:where(.flowform-container img, .flowform-container svg) { display: block; max-width: 100%; border: none; }

/* Restore browser default focus ring for any interactive element not explicitly styled. */
.flowform-container button:focus-visible,
.flowform-container input:focus-visible,
.flowform-container textarea:focus-visible,
.flowform-container select:focus-visible,
.flowform-container a:focus-visible { outline: auto; }

/* Container */

.flowform-container {
  position:       relative;
  overflow:       hidden;
  width:          100%;
  box-sizing:     border-box;
  display:        flex;
  align-items:    center;
  container-type: inline-size;
}

.flowform-container.ff-fullpage {
  position:      fixed;
  inset:         0;
  min-height:    unset;
  border-radius: 0;
  z-index:       9999999999999;
}

body:has(#wpadminbar) .flowform-container.ff-fullpage {
  top: 32px;
  z-index: 9999;
}

@media screen and (max-width: 782px) {
  body:has(#wpadminbar) .flowform-container.ff-fullpage {
    top: 46px;
  }
}

/* Background layer */

.flowform-container .ff-bg-layer {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  overflow:       hidden;
}

/* Individual bg snapshot — fades in/out during cross-fade */
.flowform-container .ff-bg-layer-inner {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
}

/* Split layout */
.flowform-container .ff-bg-layer--split {
  display: flex;
}

/* Full-bleed global wallpaper behind the split panels */
.flowform-container .ff-bg-global-wallpaper {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
}

/* Local image panel (50 %) */
.flowform-container .ff-bg-split-panel {
  width:               50%;
  flex-shrink:         0;
  background-size:     cover;
  background-position: center;
  position:            relative;
  z-index:             1;
}

.flowform-container .ff-bg-split-panel--right {
  order:       1;
  margin-left: auto;
}

/* Content wrapper */

.flowform-container .ff-content-wrapper {
  position:       absolute;
  inset:          0;
  z-index:        10;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

/* When split panel is on the left, content occupies the right 50 % */
.flowform-container .ff-content-wrapper--split-left  { left:  50%; }
/* When split panel is on the right, content occupies the left 50 % */
.flowform-container .ff-content-wrapper--split-right { right: 50%; }

/* Fixed progress bar */

.flowform-container .ff-progress-fixed {
  position:        absolute;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  padding:         10px 16px 6px;
  display:         flex;
  flex-direction:  column;
  gap:             4px;
  pointer-events:  none;
}

.flowform-container .ff-progress-track {
  width:         100%;
  height:        3px;
  background:    rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  overflow:      hidden;
}

.flowform-container .ff-progress-bar {
  height:        100%;
  background:    var(--btn-color, #111827);
  border-radius: 100px;
  transition:    width 0.35s ease;
  opacity:       0.7;
}

.flowform-container .ff-progress-label {
  font-size:   var(--fs-hint, 0.75rem);
  color:       var(--hint-color, #9ca3af);
  text-align:  right;
  line-height: 1;
}

/* Permanent bottom nav bar */

.flowform-container .ff-nav-bar {
  position:        absolute;
  bottom:          0;
  right:           0;
  height:          64px;
  z-index:         50;
  display:         flex;
  align-items:     center;
  justify-content: end;
  gap:             4px;
  padding:         0 24px;
  /* subtle separator */
  background:      transparent;
  box-sizing:      border-box;
}

/* Nav buttons */

.flowform-container .ff-btn-nav {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  padding:         4px;
  background:      var(--btn-color, #111827);
  color:           var(--btn-text-color, #ffffff);
  border:          none;
  border-radius:   var(--corner-radius, 8px);
  font-size:       var(--fs-hint, 0.875rem);
  font-family:     inherit;
  font-weight:     500;
  cursor:          pointer;
  transition:      border-color 0.15s, color 0.15s, background-color 0.15s, opacity 0.15s, scale 0.15s;
}

.flowform-container .ff-btn-nav:hover:not(:disabled) {
  background-color: var(--btn-hover-color, #374151);
  scale: 1.05;
}

.flowform-container .ff-btn-nav:active:not(:disabled) {
  scale: 0.97;
}

/* Disabled state — button stays visible but muted, no pointer */
.flowform-container .ff-btn-nav:disabled,
.flowform-container .ff-btn-nav.ff-btn-nav--disabled {
  opacity: 0.35;
  cursor:  not-allowed;
  /* pointer-events: none; */
}

.flowform-container .ff-btn-nav:focus {
  outline: none;
  border: none
}

.flowform-container .ff-btn-nav:focus-visible {
  outline: var(--btn-color, #111827) solid 2px;
  outline-offset: 2px;
  z-index: 500;
}

/* Screen */

.flowform-container .ff-screen {
  position:       relative;
  width:          100%;
  height:         100%;
  /* display:        flex; */
  flex-direction: column;
  overflow-y:     auto;
  overflow-x:     hidden;
}

.flowform-container .ff-screen-inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100%;
  max-width:       48rem;
  width:           100%;
  margin:          0 auto;
  padding:         72px 80px;
  gap:             24px;
  box-sizing:      border-box;
}

.flowform-container .ff-screen-inner.ff-align-left   { align-items: flex-start; }
.flowform-container .ff-screen-inner.ff-align-center { align-items: center; text-align: center; }

/* animations */

@keyframes ff-enter-up {
  from {
    opacity:   0;
    transform: translateY(22px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes ff-enter-down {
  from {
    opacity:   0;
    transform: translateY(-22px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.flowform-container .ff-entry--up {
  animation: ff-enter-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.flowform-container .ff-entry--down {
  animation: ff-enter-down 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Exit animations */

@keyframes ff-exit-up {
  from {
    opacity:   1;
    transform: translateY(0);
  }
  to {
    opacity:   0;
    transform: translateY(-22px);
  }
}

@keyframes ff-exit-down {
  from {
    opacity:   1;
    transform: translateY(0);
  }
  to {
    opacity:   0;
    transform: translateY(22px);
  }
}

.flowform-container .ff-exit--up {
  animation: ff-exit-up 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}

.flowform-container .ff-exit--down {
  animation: ff-exit-down 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}

/* Typography */

.flowform-container .ff-title {
  font-family:    inherit;
  font-size:      var(--fs-title, 2.25rem);
  font-weight:    700;
  color:          var(--title-color, #111827);
  margin:         0;
  line-height:    1.25;
  letter-spacing: -0.02em;
}

.flowform-container .ff-desc {
  font-size:   var(--fs-body, 1rem);
  color:       var(--desc-color, #6b7280);
  margin:      0;
  line-height: 1.625;
}

.flowform-container .ff-hint {
  font-size: var(--fs-hint, 0.875rem);
  color:     var(--hint-color, #9ca3af);
}

/* Question */

.flowform-container .ff-question {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.flowform-container .ff-question-header {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.flowform-container .ff-question-title {
  font-family: inherit;
  font-size:   var(--fs-subtitle, 1.5rem);
  font-weight: 600;
  color:       var(--title-color, #111827);
  margin:      0;
  line-height: 1.375;
}

.flowform-container .ff-question-desc {
  font-size:   var(--fs-body, 1rem);
  color:       var(--desc-color, #6b7280);
  margin:      0;
  line-height: 1.625;
}

.flowform-container .ff-question-input { width: 100%; }

.flowform-container .ff-question-error {
  font-size:   var(--fs-hint, 0.875rem);
  color:       #ef4444;
  margin:      0;
  font-weight: 500;
}

/* Inputs */

.flowform-container .ff-input {
  width:          100%;
  background:     transparent;
  border:         none;
  border-bottom:  1.5px solid var(--answer-color, #111827);
  border-radius:  0;
  padding:        10px 0;
  font-size:      var(--fs-body, 1rem);
  color:          var(--answer-color, #111827);
  outline:        none;
  font-family:    inherit;
  box-sizing:     border-box;
  transition:     border-color 0.15s;
}

.flowform-container .ff-input::placeholder { color: var(--answer-color, #111827); opacity: 0.4; }
.flowform-container .ff-input:focus,
.flowform-container .ff-input:focus-visible { 
  border-bottom-color: var(--btn-color, #111827);
  outline: none; 
  background: transparent;
  color: var(--answer-color, #111827);
}
.flowform-container .ff-textarea-input { resize: vertical; }

.flowform-container .ff-textarea-hint {
  margin-top:  0.5rem;
  font-size:   var(--fs-hint, 0.875rem);
  color:       var(--hint-color, #9ca3af);
  line-height: 1.4;
}

.flowform-container .ff-number-wrap {
  display:        flex;
  align-items:    center;
  gap:            8px;
  border-bottom:  1.5px solid var(--answer-color, #111827);
  padding-bottom: 10px;
}

.flowform-container .ff-number-wrap .ff-number-input { border: none; padding: 0; flex: 1; }

.flowform-container .ff-number-prefix,
.flowform-container .ff-number-suffix { font-size: var(--fs-body, 1rem); color: var(--answer-color, #111827); }

/* Choices */

.flowform-container .ff-choices {
  display:   flex;
  gap:       10px;
  width:     max-content;
}

.flowform-container .ff-choices.ff-choices--horizontal {
  width: 100%;
}

/* Vertical list (default) */
.flowform-container .ff-choices--vertical {
  flex-direction: column;
  margin: 0 auto;
}
.flowform-container .ff-choices--vertical.ff-choices--left {
  margin: 0;
}

/* Horizontal wrap */
.flowform-container .ff-choices--horizontal {
  flex-wrap:       wrap;
  justify-content: center;
}
.flowform-container .ff-choices--horizontal.ff-choices--left {
  justify-content: flex-start;
}

/* 2-column grid */
.flowform-container .ff-choices--grid_2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
}
.flowform-container .ff-choices--grid_2.ff-choices--left {
  margin: 0;
}

.flowform-container .ff-choices--vertical .ff-choice-item {
  width: 100%;
}

.flowform-container .ff-choice-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 16px 10px 12px;
  border:        1.5px solid var(--answer-color, #111827);
  border-radius: var(--corner-radius, 8px);
  cursor:        pointer;
  font-size:     var(--fs-body, 1rem);
  color:         var(--answer-color, #111827);
  font-family:   inherit;
  background:    transparent;
  transition:    background-color 0.12s, border-color 0.12s;
  user-select:   none;
  box-sizing: border-box;
}

.flowform-container .ff-choice-item:hover {
  background-color: color-mix(in srgb, var(--answer-color, #111827) 8%, transparent);
}

.flowform-container .ff-choice-item.is-selected {
  background-color: color-mix(in srgb, var(--answer-color, #111827) 12%, transparent);
  border-color:     var(--btn-color, #111827);
}

.flowform-container .ff-choice-item:focus,
.flowform-container .ff-choice-item:focus-visible {
  outline: none;
  border: 1.5px solid var(--answer-color, #111827);
}

.flowform-container .ff-choice-radio,
.flowform-container .ff-choice-checkbox {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  height:          16px;
  border:          2px solid var(--answer-color, #111827);
  border-radius:   var(--corner-radius, 8px);
  flex-shrink:     0;
  transition:      background-color 0.12s;
}

.flowform-container .ff-choice-item.is-selected .ff-choice-radio,
.flowform-container .ff-choice-item.is-selected .ff-choice-checkbox {
  background-color: var(--btn-color, #111827);
  border-color:     var(--btn-color, #111827);
}

.flowform-container .ff-choice-item.is-selected .ff-choice-radio::after,
.flowform-container .ff-choice-item.is-selected .ff-choice-checkbox::after {
  content:       '';
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--btn-text-color, #ffffff);
}

.flowform-container .ff-choice-label { line-height: 1.4; }

/* Yes / No */

.flowform-container .ff-yes-no { display: flex; gap: 12px; }
.flowform-container .ff-align-center .ff-yes-no { justify-content: center; } 
.flowform-container .ff-yes-no-btn { min-width: 80px; justify-content: center; }

/* Rating */

.flowform-container .ff-rating { display: flex; flex-wrap: wrap; gap: 8px; }
.flowform-container .ff-align-center .ff-rating { justify-content: center; }

.flowform-container .ff-rating-star {
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
  color:       var(--star-color, #f59e0b);
  line-height: 1;
  transition:  transform 0.1s;
}

.flowform-container .ff-rating-star:hover { transform: scale(1.15); }

.flowform-container .ff-rating-star.is-active svg,
.flowform-container .ff-rating-star svg[fill="currentColor"] { fill: var(--star-color, #f59e0b); }
.flowform-container .ff-rating-star:focus,
.flowform-container .ff-rating-star:focus-visible { outline: none; border: none; }

/* Primary button */

.flowform-container .ff-btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 24px;
  background:      var(--btn-color, #111827);
  color:           var(--btn-text-color, #ffffff);
  border:          none;
  border-radius:   var(--corner-radius, 8px);
  font-size:       var(--fs-body, 1rem);
  font-family:     inherit;
  font-weight:     500;
  cursor:          pointer;
  transition:      background-color 0.15s, transform 0.1s, scale 0.15s;
  text-decoration: none;
}

.flowform-container .ff-btn-primary:hover  { background-color: var(--btn-hover-color, #374151); scale: 1.03; }
.flowform-container .ff-btn-primary:active { scale: 0.98; }

.flowform-container .ff-btn-primary:focus { border: none; outline: none; }
.flowform-container .ff-btn-primary:focus-visible {
  outline: var(--btn-color, #111827) solid 2px;
  outline-offset: 2px;
  z-index: 500;
}

/* Actions row */

.flowform-container .ff-actions { display: flex; align-items: center; gap: 16px; }

/* Thank you */

.flowform-container .ff-thankyou-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      #d1fae5;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #059669;
  flex-shrink:     0;
}

.flowform-container .ff-submission-error-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      #fee2e2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #dc2626;
  flex-shrink:     0;
}

/* Submitting spinner */

.flowform-container .ff-submitting-spinner {
  width:        40px;
  height:       40px;
  border:       3px solid rgba(0, 0, 0, 0.1);
  border-top:   3px solid var(--btn-color, #111827);
  border-radius: 50%;
  animation:    ff-spin 0.7s linear infinite;
  flex-shrink:  0;
}

/* Redirect countdown */

.flowform-container .ff-redirect-countdown {
  font-size:  var(--fs-hint, 0.875rem);
  color:      var(--hint-color, #9ca3af);
  margin:     0;
}

/* Social share */

.flowform-container .ff-social-share {
  display:        flex;
  flex-direction: column;
  align-items:    inherit;
  gap:            10px;
  margin-top:     8px;
}

.flowform-container .ff-social-share-label {
  font-size:  var(--fs-hint, 0.875rem);
  color:      var(--hint-color, #9ca3af);
  margin:     0;
}

.flowform-container .ff-social-share-btns {
  display: flex;
  gap:     10px;
}

.flowform-container .ff-social-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--corner-radius, 8px);
  border:          1.5px solid var(--answer-color, #d1d5db);
  color:           var(--answer-color, #6b7280);
  text-decoration: none;
  transition:      border-color 0.15s, color 0.15s, background-color 0.15s;
}

.flowform-container .ff-social-btn:hover {
  border-color:     var(--btn-color, #111827);
  color:            var(--btn-color, #111827);
  background-color: color-mix(in srgb, var(--btn-color, #111827) 6%, transparent);
}

.flowform-container .ff-social-btn:focus { outline: none; }
.flowform-container .ff-social-btn:focus-visible {
  outline:        var(--btn-color, #111827) solid 2px;
  outline-offset: 2px;
}

/* Email confirm */

.flowform-container .ff-email-confirm-wrap {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  width:          100%;
}

.flowform-container .ff-confirm-label {
  font-size:   var(--fs-hint, 0.875rem);
  color:       var(--hint-color, #9ca3af);
  margin:      0 0 -8px;
}

/* "Other" option */

.flowform-container .ff-other-wrap {
  display: contents;
}

.flowform-container .ff-other-idle,
.flowform-container .ff-other-confirmed {
  cursor: pointer;
}

.flowform-container .ff-other-editing {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      default;
}

.flowform-container .ff-other-inline-input {
  flex:          1;
  min-width:     0;
  background:    transparent;
  border:        none;
  outline:       none;
  font-size:     var(--fs-body, 1rem);
  color:         var(--answer-color, #111827);
  font-family:   inherit;
  padding:       0;
}

.flowform-container .ff-other-inline-input:focus,
.flowform-container .ff-other-inline-input:focus-visible {
  background: transparent;
  outline: none;
  border: none;
  color: var(--answer-color, #111827);
}

.flowform-container .ff-other-inline-input::placeholder {
  color:   var(--answer-color, #111827);
  opacity: 0.4;
}

.flowform-container .ff-other-tick {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          1.5px solid var(--answer-color, #111827);
  background:      transparent;
  color:           var(--answer-color, #111827);
  cursor:          pointer;
  padding:         0;
  transition:      background-color 0.12s, color 0.12s, border-color 0.12s;
}

.flowform-container .ff-other-tick:hover {
  background-color: var(--btn-color, #111827);
  border-color:     var(--btn-color, #111827);
  color:            var(--btn-text-color, #ffffff);
}

.flowform-container .ff-other-tick:focus { outline: none; }
.flowform-container .ff-other-tick:focus-visible {
  outline:        var(--btn-color, #111827) solid 2px;
  outline-offset: 2px;
}

/* Brightness overlay */

.flowform-container .ff-bg-overlay { position: absolute; inset: 0; pointer-events: none; }

/* Loading */

.flowform-container .ff-loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  min-height:      200px;
  padding:         32px;
  width: 100%;
}

.flowform-container .ff-loading-spinner {
  width:            32px;
  height:           32px;
  border:           3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--btn-color, #111827);
  border-radius:    50%;
  animation:        ff-spin 0.7s linear infinite;
}

.flowform-container .ff-loading-text { font-size: 0.875rem; color: var(--hint-color, #9ca3af); }

.flowform-container .ff-error { width: 100%; padding: 32px; text-align: center; color: #ef4444; font-size: 0.875rem; }

/* Spinner keyframe */

@keyframes ff-spin { to { transform: rotate(360deg); } }

/* Responsive */

@container (max-width: 1024px) {
  .flowform-container .ff-screen-inner { padding: 56px 32px 24px; max-width: 36rem; }

  .flowform-container .ff-title { font-size: clamp(2rem, 6cqw, var(--fs-title, 2.25rem)); }
}

@container (max-width: 640px) {
  .flowform-container { border-radius: 0; min-height: 480px; }


  .flowform-container .ff-choices--grid_2 { grid-template-columns: 1fr; }

  .flowform-container .ff-nav-bar { padding: 0 16px; }

  /* Collapse split — image becomes a faint wallpaper, content goes full-width */
  .flowform-container .ff-bg-layer--split { display: block; }

  .flowform-container .ff-bg-split-panel {
    position: absolute;
    inset:    0;
    width:    100%;
    opacity:  0.2;
  }

  .flowform-container .ff-content-wrapper--split-left,
  .flowform-container .ff-content-wrapper--split-right { left: 0; right: 0; }
}

/* Draft alert (admin-only unpublished changes notice) */

.flowform-container .ff-draft-alert {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         70;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 16px;
  background:      #fefce8;
  border-top:   1px solid #fde68a;
  font-size:       0.8125rem;
  color:           #92400e;
  line-height:     1.4;
}

.flowform-container .ff-draft-alert__msg { flex: 1; min-width: 0; }

.flowform-container .ff-draft-alert__link {
  color:           #92400e;
  font-weight:     600;
  text-decoration: underline;
}

.flowform-container .ff-draft-alert__link:hover { opacity: 0.75; }

.flowform-container .ff-draft-alert__dismiss {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   4px;
  color:           #92400e;
  cursor:          pointer;
  opacity:         0.7;
}

.flowform-container .ff-draft-alert__dismiss:hover { opacity: 1; }

/* Powered by WPFlowForms badge */

.flowform-container .ff-powered-by {
  position:       absolute;
  bottom:         16px;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        60;
  pointer-events: auto;
  will-change:    opacity;
  display:        flex;
}

.flowform-container .ff-powered-by-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       0.6875rem;
  font-family:     inherit;
  background:      var(--btn-color, #111827);
  color:           var(--btn-text-color, #ffffff);
  border:          6px;
  padding:         4px 8px;
  border-radius:   6px;
  text-decoration: none;
  opacity:         0.75;
  white-space:     nowrap;
  transition:      opacity 0.15s, color 0.15s;
}

/* .ff-powered-by-link:hover {
  opacity: 1;
  color:   var(--btn-color, #111827);
} */

.flowform-container .ff-powered-by-link:focus { outline: none; }
.flowform-container .ff-powered-by-link:focus-visible {
  outline:        var(--btn-color, #111827) solid 2px;
  outline-offset: 2px;
  border-radius:  2px;
}

.flowform-container .ff-powered-by-icon {
  flex-shrink: 0;
  color:       inherit;
}