/*==========================================================
  Sada Albalad CMS
  Comments
==========================================================*/

/*==========================================================
  Comments Section
==========================================================*/

.comments-section{

    width:100%;

    max-width:800px;

    margin:45px auto 0;

    padding:30px 0;

    border-top:2px solid var(--border);

}


/*==========================================================
  Comments Header
==========================================================*/

.comments-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    padding-bottom:15px;

    border-bottom:1px solid var(--border);

}

.comments-header h2{

    margin:0;

    font-family:'Cairo',sans-serif;

    font-size:25px;

    font-weight:800;

    color:var(--text);

}

.comments-count{

    min-width:32px;

    height:32px;

    padding:0 9px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-family:'Cairo',sans-serif;

    font-size:14px;

    font-weight:700;

}


/*==========================================================
  Comments List
==========================================================*/

.comments-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:30px;

}


/*==========================================================
  Comment Item
==========================================================*/

.comment-item{

    padding:20px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:0 2px 8px rgba(0,0,0,.04);

}


/*==========================================================
  Comment Meta
==========================================================*/

.comment-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:12px;

}

.comment-author{

    font-family:'Cairo',sans-serif;

    font-size:16px;

    font-weight:800;

    color:var(--text);

}

.comment-meta time{

    direction:ltr;

    white-space:nowrap;

    font-family:'Tajawal',sans-serif;

    font-size:13px;

    color:#888;

}


/*==========================================================
  Comment Body
==========================================================*/

.comment-body{

    font-family:'Tajawal',sans-serif;

    font-size:16px;

    line-height:1.9;

    color:#333;

    word-break:break-word;

}


/*==========================================================
  Empty Comments
==========================================================*/

.comments-empty{

    margin-bottom:30px;

    padding:25px;

    text-align:center;

    background:#fafafa;

    border:1px dashed #d8d8d8;

    border-radius:10px;

}

.comments-empty p{

    margin:0;

    font-family:'Tajawal',sans-serif;

    font-size:15px;

    color:#888;

}


/*==========================================================
  Comment Form
==========================================================*/

.comment-form{

    margin-top:25px;

    padding:25px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:12px;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

}


/*==========================================================
  Form Field
==========================================================*/

.comment-field{

    margin-bottom:18px;

}

.comment-field label{

    display:block;

    margin-bottom:7px;

    font-family:'Cairo',sans-serif;

    font-size:15px;

    font-weight:700;

    color:var(--text);

}

.comment-field label span{

    color:#c40000;

}

.comment-field label small{

    margin-right:5px;

    font-family:'Tajawal',sans-serif;

    font-size:12px;

    font-weight:400;

    color:#888;

}


/*==========================================================
  Inputs
==========================================================*/

.comment-field input,
.comment-field textarea{

    width:100%;

    box-sizing:border-box;

    border:1px solid #d9d9d9;

    border-radius:8px;

    background:#fff;

    color:var(--text);

    font-family:'Tajawal',sans-serif;

    font-size:16px;

    outline:none;

    transition:.25s ease;

}

.comment-field input{

    height:46px;

    padding:0 14px;

}

.comment-field textarea{

    min-height:130px;

    padding:12px 14px;

    resize:vertical;

    line-height:1.8;

}


/*==========================================================
  Focus
==========================================================*/

.comment-field input:focus,
.comment-field textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(198,40,40,.08);

}


/*==========================================================
  Submit
==========================================================*/

.comment-actions{

    display:flex;

    justify-content:flex-start;

    margin-top:5px;

}

.comment-submit{

    min-width:150px;

    height:46px;

    padding:0 24px;

    border:none;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    font-family:'Cairo',sans-serif;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

}

.comment-submit:hover{

    background:#a90000;

    transform:translateY(-1px);

}


/*==========================================================
  Notice
==========================================================*/

.comment-notice{

    margin:15px 0 0;

    font-family:'Tajawal',sans-serif;

    font-size:13px;

    line-height:1.7;

    color:#888;

}


/*==========================================================
  Honeypot
==========================================================*/

.comment-honeypot{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    opacity:0;

    pointer-events:none;

}


/*==========================================================
  Mobile
==========================================================*/

@media (max-width:768px){

    .comments-section{

        margin-top:30px;

        padding:25px 0;

    }

    .comments-header h2{

        font-size:21px;

    }

    .comments-count{

        min-width:29px;

        height:29px;

        font-size:13px;

    }

    .comment-item{

        padding:16px;

        border-radius:8px;

    }

    .comment-meta{

        align-items:flex-start;

        flex-direction:column;

        gap:4px;

    }

    .comment-author{

        font-size:15px;

    }

    .comment-meta time{

        font-size:12px;

    }

    .comment-body{

        font-size:15px;

        line-height:1.85;

    }

    .comment-form{

        padding:18px;

        border-radius:9px;

    }

    .comment-field input{

        height:44px;

    }

    .comment-field textarea{

        min-height:120px;

    }

    .comment-submit{

        width:100%;

        height:46px;

    }

}


/*==========================================================
  Very Small Screens
==========================================================*/

@media (max-width:480px){

    .comments-section{

        padding-left:10px;

        padding-right:10px;

    }

    .comments-header{

        gap:9px;

    }

    .comments-header h2{

        font-size:19px;

    }

    .comment-form{

        padding:15px;

    }

}