/* =============================================================================
   WooCommerce Downloads — Custom Redesign
   Loaded on My Account pages only via wp_enqueue_scripts in functions.php.
   ============================================================================= */

/* ── Tabs nav ─────────────────────────────────────────────────────────────── */
.nma-tabs-nav {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 28px;
    gap: 0;
}
.nma-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 12px 24px;
    font-size: 0.95em;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: color 0.15s;
    border-radius: 0;
}
.nma-tab-btn:hover {
    color: var(--bb-primary-color, #FC7A00);
}
.nma-tab-btn.active {
    color: var(--bb-primary-color, #FC7A00);
    font-weight: 600;
}
.nma-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--bb-primary-color, #FC7A00);
}
.nma-tab-count {
    font-size: 0.8em;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 1px 7px;
    color: #555;
}
.nma-tab-btn.active .nma-tab-count {
    background: rgba(252, 122, 0, 0.12);
    color: var(--bb-primary-color, #FC7A00);
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.nma-tab-panel { display: none; }
.nma-tab-panel.active { display: block; }
.nma-tab-title {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 0 4px;
}
.nma-tab-subtitle {
    color: #666;
    margin: 0 0 20px;
    font-size: 0.9em;
}

/* ── Search input ─────────────────────────────────────────────────────────── */
.nma-table-controls {
    margin-bottom: 14px;
}
.nma-search-input {
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}
.nma-search-input:focus {
    border-color: var(--bb-primary-color, #FC7A00);
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.nma-downloads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.nma-downloads-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}
.nma-downloads-table thead th.nma-sortable {
    cursor: pointer;
    user-select: none;
}
.nma-downloads-table thead th.nma-sortable:hover {
    color: var(--bb-primary-color, #FC7A00);
}
.nma-downloads-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}
.nma-downloads-table tbody tr:hover {
    background: #fafafa;
}
.nma-downloads-table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    color: #333;
}

/* Column widths */
.nma-col-course    { min-width: 160px; }
.nma-col-file      { min-width: 180px; }
.nma-col-remaining { width: 90px; text-align: center; }
.nma-col-expires   { width: 130px; white-space: nowrap; }
.nma-col-download  { width: 120px; text-align: right; }

/* ── File type icons ──────────────────────────────────────────────────────── */
.nma-downloads-table td.nma-col-file {
    display: table-cell;
}
.nma-downloads-table td.nma-col-file > .nma-file-icon,
.nma-downloads-table td.nma-col-file > strong {
    display: inline-flex;
    vertical-align: middle;
}
.nma-downloads-table td.nma-col-file > strong {
    margin-left: 10px;
    align-items: center;
}
.nma-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.95em;
}
.nma-icon-video { background: rgba(252, 122, 0, 0.12); color: #FC7A00; }
.nma-icon-audio { background: rgba(52, 168, 83,  0.12); color: #34a853; }
.nma-icon-pdf   { background: rgba(103, 58, 183, 0.12); color: #673ab7; }
.nma-icon-image { background: rgba(66, 133, 244, 0.12); color: #4285f4; }
.nma-icon-file  { background: rgba(0, 0, 0,     0.06); color: #666;    }

/* ── Expires column ───────────────────────────────────────────────────────── */
.nma-expires-date {
    margin-right: 4px;
}
.nma-info-icon {
    color: #bbb;
    font-size: 0.85em;
    cursor: help;
    vertical-align: middle;
}
.nma-info-icon:hover { color: #888; }

/* ── Download button ──────────────────────────────────────────────────────── */
.nma-btn-download {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    background: var(--bb-primary-color, #FC7A00) !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
}
.nma-btn-download:hover {
    opacity: 0.88;
    color: #fff !important;
}
.nma-btn-disabled,
.nma-btn-download.nma-btn-disabled {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 1;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.nma-no-downloads {
    color: #888;
    padding: 24px 0;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.nma-pagination { margin-top: 20px; }
.nma-pagination-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.nma-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #444;
    font-size: 0.88em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.nma-page-btn:hover:not(.nma-page-disabled):not(.nma-page-active) {
    border-color: var(--bb-primary-color, #FC7A00);
    color: var(--bb-primary-color, #FC7A00);
}
.nma-page-btn.nma-page-active {
    background: var(--bb-primary-color, #FC7A00);
    color: #fff;
    border-color: var(--bb-primary-color, #FC7A00);
    font-weight: 600;
    cursor: default;
}
.nma-page-btn.nma-page-disabled {
    color: #ccc;
    cursor: default;
    border-color: #eee;
}
.nma-page-prev,
.nma-page-next {
    font-size: 0.85em;
    padding: 0 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nma-tabs-nav { gap: 0; }
    .nma-tab-btn  { padding: 10px 14px; font-size: 0.88em; }

    .nma-downloads-table thead { display: none; }
    .nma-downloads-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        padding: 12px;
    }
    .nma-downloads-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: none;
    }
    .nma-downloads-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8em;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        min-width: 110px;
    }
    .nma-col-remaining,
    .nma-col-download { text-align: left; }
    .nma-search-input { max-width: 100%; }
}