/* עיצוב הבית — standalone 3D room planner. Matches the main site's palette
   (orange #FF6600 accent, cream canvas, Heebo) without importing its CSS. */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Explicit display values (e.g. #selection-panel's flex) would otherwise
   override the UA's [hidden] { display: none } — panels must actually hide. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: 'Heebo', -apple-system, sans-serif;
  background: #fbfbf5;
  color: #1a1a1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
#topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: #0B0B0C; color: #fff;
  flex: 0 0 auto;
}
#brand { display: flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; }
#page-title { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; }
#room-tabs { display: flex; gap: 6px; margin-inline-start: 10px; flex-wrap: wrap; }
.room-tab {
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  border-radius: 999px; padding: 5px 14px; font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.room-tab.active { background: #FF6600; border-color: #FF6600; font-weight: 600; }
#top-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.chip {
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  border-radius: 999px; padding: 5px 13px; font-family: inherit; font-size: 13.5px; cursor: pointer;
  white-space: nowrap;
}
.chip-primary { background: #FF6600; border-color: #FF6600; font-weight: 600; }
#cart-count { background: #fff; color: #FF6600; border-radius: 999px; padding: 0 7px; font-weight: 700; margin-inline-start: 2px; }

/* ── Layout ── */
#layout { display: flex; flex: 1 1 auto; min-height: 0; }

/* Catalog sidebar (right side in RTL) */
#catalog {
  width: 280px; flex: 0 0 auto; background: #fff;
  border-inline-end: 1px solid #e7e2d8;
  display: flex; flex-direction: column; min-height: 0;
}
#search-form { display: flex; gap: 6px; padding: 10px 10px 4px; }
#search-input {
  flex: 1; border: 1px solid #e0dbd0; border-radius: 999px; padding: 8px 14px;
  font-family: inherit; font-size: 13.5px; background: #fbfbf5; min-width: 0;
}
#search-input:focus { outline: none; border-color: #FF6600; }
#search-btn {
  border: none; background: #FF6600; color: #fff; border-radius: 999px;
  width: 38px; height: 38px; cursor: pointer; font-size: 15px; flex: 0 0 auto;
}
#search-btn:disabled { opacity: .6; }
.search-note { padding: 6px 14px; font-size: 12.5px; color: #8a8577; }
.search-note.err { color: #c0392b; }
#catalog-head { padding: 10px 14px; font-size: 12.5px; color: #8a8577; border-bottom: 1px solid #eee9df; }
#catalog-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.cat-item {
  display: flex; gap: 10px; align-items: center;
  background: #fbfbf5; border: 1px solid #eee9df; border-radius: 12px;
  padding: 8px; cursor: pointer; text-align: start; font-family: inherit;
}
.cat-item:hover { border-color: #FF6600; }
.cat-item img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 auto; }
.cat-item .ci-title {
  font-size: 13px; line-height: 1.35; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-item > span { min-width: 0; }
.cat-item .ci-meta { font-size: 12px; color: #8a8577; margin-top: 2px; }
.cat-item .ci-price { color: #FF6600; font-weight: 700; }
.cat-empty { padding: 22px 16px; font-size: 13.5px; color: #8a8577; line-height: 1.6; }

/* ── Stage ── */
#stage { position: relative; flex: 1 1 auto; min-width: 0; }
#scene { width: 100%; height: 100%; display: block; touch-action: none; }

.overlay-card {
  position: absolute; background: #fff; border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.16); padding: 12px 14px; font-size: 13.5px;
}
#hint {
  bottom: 14px; right: 50%; transform: translateX(50%);
  color: #6d6a5f; pointer-events: none; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis;
}

/* Selection panel */
#selection-panel { bottom: 14px; right: 14px; display: flex; gap: 12px; align-items: center; max-width: min(480px, calc(100% - 28px)); }
#sel-img { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; background: #fbfbf5; flex: 0 0 auto; }
#sel-title { font-weight: 600; font-size: 13.5px; max-height: 2.6em; overflow: hidden; line-height: 1.3; }
#sel-dims { font-size: 12px; color: #8a8577; margin-top: 2px; }
#sel-price { color: #FF6600; font-weight: 700; margin-top: 2px; }
#sel-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.mini-btn {
  border: 1px solid #e0dbd0; background: #fbfbf5; border-radius: 9px;
  width: 34px; height: 34px; cursor: pointer; font-size: 15px; font-family: inherit;
}
.mini-btn:hover { border-color: #FF6600; }
.mini-btn.danger { width: auto; padding: 0 12px; color: #c0392b; font-size: 13px; margin-top: 10px; height: 32px; }
.buy-btn {
  background: #FF6600; color: #fff; text-decoration: none; border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; white-space: nowrap;
}

/* Room settings + cart */
#room-settings { top: 14px; right: 14px; width: 250px; }
#room-settings label { display: block; font-size: 13px; margin-bottom: 10px; color: #444; }
#room-settings input[type=range] { width: 100%; accent-color: #FF6600; }
.rs-title { font-weight: 700; font-size: 13.5px; margin: 4px 0 8px; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.swatch {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid #e0dbd0; padding: 0;
}
.swatch.active { border-color: #FF6600; box-shadow: 0 0 0 2px rgba(255,102,0,.25); }

#cart-panel { top: 14px; left: 14px; width: 320px; max-height: calc(100% - 28px); overflow-y: auto; }
.cart-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0ece2; }
.cart-row img { width: 44px; height: 44px; object-fit: contain; background: #fbfbf5; border-radius: 8px; }
.cart-row .cr-t { font-size: 12.5px; line-height: 1.3; max-height: 2.6em; overflow: hidden; flex: 1; }
.cart-row .cr-p { color: #FF6600; font-weight: 700; font-size: 13px; white-space: nowrap; }
.cart-row a { color: #FF6600; text-decoration: none; font-size: 12.5px; white-space: nowrap; }
#cart-total { font-weight: 700; padding: 10px 0 4px; font-size: 15px; }
.cart-note { font-size: 11.5px; color: #8a8577; line-height: 1.5; margin-top: 6px; }
.cart-empty { color: #8a8577; font-size: 13px; padding: 8px 0; }

/* ── Mobile ── */
@media (max-width: 760px) {
  #page-title { display: none; }
  #topbar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .room-tab, .chip { padding: 7px 13px; font-size: 13px; }
  #layout { flex-direction: column-reverse; }
  #catalog { width: 100%; height: 208px; border-inline-end: none; border-top: 1px solid #e7e2d8; }
  #search-form { padding: 8px 10px 2px; }
  #catalog-head { padding: 6px 12px; }
  #catalog-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
  .cat-item { flex: 0 0 210px; }
  .search-note { flex: 0 0 100%; }
  .mini-btn { width: 42px; height: 42px; }
  #selection-panel { right: 8px; left: 8px; bottom: 8px; max-width: none; flex-wrap: wrap; padding: 10px; }
  #sel-actions { width: 100%; justify-content: space-between; }
  .buy-btn { padding: 10px 16px; }
  #cart-panel { left: 8px; right: 8px; width: auto; }
  #room-settings { right: 8px; left: 8px; width: auto; }
  #hint { display: none; }
}