.rh-wrap *, .rh-wrap *::before, .rh-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rh-wrap {
  --blue-dark:  #1a3a5c;
  --blue-mid:   #1e5799;
  --blue-light: #e8f0fa;
  --blue-acc:   #2d7dd2;
  --green:  #3a8a3a;
  --orange: #d97706;
  --red:    #c0392b;
  --g100:   #f5f5f3;
  --g200:   #e8e7e3;
  --g400:   #9e9c95;
  --g700:   #3d3c38;
  --white:  #ffffff;
  --r:      10px;
  font-family: inherit;
  color: var(--g700);
  width: 100%;
}
.rh-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; font-size:.8rem; }
.rh-li { display:flex; align-items:center; gap:5px; }
.rh-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.rh-dot-free     { background:var(--green); }
.rh-dot-reserved { background:var(--orange); }
.rh-dot-sold     { background:var(--red); }

.rh-layout { display:flex; gap:1.25rem; align-items:flex-start; }
.rh-grid-col { flex:1; min-width:0; }
.rh-panel-col { width:300px; flex-shrink:0; display:none; }
.rh-panel-col.rh-open { display:block; }

.rh-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; width:100%; }

.rh-card {
  background:var(--white); border-radius:var(--r); border:1.5px solid var(--g200);
  padding:.875rem; cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .12s;
  position:relative; overflow:hidden; width:100%;
}
.rh-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--blue-mid); opacity:0; transition:opacity .18s;
}
.rh-card:hover { border-color:var(--blue-acc); box-shadow:0 4px 14px rgba(30,87,153,.12); transform:translateY(-2px); }
.rh-card:hover::before, .rh-card.rh-active::before { opacity:1; }
.rh-card.rh-active { border-color:var(--blue-mid); box-shadow:0 4px 18px rgba(30,87,153,.18); }

.rh-cdot { position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; }
.rh-cnum { font-size:.7rem; color:var(--g400); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.rh-cname { font-size:.95rem; font-weight:700; color:var(--blue-dark); margin-bottom:8px; }
.rh-csqm { font-size:1.45rem; font-weight:700; color:var(--blue-dark); line-height:1; }
.rh-csqm span { font-size:.78rem; font-weight:400; color:var(--g400); }
.rh-ctype { font-size:.75rem; color:var(--g400); margin-top:4px; }
.rh-clbl { display:inline-block; margin-top:9px; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.rh-lbl-free     { background:#e8f5e8; color:#2d6e2d; }
.rh-lbl-reserved { background:#fef3e2; color:#92520c; }
.rh-lbl-sold     { background:#fde8e8; color:#8b1c1c; }

.rh-panel { background:var(--white); border:1.5px solid var(--g200); border-radius:var(--r); overflow:hidden; position:sticky; top:1rem; }
.rh-panel-head { display:flex; justify-content:space-between; align-items:flex-start; padding:.875rem 1rem .75rem; border-bottom:1px solid var(--g200); background:var(--white); }
.rh-panel-head h3 { font-size:1rem; font-weight:700; color:var(--blue-dark); margin:0; }
.rh-psub { font-size:.76rem; color:var(--g400); margin-top:2px; }
.rh-close { width:26px; height:26px; border-radius:50%; border:1px solid var(--g200); background:var(--g100); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--g700); flex-shrink:0; line-height:1; }
.rh-close:hover { background:var(--g200); }
.rh-panel-body { padding:.875rem 1rem; background:var(--white); }
.rh-pbadge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:600; margin-bottom:.875rem; }
.rh-pbadge .rh-dot { width:7px; height:7px; }
.rh-pstats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.875rem; }
.rh-pstat { background:var(--g100); border-radius:8px; padding:.6rem .4rem; text-align:center; }
.rh-pstat .pv { font-size:.9rem; font-weight:700; color:var(--blue-dark); }
.rh-pstat .pl { font-size:.63rem; color:var(--g400); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.rh-plabel { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--g400); margin-bottom:.5rem; }
.rh-prooms { border:1px solid var(--g200); border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.rh-proom { display:flex; justify-content:space-between; align-items:center; padding:.48rem .75rem; font-size:.8rem; border-bottom:1px solid var(--g200); color:var(--g700); }
.rh-proom:last-child { border-bottom:none; }
.rh-proom:nth-child(even) { background:var(--g100); }
.rh-proom-sqm { color:var(--g400); font-size:.76rem; font-weight:500; white-space:nowrap; margin-left:.5rem; }
.rh-pctas { display:flex; flex-direction:column; gap:.5rem; }
.rh-cta1 { display:block; background:var(--blue-mid); color:#fff !important; text-align:center; padding:.75rem; border-radius:var(--r); text-decoration:none !important; font-weight:600; font-size:.85rem; transition:background .18s; }
.rh-cta1:hover { background:var(--blue-dark); }
.rh-cta2 { display:block; background:transparent; color:var(--blue-mid) !important; text-align:center; padding:.65rem; border-radius:var(--r); text-decoration:none !important; font-weight:500; font-size:.82rem; border:1.5px solid var(--blue-mid); transition:background .18s; }
.rh-cta2:hover { background:var(--blue-light); }

@media(max-width:767px) {
  .rh-layout { flex-direction:column; }
  .rh-panel-col { width:100%; margin-top:.875rem; }
  .rh-panel { position:static; }
  .rh-grid { grid-template-columns:repeat(2,1fr); }
}