/* ==========================================================================
 * Price check dialog (#negotiate-modal, .ffwp) - "Price too high?"
 *
 * One dialog for every place a repair is priced: the product page and the
 * service list on the model pages (phones, tablets, computers). Markup comes
 * from fixfactor_price_check_modal() in fixfactor-core price-check.php,
 * behaviour from assets/js/price-check.js. The dialog itself - sheet on a
 * phone, centred panel above, head, close, scrolling body - is the shared
 * shell in dialog.css; this file widens it and lays out its body. Model
 * pages do not load single-product.css, so the form fields live here too.
 *
 * Spacing is the v4 scale only: label to field 8, field to field 24, group
 * label to chips 12, title to context line 8, context to lead 16, header to
 * body 32, panel padding 32 (16 on a phone). No one-sided decorative rules.
 * ========================================================================== */

/* --- form fields: 48px, labels above, focus ring (v4 forms spec) --- */
#negotiate-modal .fixfactor-content-area .wpforms-field input,
#negotiate-modal .fixfactor-content-area .wpforms-field select,
#negotiate-modal .fixfactor-content-area .wpforms-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 14px 12px;
    border: 1.5px solid var(--content-secondary);
    border-radius: 10px;
    background: var(--surface);
    /* 16px or more: below that iOS Safari zooms the page when a field is focused. */
    font-size: max(16px, 1rem);
    font-family: inherit;
    line-height: 1.4;
    color: var(--content);
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

#negotiate-modal .fixfactor-content-area .wpforms-field input::placeholder,
#negotiate-modal .fixfactor-content-area .wpforms-field textarea::placeholder {
    color: var(--content-secondary);
    opacity: 1;
}

#negotiate-modal .fixfactor-content-area .wpforms-field input:focus,
#negotiate-modal .fixfactor-content-area .wpforms-field select:focus,
#negotiate-modal .fixfactor-content-area .wpforms-field textarea:focus {
    outline: none;
    border-color: var(--action);
    box-shadow: inset 0 0 0 2px var(--accent);
}

#negotiate-modal .fixfactor-content-area .wpforms-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background: var(--action);
    color: var(--on-action);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#negotiate-modal .fixfactor-content-area .wpforms-submit:hover {
    background: var(--action-hover);
}

/* --- the panel: the shared shell, wider, with the brand tint behind its top.
   On the dialog rather than the head, so the tint runs on under the lead
   exactly as it did when the lead sat in the head. --- */
#negotiate-modal {
    background: linear-gradient(180deg, light-dark(#eef7f9, #0f2a31) 0, var(--surface) 280px) var(--surface);
}

@media (min-width: 769px) {
    #negotiate-modal { width: min(60rem, calc(100% - 40px)); }

    .ffwp .ffwp-head .ff-dialog__title {
        padding-right: 64px;
        font-size: 2rem;
        line-height: 1.1;
    }
}

/* One quiet caption: the service and its price in one style. */
.ffwp .ffwp-ctx {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--action);
}

.ffwp .ffwp-lead {
    grid-column: 1 / -1;
    margin: 0;
    max-width: 36rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--content-body);
}

/* --- body: the form, and beside it what the price pays for --- */
.ffwp .ffwp-body {
    display: grid;
    gap: 32px;
}

@media (min-width: 900px) {
    .ffwp .ffwp-body {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* --- the WPForms body, dressed to match --- */
.ffwp .ffwp-form .wpforms-container { margin: 0; }
.ffwp .ffwp-form .wpforms-head-container { display: none; }

.ffwp .ffwp-form .wpforms-field-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
}

/* Id scope: the theme's form rules add a 16px bottom margin to every field,
   which would stack on the grid gap. */
#negotiate-modal .ffwp-form .wpforms-field {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
}

/* Name and email share a row where there is room. */
#negotiate-modal .ffwp-form .wpforms-field.ff-half { grid-column: auto; }

.ffwp .ffwp-form .wpforms-field-label,
.ffwp .ffwp-form .ff-chips legend {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content);
}

.ffwp .ffwp-form .ff-chips legend { margin-bottom: 12px; }
.ffwp .ffwp-form .ff-chips fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.ffwp .ffwp-form .wpforms-required-label { display: none; }

/* Inputs, textareas and their focus state come from the theme's id-scoped
   .fixfactor-content-area rules near the top of this file. */
#negotiate-modal .ffwp-form .wpforms-field textarea {
    min-height: 73px; /* Two lines. */
    height: 73px;
    resize: vertical;
}

