/*==================================================
DISCUSSION
PART 1
THREAD LIST
==================================================*/

.fd-discussion{

    margin:30px 0;

}

.fd-discussion-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:26px 28px;

    margin-bottom:24px;

    border:1px solid #e8edf4;

    border-radius:18px;

    background:#fff;

    box-shadow:0 10px 30px rgba(18,38,63,.05);

}

.fd-discussion-title h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0 0 10px;

    font-size:40px;

    font-weight:700;

    color:#162033;

}

.fd-discussion-title h2 i{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    color:#fff;

    background:#45d04b;

    font-size:26px;

}

.fd-discussion-title p{

    margin:0;

    color:#8b95a7;

    font-size:17px;

    line-height:1.8;

}

#discussionList{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==================================================
THREAD CARD
==================================================*/

.fd-thread{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:24px 26px;

    border:1px solid #e8edf4;

    border-radius:18px;

    background:#fff;

    box-shadow:0 8px 25px rgba(18,38,63,.04);

    transition:.25s;

}

.fd-thread:hover{

    transform:translateY(-3px);

    border-color:#49cf55;

    box-shadow:0 16px 35px rgba(73,207,85,.10);

}

.fd-thread-left{

    flex:1;

    min-width:0;

}


/*==================================================
TITLE
==================================================*/

.fd-thread-title{

    margin-bottom:12px;

}

.fd-thread-title a{

    display:block;

    color:#18233a;

    font-size:24px;

    font-weight:700;

    line-height:1.4;

    text-decoration:none;

    transition:.2s;

}

.fd-thread:hover .fd-thread-title a{

    color:#35b84b;

}


/*==================================================
META
==================================================*/

.fd-thread-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

    color:#8c96a8;

    font-size:14px;

}

.fd-thread-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.fd-thread-meta i{

    color:#46cf56;

}


/*==================================================
STATUS
==================================================*/

.fd-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:30px;

    padding:0 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.fd-badge.open{

    color:#64748b;

    background:#eef2f7;

}

.fd-badge.solved{

    color:#fff;

    background:#45c64c;

}


/*==================================================
EMPTY
==================================================*/

.fd-discussion-empty{

    padding:80px 30px;

    text-align:center;

    border:1px dashed #d8dfe8;

    border-radius:18px;

    background:#fff;

}

.fd-discussion-empty i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#45cf50;

    color:#fff;

    font-size:30px;

}

.fd-discussion-empty h3{

    margin:0 0 10px;

    font-size:26px;

    color:#162033;

}

.fd-discussion-empty p{

    margin:0;

    color:#8d96a8;

    font-size:16px;

}


/*==================================================
LOADING
==================================================*/

.fd-discussion-loading{

    padding:70px;

    text-align:center;

    color:#8c96a8;

    font-size:16px;

}


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

@media(max-width:768px){

.fd-discussion-header{

    flex-direction:column;

    align-items:flex-start;

}

.fd-thread{

    padding:20px;

}

.fd-thread-title a{

    font-size:20px;

}

.fd-thread-meta{

    gap:12px;

}

}

/*==================================================
THREAD DETAIL
PART 2
==================================================*/

.fd-thread-view{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/*==================================================
BACK BUTTON
==================================================*/

.fd-thread-back{

    margin-bottom:5px;

}

.fd-thread-back button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    height:42px;

    padding:0 18px;

    border:1px solid #e6ebf2;

    border-radius:12px;

    background:#fff;

    color:#4b5565;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.fd-thread-back button:hover{

    color:#35b84b;

    border-color:#35b84b;

}


/*==================================================
POST
==================================================*/

