/* ==============================================================================================
   REQUEST SELLER OPPORTUNITIES  (.wr-reqx-*)

   A form an agent fills in once and then does not think about again, so the design goal is that it
   can be completed without reading anything twice. That drives three decisions:

     * THREE NUMBERED SECTIONS on a tinted ground, so the modal reads as three short questions
       rather than one wall of nine fields.
     * CHOICES, NOT TEXT BOXES. Chips, segments and toggles are larger targets than inputs, and
       they make a malformed answer impossible to express.
     * THE SUMMARY IS PART OF THE FORM, not the footer. It answers "what did I just ask for, and
       what does it cost" at the moment the question occurs, immediately above the button.

   Namespaced wr-reqx- rather than extending .wr-modal: this dialog needs its own header treatment,
   a sticky footer and an internally scrolling body, and bending the shared modal to fit would have
   changed every other dialog that uses it.
   ============================================================================================== */

.wr-reqx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(12, 26, 58, 0.55);
    /* Deliberately light. The page behind stays legible, so the dialog reads as a step in a flow
       rather than a context switch. */
    backdrop-filter: blur(2px);
}

.wr-reqx {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px));
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--wr3-surface, #fff);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(12, 26, 58, 0.24), 0 2px 8px rgba(12, 26, 58, 0.08);
    overflow: hidden;
}

.wr-reqx:focus {
    outline: none;
}

/* ---------- Header ---------- */

.wr-reqx__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    /* Blue into purple, the platform's own hero gradient. Confined to the header: the sections
       below are quiet, so this is the only saturated surface in the dialog. */
    background: linear-gradient(135deg, #1d5ff5 0%, #4b43e8 55%, #6d38dd 100%);
    color: #fff;
}

.wr-reqx__headicon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.05rem;
}

.wr-reqx__headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.wr-reqx__head h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}

.wr-reqx__head p {
    margin: 5px 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 56ch;
}

/* A 36px circular target in the corner, replacing a roughly 14px glyph under the title. */
.wr-reqx__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.wr-reqx__close:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
}

.wr-reqx__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wr-reqx__close:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Body ---------- */

.wr-reqx__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 24px 22px;
}

/* ---------- Reassurance ---------- */

.wr-reqx-assure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 18px;
    padding: 11px 14px;
    list-style: none;
    border-radius: 10px;
    background: rgba(47, 166, 106, 0.07);
    border: 1px solid rgba(47, 166, 106, 0.22);
}

.wr-reqx-assure li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #17673f;
}

.wr-reqx-assure i {
    font-size: 0.82rem;
    color: #2fa66a;
}

/* ---------- Sections ---------- */

.wr-reqx-sec {
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 14px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-reqx-sec__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
}

/* Numbered because the sections ARE a sequence: market, then preferences, then anything else. The
   numerals encode real order rather than decorating three unrelated boxes. */
.wr-reqx-sec__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wr3-blue-soft, #e8f0ff);
    color: var(--wr3-blue-ink, #12408f);
    font-size: 0.74rem;
    font-weight: 800;
}

.wr-reqx-sec__title--plain {
    font-size: 0.74rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

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

.wr-reqx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    min-width: 0;
}

.wr-reqx-row {
    margin-bottom: 14px;
}

.wr-reqx-row .wr-reqx-field {
    margin-bottom: 0;
}

.wr-reqx-sec > .wr-reqx-field:last-child {
    margin-bottom: 0;
}

.wr-reqx-field > label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wr3-ink, #0f172a);
}

.wr-reqx-labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.wr-reqx-req {
    margin-left: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-field small {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--wr3-ink-2, #475569);
}

.wr-reqx-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wr3-blue, #1d5ff5);
    cursor: pointer;
}

.wr-reqx-link:hover {
    text-decoration: underline;
}

.wr-reqx-link:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Inputs ---------- */

.wr-reqx-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    color: var(--wr3-ink, #0f172a);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.wr-reqx-input:focus {
    outline: none;
    border-color: var(--wr3-blue, #1d5ff5);
    box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.16);
}

