/*==================================================
        WEEALL ACCOUNT SUPPORT
        CLEAN FINAL SUPPORT CSS
==================================================*/


/*==================================================
        SUPPORT MAIN SECTION
==================================================*/

.support-section{

    width:100%;

}


/*==================================================
        SUPPORT SECTION HEADER
==================================================*/

.support-section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

    padding-bottom:25px;

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

}


.support-section-header h2{

    margin:0 0 8px;

    color:var(--primary);

    font-size:30px;

}


.support-section-header p{

    margin:0;

    color:var(--text);

    font-size:14px;

    line-height:1.6;

}


/*==================================================
        NEW TICKET BUTTON
==================================================*/

.support-section-header .primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 22px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

    transition:all .3s ease;

}


.support-section-header .primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(215,25,32,.18);

}


/*==================================================
        SUPPORT TICKETS LIST
==================================================*/

.support-tickets-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/*==================================================
        SUPPORT TICKET CARD
==================================================*/

.support-ticket-card{

    width:100%;

    box-sizing:border-box;

    padding:24px;

    background:var(--white);

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

    border-radius:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:all .3s ease;

}


.support-ticket-card:hover{

    transform:translateY(-3px);

    border-color:#e5e5e5;

    box-shadow:0 14px 32px rgba(0,0,0,.08);

}


/*==================================================
        TICKET CARD HEADER
==================================================*/

.support-ticket-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding-bottom:20px;

    border-bottom:1px solid #eeeeee;

}


.support-ticket-number{

    display:inline-block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

}


.support-ticket-card-header h3{

    margin:0;

    color:var(--black);

    font-size:19px;

    font-weight:700;

    line-height:1.4;

}


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

.support-ticket-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    text-transform:capitalize;

    white-space:nowrap;

}


.support-ticket-status.open{

    background:#e8f1ff;

    color:#2563eb;

}


.support-ticket-status.in-progress{

    background:#fff4e5;

    color:#d97706;

}


.support-ticket-status.waiting-for-customer{

    background:#f3e8ff;

    color:#9333ea;

}


.support-ticket-status.resolved{

    background:#e8f8ef;

    color:#16804a;

}


.support-ticket-status.closed{

    background:#f1f1f1;

    color:#666;

}


/*==================================================
        TICKET CARD INFORMATION
==================================================*/

.support-ticket-card-info{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:22px 0;

}


.support-ticket-card-info > div{

    display:flex;

    flex-direction:column;

    gap:7px;

    min-width:0;

}


.support-ticket-card-info span{

    color:#888;

    font-size:12px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.support-ticket-card-info strong{

    overflow:hidden;

    color:var(--black);

    font-size:14px;

    font-weight:600;

    text-overflow:ellipsis;

}


.support-ticket-card-info > div:nth-child(2) strong{

    color:var(--primary);

}


/*==================================================
        TICKET CARD FOOTER
==================================================*/

.support-ticket-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding-top:18px;

    border-top:1px solid #eeeeee;

}


.support-ticket-card-footer > span{

    color:#777;

    font-size:13px;

    font-weight:500;

}


/*==================================================
        VIEW TICKET BUTTON
==================================================*/

.support-view-ticket-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:10px 18px;

    background:#fff2f2;

    color:var(--primary);

    border:1px solid rgba(215,25,32,.15);

    border-radius:9px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;

}


.support-view-ticket-btn i{

    font-size:12px;

    transition:transform .3s ease;

}


.support-view-ticket-btn:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


.support-view-ticket-btn:hover i{

    transform:translateX(3px);

}


/*==================================================
        EMPTY SUPPORT STATE
==================================================*/

.support-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:60px 30px;

    background:#fafafa;

    border:1px dashed #dcdcdc;

    border-radius:18px;

}


.support-empty > i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    margin-bottom:18px;

    background:#fff2f2;

    color:var(--primary);

    border-radius:50%;

    font-size:28px;

}


