/* =====================================================================
 * Forms 2026 — visual overhaul for all multistep lead forms.
 *
 * Targets: #lead-form-estimate, #lead-form-rent, #lead-form-sell,
 *          #lead-form-buy, #lead-form-finance (on homepage),
 *          plus the standalone /odhad/ form.
 *
 * Rules:
 *   - DO NOT change any field names, IDs, classes used by JS.
 *   - DO NOT change question copy.
 *   - ONLY visual polish + mobile fixes.
 *
 * High-specificity selectors below to override the older inline styles
 * in index.php / odhad. Selectors of the form `body .lead-forms .X`
 * give specificity 0,3,1 — beats most existing rules.
 * ===================================================================== */

/* -- Scroll lock without the jump ----------------------------------- */
/* The original `body.form-open { position: fixed }` rule in index.php
   causes the page to flash to the top when a modal opens. We use
   `html { overflow: hidden }` instead (set by form-modal-extras.js).
   Override the legacy rule here so position never flips to fixed. */
body.form-open {
  position: static !important;
  top: auto !important;
  width: auto !important;
  overflow: hidden !important;
}

/* -- Modal scrim ---------------------------------------------------- */
body .lead-forms {
  background: rgba(10, 19, 33, 0.78) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  padding: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
@media (min-width: 769px) {
  body .lead-forms { padding: 28px !important; }
}

/* -- Container ------------------------------------------------------ */
body .lead-forms .lead-form-container {
  background: #ffffff !important;
  border-radius: 20px !important;
  max-width: 480px !important;
  width: 100% !important;
  max-height: calc(100vh - 32px) !important;
  height: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 24px 60px rgba(10, 19, 33, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
@media (min-width: 769px) {
  body .lead-forms .lead-form-container {
    max-width: 540px !important;
    max-height: min(680px, calc(100vh - 56px)) !important;
  }
}

/* -- Header --------------------------------------------------------- */
body .lead-forms .lead-form-header {
  background:
    radial-gradient(circle at 85% -10%, rgba(213, 169, 83, 0.22), transparent 55%),
    linear-gradient(135deg, #0a1d33 0%, #163b62 100%) !important;
  color: #ffffff !important;
  padding: 22px 22px 22px !important;
  text-align: center !important;
  position: relative !important;
  border-radius: 20px 20px 0 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
body .lead-forms .lead-form-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #e8c980, #d5a953, #e8c980) !important;
}
body .lead-forms .lead-form-header h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
}
body .lead-forms .lead-form-header h2 i {
  color: #e0b973 !important;
  font-size: 18px !important;
}
body .lead-forms .lead-form-header p {
  font-size: 13.5px !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.5 !important;
}
@media (min-width: 769px) {
  body .lead-forms .lead-form-header { padding: 28px 32px 30px !important; }
  body .lead-forms .lead-form-header h2 { font-size: 23px !important; }
  body .lead-forms .lead-form-header h2 i { font-size: 20px !important; }
  body .lead-forms .lead-form-header p { font-size: 14px !important; }
}
@media (min-width: 769px) {
  body .lead-forms .lead-form-container { border-radius: 20px !important; }
  body .lead-forms .lead-form-header { border-radius: 20px 20px 0 0 !important; }
}

/* -- Close button --------------------------------------------------- */
body .lead-forms .close-form {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 36px !important; height: 36px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
}
body .lead-forms .close-form:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* -- Body ------------------------------------------------------------ */
body .lead-forms .lead-form-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 22px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #fafbfd !important;
}
@media (min-width: 769px) {
  body .lead-forms .lead-form-body { padding: 28px 32px 0 !important; }
}

/* -- Progress -------------------------------------------------------- */
body .lead-forms .form-progress-container {
  margin: 0 0 20px !important;
  flex-shrink: 0 !important;
}
body .lead-forms .form-progress-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
body .lead-forms .form-progress-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #6c7a8c !important;
  margin: 0 !important;
}
body .lead-forms .form-progress-percentage {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #c9952a !important;
  margin: 0 !important;
}
body .lead-forms .form-progress-bar-container {
  width: 100% !important;
  height: 5px !important;
  background: rgba(15, 47, 79, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative !important;
}
body .lead-forms .form-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d5a953, #e8c980) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(213, 169, 83, 0.4) !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .lead-forms .form-progress-bar-fill::after {
  display: none !important;
}

/* -- Step title / subtitle ------------------------------------------ */
body .lead-forms .form-step-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
body .lead-forms .form-step-subtitle {
  font-size: 13.5px !important;
  color: #6c7a8c !important;
  margin: 0 0 22px !important;
  text-align: left !important;
  line-height: 1.5 !important;
}
@media (min-width: 769px) {
  body .lead-forms .form-step-title { font-size: 22px !important; }
  body .lead-forms .form-step-subtitle { font-size: 14px !important; margin-bottom: 24px !important; }
}

/* -- Form fields ----------------------------------------------------- */
body .lead-forms .form-group {
  margin-bottom: 16px !important;
}
body .lead-forms .form-group label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4a5d75 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.2px !important;
}
body .lead-forms .form-group input,
body .lead-forms .form-group select,
body .lead-forms .form-group textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #0f2f4f !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 47, 79, 0.10) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 2px rgba(15, 47, 79, 0.04),
    inset 0 0 0 0 rgba(213, 169, 83, 0) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
}
body .lead-forms .form-group input::placeholder,
body .lead-forms .form-group textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
body .lead-forms .form-group input:focus,
body .lead-forms .form-group select:focus,
body .lead-forms .form-group textarea:focus {
  border-color: #d5a953 !important;
  box-shadow: 0 0 0 4px rgba(213, 169, 83, 0.15) !important;
  background: #ffffff !important;
}
body .lead-forms .form-group input.field-invalid,
body .lead-forms .form-group select.field-invalid,
body .lead-forms .form-group textarea.field-invalid {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1) !important;
}
body .lead-forms .form-group input.field-valid,
body .lead-forms .form-group select.field-valid,
body .lead-forms .form-group textarea.field-valid {
  border-color: #2ecc71 !important;
}
body .lead-forms .form-group textarea {
  resize: vertical !important;
  min-height: 110px !important;
  line-height: 1.5 !important;
}
body .lead-forms .form-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7a8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

