/* =====================================================================
   CRO v2 — Visual UX improvements for prisha-misuy.co.il
   Created 2026-05-09
   - Mobile sticky 3-button CTA bar
   - Loss-aversion mini-calculator
   - Quiz funnel (3-step)
   - Trust badges below forms
   - Live activity ticker
   ===================================================================== */

/* ============================================================
   1. MOBILE STICKY BOTTOM CTA BAR (3 buttons)
   ============================================================ */
.crov2-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  display: none;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 12px rgba(11, 46, 74, 0.10);
  padding: 8px;
  font-family: inherit;
}
@media (max-width: 768px) {
  .crov2-bottom-bar { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
  /* Push body up so content isn't hidden behind bar */
  body.has-crov2-bottom-bar { padding-bottom: 78px; }
}
.crov2-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  text-align: center;
  line-height: 1.1;
  font-family: inherit;
}
.crov2-btn:active { transform: scale(0.96); }
.crov2-btn-whatsapp { background: #25D366; color: #fff; }
.crov2-btn-tel { background: #0B2E4A; color: #fff; }
.crov2-btn-form { background: linear-gradient(135deg, #C9A24D 0%, #A78032 100%); color: #fff; }
.crov2-btn svg { width: 22px; height: 22px; }
.crov2-btn small { font-size: 10px; opacity: 0.85; font-weight: 500; display: block; }

/* ============================================================
   2. LOSS-AVERSION MINI-CALCULATOR
   ============================================================ */
.crov2-loss-calc {
  background: linear-gradient(135deg, #fff 0%, #fef9ed 100%);
  border: 2px solid #C9A24D;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 24px auto;
  max-width: 720px;
  box-shadow: 0 4px 16px rgba(201, 162, 77, 0.18);
}
.crov2-loss-calc h3 {
  margin: 0 0 8px;
  color: #0B2E4A;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crov2-loss-calc h3::before { content: '🔴'; font-size: 1.1rem; }
.crov2-loss-calc p.crov2-loss-subtitle {
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.45;
}
.crov2-loss-calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}
.crov2-loss-row2 {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .crov2-loss-calc-fields,
  .crov2-loss-row2 { grid-template-columns: 1fr; }
}
.crov2-loss-field label {
  display: block;
  font-size: 0.85rem;
  color: #4b5563;
  margin: 0 0 4px;
  font-weight: 600;
}
.crov2-loss-field input, .crov2-loss-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  direction: rtl;
}
.crov2-loss-field input:focus, .crov2-loss-field select:focus { outline: none; border-color: #C9A24D; }
.crov2-loss-result {
  background: #0B2E4A;
  color: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  text-align: center;
  display: none;
  margin: 14px 0 0;
}
.crov2-loss-result.is-visible { display: block; animation: crov2FadeIn 0.4s ease-out; }
.crov2-loss-result-label { font-size: 0.92rem; color: rgba(255,255,255,0.85); margin: 0 0 6px; }
.crov2-loss-result-amount {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: #FF6B6B;
  line-height: 1;
  margin: 0;
  text-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
}
.crov2-loss-result-period { font-size: 0.95rem; color: #FFD93D; margin: 4px 0 12px; font-weight: 700; }
.crov2-loss-result-cta {
  background: linear-gradient(135deg, #15803D 0%, #0F5A2C 100%);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
}
.crov2-loss-result-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21, 128, 61, 0.4); }

@keyframes crov2FadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. QUIZ FUNNEL (3-step)
   ============================================================ */
.crov2-quiz {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(11, 46, 74, 0.12);
  max-width: 480px;
  margin: 0 auto;
  font-family: inherit;
}
.crov2-quiz-progress {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 14px;
}
.crov2-quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #C9A24D 0%, #15803D 100%);
  width: 33%;
  transition: width 0.3s ease;
  border-radius: 999px;
}
.crov2-quiz-step-counter {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 0 8px;
  font-weight: 700;
  text-align: center;
}
.crov2-quiz-step { display: none; }
.crov2-quiz-step.is-active { display: block; animation: crov2FadeIn 0.3s ease-out; }
.crov2-quiz-step h4 {
  margin: 0 0 14px;
  color: #0B2E4A;
  font-size: 1.15rem;
  line-height: 1.4;
}
.crov2-quiz-options {
  display: grid;
  gap: 8px;
}
.crov2-quiz-option {
  padding: 12px 16px;
  background: #f8fafc;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.96rem;
  text-align: right;
  font-family: inherit;
  transition: all 0.15s;
  color: #0B2E4A;
  font-weight: 600;
}
.crov2-quiz-option:hover, .crov2-quiz-option.is-selected {
  background: #fef9ed;
  border-color: #C9A24D;
  transform: translateY(-1px);
}
.crov2-quiz-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #cbd5e0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  direction: rtl;
  margin: 0 0 10px;
}
.crov2-quiz-input:focus { outline: none; border-color: #C9A24D; }
/* 2026-05-09 fix: stronger specificity + !important to defeat any inherited
   .hero-lead-form button rules from the base theme. The submit button must
   be the visual hero; back is secondary. */
.crov2-quiz .crov2-quiz-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
  flex-direction: row !important;
  width: 100% !important;
}
.crov2-quiz button.crov2-quiz-back,
.crov2-quiz button.crov2-quiz-next {
  padding: 14px 18px !important;
  border-radius: 10px !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  font-family: inherit !important;
  transition: all 0.15s !important;
  line-height: 1.2 !important;
  width: auto !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
/* SUBMIT and NEXT — primary action — gets all available space */
.crov2-quiz button.crov2-quiz-next {
  flex: 1 1 auto !important;
  background: linear-gradient(135deg, #C9A24D 0%, #A78032 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(201, 162, 77, 0.3) !important;
}
.crov2-quiz button.crov2-quiz-submit {
  flex: 1 1 auto !important;
  background: linear-gradient(135deg, #15803D 0%, #0F5A2C 100%) !important;
  color: #fff !important;
  font-size: 1.02rem !important;
  padding: 14px 22px !important;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.35) !important;
}
/* BACK — secondary — narrow, only as wide as text + padding */
.crov2-quiz button.crov2-quiz-back {
  flex: 0 0 auto !important;
  background: #f1f5f9 !important;
  color: #0B2E4A !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
}
.crov2-quiz button.crov2-quiz-next:hover,
.crov2-quiz button.crov2-quiz-submit:hover { transform: translateY(-1px) !important; }
.crov2-quiz button.crov2-quiz-back:hover { background: #e2e8f0 !important; }
.crov2-quiz button.crov2-quiz-next:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
.crov2-quiz-thanks {
  text-align: center;
  padding: 24px 16px;
  display: none;
}
.crov2-quiz-thanks.is-visible { display: block; }
.crov2-quiz-thanks h4 { color: #15803D; font-size: 1.4rem; margin: 0 0 8px; }
.crov2-quiz-thanks svg { width: 60px; height: 60px; color: #15803D; margin: 0 0 12px; }

/* ============================================================
   4. TRUST BADGES BELOW FORMS
   ============================================================ */
.crov2-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 14px 0 0;
  font-size: 0.86rem;
  /* 2026-05-09 fix: default to dark text (works on white form cards which is the
     dominant case). Use .crov2-trust-badges-on-dark explicitly when needed. */
  color: #4b5563;
}
.crov2-trust-badges-on-dark {
  color: rgba(255, 255, 255, 0.92);
}
/* Backward-compat: legacy "-light" class kept as alias */
.crov2-trust-badges-light { color: #4b5563; }
.crov2-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.crov2-trust-badge svg { width: 14px; height: 14px; color: #15803D; flex-shrink: 0; }
/* Contextual safety net: inside white form cards, force dark text regardless of class */
.hero-lead-form-card .crov2-trust-badges,
.bottom-lead-card .crov2-trust-badges,
.lead-form-card .crov2-trust-badges {
  color: #4b5563 !important;
}
.hero-lead-form-card .crov2-trust-badge,
.bottom-lead-card .crov2-trust-badge,
.lead-form-card .crov2-trust-badge { color: inherit; }

/* ============================================================
   5. LIVE ACTIVITY TICKER (bottom-left toast)
   ============================================================ */
.crov2-ticker {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9985;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-right: 4px solid #15803D;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 28px rgba(11, 46, 74, 0.18);
  max-width: 320px;
  display: none;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #0B2E4A;
  animation: crov2TickerSlide 0.4s ease-out;
  font-family: inherit;
}
.crov2-ticker.is-visible { display: block; }
.crov2-ticker-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15803D;
  margin-left: 6px;
  vertical-align: middle;
  animation: crov2Pulse 2s ease-in-out infinite;
}
.crov2-ticker-name { font-weight: 700; color: #0B2E4A; }
.crov2-ticker-time { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
.crov2-ticker-close {
  position: absolute;
  top: 6px;
  left: 6px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.crov2-ticker-close:hover { color: #0B2E4A; }
@keyframes crov2Pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}
@keyframes crov2TickerSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .crov2-ticker { left: 8px; right: 8px; max-width: none; bottom: 88px; /* above the bottom CTA bar */ }
}