.tna-box{direction:rtl;margin:32px 0 12px;border:1px solid #d9e7f5;border-radius:12px;background:#f8fbff;overflow:hidden}.tna-heading{font-weight:800;font-size:18px;padding:13px 18px;background:#eaf4ff;color:#155b91;border-bottom:1px solid #d9e7f5}.tna-item{display:flex;gap:16px;align-items:center;padding:16px;border-bottom:1px solid #e4edf5}.tna-item:last-child{border-bottom:0}.tna-preview{width:180px;flex:0 0 180px}.tna-preview img{display:block;width:100%;height:auto;max-height:150px;object-fit:contain;background:#fff;border-radius:7px}.tna-file-icon{width:90px;height:90px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d9e7f5;border-radius:8px;font-weight:800;color:#b42318}.tna-info{flex:1}.tna-title{font-weight:700;margin-bottom:12px;line-height:1.8}.tna-actions{display:flex;gap:9px;flex-wrap:wrap}.tna-btn{display:inline-block;padding:8px 15px;border-radius:7px;text-decoration:none!important;font-weight:700}.tna-view{background:#fff;border:1px solid #1976b9;color:#1769aa!important}.tna-download{background:#1976b9;color:#fff!important;border:1px solid #1976b9}@media(max-width:600px){.tna-item{display:block}.tna-preview{display:block;width:100%;margin-bottom:12px}.tna-preview img{max-height:300px}.tna-file-icon{margin-bottom:12px}.tna-actions .tna-btn{flex:1;text-align:center}.tna-heading{font-size:16px}}

/* =========================================================
   TAHLEIF ATTACHMENTS - CARD DESIGN 2026
   ========================================================= */

.tna-box{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:28px 0;
    padding:24px;
    direction:rtl;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    overflow:hidden;
}

.tna-heading{
    width:100%;
    box-sizing:border-box;
    margin:0 0 22px;
    padding:0 0 14px;
    font-size:20px;
    font-weight:800;
    line-height:1.7;
    color:#2455e6;
    text-align:right;
    border-bottom:1px solid #edf1f7;
}

.tna-item{
    box-sizing:border-box;
    display:inline-flex;
    vertical-align:top;
    flex-direction:column;
    align-items:stretch;
    width:220px;
    max-width:100%;
    min-height:275px;
    margin:0 0 14px 14px;
    padding:15px;
    background:#fff;
    border:1px solid #dbe4ff;
    border-radius:16px;
    box-shadow:0 5px 16px rgba(37,85,230,.07);
    overflow:hidden;
}

.tna-file-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:90px;
    height:90px;
    margin:0 auto 14px;
    border-radius:14px;
    background:#f3f6ff;
    color:#7c8aa5;
    font-size:18px;
    font-weight:800;
}

.tna-file-icon::before{
    content:"📄";
    font-size:45px;
    line-height:1;
}

.tna-file-icon{
    font-size:0;
}

.tna-preview{
    display:block;
    width:100%;
    margin:0 0 14px;
    text-align:center;
}

.tna-preview img{
    display:block;
    width:100%;
    height:145px;
    object-fit:cover;
    border-radius:12px;
}

.tna-info{
    display:flex;
    flex:1;
    flex-direction:column;
    width:100%;
    min-width:0;
}

.tna-title{
    margin:0 0 14px;
    color:#333;
    font-size:14px;
    font-weight:600;
    line-height:1.9;
    text-align:center;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.tna-actions{
    display:flex;
    gap:8px;
    width:100%;
    margin-top:auto;
}

.tna-actions .tna-btn{
    box-sizing:border-box;
    display:flex;
    flex:1 1 0;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:42px;
    padding:8px 7px;
    border-radius:9px;
    text-decoration:none !important;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    text-align:center;
    transition:.2s ease;
}

.tna-view{
    color:#2455e6 !important;
    background:#eef3ff;
    border:1px solid #d6e1ff;
}

.tna-download{
    color:#fff !important;
    background:#2855e7;
    border:1px solid #2855e7;
}

.tna-view:hover{
    background:#e2eaff;
}

.tna-download:hover{
    opacity:.9;
}


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

@media (max-width:600px){

    .tna-box{
        width:100%;
        max-width:100%;
        margin:20px 0;
        padding:14px 10px;
        border-radius:13px;
        overflow:hidden;
    }

    .tna-heading{
        margin-bottom:16px;
        padding:0 3px 10px;
        font-size:17px;
        line-height:1.6;
    }

    .tna-item{
        display:flex;
        width:100%;
        max-width:100%;
        min-height:0;
        margin:0 0 12px;
        padding:13px;
        border-radius:13px;
    }

    .tna-file-icon{
        width:72px;
        height:72px;
        margin-bottom:10px;
    }

    .tna-file-icon::before{
        font-size:38px;
    }

    .tna-preview img{
        width:100%;
        height:auto;
        max-height:230px;
        object-fit:contain;
    }

    .tna-title{
        margin-bottom:11px;
        padding:0 3px;
        font-size:13px;
        line-height:1.8;
    }

    .tna-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
        width:100%;
    }

    .tna-actions .tna-btn{
        width:100%;
        min-width:0;
        min-height:40px;
        padding:8px 4px;
        font-size:12px;
        white-space:normal;
    }
}


/* موبایل‌های خیلی باریک */

@media (max-width:360px){

    .tna-box{
        padding:11px 8px;
    }

    .tna-item{
        padding:11px;
    }

    .tna-actions{
        grid-template-columns:1fr;
    }

    .tna-actions .tna-btn{
        min-height:39px;
    }
}