/*
 * RevTrack's own parts of the checkout: the office / locker picker, the
 * offers and the rows of its shipping methods. Neutral by design: every
 * colour is mixed from the store's own text colour, so the parts sit in any
 * theme, light or dark, in the theme's own font. A store may set one accent
 * colour in RevTrack (--revtrack-accent); without it the accent is the text
 * colour itself.
 */

#revtrack-pickup-fields,
#revtrack-offers,
#shipping_method {
    --rt-accent: var(--revtrack-accent, currentColor);
    --rt-line: color-mix(in srgb, currentColor 14%, transparent);
    --rt-line-strong: color-mix(in srgb, currentColor 32%, transparent);
    --rt-fill: color-mix(in srgb, currentColor 3%, transparent);
    --rt-muted: color-mix(in srgb, currentColor 62%, transparent);
    --rt-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* The office / locker picker and the delivery note                    */
/* ------------------------------------------------------------------ */

#revtrack-pickup-fields {
    margin-block: 1.25rem;
}

#revtrack-pickup-fields .revtrack-pickup-field {
    display: none;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--rt-line);
    border-radius: var(--rt-radius);
    background: var(--rt-fill);
}

#revtrack-pickup-fields .revtrack-pickup-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.35;
}

/* A map pin before "choose an office", a pencil before the delivery note. */
#revtrack-pickup-fields .revtrack-pickup-label::before {
    content: "";
    flex: none;
    width: 1.125em;
    height: 1.125em;
    background: var(--rt-accent);
    -webkit-mask: var(--rt-icon) center / contain no-repeat;
    mask: var(--rt-icon) center / contain no-repeat;
    --rt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

#revtrack-pickup-fields .revtrack-pickup-field:has(.revtrack-pickup-note) .revtrack-pickup-label::before {
    --rt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

#revtrack-pickup-fields .revtrack-pickup-label .required {
    margin-inline-start: -0.25rem;
    color: #c0392b;
    text-decoration: none;
}

#revtrack-pickup-fields .revtrack-pickup-label .optional {
    font-weight: 400;
    color: var(--rt-muted);
}

/* A standard WooCommerce form row, so the store's theme dresses the field
   like its own country dropdown; only the row's outer spacing is ours. */
#revtrack-pickup-fields .revtrack-pickup-field .revtrack-pickup-row {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Not the native list once the searchable one replaced it: select2 keeps it in
   the page one pixel wide and out of sight, and a full width would stick out. */
#revtrack-pickup-fields .revtrack-pickup-field select:not(.select2-hidden-accessible),
#revtrack-pickup-fields .revtrack-pickup-field input[type="text"],
#revtrack-pickup-fields .revtrack-pickup-field .select2-container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
}

#revtrack-pickup-fields .revtrack-pickup-field input[type="text"] {
    min-height: 2.875rem;
    border-radius: 10px;
}

/* The searchable list (WooCommerce's own select2): a calm field, and a list
   where each office shows its name and, below it, its address. */
#revtrack-pickup-fields .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 2.875rem;
    border: 1px solid var(--rt-line-strong);
    border-radius: 10px;
    background: transparent;
    color: inherit;
}

/* A long office name ends in "…" inside the field instead of running past it
   (funnel builders make this element a flex box that shows it all). */
#revtrack-pickup-fields .select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    overflow: hidden !important;
    color: inherit;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#revtrack-pickup-fields .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--rt-muted);
}

#revtrack-pickup-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.625rem;
    height: 1.5rem;
    transform: translateY(-50%);
}

#revtrack-pickup-fields .select2-container--open .select2-selection--single,
#revtrack-pickup-fields .select2-container--focus .select2-selection--single {
    border-color: var(--rt-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-accent) 14%, transparent);
}

