/* =============================================================================
   portal-offer-status.css — the portal "Offer Status" page (/portal/offer-status).

   The same table treatment as My Order (.po-*, loaded alongside this file); only
   the status palette differs, so this sheet carries just that.
============================================================================= */

/* Countered — the offer is still live, awaiting the buyer. Brand blue. */
.po-status--countered {
    color: rgba(66, 96, 203, 1);
    background: rgba(66, 96, 203, .14);
}

/* Approved — the seller accepted. Same green as a delivered order. */
.po-status--approved {
    color: rgba(70, 184, 122, 1);
    background: rgba(70, 184, 122, .14);
}

/* Denied — the seller declined. */
.po-status--denied {
    color: rgba(232, 87, 87, 1);
    background: rgba(232, 87, 87, .12);
}

/* Pending — sent, not yet answered. Not in the design, but a real state, so it
   gets a muted amber rather than falling through to another status's colour. */
.po-status--pending {
    color: rgba(200, 138, 30, 1);
    background: rgba(200, 138, 30, .13);
}

/* The offer table has no Action column, so the last cell is a status like any
   other and should not be centred by the orders sheet's rule. */
.po-table--offers thead th:last-child { text-align: left; }
.po-table--offers .po-table__status { text-align: left; }

/* ── Seller side: offers received on your own numbers ─────────────────────────
   Same table treatment as the buyer table above it; what it adds is a section
   heading (there are two tables now, so each needs saying which is which) and
   the Accept / Decline pair. */

.os-section-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #222328;
}

.os-received { margin-bottom: 24px; }

/* ── Purchase requests (Contact Agent) you sent: read-only, no Action column ── */
.os-requests { margin-bottom: 24px; }
.os-section-note { margin: -8px 0 16px; font-size: 13.5px; line-height: 1.5; color: #8b90a5; }
.po-table--requests thead th:last-child,
.po-table--requests .po-table__status { text-align: left; }
.po-table--requests .po-table__ref { font-size: 13px; color: #6f7489; white-space: nowrap; }

/* The row the emailed link points at, so the offer being answered is obvious on
   a page that may list a dozen. Fades out once it has been seen. */
.po-table--received tr.is-target { background: rgba(66, 96, 203, .07); }

.os-actions { display: flex; gap: 8px; white-space: nowrap; }

.os-btn {
    border-radius: 999px;
    padding: 7px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, opacity .15s;
}
.os-btn:disabled { opacity: .55; cursor: default; }

.os-btn--accept { background: rgba(66, 96, 203, 1); color: #fff; }
.os-btn--accept:hover:not(:disabled) { background: rgba(52, 78, 170, 1); }

.os-btn--decline { background: #fff; color: rgba(232, 87, 87, 1); border-color: rgba(232, 87, 87, 1); }
.os-btn--decline:hover:not(:disabled) { background: rgba(232, 87, 87, .08); }

/* Once answered, the cell holds a plain note instead of the buttons. */
.os-answered { color: #8b90a5; font-size: 13px; }

.po-table--received thead th:last-child,
.po-table--received td:last-child { text-align: left; }

/* Result of an Accept / Decline. Matches the wishlist page's message line, and
   clears itself so a stale "sent" note cannot sit over a later decision. */
.os-msg { font-size: 13px; margin: 0 0 12px; min-height: 18px; }
.os-msg--ok  { color: #1f9254; }
.os-msg--err { color: #e05a5a; }

/* ── Counter-offer modal ──────────────────────────────────────────────────────
   Same shape as the wishlist page's modals so the portal keeps one dialog look. */

.os-modal .modal-content { border: none; border-radius: 18px; overflow: hidden; }

.os-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 0;
}
.os-modal__title { margin: 0; font-size: 20px; font-weight: 600; color: #222328; }
.os-modal__close {
    width: 32px; height: 32px; flex: none;
    border: none; border-radius: 50%;
    background: #f1f3f9; color: #6b7280;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.os-modal__close:hover { background: #e6e9f3; }
.os-modal__close svg { width: 18px; height: 18px; }

.os-modal__body { padding: 14px 24px 24px; }
.os-modal__number { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: rgba(66, 96, 203, 1); }
.os-modal__hint   { margin: 0 0 16px; font-size: 13px; color: #8b90a5; }
.os-modal__label  { display: block; font-size: 13px; color: #6b7280; margin-bottom: 6px; }

/* The dollar sign belongs to the field, not to the value the customer types —
   otherwise it has to be stripped back off before the amount can be read. */
.os-modal__field {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid #e0e3ec; border-radius: 12px;
    padding: 0 14px; margin-bottom: 12px;
}
.os-modal__field:focus-within { border-color: rgba(66, 96, 203, 1); }
.os-modal__prefix { color: #8b90a5; font-size: 15px; }
.os-modal__input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    padding: 13px 0; font-family: 'Poppins', sans-serif; font-size: 15px; color: #222328;
}

.os-modal__actions { display: flex; justify-content: flex-end; }
.os-modal__actions .os-btn { padding: 11px 26px; font-size: 14px; }

/* Counter, on the buyer's own row. Outlined brand blue: it is an action, but the
   seller's Accept is the one that should carry the weight on this page. */
.os-btn--counter { background: #fff; color: rgba(66, 96, 203, 1); border-color: rgba(66, 96, 203, 1); }
.os-btn--counter:hover:not(:disabled) { background: rgba(66, 96, 203, .08); }

.po-table--offers thead th:last-child,
.po-table--offers td:last-child { text-align: left; }

/* How many counters remain, inside the button. */
.os-left { opacity: .75; font-weight: 400; }