.content-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content-box table {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
}

.content-box th {
    background: #2c3e50;
    color: #ffffff;
    font-weight: 600;
    padding: 14px 18px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-bottom: 3px solid #1a252f;
}

.content-box td {
    padding: 12px 18px;
    text-align: center;
    border-bottom: 1px solid #e8ecf1;
    color: #2c3e50;
    background-color: #ffffff;
    transition: background-color 0.15s ease;
}

.content-box tr:last-child td {
    border-bottom: none;
}

.content-box tr:hover td {
    background-color: #f7f9fc;
}

.content-box td:first-child {
    font-weight: 500;
    color: #1a252f;
    text-align: right;
}

.content-box td:nth-child(3){
    direction: ltr;
    font-family: Arial;
}

/* Zebra striping for better readability */
.content-box tr:nth-child(even) td {
    background-color: #fafbfd;
}

.content-box tr:nth-child(even):hover td {
    background-color: #f2f5fa;
}

/* Responsive: stack on small screens */
@media screen and (max-width: 600px) {
    .content-box table {
        min-width: 100%;
        font-size: 12px;
        box-shadow: none;
        border: 1px solid #e0e4ea;
    }

    .content-box th,
    .content-box td {
        padding: 10px 12px;
        display: block;
        text-align: left;
        border-bottom: none;
        position: relative;
    }

    .content-box th {
        background: #2c3e50;
        color: white;
        font-size: 11px;
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid #1a252f;
    }

    .content-box td {
        padding: 8px 12px 8px 40%;
        border-bottom: 1px solid #e8ecf1;
        background: #ffffff;
        min-height: 32px;
    }

    .content-box td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 30%;
        font-weight: 600;
        color: #2c3e50;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .content-box tr {
        display: block;
        border-bottom: 2px solid #d0d5dd;
        margin-bottom: 10px;
        background: white;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .content-box tr:last-child {
        border-bottom: 2px solid #d0d5dd;
    }

    .content-box tr:nth-child(even) td {
        background-color: #ffffff;
    }

    .content-box tr:nth-child(even):hover td {
        background-color: #f7f9fc;
    }

    .content-box tr:hover td {
        background-color: #f7f9fc;
    }

    .content-box td:last-child a {
        display: inline-block;
        padding: 3px 12px;
        font-size: 11px;
    }

    /* Data labels in English (for code clarity) - these will display as Persian text */
    .content-box td:nth-child(1)::before { content: "Title"; }
    .content-box td:nth-child(2)::before { content: "Files"; }
    .content-box td:nth-child(3)::before { content: "Size"; }
    .content-box td:nth-child(4)::before { content: "Download"; }
}

/* For very small screens */
@media screen and (max-width: 400px) {
    .content-box td {
        padding: 6px 10px 6px 38%;
        font-size: 11px;
    }

    .content-box td::before {
        font-size: 10px;
        left: 8px;
    }

    .content-box th {
        font-size: 10px;
        padding: 6px 10px;
    }
}