.support-empty h3{

    margin:0 0 8px;

    color:var(--black);

    font-size:20px;

}


.support-empty p{

    margin:0 0 22px;

    color:#777;

    font-size:14px;

    line-height:1.6;

}


.support-empty .primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:11px 20px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:10px;

    font-weight:600;

    cursor:pointer;

}


/*==================================================
        SUPPORT TICKET DETAIL
==================================================*/

.support-ticket-detail{

    width:100%;

}


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

.support-ticket-detail-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:25px;

    padding-bottom:25px;

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

}


.support-ticket-detail-title{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.support-ticket-back{

    display:inline-flex;

    align-items:center;

    gap:7px;

    width:max-content;

    margin-bottom:8px;

    padding:0;

    background:none;

    color:var(--primary);

    border:none;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

}


.support-ticket-back i{

    transition:transform .3s ease;

}


.support-ticket-back:hover i{

    transform:translateX(-4px);

}


.support-ticket-detail-title h2{

    margin:0;

    color:var(--black);

    font-size:26px;

    line-height:1.4;

}


.support-ticket-detail-number{

    color:#777;

    font-size:13px;

}


/*==================================================
        DETAIL BADGES
==================================================*/

.support-ticket-detail-badges{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


.support-ticket-detail-badges span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}


/*==================================================
        DETAIL INFORMATION
==================================================*/

.support-ticket-detail-info{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-bottom:28px;

}


.support-ticket-detail-info-item{

    padding:17px;

    background:#fafafa;

    border:1px solid #eeeeee;

    border-radius:12px;

}


.support-ticket-detail-info-item span{

    display:block;

    margin-bottom:7px;

    color:#888;

    font-size:11px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.support-ticket-detail-info-item strong{

    color:var(--black);

    font-size:14px;

}


/*==================================================
        CONVERSATION WRAPPER
==================================================*/

.support-conversation-wrapper{

    width:100%;

    margin:0;

}


/*==================================================
        CONVERSATION HEADING
==================================================*/

.support-conversation-title{

    margin:0 0 12px;

    color:var(--black);

    font-size:20px;

    font-weight:700;

    line-height:1.3;

}


/*==================================================
        CONVERSATION AREA
==================================================*/

.support-conversation{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

    width:100%;

    min-height:320px;

    max-height:600px;

    box-sizing:border-box;

    padding:18px;

    overflow-x:hidden;

    overflow-y:auto;

    background:#f0f2f5;

    border:1px solid #e1e5e9;

    border-radius:14px;

    scroll-behavior:smooth;

}


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

.support-message{

    display:block;

    flex:0 0 auto;

    width:fit-content !important;

    max-width:70% !important;

    min-width:0;

    min-height:0;

    height:auto;

    box-sizing:border-box;

    margin:0;

    padding:8px 12px 9px;

    border-radius:16px;

    box-shadow:0 1px 2px rgba(0,0,0,.08);

    overflow:visible;

}


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

.support-message.customer{

    align-self:flex-start !important;

    width:fit-content !important;

    max-width:70% !important;

    background:#fff;

    color:#202124;

    border:1px solid #e4e6e8;

    border-top-left-radius:5px;

}


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

.support-message.admin{

    align-self:flex-end !important;

    width:fit-content !important;

    max-width:70% !important;

    background:#d9fdd3;

    color:#202124;

    border:1px solid #c5ebc0;

    border-top-right-radius:5px;

}


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

.support-message-header{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex-direction:row;

    gap:5px;

    width:max-content;

    max-width:100%;

    margin:0 0 4px;

    padding:0;

    line-height:1;

}


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

.support-message-author{

    display:flex;

    align-items:center;

    gap:4px;

    width:max-content;

    margin:0;

    padding:0;

}


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

.support-message-avatar{

    display:none;

}


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

.support-message-author strong,
.support-message-header strong{

    display:inline;

    width:auto;

    margin:0;

    padding:0;

    color:#111827;

    font-size:10px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

}


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

.support-message-time,
.support-message-header span{

    display:inline;

    width:auto;

    margin:0;

    padding:0;

    color:#8b9197;

    font-size:8px;

    font-weight:400;

    line-height:1;

    white-space:nowrap;

}


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

.support-message-body{

    display:block;

    width:auto !important;

    max-width:100%;

    min-width:0;

    min-height:0;

    height:auto;

    margin:0 !important;

    padding:0 !important;

    box-sizing:border-box;

    color:#202124;

    font-size:13px;

    font-weight:400;

    line-height:1.45;

    text-align:left;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:normal;

}


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

.support-conversation::-webkit-scrollbar{

    width:6px;

}


.support-conversation::-webkit-scrollbar-track{

    background:transparent;

}


.support-conversation::-webkit-scrollbar-thumb{

    background:#c8ccd0;

    border-radius:10px;

}


/*==================================================
        REPLY SECTION
==================================================*/

.support-reply-section{

    margin-top:28px;

    padding-top:24px;

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

}


.support-reply-section h3{

    margin:0 0 15px;

    color:var(--black);

    font-size:19px;

}


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

.support-reply-form{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.support-reply-form textarea{

    width:100%;

    min-height:140px;

    padding:15px;

    box-sizing:border-box;

    resize:vertical;

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

    border-radius:12px;

    outline:none;

    background:#fff;

    color:var(--black);

    font-family:inherit;

    font-size:14px;

    line-height:1.6;

    transition:.3s;

}


.support-reply-form textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(215,25,32,.1);

}


.support-reply-form button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:max-content;

    padding:12px 24px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.support-reply-form button:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


.support-reply-message{

    margin:0;

    font-size:13px;

    font-weight:600;

}


/*==================================================
        TABLET
==================================================*/

@media(max-width:1024px){

    .support-ticket-card-info{

        grid-template-columns:repeat(2,1fr);

    }


    .support-ticket-detail-info{

        grid-template-columns:repeat(2,1fr);

    }

}


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

@media(max-width:768px){

    .support-section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        margin-bottom:22px;

        padding-bottom:20px;

    }


    .support-section-header h2{

        font-size:25px;

    }


    .support-section-header p{

        font-size:13px;

    }


    .support-section-header .primary-btn{

        width:100%;

    }


    .support-ticket-card{

        padding:18px;

        border-radius:15px;

    }


    .support-ticket-card-header{

        flex-direction:column;

        gap:15px;

    }


    .support-ticket-card-header h3{

        font-size:17px;

    }


    .support-ticket-status{

        align-self:flex-start;

    }


    .support-ticket-card-info{

        grid-template-columns:1fr 1fr;

        gap:18px 15px;

    }


    .support-ticket-card-footer{

        flex-direction:column;

        align-items:stretch;

    }


    .support-view-ticket-btn{

        width:100%;

    }


    .support-ticket-detail-header{

        flex-direction:column;

        gap:15px;

    }


    .support-ticket-detail-title h2{

        font-size:22px;

    }


    .support-ticket-detail-info{

        grid-template-columns:1fr 1fr;

    }


    .support-conversation{

        min-height:260px;

        max-height:500px;

        padding:12px;

        gap:10px;

        border-radius:12px;

    }


    .support-message{

    width:fit-content !important;

    max-width:85% !important;

    padding:8px 11px 9px;

}


    .support-message.customer{

        max-width:85% !important;

    }


    .support-message.admin{

        max-width:85% !important;

    }


    .support-message-author strong,
    .support-message-header strong{

        font-size:9px;

    }


    .support-message-time,
    .support-message-header span{

        font-size:7px;

    }


    .support-message-body{

        font-size:13px;

        line-height:1.45;

    }


    .support-reply-section{

        margin-top:24px;

        padding-top:20px;

    }


    .support-reply-form button{

        width:100%;

    }

}


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

@media(max-width:480px){

    .support-ticket-card-info{

        grid-template-columns:1fr;

        gap:14px;

    }


    .support-ticket-detail-info{

        grid-template-columns:1fr;

    }


    .support-ticket-detail-title h2{

        font-size:19px;

    }


    .support-ticket-number{

        font-size:12px;

    }


    .support-ticket-detail-badges span{

        font-size:11px;

        padding:6px 12px;

    }


    .support-conversation{

        min-height:240px;

        max-height:450px;

        padding:10px;

    }


    .support-message{

        max-width:92% !important;

    }


    .support-message.customer{

        max-width:92% !important;

    }


    .support-message.admin{

        max-width:92% !important;

    }


    .support-message-body{

        font-size:12px;

    }


    .support-empty{

        padding:45px 20px;

    }

}



/*==================================================
        CREATE SUPPORT TICKET
==================================================*/

.support-create-ticket-card{

    width:100%;

    box-sizing:border-box;

    padding:28px;

    background:var(--white);

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

    border-radius:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}


.support-create-ticket-form{

    display:flex;

    flex-direction:column;

    gap:22px;

    width:100%;

}


/*==================================================
        SUPPORT FORM GROUP
==================================================*/

.support-form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    width:100%;

}


