/* =========================================================
   TarinShow Reports Modal
   ========================================================= */

#ts-report-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: none;

    z-index: 999999 !important;

    overflow-y: auto;

    padding: 30px 15px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.65);
}


/* پس‌زمینه مودال */

#ts-report-modal .ts-report-modal-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.65);

    z-index: 1;
}


/* فرم */

#ts-report-modal .ts-report-modal-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;

    margin: 50px auto;

    padding: 25px;

    box-sizing: border-box;

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.35);

    direction: rtl;

    text-align: right;
}


/* دکمه بستن */

#ts-report-modal .ts-report-close {
    position: absolute;

    top: 10px;
    left: 10px;

    width: 35px;
    height: 35px;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 28px;

    line-height: 35px;

    cursor: pointer;

    z-index: 3;
}


/* عنوان */

#ts-report-modal-title {
    margin: 0 40px 10px 0;

    font-size: 20px;

    font-weight: 700;
}


/* توضیح */

#ts-report-modal .ts-report-description {
    margin-bottom: 20px;
}


/* دلایل */

#ts-report-modal .ts-report-reasons {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 20px;
}


#ts-report-modal .ts-report-reason {
    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;
}


/* فیلد توضیحات */

#ts-report-modal .ts-report-field {
    margin-bottom: 15px;
}


#ts-report-modal .ts-report-field label {
    display: block;

    margin-bottom: 7px;

    font-weight: 600;
}


#ts-report-modal .ts-report-field label span {
    font-size: 12px;

    font-weight: 400;

    opacity: 0.7;
}


#ts-report-modal textarea {
    width: 100%;

    min-height: 100px;

    padding: 10px;

    box-sizing: border-box;

    resize: vertical;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-family: inherit;
}


/* پیام */

#ts-report-modal .ts-report-message {
    padding: 10px 12px;

    margin-bottom: 15px;

    border-radius: 8px;
}


#ts-report-modal .ts-report-message-error {
    background: #ffe5e5;

    color: #a00000;
}


#ts-report-modal .ts-report-message-success {
    background: #e5f8e8;

    color: #176b2c;
}


/* دکمه‌ها */

#ts-report-modal .ts-report-actions {
    display: flex;

    justify-content: flex-start;

    gap: 10px;

    margin-top: 15px;
}


#ts-report-modal .ts-report-actions button {
    padding: 10px 18px;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    font-family: inherit;
}


#ts-report-modal .ts-report-cancel {
    background: #eee;
}


#ts-report-modal #ts-report-submit {
    background: #d62828;

    color: #fff;
}


#ts-report-modal #ts-report-submit:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}


/* موبایل */

@media (max-width: 600px) {

    #ts-report-modal {
        padding: 15px 10px;
    }


    #ts-report-modal .ts-report-modal-content {
        margin: 20px auto;

        padding: 20px 15px;

        border-radius: 10px;
    }

}

.ts-topic-card .ts-report-button {
    position: absolute;
    top: 8px;
    left: 8px;

    width: 42px;
    height: 42px;

    padding: 3px 2px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    border: none;
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.9);

    color: #777;

    cursor: pointer;

    z-index: 20;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ts-topic-card .ts-report-icon {
    font-size: 14px;
    line-height: 14px;
}

.ts-topic-card .ts-report-text {
    font-size: 9px;
    line-height: 11px;
}

.ts-topic-card .ts-report-button:hover {
    background: #fff;
    color: #d62828;
    transform: scale(1.05);
}