/**
 * @package  QuizMe-Wara
 */

 /* ########################### Shared Styles ########################################### */



 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   .manage-pagination>button.current-manage,
   .cpp-current-page{
     /* background: #1d7db3; */
     color: #fff;

    background: #50575e;



    


   }

 .answer-div,
 .question-div {
      /* display: ruby; */
      /* border-bottom: 2px solid #eee; */
      /* margin-top: 10px; */



      display: flex;
      /* border-bottom: 2px solid #eee; */
      /* margin-top: 10px; */
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;

 
      align-items: baseline;
 
 }
 .question-border{
    border-bottom: 2px solid #eee;
    margin: 1% 0px;
    padding-bottom: .2%;
 }
 .question-div>p {
    padding-left: 3px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: capitalize;

      
 }
 
 .main-container {
      /* background: #fff; */
      /* padding: 1% .5%; */
 }
 

 
 .answer-btn {
      border: none;
      padding: .5% 1%;
      color: #767676;
      font-weight: bold;
 
 }
 
 .answer-div {
   border-bottom: none;
 }
 
 .answer-vote {
 
    padding: .5%;
    background: #f8fcff;
    width: min-content;
    margin-bottom: .5%;
}
 
 .report-btn {
      background: transparent;
      border: 2px solid #eee;
 }
 
 .answer-vote>p {
      margin: 0px;
 }
 
 /* .question-icon {
      background: #4c4c4c;
      color: #fff;
      padding: .5% 1%;
      margin: 0px 5px 0px 1%;
 } */

 .question-icon {

 color: #000;
 margin-right: 22px;
 text-align: right;

   }
.question-img{
    animation-duration: 3s;
  animation-name: slide-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation: 3s infinite alternate slide-in;

}
   .question-icon

   {
    color:#767676;
   }
.woo-q-title{
   color: #b83755;
   }
 .question-container {
      display: grid;
      width: 100%;
 }
 
 .checkbox-group {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
 }
 
 .checkbox-group label {
      margin-bottom: 0;
      margin-left: 8px;
      font-weight: normal;
 }
 
 #open-reviews-tab{
  font-weight: bold;
  cursor: pointer;
  margin: 0px;
 }
 


 .accordionbtn {
  background-color:#fff;
  color: #444;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: background 0.2s;
  margin-bottom: 4px;
  display: flex;
align-items: center;
position: relative;
}
.active, .accordionbtn:hover {
  /* background-color: #eee; */
  background-color: #f3f4f5;

}
.accordinpanel {
  padding: 0 16px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordin-icon
 {
  transform: rotate(0deg);
  position: absolute;
  right: 10px;
 }



     /* Popup styling */


    .reply-question{
      width:45%
    }
    .replay-overlay,
    #popupOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.3);
      z-index: 999;
    }
    .close-overlay,
    #closeBtn {
      margin-top: 10px;
        position: absolute;
        right: 0px;
        background: transparent;
        border: 0px;
        top: -6px;
    }
    .close-replaybtn
    {
          position: absolute;
    right: 0px;
    background: transparent;
    border: none;
    }
#showPopupBtn ,#showPopupBtn1
    {

    background: #4c4c4c;
    border: none;
    padding: 10px;
    float: right;
    z-index: 1000;
    position: relative;
    margin: 1% 0px;
    border-radius: 6px;
    color: #fff;
    }


    .loader{display: none;}


.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 100px auto; /* Center horizontally and add spacing from top */
  position: absolute;
    left: 47%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 








