/* ========================================
   HEURISTIC WIREFRAME - 7 ROW GRID SYSTEM
   All scenes use 7 rows with different content
   ======================================== */

/* Grid Container - All scenes use 7 rows */
.heuristic-wireframe {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr auto 1fr auto auto;
  gap: 0.3rem;
  padding: 0.3rem;
  overflow: hidden;
  background: white;
  max-height: 100%;
}

/* Ensure icons appear above their containers */
.heuristic-wireframe .icon-img {
  position: relative;
  z-index: 10;
}

/* Base reset for all icons - set sensible defaults */
.heuristic-wireframe img,
.heuristic-wireframe .icon-img {
  display: block;
  object-fit: contain;
}

/* Scene Visibility */
.scene-1-only { display: none !important; }
.scene-1 .scene-1-only { display: revert !important; }
.scene-2-only { display: none !important; }
.scene-2 .scene-2-only { display: revert !important; }
.scene-3-only { display: none !important; }
.scene-3 .scene-3-only { display: revert !important; }
.scene-1-2-only { display: revert !important; }
.scene-3 .scene-1-2-only { display: none !important; }

/* ========================================
   ROW 1: HEADER
   ======================================== */
.hz-row-1 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  background: #f5f5f5;
}

.hz-hamburger, .hz-logo, .hz-profile, .hz-cart {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hz-hamburger img, .hz-logo img, .hz-profile img, .hz-cart img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

.heuristic-wireframe .hz-hamburger img,
.heuristic-wireframe .hz-hamburger .icon-img,
.heuristic-wireframe .hz-logo img,
.heuristic-wireframe .hz-logo .icon-img,
.heuristic-wireframe .hz-profile img,
.heuristic-wireframe .hz-profile .icon-img,
.heuristic-wireframe .hz-cart img,
.heuristic-wireframe .hz-cart .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hz-title {
  font-weight: 600;
  font-size: 0.65rem;
  flex: 1;
}

.hz-buy-btn {
  background: black;
  color: white;
  border: none;
  padding: 0.3rem 0.8rem;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}

/* ========================================
   ROW 2: HERO + CONTENT
   ======================================== */
.hz-row-2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.3rem;
}

.hz-hero {
  background: #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  aspect-ratio: 1;
}

.hz-hero img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.scene-3 .hz-hero img {
  width: 50%;
  height: 50%;
}

.hz-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.2rem;
}

.hz-stars-top {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  margin-bottom: 0.2rem;
}

.heuristic-wireframe .hz-stars-top img,
.heuristic-wireframe .hz-stars-top .icon-img {
  width: 8px;
  height: 8px;
}

/* Heart icon for Scene 3 - smaller and right-aligned */
.hz-heart-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.2rem;
  width: 100%;
  height: 1rem;
}

.heuristic-wireframe .hz-heart-top img,
.heuristic-wireframe .hz-heart-top .icon-img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

/* ========================================
   ROW 3: TEXT LABEL (Scene 1&2) / PIZZA SIZES (Scene 3)
   ======================================== */
.hz-row-3 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
}

/* Scene 3: Grid layout with 3 rows (black line + pizza sizes + gray divider) */
.scene-3 .hz-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.3rem;
}

/* Scene 3: Black line at top spanning all columns */
.scene-3 .hz-row-3 > .text-line {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 6px;
  background: #000;
}

/* Scene 3: Pizza sizes in second row */
.scene-3 .hz-row-3 > .size-box {
  grid-row: 2;
}

/* Scene 3: Add gray divider line after pizza sizes */
.scene-3 .hz-row-3::after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
  margin-top: 0.2rem;
}

.size-box {
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  max-height: 2.5rem;
}

.heuristic-wireframe .size-box img,
.heuristic-wireframe .size-box .icon-img {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

/* Scene 3: Different pizza sizes - Small (col 1), Medium (col 2), Large (col 3) */
/* Now with visible text-line at position 2, pizzas are at positions 3, 4, 5 */

/* Third child = First pizza = Small */
.scene-3 .hz-row-3 .size-box:nth-child(3) {
  display: flex !important;
  width: 2rem !important;
  height: 2rem !important;
  max-height: 2rem !important;
  max-width: 2rem !important;
  min-height: 2rem !important;
  min-width: 2rem !important;
  justify-self: center;
}

.scene-3 .hz-row-3 .size-box:nth-child(3) img,
.scene-3 .hz-row-3 .size-box:nth-child(3) .icon-img {
  width: 55% !important;
  height: 55% !important;
}

/* Fourth child = Second pizza = Medium */
.scene-3 .hz-row-3 .size-box:nth-child(4) {
  display: flex !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  max-height: 2.5rem !important;
  max-width: 2.5rem !important;
  min-height: 2.5rem !important;
  min-width: 2.5rem !important;
  justify-self: center;
}

.scene-3 .hz-row-3 .size-box:nth-child(4) img,
.scene-3 .hz-row-3 .size-box:nth-child(4) .icon-img {
  width: 65% !important;
  height: 65% !important;
}

/* Fifth child = Third pizza = Large */
.scene-3 .hz-row-3 .size-box:nth-child(5) {
  display: flex !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  max-height: 3.5rem !important;
  max-width: 3.5rem !important;
  min-height: 3.5rem !important;
  min-width: 3.5rem !important;
  justify-self: center;
}

.scene-3 .hz-row-3 .size-box:nth-child(5) img,
.scene-3 .hz-row-3 .size-box:nth-child(5) .icon-img {
  width: 80% !important;
  height: 80% !important;
}

/* ========================================
   ROW 4: DRINKS/SIZES GRID (Scene 1&2) / TOPPINGS (Scene 3)
   ======================================== */
.hz-row-4 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
}