.wr-reqx-input[aria-invalid="true"] {
    border-color: #d94b4b;
}

.wr-reqx-input--qty {
    max-width: 130px;
}

.wr-reqx-textarea {
    resize: vertical;
    min-height: 74px;
    line-height: 1.55;
}

.wr-reqx-counter {
    display: flex;
    justify-content: flex-end;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-counter.is-full {
    color: #b3541e;
    font-weight: 700;
}

/* ---------- Combobox ---------- */

.wr-reqx-combo {
    position: relative;
}

.wr-reqx-combo__chev {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.72rem;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-combo .wr-reqx-input {
    padding-right: 32px;
}

.wr-reqx-combo__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 232px;
    overflow-y: auto;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.wr-reqx-combo__list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-reqx-combo__list button em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-combo__list button:hover,
.wr-reqx-combo__list button:focus-visible {
    background: var(--wr3-blue-soft, #e8f0ff);
    outline: none;
}

.wr-reqx-combo__list button.is-selected {
    background: var(--wr3-blue, #1d5ff5);
    color: #fff;
    font-weight: 700;
}

.wr-reqx-combo__list button.is-selected em {
    color: rgba(255, 255, 255, 0.78);
}

.wr-reqx-combo__empty {
    padding: 10px;
    font-size: 0.83rem;
    color: var(--wr3-ink-2, #475569);
}

/* ---------- Chip inputs ---------- */

.wr-reqx-chipbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    min-height: 42px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 10px;
    background: #fff;
    cursor: text;
}

.wr-reqx-chipbox:focus-within {
    border-color: var(--wr3-blue, #1d5ff5);
    box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.16);
}

.wr-reqx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    background: var(--wr3-blue-soft, #e8f0ff);
    color: var(--wr3-blue-ink, #12408f);
    font-size: 0.81rem;
    font-weight: 700;
    white-space: nowrap;
}

.wr-reqx-chip button {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 64, 143, 0.12);
    color: inherit;
    font-size: 0.64rem;
    cursor: pointer;
    transition: background 120ms ease;
}

.wr-reqx-chip button:hover {
    background: rgba(18, 64, 143, 0.26);
}

.wr-reqx-chip button:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 1px;
}

.wr-reqx-chipinput {
    flex: 1 1 130px;
    min-width: 110px;
    padding: 4px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.88rem;
    color: var(--wr3-ink, #0f172a);
}

.wr-reqx-chipinput:focus {
    outline: none;
}

.wr-reqx-suggest {
    margin: 6px 0 0;
    padding: 5px;
    list-style: none;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--wr3-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.wr-reqx-suggest button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-reqx-suggest button i {
    font-size: 0.78rem;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-suggest button em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-purple, #6d38dd);
}

.wr-reqx-suggest button:hover,
.wr-reqx-suggest button:focus-visible {
    background: var(--wr3-blue-soft, #e8f0ff);
    outline: none;
}

/* ---------- Segmented quantity ---------- */

.wr-reqx-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
}

.wr-reqx-seg button {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.wr-reqx-seg button:hover:not(.is-active) {
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-reqx-seg button.is-active {
    background: var(--wr3-blue, #1d5ff5);
    color: #fff;
}

.wr-reqx-seg button:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 1px;
}

/* ---------- Property-type choices ---------- */

.wr-reqx-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.wr-reqx-choices:focus {
    outline: none;
}

.wr-reqx-choices button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}

.wr-reqx-choices button i {
    font-size: 0.78rem;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-reqx-choices button:hover:not(.is-active) {
    border-color: var(--wr3-blue, #1d5ff5);
}

.wr-reqx-choices button.is-active {
    border-color: var(--wr3-blue, #1d5ff5);
    background: var(--wr3-blue-soft, #e8f0ff);
    color: var(--wr3-blue-ink, #12408f);
    font-weight: 700;
}

.wr-reqx-choices button.is-active i {
    color: var(--wr3-blue, #1d5ff5);
}

.wr-reqx-choices button:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
}

/* ---------- Summary ---------- */

.wr-reqx-sec--summary {
    background: linear-gradient(180deg, rgba(109, 56, 221, 0.05), rgba(29, 95, 245, 0.05));
    border-color: rgba(29, 95, 245, 0.2);
    margin-bottom: 0;
}

.wr-reqx-summary {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.wr-reqx-summary > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 0.86rem;
}

.wr-reqx-summary dt {
    flex: 0 0 106px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-reqx-summary dd {
    margin: 0;
    font-weight: 600;
    color: var(--wr3-ink, #0f172a);
    overflow-wrap: anywhere;
}

/* "Cost today: $0" is the answer to the question the agent actually has, so it is the one line in
   the summary allowed to carry colour. */
.wr-reqx-summary > div:last-child dd {
    color: #17673f;
    font-weight: 800;
}

.wr-reqx-formerr {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    border-left: 3px solid #d94b4b;
    background: rgba(217, 75, 75, 0.06);
    font-size: 0.86rem;
    line-height: 1.55;
    color: #8f2f2d;
}

.wr-reqx-err {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b3352f;
}

/* ---------- Footer ---------- */

.wr-reqx__foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--wr3-border, #e4e8f0);
    background: #fff;
}

.wr-reqx__footnote {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #17673f;
}

.wr-reqx__footbtns {
    display: flex;
    gap: 9px;
    margin-left: auto;
}

.wr-reqx__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wr-reqx__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wr-reqx__spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wr-reqx-spin 720ms linear infinite;
}

@keyframes wr-reqx-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wr-reqx__spin { animation-duration: 2.4s; }
}

/* ---------- Success ---------- */

.wr-reqx-done {
    text-align: center;
    padding: 14px 0 6px;
}

.wr-reqx-done__mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(47, 166, 106, 0.12);
    border: 2px solid rgba(47, 166, 106, 0.32);
    color: #2fa66a;
    font-size: 1.6rem;
}

.wr-reqx-done h3 {
    margin: 0 0 10px;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
    text-wrap: balance;
}

.wr-reqx-done p {
    margin: 0 auto 10px;
    max-width: 54ch;
    font-size: 0.89rem;
    line-height: 1.62;
    color: var(--wr3-ink-2, #475569);
}

.wr-reqx-done__ref {
    font-size: 0.85rem !important;
    color: var(--wr3-ink-2, #475569);
}

.wr-reqx-done__ref strong {
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink, #0f172a);
}

.wr-reqx-summary--done {
    margin-top: 18px;
    padding: 16px;
    text-align: left;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: var(--wr3-surface-2, #f7f9fc);
}

/* ---------- Responsive ----------

   Below 640px the dialog becomes near-full-screen. A centred card with margins on a phone wastes
   the two things in shortest supply, width for the chips and height for the list, and leaves the
   footer floating mid-screen. */

@media (max-width: 720px) {
    .wr-reqx-row {
        grid-template-columns: 1fr;
    }

    .wr-reqx-summary > div {
        flex-direction: column;
        gap: 2px;
    }

    .wr-reqx-summary dt {
        flex: none;
    }
}

@media (max-width: 640px) {
    .wr-reqx {
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .wr-reqx__head {
        padding: 16px;
        gap: 11px;
    }

    .wr-reqx__head h2 {
        font-size: 1.06rem;
    }

    .wr-reqx__head p {
        font-size: 0.82rem;
    }

    .wr-reqx__body {
        padding: 14px 16px 18px;
    }

    .wr-reqx-sec {
        padding: 14px;
    }

    .wr-reqx__foot {
        padding: 12px 16px;
        /* Buttons first on a phone: they are what the thumb reaches for, and the reassurance has
           already been read at the top of the dialog. */
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wr-reqx__footbtns {
        margin-left: 0;
        flex-direction: column-reverse;
    }

    .wr-reqx__footbtns .wr-btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .wr-reqx__footnote {
        justify-content: center;
        text-align: center;
    }

    .wr-reqx-seg button {
        min-height: 44px;
    }

    .wr-reqx-choices button {
        min-height: 42px;
    }
}