/* The figure: "Our price" and "Your price" side by side at every width, on the same
   two columns as name and email below, so the customer compares without looking away.
   The pound sign shares the input's grid cell; the comparison line and a WPForms error
   drop to the rows under "Your price". */
#negotiate-modal .ffwp-form .ffwp-price {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
}

#negotiate-modal .ffwp-price > * { grid-column: 2; }
#negotiate-modal .ffwp-price > .ffwp-our { display: contents; }
#negotiate-modal .ffwp-price > input,
#negotiate-modal .ffwp-price > .ffwp-cur { grid-row: 2; }
#negotiate-modal .ffwp-price > .ffwp-delta { grid-row: 3; }
/* Not the input: WPForms gives it the same class when it fails. */
#negotiate-modal .ffwp-price > .wpforms-error:not(input) { grid-row: 4; margin-top: 0; }

#negotiate-modal .ffwp-form .ffwp-price > .wpforms-field-label { margin: 0; }

.ffwp .ffwp-our-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content);
}

.ffwp .ffwp-our-value {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--surface-fill);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--content);
}

#negotiate-modal .ffwp-price > .ffwp-cur {
    z-index: 1;
    margin-left: 14px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--content-secondary);
    pointer-events: none;
}

#negotiate-modal .ffwp-form .ffwp-price > input {
    padding-left: 32px;
    font-size: 1.125rem;
    font-weight: 700;
}

.ffwp .ffwp-delta {
    justify-self: start;
    margin: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: light-dark(#e6f4f7, #0d3a44);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--action);
}

/* Amber for a long way below, or above, ours; grey for the same price. */
.ffwp .ffwp-delta[data-state="warn"] {
    background: color-mix(in srgb, var(--accent-warm) 22%, var(--surface));
    color: var(--content);
}

.ffwp .ffwp-delta[data-state="same"] {
    background: var(--surface-fill);
    color: var(--content-body);
}

.ffwp .ffwp-delta[hidden] { display: none; }

/* Next to the two questions the customer can leave out. */
.ffwp .ffwp-optional {
    margin-left: 6px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--content-secondary);
}

/* Chrome draws the number spinner from its own pseudo-element, which the
   theme's appearance: none does not reach. */
#negotiate-modal input[type="number"]::-webkit-outer-spin-button,
#negotiate-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#negotiate-modal input[type="number"] {
    -moz-appearance: textfield;
}

/* Checkbox list as chips: the box goes, the label becomes the control.
   Scoped to the dialog's id: WPForms lays choice lists out as a grid of
   full-width rows and this has to win on specificity. */
#negotiate-modal .ff-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none;
}

#negotiate-modal .ff-chips li {
    position: relative;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Covers its own chip, so the whole chip is the hit target. */
#negotiate-modal .ff-chips input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

#negotiate-modal .ff-chips label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 0 14px;
    background: var(--surface);
    /* Quieter than the fields (Marcin, 3 Nov 2026): a hairline, smaller type.
       They are hints for the note below, not the main question. */
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--content);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#negotiate-modal .ff-chips li:hover label { border-color: var(--border-active); }

#negotiate-modal .ff-chips input:checked + label {
    background: light-dark(#e6f4f7, #0d3a44);
    border-color: var(--action);
    color: var(--action);
    font-weight: 600;
}

/* The tick, drawn as a mask so it takes the label's colour in both schemes. */
#negotiate-modal .ff-chips input:checked + label::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: -4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#negotiate-modal .ff-chips input:focus-visible + label {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* The form's own button stays for WPForms; the footer's is the one on show. */
#negotiate-modal .ffwp-form .wpforms-submit-container {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* --- the footer: stays in view while the body scrolls --- */
.ffwp .ffwp-foot {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-neutral);
    background: var(--surface);
}

.ffwp .ffwp-foot[hidden] { display: none; }

.ffwp .ffwp-reply {
    order: 2;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
    color: var(--content-secondary);
}

