.offer-grid {
    margin-top: 30px;
}

.list-container {
    position: relative;
}

    .list-container.loading {
        opacity: .5;
        pointer-events: none;
        min-height: 273px;
    }

    .list-container .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;

        display: inline-block;
        width: 3rem;
        height: 3rem;
    }

.list {
    display: grid;
    row-gap: 5px;
}

.grid-list .list {
    row-gap: 0px;
}

.grid-container {
    border-radius: 10px;
    background-color: #f6f6f6;
    border: 1px solid var(--grey-color-border);
    padding: 0.5rem 1.25rem 1.25rem 1.25rem;
}

.grid-list-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr) repeat(2, 0.5fr);
    margin: 0.625rem 0;
    color: white;
    background-color: var(--grey-color-text);
}

.radar-grid .grid-list-header {
    grid-template-columns: repeat(6, 1fr);
}

    .grid-list-header > div {
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.25rem;
    }

        .grid-list-header > div:last-child {
            font-size: 0.8125rem;
        }

        .grid-list-header > div:not(:last-child) {
            border-right: 1px solid var(--grey-color-light-border);
        }

.simple-list-header {
    display: grid;
    font-size: 1.125rem;
}

.ship-list .simple-list-header, .ship-list .list-item {
    grid-template-columns: repeat(2, 2fr) repeat(1, 3fr) repeat(3, 1fr);
}

.user-list .simple-list-header, .user-list .list-item {
    grid-template-columns: repeat(2, 2fr) repeat(3, 1fr);
}

.team-list .simple-list-header, .team-list .list-item {
    grid-template-columns: repeat(1, 5fr) repeat(2, 1fr);
}

.simple-list-header > div {
    display: flex;
    padding: 0.5625rem;
    min-width: 0;
}

.grid-item-wrapper {
    cursor: pointer;
    border: 1px solid var(--grey-color-text);
}

.grid-item {
    display: grid;
    grid-template-columns: repeat(5, 1fr) repeat(2, 0.5fr);
    background-color: white;
    font-size: 0.9375rem;
}

.radar-grid .grid-item {
    grid-template-columns: repeat(6, 1fr);
}

.radar-grid .grid-list-header > div:last-child {
    font-size: 1.25rem;
}

    .grid-item.even {
        background-color: #ededed;
    }

    .grid-item > div {
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.625rem;
        text-align: center;
    }

        .grid-item > div:not(:last-child):not(.loading-col) {
            border-right: 1px solid var(--grey-color-light-border);
        }

.list-item {
    display: grid;
    font-size: 0.875rem;
    border-top: 1px solid var(--grey-color-border);
    background-color: #e5e5e4;
}

    .list-item.even {
        background-color: white;
    }

    .list-item > div {
        min-width: 0;
        display: flex;
        padding: 0.5625rem;
    }

.company-col, .contact-col {
    justify-content: space-between !important;
    gap: 0.625rem;
}

    .company-col > div, .contact-col > div {
        min-width: 0;
    }

        .company-col span, .contact-col span {
            display: block;
            width: 100%;
        }

.grid-text-col {
    display: flex;
    flex-direction: column;
}

    .grid-text-col span {
        display: block;
        width: 100%;
    }

.company-logo {
    height: 50px;
    width: 100%;
    border: 1px solid #d9d9d9;
    font-size: 0.6875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 0.2rem;
}

    .company-logo img {
        max-height: 100%;
    }

.company-web, .contact-messengers {
    flex-shrink: 0;
    padding: 0 0.625rem;
}

    .company-web a.disabled {
        opacity: 0.25;
    }

.contact-phone {
    display: flex;
    flex-direction: column;
    text-align: start;
    margin-left: 0.625rem;
}

.contact-messengers {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loading-col {
    position: relative;
}

.grid-item .icon-arrow-right {
    position: absolute;
    width: auto;
    right: -0.5rem;
    font-size: 1rem;
    color: var(--grey-color-light-border);
}

/* Element selector and two-class descendants beat the cells' own `… span { display: block;
   width: 100% }`, which would otherwise stretch the chip out of its circle. */
span.gated-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--grey-color-border);
    border-radius: 50%;
    background-color: white;
    color: var(--secondary-color);
    cursor: pointer;
}

    .gated-chip:hover {
        border-color: var(--secondary-color);
        background-color: #f7eceb;
    }

    /* The generic overlay claims not-allowed; this click does lead somewhere. */
    .gated-chip.no-license-trigger::after {
        cursor: pointer;
    }

    .gated-chip .k-icon {
        display: inline-flex;
        width: auto;
        font-size: 0.875rem;
    }

    .contact-phone span.gated-chip {
        align-self: flex-start;
    }

