.support-page{
    padding-top:34px;
    padding-bottom:64px;
}

.support-hero{
    padding:34px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#09100c;
    margin-bottom:24px;
}

.support-hero h1{
    margin:8px 0 10px;
    font-size:clamp(32px,5vw,52px);
}

.support-hero p{
    max-width:700px;
    color:var(--muted);
    line-height:1.7;
}

.support-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}

.support-success{
    display:flex;
    gap:14px;
    padding:16px 18px;
    border:1px solid rgba(25,242,107,.25);
    border-radius:16px;
    background:rgba(25,242,107,.07);
    margin-bottom:20px;
}

.support-success > span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#19f26b;
    color:#041007;
    font-weight:900;
}

.support-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(320px,.85fr);
    gap:20px;
    align-items:start;
}

.support-card{
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
    background:#09100c;
}

.support-card-head{
    margin-bottom:20px;
}

.support-card-head h2{
    margin:6px 0;
}

.support-card-head p{
    color:var(--muted);
}

.support-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.support-ticket-result{
    margin-top:20px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#07100a;
}

.support-ticket-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.support-status{
    padding:6px 9px;
    border-radius:999px;
    color:#19f26b;
    border:1px solid var(--line);
    font-size:11px;
    font-weight:900;
}

.support-ticket-message,
.support-admin-reply{
    margin-top:14px;
    padding:14px;
    border-radius:13px;
    background:#0d1610;
}

.support-admin-reply{
    border:1px solid rgba(25,242,107,.2);
}

@media(max-width:900px){

    .support-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:620px){

    .support-page{
        padding-top:20px;
    }

    .support-hero,
    .support-card{
        padding:18px;
        border-radius:16px;
    }

    .support-two{
        grid-template-columns:1fr;
    }

    .support-hero-actions{
        display:grid;
    }

    .support-hero-actions a{
        width:100%;
    }

}

/* ===== Ticket Conversation ===== */

.support-thread{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.support-message{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
}

.support-message-customer{
    margin-right:28px;
    background:#0b120e;
}

.support-message-admin{
    margin-left:28px;
    border-color:rgba(25,242,107,.25);
    background:rgba(25,242,107,.045);
}

.support-message-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.support-message-meta span{
    color:var(--muted);
    font-size:11px;
}

.support-message p{
    margin:0;
    line-height:1.65;
}

.support-attachment{
    display:inline-flex;
    margin-top:10px;
    font-size:12px;
    font-weight:800;
}

.support-reply-form{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--line);
}

.support-closed-note{
    margin-top:18px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
}

@media(max-width:620px){
    .support-message-customer{
        margin-right:12px;
    }

    .support-message-admin{
        margin-left:12px;
    }

    .support-message-meta{
        display:block;
    }

    .support-message-meta span{
        display:block;
        margin-top:3px;
    }
}