/* ══════════════════════════════════════════════════════════════
   SmartForm Pro — Frontend CSS v2.1
   Philosophy: inherit theme fonts/colors, only add structure.
   Uses CSS custom properties so each form can be individually
   styled via the builder's accent color + border-radius settings.
   ══════════════════════════════════════════════════════════════ */

/* ── Root defaults (overridden per-form via inline style on .sfp-form-wrap) ── */
.sfp-form-wrap {
  --sfp-accent:       #6366f1;
  --sfp-accent-dark:  color-mix(in srgb, var(--sfp-accent) 80%, #000);
  --sfp-accent-light: color-mix(in srgb, var(--sfp-accent) 12%, transparent);
  --sfp-radius:       8px;
  --sfp-field-gap:    22px;
  --sfp-input-pad:    12px 15px;
  --sfp-input-border: 1.5px solid currentColor;
  --sfp-border-color: rgba(0,0,0,.18);
  --sfp-border-focus: var(--sfp-accent);
  --sfp-text:         inherit;
  --sfp-label-size:   0.875em;
  --sfp-input-size:   1em;

  /* Deliberately inherit everything from the theme */
  font-family:   inherit;
  font-size:     inherit;
  color:         inherit;
  line-height:   inherit;
  max-width:     100%;
  box-sizing:    border-box;
}

.sfp-form-wrap *, .sfp-form-wrap *::before, .sfp-form-wrap *::after {
  box-sizing: border-box;
}

/* ── Form layout ── */
.sfp-form { width: 100%; }

.sfp-form-header { margin-bottom: 1.5em; }
.sfp-form-title  {
  /* Inherit theme heading styles — only set what's needed */
  margin: 0 0 0.4em;
  line-height: 1.2;
}
.sfp-form-desc {
  margin: 0;
  opacity: .75;
  font-size: .95em;
  line-height: 1.6;
}

/* Fields container */
.sfp-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-field-gap);
}

/* Individual field wrapper */
.sfp-field { width: 100%; }

