/* ===========================
   Comments (List + Form)
   Font: Loubag ONLY
   =========================== */

.comments_wrapper,
.comments-list-section{
font-family:"Loubag", serif;
}

/* ---- shared spacing / section ---- */
.comments_wrapper{
width:100%;
margin:0 auto;
}

.comments-list-section{
width:100%;
margin:0 auto;
}

/* ---- title row ---- */
.comments-title{
display:flex;
align-items:baseline;
gap:.5rem;
margin: .5rem auto;
letter-spacing:.2px;
font-size:1.35rem;
line-height:1.1;
font-family: "loubag";
}

.comments-count{
font-size:.95rem;
opacity:.75;
}

/* ---- empty state ---- */
.no-comments{
margin:.25rem 0 0;
opacity:.85;
font-size:1rem;
line-height:1.35;
}

.comments-list{
  display:grid;
  grid-template-columns: 1fr;   /* ⬅ KEY: makes the column full width */
  gap:.9rem;
  width:100%;
  justify-items: stretch;  
}

.comment-item{
  width:100%;
  max-width:100%;
  background: #121524;
  padding: 2em;
  border-radius: 25px;
}



/* avatar column */
.comment-avatar-wrapper{
display:flex;
align-items: center;
justify-content:center;
}

/* avatar image + fallback */
.comment-avatar{
width: 50px;
height: 50px;
border-radius:50%;
object-fit:cover;
display:block;
border:1px solid rgba(255,255,255,0.14);
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.fallback-avatar{
display:grid;
place-items:center;
font-size:1.05rem;
text-transform:uppercase;
background:rgba(255,255,255,0.06);
}

/* right side */
.comment-body-wrapper{
display:grid;
gap:.55rem;
min-width:0;
}

/* header = username only (date goes below) */
.comment-header{
display:flex;
align-items:center;
gap:.6rem;
min-width:0;
}

.comment-author{
font-size:1.05rem;
line-height:1.1;
letter-spacing:.2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin: .5rem;
padding: .5rem;
}

/* main row: comment text sits in same "row area" as avatar+name */
.comment-text{
font-size:1rem;
line-height:1.45;
opacity:.95;
word-wrap:break-word;
overflow-wrap:anywhere;
background: var(--color-deep);
border-radius:12px;
padding: 1em !important;
width: 100%;
}

/* date/time underneath */
.comment-date{
display:inline-block;
font-size:.9rem;
opacity:.7;
letter-spacing:.2px;
}

/* place date under the comment text area visually */
.comment-date{
margin-top:-.15rem;
}

/* ---- Form ---- */
.comment-form{
display:grid;
gap:.9rem;
padding:1rem;
border-radius:16px;
border:1px solid rgba(255,255,255,0.12);
background: #121524;
box-shadow:0 14px 40px rgba(0,0,0,.22);
margin-top:.75rem;
}

.form-row{
display:grid;
gap:.35rem;
}

.form-row label{
font-size:.95rem;
opacity:.85;
letter-spacing:.2px;
}

.comment-form input,
.comment-form textarea{
font-family:"Loubag", serif;
font-size:1rem;
line-height:1.25;
padding:.75rem .85rem;
border-radius:12px;
border:1px solid rgba(255,255,255,0.14);
background:rgba(0,0,0,0.12);
color:inherit;
outline:none;
transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.comment-form textarea{
resize:vertical;
min-height:110px;
}

.comment-form input:focus,
.comment-form textarea:focus{
border-color:rgba(255,255,255,0.28);
box-shadow:0 0 0 4px rgba(255,255,255,0.08);
background:rgba(0,0,0,0.18);
}

.comment-submit-btn{
font-family:"Loubag", serif;
font-size:1rem;
letter-spacing:.25px;
padding:.85rem 1rem;
border-radius:999px;
border:1px solid rgba(255,255,255,0.18);
background:rgba(255,255,255,0.08);
color:inherit;
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
width: 50%;
margin: 0em auto;
}

.comment-submit-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 34px rgba(0,0,0,.28);
background:rgba(255,255,255,0.12);
}

.comment-submit-btn:active{
transform:translateY(0px);
box-shadow:0 10px 24px rgba(0,0,0,.22);
}

/* ---- Responsive polish ---- */
@media (min-width: 1200px){
.comments_wrapper,
.comments-list-section{
max-width:900px;
}

.comments-title {
    font-size: 2rem;
}

.comment-item{
padding:1.1rem 1.15rem;
}

.comment-avatar{
width: 60px;
height: 60px;
}

.comment-text{
font-size:1.1rem;
padding:.85rem .95rem;
}

.comment-form {
    padding: 2rem;
}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
.comment-form input,
.comment-form textarea,
.comment-submit-btn{
transition:none;
}
}