.ida-room-grid{display:grid; grid-gap:12px}
.ida-room-grid.cols-1{grid-template-columns:repeat(1,1fr)}
.ida-room-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.ida-room-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ida-room-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.ida-room-card{display:block; cursor:pointer; text-decoration:none; color:inherit}
.ida-room-card input[type=radio]{position:absolute; opacity:0; pointer-events:none}
.ida-card-inner{border:2px solid #e0e0e0;overflow:hidden; display:flex; flex-direction:column; min-height:180px; transition:all .15s ease}
.ida-card-img{background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #f7f7f7; padding-top: 67%;}
.ida-card-label{padding:10px; font-weight:600; text-align:center}
.ida-room-card:has(input[type=radio]:checked) .ida-card-inner{border-color:#2271b1; box-shadow:0 0 0 2px rgba(34,113,177,.15)}

/* --- Radio dot UI (visible) --- */
.ida-room-card { position: relative; }

.ida-card-label{
  position: relative;
  padding-right: 34px;     /* מקום לעיגול בצד ימין */
  text-align: right;       /* טקסט לימין (RTL) */
  line-height: 1.25;
}

/* העיגול הריק */
.ida-card-label::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;             /* מיקום מימין */
  width: 18px;
  height: 18px;
  border: 2px solid #9aa0a6;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-sizing: border-box;
}

/* העיגול הממולא (מצב נבחר) */
.ida-card-label::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;            /* מעט פנימה ביחס ל-before */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2271b1;    /* צבע הבחירה */
  transform: translateY(-50%) scale(0);
  transition: transform .15s ease;
}

/* כשהרדיו נבחר – ממלאים את העיגול ומשנים צבע מסגרת */
.ida-room-card input[type="radio"]:checked + .ida-card-inner .ida-card-label::before{
  border-color: #2271b1;
}
.ida-room-card input[type="radio"]:checked + .ida-card-inner .ida-card-label::after{
  transform: translateY(-50%) scale(1);
}

/* אופציונלי: התאמה ל-LTR (אנגלית) – העיגול יעבור לשמאל */
html[dir="ltr"] .ida-card-label{ padding-right: 10px; padding-left: 34px; text-align: left; }
html[dir="ltr"] .ida-card-label::before{ right: auto; left: 12px; }
html[dir="ltr"] .ida-card-label::after { right: auto; left: 16px; }

.ida-room-grid.cols-2 .ida-room-card .ida-card-inner .ida-card-img {
    background-size: auto;
    height: auto;
    width: auto;
}

.ida-room-grid.cols-2 {
    width: 80%;
    margin: 0 auto;
}




/* ===== Center the last row items ===== */
.ida-room-grid{
  display: flex;            /* במקום grid */
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;  /* ממורכז גם בשורה האחרונה */
}

/* רוחב כרטיס לכל מצב עמודות */
.ida-room-grid.cols-1 .ida-room-card{ flex: 0 1 100%; }

.ida-room-grid.cols-2 .ida-room-card{
  /* 100% פחות מרווח אחד, /2 */
  flex: 0 1 calc((100% - 12px)/2);
}

.ida-room-grid.cols-3 .ida-room-card{
  /* 100% פחות שני מרווחים, /3 */
  flex: 0 1 calc((100% - 24px)/3);
}

.ida-room-grid.cols-4 .ida-room-card{
  /* 100% פחות שלושה מרווחים, /4 */
  flex: 0 1 calc((100% - 36px)/4);
}

/* מובייל – טור אחד (אם תרצה) */
@media (max-width: 640px){
  .ida-room-grid{ justify-content: center; }
  .ida-room-grid .ida-room-card{ flex: 0 1 100%; }
}



/* ---- Mobile: force single column ---- */
@media (max-width: 800px) {
.ida-room-grid
 {
    display: block;
}
  .ida-room-grid.cols-2 {
    width: 100%;
}
.ida-room-card .ida-card-inner {
  margin-top:10px;
}

}