/* The basket's progress toward free delivery. Shared by /mycart and /checkout. */

.free-delivery {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #E7ECF4;
    border-radius: 10px;
    background: #F7F9FC;
}

.free-delivery__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.free-delivery__icon {
    width: 22px;
    height: 22px;
    flex: none;
    color: #516BF1;
}

.free-delivery__text {
    margin: 0;
    /* Takes the slack in the row so the call to action sits at the far edge. */
    flex: 1 1 auto;
    font-size: 14.5px;
    line-height: 1.4;
    color: #373434;
}

.free-delivery__text strong {
    font-weight: 700;
}

.free-delivery__track {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: #E7ECF4;
    overflow: hidden;
}

.free-delivery__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #516BF1;
    transition: width .35s ease;
}

/* On a phone the icon and two lines of text crowd each other at this padding. */
@media (max-width: 575.98px) {
    .free-delivery {
        padding: 10px 12px;
    }

    .free-delivery__text {
        font-size: 13.5px;
    }
}

/* Close enough that one more item would do it. The bar changes colour rather
   than the text, because the text is BC's and is not ours to embellish. Amber
   rather than green: green would read as "done", and the order has not
   qualified yet. */
.free-delivery.is-close .free-delivery__icon {
    color: #E08A1E;
}

.free-delivery.is-close .free-delivery__fill {
    background: #E08A1E;
}

/* The site-wide strip is the first child of <main>, which themescripts.js pads
   by the fixed header's height, so it already clears the header and must not be
   offset again here. This is only the gap between it and the page below. */
.free-delivery-strip {
    margin-top: 16px;
}

.free-delivery-strip .free-delivery {
    margin-bottom: 0;
}

/* --- Staying put while the page scrolls ---------------------------------
   position:sticky does not work here. body carries overflow-x:hidden, which
   makes body its own scroll container, and a sticky descendant then pins to
   that box rather than to the viewport — it scrolls away. So the bar is pinned
   with position:fixed by free-delivery.js, which also sets top, left and width
   from the element's own measured box so the pinned bar keeps the width and
   alignment it had in the flow.

   A placeholder of the same height is left behind, otherwise the page jumps by
   the bar's height at the moment it pins. */
.free-delivery-pinned {
    position: fixed;
    z-index: 90;
    margin-top: 0 !important;
}

.free-delivery-placeholder {
    display: none;
}

.free-delivery-placeholder.is-active {
    display: block;
}

/* Page content scrolls underneath, so the band needs to be opaque across the
   full width — the bar's own tinted background only covers the bar itself. */
.free-delivery-strip {
    background: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Pinned, the strip spans the window, so it keeps its own side padding rather
   than the container's and gains a hairline to separate it from the page. */
.free-delivery-strip.free-delivery-pinned {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* --- Add products -------------------------------------------------------
   The bar tells the customer to add something to the basket; this is the way
   to go and do it.

   The look comes from .btn-grey .btn-rounded in main.css — the site's black
   pill, the same one "Speak to a Doctor" wears in the header. Nothing here
   sets a colour, a background or a radius: borrowing the real classes means
   this follows the brand instead of drifting from it. What is left is only
   how the button sits in the row. */
.free-delivery__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 7px 14px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

/* main.css sizes .btn-grey svg at 10px, which is too small for a chevron sat
   next to 13.5px text. It also fills svgs white on hover, which would turn
   this open chevron into a solid wedge — hence fill:none. */
.free-delivery__cta svg,
.free-delivery__cta:hover svg,
.free-delivery__cta:focus svg {
    width: 14px;
    height: 14px;
    fill: none;
}


/* On a narrow screen the message and the button will not share a line, so the
   button drops under it and the row wraps rather than squeezing the text. */
@media (max-width: 575.98px) {
    .free-delivery__row {
        flex-wrap: wrap;
    }

    .free-delivery__text {
        flex: 1 1 100%;
    }

    .free-delivery__cta {
        margin-left: 32px;
    }
}

/* Phone layout: icon and message on the first line, then the progress bar with
   "Add products" beside it — nothing stacked on top of the bar. The row's
   children join one grid with the bar. */
@media (max-width: 575.98px) {
    .free-delivery {
        display: grid;
        grid-template-columns: 22px 1fr auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
    }
    .free-delivery.hideUL { display: none; }

    .free-delivery__row { display: contents; }

    .free-delivery__icon { grid-column: 1; grid-row: 1; align-self: start; }

    .free-delivery__text { grid-column: 2 / 4; grid-row: 1; font-size: 13.5px; }

    .free-delivery__track { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }

    .free-delivery__cta {
        grid-column: 3;
        grid-row: 2;
        margin: 0 !important;
        padding: 0 12px !important;
        height: 30px;
        font-size: 12.5px !important;
    }
    .free-delivery__cta svg { width: 12px; height: 12px; }
}