.fd-post{

    display:flex;

    gap:28px;

    padding:28px;

    border:1px solid #e8edf4;

    border-radius:20px;

    background:#fff;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}


/*==================================================
FIRST POST
==================================================*/

.fd-post-first{

    border-left:5px solid #45cf50;

    box-shadow:

        0 18px 40px rgba(69,207,80,.08);

}


/*==================================================
LEFT
==================================================*/

.fd-post-side{

    width:220px;

    flex-shrink:0;

    text-align:center;

}


/*==================================================
AVATAR
==================================================*/

.fd-post-avatar{

    width:74px;

    height:74px;

    margin:0 auto 16px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#45cf50;

    color:#fff;

    font-size:28px;

    font-weight:700;

}

.fd-post-avatar-large{

    width:100px;

    height:100px;

    font-size:38px;

}


/*==================================================
USER
==================================================*/

.fd-post-user{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.fd-post-name{

    font-size:19px;

    font-weight:700;

    color:#18233a;

    word-break:break-word;

}


/*==================================================
GROUP
==================================================*/

.fd-group{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:34px;

    padding:0 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.fd-group i{

    font-size:13px;

}


/*==================================================
MAIN
==================================================*/

.fd-post-main{

    flex:1;

    min-width:0;

}


/*==================================================
HEADER
==================================================*/

.fd-post-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:22px;

}


/*==================================================
THREAD TITLE
==================================================*/

.fd-thread-title{

    margin:0 0 14px;

    font-size:34px;

    line-height:1.35;

    color:#162033;

}


/*==================================================
THREAD META
==================================================*/

.fd-thread-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    color:#7d889b;

    font-size:14px;

}

.fd-thread-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.fd-thread-meta i{

    color:#45cf50;

}


/*==================================================
POST NUMBER
==================================================*/

.fd-post-number{

    flex-shrink:0;

    padding:8px 14px;

    border-radius:999px;

    background:#eef7ef;

    color:#2f9b40;

    font-size:13px;

    font-weight:700;

}


/*==================================================
TIME
==================================================*/

.fd-post-time{

    color:#8d96a8;

    font-size:13px;

}


/*==================================================
MESSAGE
==================================================*/

.fd-post-message{

    color:#485468;

    font-size:16px;

    line-height:1.9;

    word-break:break-word;

}

.fd-post-message p:last-child{

    margin-bottom:0;

}


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

@media(max-width:900px){

.fd-post{

    flex-direction:column;

}

.fd-post-side{

    width:100%;

}

.fd-post-head{

    flex-direction:column;

}

.fd-thread-title{

    font-size:28px;

}

}

/*==================================================
REPLIES
PART 3
==================================================*/

.fd-post:not(.fd-post-first){

    padding:22px 24px;

    border-radius:18px;

    transition:.25s;

}

.fd-post:not(.fd-post-first):hover{

    border-color:#45cf50;

    box-shadow:0 14px 35px rgba(69,207,80,.08);

}


/*==================================================
REPLY AVATAR
==================================================*/

.fd-post:not(.fd-post-first) .fd-post-side{

    width:170px;

}

.fd-post:not(.fd-post-first) .fd-post-avatar{

    width:62px;

    height:62px;

    font-size:22px;

    margin-bottom:14px;

}

.fd-post:not(.fd-post-first) .fd-post-name{

    font-size:17px;

}


/*==================================================
REPLY HEADER
==================================================*/

.fd-post:not(.fd-post-first) .fd-post-head{

    margin-bottom:18px;

    padding-bottom:14px;

    border-bottom:1px solid #eef2f6;

}


/*==================================================
REPLY MESSAGE
==================================================*/

.fd-post:not(.fd-post-first) .fd-post-message{

    font-size:15px;

    color:#556274;

    line-height:1.85;

}

.fd-post-message img{

    max-width:100%;

    height:auto;

    border-radius:12px;

}

.fd-post-message pre{

    overflow:auto;

    padding:18px;

    margin:18px 0;

    border-radius:14px;

    background:#1e2430;

    color:#fff;

}

.fd-post-message code{

    font-family:Consolas,monospace;

}


/*==================================================
GROUP BADGES
==================================================*/

.fd-group{

    border:1px solid transparent;

}

.fd-group-admin{

    background:#ffefef;

    color:#d73737;

}

.fd-group-team{

    background:#eaf4ff;

    color:#2c7be5;

}

.fd-group-journalist{

    background:#eefcff;

    color:#00a3b8;

}

.fd-group-member{

    background:#f3f5f8;

    color:#64748b;

}

.fd-group-guest{

    background:#f5f5f5;

    color:#8b95a7;

}

.fd-group-premium{

    background:linear-gradient(180deg,#59df67,#33bb49);

    color:#fff;

    box-shadow:0 8px 20px rgba(69,207,80,.20);

}

.fd-group-premium-supporter{

    background:#f3ebff;

    color:#7a3cff;

}

.fd-group-elite{

    background:#fff3de;

    color:#d68a00;

}

.fd-group-master{

    background:#fff6cf;

    color:#b8860b;

}

.fd-group-legend{

    background:linear-gradient(180deg,#ffd96b,#efbb20);

    color:#5d4200;

}


/*==================================================
THREAD SEPARATOR
==================================================*/

.fd-post + .fd-post{

    margin-top:18px;

}


/*==================================================
QUOTE
==================================================*/

.fd-post-message blockquote{

    margin:20px 0;

    padding:16px 20px;

    border-left:4px solid #45cf50;

    border-radius:0 12px 12px 0;

    background:#f6fbf6;

    color:#4d5d70;

}


/*==================================================
TABLE
==================================================*/

.fd-post-message table{

    width:100%;

    border-collapse:collapse;

    margin:20px 0;

}

.fd-post-message td,

.fd-post-message th{

    padding:12px;

    border:1px solid #e7edf3;

}

.fd-post-message th{

    background:#f8fafc;

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.fd-post:not(.fd-post-first) .fd-post-side{

    width:100%;

}

.fd-post:not(.fd-post-first){

    padding:18px;

}

.fd-post:not(.fd-post-first) .fd-post-avatar{

    width:54px;

    height:54px;

    font-size:20px;

}

.fd-post-message{

    font-size:15px;

}

}

/*==================================================
REPLY BOX
PART 4
==================================================*/

.fd-reply-box{

    margin-top:28px;

    padding:28px;

    border:1px solid #e8edf4;

    border-radius:20px;

    background:#fff;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.fd-reply-box textarea{

    width:100%;

    min-height:180px;

    padding:18px 20px;

    border:1px solid #dfe6ee;

    border-radius:16px;

    background:#fafbfd;

    color:#233044;

    font-size:15px;

    line-height:1.8;

    resize:vertical;

    transition:.25s;

    outline:none;

}

.fd-reply-box textarea:focus{

    border-color:#45cf50;

    background:#fff;

    box-shadow:0 0 0 4px rgba(69,207,80,.10);

}

.fd-reply-box textarea::placeholder{

    color:#98a3b5;

}

.fd-reply-box button{

    margin-top:18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:48px;

    padding:0 24px;

    border:0;

    border-radius:14px;

    background:linear-gradient(180deg,#4fd75d,#35b84b);

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.fd-reply-box button:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(69,207,80,.25);

}

.fd-reply-box button:active{

    transform:translateY(0);

}

.fd-reply-box button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*==================================================
MODAL
==================================================*/

.fd-discussion-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(5px);

    z-index:9999;

}

.fd-discussion-box{

    width:100%;

    max-width:760px;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:0 30px 70px rgba(0,0,0,.20);

    animation:discussionModal .25s ease;

}

@keyframes discussionModal{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
MODAL HEADER
==================================================*/

.fd-discussion-box-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-bottom:1px solid #edf2f6;

}

.fd-discussion-box-header h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0;

    font-size:24px;

    color:#18233a;

}

.fd-discussion-box-header i{

    color:#45cf50;

}

.fd-discussion-box-header button{

    width:42px;

    height:42px;

    border:0;

    border-radius:12px;

    background:#f3f6fa;

    cursor:pointer;

    transition:.25s;

}

.fd-discussion-box-header button:hover{

    background:#45cf50;

    color:#fff;

}


/*==================================================
FORM
==================================================*/

#discussionForm{

    padding:28px;

}

.fd-form-group{

    margin-bottom:22px;

}

.fd-form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:700;

    color:#1d2a3d;

}

