/* OCTOSAN — Contact section refinement
   Targets the #contact section + Forminator form (#forminator-module-198).
   Scoped via #contact so we don't bleed into other forms on the site. */

/* ── Section frame ────────────────────────────────────────────────── */
#contact {
  --octosan-teal: rgba(var(--kubio-color-1), 1);
  --octosan-teal-soft: rgba(var(--kubio-color-1), 0.12);
  --octosan-teal-deep: rgba(var(--kubio-color-1-variant-4), 1);
  --octosan-ink: #1a2734;
  --octosan-ink-soft: #5a6573;
  --octosan-line: rgba(20, 35, 50, 0.10);
  --octosan-radius: 14px;
}

/* Left info card — tidy spacing between title, address, phone, email blocks */
#contact .wp-block-kubio-row > .wp-block-kubio-column:first-child .wp-block-kubio-text + .wp-block-kubio-text {
  margin-top: 0.6em;
}
#contact .wp-block-kubio-heading {
  letter-spacing: -0.01em;
}

/* ── Form container ─────────────────────────────────────────────── */
#contact .forminator-ui.forminator-custom-form {
  font-family: inherit;
}
#contact .forminator-row {
  margin: 0 0 18px !important;
  padding: 0 !important;
}
#contact .forminator-row-last { margin-bottom: 0 !important; }
#contact .forminator-field {
  position: relative;
  padding: 0 !important;
}

/* ── Labels ─────────────────────────────────────────────────────── */
#contact .forminator-label {
  display: block;
  margin: 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--octosan-ink-soft) !important;
  line-height: 1.4 !important;
}
#contact .forminator-required {
  color: var(--octosan-teal) !important;
  margin-left: 2px;
  font-weight: 700;
}

/* ── Inputs / textarea ──────────────────────────────────────────── */
#contact .forminator-input,
#contact .forminator-textarea,
#contact input[type="text"].forminator-input,
#contact input[type="email"].forminator-input,
#contact input[type="tel"].forminator-input,
#contact .forminator-field--phone {
  width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--octosan-ink) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--octosan-line) !important;
  border-radius: var(--octosan-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  font-family: inherit !important;
  appearance: none !important;
}
#contact .forminator-textarea {
  min-height: 130px !important;
  resize: vertical;
  padding-top: 14px !important;
}

/* Hover */
#contact .forminator-input:hover,
#contact .forminator-textarea:hover {
  border-color: rgba(20, 35, 50, 0.18) !important;
  background: #fbfcfd !important;
}

/* Focus — brand teal ring */
#contact .forminator-input:focus,
#contact .forminator-input:focus-visible,
#contact .forminator-textarea:focus,
#contact .forminator-textarea:focus-visible {
  outline: none !important;
  border-color: var(--octosan-teal) !important;
  box-shadow: 0 0 0 4px var(--octosan-teal-soft) !important;
  background: #ffffff !important;
}

/* Placeholder */
#contact .forminator-input::placeholder,
#contact .forminator-textarea::placeholder {
  color: rgba(20, 35, 50, 0.35) !important;
}

/* Phone field — Forminator wraps with intlTelInput, tidy that up */
#contact .iti { width: 100% !important; }
#contact .iti__flag-container { border-radius: var(--octosan-radius) 0 0 var(--octosan-radius) !important; }

/* ── Character counter / description ────────────────────────────── */
#contact .forminator-description {
  display: block !important;
  margin: 6px 4px 0 !important;
  font-size: 11px !important;
  color: rgba(20, 35, 50, 0.4) !important;
  text-align: right !important;
  letter-spacing: 0.04em;
}

/* ── Submit button ──────────────────────────────────────────────── */
#contact .forminator-row-last { margin-top: 8px !important; }
#contact .forminator-button-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--octosan-teal) !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(var(--kubio-color-1), 0.55),
              0 2px 6px  -2px rgba(var(--kubio-color-1), 0.30) !important;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
              background-color 0.25s ease !important;
}
#contact .forminator-button-submit::after {
  content: "→";
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
#contact .forminator-button-submit:hover {
  background: var(--octosan-teal-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(var(--kubio-color-1), 0.65),
              0 4px 10px  -4px rgba(var(--kubio-color-1), 0.35) !important;
}
#contact .forminator-button-submit:hover::after {
  transform: translateX(4px);
}
#contact .forminator-button-submit:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}
#contact .forminator-button-submit:focus-visible {
  outline: 3px solid var(--octosan-teal-soft);
  outline-offset: 2px;
}

/* ── Validation / notices — replace the harsh black borders ────── */
#contact .forminator-response-message,
#contact .forminator-error-message {
  border: 0 !important;
  border-radius: var(--octosan-radius) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
#contact .forminator-response-message.forminator-error,
#contact .forminator-error-message {
  background: rgba(220, 53, 69, 0.08) !important;
  color: #b32130 !important;
  border-left: 3px solid #dc3545 !important;
}
#contact .forminator-response-message.forminator-success {
  background: rgba(34, 167, 110, 0.10) !important;
  color: #157a4d !important;
  border-left: 3px solid #22a76e !important;
}
#contact .forminator-response-message.forminator-info {
  background: rgba(var(--kubio-color-1), 0.10) !important;
  color: var(--octosan-teal-deep) !important;
  border-left: 3px solid var(--octosan-teal) !important;
}
#contact .forminator-field-error .forminator-input,
#contact .forminator-field-error .forminator-textarea,
#contact .forminator-has_error .forminator-input,
#contact .forminator-has_error .forminator-textarea {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 4px rgba(220,53,69,0.10) !important;
}

/* ── Field reveal on view (uses existing octosan-anim system) ──── */
@media (prefers-reduced-motion: no-preference) {
  #contact .forminator-row {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
                transform 0.6s cubic-bezier(0.22,1,0.36,1);
  }
  #contact.is-in-view .forminator-row { opacity: 1; transform: none; }
  #contact.is-in-view .forminator-row:nth-of-type(1) { transition-delay: 0.05s; }
  #contact.is-in-view .forminator-row:nth-of-type(2) { transition-delay: 0.13s; }
  #contact.is-in-view .forminator-row:nth-of-type(3) { transition-delay: 0.21s; }
  #contact.is-in-view .forminator-row:nth-of-type(4) { transition-delay: 0.29s; }
  #contact.is-in-view .forminator-row:nth-of-type(5) { transition-delay: 0.37s; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #contact .forminator-button-submit {
    width: 100%;
    justify-content: center;
  }
}