/* Phone field — split prefix + number */
body .lead-forms .form-group.phone-group,
body .lead-forms .form-group[data-field-type="tel"] {
  display: flex !important;
  flex-direction: column !important;
}
body .lead-forms .form-group[data-field-type="tel"] .phone-field-wrapper,
body .lead-forms .form-group .phone-field-wrapper {
  display: flex !important;
  gap: 8px !important;
}
body .lead-forms .form-group .phone-prefix {
  flex: 0 0 80px !important;
  width: 80px !important;
}
body .lead-forms .form-group .phone-field-wrapper input[type="tel"] {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Required mark */
body .lead-forms .form-group label .required,
body .lead-forms .form-group label::after {
  color: #c9952a !important;
}

/* -- File upload ----------------------------------------------------- */
body .lead-forms .file-upload-area {
  border: 1.5px dashed rgba(213, 169, 83, 0.5) !important;
  border-radius: 12px !important;
  padding: 28px 18px !important;
  background: rgba(245, 230, 192, 0.18) !important;
  text-align: center !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  cursor: pointer !important;
}
body .lead-forms .file-upload-area:hover {
  border-color: #d5a953 !important;
  background: rgba(245, 230, 192, 0.32) !important;
}
body .lead-forms .file-upload-area i {
  font-size: 28px !important;
  color: #d5a953 !important;
  margin-bottom: 10px !important;
}
body .lead-forms .file-upload-area p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f2f4f !important;
  margin: 0 0 4px !important;
}
body .lead-forms .file-upload-area small {
  font-size: 11.5px !important;
  color: #6c7a8c !important;
}

/* -- Navigation footer (sticky) ------------------------------------- */
body .lead-forms .form-navigation {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 47, 79, 0.08) !important;
  position: sticky !important;
  bottom: 0 !important;
  margin: 0 -20px !important;
  box-shadow: 0 -4px 16px rgba(15, 47, 79, 0.06) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}
@media (min-width: 769px) {
  body .lead-forms .form-navigation {
    padding: 16px 32px !important;
    margin: 0 -32px !important;
  }
}
/* No `display: !important` here — JS sets inline `style="display:none"`
   on hidden nav buttons (e.g. Zpět on step 1) and we must not override it. */
