.st-wrap {
    --st-primary: #84BD00;
    --st-primary-dark: #79A908;
    --st-border: #e5e7eb;
    --st-bg: #f9fafb;
    --st-text: #1f2937;
    --st-muted: #6b7280;
    --st-radius: 10px;
    font-family: inherit;
    color: var(--st-text);
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.8;
}

.st-wrap input,
.st-wrap textarea,
.st-wrap select,
.st-wrap button {
    font-family: inherit;
}

.st-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.st-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* ============================================================
   دکمه «ارسال سفارش جدید» (و دکمه ورود به حساب کاربری)
   برای تغییر رنگ/استایل این دکمه، فقط همین بلاک را ویرایش کنید.
   ============================================================ */
.st-btn-new-ticket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--st-radius);
    border: none;
    background: var(--st-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
}
.st-btn-new-ticket:hover {
    background: var(--st-primary-dark);
    border-color: none;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================================
   دکمه «مشاهده لیست همه سفارش‌ها» / «بازگشت به لیست سفارش‌ها»
   برای تغییر رنگ/استایل این دکمه، فقط همین بلاک را ویرایش کنید.
   ============================================================ */
.st-btn-view-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--st-primary);
    color: #fff !important;
    border-radius: 10px;
    padding: 5px 25px;
    margin-top: 20px;
    border: none;
    text-decoration: none !important;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s ease;
}
.st-btn-view-list:hover {
    background: var(--st-primary-dark);
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================================
   دکمه‌های «ارسال سفارش» و «ارسال پاسخ» (سابمیت فرم‌ها)
   عمداً بدون رنگ/بوردر/بک‌گراند اختصاصی رها شده‌اند تا ظاهر
   پیش‌فرض دکمه‌ی قالب شما (استایل بومی <button>) روی آن‌ها اعمال شود.
   اگر قالب شما دکمه‌ها را استایل نمی‌دهد و می‌خواهید این دکمه‌ها
   ظاهر مشخصی داشته باشند، رنگ/پدینگ دلخواه را همین‌جا اضافه کنید.
   ============================================================ */
.st-submit-btn {
    margin-top: 6px;
    padding:15px 25px !important;
    width: 100% !important;
    background: var(--st-primary) !important;
    color: #fff !important;
    border:none;
    border-radius:10px;
    }
.st-submit-btn:hover {
    background: var(--st-primary-dark) !important;
    color: #fff !important;
}

.st-inline-form { margin-top: 4px; }

.st-notice {
    padding: 12px 16px;
    border-radius: var(--st-radius);
    margin-bottom: 16px;
    font-size: 14px;
}
.st-notice-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.st-notice-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.st-notice-info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.st-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--st-border);
    margin-bottom: 16px;
    overflow-x: auto;
}

