/*
 * Exchange rate pages: filters left, offers right.
 *
 * The picker follows the shape the whole category uses — one panel, the same
 * currency list twice side by side, group headings running across both columns.
 * The palette is this site's, not the reference's: the arrangement is what has
 * been proven by years of use, the colour never was.
 */

.rates { padding: 0 0 2rem; }

/* Section tabs: two faces of one section, drawn as the site draws its pill
   filters — a dark pill for the current one, a pale one for the other. */
.rates__tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.rates__tab {
    padding: .35rem 1rem;
    border-radius: 999px;
    background: #eef1f4;
    color: var(--color-primary, #404040);
    font-size: .875rem;
    text-decoration: none;
}
.rates__tab:hover { text-decoration: none; background: #e3e8ed; }
.rates__tab--on { background: var(--color-primary, #404040); color: #fff; }
.rates__title { font-size: 1.5rem; margin: 0 0 1rem; }
.rates__subtitle { font-size: 1.125rem; margin: 1.75rem 0 .75rem; }
.rates__lead { color: #6c757d; margin-bottom: 1.25rem; }

/* ---- the picker ---------------------------------------------------------- */

.picker { margin-bottom: 1.5rem; }

/* One grid for both columns: a group heading spans them, so a row means the
   same currency on the left and on the right.
 
   The panel is white like every other panel on the site; the accent colour draws
   the frame and the grid lines, and a picked cell is that same colour at low
   opacity. Nothing is filled solid: the sidebar sits next to a table of numbers
   and must not compete with it. */
.picker__grid {
    display: grid;
    /* Two columns inside the site's standard 304px sidebar. minmax(0, 1fr) is
       what actually holds them there — a plain 1fr lets a long name push the
       column wider than its share, and the two sides stop lining up. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* The gaps are the grid lines: the background shows through them, which
       beats bordering every cell and guessing which ones sit on an edge. */
    gap: 1px;
    border: 1px solid var(--color-blue, #43AFE9);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(67, 175, 233, .25);
}

.picker__search { padding: 6px; background: #fff; }

.picker__search input {
    width: 100%;
    border: 1px solid rgba(67, 175, 233, .35);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .875rem;
    color: var(--color-primary, #404040);
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat right .5rem center;
    padding-right: 1.6rem;
}

.picker__search input::placeholder { color: #9aa1a9; }

.picker__group {
    grid-column: 1 / -1;
    padding: .35rem .5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-primary, #404040);
    background: rgba(67, 175, 233, .1);
}

.picker__cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    /* Without this a long name grows the cell instead of being clipped. */
    min-width: 0;
    padding: .28rem .45rem;
    font-size: .75rem;
    /* The catalogue names companies in dark blue; the filters speak alike.
       Medium weight — the body's 300 reads too faint at this size. */
    color: var(--color-darkblue, #080C56);
    font-weight: 500;
    text-decoration: none;
    background: #fff;
}

.picker__cell:hover { background: rgba(67, 175, 233, .07); color: var(--color-darkblue, #080C56); text-decoration: none; }

.picker__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__code { font-size: .6875rem; text-align: right; color: #9aa1a9; flex-shrink: 0; }

.picker__cell--on {
    background: rgba(67, 175, 233, .12);
    font-weight: 600;
}
.picker__cell--on .picker__code { color: #6c757d; }

/* Not served with what is picked opposite: still listed, so the two columns
   stay aligned, but plainly not a destination. */
.picker__cell--off { color: #b9c0c7; cursor: default; }
.picker__cell--off .picker__code { color: #ced4da; }
.picker__cell--off:hover { background: #fff; color: #b9c0c7; }

.picker__block {
    margin-top: .75rem;
    border: 1px solid #e4e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.picker__block-head {
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    background: #f6f7f9;
}

.picker__popular { list-style: none; margin: 0; padding: .25rem 0 .5rem; font-size: .8125rem; }
.picker__popular li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem .75rem; }
.picker__popular a { color: var(--color-primary, #404040); text-decoration: none; }
.picker__popular a:hover { text-decoration: underline; }
.picker__count { color: #9aa1a9; }

/* ---- the table ----------------------------------------------------------- */

.rates__meta { color: #6c757d; font-size: .8125rem; margin-bottom: .5rem; }
/* Says which exchanger the table was narrowed to, and how to get back out. */
.rates__filter { margin: -.5rem 0 1rem; color: #6c757d; }
.rates__filter a { margin-left: .5rem; }
.rates__fallback { color: #b8860b; }

.rates__notice {
    background: #f6f7f9;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.rates__cities { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: .5rem 0 0; }

/* The table is built around one number. The rate stands right after the name,
   larger and bolder than anything else, with its unit beside it; reserve and
   limits are context, set smaller and quieter, and every number is right-
   aligned in tabular figures so a column of them can be read down. */
.rates__table { width: 100%; border-collapse: collapse; }
.rates__table th,
.rates__table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border-gray, #EBEBEB); vertical-align: middle; }
.rates__table th { font-size: .75rem; font-weight: 500; color: #6c757d; text-transform: uppercase; letter-spacing: .02em; }
.rates__th-num, .rates__rate, .rates__amount, .rates__limits { text-align: right; white-space: nowrap; }
/* The site face has no tabular figures, so numbers that must line up fall back
   to a system stack that does; the size is set to sit level with Futura. */
.rates__num, .rates__rate-value {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.rates__name { font-size: 1rem; font-weight: 600; color: var(--color-primary, #404040); }
/* An exchanger with no card of its own: the name still reads as a name, it just
   leads nowhere. */
.rates__link--plain { pointer-events: none; color: inherit; text-decoration: none; }
.rates__sub { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .75rem; color: #6c757d; }
.rates__more { color: var(--color-blue, #43AFE9); white-space: nowrap; }
.rates__more[hidden] { display: none; }

.rates__rate-value { font-size: 1.2rem; font-weight: 600; color: var(--color-darkblue, #080C56); letter-spacing: -.01em; }
.rates__unit { font-size: .75rem; color: #9aa1a9; margin-left: .2rem; }
.rates__per { display: block; font-size: .6875rem; color: #9aa1a9; }
.rates__per[hidden] { display: none; }
.rates__amount .rates__num, .rates__limits .rates__num { font-size: .875rem; }
/* The unit column is fixed so the numbers before it stack in one line. */
.rates__amount .rates__unit, .rates__limits .rates__unit, .rates__rate .rates__unit { display: inline-block; min-width: 2.6em; text-align: left; }
.rates__dash { color: #adb5bd; margin: 0 .2rem; }
.rates__city { white-space: nowrap; }

/* Terms as the site's badges: rounded, quiet, one per condition. */
.rates__terms { min-width: 10rem; }
.rates__tag {
    display: inline-block;
    margin: .1rem .3rem .1rem 0;
    padding: .15rem .55rem;
    border-radius: 90px;
    font-size: .6875rem;
    color: var(--color-primary, #404040);
    background: var(--color-light-blue, #E9F3FB);
    white-space: nowrap;
}
.rates__tag--delay { background: var(--bg-pending, rgba(225, 109, 0, .1)); color: var(--color-orange, #E16D00); }
.rates__stale { display: block; font-size: .75rem; color: #b8860b; }
.rates__stale[hidden] { display: none; }
.rates__row--stale { opacity: .65; }

/* The best offer is the first row, and it says so: a green rule at the edge
   and a badge under the rate. Nothing louder — it is one row among peers. */
.rates__row--best td:first-child { box-shadow: inset 3px 0 0 var(--color-green, #37CEA5); }
.rates__row--best .rates__rate::after {
    content: attr(data-best);
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--color-greenbright, #23AE2D);
}

/* The row itself moves to its new place, so a change reads as movement rather
   than as a table that blinks. */
.rates__row { transition: background-color .8s ease-out; }
.rates__row--up { background-color: #e6f6ea; transition: none; }
.rates__row--down { background-color: #fdeaea; transition: none; }

/* Below the tablet width the table folds into cards: name and rate on the
   first line, the rest below, terms last. The markup is the same table — only
   the display changes — so the refresh keeps working untouched. */
@media (max-width: 767px) {
    .rates__table thead { display: none; }
    .rates__table, .rates__table tbody, .rates__row { display: block; }
    .rates__row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .25rem .75rem;
        padding: .75rem 0;
        border-bottom: 1px solid var(--border-gray, #EBEBEB);
    }
    .rates__row td { display: block; padding: 0; border: 0; text-align: left; }
    .rates__exchanger { grid-column: 1; grid-row: 1; }
    .rates__rate { grid-column: 2; grid-row: 1; text-align: right; }
    .rates__city, .rates__amount, .rates__limits, .rates__terms { grid-column: 1 / -1; font-size: .8125rem; }
    .rates__amount::before { content: attr(data-label) ' '; color: #9aa1a9; }
    .rates__limits::before { content: attr(data-label) ' '; color: #9aa1a9; }
    .rates__city::before { content: attr(data-label) ' '; color: #9aa1a9; }
    .rates__row--best td:first-child { box-shadow: none; }
    .rates__row--best { box-shadow: inset 3px 0 0 var(--color-green, #37CEA5); padding-left: .75rem; }
}

.rates__directions { list-style: none; padding: 0; margin: 0; }
.rates__directions li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #eceef1; }
.rates__count { color: #6c757d; font-size: .8125rem; white-space: nowrap; }


/* The city dropdown on a cash direction: the site's search-list language —
   green frame, pale list, blue hover — over a plain input. Rows are links, so
   the list works with or without the script; the script adds typing and keys. */
.citypick { display: flex; align-items: center; gap: .6rem; margin: -.25rem 0 1rem; }
.citypick__label { color: #6c757d; font-size: .875rem; }
.citypick__box { position: relative; width: min(100%, 18rem); }
.citypick__input {
    width: 100%;
    padding: .4rem 2rem .4rem .7rem;
    border: 1px solid var(--border-lightgray, #DADADA);
    border-radius: 6px;
    font: inherit;
    font-size: .875rem;
    color: var(--color-primary, #404040);
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center;
}
/* The site reset strips border and background from any focused input; the
   extra selector weight keeps this one dressed while it is being typed in. */
.citypick .citypick__box .citypick__input:focus {
    outline: none;
    border: 1px solid var(--color-green, #37CEA5);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(55, 206, 165, .15);
}
.citypick__input::placeholder { color: var(--color-primary, #404040); }
.citypick__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-green, #37CEA5);
    border-radius: 6px;
    background: #f2f3f9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.citypick__list[hidden] { display: none; }
.citypick__item[hidden] { display: none; }
.citypick__item a { display: block; padding: .5rem .75rem; font-size: .875rem; color: var(--color-primary, #404040); text-decoration: none; }
.citypick__item:hover a, .citypick__item--active a { background: #e7f0fe; }
.citypick__item--on a { font-weight: 600; }
.citypick__item--all a { color: #6c757d; border-bottom: 1px solid var(--border-gray, #EBEBEB); }
.citypick__empty { padding: .5rem .75rem; font-size: .8125rem; color: #6c757d; }

/* The short list. Rows the server folded stay hidden until the script takes
   over; a heading with nothing under it hides itself through `hidden`. */
.picker__cell--folded { display: none; }
.picker__group[hidden], .picker__cell[hidden] { display: none; }

.picker__expand {
    grid-column: 1 / -1;
    padding: .45rem .5rem;
    border: 0;
    font: inherit;
    font-size: .75rem;
    color: var(--color-primary, #404040);
    background: #fff;
    cursor: pointer;
}
.picker__expand:hover { background: rgba(67, 175, 233, .07); }
.picker__expand::before { content: '▾'; margin-right: .35rem; color: var(--color-blue, #43AFE9); }
.picker__expand[aria-expanded="true"]::before { content: '▴'; }

/* ---- the cabinet: my exchanger ------------------------------------------ */

.exchanger-howto { padding: .9rem 1rem; border-radius: 10px; background: var(--color-light-blue, #E9F3FB); font-size: .9375rem; }
.exchanger-howto ul { margin: .5rem 0 0 1.1rem; }
.exchanger-howto code { font-size: .875rem; }
.exchanger-note__meta { margin-top: .25rem; font-size: .8125rem; color: #6c757d; }
.company-pick { position: relative; }
.company-pick .datalist-wrapper { display: block; }
.company-pick .datalist-wrapper[hidden] { display: none; }
.exchanger-status__facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.exchanger-status__facts dt { color: #6c757d; }
.exchanger-status__facts dd { margin: 0; overflow-wrap: anywhere; }
.exchanger-health__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.exchanger-health__name { font-size: 1.25rem; font-weight: 600; }
.exchanger-health__summary { font-size: 1.0625rem; font-weight: 600; }
.exchanger-health__summary.is-ok { color: var(--color-greenbright, #23AE2D); }
.exchanger-health__summary.is-bad { color: var(--color-orange, #E16D00); }

/* ---- the exchangers list ------------------------------------------------- */

.rates__sort { color: inherit; text-decoration: none; }
.rates__sort--on { color: var(--color-darkblue, #080C56); }
.rates__table--exchangers .rates__amount .rates__num { font-size: 1rem; }
.rates__table--exchangers .rates__unit { text-decoration: none; }
.exchanger-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.exchanger-list__item { padding: 1rem 0; border-bottom: 1px solid var(--border-gray, #EBEBEB); }
.exchanger-list__item p { margin-bottom: .25rem; }
.exchanger-list__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.exchanger-list__name { font-size: 1.125rem; font-weight: 600; }
.exchanger-status { padding: 1rem 0; border-bottom: 1px solid var(--border-gray, #EBEBEB); }

/* You-give amount and the per-row estimate */
.rates__amountbox { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; flex-wrap: wrap; }
.rates__amountbox label { font-size: .9375rem; color: #6c757d; }
.rates__amount-input { width: 11rem; padding: .4rem .6rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 8px; font-size: 1rem; }
.rates__amount-input:focus { outline: none; border-color: var(--color-green, #37CEA5); }
.rates__amount-hint { font-size: .8125rem; color: #6c757d; }
.rates__receive .rates__num { font-weight: 600; }
.rates__verdict { display: block; font-size: .8125rem; margin-top: .15rem; }
.rates__verdict--ok { color: var(--color-greenbright, #23AE2D); }
.rates__verdict--short { color: var(--color-orange, #E16D00); }
.rates__verdict--outside { color: #9aa0a6; }
.rates__row--outside .rates__rate-value,
.rates__row--outside .rates__receive .rates__num { opacity: .45; }

/* Chip filters */
.rates__chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.rates__chip { padding: .3rem .8rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 999px; background: #fff; font-size: .875rem; cursor: pointer; color: var(--color-primary, #404040); }
.rates__chip:hover { border-color: var(--color-green, #37CEA5); }
.rates__chip--on { background: var(--color-green, #37CEA5); border-color: var(--color-green, #37CEA5); color: #fff; }
.rates__chips-note { font-size: .8125rem; color: #6c757d; }

/* Derived stats in the meta line */
.rates__meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rates__found { font-weight: 600; }
.rates__spread { color: var(--color-greenbright, #23AE2D); font-size: .875rem; }
.rates__refresh { border: 1px solid var(--border-gray, #EBEBEB); background: #fff; border-radius: 8px; padding: .2rem .6rem; font-size: .8125rem; cursor: pointer; color: var(--color-primary, #404040); }
.rates__refresh:hover { border-color: var(--color-green, #37CEA5); }
.rates__delta { display: block; font-size: .8125rem; color: var(--color-greenbright, #23AE2D); margin-top: .1rem; }

/* Sort control */
.rates__sort { font-size: .875rem; color: #6c757d; margin-left: auto; }
.rates__sort select { border: 1px solid var(--border-gray, #EBEBEB); border-radius: 8px; padding: .2rem .4rem; background: #fff; font-size: .875rem; color: var(--color-primary, #404040); }

/* Action column and folded details */
.rates__action { text-align: right; white-space: nowrap; }
/* Shrink-wrapped stack: both links start on the same vertical line */
.rates__acts { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .45rem; text-align: left; }
.rates__go { display: inline-block; padding: .35rem .9rem; background: var(--color-darkblue, #080C56); color: #fff; border-radius: 8px; font-size: .875rem; font-weight: 600; }
.rates__go:hover { background: var(--color-darkblue, #080C56); filter: brightness(1.6); color: #fff; }
.rates__toggle { display: block; margin: .3rem 0 0 auto; border: 0; background: none; color: #6c757d; font-size: .8125rem; cursor: pointer; }
.rates__toggle:hover { color: var(--color-primary, #404040); }
.rates__extra { display: none; margin-top: .35rem; font-size: .8125rem; color: #6c757d; }
.rates__extra > span { display: block; }
.rates__row--open .rates__extra { display: block; }

/* Per-group fold buttons span the picker's two columns */
.picker__expand--group { grid-column: 1 / -1; }

/* Review split under the exchanger name */
.rates__votes { display: block; font-size: .75rem; color: #6c757d; }

/* Converter block — geometry per the mock, colors per the brand */
.conv { border: 1px solid var(--border-gray, #EBEBEB); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; background: #fff; }
.conv__grid { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.conv__panel { flex: 1 1 260px; min-width: 240px; }
.conv__label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; margin-bottom: .4rem; }
.conv__select { position: relative; }
.conv__current { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .55rem .75rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 10px; background: #fff; cursor: pointer; font-size: 1rem; color: var(--color-primary, #404040); }
.conv__current:hover, .conv__current[aria-expanded="true"] { border-color: var(--color-green, #37CEA5); }
.conv__chevron::before { content: '▾'; color: #6c757d; }
.conv__current[aria-expanded="true"] .conv__chevron::before { content: '▴'; }
.conv__drop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: .5rem; }
.conv__search { width: 100%; padding: .4rem .6rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 8px; margin-bottom: .4rem; font-size: .9375rem; }
.conv__search:focus { outline: none; border-color: var(--color-green, #37CEA5); }
.conv__list { max-height: 300px; overflow-y: auto; }
.conv__group { font-size: .75rem; font-weight: 600; color: #6c757d; padding: .4rem .5rem .2rem; text-transform: uppercase; letter-spacing: .04em; }
.conv__item { display: flex; justify-content: space-between; gap: .75rem; width: 100%; padding: .35rem .5rem; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; font-size: .9375rem; color: var(--color-primary, #404040); }
.conv__item:hover { background: rgba(55, 206, 165, .08); }
.conv__item--on { background: rgba(55, 206, 165, .15); font-weight: 600; }
.conv__item:disabled { color: #c3c9cf; cursor: default; background: none; }
.conv__item-code { color: #6c757d; font-size: .8125rem; }
.conv__item:disabled .conv__item-code { color: #c3c9cf; }
.conv__amount { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 10px; padding: .1rem .75rem; }
.conv__amount:focus-within { border-color: var(--color-green, #37CEA5); }
.conv__amount-input { flex: 1; border: 0; padding: .45rem 0; font-size: 1rem; min-width: 0; }
.conv__amount-input:focus { outline: none; }
.conv__unit { color: #6c757d; font-size: .875rem; white-space: nowrap; }
.conv__caption { margin-top: .35rem; font-size: .8125rem; color: #6c757d; }
/* The swap wears the mock's face: a solid dark disc with white arrows */
/* Centred on the gap between the currency field and the amount field; the
   exact offset is measured by the script, this is only the no-JS fallback. */
.conv__swap { align-self: flex-start; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-darkblue, #080C56); color: #fff; font-size: 1.25rem; cursor: pointer; margin-top: calc(1.525rem + 2.1rem + 2px + .25rem - 14px); }
.conv__swap:hover { filter: brightness(1.6); }
.conv__actions { display: flex; flex-direction: column; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.conv__refresh { border: 0; background: none; color: var(--color-blue, #43AFE9); font-size: 1rem; cursor: pointer; text-align: center; }
.conv__refresh::first-letter { font-size: 1.15em; }
.conv__refresh:disabled { color: #c3c9cf; cursor: default; }
.conv__chips { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border-gray, #EBEBEB); }
@media (max-width: 767px) {
    .conv__grid { flex-direction: column; }
    /* flex-grow works along the column here and would stretch panels apart */
    .conv__panel { width: 100%; flex: 0 0 auto; min-width: 0; }
    .conv__swap { margin: 0 auto; align-self: center; }
    .conv__actions { width: 100%; margin-top: 0; }
}

/* Card rows per the mock: separate bordered rows, medals, avatars, bars */
.rates__table { border-collapse: separate; border-spacing: 0 10px; }
.rates__table td { border-bottom: 1px solid var(--border-gray, #EBEBEB); border-top: 1px solid var(--border-gray, #EBEBEB); background: #fff; }
.rates__table td:first-child { border-left: 1px solid var(--border-gray, #EBEBEB); border-radius: 12px 0 0 12px; }
.rates__table td:last-child { border-right: 1px solid var(--border-gray, #EBEBEB); border-radius: 0 12px 12px 0; }
.rates__table th { border-bottom: 0; }
.rates__row--best td { border-color: var(--color-green, #37CEA5); }
/* The side borders live on :first/:last-child selectors, whose specificity
   beats `.rates__row--best td` — restate the colour at the same weight. */
.rates__row--best td:first-child { box-shadow: none; border-left-color: var(--color-green, #37CEA5); }
.rates__row--best td:last-child { border-right-color: var(--color-green, #37CEA5); }

.rates__rank { width: 2.5rem; text-align: center; }
.rates__rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-gray, #EBEBEB); color: #6c757d; font-size: .8125rem; font-weight: 600; }
.rates__rank-badge--1 { background: var(--color-green, #37CEA5); border-color: var(--color-green, #37CEA5); color: #fff; }
.rates__rank-badge--2 { background: #f0b429; border-color: #f0b429; color: #fff; }
.rates__rank-badge--3 { background: #e8833a; border-color: #e8833a; color: #fff; }

/* Flex lives on an inner wrapper: display:flex on the td itself would take
   it out of the table model, and its borders would stop lining up with the
   row's. */
.rates__who-wrap { display: flex; align-items: center; gap: .6rem; }
.rates__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 1.05rem; background: #9aa0a6; }
.rates__who { display: block; min-width: 0; }

.rates__bar { display: block; width: 100%; max-width: 140px; height: 6px; border-radius: 3px; background: #eef1f4; margin-top: .3rem; overflow: hidden; }
.rates__bar i { display: block; height: 100%; border-radius: 3px; background: var(--color-green, #37CEA5); }
.rates__bar--short i { background: #dc3545; }

.rates__limit { display: block; white-space: nowrap; font-size: .875rem; }

.rates__rep { white-space: nowrap; }
.rates__rep-score { display: block; font-weight: 600; }
.rates__rep-score--low { color: #dc3545; }
.rates__rep-bar { display: block; width: 90px; height: 6px; border-radius: 3px; background: #dc3545; margin: .25rem 0; overflow: hidden; }
.rates__rep-bar i { display: block; height: 100%; background: var(--color-greenbright, #23AE2D); }

.rates__toggle-arrow::before { content: '▾'; }
.rates__row--open .rates__toggle-arrow::before { content: '▴'; }

@media (max-width: 767px) {
    .rates__rank { display: none !important; }
    .rates__row { border: 1px solid var(--border-gray, #EBEBEB); border-radius: 12px; padding: .75rem; margin-bottom: .6rem; }
    .rates__row td { border: 0 !important; border-radius: 0 !important; }
    .rates__receive, .rates__rep, .rates__action { grid-column: 1 / -1; font-size: .8125rem; }
    .rates__receive::before { content: attr(data-label) ' '; color: #9aa1a9; }
    .rates__rep::before { content: attr(data-label) ' '; color: #9aa1a9; }
    .rates__action { display: flex !important; align-items: center; gap: 1rem; }
    .rates__acts { flex-direction: row; align-items: center; gap: 1rem; }
    .rates__toggle { margin: 0; }
    .rates__row--best { box-shadow: none; border-color: var(--color-green, #37CEA5); padding-left: .75rem; }
}

/* Keep the estimate on one line; the column is narrow */
.rates__receive .rates__num { white-space: nowrap; }
.rates__amount .rates__num { white-space: nowrap; }

/* Reserve coverage colours: red — not enough, yellow — barely enough */
.rates__bar--close i { background: #f0b429; }

/* Reputation cell text lines; an inert exchange button has nowhere to go */
.rates__rep-reviews { display: block; font-size: .8125rem; color: #6c757d; }
.rates__go:not([href]) { background: #eef1f4; color: #9aa0a6; cursor: default; pointer-events: none; }

/* Network badge where the ticker alone is ambiguous (USDT on many chains) */
/* The find button is the exchange button scaled up: same face, same radius,
   same hover — only roomier padding to keep roughly its former size */
.conv__cta { display: inline-block; padding: .8rem 1.4rem; background: var(--color-darkblue, #080C56); color: #fff; border: 0; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.conv__cta:hover { filter: brightness(1.6); }
.conv__cta:disabled { opacity: .5; cursor: default; filter: none; }

.rates__net { display: inline-block; padding: 0 .35rem; border-radius: 6px; background: #eef1f4; color: #6c757d; font-size: .6875rem; line-height: 1.4; vertical-align: middle; }

/* City badge under the name on a direction spanning cities */
.rates__citybadge { display: inline-block; padding: 0 .45rem; border-radius: 6px; background: #eef1f4; color: var(--color-primary, #404040); font-size: .75rem; line-height: 1.6; text-decoration: none; }
.rates__citybadge:hover { background: var(--color-green, #37CEA5); color: #fff; }

/* The receive value and its unit stay on one line */
.rates__receive { white-space: nowrap; }
.rates__receive .rates__delta, .rates__receive .rates__verdict { white-space: normal; }

/* Search placeholders fade while the field is focused and come back on blur */
.picker__search input::placeholder { opacity: 1; transition: opacity .3s ease; }
.picker__search input:focus::placeholder { opacity: .45; }

/* The reputation star is the company card's star: the icon font's glyph */
.rates__rep-score--has::before { content: '\e905'; font-family: 'CriticPlay', sans-serif; font-size: 14px; color: var(--color-blue, #43AFE9); margin-right: .3rem; }
.rates__rep-score--low::before { color: #dc3545; }
.rates__rep-score--low { color: #dc3545; }

/* Sidebar view tabs: table / popular */
.picker__viewtabs { display: flex; gap: .25rem; margin-bottom: .6rem; }
.picker__viewtab { flex: 1; border: 1px solid var(--border-gray, #EBEBEB); background: #fff; border-radius: 8px; padding: .35rem .5rem; font-size: .8125rem; font-weight: 500; color: var(--color-darkblue, #080C56); cursor: pointer; }
.picker__viewtab:hover { border-color: var(--color-green, #37CEA5); }
.picker__viewtab--on { background: var(--color-darkblue, #080C56); border-color: var(--color-darkblue, #080C56); color: #fff; }

/* The meta line per the mock: the leader's quote in a pill, a green live dot */
.rates__leader { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .6rem; border: 1px solid var(--border-gray, #EBEBEB); border-radius: 8px; background: #f6f9fc; font-size: .875rem; }
.rates__leader b { font-weight: 600; }
.rates__leader-spread { color: var(--color-greenbright, #23AE2D); }
.rates__found { font-weight: 500; font-size: .875rem; }
.rates__updated::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-greenbright, #23AE2D); margin-right: .35rem; vertical-align: 1px; }
.rates__updated { font-size: .875rem; color: #6c757d; }
.rates__updated:empty::before { content: none; }

/* The details link under the exchange button: the catalogue card */
.rates__details { font-size: .8125rem; color: #6c757d; }
.rates__details:hover { color: var(--color-primary, #404040); }

/* Currency icons: a coin, a flag or a brand mark, and a letter when the set
   has no file for the code. The flag says which money it is, the corner badge
   says how it moves — a card, cash, a bank, a wallet, a transfer. */
.cur-ico { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; overflow: visible; }
.cur-ico__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cur-ico__letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #9aa0a6; color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1; }
/* A missing file is not a missing currency: colour the letter by group so the
   list still reads as cryptos, banks and cash rather than grey blanks. */
.cur-ico--g-crypto .cur-ico__letter { background: #f0932b; }
.cur-ico--g-bank_card .cur-ico__letter { background: #4a69bd; }
.cur-ico--g-internet_banking .cur-ico__letter { background: #1e6f5c; }
.cur-ico--g-emoney .cur-ico__letter { background: #6c5ce7; }
.cur-ico--g-cash .cur-ico__letter { background: #218c5a; }
.cur-ico--g-transfer .cur-ico__letter { background: #c0603a; }

/* A white flag on a white row needs an edge of its own. */
.cur-ico--flag .cur-ico__img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cur-ico__badge { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-darkblue, #080C56); border: 1.5px solid #fff; background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
.cur-ico__badge--card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.5' y='3' width='15' height='10' rx='1.8' fill='%23fff'/%3E%3Crect x='.5' y='4.8' width='15' height='2.6' fill='%23080C56'/%3E%3Crect x='2.4' y='9.4' width='4.6' height='1.7' rx='.8' fill='%23080C56'/%3E%3C/svg%3E"); }
.cur-ico__badge--cash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='4' width='14' height='8' rx='1.4' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23080C56'/%3E%3C/svg%3E"); }
.cur-ico__badge--bank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15.5 6H.5z' fill='%23fff'/%3E%3Crect x='2.5' y='7' width='2.2' height='5' fill='%23fff'/%3E%3Crect x='6.9' y='7' width='2.2' height='5' fill='%23fff'/%3E%3Crect x='11.3' y='7' width='2.2' height='5' fill='%23fff'/%3E%3Crect x='1' y='13' width='14' height='1.8' fill='%23fff'/%3E%3C/svg%3E"); }
.cur-ico__badge--wallet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='3.5' width='13' height='9.5' rx='2.2' fill='%23fff'/%3E%3Ccircle cx='11.6' cy='8.3' r='1.6' fill='%23080C56'/%3E%3C/svg%3E"); }
.cur-ico__badge--transfer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 6.2h8.2V3l4.8 4.8-4.8 4.8V9.4H1.5z' fill='%23fff'/%3E%3C/svg%3E"); }

/* The two lists the icons live in: the name takes the slack so the ticker
   stays pinned to the right edge, exactly as before the icon appeared. */
.conv__item .cur-ico { width: 28px; height: 28px; margin-right: .1rem; }
.conv__item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__current-ico { display: inline-flex; flex: 0 0 auto; margin-right: .5rem; }
.conv__current-ico:empty { display: none; }
.conv__current-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* The sidebar prints two columns of cells in a narrow rail: the icon shrinks
   with the type, and its badge would be a smudge at that size. */
.picker__cell .cur-ico { width: 16px; height: 16px; margin-right: .1rem; }
.picker__cell .cur-ico__letter { font-size: .5rem; }
.picker__cell .cur-ico__badge { display: none; }
.picker__name { flex: 1 1 auto; }

/* Popular directions: the pair reads as two overlapping coins ahead of the
   words, the way an exchange pair is drawn everywhere. */
.picker__popular a { display: flex; align-items: center; gap: .4rem; }
.picker__pair { display: inline-flex; flex: 0 0 auto; align-items: center; }
.picker__pair .cur-ico { width: 16px; height: 16px; }
.picker__pair .cur-ico + .cur-ico { margin-left: -5px; box-shadow: 0 0 0 1.5px #fff; border-radius: 50%; }
.picker__pair .cur-ico__badge { display: none; }