body .lead-forms .form-nav-button {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  font-family: inherit;
  min-height: 52px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
body .lead-forms .form-nav-button:not([style*="display: none"]):not([style*="display:none"]) {
  display: inline-flex !important;
}
body .lead-forms .form-nav-button.prev {
  flex: 0 0 auto !important;
  background: transparent !important;
  color: #4a5d75 !important;
  border: 1.5px solid rgba(15, 47, 79, 0.15) !important;
  padding: 13px 18px !important;
}
body .lead-forms .form-nav-button.prev:hover {
  background: rgba(15, 47, 79, 0.04) !important;
  border-color: rgba(15, 47, 79, 0.3) !important;
}
body .lead-forms .form-nav-button.next,
body .lead-forms .form-nav-button.submit {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(135deg, #e8c980 0%, #d5a953 60%, #c9952a 100%) !important;
  color: #0f2f4f !important;
  box-shadow:
    0 8px 20px rgba(213, 169, 83, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body .lead-forms .form-nav-button.next:hover,
body .lead-forms .form-nav-button.submit:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 26px rgba(213, 169, 83, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
body .lead-forms .form-nav-button.next:active,
body .lead-forms .form-nav-button.submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(213, 169, 83, 0.3) !important;
}
body .lead-forms .form-nav-button:disabled,
body .lead-forms .form-nav-button[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
body .lead-forms .form-nav-button .spinner { font-size: 16px !important; }

/* -- Form alerts (success/error) ------------------------------------ */
body .lead-forms .form-alert {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
body .lead-forms .form-alert-success {
  background: #e8f7ee !important;
  color: #1b6b3a !important;
  border: 1px solid #b8e3c8 !important;
}
body .lead-forms .form-alert-error {
  background: #fdecea !important;
  color: #a02622 !important;
  border: 1px solid #f3c7c2 !important;
}

/* -- Field error ----------------------------------------------------- */
body .lead-forms .field-error {
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #e74c3c !important;
}

/* When any lead-form modal is open, hide floating action buttons that
   overlap the form. The real classes (per ui-extras.js) are:
     - .quick-actions  → wrapper
     - .qa-whatsapp / .qa-phone  → individual buttons
   Plus legacy .whatsapp-float / .phone-float kept as safety.
   `:has()` supported in Chrome 105+, Safari 15.4+, Firefox 121+. */
body:has(.lead-forms.active) .quick-actions,
body:has(.lead-forms.active) .qa-whatsapp,
body:has(.lead-forms.active) .qa-phone,
body:has(.lead-forms.active) .whatsapp-float,
body:has(.lead-forms.active) .phone-float,
body:has(.lead-forms.active) .floating-cta,
body:has(.lead-forms.active) .scroll-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =====================================================================
 * DYNAMIC MULTISTEP MODALS — built by js/multistep-form.js.
 * Used on /property-detail/ ("Mám zájem o tuto nemovitost") and any
 * other page that calls openMultiStepForm(). Different class names
 * than the static lead-form-* modals, but same visual treatment.
 *
 *   .multistep-form-container ≈ .lead-form-container
 *   .multistep-form-header    ≈ .lead-form-header
 *   .multistep-form-body      ≈ .lead-form-body
 *   .progress-bar-container   ≈ .form-progress-container
 *   .progress-fill            ≈ .form-progress-bar-fill
 *   .progress-text            ≈ .form-progress-header
 *   .progress-percent         ≈ .form-progress-percentage
 *   .step-container           ≈ .form-step-content.active
 *   .step-navigation          ≈ .form-navigation
 *   .btn-back                 ≈ .form-nav-button.prev
 *   .btn-next                 ≈ .form-nav-button.next/.submit
 * ===================================================================== */
body .lead-forms .multistep-form-container {
  background: #ffffff !important;
  border-radius: 20px !important;
  max-width: 480px !important;
  width: 100% !important;
  max-height: calc(100vh - 32px) !important;
  height: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 24px 60px rgba(10, 19, 33, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
@media (min-width: 769px) {
  body .lead-forms .multistep-form-container {
    max-width: 540px !important;
    max-height: min(680px, calc(100vh - 56px)) !important;
  }
}

body .lead-forms .multistep-form-header {
  background:
    radial-gradient(circle at 85% -10%, rgba(213, 169, 83, 0.22), transparent 55%),
    linear-gradient(135deg, #0a1d33 0%, #163b62 100%) !important;
  color: #ffffff !important;
  padding: 22px 22px !important;
  text-align: center !important;
  position: relative !important;
  border-radius: 20px 20px 0 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
body .lead-forms .multistep-form-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #e8c980, #d5a953, #e8c980) !important;
}
body .lead-forms .multistep-form-header h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}
body .lead-forms .multistep-form-header h2 i {
  color: #e0b973 !important;
  font-size: 18px !important;
}
body .lead-forms .multistep-form-header p {
  font-size: 13.5px !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.5 !important;
}

body .lead-forms .multistep-form-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 22px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #fafbfd !important;
}
@media (min-width: 769px) {
  body .lead-forms .multistep-form-body { padding: 26px 28px 0 !important; }
}

/* Progress (dynamic version uses bar-container > bar > fill + text below) */
body .lead-forms .progress-bar-container {
  margin: 18px 20px 0 !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
body .lead-forms .progress-bar {
  width: 100% !important;
  height: 5px !important;
  background: rgba(15, 47, 79, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}
body .lead-forms .progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d5a953, #e8c980) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(213, 169, 83, 0.4) !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .lead-forms .progress-text {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #6c7a8c !important;
}
body .lead-forms .progress-percent {
  color: #c9952a !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

/* Step container */
body .lead-forms .step-container {
  padding: 18px 0 8px !important;
  flex: 1 1 auto !important;
}
body .lead-forms .step-container > h3,
body .lead-forms .step-container > .step-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
body .lead-forms .step-container > p,
body .lead-forms .step-container > .step-subtitle {
  font-size: 13.5px !important;
  color: #6c7a8c !important;
  margin: 0 0 20px !important;
  text-align: left !important;
}

/* Form groups inside dynamic modal */
body .lead-forms .step-container .form-group,
body .lead-forms .step-container .field-group {
  margin-bottom: 16px !important;
}
body .lead-forms .step-container label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4a5d75 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.2px !important;
}
body .lead-forms .step-container input,
body .lead-forms .step-container select,
body .lead-forms .step-container textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #0f2f4f !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 47, 79, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 47, 79, 0.04) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
}
body .lead-forms .step-container input::placeholder,
body .lead-forms .step-container textarea::placeholder {
  color: #94a3b8 !important;
}
body .lead-forms .step-container input:focus,
body .lead-forms .step-container select:focus,
body .lead-forms .step-container textarea:focus {
  border-color: #d5a953 !important;
  box-shadow: 0 0 0 4px rgba(213, 169, 83, 0.15) !important;
  background: #ffffff !important;
}
body .lead-forms .step-container textarea {
  resize: vertical !important;
  min-height: 110px !important;
  line-height: 1.5 !important;
}
body .lead-forms .step-container select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7a8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

/* Navigation buttons for dynamic modal */
body .lead-forms .step-navigation {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 47, 79, 0.08) !important;
  position: sticky !important;
  bottom: 0 !important;
  margin: 0 -20px !important;
  box-shadow: 0 -4px 16px rgba(15, 47, 79, 0.06) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}
@media (min-width: 769px) {
  body .lead-forms .step-navigation {
    padding: 16px 28px !important;
    margin: 0 -28px !important;
  }
}
body .lead-forms .btn-next,
body .lead-forms .btn-back {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s !important;
  font-family: inherit !important;
  min-height: 52px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}
body .lead-forms .btn-back {
  flex: 0 0 auto !important;
  background: transparent !important;
  color: #4a5d75 !important;
  border: 1.5px solid rgba(15, 47, 79, 0.15) !important;
  padding: 13px 18px !important;
}
body .lead-forms .btn-back:hover {
  background: rgba(15, 47, 79, 0.04) !important;
  border-color: rgba(15, 47, 79, 0.3) !important;
}
body .lead-forms .btn-next {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(135deg, #e8c980 0%, #d5a953 60%, #c9952a 100%) !important;
  color: #0f2f4f !important;
  box-shadow:
    0 8px 20px rgba(213, 169, 83, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body .lead-forms .btn-next:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 26px rgba(213, 169, 83, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
body .lead-forms .btn-next:active {
  transform: translateY(0) !important;
}
body .lead-forms .btn-next:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Dynamic modal close button — same as static */
body .lead-forms .multistep-form-header .close-form {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 36px !important; height: 36px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
body .lead-forms .multistep-form-header .close-form:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* =====================================================================
 * /ODHAD/ MODAL — uses .form-modal / .form-modal-content / .form-header /
 * .form-body class names instead of .lead-forms / .lead-form-*. Mirror
 * every visual rule above so the design is identical.
 * ===================================================================== */
body .form-modal {
  background: rgba(10, 19, 33, 0.78) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
  padding: 16px !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (min-width: 769px) {
  body .form-modal { padding: 28px !important; }
}
body .form-modal .form-modal-content {
  background: #ffffff !important;
  border-radius: 20px !important;
  max-width: 480px !important;
  width: 100% !important;
  max-height: calc(100vh - 32px) !important;
  height: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 24px 60px rgba(10, 19, 33, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: cc-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (min-width: 769px) {
  body .form-modal .form-modal-content {
    max-width: 540px !important;
    max-height: min(680px, calc(100vh - 56px)) !important;
  }
}
body .form-modal .form-header {
  background:
    radial-gradient(circle at 85% -10%, rgba(213, 169, 83, 0.22), transparent 55%),
    linear-gradient(135deg, #0a1d33 0%, #163b62 100%) !important;
  color: #ffffff !important;
  padding: 22px 22px !important;
  text-align: center !important;
  position: relative !important;
  border-radius: 20px 20px 0 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
body .form-modal .form-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #e8c980, #d5a953, #e8c980) !important;
}
body .form-modal .form-header h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}
body .form-modal .form-header h2 i {
  color: #e0b973 !important;
  font-size: 18px !important;
}
body .form-modal .form-header p {
  font-size: 13.5px !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.5 !important;
}
body .form-modal .close-form {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 36px !important; height: 36px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
body .form-modal .close-form:hover {
  background: rgba(255,255,255,0.22) !important;
}
body .form-modal .form-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 22px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #fafbfd !important;
}
@media (min-width: 769px) {
  body .form-modal .form-body { padding: 28px 32px 0 !important; }
}

/* /odhad/ uses the same .form-progress-* / .form-step-* / .form-group /
   .form-nav-button class names as the static homepage modals. The rules
   defined above for `body .lead-forms .X` won't match because the
   wrapper is .form-modal. Re-apply scoped to .form-modal. */
body .form-modal .form-progress-container {
  margin: 0 0 20px !important;
  flex-shrink: 0 !important;
}
body .form-modal .form-progress-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
body .form-modal .form-progress-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #6c7a8c !important;
  margin: 0 !important;
}
body .form-modal .form-progress-percentage {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #c9952a !important;
  margin: 0 !important;
}
body .form-modal .form-progress-bar-container {
  width: 100% !important;
  height: 5px !important;
  background: rgba(15, 47, 79, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative !important;
}
body .form-modal .form-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d5a953, #e8c980) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(213, 169, 83, 0.4) !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .form-modal .form-progress-bar-fill::after { display: none !important; }

body .form-modal .form-step-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
body .form-modal .form-step-subtitle {
  font-size: 13.5px !important;
  color: #6c7a8c !important;
  margin: 0 0 22px !important;
  text-align: left !important;
  line-height: 1.5 !important;
}
@media (min-width: 769px) {
  body .form-modal .form-step-title { font-size: 22px !important; }
  body .form-modal .form-step-subtitle { font-size: 14px !important; margin-bottom: 24px !important; }
}

body .form-modal .form-group { margin-bottom: 16px !important; }
body .form-modal .form-group label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4a5d75 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.2px !important;
}
body .form-modal .form-group input,
body .form-modal .form-group select,
body .form-modal .form-group textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #0f2f4f !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 47, 79, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 47, 79, 0.04) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
}
body .form-modal .form-group input:focus,
body .form-modal .form-group select:focus,
body .form-modal .form-group textarea:focus {
  border-color: #d5a953 !important;
  box-shadow: 0 0 0 4px rgba(213, 169, 83, 0.15) !important;
}
body .form-modal .form-group textarea { resize: vertical !important; min-height: 110px !important; }
body .form-modal .form-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7a8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

body .form-modal .form-navigation {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 47, 79, 0.08) !important;
  position: sticky !important;
  bottom: 0 !important;
  margin: 0 -20px !important;
  box-shadow: 0 -4px 16px rgba(15, 47, 79, 0.06) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}
@media (min-width: 769px) {
  body .form-modal .form-navigation { padding: 16px 32px !important; margin: 0 -32px !important; }
}
body .form-modal .form-nav-button {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
  min-height: 52px;
  letter-spacing: 0.2px;
}
body .form-modal .form-nav-button:not([style*="display: none"]):not([style*="display:none"]) {
  display: inline-flex !important;
}
body .form-modal .form-nav-button.prev {
  flex: 0 0 auto !important;
  background: transparent !important;
  color: #4a5d75 !important;
  border: 1.5px solid rgba(15, 47, 79, 0.15) !important;
  padding: 13px 18px !important;
}
body .form-modal .form-nav-button.next,
body .form-modal .form-nav-button.submit {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(135deg, #e8c980 0%, #d5a953 60%, #c9952a 100%) !important;
  color: #0f2f4f !important;
  box-shadow:
    0 8px 20px rgba(213, 169, 83, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body .form-modal .form-nav-button.next:hover,
body .form-modal .form-nav-button.submit:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 26px rgba(213, 169, 83, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* /odhad/ scroll lock — same pattern as .lead-forms */
body:has(.form-modal.active) .quick-actions,
body:has(.form-modal.active) .qa-whatsapp,
body:has(.form-modal.active) .qa-phone,
body:has(.form-modal.active) .scroll-top {
  display: none !important;
}

/* -- Standalone /odhad/ page: same look, but uses different wrapper - */
.estimate-form-wrap .form-progress-container,
.estimate-form .form-progress-container,
form#estimate-form .form-progress-container {
  margin-bottom: 22px;
}

/* /odhad/ standalone form uses identical class names — apply the same
   polish, but scoped so it doesn't fight the modal-only `body .lead-forms`. */
main form#estimate-form { max-width: 720px; margin: 0 auto; }
main form#estimate-form .form-step-title {
  font-size: 22px; font-weight: 700; color: #0f2f4f;
  margin: 0 0 6px; text-align: left; letter-spacing: -0.01em;
}
main form#estimate-form .form-step-subtitle {
  font-size: 14px; color: #6c7a8c; margin: 0 0 22px;
  text-align: left; line-height: 1.5;
}
main form#estimate-form .form-group { margin-bottom: 16px; }
main form#estimate-form .form-group label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: #4a5d75; margin-bottom: 6px; letter-spacing: 0.2px;
}
main form#estimate-form .form-group input,
main form#estimate-form .form-group select,
main form#estimate-form .form-group textarea {
  width: 100%; padding: 13px 14px; font-size: 15px;
  font-family: inherit; color: #0f2f4f; background: #ffffff;
  border: 1.5px solid rgba(15, 47, 79, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 47, 79, 0.03);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; box-sizing: border-box; min-height: 48px;
}
main form#estimate-form .form-group input:focus,
main form#estimate-form .form-group select:focus,
main form#estimate-form .form-group textarea:focus {
  border-color: #d5a953;
  box-shadow: 0 0 0 4px rgba(213, 169, 83, 0.15);
}
main form#estimate-form .form-nav-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 22px; font-size: 15px; font-weight: 600;
  border-radius: 10px; border: 0; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit; min-height: 50px; letter-spacing: 0.2px;
}
main form#estimate-form .form-nav-button.next,
main form#estimate-form .form-nav-button.submit {
  background: linear-gradient(180deg, #e8c980, #d5a953);
  color: #0f2f4f;
  box-shadow: 0 6px 16px rgba(213, 169, 83, 0.32);
}
main form#estimate-form .form-nav-button.next:hover,
main form#estimate-form .form-nav-button.submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(213, 169, 83, 0.42);
}
main form#estimate-form .form-nav-button.prev {
  background: transparent; color: #4a5d75;
  border: 1.5px solid rgba(15, 47, 79, 0.15);
}


/* =====================================================================
 * AGGRESSIVE LAYOUT NORMALIZATION — fixes glitched form layouts caused
 * by inline @media @important rules in odhad/index.html and index.php
 * that set: padding-bottom: 200px, max-height: calc(100% - 100px),
 * overflow-x: visible on .form-step-content, min-height: 400px, etc.
 *
 * Loaded last in cascade. Uses html body modal selector for higher
 * specificity than any @media inline rule (specificity 0,3,3).
 * ===================================================================== */

html body .form-modal,
html body .lead-forms {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 16px !important;
}
@media (min-width: 769px) {
  html body .form-modal,
  html body .lead-forms { padding: 28px !important; }
}

html body .form-modal .form-modal-content,
html body .lead-forms .lead-form-container,
html body .lead-forms .multistep-form-container {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: calc(100vh - 32px) !important;
  height: auto !important;
}

/* Body — single scroll axis, no horizontal shift */
html body .form-modal .form-body,
html body .lead-forms .lead-form-body,
html body .lead-forms .multistep-form-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 20px !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Step content — plain block, no max-height, no padding-bottom hack */
html body .form-modal .form-step-content,
html body .lead-forms .form-step-content,
html body .lead-forms .step-container {
  display: none !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  flex: none !important;
}
html body .form-modal .form-step-content.active,
html body .lead-forms .form-step-content.active,
html body .lead-forms .step-container {
  display: block !important;
}

/* Form groups — predictable block layout, no shift */
html body .form-modal .form-group,
html body .lead-forms .form-group,
html body .lead-forms .step-container .form-group {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Inputs/select/textarea — fill exact container width, never overflow */
html body .form-modal .form-group input,
html body .form-modal .form-group select,
html body .form-modal .form-group textarea,
html body .lead-forms .form-group input,
html body .lead-forms .form-group select,
html body .lead-forms .form-group textarea,
html body .lead-forms .step-container input,
html body .lead-forms .step-container select,
html body .lead-forms .step-container textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #0f2f4f !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 47, 79, 0.12) !important;
  border-radius: 12px !important;
  outline: none !important;
  min-height: 50px !important;
  display: block !important;
  position: relative !important;
  left: auto !important;
  transform: none !important;
}
html body .form-modal .form-group input:focus,
html body .form-modal .form-group select:focus,
html body .form-modal .form-group textarea:focus,
html body .lead-forms .form-group input:focus,
html body .lead-forms .form-group select:focus,
html body .lead-forms .form-group textarea:focus {
  border-color: #d5a953 !important;
  box-shadow: 0 0 0 4px rgba(213, 169, 83, 0.15) !important;
  transform: none !important;
}

/* Labels — predictable block, can't overflow horizontally */
html body .form-modal .form-group label,
html body .lead-forms .form-group label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4a5d75 !important;
  letter-spacing: 0.2px !important;
  text-align: left !important;
  white-space: normal !important;
}

/* Step title / subtitle — left-aligned, no center text */
html body .form-modal .form-step-title,
html body .lead-forms .form-step-title,
html body .lead-forms .step-container > h2,
html body .lead-forms .step-container > h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  width: 100% !important;
}
html body .form-modal .form-step-subtitle,
html body .lead-forms .form-step-subtitle,
html body .lead-forms .step-container > p {
  font-size: 13.5px !important;
  color: #6c7a8c !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.5 !important;
  width: 100% !important;
}

/* Phone field wrapper — flex with prefix on left, never overflow */
html body .form-modal .phone-field-wrapper,
html body .lead-forms .phone-field-wrapper {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body .form-modal .phone-field-wrapper .phone-prefix,
html body .lead-forms .phone-field-wrapper .phone-prefix {
  flex: 0 0 78px !important;
  width: 78px !important;
  min-width: 78px !important;
  padding: 0 10px !important;
  text-align: center !important;
  border: 1px solid rgba(15, 47, 79, 0.12) !important;
  border-radius: 12px !important;
  background: #fafbfd !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  font-size: 15px !important;
  font-family: inherit !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
}
html body .form-modal .phone-field-wrapper input[type="tel"],
html body .lead-forms .phone-field-wrapper input[type="tel"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Navigation — sticky, full width, no negative margin gimmick */
html body .form-modal .form-navigation,
html body .lead-forms .form-navigation,
html body .lead-forms .step-navigation {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 47, 79, 0.08) !important;
  box-shadow: 0 -4px 16px rgba(15, 47, 79, 0.06) !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* File upload area — predictable */
html body .form-modal .file-upload-area,
html body .lead-forms .file-upload-area {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 24px 16px !important;
}


/* =====================================================================
 * SUCCESS CARD + ANIMATIONS — used by both static and dynamic modals
 * after a successful submission. Replaces the entire form body.
 * Markup is built in email.js:showFormSuccess and multistep-form.js:
 * showSuccessInForm — both render the same .form-success-card element.
 * ===================================================================== */
html body .form-success-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 36px 24px 28px !important;
  min-height: 320px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 204, 113, 0.08), transparent 70%),
    #ffffff !important;
  border-radius: 16px !important;
  animation: cardFadeUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}
@media (min-width: 769px) {
  html body .form-success-card { padding: 48px 32px 36px !important; min-height: 380px !important; }
}

/* SVG check-mark drawing animation — circle scales in, then mark draws */
html body .form-success-check {
  width: 88px !important;
  height: 88px !important;
  margin-bottom: 22px !important;
  display: block !important;
}
html body .form-success-check__circle {
  fill: #2ecc71 !important;
  transform-origin: 50% 50% !important;
  animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both !important;
}
html body .form-success-check__mark {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 50 !important;
  stroke-dashoffset: 50 !important;
  animation: checkDraw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards !important;
}

html body .form-success-card__title {
  margin: 0 0 10px !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  letter-spacing: -0.01em !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both !important;
}
html body .form-success-card__msg {
  margin: 0 0 26px !important;
  max-width: 380px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #4a5d75 !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both !important;
}

/* Auto-close countdown bar — visual indicator before modal dismisses */
html body .form-success-card__close-bar {
  width: 100% !important;
  max-width: 240px !important;
  height: 3px !important;
  background: rgba(15, 47, 79, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both !important;
}
html body .form-success-card__close-fill {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, #d5a953, #e8c980) !important;
  transform-origin: left !important;
  animation: countdown 4.5s linear 0.7s both !important;
}
html body .form-success-card__close-note {
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8794a8 !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both !important;
}

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes checkPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes textRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* =====================================================================
 * BUTTON LOADING STATE — replaces the basic Font Awesome spinner with
 * a smooth dual-ring spinner and full-button shimmer while submitting.
 * Triggered by .loading class (set by existing JS) or aria-busy="true".
 * ===================================================================== */
/* Spinner inside lead-form buttons is HIDDEN by default. Only shown when
   the button is in a loading state — either disabled (set by the submit
   handlers while sending) or .loading class. Previously this rule also
   matched `.form-nav-button .fa-spinner` unconditionally, which made the
   dotted spinner show ALL the time next to the Odeslat icon. */
html body .form-nav-button .spinner,
html body .form-nav-button .fa-spinner,
html body .btn-next .spinner,
html body .btn-next .fa-spinner {
  display: none !important;
}
html body .form-nav-button.loading .spinner,
html body .form-nav-button.loading .fa-spinner,
html body .form-nav-button[disabled] .spinner,
html body .form-nav-button[disabled] .fa-spinner,
html body .btn-next.loading .spinner,
html body .btn-next.loading .fa-spinner,
html body .btn-next[disabled] .spinner,
html body .btn-next[disabled] .fa-spinner {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(15, 47, 79, 0.25) !important;
  border-top-color: #0f2f4f !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: btnSpin 0.7s linear infinite !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}
html body .form-nav-button.loading .button-text,
html body .form-nav-button[disabled] .button-text,
html body .btn-next.loading .button-text,
html body .btn-next[disabled] .button-text {
  display: none !important;
}
html body .form-nav-button[disabled],
html body .form-nav-button.loading,
html body .btn-next[disabled],
html body .btn-next.loading {
  position: relative !important;
  overflow: hidden !important;
  cursor: progress !important;
  opacity: 1 !important;
}
html body .form-nav-button[disabled]::after,
html body .form-nav-button.loading::after,
html body .btn-next[disabled]::after,
html body .btn-next.loading::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  ) !important;
  transform: translateX(-100%) !important;
  animation: btnShimmer 1.4s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}
@keyframes btnShimmer {
  to { transform: translateX(100%); }
}


/* =====================================================================
 * LEGACY .form-success-message OVERRIDE
 *
 * index.php has 6 inline submit handlers (one per lead form) that each
 * insert a green `.form-success-message` div with hardcoded cssText.
 * We can't easily replace those handlers without breaking the wiring,
 * so we just RESTYLE the legacy element to match the new success card
 * and hide the sibling form/progress that would otherwise show through.
 *
 * Selector specificity 0,3,2 with !important — wins over the inline
 * cssText that the handlers set on .form-success-message.
 * ===================================================================== */
html body .lead-form-body .form-success-message,
html body .multistep-form-body .form-success-message,
html body .form-body .form-success-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 36px 24px 28px !important;
  min-height: 320px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 204, 113, 0.08), transparent 70%),
    #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 204, 113, 0.15) !important;
  box-shadow: 0 8px 24px rgba(46, 204, 113, 0.10) !important;
  animation: cardFadeUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both !important;
  color: #0f2f4f !important;
  position: relative !important;
  left: auto !important;
  transform: none !important;
}
@media (min-width: 769px) {
  html body .lead-form-body .form-success-message,
  html body .multistep-form-body .form-success-message,
  html body .form-body .form-success-message {
    padding: 48px 32px 36px !important;
    min-height: 380px !important;
  }
}

