/* Fabulous Forms frontend base */
.fabulous-form-container{display:block}
.fabulous-form{position:relative; max-width:640px; background:#fff; color:#111; padding:16px 20px; border-radius:10px}
.fabulous-form p{margin-top:0}
.fabulous-form .fabulous-form-options{display:grid; gap:var(--ff-gap,8px); margin:8px 0}
.fabulous-form .fabulous-form-submit{display:inline-block; background:var(--ff-btn-bg,#0073aa); color:var(--ff-btn-text,#fff); border:none; border-radius:var(--ff-btn-radius,6px); padding:10px 14px; cursor:pointer; transition:background var(--ff-transition,160ms) ease, color var(--ff-transition,160ms) ease}
.fabulous-form .fabulous-form-submit:hover{background:var(--ff-btn-bg-hover,#006ba1); color:var(--ff-btn-text-hover,#fff)}
.fabulous-form .ff-close-btn{position:absolute; top:6px; right:6px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; font-weight:700; background:#eee; border-radius:50%}
.fabulous-form .ff-close-btn.square{border-radius:8px}
.fabulous-form .ff-text-above,.fabulous-form .ff-text-below{opacity:.9}

/* Popup modal */
.fabulous-form-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); z-index:999999; padding:24px}
.fabulous-form-modal.ff-modal-pos-bottom{align-items:flex-end}
.fabulous-form-trigger{display:inline-block; margin:6px 0; padding:8px 12px; background:var(--ff-btn-bg,#0073aa); color:#fff; border-radius:6px; border:none; cursor:pointer}

/* --- Consistent checkbox/radio size via visual box (.ff-option) --- */
.fabulous-form .ff-option{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  line-height:1.45;
}
.fabulous-form .ff-option > input{
  position:absolute;
  left:0;
  top:0.25em; /* aligns to first line */
  width:var(--ff-cb-size,18px);
  height:var(--ff-cb-size,18px);
  margin:0;
  opacity:0;      /* keep accessible, but not visible */
  pointer-events:auto;
}
.fabulous-form .ff-option > .ff-box{
  width:var(--ff-cb-size,18px);
  height:var(--ff-cb-size,18px);
  border:2px solid currentColor;
  background:#fff;
  box-sizing:border-box;
  flex:0 0 auto;
  margin-top:0.15em;
  border-radius:3px;              /* checkbox shape */
}
.fabulous-form .ff-option > .ff-box[data-type="radio"]{ border-radius:50%; }

.fabulous-form .ff-option > .ff-box::after{
  content:"";
  display:block;
  width:100%; height:100%;
  transform:scale(0);
  transition:transform var(--ff-transition,160ms) ease;
}

/* Checked visuals */
.fabulous-form .ff-option > input[type="checkbox"]:checked + .ff-box::after{
  background:var(--ff-btn-bg,#0073aa);
  clip-path:polygon(14% 44%, 0 60%, 44% 100%, 100% 16%, 84% 0, 44% 64%);
  transform:scale(1);
}
.fabulous-form .ff-option > input[type="radio"]:checked + .ff-box::after{
  background:var(--ff-btn-bg,#0073aa);
  border-radius:50%;
  width:calc(100% - 8px); height:calc(100% - 8px);
  margin:4px;
  transform:scale(1);
}

/* Keyboard focus */
.fabulous-form .ff-option > input:focus-visible + .ff-box{
  outline:2px solid var(--ff-focus,#3b82f6);
  outline-offset:2px;
}


/* Robust modal visibility */
html body .fabulous-form-modal:not(.is-open){
  display:none !important;
}
html body .fabulous-form-modal.is-open{
  display:flex !important;
}
html body .fabulous-form-modal{
  position:fixed;
  inset:0;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.42);
  z-index:2147483647;
  padding:24px;
}
html body .fabulous-form-modal.ff-modal-pos-bottom.is-open{ align-items:flex-end; }
html.ff-modal-lock, body.ff-modal-lock { overflow:hidden; }


/* Ensure modal is top-layer regardless of builder wrappers */
body > .fabulous-form-modal{ isolation:isolate; }


/* Disable interactions when button is disabled */
.fabulous-form .fabulous-form-submit[disabled],
.fabulous-form .fabulous-form-submit[aria-disabled="true"]{
  opacity:.6; cursor:not-allowed; pointer-events:none;
}


/* Inset inner border (frame) */
.fabulous-form.ff-has-inner-frame{ position: relative; }
.fabulous-form.ff-has-inner-frame::before{
  content: ""; position: absolute;
  top: var(--ff-frame-gap, 0); right: var(--ff-frame-gap, 0);
  bottom: var(--ff-frame-gap, 0); left: var(--ff-frame-gap, 0);
  border: var(--ff-frame-width, 0) solid var(--ff-frame-color, transparent);
  border-radius: inherit;
  pointer-events: none;

  background: transparent;
  z-index: 3;
}