/* Joy Quiz v3 — Frontend */
.joy-quiz-wrap {
  max-width:620px; margin:40px auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Arial Hebrew',Arial,sans-serif;
  direction:rtl; text-align:right;
}
.joy-hidden { display:none !important; }

.joy-screen {
  background:#fff; border-radius:20px; padding:44px 38px;
  box-shadow:0 4px 32px rgba(0,0,0,0.10); text-align:center;
  animation:joyFadeIn 0.4s ease;
}
@keyframes joyFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.joy-quiz-title { font-size:26px; font-weight:800; color:#1e1e2e; margin:0 0 12px; line-height:1.3; }
.joy-quiz-subtitle { font-size:15px; color:#6b7280; margin:0 0 28px; }

.joy-btn-start {
  background:linear-gradient(135deg,#a855f7,#6366f1);
  color:#fff; border:none; padding:16px 40px; border-radius:50px;
  font-size:17px; font-weight:700; cursor:pointer; transition:transform 0.2s,box-shadow 0.2s;
  font-family:inherit;
}
.joy-btn-start:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(168,85,247,0.4); }
.joy-pulse { animation:joyPulse 2s infinite; }
@keyframes joyPulse { 0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0.4)} 50%{box-shadow:0 0 0 12px rgba(168,85,247,0)} }

.joy-progress-bar { height:6px; background:#f3f4f6; border-radius:99px; margin-bottom:22px; overflow:hidden; }
.joy-progress-fill { height:100%; background:linear-gradient(90deg,#a855f7,#6366f1); border-radius:99px; transition:width 0.4s ease; width:5%; }
.joy-q-counter { font-size:12px; color:#9ca3af; margin-bottom:8px; font-weight:600; letter-spacing:0.05em; }
.joy-q-text { font-size:21px; font-weight:800; color:#1e1e2e; margin:0 0 26px; line-height:1.35; }

.joy-options { display:flex; flex-direction:column; gap:11px; }
.joy-option-btn {
  background:#f9fafb; border:2px solid #e5e7eb; border-radius:13px;
  padding:15px 22px; font-size:15px; font-weight:600; color:#374151;
  cursor:pointer; text-align:right; transition:all 0.18s;
  animation:joySlideIn 0.35s ease both; font-family:inherit;
}
.joy-option-btn:hover { border-color:#a855f7; background:#faf5ff; color:#7c3aed; transform:translateX(-4px); }
.joy-option-btn.joy-selected { border-color:#a855f7; background:linear-gradient(135deg,#faf5ff,#ede9fe); color:#7c3aed; }
.joy-option-btn:disabled { opacity:0.7; cursor:default; }
@keyframes joySlideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

/* Lead capture screen */
.joy-screen-capture { text-align:right; }
.joy-capture-header { text-align:center; margin-bottom:24px; }
.joy-capture-emoji  { font-size:48px; margin-bottom:10px; }
.joy-capture-header h2 { font-size:22px; font-weight:800; color:#1e1e2e; margin:0 0 8px; }
.joy-capture-msg { color:#6b7280; font-size:15px; margin:0; }
.joy-capture-form  { display:flex; flex-direction:column; gap:12px; }
.joy-capture-field label { font-size:13px; font-weight:600; color:#374151; margin-bottom:4px; display:block; }
.joy-capture-field .joy-input {
  width:100%; border:1.5px solid #d1d5db; border-radius:9px;
  padding:12px 14px; font-size:15px; font-family:inherit; direction:rtl;
  transition:border-color 0.2s;
}
.joy-capture-field .joy-input:focus { border-color:#a855f7; outline:none; box-shadow:0 0 0 3px rgba(168,85,247,0.1); }
.joy-btn-submit {
  background:linear-gradient(135deg,#a855f7,#6366f1);
  color:#fff; border:none; padding:15px 32px; border-radius:50px;
  font-size:16px; font-weight:700; cursor:pointer; font-family:inherit;
  margin-top:6px; transition:transform 0.2s,opacity 0.2s; align-self:center;
}
.joy-btn-submit:hover { transform:scale(1.04); opacity:0.92; }

/* Result screen */
.joy-result-emoji { font-size:52px; margin-bottom:10px; animation:joyBounce 0.55s ease; }
@keyframes joyBounce { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.joy-result-type { font-size:26px; font-weight:800; color:#1e1e2e; margin:0 0 8px; }
.joy-result-msg  { color:#6b7280; margin:0 0 20px; font-size:15px; }
.joy-result-bar-wrap { display:flex; align-items:center; gap:10px; margin-bottom:24px; font-size:13px; color:#6b7280; justify-content:center; }
.joy-result-bar  { width:120px; height:10px; background:#f3f4f6; border-radius:99px; overflow:hidden; }
.joy-result-bar div { height:100%; border-radius:99px; }
.joy-btn-cta {
  color:#fff; border:none; padding:15px 38px; border-radius:50px;
  font-size:16px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:transform 0.2s,opacity 0.2s;
}
.joy-btn-cta:hover { transform:scale(1.04); opacity:0.92; }
.joy-error { color:#ef4444; font-size:14px; }

@media(max-width:540px) {
  .joy-screen { padding:28px 18px; }
  .joy-quiz-title { font-size:21px; }
  .joy-q-text { font-size:18px; }
}

/* HTML form embed */
.joy-html-form-wrap { text-align:right; }
.joy-html-form-wrap * { direction:rtl; }
.joy-html-form-wrap input,
.joy-html-form-wrap textarea,
.joy-html-form-wrap select {
  font-family:inherit;
}

/* Result sub-message */
.joy-result-sub { color:#6b7280; font-size:14px; max-width:360px; margin:0 auto 16px; line-height:1.55; }
.joy-result-saved { color:#22c55e; font-weight:700; font-size:15px; }
.joy-req { color:#ef4444; }