.felix-flex-table {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    margin-top: 1em;
}
.felix-flex-row {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: column;
}
.felix-image {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.review-text {
    font-size: 1.3em;
    margin: 0.3em;
}

.felix-image-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 65%;
  max-width: 80em;
}
.status{
  color: green;
  font-size: 2em;
  margin: 0em;
}

@media (max-width: 1079px) {
  .felix-flex-table {
    flex-wrap: wrap;
  }
  .felix-image-block {
    width: 100%;
    max-width: none;
  }
  .felix-image {
    width: 100%;
    max-width: none;
  }
}



.review-section {
  margin-top: 1.5em;
  padding: 1em;
  border-top: 1px solid #ddd;
}
.review-form { 
  display: flex;
  flex-direction: column;
  gap: .6em;
  max-width: 100vw;
  margin-top: 1em;
}
.review-form label { 
  display: flex;
  flex-direction: column;
  font-size: .95em; 
}
.review-form input, .review-form textarea { 
  padding: .5em; 
  font-size: 1em; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
}
.review-form button { 
  align-self: flex-start; 
  padding: .5em 1em; 
  cursor: pointer; 
}
.reviews-list { 
  margin-top: 1em; 
  display: flex; 
  flex-direction: column; 
  gap: .8em; 
}
.review-item {
   padding: .6em;
   border: 0.3em solid #9f9f9f;
   border-radius: 6px;
   background: #434343;
   min-width: 0;          /* allow this flex item to shrink */
   max-width: min(100%, 100vw);       /* clamp to parent but never exceed the viewport */
   box-sizing: border-box;
}
.review-item-header {
   display: flex;
   gap: .6em;
   align-items: baseline;
   justify-content: space-between;
   > * { min-width: 0; }
}
.review-title { 
  font-size: 1.02em; 
}
.review-meta { 
  font-size: .85em; 
}
.review-body {
   margin-top: .4em;
   white-space: pre-wrap;
   /* prefer breaking at spaces, but allow breaks anywhere when necessary for very long unbroken strings */
   overflow-wrap: anywhere;
   word-wrap: break-word; /* legacy fallback */
   word-break: normal;
   hyphens: auto;
   width: 100%; 
   max-width: 100%;
   min-width: 0;  /* ensure the text block can shrink and wrap inside a flex item */
}
.review-success { 
  color: green; 
  margin: .6em 0; 
}
.review-errors { 
  color: #b02121; 
  margin: .6em 0; 
}
.reviewer-name {
  flex: 1 1 auto;           /* use available space but remain shrinkable */
  min-width: 0;             /* essential in flex layouts so the name can wrap */
  overflow-wrap: anywhere;  /* prefer breaking at natural points but allow breaks */
  word-break: break-word;   /* safe fallback to ensure wrapping */
  white-space: normal;      /* allow wrapping */
}

/* Light-mode: use a plain black review background with readable text */
@media (prefers-color-scheme: light) {
   .review-item {
     background: #f7f7f7;
     border-color: #e7e7e7;
   }
   .review-item .review-meta {
     opacity: 0.9;
   }
   /* keep error/success colours visible on dark bg */
   .review-success { color: #9fe6a0; }
   .review-errors { color: #ffb3b3; }
}