/* ============================================================
   Weighted Product – Front CSS
   RTL, נושא: מינימליסטי נקי עם אקצנטים ירוקים
   ============================================================ */

/* ─── משתנים ──────────────────────────────────────────────── */
:root {
  --wp-primary:       #2b7a4b;
  --wp-primary-light: #e8f5ee;
  --wp-accent:        #f0a500;
  --wp-text:          #1a1a1a;
  --wp-muted:         #666;
  --wp-border:        #d8e3d9;
  --wp-radius:        12px;
  --wp-shadow:        0 2px 12px rgba(0,0,0,.08);
  --wp-font:          'Heebo', 'Rubik', 'Assistant', sans-serif;
}

/* ─── מיכל ראשי ───────────────────────────────────────────── */
.wp-weighted-selector {
  font-family:    var(--wp-font);
  direction:      rtl;
  text-align:     right;
  background:     #fff;
  border:         1.5px solid var(--wp-border);
  border-radius:  var(--wp-radius);
  padding:        1.4rem 1.6rem;
  margin:         1.2rem 0;
  box-shadow:     var(--wp-shadow);
  max-width:      460px;
}

/* ─── כותרת ───────────────────────────────────────────────── */
.wp-weighted-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
}

.wp-weighted-badge {
  background:    var(--wp-primary);
  color:         #fff;
  font-size:     .78rem;
  font-weight:   700;
  padding:       .25rem .75rem;
  border-radius: 50px;
  letter-spacing:.02em;
}

.wp-weighted-unit-price {
  font-size:   .88rem;
  color:       var(--wp-muted);
  font-weight: 500;
}

/* ─── סלידר ───────────────────────────────────────────────── */
.wp-weighted-slider-wrap {
  margin-bottom: 1.1rem;
}

.wp-weight-slider {
  width:         100%;
  -webkit-appearance: none;
  appearance:    none;
  height:        6px;
  background:    linear-gradient(to left, var(--wp-primary) var(--wp-slider-pct, 0%), var(--wp-border) 0%);
  border-radius: 50px;
  outline:       none;
  cursor:        pointer;
  direction:     ltr; /* הסלידר עצמו שמאל-ימין */
}

.wp-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:          22px;
  height:         22px;
  border-radius:  50%;
  background:     var(--wp-primary);
  border:         3px solid #fff;
  box-shadow:     0 1px 6px rgba(0,0,0,.2);
  cursor:         grab;
  transition:     transform .15s;
}
.wp-weight-slider::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
.wp-weight-slider::-moz-range-thumb {
  width:          22px;
  height:         22px;
  border-radius:  50%;
  background:     var(--wp-primary);
  border:         3px solid #fff;
  box-shadow:     0 1px 6px rgba(0,0,0,.2);
  cursor:         grab;
}

/* תוויות סלידר */
.wp-slider-labels {
  display:         flex;
  justify-content: space-between;
  margin-top:      .4rem;
  direction:       ltr;
}
.wp-slider-labels span {
  font-size:   .72rem;
  color:       var(--wp-muted);
  cursor:      pointer;
  transition:  color .15s, font-weight .15s;
  padding:     .1rem .2rem;
  border-radius: 4px;
}
.wp-slider-labels span:hover,
.wp-slider-labels span.active {
  color:       var(--wp-primary);
  font-weight: 700;
}

/* ─── שורת קלט ידני ──────────────────────────────────────── */
.wp-weighted-manual {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-bottom: 1rem;
}

.wp-gram-btn {
  width:          36px;
  height:         36px;
  border-radius:  50%;
  border:         2px solid var(--wp-primary);
  background:     #fff;
  color:          var(--wp-primary);
  font-size:      1.2rem;
  font-weight:    700;
  line-height:    1;
  cursor:         pointer;
  transition:     background .15s, color .15s;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
}
.wp-gram-btn:hover:not(:disabled) { background: var(--wp-primary); color: #fff; }
.wp-gram-btn:disabled { opacity: .35; cursor: not-allowed; }

.wp-gram-input {
  width:        80px;
  text-align:   center;
  border:       1.5px solid var(--wp-border);
  border-radius: 8px;
  padding:      .4rem .3rem;
  font-size:    1rem;
  font-family:  var(--wp-font);
  font-weight:  600;
  color:        var(--wp-text);
  -moz-appearance: textfield;
}
.wp-gram-input:focus { outline: none; border-color: var(--wp-primary); }
.wp-gram-input::-webkit-outer-spin-button,
.wp-gram-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.wp-gram-unit {
  font-size:   .9rem;
  color:       var(--wp-muted);
  font-weight: 500;
}

/* ─── מחיר חי ─────────────────────────────────────────────── */
.wp-weighted-price-live {
  display:       flex;
  align-items:   baseline;
  gap:           .5rem;
  background:    var(--wp-primary-light);
  border-radius: 8px;
  padding:       .6rem 1rem;
  margin-bottom: 1rem;
}

.wp-price-label {
  font-size:   .88rem;
  color:       var(--wp-muted);
}

.wp-price-value {
  font-size:   1.5rem;
  font-weight: 800;
  color:       var(--wp-primary);
  line-height: 1;
  transition:  all .2s;
}

/* ─── כפתור הוסף לעגלה ──────────────────────────────────── */
.wp-weighted-atc-btn.button.alt {
  background:    var(--wp-primary) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: var(--wp-radius) !important;
  padding:       .8rem 1.8rem !important;
  font-size:     1rem !important;
  font-weight:   700 !important;
  font-family:   var(--wp-font) !important;
  width:         100%;
  cursor:        pointer;
  transition:    background .2s, transform .1s, box-shadow .2s;
  box-shadow:    0 4px 14px rgba(43,122,75,.25);
  letter-spacing:.02em;
}
.wp-weighted-atc-btn.button.alt:hover {
  background: #235f3b !important;
  box-shadow: 0 6px 18px rgba(43,122,75,.35);
  transform:  translateY(-1px);
}
.wp-weighted-atc-btn.button.alt:active { transform: translateY(0); }
.wp-weighted-atc-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ─── רספונסיב ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wp-weighted-selector { padding: 1rem; }
  .wp-gram-input        { width: 65px; }
  .wp-price-value       { font-size: 1.25rem; }
}