input[name="user_name"],input[name="user_email"]
 {
  width: 100%;
  min-height: 40px;
  border: none;
  padding: 10px;
  border-radius: 5px;
 }
 
 .invalid-username,
 .invalid-email,
 .invalid-name ,
 .invalid-answer{
      display: none;
   text-align: center;

 }
 .invalid-username,
 .invalid-email,
  .invalid-answer,
 .invalid-name {
      color: #f5b2b6;
 }
 .invalid-answer,
 .success-message{
  text-align: center;
 }
 
 .success,
 .reset {
      color: #d7f5b2;
 }
 .que-answer-container{
   width: 100%;
   display: grid;
   margin-left: 4px;
    position: relative;
    padding-bottom: 35px;
 }

 .loaded-in-answers{
  position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    display: block;
 }


 .loaded-in-answers span{
        background: #D9D9D9;
    padding: 8px;
    border-radius: 8px;
    color: #000;
    letter-spacing: 1px;
    text-transform: capitalize;
 }
.qimg-view,
 .ans-btn
 {

   border: none;
   transition: background 0.2s;
   height: max-content;
   padding: 5px;
   margin: 0px 15px;
   background: #e9e6ed;
  right: 0px;
  display: flex;
  align-items: center;

      padding: 7px 9px;
    border-radius: 5px;
    position: relative;
        top: 6px;
}
.qinner-title{
      color: #4c4c4c;
      font-weight: bold;
}
.q-up-down{
  display: flex;
  flex-flow: column-reverse;
  position: relative;
  top:-10px;
  text-align: center;

}
/* .q-up-down:last-child, */
.q-up-down .down-question,
.q-up-down .up-question
{
    opacity: .6;
    border: 2px solid #dddddd;
    border-radius: 20px;

     padding: 5px 4px 0px 4px;
}
.q-up-down .down-question
{
   rotate: 180deg;
   margin: 20px 0px 6px;
   cursor: pointer;
}



  .number-control {
    display: inline-flex;
    align-items: center;
    width: 70px;
    padding: 5px;
    position: relative;
    font-family: Arial, sans-serif;
    position: relative;
    margin: 2% 0px;
    
  }

  .number-control input[type="text"] {
    /* width: 50px; */
    border: none;
    text-align: center;
    font-size: 1em;
    width:-webkit-fill-available;
    outline: none;

  }

  /* Container for number-icons */
  .number-icons {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    cursor: pointer;
    user-select: none;
    position: absolute;
    left: 25%;
  }

  /* Up icon */
  .number-icons .up::before {
    content: "▲"; /* Unicode for up arrow */
    display: block;
    font-size: 1.1em;
    top: -10px;
    position: relative;
    background: #dddddd;
    color: #1c0101;
    border-radius: 50%;
    padding: 0px 4px 4px 4px;
    margin-bottom: 10px;
  }

  /* Down icon */
  .number-icons .down::after {
    content: "▼"; /* Unicode for down arrow */
    display: block;
    margin-top: 2px;

    font-size: 1.1em;
    top: 10px;
    position: relative;
    background: #dddddd;
    color: #1c0101;
    border-radius: 50%;
    margin-bottom: 10px;
    padding: 0px 0px 0px 4px;
  }
    .number-icons .up,
    .number-icons .down
  {
        position: relative;
  }