.gated-notice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--grey-color-border);
    border-left: 4px solid var(--secondary-color);
    background-color: white;
    font-size: 0.875rem;
}

    .gated-notice .k-icon {
        flex-shrink: 0;
        color: var(--secondary-color);
        font-size: 1.125rem;
    }

    .gated-notice .gated-notice-text {
        flex: 1 1 auto;
    }

    .gated-notice .bl-btn {
        flex-shrink: 0;
    }

.filter-form label {
    white-space: nowrap;
}

.search-grid-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #dddddd;
    padding: 7px 1.25rem;
}

    .search-grid-row button {
        width: 40px;
        padding: 0;
        font-size: 1.375rem;
        border-radius: 3px;
    }

.search-wrapper {
    width: 390px;
}

    .search-wrapper button {
        --bs-btn-border-color: var(--grey-color-border);
        --bs-btn-bg: white;
    }

.sort-wrapper {
    display: flex;
    gap: 3.25rem;
}

    .sort-wrapper > div {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.filter-grid-row {
    background-color: var(--grey-color-light-border);
}

    .filter-grid-row > div {
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .filter-grid-row input, .filter-grid-row select, .filter-grid-row .k-input-solid {
        border-color: var(--grey-color-border);
    }

.filter-grid-container > div {
    display: flex;
    gap: 10px;
}

    .filter-grid-container > div > div {
        width: 175px;
    }

.offer-grid nav {
    margin-top: 0.625rem;
}

.page-item {
    min-width: 40px;
    text-align: center;
}

.page-link {
    font-size: 1.125rem;
    color: var(--grey-color-text);
}

    .page-link:hover {
        color: var(--grey-color-text);
    }

    .active > .page-link, .page-link.active {
        color: white;
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

.offer-grid .no-data {
    text-align: center;
    line-height: 100px;
    color: var(--grey-color-text);
}

.filter-dd {
    width: 100%;
    font-size: 0.875rem;
    color: white;
    background-color: rgb(from var(--primary-color) r g b / 95%);
}

    .filter-dd a {
        color: white;
    }

.view-count-badge {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    padding: 0.25em 0.55em;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: white;
    background-color: var(--grey-color);
    border-radius: 50rem;
}

.details-hover {
    display: none;
    color: white;
    background-color: var(--grey-color-text);
    text-align: center;
    line-height: 20px;
}

.grid-item-details.is-open + .details-hover {
    display: block;
}

.grid-item-wrapper:hover .details-hover {
    display: block;
}

.details-hover span {
    transition: transform 0.2s ease;
}

.details-hover.rotated span {
    transform: rotate(180deg);
}

/* Slide-down via grid rows instead of a max-height cap: 1fr follows the real content
   height, so nothing gets cut off and the panel keeps growing when an inner collapse
   (the notes) opens. A fixed max-height clipped silently, without a scrollbar. */
.grid-item-details {
    background-color: var(--grey-color-light-border);
    cursor: auto;
    font-size: 0.875rem;

    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    transition: grid-template-rows 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}

    .grid-item-details.is-open {
        grid-template-rows: minmax(0, 1fr);
        opacity: 1;
    }

    /* minmax(0, …) is load-bearing: an fr track takes min-content as its automatic
       minimum, and the wrapper's 3rem of padding survives min-height:0 (which only
       caps the content box), so a plain 0fr bottoms out at 48px instead of closing.
       Both states use the same notation, otherwise the two values do not interpolate
       and the transition snaps. */
    .grid-item-details > * {
        min-height: 0;
    }

.grid-details-wrapper {
    padding: 1.125rem 1.875rem 1.875rem 1.875rem;
}

/* Pushed to the far right of the action bar so it lines up with the grid's status
   column, which it acts on. Reset on mobile, where the bar is a plain left-to-right run. */
.offer-actions-status {
    margin-left: auto;
}

.details-col {
    border-bottom: 1px solid var(--grey-color);
    padding: 0.75rem 0;
}

/* One grey no longer serves both roles: the label steps back, the value carries the
   weight. Only-child spans are standalone markers, not labels, and keep their colour. */
.details-cell > span:first-child:not(:only-child) {
    color: #767676;
}

.details-cell > span:not(:first-child):not(.gated-chip) {
    color: var(--grey-color-dark);
    font-weight: 600;
}

/* Same card as the sections above it; full width - the label:value grid needs the room. */
.offer-data-wrapper {
    background-color: white;
    border: 1px solid var(--grey-color-text);
    border-radius: 10px;
    padding: 0.25rem 1.5rem;
}

    /* The card's edge closes the grid - a rule under the last row would double it. */
    .offer-data-wrapper > .row:last-child .details-col {
        border-bottom: 0;
    }

/* A bounded card like the ship-details wrapper below it — loose items floating on the grey
   panel never compose at full width. fit-content keeps it a business card, not a banner. */
.details-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: fit-content;
    max-width: 100%;
    background-color: white;
    border: 1px solid var(--grey-color-text);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
}

.details-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.details-header-company {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

    /* Name and globe are one target: with a website the whole line is the link. */
    .details-header-company a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

/* Stands in for a missing photo on Preview. Framed like .details-photo so the slot keeps
   its size, but contain — a wide text logo must not be cropped to fill the box. */
.details-logo {
    width: 120px;
    height: 80px;
    object-fit: contain;
    background-color: white;
    border: 1px solid var(--grey-color-light-border);
    border-radius: var(--border-radius);
    padding: 0.25rem;
}

/* The box's picture on a team offer: framed, because a company photo cropped into the
   round portrait mask loses its motif. */
.details-photo {
    width: 120px;
    height: 80px;
    object-fit: cover;
    background-color: white;
    border: 1px solid var(--grey-color-light-border);
    border-radius: var(--border-radius);
    padding: 0.25rem;
    cursor: pointer;
}

    /* The placeholder swapped in by site.js has no popup behind it — and must not be
       cover-cropped like a real photo. */
    .details-photo.media-fallback {
        cursor: default;
        object-fit: contain;
    }

.details-portrait {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

    .grid-item-details h3 {
        color: var(--grey-color);
        margin: 0;
    }

.grid-item-details .ship-tabs {
    border-color: var(--grey-color-text);
    border-width: 0 0 1px 0;
}

.ship-details-wrapper {
    background-color: white;
    border: 1px solid var(--grey-color-text);
    border-radius: 10px;
}

    .ship-details-wrapper .tab-content {
        background-color: white;
        border-radius: 10px;
        padding: 1.25rem;
    }

    .ship-details-wrapper table {
        width: 100%;
        table-layout: fixed;
    }

        .ship-details-wrapper table tr td {
            padding: 0.125rem 0.25rem;
            overflow: hidden;
        }

        .ship-details-wrapper table tr td:first-child {
            text-align: end;
            border-right: 1px solid #535353;
        }

        /* Same label/value split as the offer-data card: label steps back, value carries
           the weight. Only-child cells are full-width content, not labels. */
        .ship-details-wrapper table tr td:first-child:not(:only-child) {
            color: #767676;
        }

        .ship-details-wrapper table tr td:not(:first-child) {
            color: var(--grey-color-dark);
            font-weight: 600;
        }

.region-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.region-list-item {
    display: inline-flex;
    align-items: center;
}

.region-list-item:not(:first-child)::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0 12px;
    border-radius: 50%;
    background-color: currentColor;
}

#ship-filter label, #HoldsQuantityOperator {
    font-size: 0.8125rem;
}

#ship-filter .input-group .form-select {
    padding-right: 2rem;
    min-width: 0;
}

/* Same card language as the provider header — on a freight offer that is the only wrapper above it. */
.offer-photo-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    max-width: 100%;
    background-color: white;
    border: 1px solid var(--grey-color-text);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
}

