/* ==========================================================================
   JF Portfolio 2026 — WPForms Theme Styles
   Uses .wpforms-container as parent for specificity over WPForms' own sheet.
   ========================================================================== */

/* ── Field layout ────────────────────────────────────────────────────────── */

.wpforms-container .wpforms-field {
  margin-bottom: 20px;
  padding:       0 !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */

.wpforms-container .wpforms-field-label {
  display:        block;
  margin-bottom:  8px;
  font-size:      14px;
  font-weight:    600;
  color:          var(--text) !important;
  letter-spacing: 0.01em;
}

.wpforms-container .wpforms-field-label .wpforms-required-label {
  color: var(--orange) !important;
}

.wpforms-container .wpforms-field-sublabel {
  font-size:  12px;
  color:      var(--muted-2) !important;
  margin-top: 4px;
}

.wpforms-container .wpforms-field-description {
  font-size:  13px;
  color:      var(--muted-2) !important;
  margin-top: 6px;
}

/* ── Field containers & size classes — full width ────────────────────────── */

.wpforms-container .wpforms-field-row,
.wpforms-container .wpforms-field-row-block,
.wpforms-container .wpforms-one-half,
.wpforms-container .wpforms-one-third,
.wpforms-container .wpforms-two-thirds {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Beat WPForms' (0,3,2) field-medium rule with (0,4,2) */
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-large,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-large {
  width:     100%;
  max-width: 100%;
}

/* ── Inputs, Textarea, Select ────────────────────────────────────────────── */

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field input[type="password"],
.wpforms-container .wpforms-field input[type="date"],
.wpforms-container .wpforms-field input[type="time"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
  width:              100% !important;
  max-width:          100% !important;
  background:         rgba(255, 255, 255, 0.065) !important;
  border:             1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius:      10px !important;
  color:              #ffffff !important;
  font-family:        inherit !important;
  font-size:          15px !important;
  line-height:        1.5 !important;
  padding:            12px 16px !important;
  transition:         border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline:            none !important;
  box-shadow:         none !important;
  -webkit-appearance: none;
  appearance:         none;
  box-sizing:         border-box !important;
}

.wpforms-container .wpforms-field textarea {
  min-height: 140px !important;
  resize:     vertical;
}

.wpforms-container .wpforms-field select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237f8b9a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 14px center !important;
  padding-right:       40px !important;
  cursor:              pointer;
}

/* Focus */
.wpforms-container .wpforms-field input[type="text"]:focus,
.wpforms-container .wpforms-field input[type="email"]:focus,
.wpforms-container .wpforms-field input[type="tel"]:focus,
.wpforms-container .wpforms-field input[type="url"]:focus,
.wpforms-container .wpforms-field input[type="number"]:focus,
.wpforms-container .wpforms-field input[type="password"]:focus,
.wpforms-container .wpforms-field input[type="date"]:focus,
.wpforms-container .wpforms-field input[type="time"]:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus {
  border-color: #ff7a1a !important;
  background:   rgba(255, 255, 255, 0.07) !important;
  box-shadow:   0 0 0 3px rgba(255, 122, 26, 0.15) !important;
}

/* Placeholder */
.wpforms-container .wpforms-field input::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
  color:   #7f8b9a !important;
  opacity: 1;
}

/* ── Checkboxes & Radios ─────────────────────────────────────────────────── */

.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline,
.wpforms-container .wpforms-field-radio    .wpforms-field-label-inline {
  color:       var(--muted) !important;
  font-size:   14px;
  font-weight: 400;
}

.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio    li {
  margin-bottom: 8px;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio    input[type="radio"] {
  width:        18px !important;
  height:       18px !important;
  border:       2px solid rgba(255, 255, 255, 0.12) !important;
  background:   rgba(255, 255, 255, 0.065) !important;
  accent-color: #ff7a1a;
  cursor:       pointer;
  flex-shrink:  0;
}

/* ── Submit Button ───────────────────────────────────────────────────────── */

.wpforms-container .wpforms-submit-container {
  margin-top: 8px;
}

/* Specificity (0,3,2) — beats WPForms' (0,2,2) without !important */
div.wpforms-container-full button.wpforms-submit[type=submit] {
  display:             inline-flex;
  align-items:         center;
  height:              auto;
  padding:             13px 28px;
  border-radius:       100px;
  font-family:         inherit;
  font-size:           15px;
  font-weight:         700;
  letter-spacing:      0.02em;
  line-height:         1;
  cursor:              pointer;
  border:              none;
  outline:             none;
  color:               #07111b;
  background:          linear-gradient(to right, #ffb060 0%, #ff7a1a 50%);
  background-size:     200% 100%;
  background-position: right center;
  box-shadow:          none;
  text-transform:      none;
  transition:          background-position 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

div.wpforms-container-full button.wpforms-submit[type=submit]:hover {
  background-position: left center;
  color:               #ffffff;
  transform:           translateY(-1px);
}

/* ── Validation Errors ───────────────────────────────────────────────────── */

.wpforms-container .wpforms-field .wpforms-error {
  display:    block;
  margin-top: 6px;
  font-size:  12px;
  color:      #f87171 !important;
}

.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error {
  border-color: #f87171 !important;
  box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

/* ── Confirmation / Success ──────────────────────────────────────────────── */

.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  background:    rgba(255, 255, 255, 0.045) !important;
  border:        1px solid rgba(255, 122, 26, 0.35) !important;
  border-radius: 18px !important;
  padding:       28px 32px;
  color:         #ffffff !important;
  font-size:     15px;
  line-height:   1.6;
}

/* Higher specificity (0,2,0) via repeated class — beats .has-*-color
   utility classes the block editor adds to the confirmation message. */
.wpforms-confirmation-container-full.wpforms-confirmation-container-full *,
.wpforms-confirmation-container.wpforms-confirmation-container * {
  color: #ffffff !important;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

.wpforms-container .wpforms-page-indicator-page-title {
  color:       var(--text) !important;
  font-weight: 700;
}

.wpforms-container .wpforms-page-indicator-steps {
  color: var(--muted-2) !important;
}

.wpforms-container .wpforms-progress-bar {
  background:    rgba(255, 255, 255, 0.065);
  border-radius: 100px;
  overflow:      hidden;
}

.wpforms-container .wpforms-progress-bar-inner {
  background:    #ff7a1a;
  border-radius: 100px;
  transition:    width 0.4s ease;
}