/* ===============================
   HERO
=============================== */

.requests-hero {
  text-align:center;
  margin:30px 0 25px;
}

.requests-hero h1 {
  color:var(--pink-dark);
  font-size:clamp(22px,4vw,36px);
  margin-bottom:8px;
  letter-spacing:2px;
  text-shadow:
  2px 2px 0 var(--pink-soft);
}

/* ===============================
   LAYOUT DE LA PAGINA
=============================== */

.requests-layout {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:50px;
}

.cbox-wrapper {
  width:100%;
  max-width:480px;
  background:var(--white);
  border:
  3px solid var(--pink-dark);
  border-radius:20px;
  padding:10px;
  box-shadow:
  5px 5px 0 rgba(109,47,68,.12);
}

/* =========================================
   NANNI COMMENTS BOX
========================================= */

.nanni-comments {
  text-align:center;
  padding:12px;
}

.nanni-comments h3 {
  color:var(--pink-dark);
  font-size:16px;
  margin-bottom:5px;
  text-shadow:
  1px 1px 0 var(--pink-soft);
}

.comment-intro {
  font-family:'Poppins',sans-serif;
  font-size:12px;
  color:var(--text);
  margin-bottom:15px;
}

.nanni-comments input,
.nanni-comments textarea {
  width:100%;
  box-sizing:border-box;
  border:
  2px solid var(--pink-soft);
  background:#fff8fc;
  border-radius:15px;
  padding:10px;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  margin-bottom:10px;
  outline:none;
  transition:.3s ease;
}

.nanni-comments textarea {
  height:100px;
  resize:none;
}

.nanni-comments input:focus,
.nanni-comments textarea:focus {
  border-color:var(--pink-dark);
  transform:
  translateY(-2px);
  box-shadow:
  0 5px 0 rgba(229,92,138,.15);
}

/* BOTON */
.nanni-comments button {
  width:100%;
  background:var(--pink-dark);
  color:white;
  border:none;
  border-radius:20px;
  padding:10px;
  cursor:pointer;
  font-family:'Silkscreen',cursive;
  box-shadow:
  4px 4px 0 var(--text);
  transition:.25s var(--ease-kawaii);
}

.nanni-comments button:hover {
  background:var(--pink-soft);
  color:var(--pink-dark);
  transform:
  translateY(-3px)
  scale(1.03);
}

.nanni-comments button:active {
  transform:
  translate(3px,3px);
  box-shadow:none;
}

/* =========================================
   LISTA DE COMENTARIOS
========================================= */

#comments-list {
  margin-top:18px;
  max-height:420px;
  overflow-y:auto;
  padding-right:5px;
  text-align:left;
}

#comments-list::-webkit-scrollbar {
  width:7px;
}

#comments-list::-webkit-scrollbar-track {
  background:#fff0f5;
  border-radius:10px;
}

#comments-list::-webkit-scrollbar-thumb {
  background:var(--pink-soft);
  border-radius:10px;
}

/* =========================================
   TARJETA COMENTARIO
========================================= */

.comment-card {
  background:#fff8fc;
  border:
  2px solid var(--pink-soft);
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
  text-align:left;
  box-shadow:
  3px 3px 0 rgba(109,47,68,.1);
  animation:
  commentAppear .45s var(--ease-kawaii);
  transition:.25s ease;
}

.comment-card:hover {
  transform:
  translateX(3px);
  box-shadow:
  5px 5px 0 rgba(109,47,68,.15);
}

/* NOMBRE */
.comment-name {
  font-family:'Silkscreen',cursive;
  color:var(--pink-dark);
  font-size:12px;
  margin-bottom:4px;
}

.comment-date {
  font-family:'Poppins',sans-serif;
  font-size:10px;
  color:#b98799;
  margin-bottom:8px;
}

.comment-card p {
  font-family:'Poppins',sans-serif;
  color:var(--text);
  font-size:12px;
  line-height:1.5;
  margin:0;
  word-wrap:break-word;
}

/* =========================================
   ANIMACION ENTRADA
========================================= */

@keyframes commentAppear {
  0% {
    opacity:0;
    transform:
    translateY(20px)
    scale(.85);
  }
  70% {
    transform:
    translateY(-4px)
    scale(1.03);
  }
  100% {
    opacity:1;
    transform:
    translateY(0)
    scale(1);
  }
}

.empty-comments {
  font-family:'Poppins',sans-serif;
  font-size:12px;
  color:var(--text);
  text-align:center;
  padding:15px;
  animation:commentAppear .5s ease;
}

/* =========================================
   BOTON VOLVER
========================================= */

.btn-back {
  display:inline-block;
  margin-top:20px;
  color:var(--pink-dark);
  font-family:'Silkscreen',cursive;
  font-size:11px;
  text-decoration:none;
  border-bottom:2px dashed var(--pink-soft);
  padding-bottom:2px;
}

.btn-back:hover {
  color:var(--pink-soft);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:600px){

  .requests-hero h1 {
    font-size:24px;
  }

  .cbox-wrapper {
    padding:8px;
  }

}