.offer-photo {
    max-width: 100%;
    max-height: 110px;
    height: auto;
    cursor: pointer;
}

    /* The placeholder swapped in by site.js has no popup behind it. */
    .offer-photo.media-fallback {
        cursor: default;
    }

.license-list {
    font-size: 0.875rem;
}

    .license-list .list {
        gap: 1.875rem;
    }

        .license-list .list .row {
            margin-bottom: 0.25rem;
        }

/* Ink darkened from #997d08 to clear AA on the sand panel (2.7:1 -> 4.8:1). Same hue —
   the yellow identity stays, only the luminance gap grows. */
.notes-wrapper {
    color: #6b5700;
    background-color: #e3d6a3;
    border: 1px solid #6b5700;
    border-radius: 10px;
    margin-top: 1rem;
}

/* The whole header strip is the collapse trigger, so the count badge opens the panel too. */
.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    text-decoration: none;
    cursor: pointer;
}

/* Beats the global `a` / `a:hover` colour — the header is an anchor. */
.notes-wrapper .notes-header,
.notes-wrapper .notes-header:hover {
    color: #6b5700;
}

    .notes-header .title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        font-size: 1.125rem;
        padding-left: 0.625rem;
    }

    /* Dark glyph, not white: white on #ffc107 measures 1.6:1, dark grey 6.8:1. The white
       carets in _components.css sit on dark backgrounds — that fix does not transfer here. */
    .notes-header .btn-collapse {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: #ffc107;
        font-size: 0.625rem;
        color: var(--grey-color-dark);
    }

    /* Bootstrap puts `collapsed` on the trigger, which is the header now — not the caret. */
    .notes-header.collapsed .btn-collapse {
        transform: rotate(180deg);
    }

    .notes-header:hover .btn-collapse {
        background-color: #ffca2c;
    }

