/* Fonte */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ====== LISTA / CARDS ====== */
.qn-responses-list{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content: flex-start;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.qn-response-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  width: 49.4%;
}

/* Se estiver filtrado (via classe do PHP), ocupar 100% */
.qn-responses-list.qn-filtered .qn-response-card{
  width:100% !important;
}

/* Header do card */
.qn-response-header{
  border:1px solid #ddd;
  border-radius:6px;
  padding:20px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
}
.qn-num{ font-size:1.5em; font-weight:700; }
.qn-date{ color:#666; margin-left:12px; }
.qn-title{ width:100%; font-weight:500; }

/* Botão de abrir/fechar */
.btnToggleBox{
  margin-left:auto;
  text-align:end;
  cursor:pointer;
}
.btnToggleBox .ri-arrow-drop-down-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  background:#000;
  color:#fff;
  border-radius:50%;
  transition:transform .2s ease, filter .2s ease;
}
.btnToggleBox:hover .ri-arrow-drop-down-line{
  filter:brightness(1.15);
}
.qn-response-card.open .btnToggleBox .ri-arrow-drop-down-line{
  transform:rotate(180deg);
}

.qn-response-body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 20px;            
  border:1px solid #ddd;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  background:#fff;
  transition:
    height .65s cubic-bezier(.2,.8,.2,1),
    opacity .50s ease,
    padding .50s ease;
  will-change:height, opacity, padding;
}

.qn-response-body.active{
  height: auto;
  max-height: 100%;
  opacity:1;
  padding:20px;
}

.btnToggleBox i{
  transition: transform .25s ease;
}
.btnToggleBox i.active{
  transform: rotate(180deg);
}
.deleteBtn{
    border: none;
    padding: 5px;
    color: red;
}

/* Pares pergunta/resposta */
.qn-pair{ margin:12px 0; }
.qn-question{ font-weight:600; margin-bottom:4px; }
.qn-answer{ color:#333; }
.qn-raw{ color:#333; }

/* ====== FILTRO (front) ====== */
.qn-front-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:center;
  margin:0 0 16px 0;

  padding:12px 14px;
  background:#f6f8fa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.qn-front-filters > label{ display:block; min-width:220px; }
.qn-front-filters > label > span{
  display:block; font-size:12px; color:#555; margin:0 0 6px; letter-spacing:.02em;
}
.qn-front-filters input[type="date"],
.qn-front-filters input[type="month"],
.qn-front-filters input[type="number"]{
  display:block; width:100%; min-width:220px; height:40px;
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px;
  background:#fff; color:#111; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.qn-front-filters input[type="date"]:focus,
.qn-front-filters input[type="month"]:focus{
  border-color:#2271b1;
  box-shadow:0 0 0 3px rgba(34,113,177,.15);
  background:#fff;
}
.qn-front-filters .button{
  border-radius:8px; padding:8px 14px; line-height:1.2; font-weight:600;
  cursor:pointer; text-decoration:none;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .04s ease;
}
.qn-front-filters .button.button-secondary{
  background:#2271b1; color:#fff; border:1px solid #2271b1;
}
.qn-front-filters .button.button-secondary:hover{
  filter:brightness(1.05); box-shadow:0 1px 6px rgba(34,113,177,.25);
}
.qn-front-filters a.button{
  background:transparent; color:#2271b1; border:1px solid #2271b1; text-align: center;
}
.qn-front-filters a.button:hover{
  background:rgba(34,113,177,.06);
}

/* ====== PAGINAÇÃO (sem inline) ====== */
.qn-pagination{
  margin-top:16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.qn-pagination a{
  padding:6px 10px;
  border-radius:4px;
  text-decoration:none;
  border:1px solid #2271b1;
  color:#2271b1;
  background:#fff;
  transition:filter .15s ease, box-shadow .15s ease;
}
.qn-pagination a:hover{
  filter:brightness(1.05);
  box-shadow:0 1px 4px rgba(34,113,177,.25);
}
/* use classe 'is-current' no link atual no PHP */
.qn-pagination a.is-current{
  background:#2271b1;
  color:#fff;
}

/* ====== ADMIN / PAINEL ====== */
.wrap-plugin{
  width:100%;
  max-width:1280px;
  font-family:"Outfit", sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
}
.wrap-plugin h1{
  display:flex; align-items:center; gap:15px; margin-bottom:15px;
}
.wrap-plugin h1 img{
  width:100%; max-width:130px; padding:10px; background:#1F2937; border-radius:10px;
}
.wrap-plugin .wrap-content{
  display:flex; align-items:flex-start; gap:20px;
}
.wrap-plugin .wrap-content .wrap-container{
  position:relative;
  flex:1; padding:20px; background:#fff; border-radius:20px;
}

/* Botões utilitários */
.btnShop a,
.exportCsv{
  display:inline-block;
  padding:10px 30px;
  background:#1F2937;
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  outline:none;
}
.btnShop a{
  position:absolute; top:10px; right:10px;
}
.qn-front-counters{
    text-align: right;
}

/* ====== RESPONSIVO ====== */
@media (max-width:1024px){
  .qn-responses-list:not(.qn-filtered) .qn-response-card{ width:calc(100% / 2); }
}
@media (max-width:640px){
  .qn-response-card{ width:100%; flex: 1 1 100%; }
  .qn-front-filters{ gap:10px; padding:10px; }
  .qn-front-filters > label{ min-width:0; width:100%; }
  .qn-front-filters input[type="date"],
  .qn-front-filters input[type="month"]{ min-width:0; width:100%; }
  .qn-front-filters .button{ width:100%; }
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .qn-response-body{ transition:none; }
  .btnToggleBox .ri-arrow-drop-down-line{ transition:none; }
}