/* =============================================================================================
   SELLER OPPORTUNITY REQUESTS AND THE CREDIT PANEL

   Two surfaces with different jobs:

   The CREDIT PANEL is read to make a decision ("do I spend one now?"), so the split and the dates
   are given as much weight as the total — a big number over three tiny ones would answer the wrong
   question. Figures are tabular so a column of them can be compared by eye.

   The REQUEST BAR is an invitation. It carries the "free" reassurance inline rather than in a
   tooltip, because an agent inside a credit-metered feature assumes a form costs something unless
   the page says otherwise, and one they assume costs something is one they do not submit.
   ============================================================================================= */

/* ---------- Request bar ---------- */

.wr-so__requestbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 12px;
    background: var(--wr-surface-2, #f4f6f9);
}

.wr-so__requestbar-note {
    font-size: 0.85rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-so__requestbar-credits {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--wr-ink-700, #414a58);
    white-space: nowrap;
}

.wr-so__requestbar-credits strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--wr-ink-900, #141922);
}

/* ---------- The agent's own request list ---------- */

.wr-so__requests {
    margin: 0 0 24px;
}

.wr-so__requests h2 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.wr-so__requests ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wr-so__requests li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 10px;
    background: #fff;
    font-size: 0.88rem;
}

.wr-so__requests-market {
    font-weight: 700;
}