.select2-dropdown.revtrack-pickup-dropdown {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.select2-dropdown.revtrack-pickup-dropdown .select2-search--dropdown {
    padding: 0.625rem;
}

.select2-dropdown.revtrack-pickup-dropdown .select2-search__field {
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 8px;
}

.select2-dropdown.revtrack-pickup-dropdown .select2-results__option {
    padding: 0.5rem 0.875rem;
    line-height: 1.35;
}

.select2-dropdown.revtrack-pickup-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown.revtrack-pickup-dropdown .select2-results__option--highlighted[data-selected] {
    background: color-mix(in srgb, var(--revtrack-accent, currentColor) 10%, transparent);
    color: inherit;
}

.select2-dropdown.revtrack-pickup-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown.revtrack-pickup-dropdown .select2-results__option[data-selected="true"] {
    background: color-mix(in srgb, var(--revtrack-accent, currentColor) 6%, transparent);
    color: inherit;
}

.revtrack-office-option {
    display: grid;
    gap: 0.0625rem;
}

.revtrack-office-option strong {
    font-weight: 600;
}

.revtrack-office-option small {
    font-size: 0.85em;
    opacity: 0.68;
}

/* Delivery to an office or locker: the street, city, postcode and region of
   the delivery address are not needed, so they are not shown (the plugin does
   not require them for such an order, which takes the office's city). The
   delivery address is the billing one unless the customer ships to a different
   address (and on funnel checkouts that ask for the shipping address first); a
   separate billing address, for an invoice, keeps all its fields. Only these
   fields, never a whole block: WPFunnels keeps the customer's name there. */
body.revtrack-pickup-billing :is(
    #billing_address_1_field,
    #billing_address_2_field,
    #billing_city_field,
    #billing_postcode_field,
    #billing_state_field
),
body.revtrack-pickup-shipping :is(
    #shipping_address_1_field,
    #shipping_address_2_field,
    #shipping_city_field,
    #shipping_postcode_field,
    #shipping_state_field
),
.revtrack-pickup-hidden {
    display: none !important;
}

/* A store that sells to one country only: the country field has one choice,
   so it is not shown (its value is still sent). */
body.revtrack-single-country :is(#billing_country_field, #shipping_country_field) {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* The "Delivery" section under the customer's details                 */
/* ------------------------------------------------------------------ */

.revtrack-delivery {
    display: grid;
    /* One column no wider than the page: a long office name must not stretch it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-block: 1.5rem 1rem;
}

.revtrack-delivery > * {
    min-width: 0;
}

.revtrack-delivery[hidden] {
    display: none;
}

.revtrack-delivery .revtrack-delivery-title {
    margin: 0;
}

.revtrack-delivery #revtrack-pickup-fields {
    margin: 0;
}

/* The address fields under "to address": WooCommerce's own rows, full width. */
/* Funnel checkouts: the delivery address right under the delivery methods. */
#revtrack-delivery-address {
    margin-block: 0.75rem 0;
}

#revtrack-delivery-address:empty {
    display: none;
}

.revtrack-delivery .revtrack-delivery-address:empty,
body.revtrack-pickup-billing .revtrack-delivery .revtrack-delivery-address {
    display: none;
}

/* The section is one column, its rows on the cards' edges: funnel builders give
   their rows column widths and side padding of their own (CartFlows: half and
   third widths, 7px each side) through selectors with ids. */
#revtrack-delivery .revtrack-delivery-address .form-row,
#revtrack-delivery > .form-row {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* CartFlows sets a light text colour on the whole form and gives its own
   methods its field text colour; the cards take the same. */
.wcf-embed-checkout-form #revtrack-delivery #shipping_method > li > label,
.wcf-embed-checkout-form #revtrack-pickup-fields,
.wcf-embed-checkout-form #revtrack-invoice {
    color: var(--wcf-field-text-color, inherit);
}

/* CartFlows lays every label in the customer's details out as a grid, which
   would put the invoice checkbox on a line of its own. */
#revtrack-invoice > .revtrack-invoice-toggle {
    display: flex !important;
}
/* With the "Delivery" section the delivery address is entered there, so
   WooCommerce's "Ship to a different address?" block is left out, and so is
   its optional company field: the company goes with "I want an invoice". */
body.revtrack-delivery-active .woocommerce-shipping-fields,
body.revtrack-delivery-active #billing_company_field:not(.validate-required) {
    display: none !important;
}

/* "I want an invoice for a company" and, when ticked, the company's details. */
.revtrack-invoice {
    display: grid;
    gap: 0.75rem;
    margin-block: 0.5rem 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rt-line, color-mix(in srgb, currentColor 14%, transparent));
    border-radius: 12px;
}

.revtrack-invoice[hidden],
.revtrack-invoice .revtrack-invoice-fields[hidden] {
    display: none;
}

.revtrack-invoice .revtrack-invoice-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.revtrack-invoice .revtrack-invoice-fields {
    display: flow-root;
}

.revtrack-invoice .revtrack-invoice-fields .form-row:last-child {
    margin-bottom: 0;
}

