/* =========================
   Base wrapper + typography
   ========================= */
.otiyot-proverbs{
  direction: rtl;
  font-family: 'Heebo', sans-serif;

  width: 100%;
  max-width: 480px;   /* רוחב מובייל */
  margin: 0 auto;     /* מרכז בדסקטופ */

  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  color: #000;
}

.otiyot-title{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  font-size: 40px;
  color: #ffffff !important;
}

.otiyot-subtitle{
  margin: 0 0 18px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
}

.otiyot-qtitle{
  margin: 0 0 8px;
  text-align: center;
  font-weight: 900;
  font-size: 28px;
}

.otiyot-qdesc{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.7;
  color: #167b7a;
}

/* =========================
   Cards + layout
   ========================= */
.otiyot-card{
  width: 100%;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 14px;
  padding: 14px;
  margin: 10px 0;
  box-sizing: border-box;
}

.otiyot-row{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* =========================
   Buttons
   ========================= */
.otiyot-btn{
  display: inline-block;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

.otiyot-btn-primary{ background: #0E7C7B; color: #fff; }
.otiyot-btn-ghost{ background: #EDEDED; color: #000; }

.otiyot-btn-primary:hover,
.otiyot-btn-ghost:hover{ opacity: 0.9; }

/* =========================
   Progress bar (the one used by buildProgressBar)
   ========================= */
.otiyot-progress{
  width: 100%;
  margin: 10px 0 16px;
}

.otiyot-progress-track{
  width: 100%;
  height: 10px;
  background: #E6E6E6;
  border-radius: 999px;
  overflow: hidden;
}

.otiyot-progress-fill{
  height: 100%;
  width: 0%;
  background: #0E7C7B;
  border-radius: 999px;
  transition: width 250ms ease;
}

/* =========================
   Choices (radio rows)
   - radio on the RIGHT
   - text aligned right
   ========================= */
.otiyot-choice{
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #fff;
  font-weight: 900;
  cursor: pointer;

  display: flex;
  flex-direction: row;      /* radio left->right order in DOM: input then text */
  align-items: center;
  gap: 12px;
  text-align: right;
  box-sizing: border-box;

  transition: background-color .15s ease, border-color .15s ease;
}

.otiyot-choice:hover{ background: #F7F7F7; }

.otiyot-choice input{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.otiyot-choice span{
  flex: 1 1 auto;
  text-align: right;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}

/* =========================
   Correct / Wrong states
   (single source of truth)
   ========================= */
.otiyot-correct{
  border-color: #1f8a3b;
  background-color: rgba(31,138,59,0.14);
}

.otiyot-wrong{
  border-color: #b42318;
  background-color: rgba(180,35,24,0.14);
}

/* Optional: also color the text */
.otiyot-choice.otiyot-correct span{ color:#0b3d1a; }
.otiyot-choice.otiyot-wrong span{ color:#5a0f0b; }

/* if Elementor/Theme fights backgrounds, enforce only where needed */
.otiyot-proverbs #otiyot-proverbs-app label.otiyot-choice.otiyot-correct,
.otiyot-proverbs #otiyot-proverbs-app label.otiyot-choice.otiyot-wrong{
  background-image: none !important;
}

/* =========================
   Textarea (open question)
   ========================= */
.otiyot-textarea{
  width: 100%;
  min-height: 110px;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  padding: 12px;
  font-size: 18px;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
}

/* =========================
   Home grid + cards
   ========================= */
.otiyot-grid{
  display: grid;
  grid-template-columns: 1fr;  /* תמיד עמודה אחת */
  gap: 7px;
}

.otiyot-home-item{
  display: block;
  text-decoration: none;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  padding: 20px;
  background: #ffffff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

.otiyot-home-item:hover{
  transform: translateY(-3px);
  border-color: #349bab;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.otiyot-home-item h3{
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-align: right;
}


.otiyot-home-item .otiyot-row{ justify-content: flex-start; }

/* =========================
   Drag & drop (order)
   ========================= */
.otiyot-dropzone{
  border: 2px dashed #D9D9D9;
  border-radius: 14px;
  padding: 10px;
  min-height: 64px;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
}

/* zone colored after completion */
.otiyot-dropzone.otiyot-order-ok{
  border: 3px solid #1f8a3b;
  background: rgba(31,138,59,0.10);
}

.otiyot-dropzone.otiyot-order-bad{
  border: 3px solid #b42318;
  background: rgba(180,35,24,0.10);
}

.otiyot-draggable{
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  margin: 6px;
  background: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: grab;
  user-select: none;
}

/* chips colored (reuse same classes) */
.otiyot-draggable.otiyot-correct{
  border: 3px solid #1f8a3b;
  background: rgba(31,138,59,0.18);
  color: #0b3d1a;
}

.otiyot-draggable.otiyot-wrong{
  border: 3px solid #b42318;
  background: rgba(180,35,24,0.18);
  color: #5a0f0b;
}

/* Floating close button */
.otiyot-fab-close{
  position: fixed;
  left: 5px;
  bottom: 5px;

  width: 40px;
  height: 40px;

  background: #167b7a;
  color: #ffffff;

  border-radius: 50%;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;   /* גודל ה־X */
  font-weight: 900;
  line-height: 1;

  z-index: 9999;
  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform .15s ease, opacity .15s ease;
}

.otiyot-fab-close:hover{
  transform: scale(1.08);
  opacity: 0.95;
}


/* לא לחסום כפתור/ניווט במובייל */
@media (max-width: 480px){
  .otiyot-fab-close{
    width: 50px;
    height: 50px;
    font-size: 26px;
    left: 12px;
    bottom: 12px;
  }
}


/* =========================
   Score (finish)
   ========================= */
.otiyot-score{
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #167b7a;
  font-weight: 900;
  text-align: center;
  font-size: 24px;
  color: white;
}


/* לאלץ את ה-shortcode widget להיות רוחב מלא */
.elementor-widget-shortcode{
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/* כפתור הבא – רוחב מלא */
.otiyot-proverbs .otiyot-btn-primary{
  width: 100%;
  display: block;
}

/* עיטוף של הציון */
.otiyot-score-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 30px 0;   /* רווח לפני ואחרי */
}

/* העיגול */
.otiyot-score-circle{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #167b7a;
  color: #fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: otiyotPop 450ms ease-out;
}

/* אנימציית pop */
@keyframes otiyotPop {
  0%   { transform: scale(0.6); opacity:0; }
  60%  { transform: scale(1.08); opacity:1; }
  100% { transform: scale(1); }
}

.otiyot-home-btn{
  width: 100%;
  max-width: 420px;
  text-align: center;
}


.otiyot-proverbs #otiyot-proverbs-app.otiyot-finish-screen{
   padding-top: 50px;
}