/* ── Label ── */
.sfp-label {
  display:      block;
  font-size:    var(--sfp-label-size);
  font-weight:  600;
  margin-bottom: 6px;
  line-height:  1.4;
  /* Inherit color from theme */
  color:        inherit;
  opacity:      .9;
}
.sfp-req { color: #e53e3e; margin-left: 2px; font-weight: 700; }

/* ── Core input styles ── */
.sfp-input {
  display:          block;
  width:            100%;
  padding:          var(--sfp-input-pad);
  font-family:      inherit;
  font-size:        var(--sfp-input-size);
  color:            inherit;
  background:       #fff;
  border:           1.5px solid var(--sfp-border-color);
  border-radius:    var(--sfp-radius);
  outline:          none;
  transition:       border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance:       none;
  line-height:      1.5;
}

/* Dark background themes: make inputs slightly transparent-white */
@media (prefers-color-scheme: dark) {
  .sfp-input { background: rgba(255,255,255,.06); color: inherit; }
}

.sfp-input:hover  { border-color: color-mix(in srgb, var(--sfp-border-color) 60%, var(--sfp-accent)); }
.sfp-input:focus  {
  border-color: var(--sfp-accent);
  box-shadow:   0 0 0 3px var(--sfp-accent-light);
}
.sfp-input.sfp-invalid {
  border-color: #e53e3e !important;
  box-shadow:   0 0 0 3px rgba(229,62,62,.12) !important;
}
.sfp-input::placeholder { opacity: .45; }

textarea.sfp-input {
  resize:     vertical;
  min-height: 110px;
  line-height: 1.6;
}

select.sfp-input {
  cursor:              pointer;
  padding-right:       38px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  background-size:     16px;
}

/* ── Radio & Checkbox groups ── */
.sfp-radio-group,
.sfp-checkbox-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.sfp-choice-label {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        10px 14px;
  border:         1.5px solid var(--sfp-border-color);
  border-radius:  var(--sfp-radius);
  cursor:         pointer;
  font-size:      .95em;
  transition:     border-color .15s, background .15s;
  /* Inherit font and color from theme */
  font-family:    inherit;
  color:          inherit;
  line-height:    1.4;
}
.sfp-choice-label:hover {
  border-color: var(--sfp-accent);
  background:   var(--sfp-accent-light);
}
.sfp-choice-label input[type=radio],
.sfp-choice-label input[type=checkbox] {
  width:          17px;
  height:         17px;
  flex-shrink:    0;
  accent-color:   var(--sfp-accent);
  cursor:         pointer;
  margin:         0;
}
.sfp-choice-label input:checked ~ span { font-weight: 500; }
.sfp-choice-label:has(input:checked) {
  border-color: var(--sfp-accent);
  background:   var(--sfp-accent-light);
}

/* ── Star Rating ── */
.sfp-rating {
  display:         inline-flex;
  flex-direction:  row-reverse;
  gap:             4px;
  padding:         4px 0;
}
.sfp-star-input { display: none; }
.sfp-star-label {
  font-size:   28px;
  color:       #d1d5db;
  cursor:      pointer;
  transition:  color .15s, transform .12s;
  line-height: 1;
}
.sfp-star-label:hover,
.sfp-star-label:hover ~ .sfp-star-label,
.sfp-rating .sfp-star-input:checked ~ .sfp-star-label {
  color:     #f59e0b;
  transform: scale(1.1);
}

/* ── File Upload ── */
.sfp-file-wrap { position: relative; }
.sfp-file-input {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%; z-index: 2;
}
.sfp-file-label {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         24px 20px;
  border:          2px dashed var(--sfp-border-color);
  border-radius:   var(--sfp-radius);
  cursor:          pointer;
  transition:      border-color .2s, background .2s;
  text-align:      center;
  background:      rgba(0,0,0,.02);
  font-family:     inherit;
  color:           inherit;
}
.sfp-file-label:hover {
  border-color: var(--sfp-accent);
  background:   var(--sfp-accent-light);
}
.sfp-file-icon  { font-size: 22px; line-height: 1; }
.sfp-file-text  { font-size: .9em; font-weight: 500; }
.sfp-file-label small { font-size: .78em; opacity: .5; }

/* ── Layout fields ── */
.sfp-field-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  opacity:     .5;
  font-size:   .8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sfp-field-divider hr {
  flex: 1; border: none;
  border-top: 1px solid currentColor; margin: 0;
}
.sfp-field-heading h3 {
  margin: 0; font-family: inherit;
  font-size: 1.15em; font-weight: 700; color: inherit;
}
.sfp-field-paragraph p {
  margin: 0; font-size: .95em; line-height: 1.7;
  opacity: .8; color: inherit; font-family: inherit;
}

/* ── Help text ── */
.sfp-help-text {
  margin:      5px 0 0;
  font-size:   .8em;
  opacity:     .6;
  line-height: 1.5;
  color:       inherit;
}

/* ── Field validation error ── */
.sfp-field-error {
  display:     flex;
  align-items: center;
  gap:         5px;
  margin:      5px 0 0;
  font-size:   .82em;
  color:       #e53e3e;
  font-weight: 500;
  line-height: 1.4;
}

/* ── Submit button — inherits theme by default, uses accent as fallback ── */
.sfp-submit-wrap { margin-top: 8px; }

.sfp-submit-btn {
  /* Try to look like the theme's primary button.
     Sites that style [type=submit] or .button will override this.
     The accent color is our fallback. */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;           /* full-width by default */
  padding:         13px 28px;
  background:      var(--sfp-accent);
  color:           #fff;
  border:          none;
  border-radius:   var(--sfp-radius);
  font-family:     inherit;
  font-size:       1em;
  font-weight:     600;
  letter-spacing:  .01em;
  cursor:          pointer;
  transition:      background .18s, opacity .18s, transform .1s;
  line-height:     1.4;
  text-align:      center;
  -webkit-appearance: none;
}
.sfp-submit-btn:hover:not(:disabled) {
  background: var(--sfp-accent-dark);
}
.sfp-submit-btn:active:not(:disabled) { transform: scale(.98); }
.sfp-submit-btn:disabled { opacity: .65; cursor: not-allowed; }
.sfp-submit-btn.sfp-loading { opacity: .8; }

/* Spinner inside button */
.sfp-btn-spinner {
  display:       none;
  width:         17px; height: 17px;
  border:        2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     sfp-spin .65s linear infinite;
  flex-shrink:   0;
}
.sfp-submit-btn.sfp-loading .sfp-btn-spinner { display: block; }
@keyframes sfp-spin { to { transform: rotate(360deg); } }

/* ── Response message ── */
.sfp-response {
  display:      none;     /* shown via JS with .show() */
  align-items:  center;
  gap:          10px;
  margin-top:   18px;
  padding:      14px 18px;
  border-radius: var(--sfp-radius);
  font-size:    .95em;
  font-weight:  500;
  line-height:  1.5;
  animation:    sfp-fadein .3s ease;
}
/* SUCCESS — green tones */
.sfp-response.sfp-success {
  background:   #f0fdf4;
  color:        #166534;
  border:       1.5px solid #bbf7d0;
}
/* ERROR — red tones */
.sfp-response.sfp-error {
  background:   #fef2f2;
  color:        #991b1b;
  border:       1.5px solid #fecaca;
}
.sfp-resp-icon { font-size: 1.1em; flex-shrink: 0; }

@keyframes sfp-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Generic notice (error state if form not found) ── */
.sfp-notice {
  padding: 12px 16px; border-radius: var(--sfp-radius);
  font-size: .9em; color: inherit; background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.1);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .sfp-choice-label { padding: 9px 12px; font-size: .9em; }
  .sfp-submit-btn   { padding: 12px 20px; font-size: .95em; }
}