.fd-form-group input,

.fd-form-group textarea{

    width:100%;

    border:1px solid #dfe6ee;

    border-radius:14px;

    background:#fafbfd;

    color:#1d2a3d;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.fd-form-group input{

    height:50px;

    padding:0 18px;

}

.fd-form-group textarea{

    min-height:180px;

    padding:18px;

    resize:vertical;

}

.fd-form-group input:focus,

.fd-form-group textarea:focus{

    border-color:#45cf50;

    background:#fff;

    box-shadow:0 0 0 4px rgba(69,207,80,.10);

}


/*==================================================
FORM ACTIONS
==================================================*/

.fd-discussion-actions{

    display:flex;

    justify-content:flex-end;

    gap:14px;

    margin-top:10px;

}

.fd-discussion-actions button{

    height:46px;

    padding:0 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

}

.fd-discussion-actions button[type="button"]{

    border:1px solid #dfe6ee;

    background:#fff;

    color:#556274;

}

.fd-discussion-actions button[type="submit"]{

    border:0;

    background:linear-gradient(180deg,#4fd75d,#35b84b);

    color:#fff;

}


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

@media(max-width:768px){

.fd-discussion-box{

    max-width:100%;

}

.fd-discussion-box-header,

#discussionForm{

    padding:20px;

}

.fd-discussion-actions{

    flex-direction:column;

}

.fd-discussion-actions button{

    width:100%;

}

.fd-reply-box{

    padding:20px;

}

.fd-reply-box button{

    width:100%;

}

}


