/* -------------------------------------------------------------
   קונטיינר כללי של בלוק התוסף בעמוד מוצר
   ניתן לשנות רקע, ריווחים, מסגרת, פינות עגולות, רוחב, פונט ועוד
------------------------------------------------------------- */
.eliko-dimensions {
    background: #f5f5f500;         /* צבע רקע */
    padding: 0;               /* ריווח פנימי */
    border: 0px solid #0A3E27; 
    border-radius: 0px;         /* פינות עגולות */
    font-family: 'Heebo', sans-serif; /* גופן עברי */
    direction: rtl;              /* יישור לימין */
    text-align: right;           /* טקסט מימין */
    max-width: 100%;            /* רוחב מקסימלי */
    margin: 0px 0px 20px 0px ;           /* ריווח חיצוני + מיקום מרכזי */
}


/* -------------------------------------------------------------
   כותרות בתוך התוסף – כמו "בחירת גודל הדפסה"
------------------------------------------------------------- */
.eliko-dimensions h3 {
    font-size: 18px;
    font-weight: bold;
    color: #0A3E27;
    margin-bottom: 10px;
    font-family: 'Heebo', sans-serif;
}

/* -------------------------------------------------------------
   טקסט הסבר קצר מתחת לכותרת
------------------------------------------------------------- */
.eliko-dimensions p.description {
    font-size: 14px;
    color: #8A8A8A;
    margin-top: -5px;
    margin-bottom: 20px;
    font-family: 'Heebo', sans-serif;
}

/* -------------------------------------------------------------
   שדות רוחב + גובה בשתי עמודות – Flexbox
------------------------------------------------------------- */
.eliko-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

.eliko-col {
    flex: 1 1 50%;        /* כל עמודה תתפוס 50% */
}

/* -------------------------------------------------------------
   תוויות של שדות (label)
------------------------------------------------------------- */
.eliko-col label,
.eliko-dimensions label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: #0A3E27;
    font-weight: 500;
}

/* -------------------------------------------------------------
   שדות הזנת מספרים (רוחב, גובה)
------------------------------------------------------------- */
.eliko-col input[type="number"],
.eliko-dimensions input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e8eaed;
    background-color: #f7f7f7;
    border-radius: 0px;
    font-size: 15px;
    font-family: inherit;
    box-shadow: inset 0 rgba(0, 0, 0, 0.1);
    transition: border 0.3s ease;
}

.eliko-dimensions input[type="number"]:focus {
    border-color: #007cba;
    outline: none;
}

/* -------------------------------------------------------------
   שדה טקסט לאיזור ההערות
------------------------------------------------------------- */
.eliko-dimensions textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e8eaed;
    background-color: #f7f7f7;
    border-radius: 0px !important;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    margin-top: 8px;
}

/* -------------------------------------------------------------
   פסקאות סיכום – סה"כ מ"ר ומחיר מחושב
------------------------------------------------------------- */
.eliko-dimensions p.total,
.eliko-dimensions p.price {
    font-size: 17px;
    margin: 10px 0;
    color: #0A3E27;
}

/* -------------------------------------------------------------
   תגית "למ"ר" שמוצגת ליד מחיר המוצר
------------------------------------------------------------- */
.eliko-sqm-label {
    /* background: #007cba; */
    color: #000000 !important;
    /* padding: 4px 8px;
    border-radius: 20px; 
    font-size: 14px; */
    font-weight: 400;
    /* margin-right: 5px;
    display: inline-block; */
}

/* -------------------------------------------------------------
   טקסטים מודגשים בתוך הקופסה
------------------------------------------------------------- */
.woocommerce .eliko-dimensions strong {
    color: #111;
}

/* -------------------------------------------------------------
   עיצוב עמוד ההסבר בלוח הניהול
------------------------------------------------------------- */
.wrap h1,
.wrap h2 {
    font-family: 'Assistant', sans-serif;
    color: #2c3e50;
}

.wrap p,
.wrap li {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    font-family: 'Assistant', sans-serif;
}

/* -------------------------------------------------------------
   כפתור "איך זה עובד?" בעמוד התוספים
------------------------------------------------------------- */
.plugin-action-links a[href*="eliko_sqm_help"] {
    font-weight: bold;
    color: #007cba !important;
}