/* Legacy success markup uses <div><i class="fa-check-circle"></i></div>.
   The icon font sometimes fails to load on slow connections, leaving an
   empty green circle. Hide the FA icon entirely and draw the checkmark
   with CSS pseudo-elements — works regardless of font availability. */
html body .lead-form-body .form-success-message > div:first-child,
html body .multistep-form-body .form-success-message > div:first-child,
html body .form-body .form-success-message > div:first-child {
  position: relative !important;
  width: 88px !important; height: 88px !important;
  background: #2ecc71 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  font-size: 0 !important;
  color: transparent !important;
  margin: 0 auto 22px !important;
  animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both !important;
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}
/* Hide the legacy FA icon — we draw our own checkmark below. */
html body .lead-form-body .form-success-message > div:first-child i,
html body .multistep-form-body .form-success-message > div:first-child i,
html body .form-body .form-success-message > div:first-child i {
  display: none !important;
}
/* CSS checkmark — drawn as a rotated rectangle with two borders.
   `::before` is the long diagonal stroke, `::after` is the short one. */
html body .lead-form-body .form-success-message > div:first-child::after,
html body .multistep-form-body .form-success-message > div:first-child::after,
html body .form-body .form-success-message > div:first-child::after {
  content: '' !important;
  position: absolute !important;
  left: 26px !important;
  top: 18px !important;
  width: 22px !important;
  height: 42px !important;
  border-right: 6px solid #ffffff !important;
  border-bottom: 6px solid #ffffff !important;
  border-radius: 0 0 4px 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: 50% 50% !important;
  animation: checkStroke 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both !important;
  box-sizing: border-box !important;
}
@keyframes checkStroke {
  0%   { width: 0; height: 0; opacity: 0; }
  60%  { width: 22px; height: 0; opacity: 1; }
  100% { width: 22px; height: 42px; opacity: 1; }
}