.st-tab {
    padding: 10px 14px;
    text-decoration: none;
    color: var(--st-muted);
    font-size: 14px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.st-tab-active { color: var(--st-primary); border-color: var(--st-primary); font-weight: 600; }

.st-list { display: flex; flex-direction: column; gap: 8px; }

.st-list-item {
    display: flex;
    align-items: center;
    /* بدون gap: چون عنوان/تاریخ/وضعیت جمعاً دقیقاً ۱۰۰٪ عرض را با نسبت ۶۰٪/۲۰٪/۲۰٪ پر می‌کنند
       (فاصله‌ی بین‌شان از طریق padding داخل خود ستون‌ها تأمین می‌شود، نه gap ردیف)، در غیر این صورت
       جمع عرض‌ها از ۱۰۰٪ عرض کارت بیشتر شده و باعث سرریز می‌شد. */
    gap: 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    text-decoration: none !important;
    color: var(--st-text);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.st-list-item:hover { border-color: var(--st-primary); box-shadow: 0 2px 8px rgba(0,0,0,.04); text-decoration: none !important; }

/* عنوان، تاریخ/ساعت و وضعیت هر ردیف در یک خط کنار هم قرار می‌گیرند، با نسبت عرض ثابت:
   عنوان ۶۰٪ / تاریخ‌وساعت ۲۰٪ / وضعیت ۲۰٪ از عرض کل ردیف.
   .st-list-item-main با display:contents از میان برداشته می‌شود تا عنوان و تاریخ
   به‌جای گروه‌بندی داخل خودش، مستقیماً به‌عنوان دو ستون کنار «وضعیت» در همان ردیف اصلی حساب شوند.
   در صورت کم بودن عرض صفحه (موبایل)، در رسانه‌ی زیر دوباره به‌صورت چند سطر جدا از هم می‌روند. */
.st-list-item-main { display: contents; }
.st-list-item-title {
    flex: 0 0 60%;
    max-width: 60%;
    box-sizing: border-box;
    padding-inline-end: 8px;
    font-weight: 600;
    font-size: 15px;
    color:#2d2c2c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-list-item-date {
    flex: 0 0 20%;
    max-width: 20%;
    box-sizing: border-box;
    padding-inline-end: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--st-muted);
    white-space: nowrap;
}
/* ستون وضعیت: خود ستون ۲۰٪ عرض ردیف را می‌گیرد و با flex به‌صورت افقی وسط‌چین می‌شود،
   اما بج (.st-badge) داخل آن display:inline-block با عرض متناسب با متن باقی می‌ماند
   (نه کشیده‌شده به اندازه‌ی کل ستون)، چون عرض ۲۰٪ روی این wrapper اعمال شده نه روی خود بج. */
.st-list-item-status {
    flex: 0 0 20%;
    max-width: 20%;
    box-sizing: border-box;
    display: flex;
    justify-content: end;
}

.st-empty { text-align: center; padding: 40px 0; color: var(--st-muted); font-size: 14px; }

.st-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.st-badge-pending   { background: #fef3c7; color: #92400e; }
.st-badge-reviewing { background: #dbeafe; color: #1e40af; }
.st-badge-answered  { background: #d1fae5; color: #065f46; }
.st-badge-trash     { background: #fee2e2; color: #991b1b; }

.st-pagination { display: flex; gap: 6px; margin-top: 16px; justify-content: center; }
.st-page-link {
    padding: 6px 12px;
    border: 1px solid var(--st-border);
    border-radius: 6px;
    text-decoration: none !important;
    color: var(--st-text);
    font-size: 13px;
}
.st-page-active { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }

.st-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.st-label { font-size: 13px; font-weight: 600; color: var(--st-muted); margin-top: 15px;}

/* ============================================================
   فیلدهای فرم (عنوان سفارش / متن پیام)
   عمداً بدون رنگ، بوردر، بک‌گراند یا استایل فوکوس اختصاصی رها شده‌اند
   تا ظاهر آن‌ها کاملاً از استایل پیش‌فرض قالب شما پیروی کند.
   فقط عرض کامل و box-sizing نگه داشته شده تا از کادر فرم بیرون نزنند.
   ============================================================ */
.st-input, .st-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--st-border);
    
}
.st-input:focus,
.st-textarea:focus {
    border-color: var(--st-primary) !important;
    outline: none;
    box-shadow: none;
}

.st-textarea { min-height: 120px; }

.st-dropzone {
    position: relative;
    border: 2px dashed var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-bg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.st-dropzone:hover, .st-dropzone.st-dragover { border-color: var(--st-primary); background: #eff6ff; }

.st-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--st-muted); font-size: 13px; pointer-events: none; }
.st-dropzone-hint { font-size: 11px; opacity: .8; }

.st-dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.st-upload-alert {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 13px;
}

.st-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-file-row {
    font-size: 13px;
    background: var(--st-bg);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--st-border);
}
.st-file-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-file-status { font-size: 12px; white-space: wrap; }
.st-file-status-done { color: #059669; font-weight: 700; }
.st-file-status-error { color: #dc2626; }
.st-file-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.st-file-remove { color: #dc2626; cursor: pointer; font-size: 13px; background: none; border: none; }

.st-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.st-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
.st-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--st-primary);
    transition: width .15s ease;
}
.st-progress-percent { font-size: 11px; color: var(--st-muted); min-width: 32px; text-align: left; }

.st-file-row.st-file-done .st-file-name { color: var(--st-text); }
.st-file-row.st-file-error { border-color: #fecaca; background: #fef2f2; }

.st-upload-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.st-upload-status-waiting { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.st-upload-status-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.st-ticket-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.st-conversation { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; background: #f9f9f9; padding: 15px; border-radius: 10px }

.st-message {
    padding: 14px 16px;
    border-radius: var(--st-radius);
    border: 1px solid var(--st-border);
    background: #f8f9fa;
    max-width: 90%;
}
.st-message-user { align-self: flex-start; background: #fff}
.st-message-admin { align-self: flex-end; background: #eff6ff; border-color: #bfdbfe; }

.st-message-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--st-muted); margin-bottom: 15px; border-bottom: 1px solid #e0dede; padding-bottom:3px;}
.st-message-sender { font-weight: bold; font-size: 14px; color: #2f2f31; }
.st-message-body { font-size: 16px; white-space: pre-wrap; word-break: break-word; color: #494949; }

.st-attachments { margin-top: 10px; display: flex; flex-direction: column; gap: 4px;}
.st-attachment { font-size: 13px; color: var(--st-primary); text-decoration: none;}
.st-attachment:hover { text-decoration: underline; }

.st-form-actions { display: flex; justify-content: flex-start; }

@media (max-width: 600px) {
    .st-message { max-width: 100%; }

    .st-list-item { flex-wrap: wrap; gap: 6px; row-gap: 6px; }
    .st-list-item-title {
        flex: 1 1 100%;
        max-width: 100%;
        padding-inline-end: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .st-list-item-date { flex: 1 1 auto; max-width: none; text-align: start; }
    .st-list-item-status { flex: 0 0 auto; max-width: none; justify-content: flex-start; }
}