/* אזור ההתקנה והייעוץ */
.eliko-installation {
    margin-top: 30px;
    font-family: inherit;
    direction: rtl;
    text-align: right;
  }
  
  /* כותרת */
  .eliko-installation h3 {
    font-size: 18px;
    font-weight: bold;
    color: #0A3E27;
    margin-bottom: 10px;
    font-family: 'Heebo', sans-serif;
  }
  
  /* תיאור מתחת לכותרת */
  .eliko-installation p {
    font-size: 14px;
    color: #8A8A8A;
    margin-top: -5px;
    margin-bottom: 20px;
    font-family: 'Heebo', sans-serif;
  }
  
  /* כל label יהיה אחד ליד השני */
  .eliko-installation label {
    display: inline-block;
    margin-left: 5px;
  }
  
  /* הסתרת רדיו מקורי */
  .eliko-installation input[type="radio"] {
    display: none;
  }
  
  /* סגנון של כפתור הרדיו */
  .eliko-installation input[type="radio"] + span {
    display: inline-block;
    padding: 12px 15px;
    border: 1px solid #e8eaed !important;
    border-radius: 0px;
    background-color: #f7f7f7;
    color: #0A3E27;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  
  /* מעבר עכבר */
  .eliko-installation input[type="radio"]:not(:checked) + span:hover {
    background-color: #0A3E27;
    color: #ffffff;
    border-color: #0A3E27;
  }
  
  /* כשהשדה נבחר */
  .eliko-installation input[type="radio"]:checked + span {
    background-color: #0A3E27;
    color: #ffffff;
    border-color: #0A3E27;
  }
  

/* ✅ עיצוב כותרת ראשית של אזור המוצרים הנלווים */
.eliko-related-products-title {
    font-size: 18px;
    font-weight: bold;
    color: #0A3E27;
    margin-bottom: 8px !important;
    font-family: 'Heebo', sans-serif;
}

/* ✅ תיאור קצר מתחת לכותרת */
.eliko-related-products-desc {
    font-size: 14px;
    color: #8A8A8A;
    margin-top: -5px;
    margin-bottom: 10px !important;
    font-family: 'Heebo', sans-serif;
}

/* ✅ עטיפת כל רשימת המוצרים – רשת שמתאימה עצמה אוטומטית */
.eliko-related-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* או 300px אם בא לך רחב יותר */
    gap: 3px 10px; /* <== שורה ראשונה: רווח אנכי 20px, רווח אופקי 25px */
    width: 100%;
}

/* ✅ כל עטיפת פריט - תופסת את המקום הנדרש לפי תוכן, אך עדיין גמישה */
.eliko-related-wrapper {
    flex: 0 1 auto;
    max-width: 100%;
}

/* ✅ הסתרת הצ'קבוקס כדי שנשתמש ב-UI מעוצב בלחיצה על תיבת המוצר */
.eliko-related-checkbox {
    display: none;
}

/* ✅ עיצוב תיבת מוצר נלווה (ברירת מחדל) */
.eliko-related-product-item {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #e8eaed;
    padding: 10px;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f7f7f7;
}

/* ✅ תמונת המוצר */
.eliko-related-thumb {
    width: 50px;
    height: auto;
    border-radius: 8px !important;
}

/* ✅ כותרת ומחיר – ברירת מחדל */
.eliko-related-title {
    color: #000;
    margin-bottom: 5px; /* ✅ רווח תחתון של 5px לכותרת */
    transition: color 0.3s ease;
}

/* ✅ מחיר – קטן יותר ואפור כברירת מחדל */
.eliko-related-price {
    font-size: 13px; /* ✅ גודל מוקטן */
    color: #777;      /* ✅ צבע אפור קל */
    transition: color 0.3s ease;
}

/* ✅ תו המטבע ירש את צבע המחיר */
.eliko-related-product-item .eliko-related-price .woocommerce-Price-currencySymbol {
    color: inherit;
}

/* ✅ עיצוב תיבת מוצר בעת מעבר עכבר */
.eliko-related-wrapper:hover .eliko-related-product-item {
    background-color: #0A3E27;
    border-color: #0A3E27;
}

.eliko-related-wrapper:hover .eliko-related-title,
.eliko-related-wrapper:hover .eliko-related-price {
    color: #fff;
}

/* ✅ עיצוב תיבת מוצר לאחר בחירה */
.eliko-related-checkbox:checked + .eliko-related-product-item {
    background-color: #0A3E27;
    border-color: #0A3E27;
}

.eliko-related-checkbox:checked + .eliko-related-product-item .eliko-related-title,
.eliko-related-checkbox:checked + .eliko-related-product-item .eliko-related-price {
    color: #fff;
}

/* ✅ קישור של שם המוצר – עיצוב ברירת מחדל */
a.eliko-related-link {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ✅ מעבר עכבר על המוצר – צבע הקישור */
.eliko-related-product-item:hover a.eliko-related-link {
    color: #fff;
}

/* ✅ גם אחרי בחירה – צבע הקישור */
.eliko-related-checkbox:checked + .eliko-related-product-item a.eliko-related-link {
    color: #fff;
}

p.eliko-total-price {
    margin-bottom: 15px !important;
    color: #0A3E27 !important;
}

input#eliko_custom_text {
    border-radius: 0px !important;
    background-color: #f7f7f7;
    border: 1px solid #e8eaed;
}

p.eliko-total-sqm {
    color: #0A3E27;
}

.woocommerce .eliko-dimensions strong {
    color: #0A3E27;
}