/* Brand red, shown only when notes exist. A single digit stays a true circle via the
   square min-width/height; from 10 up the box grows into a pill. Vertical alignment
   needs no nudge — the font's metrics are corrected in _roots.css. */
.notes-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: white;
    background-color: var(--secondary-color);
    border-radius: 50rem;
}

.notes-wrapper .notes-container {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.notes-container label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.notes-container textarea {
    margin-bottom: 0.5rem;
    border-radius: 10px;
    border-width: 0;
}

/* No inner scroll — the list grows with its notes and the details panel takes the height. */
.note-list {
    border: 1px solid #6b5700;
    border-width: 1px 0;
    margin: 1.25rem 0;
    padding: 1.25rem 0;
}

/* fit-content alone swings both ways: a one-word note shrinks to a stamp in a very wide
   panel, a long one runs the full width and produces unreadable line lengths. The floor
   keeps short notes card-shaped, the ceiling holds text near the readable measure and
   never exceeds the container on narrow screens. */
.note-item {
    width: fit-content;
    min-width: min(14rem, 100%);
    max-width: min(60ch, 100%);
    background-color: white;
    border-radius: 10px;
    color: var(--grey-color);
    padding: 0.625rem;
}

    .note-item + .note-item {
        margin-top: 0.625rem;
    }

.note-item-info {
    font-size: 0.6875rem;
}

.note-item-text {
    font-size: 1rem;
}

@media (max-width: 576px) {
    #freightoffer-grid, #shipoffer-grid {
        margin-top: 10px;
    }
}

@media (min-width: 576px) {
    .filter-dd {
        width: 480px;
    }

    #ship-filter {
        width: 550px;
    }

    .ship-details-wrapper table tr td {
        padding: 0.125rem 1.875rem;
    }
}

@media (min-width: 768px) {
    .details-col + .details-col .details-cell {
        border-left: 1px solid var(--grey-color);
        padding-left: 1rem;
    }

    #ship-filter {
        width: 600px;
    }
}

@media (max-width: 992px) {
    .search-grid-row, .filter-grid-row > div, .filter-grid-container > div {
        flex-wrap: wrap;
    }

        .search-grid-row > div {
            width: 100%;
        }

    .sort-wrapper {
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
    }

    .filter-grid-container > div > div {
        max-width: none;
        width: 100%!important;
    }
}

@media (max-width: 1200px) {
    .filter-grid-container > div > div {
        width: 135px;
    }
}

/* Fixed so the pill is in view wherever the user has scrolled; the full-width strip must
   not swallow clicks beside the pill. */