.wr-so__requests-meta {
    color: var(--wr-ink-600, #5b6472);
    font-size: 0.82rem;
}

/* The bulk-unlock offer states a real cost, so it is set apart rather than reading as more
   metadata — it is a decision, not a status. */
.wr-so__requests-bulk {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(231, 168, 61, 0.14);
    border: 1px solid rgba(231, 168, 61, 0.4);
    font-size: 0.82rem;
    color: #8a6212;
    white-space: nowrap;
}

/* ---------- Credit panel ---------- */

.wr-credit-panel {
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 12px;
    background: #fff;
    padding: 18px;
}

.wr-credit-panel.is-compact {
    padding: 14px;
}

.wr-credit-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.wr-credit-panel__total strong {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--wr-ink-900, #141922);
}

.wr-credit-panel__total span {
    margin-left: 7px;
    font-size: 0.88rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-credit-panel__plan {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--wr-surface-2, #f4f6f9);
    color: var(--wr-ink-700, #414a58);
}

.wr-credit-panel__free {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--wr-ink-600, #5b6472);
    max-width: 62ch;
}

.wr-credit-panel__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 0;
    border-top: 1px solid var(--wr-border, #eef1f5);
    border-bottom: 1px solid var(--wr-border, #eef1f5);
}

.wr-credit-panel__split dt {
    margin: 0 0 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wr-ink-600, #5b6472);
}

.wr-credit-panel__split dd {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.wr-credit-panel__split dd strong {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wr-credit-panel__split dd span {
    font-size: 0.78rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-credit-panel__dates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.83rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-credit-panel__dates li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.wr-credit-panel__dates i {
    opacity: 0.6;
}

/* Only a lot inside the warning window gets the amber treatment. Applying it to every expiry date
   would make the warning meaningless within a week of anyone buying a pack. */
.wr-credit-panel__dates li.is-expiring {
    color: #8a6212;
}

.wr-credit-panel__soon {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(224, 163, 46, 0.16);
    font-size: 0.74rem;
    font-weight: 700;
}

.wr-credit-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* ---------- Request dialog ---------- */

.wr-request-modal {
    max-width: 640px;
}

.wr-request-lead {
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--wr-ink-700, #414a58);
    max-width: 64ch;
}

.wr-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.wr-request-field--wide {
    grid-column: 1 / -1;
}

.wr-request-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wr-request-field > span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wr-ink-700, #414a58);
}

.wr-request-field > span em {
    font-style: normal;
    font-weight: 600;
    color: var(--wr-ink-600, #5b6472);
}

.wr-request-field small {
    font-size: 0.76rem;
    color: var(--wr-ink-600, #5b6472);
}

/* The reassurance sits with the submit button, where the hesitation actually happens. */
.wr-request-free-inline,
.wr-request-free-note {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d7148;
}

.wr-request-free-inline {
    margin-left: auto;
}

.wr-request-done {
    text-align: center;
    padding: 12px 0;
}

.wr-request-done i {
    font-size: 2.4rem;
    color: #2fa66a;
    margin-bottom: 10px;
}

.wr-request-done h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
}

.wr-request-done p {
    margin: 0 auto 8px;
    max-width: 52ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--wr-ink-600, #5b6472);
}

/* ---------- Unlock gate ---------- */

.wr-unlock-gate {
    max-width: 720px;
}

.wr-unlock-gate__includes {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--wr-surface-2, #f4f6f9);
    border: 1px solid var(--wr-border, #dfe3ea);
}

.wr-unlock-gate__includes h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 800;
}

.wr-unlock-gate__includes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 5px 16px;
    font-size: 0.85rem;
    color: var(--wr-ink-700, #414a58);
}

.wr-unlock-gate__includes li i {
    color: #2fa66a;
    margin-right: 6px;
}

.wr-unlock-gate__lead {
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 64ch;
}

.wr-unlock-gate__plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.wr-unlock-gate__plan {
    position: relative;
    padding: 18px 16px;
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 12px;
    text-align: center;
}

.wr-unlock-gate__plan.is-recommended {
    border-color: rgba(62, 123, 250, 0.5);
    box-shadow: 0 0 0 1px rgba(62, 123, 250, 0.25);
}

.wr-unlock-gate__badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: #3e7bfa;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wr-unlock-gate__plan h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 800;
}

.wr-unlock-gate__price strong {
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wr-unlock-gate__price span {
    font-size: 0.82rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-unlock-gate__credits {
    margin: 6px 0 14px;
    font-size: 0.83rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-unlock-gate__credits strong {
    font-size: 1.05rem;
    color: var(--wr-ink-900, #141922);
}

.wr-unlock-gate__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.wr-unlock-gate__option {
    padding: 16px;
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 12px;
}

.wr-unlock-gate__option h4 {
    margin: 0 0 6px;
    font-size: 0.98rem;
    font-weight: 800;
}

.wr-unlock-gate__option p {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--wr-ink-600, #5b6472);
}

.wr-unlock-gate__packs {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
}

.wr-unlock-gate__packs li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.wr-unlock-gate__foot {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: var(--wr-ink-600, #5b6472);
}

/* ---------- Admin request queue ---------- */

.wr-req-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
}

.wr-req-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.wr-req-toolbar__msg {
    font-size: 0.85rem;
    color: var(--wr-ink-600, #5b6472);
}

.wr-req-table-scroll {
    overflow-x: auto;
}

.wr-req-table {
    width: 100%;
    min-width: 1080px;
    font-size: 0.85rem;
}

.wr-req-table td.num,
.wr-req-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A zero balance changes what an administrator should assign, so it reads as a warning rather
   than as one more number in a row of numbers. */
.wr-req-table td.num.is-zero {
    color: #a5312f;
    font-weight: 800;
}

.wr-req-table__notes {
    max-width: 260px;
    overflow-wrap: anywhere;
}

.wr-req-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.wr-req-field > span {
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .wr-request-grid,
    .wr-credit-panel__split {
        grid-template-columns: 1fr;
    }

    .wr-so__requestbar-credits,
    .wr-so__requests-bulk,
    .wr-request-free-inline {
        margin-left: 0;
    }
}

/* Cycle qualifier beside the refresh date. Quiet: it explains a date rather than being one. */
.wr-credit-panel__cycle {
    font-size: 0.74rem;
    color: var(--wr-ink-600, #5b6472);
    opacity: 0.85;
}

/* ---------- Request-first conversion block ----------

   Replaces the "0 Available Opportunities / No approved opportunities / Upgrade" wall. Sized and
   centred like an empty state because that is structurally what it is -- but the content is an
   action, not an apology, so the primary button carries full weight rather than sitting below a
   paragraph explaining what we do not have. */

.wr-somkt__request {
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--wr-border, #dfe3ea);
    border-radius: 14px;
    background: var(--wr-surface, #fff);
}

.wr-somkt__request h2 {
    margin: 12px 0 10px;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 800;
    text-wrap: balance;
}

.wr-somkt__request p {
    margin: 0 auto 10px;
    max-width: 60ch;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--wr-ink-600, #5b6472);
}

/* The "free" line is the objection-handler; it gets colour so it is read before the button. */
.wr-somkt__request-free {
    color: #1d7148 !important;
}

.wr-somkt__request-meta {
    font-size: 0.85rem !important;
    color: var(--wr-ink-600, #5b6472) !important;
}

/* A preview fact that is genuinely good news reads as such. Used for "verified contact
   information available", which is the line that most often decides a credit is worth spending. */
.wr-opp__facts li.is-positive {
    color: #1d7148;
    font-weight: 600;
}

.wr-opp__why {
    margin: 10px 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--wr-ink-700, #414a58);
}

/* Pricing: the disclaimer under the plan guidance. */
.wra-plan-disclaimer {
    max-width: 72ch;
    margin: 10px auto 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--wra-text-muted, #9aa7bd);
    text-align: center;
}