/* =============================================================================
   portal-orders.css — the portal "My Order" page (/portal/orders).

   One card holding the orders table. Rows are per NUMBER, so the same order id can
   repeat — that is what the design shows.
============================================================================= */

.po-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    font-family: 'Poppins', sans-serif;
}

.po-table-wrap {
    border-radius: 12px;
    overflow: hidden;          /* clips the gradient header to the rounded corners */
}

.po-table-scroll { overflow-x: auto; }

.po-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;          /* below this the table scrolls rather than crushing */
}

/* The gradient sits on the ROW, not on each cell: a per-<th> background restarts
   the gradient in every column, so the header reads as separate blocks instead of
   one continuous sweep. This is how portal.html's own tables (.cl-table, .bl-table)
   do it too. */
/* Exact brand pair: rgba(70,126,254) -> rgba(97,202,253). NOT #61caff — that is
   blue 255 and reads a shade lighter at the right-hand end. */
.po-table thead tr {
    background: linear-gradient(90deg, rgba(70, 126, 254, 1) 0%, rgba(97, 202, 253, 1) 100%);
}

.po-table thead th {
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 18px 24px;
    white-space: nowrap;
}
.po-table thead th:last-child { text-align: center; }

.po-table tbody td {
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 400;
    color: #222328;
    vertical-align: top;
    line-height: 1.5;
}

/* Zebra striping, as in the design. No row borders. */
.po-table tbody tr:nth-child(even) { background: #f5f8ff; }

.po-table__name span { display: block; }
.po-table__ship { max-width: 260px; }
.po-table__total { white-space: nowrap; }
.po-table__status { text-align: center; }

/* ── Status pill ──────────────────────────────────────────────────────────────
   The label is the solid brand colour; the pill behind it is the SAME colour at
   low alpha, which is what gives the design's pale tint. Keeping one colour per
   status means the two can never drift apart. */
.po-status {
    display: inline-block;
    min-width: 104px;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.po-status--delivered {
    color: rgba(70, 184, 122, 1);
    background: rgba(70, 184, 122, .14);
}

.po-status--open {
    color: rgba(66, 96, 203, 1);
    background: rgba(66, 96, 203, .14);
}

/* ── More Numbers ── */
.po-more-wrap {
    display: flex;
    justify-content: center;
    padding: 22px 0 8px;
}

.po-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 6px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #4260cb;
    cursor: pointer;
}
.po-more:hover { text-decoration: underline; }
.po-more:disabled { opacity: .6; cursor: default; text-decoration: none; }
.po-more img { width: 18px; height: 18px; display: block; }

.po-empty {
    text-align: center;
    color: #8c94b0;
    padding: 40px 24px;
    font-size: 15px;
}

@media (max-width: 991.98px) {
    .po-wrap { padding: 20px 16px 44px; }
}

/* Phones: rows are cards (.nr-cardtable, portal-shell.css). With the gradient header
   row hidden, a border keeps the cards together as one list. */
@media (max-width: 991.98px) and (min-width: 768px) {
	/* Tablets: the six columns fit without scrolling sideways */
	.po-table { min-width: 0; }
	.po-table thead th, .po-table tbody td { padding: 14px 12px; font-size: 14px; }
	.po-status { min-width: 0; padding: 6px 12px; font-size: 13px; }
}
@media (max-width: 767.98px) {
	.po-wrap { padding: 16px 16px 40px; }
	.po-table-wrap { border: 1px solid #e6e9f5; border-radius: 14px; }
	.po-status { min-width: 0; padding: 5px 14px; font-size: 13px; }
	.os-actions { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
	/* An answered offer has no actions left - only an empty placeholder in the cell */
	.po-table--received td:has(> .os-answered:empty) { display: none; }
	.os-section-title { font-size: 17px; margin-bottom: 12px; }
}