/* Shadow DOM isolated styles */
/* Palette: #000000, #375575, #61AFED, #B6CCF0, #F4F9FD */

:host {
  all: initial;
  direction: rtl;
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Heebo, "Noto Sans Hebrew", Arial, sans-serif;
  color: #000000;
}

.pqilwz-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  background: #F4F9FD;
  color: #000000;
}

/* Header */
.pqilwz-title { font-size: 28px; margin: 6px 0 4px; color: #000000; font-weight: 800; }
.pqilwz-subtitle { margin: 0 0 10px; color: #375575; }
.pqilwz-section-pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #B6CCF0; color: #375575; font-size: 14px; border: 1px solid #e6eef7; }

/* Progress */
.pqilwz-progress { margin-bottom: 12px; }
.pqilwz-progress-top { display: flex; gap: 8px; justify-content: space-between; align-items: center; color: #375575; font-size: 14px; margin-bottom: 8px; }
.pqilwz-progress-bar { width: 100%; height: 10px; background: #e9f1fb; border-radius: 999px; overflow: hidden; border: 1px solid #e6eef7; }
.pqilwz-progress-fill { height: 100%; background: linear-gradient(90deg, #61AFED, #8dc9f3); transition: width .25s ease; }

/* Question Card */
.pqilwz-card { background: #fff; border: 1px solid #e6eef7; border-radius: 18px; padding: 22px; box-shadow: 0 10px 34px rgba(55,85,117,0.12); }
.pqilwz-qtext { margin: 0 0 16px; font-size: 18px; color: #000; }
.pqilwz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Buttons */
.pqilwz-btn { all: unset; display: inline-block; text-align: center; border: 1px solid #e6eef7; background: #fff; padding: 12px 16px; border-radius: 12px; cursor: pointer; font-weight: 700; color: #375575; transition: background .2s ease, transform .02s ease, border-color .2s; box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.pqilwz-btn:hover { background: #f6fbff; }
.pqilwz-btn:active { transform: translateY(1px); }
.pqilwz-btn:focus-visible { outline: 3px solid #B6CCF0; outline-offset: 2px; }
.pqilwz-btn--active { background: #eef7ff; border-color: #61AFED; color: #000; }
.pqilwz-btn--cta { background: #61AFED; color: #fff; border-color: #61AFED; min-width: 140px; }
.pqilwz-btn--cta:hover { background: #4aa2e7; }
.pqilwz-btn--ghost { background: transparent; color: #375575; }

/* Nav */
.pqilwz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }

/* Result */
.pqilwz-result { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; margin-top: 18px; padding: 18px; background: #eef6ff; border: 1px solid #e6eef7; border-radius: 16px; box-shadow: 0 10px 34px rgba(55,85,117,0.12); }
.pqilwz-result-icon { font-size: 28px; line-height: 1; }
.pqilwz-result-title { margin: 0 0 6px; color: #000; font-size: 20px; font-weight: 800; }
.pqilwz-result-text { margin: 0 0 8px; color: #375575; font-size: 16px; }
.pqilwz-disclaimer { margin: 0; font-size: 13.5px; color: #5f6d7a; }
.pqilwz-result-actions { display: flex; align-items: start; }

/* Mobile enhancements */
@media (max-width: 640px) {
  .pqilwz-wrapper { padding: 16px 14px 28px; }
  .pqilwz-title { font-size: 22px; }
  .pqilwz-qtext { font-size: 17px; }
  .pqilwz-actions { grid-template-columns: 1fr; gap: 10px; }
  .pqilwz-btn, .pqilwz-btn--cta, .pqilwz-btn--ghost { width: 100%; padding: 14px 16px; border-radius: 14px; }
  .pqilwz-nav { flex-direction: column-reverse; }
  .pqilwz-progress-top { font-size: 13px; }
  .pqilwz-result { grid-template-columns: 1fr; }
}