/* While the methods are being moved, the summary does not show them first. */
html.revtrack-delivery-moving .woocommerce-checkout-review-order-table tr:has(#shipping_method input[value^="revtrack_woocommerce_"]),
html.revtrack-delivery-moving .wcf-customer-shipping:has(#shipping_method input[value^="revtrack_woocommerce_"]) {
    display: none;
}

/* CartFlows' own delivery block, once its methods are in "Delivery": only its
   heading would be left. */
body.revtrack-delivery-active .wcf-customer-shipping:not(:has(#shipping_method)) {
    display: none !important;
}

/* The summary's delivery line: the chosen method and its price. */
.revtrack-delivery-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.revtrack-delivery-summary strong {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Bump offers                                                         */
/* ------------------------------------------------------------------ */

#revtrack-offers {
    display: grid;
    gap: 0.625rem;
    margin-block: 1.25rem;
}

#revtrack-offers .revtrack-offer {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1.5px dashed var(--rt-line-strong);
    border-radius: var(--rt-radius);
    background: var(--rt-fill);
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#revtrack-offers .revtrack-offer:hover {
    border-color: color-mix(in srgb, var(--rt-accent) 60%, transparent);
}

#revtrack-offers .revtrack-offer:has(input:checked) {
    border-style: solid;
    border-color: var(--rt-accent);
    background: color-mix(in srgb, var(--rt-accent) 5%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, currentColor 8%, transparent);
}

/* The real checkbox stays in the form but out of sight, and the tick is drawn
   here: themes and funnel builders each restyle checkboxes in their own way
   (FunnelKit positions its drawn tick over the label). */
#revtrack-offers .revtrack-offer .revtrack-offer-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

#revtrack-offers .revtrack-offer .revtrack-offer-input::before,
#revtrack-offers .revtrack-offer .revtrack-offer-input::after {
    display: none !important;
}

#revtrack-offers .revtrack-offer-check {
    display: grid;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--rt-line-strong);
    border-radius: 6px;
    background: transparent;
    place-items: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#revtrack-offers .revtrack-offer:hover .revtrack-offer-check {
    border-color: var(--rt-accent);
}

#revtrack-offers .revtrack-offer:has(.revtrack-offer-input:checked) .revtrack-offer-check {
    border-color: var(--rt-accent);
    background: var(--rt-accent);
}

#revtrack-offers .revtrack-offer:has(.revtrack-offer-input:checked) .revtrack-offer-check::after {
    content: "";
    width: 0.3rem;
    height: 0.6rem;
    margin-top: -0.125rem;
    border: solid var(--revtrack-accent-contrast, currentColor);
    border-width: 0 2px 2px 0;
    /* Without a set accent the box is filled with the text colour, so the
       tick takes its opposite to show on it. */
    filter: var(--revtrack-tick-filter, invert(1) grayscale(1) contrast(9));
    transform: rotate(45deg);
}

#revtrack-offers .revtrack-offer:has(.revtrack-offer-input:focus-visible) {
    outline: 2px solid var(--rt-accent);
    outline-offset: 2px;
}

#revtrack-offers .revtrack-offer img {
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid var(--rt-line);
    border-radius: 8px;
    object-fit: cover;
}

#revtrack-offers .revtrack-offer-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

#revtrack-offers .revtrack-offer-saving {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rt-accent) 12%, transparent);
    font-size: 0.8125em;
    font-weight: 700;
    white-space: nowrap;
}

#revtrack-offers .revtrack-offer-price {
    flex: none;
    text-align: end;
    white-space: nowrap;
}

#revtrack-offers .revtrack-offer-price del {
    margin-inline-end: 0.25rem;
    color: var(--rt-muted);
    font-size: 0.9em;
}

#revtrack-offers .revtrack-offer-price strong {
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Shipping methods                                                    */
/* ------------------------------------------------------------------ */

