/**
 * BHS Homecare — Premium JotForm embed theming
 * Deep Teal #0D9488 · Navy #0F172A
 *
 * HOW TO USE
 * ----------
 * 1) Preferred: JotForm Form Builder → Settings / Form Designer → Inject Custom CSS
 *    Paste this entire file (or the rules inside) so styles apply inside the form.
 * 2) Host shell: pages already use .bhs-jotform-shell / .jotform-host for outer chrome.
 * 3) Limitations: Cross-origin iframes cannot be fully styled from the parent page.
 *    Inject CSS in JotForm (or use JotForm theme) for inputs/buttons inside the form.
 * 4) Do NOT replace existing forms — only re-skin and improve embed UX.
 */

/* ========== Host page shell (parent site) ========== */
.bhs-jotform-shell,
.jotform-host {
  --bhs-teal: #0d9488;
  --bhs-teal-dark: #0f766e;
  --bhs-navy: #0f172a;
  --bhs-border: rgba(15, 23, 42, 0.1);
  --bhs-muted: #64748b;
  --bhs-radius: 12px;
  --bhs-focus: #0d9488;
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid var(--bhs-border);
  box-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.bhs-jotform-shell iframe,
.jotform-host iframe {
  width: 100% !important;
  min-height: 560px;
  border: 0 !important;
  display: block;
  background: #fff;
}

/* Progress / loading affordance while iframe loads */
.bhs-jotform-shell::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #0d9488, #1e40af, #0d9488);
  background-size: 200% 100%;
  animation: bhs-shimmer 1.8s ease infinite;
}
@keyframes bhs-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bhs-jotform-shell::before {
    animation: none;
    background: #0d9488;
  }
}

/* ========== Inject BELOW into JotForm Custom CSS ========== */
/*
 * Copy from .form-all onward into JotForm's Inject CSS panel.
 */

.form-all {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: #0f172a !important;
  background: #ffffff !important;
  max-width: 100% !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 auto !important;
  padding: 8px 4px 24px !important;
}

.form-header-group .form-header,
.form-header {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  font-size: 1.5rem !important;
}

.form-subHeader,
.form-sub-header {
  color: #64748b !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

.form-label,
.form-label-top,
.form-label-left {
  font-weight: 600 !important;
  color: #334155 !important;
  font-size: 0.875rem !important;
  margin-bottom: 6px !important;
}

.form-textbox,
.form-textarea,
.form-dropdown,
.form-radio,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 16px !important; /* prevents iOS zoom */
  line-height: 1.4 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  min-height: 46px !important;
}

.form-textarea,
textarea {
  min-height: 120px !important;
}

.form-textbox:hover,
.form-textarea:hover,
.form-dropdown:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: #cbd5e1 !important;
}

.form-textbox:focus,
.form-textarea:focus,
.form-dropdown:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18) !important;
}

/* Required asterisk */
.form-required {
  color: #0d9488 !important;
}

/* Error states */
.form-line-error .form-error-message,
.form-error-message {
  color: #b91c1c !important;
  font-size: 0.8rem !important;
}
.form-line-error input,
.form-line-error textarea,
.form-line-error select {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

/* Radio / checkbox */
.form-radio-item label,
.form-checkbox-item label {
  font-weight: 500 !important;
  color: #334155 !important;
  padding: 6px 0 !important;
}

.form-radio-item:hover,
.form-checkbox-item:hover {
  background: #f0fdfa !important;
  border-radius: 8px !important;
}

/* Primary submit button */
.form-submit-button,
.form-submit-button:visited,
button[type="submit"],
.jf-form-buttons button {
  background: #0d9488 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  min-height: 48px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 10px 24px -12px rgba(13, 148, 136, 0.75) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}

.form-submit-button:hover,
button[type="submit"]:hover {
  background: #0f766e !important;
  transform: translateY(-1px) !important;
}

.form-submit-button:focus-visible,
button[type="submit"]:focus-visible {
  outline: 3px solid #0d9488 !important;
  outline-offset: 3px !important;
}

.form-submit-button:active {
  transform: translateY(0) !important;
}

/* Secondary / back buttons */
.form-pagebreak-back,
.form-pagebreak-next {
  border-radius: 12px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
}
.form-pagebreak-next {
  background: #0d9488 !important;
  color: #fff !important;
  border: none !important;
}
.form-pagebreak-back {
  background: #fff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
}

/* Multi-page progress */
.form-pagebreak,
.jfWizard-progress,
.form-progress {
  color: #0d9488 !important;
}
.form-progress-bar,
.jfWizard-progress-bar,
[class*="progress"] > div {
  background-color: #0d9488 !important;
}

/* Section dividers */
.form-section,
.form-line {
  margin-bottom: 6px !important;
}

/* File upload */
.form-input-wide .qq-upload-button,
.form-file-upload,
.qq-upload-button {
  border-radius: 12px !important;
  border: 1.5px dashed #99f6e4 !important;
  background: #f0fdfa !important;
  color: #0f766e !important;
  font-weight: 600 !important;
}

/* Success / thank you */
.form-success,
.thankyou-wrapper,
.jfThankYou-wrapper {
  font-family: Inter, system-ui, sans-serif !important;
  color: #0f172a !important;
}
.form-success h1,
.thankyou-wrapper h1 {
  color: #0f766e !important;
}

/* Mobile */
@media (max-width: 480px) {
  .form-all {
    padding: 4px 2px 20px !important;
  }
  .form-submit-button,
  button[type="submit"] {
    width: 100% !important;
  }
  .form-label-left {
    width: 100% !important;
  }
}

/* High contrast / reduced motion */
@media (prefers-reduced-motion: reduce) {
  .form-textbox,
  .form-submit-button,
  input,
  textarea,
  select {
    transition: none !important;
  }
  .form-submit-button:hover {
    transform: none !important;
  }
}