.ffwp .ffwp-send {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: var(--action);
    color: var(--on-action);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ffwp .ffwp-send:hover { background: var(--action-hover); }
.ffwp .ffwp-send:disabled { opacity: 0.6; cursor: default; }
.ffwp .ffwp-send:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (min-width: 481px) {
    .ffwp .ffwp-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .ffwp .ffwp-reply { order: 0; font-size: 0.875rem; text-align: left; }
}

@media (min-width: 769px) {
    .ffwp .ffwp-foot { padding: 12px 32px; }
}

/* --- what the price pays for, and Klarna as the other way to carry it --- */
.ffwp .ffwp-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ffwp .ffwp-why {
    padding: 20px 24px;
    background: var(--surface-alt);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

.ffwp .ffwp-why summary {
    position: relative;
    display: block;
    padding-right: 24px;
    list-style: none;
    cursor: pointer;
}

.ffwp .ffwp-why summary::-webkit-details-marker { display: none; }

.ffwp .ffwp-why summary::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--action);
    border-bottom: 2px solid var(--action);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.ffwp .ffwp-why[open] summary::after {
    top: 9px;
    transform: rotate(-135deg);
}

.ffwp .ffwp-why h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--content);
}

@media (min-width: 900px) {
    /* Beside the form it is simply open. */
    .ffwp .ffwp-why summary { padding-right: 0; cursor: default; pointer-events: none; }
    .ffwp .ffwp-why summary::after { display: none; }
}

.ffwp .ffwp-rows {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.ffwp .ffwp-rows li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    align-items: baseline;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
}

.ffwp .ffwp-rows li:last-child { padding-bottom: 0; }

.ffwp .ffwp-nm { font-weight: 600; color: var(--content); }
.ffwp .ffwp-amt { font-weight: 700; color: var(--content); }

.ffwp .ffwp-note {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--content-secondary);
}

.ffwp .ffwp-split {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--content-body);
}

/* The brand's own badge, restated here: model pages do not load the product
   stylesheet that draws it under the price. */
.ffwp .ffwp-split .payment-badge.klarna {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 20px;
    margin-top: 1px;
    padding: 0 7px;
    border-radius: 2.5px;
    background: #ffa8cd;
    color: #0b051d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* --- phone --- */
@media (max-width: 768px) {
    .ffwp .ffwp-body { gap: 24px; }

    #negotiate-modal .ffwp-form .wpforms-field.ff-half { grid-column: 1 / -1; }

    /* Compact chips: three rows instead of five. The hit area keeps 44px by
       reaching 5px past the chip above and below. */
    #negotiate-modal .ff-chips ul { gap: 6px; }
    #negotiate-modal .ff-chips label {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.84rem;
    }
    #negotiate-modal .ff-chips input[type="checkbox"] { inset: -5px 0; height: auto; }
}

/* --- the trigger on the model pages: right above the action buttons ---
   The same quiet underlined question as on the product page
   (single-product.css, .fixfactor-negotiate-btn), in the same place: after
   the choices, just above the button that pays. Closer to the buttons (12px)
   than to the choices above (20px), so it reads with them. No fill and no
   border: a fill or an outline made it a third button over the two real
   ones. */
.ff-price-check {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    margin: 20px 0 0;
    padding: 7px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--content);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 44px to tap, 30px to see. */
.ff-price-check::before {
    content: "";
    position: absolute;
    inset: -7px 0;
}

.ff-price-check:hover { color: var(--action); }

.ff-price-check:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* With the price (Negotiations > Settings): on the closed row, or only once the
   repair is open, in one of three looks. Clicking it opens the dialog and leaves the
   row as it is. The label sits under the price, on the line of the time tag. */
.ffd-service-head,
.fft-service-head,
.ffc-service-head { position: relative; }

.ff-price-check--price {
    position: absolute;
    right: 1.4rem;
    bottom: 1rem;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--accent-warm);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 45px to tap. */
.ff-price-check--price::before { inset: -12px 0; }

/* Solid: brand yellow with its ink, the same pair in both schemes (14.4:1). */
.ff-price-check--solid {
    background: var(--accent-warm);
    color: var(--on-warm);
}

.ff-price-check--solid:hover {
    background: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    color: var(--on-warm);
}