/*==================================================
UTILITIES
PART 5
==================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

.fd-discussion a{

    text-decoration:none;

}

.fd-discussion img{

    max-width:100%;

    display:block;

}

.fd-discussion button{

    font-family:inherit;

}

.fd-discussion input,

.fd-discussion textarea,

.fd-discussion button{

    outline:none;

}


/*==================================================
SCROLLBAR
==================================================*/

.fd-post-message::-webkit-scrollbar,
.fd-form-group textarea::-webkit-scrollbar{

    width:8px;

}

.fd-post-message::-webkit-scrollbar-thumb,
.fd-form-group textarea::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:#cfd7e2;

}

.fd-post-message::-webkit-scrollbar-thumb:hover,
.fd-form-group textarea::-webkit-scrollbar-thumb:hover{

    background:#45cf50;

}


/*==================================================
SELECTION
==================================================*/

.fd-discussion ::selection{

    color:#fff;

    background:#45cf50;

}


/*==================================================
TRANSITIONS
==================================================*/

.fd-thread,
.fd-post,
.fd-post-avatar,
.fd-group,
.fd-badge,
.fd-thread-back button,
.fd-discussion-actions button,
.fd-reply-box button{

    transition:all .25s ease;

}


/*==================================================
ANIMATION
==================================================*/

.fd-thread,
.fd-post,
.fd-discussion-box{

    animation:fdFadeUp .25s ease;

}

@keyframes fdFadeUp{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
FOCUS
==================================================*/

.fd-thread-back button:focus-visible,
.fd-discussion-actions button:focus-visible,
.fd-reply-box button:focus-visible{

    box-shadow:0 0 0 4px rgba(69,207,80,.15);

}


/*==================================================
EMPTY SPACING
==================================================*/

.fd-thread:last-child,
.fd-post:last-child{

    margin-bottom:0;

}


/*==================================================
PRINT
==================================================*/

@media print{

.fd-discussion-header button,
.fd-thread-back,
.fd-reply-box,
.fd-discussion-modal{

    display:none !important;

}

.fd-thread,
.fd-post{

    box-shadow:none;

    border:1px solid #ccc;

}

}


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

@media(max-width:992px){

.fd-thread{

    padding:20px;

}

.fd-post{

    gap:20px;

}

.fd-post-side{

    width:180px;

}

}

@media(max-width:768px){

.fd-thread{

    display:block;

}

.fd-thread-left{

    width:100%;

}

.fd-thread-meta{

    margin-top:14px;

}

.fd-post{

    flex-direction:column;

}

.fd-post-side{

    width:100% !important;

    display:flex;

    align-items:center;

    gap:16px;

    text-align:left;

}

.fd-post-avatar,

.fd-post-avatar-large{

    margin:0;

    flex-shrink:0;

}

.fd-post-user{

    align-items:flex-start;

}

.fd-post-head{

    margin-top:10px;

}

}

@media(max-width:576px){

.fd-discussion-header{

    padding:18px;

}

.fd-discussion-title h2{

    font-size:28px;

}

.fd-thread-title a{

    font-size:19px;

}

.fd-thread-title{

    font-size:26px;

}

.fd-thread-meta{

    gap:10px;

    font-size:13px;

}

.fd-post{

    padding:18px;

}

.fd-post-message{

    font-size:15px;

}

.fd-discussion-box-header h3{

    font-size:20px;

}

}