/* ==========================================================
   FORMINATOR CUSTOM STYLING — all forms
   Matches the multi-step contact form design (contact.astro)

   Tokens:
   ink            #1C1A17
   warm bg        #FDFBF7
   accent-primary #E67E65
   accent-2nd     #F5F2EB
   ========================================================== */

/* 1. Form container */
.forminator-custom-form{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  color: #1C1A17 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Progress indicator
   DOM: .forminator-pagination-progress > .forminator-progress-label
        + .forminator-progress-bar > span */
.forminator-custom-form .forminator-pagination-progress {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
}

.forminator-custom-form .forminator-progress-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(28, 26, 23, 0.65) !important;
  order: 2 !important;
  margin-left: auto !important;
}

/* Left-side caption mirroring "Inquiry Progress" on contact.astro */
.forminator-custom-form .forminator-pagination-progress::before {
  content: "Vprašalnik";
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(28, 26, 23, 0.65);
  order: 1;
}

.forminator-custom-form .forminator-progress-bar {
  order: 3 !important;
  flex-basis: 100% !important;
  height: 2px !important;
  background-color: rgba(28, 26, 23, 0.05) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}

.forminator-custom-form .forminator-progress-bar span {
  display: block !important;
  height: 100% !important;
  background-color: #E67E65 !important;
  border-radius: 9999px !important;
  transition: width 0.5s ease-out !important;
}

/* 3. Step questions as serif headings (radio + textarea fields) */
.forminator-custom-form .forminator-field-radio .forminator-label,
.forminator-custom-form .forminator-field-textarea .forminator-label {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.05em !important;
  text-transform: none !important;
  color: #1C1A17 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Helper text under questions (edit the actual copy in the form
   builder — each field's "Description" setting) */
.forminator-custom-form .forminator-description {
  font-size: 14px !important;
  color: rgba(28, 26, 23, 0.6) !important;
  margin: 0 0 20px !important;
  display: block !important;
}

/* 4. Standard field labels (text, url, select, name, email, phone) */
.forminator-custom-form .forminator-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(28, 26, 23, 0.8) !important;
  margin-bottom: 8px !important;
}

/* 5. Field spacing */
.forminator-custom-form .forminator-row {
  margin-bottom: 20px !important;
}

/* 6. Inputs & textarea — matches: border ink/10, bg accent-2nd/35,
   rounded-lg, px-4 py-3, focus border accent/50 + 1px ring accent/30 */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(28, 26, 23, 0.1) !important;
  background-color: rgba(245, 242, 235, 0.35) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #1C1A17 !important;
  transition: all 0.2s ease !important;
}

.forminator-custom-form .forminator-input::placeholder,
.forminator-custom-form .forminator-textarea::placeholder {
  color: rgba(28, 26, 23, 0.3) !important;
}

.forminator-custom-form .forminator-textarea {
  min-height: 160px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus,
.forminator-custom-form .forminator-select--field:focus {
  outline: none !important;
  border-color: rgba(230, 126, 101, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(230, 126, 101, 0.3) !important;
}

/* 7. Select — native element (select2 is NOT initialized with
   design "none"), custom chevron like contact.astro */
.forminator-custom-form .forminator-select--field {
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  border: 1px solid rgba(28, 26, 23, 0.1) !important;
  background-color: rgba(245, 242, 235, 0.35) !important;
  border-radius: 8px !important;
  padding: 12px 40px 12px 16px !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 16px !important;
  color: #1C1A17 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231C1A17' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
}

/* 8. Radio option cards */
.forminator-custom-form .forminator-field-radio .forminator-field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.forminator-custom-form .forminator-radio {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  border: 1px solid rgba(28, 26, 23, 0.1) !important;
  background-color: rgba(245, 242, 235, 0.3) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.forminator-custom-form .forminator-radio:hover {
  border-color: rgba(230, 126, 101, 0.45) !important;
}

.forminator-custom-form .forminator-radio:has(input:checked) {
  border-color: #E67E65 !important;
  background-color: rgba(230, 126, 101, 0.04) !important;
}

/* Hide native radio input */
.forminator-custom-form .forminator-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Custom bullet: 16px ring, 6px accent dot when checked */
.forminator-custom-form .forminator-radio-bullet {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 !important;
  border: 1px solid rgba(28, 26, 23, 0.3) !important;
  background-color: #FDFBF7 !important;
  border-radius: 50% !important;
  position: static !important;
  transition: all 0.2s ease !important;
}

.forminator-custom-form .forminator-radio input:checked + .forminator-radio-bullet {
  border-color: #E67E65 !important;
  background-color: #E67E65 !important;
  box-shadow: inset 0 0 0 4px #FDFBF7 !important;
}

.forminator-custom-form .forminator-radio-label {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1C1A17 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Keyboard-only focus ring on cards */
.forminator-custom-form .forminator-radio:has(input:focus-visible) {
  outline: 2px solid #E67E65 !important;
  outline-offset: 2px !important;
}

/* 9. Pagination footer & buttons
   DOM: .forminator-pagination-footer > .forminator-button-back /
   .forminator-button-next / .forminator-pagination-submit */
.forminator-custom-form .forminator-pagination-footer {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(28, 26, 23, 0.05) !important;
}

.forminator-custom-form .forminator-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.forminator-custom-form .forminator-button-next,
.forminator-custom-form .forminator-button-submit,
.forminator-custom-form .forminator-pagination-submit {
  background-color: #E67E65 !important;
  color: #FDFBF7 !important;
  border: none !important;
  margin-left: auto !important;
}

.forminator-custom-form .forminator-button-next:hover,
.forminator-custom-form .forminator-button-submit:hover,
.forminator-custom-form .forminator-pagination-submit:hover {
  background-color: #1C1A17 !important;
  color: #FDFBF7 !important;
}

.forminator-custom-form .forminator-button-back {
  background-color: transparent !important;
  border: 1px solid rgba(28, 26, 23, 0.2) !important;
  color: #1C1A17 !important;
  margin-right: auto !important;
}

.forminator-custom-form .forminator-button-back:hover {
  background-color: rgba(245, 242, 235, 0.5) !important;
}

/* Keep Forminator's hidden/disabled states working despite the
   display overrides above */
.forminator-custom-form .forminator-button.forminator-hidden,
.forminator-custom-form .forminator-button[style*="display: none"] {
  display: none !important;
}

.forminator-custom-form .forminator-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 10. Validation & response messages */
.forminator-custom-form .forminator-error-message {
  display: block !important;
  color: #E67E65 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

.forminator-custom-form .forminator-field.forminator-has-error .forminator-input,
.forminator-custom-form .forminator-field.forminator-has-error .forminator-textarea,
.forminator-custom-form .forminator-field.forminator-has-error .forminator-select--field {
  border-color: #E67E65 !important;
}

.forminator-custom-form .forminator-response-message.forminator-error {
  background-color: rgba(230, 126, 101, 0.1) !important;
  border: 1px solid rgba(230, 126, 101, 0.3) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  color: #E67E65 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.forminator-custom-form .forminator-response-message[aria-hidden="true"] {
  display: none !important;
}

/* 11. Success message — mirrors #success-state card on contact.astro */
.forminator-custom-form .forminator-response-message.forminator-success {
  background-color: rgba(245, 242, 235, 0.3) !important;
  border: 1px solid rgba(28, 26, 23, 0.05) !important;
  border-radius: 8px !important;
  padding: 32px !important;
  color: rgba(28, 26, 23, 0.7) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}