html body .lead-form-body .form-success-message h2,
html body .multistep-form-body .form-success-message h2,
html body .form-body .form-success-message h2 {
  margin: 0 0 10px !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0f2f4f !important;
  letter-spacing: -0.01em !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both !important;
  background: transparent !important;
}
html body .lead-form-body .form-success-message p,
html body .multistep-form-body .form-success-message p,
html body .form-body .form-success-message p {
  margin: 0 0 12px !important;
  max-width: 380px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #4a5d75 !important;
  font-weight: 400 !important;
  background: transparent !important;
  animation: textRise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both !important;
  opacity: 1 !important;
}
html body .lead-form-body .form-success-message p + p,
html body .multistep-form-body .form-success-message p + p,
html body .form-body .form-success-message p + p {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8794a8 !important;
  animation-delay: 0.7s !important;
  margin-bottom: 0 !important;
}

/* When success card appears in a lead-form-body, hide sibling form + progress.
   Primary mechanism: form-modal-extras.js sets data-submitted="true" on
   the body element when a .form-success-message is inserted, and clears
   it once the modal closes. This keeps the form hidden for the full 5-6s
   the legacy handler holds the success up, even after it nulls the inner
   success at t=5s and briefly re-displays the form before closing at t=6s.
   Fallback :has() rule covers any case where the JS hook hasn't attached. */