.support-form-group label{

    display:flex;

    align-items:center;

    gap:4px;

    color:var(--black);

    font-size:14px;

    font-weight:600;

}


.support-form-group label span{

    color:var(--primary);

}


.support-form-group label span.optional{

    color:#888;

    font-size:11px;

    font-weight:500;

}


.support-form-group input,
.support-form-group select,
.support-form-group textarea{

    width:100%;

    box-sizing:border-box;

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

    border-radius:10px;

    outline:none;

    background:#fff;

    color:var(--black);

    font-family:inherit;

    font-size:14px;

    transition:.3s;

}


.support-form-group input,
.support-form-group select{

    height:48px;

    padding:0 14px;

}


.support-form-group textarea{

    min-height:150px;

    padding:14px;

    line-height:1.6;

    resize:vertical;

}


.support-form-group input:focus,
.support-form-group select:focus,
.support-form-group textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(215,25,32,.08);

}


.support-form-group input::placeholder,
.support-form-group textarea::placeholder{

    color:#999;

}


.support-form-group small{

    color:#888;

    font-size:12px;

    line-height:1.5;

}


/*==================================================
        CREATE TICKET STATUS MESSAGE
==================================================*/

.support-create-message{

    min-height:20px;

    margin:0;

    font-size:13px;

    font-weight:600;

}


/*==================================================
        CREATE TICKET ACTIONS
==================================================*/

.support-create-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    padding-top:8px;

}


/*==================================================
        CANCEL BUTTON
==================================================*/

.support-cancel-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    background:#f5f5f5;

    color:#555;

    border:1px solid #e2e2e2;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.support-cancel-btn:hover{

    background:#eeeeee;

    color:#222;

}


/*==================================================
        CREATE BUTTON
==================================================*/

.support-create-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:150px;

    padding:12px 22px;

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.support-create-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(215,25,32,.18);

}


.support-create-btn:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*==================================================
        CREATE TICKET MOBILE
==================================================*/

@media(max-width:768px){

    .support-create-ticket-card{

        padding:20px;

        border-radius:15px;

    }


    .support-create-ticket-form{

        gap:19px;

    }


    .support-create-actions{

        flex-direction:column-reverse;

        align-items:stretch;

    }


    .support-cancel-btn,
    .support-create-btn{

        width:100%;

    }

}


@media(max-width:480px){

    .support-create-ticket-card{

        padding:16px;

    }


    .support-form-group input,
    .support-form-group select{

        height:46px;

    }


    .support-form-group textarea{

        min-height:130px;

    }

}