/* Common styles */
    body{
      font-family: "Noto Sans", sans-serif;
    }
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .review {
      margin-bottom: 20px;
      /* border: 1px solid #ccc; */
      padding: 15px;
      width: 90%;
    }

    #topReviewsContainer{
        display: flex;
        gap: 2rem;
        padding: 10px 20px;
    }
    .topReview1{
      min-width: 300px;
    }
    .topReview2{
      min-width: 300px ;
      max-width: 440px;
    }
    .topText{
      padding: 2px;
      outline: none;
    }
    .topText::-webkit-scrollbar-track{
      display: none;
    }
    .topText::-webkit-scrollbar-thumb{
      display: none;
    }
    /* #topReviewsContainer :nth-child(1){
      width: 300px;
    }
    #topReviewsContainer :nth-child(2){
      width: 400px;
    }
    #topReviewsContainer :nth-child(3){
      width: 300px;
    } */
    .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .lightbox-content {
        display: flex;
        position: relative;
        /* flex-direction: column; */
        gap: 12px;
        align-items: center;
        width: 70%;
        background: white;
        border-radius: 10px;

        padding: 24px 16px;
    }
    
    .productAtTop{
      display: flex;flex-direction: column; justify-content: space-between;
    }

    #lightboxImage{
      width: 400px !important;
      height: 400px;
    }

    /* Slider styles for mobile */
    .slider {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 2px;
      width: 95%;
      position: relative;
      cursor: grab;
    }

   .slider::-webkit-scrollbar{
    display: none;
   }

    .slider img {
        flex-shrink: 0;
        max-width: 120px;
        height: 100px;
        object-fit: cover;
        /* border-radius: 10px; */
        cursor: pointer;
    }

    .lightbox {
        position: fixed;
       
        background-color: rgba(59, 59, 59, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .lightboxReviewContent{
      align-items: start;
    }

    .lightContentContainer{
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      align-self: self-start;
      padding-top: 32px;
      max-width: 400px;
    }
    .lightboxThumb{
      margin: 0;
    }
    
     .revType1 span:nth-child(2){
      color: #C45500 !important;
      font-weight: 600;

    }
    .revType span:nth-child(2){
      color: #007600;
      
      font-weight: 600;
    }
    .selected-image{
      width: 110% !important;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;

    }

    .selected-image img {
        width: 100% !important;
        margin-bottom: 20px;
    }


    .thumbnails {
        display: flex;
        gap: 4px;
        justify-content: center;
        margin-top: 6px;
    }

    .thumbnails img {
        width: 50px;

        height: 50px;
        cursor: pointer;
    }

    .close-btn {
        position: absolute;
        top: 0;
        right: 10px;
        color: rgb(0, 0, 0);
        font-size: 30px;
        cursor: pointer;
        text-transform:lowercase ;
    }
    /* Lightbox top border */
    .topBorder{
      width: 100%;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      min-height: 40px;
      top: 0;
      left: 0;
      z-index: 0;
      position: absolute;
      background: #e6e6e6;
    }
    /* Rating Indicator */
    .ratingIndicator{
      border: 1px solid #8b8a8ab9;
      position: relative;
      width: 100%;
      border-radius: 4px;
      height: 20px;
    }
    .topSecBtn{
      max-width: 20%;
      font-size: 12px;
       cursor: pointer;
        padding: 4px 8px;
        color: rgb(31, 28, 28); 
        background: #ffffff; 
        border-radius: 12px; 
        outline: none; 
        border: 1px solid rgb(158, 158, 158);
    }
    .seeAllBuyingOptions{
      border: 1px solid #b6b6b6;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 250px;
      max-height: 60px;
    }
    .seeAllBuyingOptions button{
      background: rgb(255, 218, 5);
      color: #0f1111;
      width: 100%;
      font-size: 12px;
      border-radius: 40px;
      padding: 6px 12px;
      cursor: pointer;
      border: none;
      outline: none;
    }
    .seeAllBuyingOptions button:focus{
      outline: 3px solid #007185;
      outline-offset:2px ;
    }
    .seeAllBuyingOptions button:hover{
      background: rgb(245, 209, 4);
      
    }
   .revType1  .wht{
    display: none;
  }
    .ratingIndicatorContainer:hover  .ratingIndicator{
      color: #de7921;
      border: 1px solid #de7921;
    }
    .rated{
      min-width: 40px;
    }
    .rated,.percent{
      text-decoration: none;
       margin-top: 2px; 
       cursor: pointer; 
       color: #007185; 
       font-size: 14px;
        font-weight: 400;
    }
    
    .link:hover{
      color: #de5721 !important;
      text-decoration: underline;
    }
    
    .orangeLine{
      position: absolute;
      background: #de7921;
      left: -2px;
      top: 0;
      border-radius: 4px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      height: 104%;
      width: 96%;
      z-index: 9999;
    }
    .abc2{
      width: 4%;
    }
    .abc3{
      width: 0%;
    }
    .abc4,.abc5{
      width: 0;
    }
    .last{
      color: #646464 !important;
    }
 .percent:hover{
color: #de7921;

}
    /* STAR */
    .stars {
      display: flex;
      flex-direction: row;
      font-size: 1.5rem;
      position: relative;
    }

    .stars .star {
      color: #ccc; /* Empty star color */
      position: relative;
      display: inline-block;
    }

    .stars .filled {
      color: #de7921; /* Filled star color */
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }

    .star.full {
      color: #de7921; /* Full star color */
    }
     .notfilled{
    color: #ccc;
    }
    .revBtn1{
      background: transparent;
      padding: 4px 12px;
      font-size: 12px;
      border: 1px solid #646464;
      border-radius: 40px;
    }
    .revBtn2{
      background: transparent;
      padding: 4px 12px;
      font-size: 12px;
      border: none;
      border-radius: 40px;
    }
    .revButtonContainer{
      display: flex;
      gap: 8px;
      margin: 12px 0;
      margin-top: 6px;
    }
    /* Flexbox for desktop */
    @media (min-width: 768px) {
      .slider {
        overflow-x: unset;
        cursor: default;
        justify-content: flex-start;
      }

      .slider img {
        width: auto;
        height: 80px;
      }

    }
    @media (max-width:800px) {
      #topReviewsContainer{
        display: none;
      }
      .hrLine{
        border-top: none;
      }
      .lightbox{
        width: 100%;
        height: 110%;
        background: #e2e2e2 !important;
      }
      #lightbox{
        z-index: 99999;
        background: #e2e2e2 !important;

      }
      .slider img{
        min-width: 200px !important;
      }
      #lightboxImage{
        width: 160px !important;
        height: 200px;
      }
      .close-btn{
        right: 20px;
        top: 40px;
        font-size: 40px;
      }
      .thumbnails{
        /* flex-wrap: wrap; */
        overflow: hidden;
        max-width: 290px;
      }
      .lightboxReview{
        font-size: 12px !important;
      }
      .star-rating{
        max-height: 24px;
      }
      .star-rating-lightbox{
        flex-direction: column !important;
        align-items: start !important;
      }
      .lightAboutPro{
        font-size: 12px !important;
      }
      .star-rating h4{
        font-size: 12px !important;
      }
      .lightbox-content{
        padding: 24px 12px;
        overflow: scroll;
        width: 100%;
        background: #f9fffc !important;

        flex-direction: column-reverse;
      }
      .seeAllBuyingOptions{
        display: none !important;
      }
      .productAtTop{
        display: none !important;
      }
      .selected-image{
      width: 100% !important;
      }
      .topBorder{
        display: none;
      }
      .ratingPercentage{
        padding-right: 10px;

        padding: 0;
      }
      .mostTopSection{
        padding: 4px !important;
        flex-direction: column !important;
        gap: 0 !important;
      }
      .ratingIndicatorContainer{
        gap: 10px !important;
        width: 98%;
      }
      .percent{
        min-width: 20px;
      }
    }

@media (max-width:400px) {
  .revAboutProduct{
    flex-direction: column;
    align-items: start !important;
  }
  
}