/* Quote desk: coin shelf, inputs, pair reverse, route brief, payout panel and estimate card. */
/* Sequential part 195-593 of the former quote-desk.css; load order in website/includes/header.php must be preserved. */

.coin-shelf {
    position: relative;
    z-index: 5;
    inline-size: 100%;
}

.coin-shelf[open] { z-index: 41; }
.coin-shelf__trigger {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
    min-block-size: 3.125rem;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.4375rem 0.625rem;
    color: var(--copy-bright);
    border: 0.0625rem solid #333842;
    border-radius: 0.75rem;
    background-color: var(--station-field);
    cursor: pointer;
    list-style: none;
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.coin-shelf__trigger::-webkit-details-marker { display: none; }
.coin-shelf__trigger:is(:hover, :focus-visible) {
    border-color: var(--edge-hot);
    outline: 0;
    background-color: #12151a;
}

.coin-shelf__trigger > b {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: 0.4375rem;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
}

.coin-shelf__icon {
    display: block;
    inline-size: 1.6875rem;
    block-size: 1.6875rem;
    border-radius: 50%;
    background-image: var(--coin-art);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.28);
}

.coin-shelf__caret {
    color: var(--copy-dim);
    font-size: 1.0625rem;
    text-align: center;
    transition: rotate 160ms ease;
}

.coin-shelf[open] .coin-shelf__caret { rotate: 180deg; }
.coin-shelf__tray {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: 51;
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    max-block-size: 21.875rem;
    gap: 0.25rem;
    margin: 0;
    padding: 0.4375rem;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 0.0625rem solid #343943;
    border-radius: 0.875rem;
    background-color: #171a20;
    box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.52);
}

.coin-shelf__choice {
    display: grid;
    grid-template-columns: 1.875rem minmax(0, 1fr) 1.25rem;
    min-block-size: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5625rem;
    color: var(--copy-soft);
    border: 0.0625rem solid transparent;
    border-radius: 0.5625rem;
    text-decoration: none;
}

.coin-shelf__choice:is(:hover, :focus-visible, .current-coin) {
    color: var(--copy-bright);
    outline: 0;
    background-color: rgba(255, 255, 255, 0.055);
}

.coin-shelf__choice.current-coin,
.coin-shelf__check { color: var(--sun); }
.coin-shelf__name {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: 0.4375rem;
    overflow: hidden;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 650;
}