/* Scene 3: Toppings layout - single column for toppings */
.scene-3 .hz-row-4 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.2rem;
}

/* Scene 3: Add gray divider line after toppings */
.scene-3 .hz-row-4::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
  margin-top: 0.2rem;
}

/* ========================================
   ROW 5: COMPLIMENTARY ITEMS (Scene 1&2) / SIDES GRID (Scene 3)
   ======================================== */
.hz-row-5 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem;
  padding: 0 0.2rem;
}

/* Scene 1&2: Multi-row grid (gray divider, then items) */
.scene-1 .hz-row-5,
.scene-2 .hz-row-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.3rem;
}

/* Scene 1&2: Add gray divider before complimentary items */
.scene-1 .hz-row-5::before,
.scene-2 .hz-row-5::before {
  content: '';
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
}

/* Scene 1&2: Comp label with black line in row 2 */
.scene-1 .comp-label,
.scene-2 .comp-label {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Scene 1: Hide the gray text-line inside comp-label in Row 5 */
.scene-1 .hz-row-5 .comp-label > .text-line {
  display: none !important;
}

/* Scene 1&2: Grid items (ingredients) in row 2, each in their own column */
.scene-1 .hz-row-5 > .grid-item:nth-of-type(2),
.scene-2 .hz-row-5 > .grid-item:nth-of-type(2) {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.scene-1 .hz-row-5 > .grid-item:nth-of-type(3),
.scene-2 .hz-row-5 > .grid-item:nth-of-type(3) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.scene-1 .hz-row-5 > .grid-item:nth-of-type(4),
.scene-2 .hz-row-5 > .grid-item:nth-of-type(4) {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

/* Scene 3: Single-row grid for sides (Breads, Dessert, Drinks) */
.scene-3 .hz-row-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem;
}

/* Scene 3: Add gray divider line after sides */
.scene-3 .hz-row-5::after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
  margin-top: 0.2rem;
}

.hz-toppings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.topping-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

/* Column 1: Circles and semi-circles - left-aligned */
.topping-circles {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: flex-start;
}

.circle-half-left, .circle-full, .circle-half-right {
  width: 14px;
  height: 14px;
  border: 1.5px solid #333;
  border-radius: 50%;
}

.circle-half-left {
  background: linear-gradient(to right, #333 50%, transparent 50%);
}

.circle-full {
  background: #333;
}

.circle-half-right {
  background: linear-gradient(to left, #333 50%, transparent 50%);
}

/* Column 2: Ingredient icons - bigger */
.topping-icon {
  width: 60px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.heuristic-wireframe .topping-icon img,
.heuristic-wireframe .topping-icon .icon-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* Column 3: Black lines - shorter (50%) */
.topping-row .text-line {
  height: 6px;
  width: 50%;
  background: #000;
}

.hz-side-label {
  display: none;
}

/* ========================================
   ROW 6: BOTTOM CONTENT (Scene 1&2) / ORDER BUTTON (Scene 3)
   ======================================== */
.hz-row-6 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem;
  padding: 0 0.2rem;
}

/* Scene 1&2: Grid layout with gray divider, then 3 columns (review + persona) */
.scene-1 .hz-row-6,
.scene-2 .hz-row-6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem;
}

/* Scene 1&2: Add gray divider before bottom content */
.scene-1 .hz-row-6::before,
.scene-2 .hz-row-6::before {
  content: '';
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
}

/* Scene 3: Order button spanning all columns */
.scene-3 .hz-row-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.comp-label {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.comp-label .text-line {
  width: 200px;
}

/* Add black text line after gray divider in Scene 1&2 Row 6 */
/* REMOVED - black bars should not appear in Scene 1&2 */
/* .scene-1 .hz-row-6 .comp-label::after,
.scene-2 .hz-row-6 .comp-label::after {
  content: '';
  display: block;
  width: 30%;
  height: 6px;
  background: #333;
  border-radius: 2px;
} */

/* ========================================
   ROW 7: EMPTY (no content)
   ======================================== */
.hz-row-7 {
  grid-column: 1 / -1;
  display: none;
}

.hz-bottom-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

/* Scene 1&2: Bottom content is in Row 6, column 1, row 2 */
.scene-1 .hz-bottom-content,
.scene-2 .hz-bottom-content {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
}

/* Scene 1&2: Hide the text-line inside bottom-content */
.scene-1 .hz-bottom-content > .text-line,
.scene-2 .hz-bottom-content > .text-line {
  display: none !important;
}

/* Scene 1&2: Add thin black bars below stars for review text */
.scene-1 .hz-bottom-content::after,
.scene-2 .hz-bottom-content::after {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 0.3rem;
  background:
    linear-gradient(to bottom,
      transparent 0px,
      transparent 1px,
      #333 1px,
      #333 4px,
      transparent 4px,
      transparent 10px,
      #333 10px,
      #333 13px,
      transparent 13px
    );
  background-size: 100% 20px;
  background-repeat: no-repeat;
}

/* Scene 3: Bottom content hidden (Order button in Row 7 instead) */
.scene-3 .hz-bottom-content {
  display: none !important;
}

.hz-stars-bottom {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.heuristic-wireframe .hz-stars-bottom img,
.heuristic-wireframe .hz-stars-bottom .icon-img {
  width: 10px;
  height: 10px;
}

.empty-circle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Empty circle icon sizing */
.empty-circle img,
.empty-circle .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Scene 1&2: Position circle/persona icon in column 2, row 2 of Row 6 */
.scene-1 .empty-circle,
.scene-2 .empty-circle {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: center;
  justify-self: center;
}

.order-btn {
  background: black;
  color: white;
  border: none;
  padding: 0.6rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

/* ========================================
   SHARED: GRID ITEMS (Rows 4 & 6)
   ======================================== */
.grid-item {
  aspect-ratio: 1;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  max-height: 2.5rem;
}

.heuristic-wireframe .grid-item img,
.heuristic-wireframe .grid-item .icon-img {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

/* Scene 1&2: Larger icons in grid items */
.scene-1 .grid-item,
.scene-2 .grid-item {
  max-height: 5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-1 .grid-item img,
.scene-1 .grid-item .icon-img,
.scene-2 .grid-item img,
.scene-2 .grid-item .icon-img {
  width: 90%;
  height: 90%;
}

/* Scene 3: Larger icons for Breads, Dessert, Drinks in Row 5 - same size as Scene 1 Row 4 */
.scene-3 .hz-row-5 .grid-item {
  max-height: 5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-3 .hz-row-5 .grid-item img,
.scene-3 .hz-row-5 .grid-item .icon-img {
  width: 90%;
  height: 90%;
}

/* ========================================
   SHARED: TEXT LINES
   ======================================== */
.text-line {
  height: 6px;
  background: #333;
  border-radius: 2px;
}

/* Gray divider lines - direct children of rows in Scene 1&2 */
.scene-1 .hz-row-3 > .text-line,
.scene-2 .hz-row-3 > .text-line,
.scene-1 .comp-label > .text-line,
.scene-2 .comp-label > .text-line,
.scene-1 .hz-row-6 > .text-line,
.scene-2 .hz-row-6 > .text-line {
  background: #d0d0d0;
  height: 4px;
  width: 100% !important;
}

/* ========================================
   CRITIQUE OVERLAY
   ======================================== */
.critique-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.critique-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.3);
  z-index: 999;
}

.critique-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  z-index: 1001;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

/* Ensure critique marker children are visible */
.critique-marker > * {
  opacity: 1;
}

.critique-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 3px solid #8a43ff;
}

.critique-icon img,
.critique-icon .icon-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.critique-label {
  background: white;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  color: #333;
  opacity: 1 !important;
  line-height: 1.2;
}

/* ========================================
   SCENE TITLE HEADERS (outside device)
   ======================================== */
.hz-scene-titles {
  text-align: center;
  margin-bottom: 1rem;
  min-height: 2.5rem;
}

.hz-scene-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-primary-500, #7c3aed);
  margin: 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-radius: 20px;
  display: none !important;
}

.hz-scene-title.active {
  display: inline-block !important;
}

/* ========================================
   HEURISTIC DEMO WRAPPER & SCENE PANEL
   ======================================== */

/* Heuristic Demo Wrapper - Side by Side Layout */
.heuristic-demo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
}

/* Scene Description Panel */
.heuristic-scene-panel {
  flex: 0 0 300px;
  max-width: 300px;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid var(--bs-primary-500, #7c3aed);
}

.heuristic-scene-panel .scene-content {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.heuristic-scene-panel .scene-content.active {
  display: block;
  opacity: 1;
}

.heuristic-scene-panel h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.75rem;
}

.heuristic-scene-panel p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 992px) {
  .heuristic-demo-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .heuristic-scene-panel {
    flex: none;
    max-width: 100%;
    width: 100%;
    order: -1; /* Put text above on mobile */
  }
}