/* .q-up-down>*
{
      margin: 20px;

} */
.ask-icon{
      position: relative;
    top: 5px;
}
.qimg-container{
  display: none;;
}


 
 .ans-btn:hover{
   /* background: #9e9e9e; */
   background: #ded9e4;
 }
 .answer-textarea {
   width: 98%;
   padding: 7px;
   margin-bottom: 15px;
   border: 1px solid #bbb;
   border-radius: 4px;
   font-size: 1em;
   margin: 1% 1%;
   min-height: 180px;
   }
   .answer-contained{
     text-align: right;

   }
   .send-btn
   {
     border: none;
   margin: 0px 1% 10px 1%;
   }
   .answer-message{
     text-align: center;

   }
   .answer-message,.answer-contained

   {
     display:none;
     width:100%;
   }


   .user-details
   {
     width: 100%;
margin-left: 1%;
   }
   .user-details>p{
     margin:0px;
   }
   


   .cpp-pagination{
text-align: center;
   }

   .cpp-pagination>*{
   color: #767676;
   background: #eee;
   padding: 3px 8px;
   border-radius: 50% 50%;
   }

   .cpp-pagination>*:hover{
     color: #767676;
     background: #dddddd;

   }
   .woo-questions-answers-container{
     padding-bottom: 10px;
     background: transparent;

   }

   .cpp-current-page{
             color: #fff;
    background: #50575e;
   }


   /* toggle styles  */

   body {
     font-family: 'Segoe UI', Arial, sans-serif;
     background: #f5f8fa;
     margin: 0;
     padding: 32px;
   }
   .toggle-btn {
     padding: 12px 28px;
     background: #0077ff;
     color: #fff;
     border: none;
     border-radius: 6px;
     font-size: 1.1em;
     cursor: pointer;
     transition: background 0.2s;
     box-shadow: 0 2px 6px rgba(0,0,0,0.08);
   }
   .toggle-btn:hover {
     background: #005fcc;
   }
   /* Popup Styles */
   .popup-bg {
     display: none;
     position: fixed;
     z-index: 999;
     left: 0; top: 0; width: 100vw; height: 100vh;
     background: rgba(0,0,0,0.25);
   }
   .popup-box {
     position: absolute;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     background: #fff;
     border-radius: 10px;
     padding: 32px 32px 20px 32px;
     min-width: 420px;
     box-shadow: 0 10px 40px rgba(0,0,0,0.18);
     animation: fade-in 0.25s;
   }
   @keyframes fade-in {
     from { opacity: 0; transform: translate(-50%, -60%);}
     to   { opacity: 1; transform: translate(-50%, -50%);}
   }
   .popup-close {
     position: absolute;
     right: 16px;
     top: 12px;
     font-size: 1.4em;
     color: #aaa;
     background: none;
     border: none;
     cursor: pointer;
     transition: color 0.15s;
   }
   .popup-close:hover {
     color: #e13b3b;
   }
   /* Table Styles */
   .popup-table {
    width: 97%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 1.04em;
    margin-left: 3%;

   }
   .popup-table th, .popup-table td {
     padding: 10px 14px;
     text-align: left;
   }
   .popup-table th {
     /* background: #f0f4fa; */
     /* color: #0077ff; */
     border-bottom: 2px solid #e2e8f0;



     background: #8c8f94;


         /* background: #0c44a1; */
    color: #fff;
    border-bottom: 2px solid #e2e8f0;

   }
   .popup-table tr:nth-child(even) {
     background: #f8fafc;
   }
   .popup-table tr:hover {
     background: #e6f0ff;
   }
   /* toggle styles  */
   .full-content,
.custom-excerpt-full,
   .custom-excerpt-short{
    /* padding-left: 1%; */
    
    display: block;width: 90%;
   } 

   .read-more-btn{
    border: navajowhite;
    padding: 5px;
   }











    .manage-table-container {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); */
      overflow: hidden;
      background: #fff;
      /* max-width: 600px; */
      margin: 40px auto;
      font-family: 'Segoe UI', Arial, sans-serif;
      /* border: 1px solid #eee; */
    }
    .manage-table-row {
      display: flex;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      margin-bottom: 10px;
      background: #f9fafb;

    align-items: center;
    }
    .manage-table-row.header {
      background: #f9fafb;
      font-weight: 600;
      color: #333;
    }
    .manage-table-cell {
      /* flex: 1; */
      padding: 14px 18px;
      text-align: left;
      font-size: 16px;
      color: #444;
      box-sizing: border-box;
    }
    .manage-table-cell img{

      width: 70px;
    height: 70px;
    }
    .manage-table-row:last-child {
      border-bottom: none;
    }
    .manage-table-row:hover:not(.header) {
      background: #f5f7fa;
      transition: background 0.2s;
    }
    .manage-question-col{

      flex:2;
      /* background: green; */

    }
    .manage-product-col{
      flex:2;
      /* background: yellow; */
  

    }
    .manage-pagination>button{
      border:none;

    }
