/* ---------- Layout ---------- */
.sts-wrap{max-width:900px;margin:30px auto}
.sts-portal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.sts-portal-head h2{margin:0}
.sts-empty{padding:24px;text-align:center;color:#64748b;border:1px dashed #cbd5e1;border-radius:10px}

/* ---------- Buttons ---------- */
.sts-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:7px;padding:11px 20px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.sts-btn-primary{background:#2271b1;color:#fff}
.sts-btn-primary:hover{background:#185a94;color:#fff}

/* ---------- New-ticket form ---------- */
.sts-new-ticket{margin:0 0 26px;padding:24px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.05)}
.sts-new-ticket h3{margin-top:0}
.sts-form label{display:block;margin:0 0 18px;font-weight:600}
.sts-form input,.sts-form select,.sts-form textarea{box-sizing:border-box;width:100%;margin-top:7px;padding:12px;border:1px solid #cbd5e1;border-radius:7px;font:inherit}
.sts-form textarea{resize:vertical}
.sts-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.sts-form small{display:block;margin-top:6px;color:#64748b;font-weight:400}

/* ---------- Alerts ---------- */
.sts-alert{margin:0 0 20px;padding:16px;border-radius:7px}
.sts-success{background:#ecfdf5;color:#065f46}
.sts-error{background:#fef2f2;color:#991b1b}

/* ---------- Ticket list ---------- */
.sts-tickets{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.sts-tickets th,.sts-tickets td{padding:13px 16px;text-align:left;border-bottom:1px solid #eef2f7;font-size:14px}
.sts-tickets th{background:#f8fafc;font-weight:700;color:#475569}
.sts-tickets tr:last-child td{border-bottom:0}
.sts-tickets a{color:#2271b1;text-decoration:none}

/* ---------- Status badge ---------- */
.sts-badge{display:inline-block;padding:3px 11px;border-radius:999px;color:#fff;font-size:12px;font-weight:700;line-height:1.6;vertical-align:middle}

/* ---------- Chat ---------- */
.sts-chat{border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden}
.sts-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid #eef2f7;background:#f8fafc}
.sts-chat-head h2{margin:0 0 6px;font-size:19px}
.sts-chat-meta{display:flex;flex-wrap:wrap;gap:14px;color:#64748b;font-size:13px}
.sts-chat-thread{padding:22px;display:flex;flex-direction:column;gap:16px;max-height:560px;overflow-y:auto}

.sts-msg{display:flex;gap:11px;max-width:82%}
.sts-msg-left{align-self:flex-start}
.sts-msg-right{align-self:flex-end;flex-direction:row-reverse}
.sts-msg-avatar{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:#94a3b8}
.sts-msg-staff .sts-msg-avatar{background:#2271b1}
.sts-msg-customer .sts-msg-avatar{background:#7c3aed}
.sts-msg-body{background:#f1f5f9;border-radius:12px;padding:12px 15px;min-width:0}
.sts-msg-right .sts-msg-body{background:#e0edf9}
.sts-msg-head{display:flex;gap:10px;align-items:baseline;margin-bottom:4px;flex-wrap:wrap}
.sts-msg-author{font-weight:700;font-size:13px}
.sts-msg-date{color:#94a3b8;font-size:12px}
.sts-msg-text{white-space:pre-wrap;word-wrap:break-word;line-height:1.5}
.sts-msg-attachment{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:6px 11px;background:#fff;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;color:#2271b1;text-decoration:none}
.sts-msg-attachment:hover{background:#f8fafc}

/* ---------- Reply area ---------- */
.sts-chat-foot{padding:18px 22px;border-top:1px solid #eef2f7}
.sts-reply-form{margin-top:14px}
.sts-reply-form textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:7px;font:inherit;resize:vertical}
.sts-reply-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.sts-file-label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#475569;font-size:13px}
.sts-file-label input[type="file"]{display:none}
.sts-reply-error{margin-top:10px;padding:10px 12px;border-radius:7px;background:#fef2f2;color:#991b1b;font-size:13px}
.sts-closed-notice{padding:15px 18px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;color:#4b5563;text-align:center}

/* ---------- Admin tweaks ---------- */
.sts-admin .sts-pad{padding:20px;margin-bottom:20px}
.sts-admin-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px}
.sts-admin .sts-chat{box-shadow:none}
.sts-admin .sts-chat-thread{padding:4px 0 16px}

/* ---------- Responsive ---------- */
@media(max-width:782px){
	.sts-admin-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
	.sts-grid{grid-template-columns:1fr}
	.sts-new-ticket{padding:18px}
	.sts-msg{max-width:92%}
	.sts-tickets thead{display:none}
	.sts-tickets,.sts-tickets tbody,.sts-tickets tr,.sts-tickets td{display:block;width:100%;box-sizing:border-box}
	.sts-tickets tr{border-bottom:1px solid #e5e7eb;padding:8px 0}
	.sts-tickets td{border:0;padding:6px 16px;display:flex;justify-content:space-between;gap:12px}
	.sts-tickets td::before{content:attr(data-label);font-weight:700;color:#475569}
}
.main_postboxes .postbox {

    width: calc(25% - 91px);

    padding: 40px!important;

    border-radius: 15px;

    box-shadow: 3px 3px 11px 1px #00000005;

    border: 0;

}

.main_postboxes .postbox strong {

    font-size: 29px!important;

    margin-bottom: 15px;

    display: block;

    color: #fff;

}

div#postbox-total {

    background: linear-gradient(180deg, #fa0727, #a2051a);

}

div#postbox-submitted {

    background: linear-gradient(180deg, #4ff9d2, #0c9e91);

}

div#postbox-in-progress {

    background: linear-gradient(180deg, #efbb00, #cda000);

}

div#postbox-waiting-for-customer {

    background: linear-gradient(180deg, #ef7900, #b35a00);

}

div#postbox-resolved {

    background: linear-gradient(180deg, #8cd802, #69a300);

}

div#postbox-closed {

    background: linear-gradient(180deg, #707070, #545454);

}

div#postbox-today {

    background: linear-gradient(180deg, #00a3e4, #0074a3);

}

div#postbox-month {

    background: linear-gradient(180deg, #994bf7, #6d2fb9);

}

.main_postboxes .postbox div {

    color: #fff;

}
		table.widefat.striped thead th {
    color: #fff;
    font-weight: 600;
}
table.widefat.striped thead {
    background: #3858e9;
    color: #fff;
}
.wrap form[method="get"] input.button {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #fff;
    margin-left: 10px;
    border-radius: 7px;
}
.sts-chat .sts-chat-thread {
    padding: 20px 20px;
}
form.postbox.sts-pad p label {
    font-weight: 600;
}
form.postbox.sts-pad p label select, form.postbox.sts-pad p label textarea {
    width: 100%;
    display: block;
    max-width: 100%;
    margin-top: 7px;
}