/* ================================================================
   specs.css – Styles for [specs] and [specs_list] shortcodes
   tldevtech theme
   ================================================================ */

/* ── Error messages ──────────────────────────────────────────── */
.specs-error {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-left: 4px solid #fc8181;
    border-radius: 8px;
    color: #c53030;
    font-size: 0.9rem;
    padding: 12px 16px;
    margin: 16px 0;
}

/* ================================================================
   [specs] – Single device spec table
   ================================================================ */

.specs-wrapper {
    margin: 24px 0;
    font-family: inherit;
}

.specs-image {
    display: block;
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.specs-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 14px;
    text-align: center;
    letter-spacing: -0.3px;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    font-size: 0.92rem;
}

.specs-table tbody tr {
    border-bottom: 1px solid #f0f2f7;
    transition: background 0.15s ease;
}

.specs-table tbody tr:last-child {
    border-bottom: none;
}

.specs-table tbody tr:hover {
    background: #f7f8ff;
}

.specs-table th,
.specs-table td {
    padding: 11px 16px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
}

.specs-table th[scope="row"] {
    font-weight: 600;
    color: #4a4a6a;
    background: #f8f9fc;
    width: 38%;
    white-space: nowrap;
}

.specs-table td {
    color: #1a1a2e;
    background: #ffffff;
}

/* Zebra striping */
.specs-table tbody tr:nth-child(even) td {
    background: #fafbff;
}

/* ================================================================
   [specs_list] – Multi-device comparison table
   ================================================================ */

.specs-list-wrapper {
    margin: 24px 0;
}

/* Horizontal scroll container for narrow viewports */
.specs-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* DataTables search bar override */
.specs-dt-top {
    margin-bottom: 14px;
}

.specs-dt-top input[type="search"],
.dataTables_filter input {
    padding: 9px 14px 9px 40px;
    border: 1px solid #e0e4f0;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1a1a2e;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235a5a7a' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 12px center;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 260px;
}

.specs-dt-top input[type="search"]:focus,
.dataTables_filter input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Hide DataTables default label */
.dataTables_filter label {
    font-size: 0;
}

table.specs-list-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: #1a1a2e;
    background: #ffffff;
}

table.specs-list-table thead tr {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

table.specs-list-table thead th {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 13px 16px;
    text-align: left;
    border: none;
    white-space: nowrap;
}

/* DataTables sort icons */
table.specs-list-table thead th.dt-orderable-asc::after,
table.specs-list-table thead th.dt-orderable-desc::after {
    opacity: 0.6;
}

table.specs-list-table tbody tr {
    border-bottom: 1px solid #f0f2f7;
    transition: background 0.15s ease;
}

table.specs-list-table tbody tr:last-child {
    border-bottom: none;
}

table.specs-list-table tbody tr:hover {
    background: #f3f4ff;
}

table.specs-list-table tbody td {
    padding: 11px 16px;
    vertical-align: middle;
    line-height: 1.5;
    background: transparent;
    border: none;
}

/* Zebra striping */
table.specs-list-table tbody tr:nth-child(even) {
    background: #fafbff;
}

table.specs-list-table tbody tr:nth-child(even):hover {
    background: #f3f4ff;
}

/* First column – device name */
.specs-device-name {
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    min-width: 140px;
}

/* Optional thumbnail in comparison table */
.specs-thumb {
    display: block;
    width: 52px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 4px;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 640px) {
    .specs-table th[scope="row"] {
        width: 44%;
        font-size: 0.82rem;
    }

    .specs-table th,
    .specs-table td {
        padding: 9px 12px;
        font-size: 0.85rem;
    }

    table.specs-list-table thead th,
    table.specs-list-table tbody td {
        padding: 9px 12px;
        font-size: 0.82rem;
    }

    .specs-dt-top input[type="search"],
    .dataTables_filter input {
        width: 100%;
    }
}