/* ////////////////////////ACTION G */
.action-group {
    /* font-family: Arial, sans-serif;

  display: flex;
  gap: 18px;
  padding: 40px; */
  justify-content: center;


  font-family: Arial, sans-serif;
    display: flex
;
    gap:8px;
    /* padding: 40px 0px; */


}

.action-btn {
  font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    /* padding: 5px; */
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    outline: none;
    /* gap: 8px; */
}

.action-btn.delete:hover, .action-btn.delete:focus {
  border-color: #e74c3c;
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.15);
}
.action-btn.edit:hover, .action-btn.edit:focus {
  border-color: #f39c12;
  box-shadow: 0 4px 16px rgba(243, 156, 18, 0.15);
}
.action-btn.view:hover, .action-btn.view:focus {
  border-color: #2980b9;
  box-shadow: 0 4px 16px rgba(41, 128, 185, 0.15);
}

.action-btn svg {
  display: block;
  margin-bottom: 4px;
}

.action-btn span {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}





  #labtop-search-form {
          margin-bottom: 15px;
          display: flex;
          flex-direction: row;
}
        .labtop-item {
          
          /* border:1px solid #ccc; padding:10px; margin-bottom:10px; */
     
          display: flex;
    align-items: anchor-center;

    border-bottom: 1px solid #ccc;
    /* padding: 10px; */
    margin-bottom: 10px;

     }
        .labtop-item img {
          
          float:right; margin-left:10px;

          width:100px;
          height:100px;

          
     
     }

.labtop-container{
     background: #ffffff;
     padding: 1%;
     border-radius: 15px;
}
#labtop-search,
input[name="laptop-search"],input[name="labtop-filter-product"]
{
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 5px;
    font-size: 15px;
    width: 100% !important;
    margin: 0px 1% 0px 0px;

}
#labtop-search-btn
{
     background: #eee;
    border: none;
    padding: 0px 2%;
    border-radius: 5px;
    font-size: 18px;
    color: #665d5d;
    font-weight: bold;

}
.load-question-ans{
  border:none;
}

/*  */
    .manage-table-container {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); */
      overflow: hidden;
      background: #fff;
      /* max-width: 600px; */
      margin: 40px auto;
      font-family: 'Segoe UI', Arial, sans-serif;
      /* border: 1px solid #eee; */
    }
    .manage-table-row {
      display: flex;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      margin-bottom: 10px;
      background: #f9fafb;

    align-items: center;
    }
    .manage-table-row.header {
      background: #f9fafb;
      font-weight: 600;
      color: #333;
    }
    .manage-table-cell {
      /* flex: 1; */
      padding: 14px 18px;
      text-align: left;
      font-size: 16px;
      color: #444;
      box-sizing: border-box;
    }
    .manage-table-cell img{

      width: 70px;
    height: 70px;
    }
    .manage-table-row:last-child {
      border-bottom: none;
    }
    .manage-table-row:hover:not(.header) {
      background: #f5f7fa;
      transition: background 0.2s;
    }
    .manage-question-col{

      flex:2;
      /* background: green; */

    }
    .manage-product-col{
      flex:2;
      /* background: yellow; */
  

    }
    .manage-pagination>button{
      border:none;

    }
/* ////////////////////////ACTION G */


/*  */
   /* mobil */

   .category-buttons .btn.active{
        background-color: rgb(0, 115, 170);
   }


    @media (max-width: 768px) {
          /* .question-border {
    margin-top: 12%;
} */

    }

    @media (max-width: 480px) {

   .qimg-view, .ans-btn {
   
    top: -19px;
    right: -85%;
   }
    .ask-icon{
      display: none;
    }


    .question-div>p {
    font-size: 14px;
    width: 75%;

    }

    .answer-vote {
    width: 100%;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    }
    .vote-btn{
      font-size: 14px;
    }


    .question-border {
      padding-top: 10%;
  }


  .ans-btn{
    padding: 0px;
  }

    }