html body .lead-form-body[data-submitted] > form,
html body .lead-form-body[data-submitted] > .form-progress-container,
html body .multistep-form-body[data-submitted] > .step-container,
html body .multistep-form-body[data-submitted] > .step-navigation,
html body .multistep-form-body[data-submitted] > form,
html body .form-body[data-submitted] > form,
html body .form-body[data-submitted] > .form-progress-container,
html body .lead-form-body:has(.form-success-message) > form,
html body .lead-form-body:has(.form-success-message) > .form-progress-container,
html body .multistep-form-body:has(.form-success-message) > .step-container,
html body .multistep-form-body:has(.form-success-message) > .step-navigation,
html body .multistep-form-body:has(.form-success-message) > form,
html body .form-body:has(.form-success-message) > form,
html body .form-body:has(.form-success-message) > .form-progress-container {
  display: none !important;
}

/* Soften the !important display rules above on .form-step-content.active so
   JS that does step.style.display='none' (legacy success handlers) can win. */
html body .form-modal .form-step-content[style*="display: none"],
html body .lead-forms .form-step-content[style*="display: none"],
html body .lead-forms .step-container[style*="display: none"] {
  display: none !important;
}
html body .form-modal .form-navigation[style*="display: none"],
html body .lead-forms .form-navigation[style*="display: none"],
html body .lead-forms .step-navigation[style*="display: none"] {
  display: none !important;
}


/* =====================================================================
 * FIELD-ERROR POSITIONING — form-validation.js inserts .field-error as
 * a sibling of the input via parentElement.insertBefore. For the phone
 * field this lands INSIDE .phone-field-wrapper (which is display:flex),
 * so the error becomes a flex item to the right of the inputs and
 * overflows off-screen. Force it to break to a full-width row below.
 * ===================================================================== */
html body .phone-field-wrapper {
  flex-wrap: wrap !important;
  position: relative !important;
}
html body .phone-field-wrapper .field-error,
html body .form-group .field-error {
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  order: 99 !important;
  margin: 6px 0 0 !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #c0392b !important;
  background: rgba(231, 76, 60, 0.08) !important;
  border: 1px solid rgba(231, 76, 60, 0.2) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: break-word !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  text-align: left !important;
}