.coin-shelf__symbol {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coin-network-badge {
    display: inline-flex;
    flex: 0 0 auto;
    min-block-size: 1.125rem;
    align-items: center;
    justify-content: center;
    max-inline-size: 48%;
    padding: 0.1875rem 0.375rem;
    overflow: hidden;
    color: var(--sun);
    border: 0.0625rem solid rgba(var(--sun-rgb), 0.3);
    border-radius: 999rem;
    background-color: rgba(var(--sun-rgb), 0.08);
    font-size: 0.55rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.coin-shelf__check { font-style: normal; font-weight: 800; text-align: center; }
.quantity-input,
.rate-probe,
.payout-address {
    display: grid;
    min-inline-size: 0;
    gap: 0.4375rem;
}

.payout-address__label .required-mark { margin-inline-start: 0.1875rem; color: var(--flare); }
.quantity-input__control,
.payout-address__input {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 3.125rem;
    padding-inline: 0.8125rem;
    color: var(--copy-bright);
    border: 0.0625rem solid #333842;
    border-radius: 0.75rem;
    outline: 0;
    background-color: var(--station-field);
}

.quantity-input__control {
    font-size: 1.25rem;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
}

.payout-address__input { padding-inline: 0.875rem; font-size: 0.83rem; font-weight: 550; }
.quantity-input__control::placeholder,
.payout-address__input::placeholder { color: #6f747e; }
.quantity-input__control:focus,
.payout-address__input:focus,
.proof-layer__field input:focus {
    border-color: rgba(var(--flare-rgb), 0.75);
    box-shadow: 0 0 0 0.1875rem rgba(var(--flare-rgb), 0.12);
}

.rate-probe__button {
    display: flex;
    inline-size: 100%;
    min-block-size: 3.125rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8125rem;
    color: #ff9c55;
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.34);
    border-radius: 0.75rem;
    background-color: rgba(var(--flare-rgb), 0.075);
    font-size: 0.78rem;
    font-weight: 700;
}

.rate-probe__button:is(:hover, :focus-visible) {
    color: #ffb278;
    border-color: rgba(var(--flare-rgb), 0.62);
    outline: 0;
    background-color: rgba(var(--flare-rgb), 0.12);
}

.rate-probe__button > span { font-size: 1rem; }
.pair-reverse {
    position: relative;
    z-index: 3;
    display: grid;
    min-inline-size: 0;
    place-items: center;
}

.pair-reverse__button {
    display: grid;
    inline-size: 2.375rem;
    block-size: 2.375rem;
    place-items: center;
    padding: 0;
    color: #1b0d04;
    border: 0.25rem solid #13151a;
    border-radius: 50%;
    background-color: var(--flare);
    transition: scale 160ms ease, background-color 160ms ease;
}

.pair-reverse__button:is(:hover, :focus-visible) { scale: 1.04; outline: 0; background-color: #ff9841; }
.pair-reverse__icon {
    position: relative;
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    rotate: 90deg;
}

.pair-reverse__arrow {
    position: absolute;
    inset-inline-start: 0.125rem;
    display: block;
    inline-size: 0.875rem;
    block-size: 0.125rem;
    border-radius: 999px;
    background-color: currentColor;
}

.pair-reverse__arrow::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-block-start: 0.125rem solid currentColor;
    border-inline-end: 0.125rem solid currentColor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.pair-reverse__arrow--forward { inset-block-start: 0.25rem; }
.pair-reverse__arrow--backward {
    inset-block-end: 0.25rem;
    rotate: 180deg;
}

.route-brief {
    position: relative;
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0.75rem 0.875rem 0.75rem 1.0625rem;
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.2);
    border-radius: 0.8125rem;
    background-color: rgba(var(--flare-rgb), 0.055);
}

.route-brief::before {
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: 0;
    inline-size: 0.1875rem;
    border-radius: 0 0.1875rem 0.1875rem 0;
    content: "";
    background-color: var(--flare);
}

.route-brief__title { color: #ffa566; font-size: 0.72rem; line-height: 1.35; }
.route-brief__copy { color: var(--copy-soft); font-size: 0.75rem; line-height: 1.5; }

.payout-panel {
    padding: 0.75rem;
    border: 0.0625rem solid var(--station-edge);
    border-radius: 0.875rem;
    background-color: #16191e;
}

.payout-panel__grid { display: grid; gap: 0.6875rem; }
.exchange-commit { min-inline-size: 0; }
.exchange-commit__button {
    display: grid;
    inline-size: 100%;
    min-block-size: 3.125rem;
    place-items: center;
    padding: 0.375rem 1rem;
    color: #1b0d04;
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.86);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #ffae47, var(--flare) 72%);
    text-decoration: none;
}

.exchange-commit__button:focus-visible { outline: 0.1875rem solid rgba(var(--flare-rgb), 0.28); outline-offset: 0.125rem; }
.exchange-commit__copy { display: grid; place-items: center; line-height: 1.05; }
.exchange-commit__title { font-size: 0.82rem; font-weight: 800; }
.estimate-card {
    display: grid;
    min-inline-size: 0;
    overflow: hidden;
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.26);
    border-radius: 1rem;
    background-color: #15171c;
}

.estimate-card__head {
    display: grid;
    padding: 0.5rem 0.875rem;
    border-block-end: 0.0625rem solid var(--station-edge);
    background-color: #191c22;
}

.estimate-card__heading { display: grid; min-inline-size: 0; }
.estimate-card__heading > span,
.estimate-card__label,
.estimate-card__send > span { color: var(--station-muted); font-size: 0.64rem; font-weight: 650; }
.estimate-card__result {
    display: grid;
    min-inline-size: 0;
    align-content: center;
    gap: 0.25rem;
    padding: 0.875rem 0.75rem;
    border-block-end: 0.0625rem solid var(--station-edge);
    background-color: rgba(var(--flare-rgb), 0.045);
}

.estimate-card__result > strong {
    overflow-wrap: anywhere;
    color: var(--sun);
    font-size: clamp(1.35rem, 6.9vw, 1.9rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.estimate-card__result > small,
.estimate-card__send > small { color: var(--station-muted); font-size: 0.68rem; }
.estimate-card__details { display: grid; min-inline-size: 0; background-color: #17191e; }
.estimate-card__send {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.1875rem 0.625rem;
    padding: 0.5625rem 0.75rem;
    border-block-end: 0.0625rem solid var(--station-edge);
}

.estimate-card__send > span { grid-column: 1 / -1; }
.estimate-card__send > strong { min-inline-size: 0; overflow-wrap: anywhere; font-size: 0.84rem; }
.estimate-card__rate-note { display: flex; align-items: center; gap: 0.5625rem; padding: 0.5rem 0.75rem; color: var(--flare); }
.estimate-card__rate-note p { display: grid; gap: 0.0625rem; margin: 0; }
.estimate-card__rate-note strong { color: var(--copy-soft); font-size: 0.68rem; }
.estimate-card__rate-note small { color: var(--station-muted); font-size: 0.62rem; line-height: 1.35; }
.request-fault {
    display: grid;
    grid-template-columns: 2.375rem minmax(0, 1fr);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-color: rgba(255, 107, 98, 0.32);
    border-radius: 0.8125rem;
    background-color: rgba(255, 107, 98, 0.065);
}

.request-fault__signal {
    display: grid;
    min-block-size: 3.25rem;
    place-items: center;
    padding: 0.5625rem;
    color: #ff8d86;
    background-color: rgba(255, 107, 98, 0.08);
}

.request-fault__signal svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.request-fault__signal > span,
.request-fault__content header,
.request-fault__hint { display: none; }
.request-fault__content { min-inline-size: 0; padding: 0.5625rem 0.75rem; }
.request-fault__content > p { margin: 0; overflow-wrap: anywhere; color: #ffb5b0; font-size: 0.72rem; font-weight: 500; line-height: 1.4; }