/* The shipping methods, when RevTrack's are among them: one card per method,
   with the radio, the courier's logo, the courier and the method under it,
   and the price at the end. Themes style this list in very different ways
   (inline labels, centred or right-aligned cells, their own highlight), so
   these rules carry real weight; colours still come from the text colour. */
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Astra gives each method a hanging indent through a selector with two
       ids (padding and a negative text-indent), which no ordinary rule here
       outweighs; inherited, that indent pushes the name over the logo. */
    margin: 0 !important;
    padding: 0.75rem 0.875rem !important;
    border: 1px solid var(--rt-line);
    border-radius: var(--rt-radius);
    background: transparent;
    line-height: 1.35;
    text-indent: 0 !important;
    text-align: start;
    list-style: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li::before,
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li::marker {
    content: none;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li:hover {
    border-color: var(--rt-line-strong);
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li:has(> input:checked) {
    border-color: var(--rt-accent);
    background: color-mix(in srgb, var(--rt-accent) 4%, transparent);
    box-shadow: inset 0 0 0 1px var(--rt-accent), 0 1px 3px color-mix(in srgb, currentColor 8%, transparent);
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > input[type="radio"] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--rt-accent);
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    font-weight: inherit;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
}

/* The courier's logo sits on a small tile, so every brand mark gets the same
   frame whatever its own shape. */
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label img.revtrack-courier-logo {
    box-sizing: border-box;
    width: 2.25em !important;
    height: 2.25em !important;
    margin: 0 !important;
    padding: 0.3em;
    border: 1px solid var(--rt-line);
    border-radius: 8px;
    background: #fff;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-name {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0.0625rem;
    overflow-wrap: break-word;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-courier {
    font-weight: 600;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-method {
    color: var(--rt-muted);
    font-size: 0.9em;
}

/* The dash between the courier and the method, and the colon before the
   price, are for places that print the method as a line of text; a card
   shows them on lines and places of their own. */
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-dash,
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-separator {
    display: none;
}

/* The cart's "Shipping to <address>." line: RevTrack's prices do not depend on
   the address, which is entered at checkout. */
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) ~ .woocommerce-shipping-destination {
    display: none;
}

/* In the cart, under the chosen "to office" method: the office comes at checkout. */
html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li:has(> .revtrack-rate-hint) {
    flex-wrap: wrap;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > .revtrack-rate-hint {
    flex-basis: 100%;
    margin-top: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rt-line);
    color: var(--rt-muted);
    font-size: 0.875em;
}

html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-price {
    flex: none;
    margin-inline-start: auto;
    font-weight: 700;
    white-space: nowrap;
}

/* The order table keeps a column for the "Shipping" heading, which leaves the
   methods a sliver in a narrow column (a phone, a funnel's order summary). A
   table cannot let one row span both of its columns, so the table becomes
   rows of a label on the left and a value on the right, and the shipping row
   takes the whole width with its heading above the methods. */
html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]),
html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) > thead,
html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) > tbody,
html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) > tfoot {
    display: block;
    width: 100%;
}

html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) tr {
    display: flex;
    width: 100%;
}

html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) tr > :is(th, td) {
    display: block;
    box-sizing: border-box;
}

/* The same two columns in every row, so the label and value cells (and the
   backgrounds themes give them) line up from row to row as in the table they
   were; names get the wider one, amounts are short. */
html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) tr > :is(th, td):first-child {
    flex: 1.8 1 0;
    min-width: 0;
}

html body table:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) tr > :is(th, td):last-child:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
    text-align: end;
}

html body tr:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) {
    flex-wrap: wrap;
}

html body tr:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) > :is(th, td) {
    flex: 1 1 100% !important;
    width: 100%;
    text-align: start !important;
}

html body tr:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) > th {
    padding-bottom: 0.25rem;
    border-bottom: 0;
}

/* On a phone the price goes under the name, so the name keeps the row's width. */
@media (max-width: 768px) {
    /* A responsive WooCommerce table (the cart's totals) hides its headings
       on a phone and labels each cell itself; they stay hidden. */
    html body table.shop_table_responsive:has(#shipping_method > li > input[value^="revtrack_woocommerce_"]) tr > th {
        display: none;
    }

    html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li {
        gap: 0.625rem;
        padding: 0.625rem 0.75rem !important;
    }

    html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.625rem;
        row-gap: 0.125rem;
    }

    html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label img.revtrack-courier-logo {
        grid-row: span 2;
        align-self: center;
    }

    html body #shipping_method:has(> li > input[value^="revtrack_woocommerce_"]) > li > label .revtrack-rate-price {
        grid-column: -2;
        justify-self: start;
    }
}

@media (max-width: 480px) {
    #revtrack-offers .revtrack-offer {
        flex-wrap: wrap;
    }

    #revtrack-offers .revtrack-offer-title {
        flex-basis: calc(100% - 6rem);
    }

    #revtrack-offers .revtrack-offer-price {
        flex-basis: 100%;
        padding-inline-start: 2.125rem;
        text-align: start;
    }
}

/* The courier's logo in front of the name of a RevTrack shipping method. */
img.revtrack-courier-logo {
    display: inline-block !important;
    flex: none;
    width: 1.75em !important;
    height: 1.75em !important;
    max-width: none;
    margin: 0 0.5em 0 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    vertical-align: middle;
}

/* The block checkout prints the name as plain text: the logo is a picture
   before it, set per rate by the plugin. */
.wc-block-components-radio-control__option[for*="revtrack_woocommerce_"] .wc-block-components-radio-control__label::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-inline-end: 0.5em;
    background: center / contain no-repeat;
    vertical-align: middle;
}