/* ══════════════════════════════════════════════════════════════
   THEME COMPATIBILITY HELPERS
   Websites often set aggressive resets on inputs/buttons.
   These rules ensure our structure survives common theme resets.
   ══════════════════════════════════════════════════════════════ */

/* Prevent theme resets from making inputs invisible */
.sfp-form-wrap input[type=text],
.sfp-form-wrap input[type=email],
.sfp-form-wrap input[type=tel],
.sfp-form-wrap input[type=number],
.sfp-form-wrap input[type=url],
.sfp-form-wrap input[type=date],
.sfp-form-wrap textarea,
.sfp-form-wrap select {
  /* These reinforce the .sfp-input rules above in case theme selectors
     are more specific and override our class-based styles */
  border:        1.5px solid var(--sfp-border-color) !important;
  border-radius: var(--sfp-radius) !important;
  padding:       var(--sfp-input-pad) !important;
  font-family:   inherit !important;
  font-size:     inherit !important;
  width:         100% !important;
  background:    #fff !important;
  color:         inherit !important;
  outline:       none;
  -webkit-appearance: none;
  appearance:    none;
  box-shadow:    none;
  margin:        0;
  line-height:   1.5;
  transition:    border-color .18s, box-shadow .18s;
}
.sfp-form-wrap input[type=text]:focus,
.sfp-form-wrap input[type=email]:focus,
.sfp-form-wrap input[type=tel]:focus,
.sfp-form-wrap input[type=number]:focus,
.sfp-form-wrap input[type=url]:focus,
.sfp-form-wrap input[type=date]:focus,
.sfp-form-wrap textarea:focus,
.sfp-form-wrap select:focus {
  border-color: var(--sfp-accent) !important;
  box-shadow:   0 0 0 3px var(--sfp-accent-light) !important;
  outline:      none;
}
.sfp-form-wrap input[type=text].sfp-invalid,
.sfp-form-wrap input[type=email].sfp-invalid,
.sfp-form-wrap input[type=tel].sfp-invalid,
.sfp-form-wrap textarea.sfp-invalid,
.sfp-form-wrap select.sfp-invalid {
  border-color: #e53e3e !important;
  box-shadow:   0 0 0 3px rgba(229,62,62,.12) !important;
}

/* Don't let themes style our submit button in unwanted ways,
   but DO let the theme's own button font/size come through */
.sfp-form-wrap .sfp-submit-btn {
  -webkit-appearance: none !important;
  appearance:         none !important;
  background:         var(--sfp-accent) !important;
  color:              #fff !important;
  border:             none !important;
  box-shadow:         none;
  text-shadow:        none;
  text-transform:     none;
  letter-spacing:     normal;
}
.sfp-form-wrap .sfp-submit-btn:hover:not(:disabled) {
  background: var(--sfp-accent-dark) !important;
  color:      #fff !important;
}

/* Radio/checkbox inputs should not get border from theme */
.sfp-form-wrap input[type=radio],
.sfp-form-wrap input[type=checkbox] {
  width:   auto !important;
  height:  auto !important;
  padding: 0 !important;
  border:  none !important;
  box-shadow: none !important;
  background: none !important;
}