.new-offers-banner {
    position: fixed;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Unregistered custom properties do not interpolate — the sweep would jump 0 to 360.
   The plain declaration below is the fallback: without @property the var() is invalid at
   computed-value time and takes the pill's whole background with it. */
@property --new-offers-sweep-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

/* Solid white carrying its own contrast (dark text on a light fill): the page beneath
   alternates five surface colours, so the pill cannot borrow contrast from any. */
.new-offers-pill {
    /* Deliberately brighter than --secondary-color — the signal has to read as "live".
       Inherited by radar, sweep and count flash, so this is the only place to change it. */
    --new-offers-signal: #ff3b30;

    --new-offers-sweep-angle: 0deg;
    --new-offers-sweep-duration: 4s;
    --new-offers-ring-width: 2px;
    /* Centre of both sweeps: left padding + half the radar + the ring itself. */
    --new-offers-ring-centre: calc(1rem + 0.875rem + var(--new-offers-ring-width));

    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    color: var(--grey-color-dark);
    border: var(--new-offers-ring-width) solid transparent;
    border-radius: 50rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);

    /* Centre, stops and colour all come from .new-offers-radar::before — the border only
       reads as that beam carried on if every one of them matches; a shared duration alone
       just makes two sweeps turn at the same speed. Red late, or the midtones show. */
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--new-offers-sweep-angle) at var(--new-offers-ring-centre) 50%,
            var(--primary-color) 0deg,
            var(--primary-color) 250deg,
            color-mix(in srgb, var(--new-offers-signal) 25%, var(--primary-color)) 305deg,
            color-mix(in srgb, var(--new-offers-signal) 70%, var(--primary-color)) 342deg,
            var(--new-offers-signal) 360deg) border-box;

    animation:
        new-offers-drop-in 0.25s ease,
        new-offers-sweep var(--new-offers-sweep-duration) linear infinite;
}

    /* Two pixels of ring carry too little colour to catch the eye. The negative z-index
       lands behind the pill rather than behind the page because .new-offers-banner is
       already a stacking context. */
    .new-offers-pill::after {
        content: "";
        position: absolute;
        inset: -3px;
        z-index: -1;
        border-radius: inherit;
        background: conic-gradient(from var(--new-offers-sweep-angle) at calc(var(--new-offers-ring-centre) + 3px) 50%,
            transparent 0deg,
            transparent 285deg,
            color-mix(in srgb, var(--new-offers-signal) 70%, transparent) 360deg);
        filter: blur(6px);
        opacity: 0.85;
    }

/* Radar screen drawn in CSS: an outer ring, a centre blip and a sweeping beam. */
.new-offers-radar {
    flex: 0 0 auto;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--grey-color);
    background:
        radial-gradient(circle, var(--new-offers-signal) 0 2.5px, transparent 3px),
        radial-gradient(circle, transparent 0 8px, var(--grey-color-border) 8px 9px, transparent 9.5px);
}

    .new-offers-radar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(transparent 0deg, transparent 250deg, color-mix(in srgb, var(--new-offers-signal) 60%, transparent) 360deg);
        animation: new-offers-radar-sweep var(--new-offers-sweep-duration) linear infinite;
    }

.new-offers-text {
    font-weight: 600;
}

    .new-offers-text.flash {
        animation: new-offers-count-flash 0.5s ease;
    }

@keyframes new-offers-count-flash {
    30% {
        color: var(--new-offers-signal);
        transform: scale(1.08);
    }
}

.new-offers-pill .new-offers-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.new-offers-pill .btn-close {
    --bs-btn-close-bg: none;
    width: auto;
    height: auto;
    font-size: 1rem;
    color: var(--grey-color);
    opacity: 1;
}

    .new-offers-pill .btn-close:hover {
        color: var(--grey-color-dark);
    }

@keyframes new-offers-drop-in {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }
}

@keyframes new-offers-radar-sweep {
    to {
        transform: rotate(360deg);
    }
}

@keyframes new-offers-sweep {
    to {
        --new-offers-sweep-angle: 360deg;
    }
}

/* Both sweeps stop where they stand — the gradient stays, so the pill keeps its ring
   rather than falling back to a bare border. */
@media (prefers-reduced-motion: reduce) {
    .new-offers-pill,
    .new-offers-radar::before,
    .new-offers-text.flash {
        animation: none;
    }
}