/* static/css/reviews/review_detail.css */
/* =========================
   Container
   ========================= */
.detail_box_container{
  width: 100%;
  margin: 2rem auto 4rem auto;
  padding: 20px 20px;
  box-sizing: border-box;
  background: #fff;
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205); */
  word-wrap: break-word;
  box-shadow:
    -10px 0 14px -14px rgba(0,0,0,.25),   /* left */
     10px 0 14px -14px rgba(0,0,0,.25);   /* right */

  /* nice reading defaults */
  line-height: 1.7;
}

/* =========================
   Section review header (MATCH TEMPLATE CLASSES)
   ========================= */
.review_header{
  display: block;
  margin: 0 0 1.2rem;
  padding: 0 0 .9rem;
  border-bottom: 1px solid rgba(0,0,0,.08);

  /* prevents “overlay” feel when body has floats */
  position: relative;
  clear: both;
}

.review_header::after{
  content: "";
  display: block;
  clear: both;
}

.review_title{
  margin: 0 0 .45rem;
  font-size: 1.6rem;
  line-height: 1.25;
}

.review_meta{
  font-size: .95rem;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.review-meta_dot{
  opacity: .7;
}

/* =========================
   Body content (TinyMCE safe)
   ========================= */
.detail_box_container img{
  max-width: 100%;
  height: auto;
}

.detail_box_container table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

.detail_box_container h2,
.detail_box_container h3,
.detail_box_container h4{
  margin-top: 1.2rem;
  margin-bottom: .6rem;
  line-height: 1.3;
}

.detail_box_container p{
  margin: .65rem 0;
}

@media (max-width: 355px) {
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 90%;
    padding: 20px 0;
    box-shadow: none;
  }
}

/* Extra small phones */
@media (min-width: 356px) and (max-width:370px){
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 85%;
    padding: 20px 0;
    box-shadow: none;
  }
}

/* Small phones - updated 1.25.2026*/ 
@media (min-width: 371px) and (max-width: 479px) {
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 85%;
    padding: 20px 0;
    box-shadow: none;
  }
}

/* Larger phones 1 (480px–580px) updated 1.25.2026 */
@media (min-width: 480px) and (max-width: 580px) {
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 72%;
    padding: 20px 0;
    box-shadow: none;
  }
}



/* Larger phones 2 (581px–767px) updated 1.25.2026 */
@media (min-width: 581px) and (max-width: 767px) {
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 76%;
    padding: 20px 0;
    box-shadow: none;
  }
}

/* Small tablets (portrait) updated 1.25.2026 */ 
@media (min-width: 768px) and (max-width: 899px)  {
  .detail_box_container{
    /* padding: 20px 30px; */
    width: 80%;
    padding: 20px 0;
    box-shadow: none;
  }
}


/* Large tablets (landscape) */ 
@media (min-width: 900px) and (max-width: 1023px) {
  .detail_box_container{
    /* padding: 20px 50px; */
    width: 80%;
    padding: 20px 0;
    box-shadow: none;
  }
}

/* copied and working */
@media (min-width: 1024px) and (max-width: 1127px) {
  .detail_box_container{
    /* padding: 20px 60px; */
    width: 83%;
    padding: 20px 0;
    box-shadow: none;
  }
}

@media (min-width: 1128px) and (max-width: 1279px) {
  .detail_box_container{
    /* padding: 20px 80px; */
    width: 80%;
    padding: 20px 0;
    box-shadow: none;
  }
}


@media (min-width: 1280px) and (max-width: 1365px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1366px) and (max-width: 1599px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1600px) and (max-width: 1679px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1680px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}