/* ─── pallet3d.css (Final) ──────────────────────────────────────────────────── */

/* ─── Modal backdrop & centering ─────────────────────────── */
.pallet3d-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  z-index: 10000;
}

/* ─── Modal content box ──────────────────────────────────── */
.pallet3d-content {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 920px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* ─── Header wrapper (title + toggles) ──────────────────── */
.pallet3d-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid #f0f3f8;
}

.pallet3d-content > h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.pallet3d-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

/* ─── Mode-toggle buttons ───────────────────────────────── */
.pallet3d-mode-btns {
  display: flex;
  gap: 12px;
}
.pallet3d-toggle {
  padding: 7px 20px;
  border: 1.5px solid #007bff;
  border-radius: 6px;
  background: #fff;
  color: #007bff;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pallet3d-toggle.active {
  background: #007bff;
  color: #fff;
}

/* ─── Tabbed UI for Container Previews ───────────────────── */
.pallet3d-tabs {
  width: 100%;
}
.pallet3d-tab-headers {
  display: flex;
  padding: 0 2rem;
  overflow-x: auto;
  max-height: 48px;
  border-bottom: 2px solid #007bff;
  background: #f7f9fc;
  border-radius: 8px 8px 0 0;
}
.pallet3d-tab-btn {
  padding: 12px 20px;
  margin: 0;
  border: none;
  background: transparent;
  color: #007bff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  border-right: 1px solid #eee;
  transition: background 0.2s, color 0.2s;
}
.pallet3d-tab-btn:last-child {
  border-right: none;
}
.pallet3d-tab-btn.active {
  background: #e6f0fa;
  color: #0056b3;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}
.pallet3d-tab-content {
  background: #fff;
  padding: 0 2rem 1.5rem;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ─── Tab-panel layout ─────────────────────────────── */
.pallet3d-tab-panel{
  display:none;
  width:100%;
  flex-direction:column;   /* ⬅️ added */
  align-items:center;
}
.pallet3d-tab-panel.active{
  display:flex;            /* becomes flex only when active */
}

/* ─── Hide the dynamic header if still injected ──────────── */
.pallet3d-dynheader {
  display: none !important;
}

/* ─── 3D Canvas wrapper ──────────────────────────────────── */
.pallet3d-canvas {
  width: 100%;
  height: 55vh;
  max-height: 500px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  margin: 1rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pallet3d-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ─── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 900px) {
  .pallet3d-content { max-width: 99vw; }
  .pallet3d-canvas { margin: 1rem; }
}
@media (max-width: 600px) {
  .pallet3d-canvas { height: 38vw; }
  .pallet3d-header,
  .pallet3d-mode-btns,
  .pallet3d-tab-headers { padding: 0 1rem; }
}

/* Hide the dynamic header inserted by pallet3d.js :contentReference[oaicite:0]{index=0} */
.pallet3d-dynheader {
  display: none !important;
}

/* Hide any static <h4> titles in the old pallet3d-card layout :contentReference[oaicite:1]{index=1} */
.pallet3d-card h4 {
  display: none !important;
}


/* ─── make the modal body scroll vertically if content is taller than 94 vh ─── */
.pallet3d-content{
  /* overrides the earlier “overflow:hidden” */
  overflow-y:auto;
}