/* Pale: a step smaller than the time tag. */
.ff-price-check--soft {
    bottom: 17px;
    padding: 1px 7px;
    background: var(--surface-warm);
    color: var(--content);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ff-price-check--soft:hover {
    background: var(--accent-warm);
    color: var(--on-warm);
}

/* Outline: a brand yellow frame on the surface, with dark text at medium weight, so the
   label stays quiet next to the price and still reads as something to press. */
.ff-price-check--outline {
    background: var(--surface);
    color: var(--content);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.ff-price-check--outline:hover {
    background: var(--surface-warm);
    color: var(--content);
}

/* Underlined: plain black text, centred on the time tag's line, its right edge on the price's. */
.ff-price-check--link {
    bottom: 17px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--content);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ff-price-check--link:hover { color: var(--action); }

/* The product page button wears the same looks; underlined is its own default there.
   Its place stays as it is; the id and second class outweigh that default. */
#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-neg-tag {
    position: relative;
    padding: 2px 8px;
    border: 1px solid var(--accent-warm);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 45px to tap. */
#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-neg-tag::before {
    content: "";
    position: absolute;
    inset: -12px 0;
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--solid {
    background: var(--accent-warm);
    color: var(--on-warm);
    font-weight: 700;
    letter-spacing: 0.01em;
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--solid:hover {
    background: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    color: var(--on-warm);
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--soft {
    padding: 1px 7px;
    background: var(--surface-warm);
    color: var(--content);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--soft:hover {
    background: var(--accent-warm);
    color: var(--on-warm);
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--outline {
    background: var(--surface);
    color: var(--content);
    font-weight: 500;
    letter-spacing: 0.02em;
}

#ff-sp.ffc-layout .fixfactor-negotiate-btn.ff-price-check--outline:hover {
    background: var(--surface-warm);
    color: var(--content);
}

.ff-price-check--on-open { display: none; }

.ffd-service.open .ff-price-check--on-open,
.fft-service.open .ff-price-check--on-open,
.ffc-service.open .ff-price-check--on-open { display: flex; }

/* A price with the label under it takes the title's line, to leave the label room.
   A row without the label (fixed price, Get a Quote) stays centred on the chevron. */
.ff-neg-list .ffd-service.has-negotiate .ffd-service-price,
.ff-neg-list .fft-service.has-negotiate .fft-service-price,
.ff-neg-list .ffc-service.has-negotiate .ffc-service-price,
.ffd-service.open.has-negotiate .ffd-service-price,
.fft-service.open.has-negotiate .fft-service-price,
.ffc-service.open.has-negotiate .ffc-service-price { align-self: flex-start; line-height: 1.3; }

@media (min-width: 481px) {
    /* Past the chevron: its 16px and 1rem margin. */
    .ff-price-check--price { right: calc(1.4rem + 16px + 1rem); }
}

/* Beside the price: no room for it on narrow screens, where it stays under the price. */
@media (max-width: 767px) {
    .ff-neg-beside-list .ffd-service.has-negotiate .ffd-service-price,
    .ff-neg-beside-list .fft-service.has-negotiate .fft-service-price,
    .ff-neg-beside-list .ffc-service.has-negotiate .ffc-service-price { align-self: flex-start; line-height: 1.3; }
}

@media (min-width: 768px) {
    .ff-neg-beside .ff-price-check--price {
        right: calc(1.4rem + 16px + 1rem + var(--ff-neg-col, 128px)); /* Past the price column. */
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    /* One price column per list keeps the labels in one line. price-check.js sets its width
       to the widest price with a label on that list, plus the template's 16px left padding
       as the gap to the label. Without the script: 128px.
       The price stays centred in the row. */
    .ff-neg-beside .ffd-service.has-negotiate .ffd-service-price,
    .ff-neg-beside .fft-service.has-negotiate .fft-service-price,
    .ff-neg-beside .ffc-service.has-negotiate .ffc-service-price {
        box-sizing: border-box;
        min-width: var(--ff-neg-col, 128px);
        text-align: right;
        align-self: auto;
        line-height: inherit;
    }
}

#ff-dm .ff-price-check + .ffd-service-ctas,
#ff-dt .ff-price-check + .fft-service-ctas,
#ff-dc .ff-price-check + .ffc-service-ctas { margin-top: 12px; }

/* --- an agreed price on the service page ---
   Set by fixfactor-core negotiations.php when the customer arrives from the
   link in a negotiation e-mail: a green line above the price, and the price
   itself shown as ours struck through beside the agreed one. */
.ffn-note {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--status-success);
    border-radius: 10px;
    background: var(--status-success-bg);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--content);
}

.ffn-note b { color: var(--status-success); }

.ffn-note.is-expired {
    border-color: var(--border-neutral);
    background: var(--surface-alt);
}

.ffn-note.is-expired b { color: var(--content); }

#current-price .ffc-was {
    margin-right: 0.15em;
    font-size: 0.55em;
    font-weight: 700;
    color: var(--content-secondary);
    text-decoration-thickness: 2px;
}

#current-price .ffc-agreed { color: var(--status-success); }