/* /Components/DeliveryProof.razor.rz.scp.css */
/* The receipt sits at the foot of the parcel it belongs to: a tick, a line of text, and the
   letter itself framed like a photograph rather than dumped on the page full size. */

.proof[b-egga7703w7] {
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--surface-line);
    animation: proof-in-b-egga7703w7 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes proof-in-b-egga7703w7 {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.proof header[b-egga7703w7] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.badge[b-egga7703w7] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ok-soft);
}

.badge svg[b-egga7703w7] {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: var(--ok);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.title[b-egga7703w7] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.subtitle[b-egga7703w7] {
    margin: 0.05rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* The letter is a full page of which only the top half carries anything, so the frame shows that
   part and the whole thing is one click away. */
.sheet[b-egga7703w7] {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--surface-line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 10px 26px -20px rgba(28, 32, 48, 0.55);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sheet:hover[b-egga7703w7] {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -20px rgba(28, 32, 48, 0.6);
}

.sheet img[b-egga7703w7] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top center;
}

/* A soft white fade at the bottom, so the crop reads as a page continuing rather than a cut. */
.sheet[b-egga7703w7]::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 78%);
    pointer-events: none;
}

.open[b-egga7703w7] {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: 0 6px 18px -10px rgba(28, 32, 48, 0.55);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.open svg[b-egga7703w7] {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A photograph is a photograph: shown whole in a normal frame, with no page fade over it. */
.proof.photo .sheet img[b-egga7703w7] {
    aspect-ratio: 4 / 3;
    object-position: center;
}

.proof.photo .sheet[b-egga7703w7]::after {
    content: none;
}

.proof.photo .open[b-egga7703w7] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
}

/* The formal receipt, offered under a photograph for anyone who wants it. */
.also[b-egga7703w7] {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-deep);
    text-decoration: none;
}

.also:hover[b-egga7703w7] {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .proof[b-egga7703w7] {
        animation: none;
    }

    .sheet[b-egga7703w7] {
        transition: none;
    }
}
/* /Components/FindMyCandyGlobe.razor.rz.scp.css */
/* The globe hangs off the top right corner of the tracking page: partly outside the column,
   behind the cards, and never in front of anything a customer came to read. Only the caption
   takes part in the layout. */

/* The block itself holds nothing but the caption. Its height is the clear band the route is
   drawn across: without it the cards would start straight under the back button and the parcel
   would be flying along behind them. */
.globe-route[b-xa4th4quho] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 7rem;
    margin: 0 0 0.35rem;
}

.orb[b-xa4th4quho] {
    /* A quarter of the window across, in the window's own top right corner rather than the
       column's. The offsets put the middle of the sphere 0.62 of its radius in from each edge,
       which leaves about a quarter of the globe off the screen entirely. */
    --globe-size: clamp(24rem, 68vw, 74rem);

    position: fixed;
    top: calc(var(--globe-size) * -0.25);
    right: calc(var(--globe-size) * -0.25);
    z-index: 0;
    width: var(--globe-size);
    height: var(--globe-size);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The sphere can be spun by hand. Only the sphere itself takes the pointer, not the square it
   is drawn in, and only sideways: a drag down the page still scrolls the page. */
.stage[b-xa4th4quho] {
    position: relative;
    width: 100%;
    height: 100%;
    /* No edge anywhere: the sphere is solid in the middle and gone well before the circle it is
       drawn in, so it reads as part of the background rather than an object on top of it. The
       place names sit outside this element, so the fade never touches them. */
    mask-image: radial-gradient(circle at 50% 50%,
        #000 22%,
        rgba(0, 0, 0, 0.6) 32%,
        rgba(0, 0, 0, 0.22) 40%,
        transparent 48%);
    clip-path: circle(42% at 50% 50%);
    cursor: grab;
    touch-action: pan-y;
}

/* The two ends of the route, named on small cards that the module moves onto their markers every
   frame. They start invisible and stay that way until it has worked out where they belong. */
.place[b-xa4th4quho] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;
    background: var(--surface);
    border-radius: 0.7rem;
    box-shadow:
        0 1px 2px rgba(28, 32, 48, 0.08),
        0 12px 26px -16px rgba(28, 32, 48, 0.5);
    opacity: 0;
    will-change: transform, opacity;
}

.place .dot[b-xa4th4quho] {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.place.from .dot[b-xa4th4quho] {
    background: #5B54D6;
    box-shadow: 0 0 0 3px rgba(91, 84, 214, 0.16);
}

.place.to .dot[b-xa4th4quho] {
    background: var(--accent-deep);
    box-shadow: 0 0 0 3px rgba(168, 47, 166, 0.16);
}

.place .text[b-xa4th4quho] {
    display: grid;
    line-height: 1.25;
}

.place .name[b-xa4th4quho] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink);
}

.place .note[b-xa4th4quho] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--muted);
}

/* The aeroplane, flown along the route by the module. It is an element rather than another dot
   on the sphere so that it can be turned to face the way it is going. */
.plane[b-xa4th4quho] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: clamp(1rem, 1.9vw, 1.6rem);
    height: clamp(1rem, 1.9vw, 1.6rem);
    color: var(--accent-deep);
    filter: drop-shadow(0 2px 5px rgba(28, 32, 48, 0.28));
    opacity: 0;
    will-change: transform, opacity;
}

.plane svg[b-xa4th4quho] {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.stage.dragging[b-xa4th4quho] {
    cursor: grabbing;
}

/* Faded in once the first frame is on screen, rather than appearing mid animation. */
.globe-route.ready .orb[b-xa4th4quho] {
    opacity: 1;
    transform: none;
}

/* The caption is the only part of this that is really in the page: a quiet pill, mirroring the
   way back on the other side of the row, so the text stays legible wherever the globe drifts
   behind it. */
.caption[b-xa4th4quho] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: max-content;
    margin: 0 0 0 auto;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.8s ease 0.25s;
}

.globe-route.ready .caption[b-xa4th4quho] {
    opacity: 1;
}

.caption .to[b-xa4th4quho] {
    color: var(--ink);
}

.caption .arrow svg[b-xa4th4quho] {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: var(--accent-deep);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tablets: the same idea, smaller, and pulled in so it does not sit on the cards. */
@media (max-width: 64rem) {
    .globe-route[b-xa4th4quho] {
        min-height: 5rem;
    }

    .orb[b-xa4th4quho] {
        --globe-size: clamp(20rem, 82vw, 46rem);
    }
}

@media (max-width: 48rem) {
    .globe-route[b-xa4th4quho] {
        min-height: 3.5rem;
    }

    .orb[b-xa4th4quho] {
        --globe-size: clamp(16rem, 88vw, 30rem);
    }

    .globe-route.ready .orb[b-xa4th4quho] {
        opacity: 0.85;
    }
}

/* Phones: the tracking information is the whole point of the page, so the globe steps out. */
@media (max-width: 30rem) {
    .globe-route[b-xa4th4quho] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb[b-xa4th4quho],
    .caption[b-xa4th4quho] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-b8onmfd5y6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-b8onmfd5y6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vs6t9xv72t],
.components-reconnect-repeated-attempt-visible[b-vs6t9xv72t],
.components-reconnect-failed-visible[b-vs6t9xv72t],
.components-pause-visible[b-vs6t9xv72t],
.components-resume-failed-visible[b-vs6t9xv72t],
.components-rejoining-animation[b-vs6t9xv72t] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-failed[b-vs6t9xv72t],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vs6t9xv72t] {
    display: block;
}


#components-reconnect-modal[b-vs6t9xv72t] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vs6t9xv72t 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vs6t9xv72t 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vs6t9xv72t]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vs6t9xv72t {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vs6t9xv72t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vs6t9xv72t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vs6t9xv72t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vs6t9xv72t] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vs6t9xv72t] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vs6t9xv72t] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vs6t9xv72t] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vs6t9xv72t] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vs6t9xv72t] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vs6t9xv72t 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vs6t9xv72t] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vs6t9xv72t {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/OrderProgress.razor.rz.scp.css */
/* Progress strip -------------------------------------------------------- */

.progress[b-hhul9dftzt] {
    margin-top: 1rem;
}

.sr-only[b-hhul9dftzt] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* News cards ------------------------------------------------------------ */

/* Delay, free gift and cancellation break into the strip after the first step; each keeps its
   own colour so it is not mistaken for one of the seven. */
.step.news.canceled[b-hhul9dftzt] { --step: #B4232C; --step-soft: #FBE7E8; }
.step.news.delayed[b-hhul9dftzt]  { --step: #C57A00; --step-soft: #FBF0DC; }
.step.news.gift[b-hhul9dftzt]     { --step: #A82FA6; --step-soft: #FBE7FB; }
.step.news.returned[b-hhul9dftzt] { --step: #C2410C; --step-soft: #FCEAE0; }

.step.news .text h3[b-hhul9dftzt] {
    color: var(--step);
}

/* Steps ----------------------------------------------------------------- */

.steps[b-hhul9dftzt] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each step owns the colour of its card in the printed guide, so the strip reads as the same
   seven pictures customers already know. */
.step[data-step="1"][b-hhul9dftzt] { --step: #F185F0; --step-soft: #FCEBF9; }
.step[data-step="2"][b-hhul9dftzt] { --step: #EDB114; --step-soft: #FBF3DA; }
.step[data-step="3"][b-hhul9dftzt] { --step: #B98AF4; --step-soft: #F2E9FD; }
.step[data-step="4"][b-hhul9dftzt] { --step: #4C9CF5; --step-soft: #E6F0FD; }
.step[data-step="5"][b-hhul9dftzt] { --step: #3FA173; --step-soft: #E5F3EC; }
.step[data-step="6"][b-hhul9dftzt] { --step: #F0863A; --step-soft: #FCEDE1; }
.step[data-step="7"][b-hhul9dftzt] { --step: #55AEEC; --step-soft: #E7F3FD; }
.step[data-step="8"][b-hhul9dftzt] { --step: #3FA173; --step-soft: #E6F3EA; }

/* The strip fills in from the top, one step after another, so the journey is drawn rather than
   dumped. The first delay clears the cards above, which are still rising. */
@keyframes step-in-b-hhul9dftzt {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.step[b-hhul9dftzt] {
    animation: step-in-b-hhul9dftzt 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.step:nth-child(1)[b-hhul9dftzt] { animation-delay: 0.30s; }
.step:nth-child(2)[b-hhul9dftzt] { animation-delay: 0.36s; }
.step:nth-child(3)[b-hhul9dftzt] { animation-delay: 0.42s; }
.step:nth-child(4)[b-hhul9dftzt] { animation-delay: 0.48s; }
.step:nth-child(5)[b-hhul9dftzt] { animation-delay: 0.54s; }
.step:nth-child(6)[b-hhul9dftzt] { animation-delay: 0.60s; }
.step:nth-child(7)[b-hhul9dftzt] { animation-delay: 0.66s; }
.step:nth-child(8)[b-hhul9dftzt] { animation-delay: 0.72s; }
.step:nth-child(n+9)[b-hhul9dftzt] { animation-delay: 0.78s; }

@media (prefers-reduced-motion: reduce) {
    .step[b-hhul9dftzt] {
        animation: none;
    }
}

.step[b-hhul9dftzt] {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 3.25rem 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0;
}

/* The line joining the markers. It stops at the last step so nothing dangles below it. */
.step[b-hhul9dftzt]::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-line);
}

.step:first-child[b-hhul9dftzt]::before {
    top: 50%;
}

.step:last-child[b-hhul9dftzt]::before {
    bottom: 50%;
}

.step.done[b-hhul9dftzt]::before,
.step.current[b-hhul9dftzt]::before {
    background: color-mix(in srgb, var(--step) 45%, var(--surface-line));
}

.step:first-child.current[b-hhul9dftzt]::before,
.step:first-child.done[b-hhul9dftzt]::before {
    background: var(--surface-line);
}

/* Marker ---------------------------------------------------------------- */

.marker[b-hhul9dftzt] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--surface-line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.step.done .marker[b-hhul9dftzt] {
    background: var(--step);
    border-color: var(--step);
    color: #FFFFFF;
}

.step.current .marker[b-hhul9dftzt] {
    background: var(--step);
    border-color: var(--step);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 22%, transparent);
}

.marker svg[b-hhul9dftzt] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Artwork --------------------------------------------------------------- */

.art[b-hhul9dftzt] {
    margin: 0;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--step-soft);
    line-height: 0;
}

.art img[b-hhul9dftzt] {
    width: 100%;
    height: auto;
    display: block;
}

.step.upcoming .art[b-hhul9dftzt] {
    filter: grayscale(1);
    opacity: 0.45;
}

.step.done .art[b-hhul9dftzt] {
    opacity: 0.75;
}

/* Text ------------------------------------------------------------------ */

.text h3[b-hhul9dftzt] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.text p[b-hhul9dftzt] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.step.upcoming .text h3[b-hhul9dftzt] {
    color: var(--muted);
    font-weight: 500;
}

/* Only the step the order is actually on gets the full picture and the full sentence; the rest
   stay small so all seven fit on one phone screen. */
.step.current[b-hhul9dftzt] {
    grid-template-columns: 2rem 1fr;
    grid-template-areas:
        "marker art"
        ". text";
    row-gap: 0.7rem;
    padding: 1rem 0 1.2rem;
}

.step.current .marker[b-hhul9dftzt] {
    grid-area: marker;
    align-self: start;
    margin-top: 0.4rem;
}

.step.current .art[b-hhul9dftzt] {
    grid-area: art;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.step.current .text[b-hhul9dftzt] {
    grid-area: text;
}

.step.current .text h3[b-hhul9dftzt] {
    font-size: 1.15rem;
    font-weight: 700;
}

.step.current .text p[b-hhul9dftzt] {
    font-size: 0.92rem;
    color: var(--ink);
}

.step-note[b-hhul9dftzt] {
    margin-top: 0.35rem !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--accent-deep) !important;
}

/* Wider screens have room for the picture beside the text on every step. */
@media (min-width: 34rem) {
    .step[b-hhul9dftzt] {
        grid-template-columns: 2rem 4.5rem 1fr;
    }

    .step.current[b-hhul9dftzt] {
        grid-template-columns: 2rem 10rem 1fr;
        grid-template-areas: "marker art text";
        align-items: center;
        column-gap: 1.1rem;
    }

    .step.current .marker[b-hhul9dftzt] {
        align-self: center;
        margin-top: 0;
    }
}
/* /Components/Pages/Track.razor.rz.scp.css */
.track-page[b-ke5y1n70s4] {
    position: relative;
    max-width: 34rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
}

.page-head[b-ke5y1n70s4] {
    margin-bottom: 1.75rem;
}

/* The artwork is shown whole, with no frame and no shadow. Height is capped and
   the width follows, so the tall portrait does not push the form off screen. */
.hero[b-ke5y1n70s4] {
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem;
}

.hero img[b-ke5y1n70s4] {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(8rem, 26vh, 13rem);
    object-fit: contain;
}

.eyebrow[b-ke5y1n70s4] {
    margin: 0 0 0.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
}

.page-head h1[b-ke5y1n70s4] {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
}

.sr-only[b-ke5y1n70s4] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Search card ---------------------------------------------------------- */

.search-card[b-ke5y1n70s4] {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.field[b-ke5y1n70s4] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
}

.field-icon[b-ke5y1n70s4] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* InputText renders inside a child component, so the scope has to be pierced. */
.field[b-ke5y1n70s4]  input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 0;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
}

.field[b-ke5y1n70s4]  input::placeholder {
    color: #9095A3;
}

.field[b-ke5y1n70s4]  input:focus {
    outline: none;
}

.field:focus-within[b-ke5y1n70s4] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.go[b-ke5y1n70s4] {
    justify-self: end;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-top: 0.15rem;
    color: #fff;
    background: var(--accent-deep);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.go:hover:not(:disabled)[b-ke5y1n70s4] {
    transform: translateY(-1px);
}

.go:disabled[b-ke5y1n70s4] {
    background: #C79BC6;
    cursor: progress;
}

.go svg[b-ke5y1n70s4] {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spinner[b-ke5y1n70s4] {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ke5y1n70s4 0.7s linear infinite;
}

@keyframes spin-b-ke5y1n70s4 {
    to { transform: rotate(360deg); }
}

/* Validation popup ------------------------------------------------------ */

.toast[b-ke5y1n70s4] {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: max-content;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 26px 50px -20px rgba(28, 32, 48, 0.45);
    /* The overshoot in the keyframes is what gives it the pop. */
    animation: plop-b-ke5y1n70s4 0.42s cubic-bezier(0.24, 1.1, 0.32, 1) both;
}

.toast.closing[b-ke5y1n70s4] {
    animation: plop-out-b-ke5y1n70s4 0.16s ease-in both;
}

@keyframes plop-b-ke5y1n70s4 {
    0% {
        opacity: 0;
        transform: translate(-50%, -0.75rem) scale(0.72);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.06);
    }
    78% {
        transform: translate(-50%, 0) scale(0.975);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes plop-out-b-ke5y1n70s4 {
    from {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -0.4rem) scale(0.9);
    }
}

.toast-icon[b-ke5y1n70s4] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.toast-icon svg[b-ke5y1n70s4] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--accent-deep);
    stroke-width: 1.9;
    stroke-linecap: round;
}

.toast-body[b-ke5y1n70s4] {
    flex: 1 1 auto;
}

.toast-title[b-ke5y1n70s4] {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.toast-body ul[b-ke5y1n70s4] {
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.toast-body li + li[b-ke5y1n70s4] {
    margin-top: 0.15rem;
}

.toast-close[b-ke5y1n70s4] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: -0.15rem -0.25rem 0 0;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.toast-close:hover[b-ke5y1n70s4] {
    background: var(--surface-sunken);
    color: var(--ink);
}

.toast-close svg[b-ke5y1n70s4] {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-ke5y1n70s4],
    .toast.closing[b-ke5y1n70s4] {
        animation-duration: 0.01ms;
    }
}

/* Messages ------------------------------------------------------------- */

.track-message[b-ke5y1n70s4] {
    margin: 1.5rem 0 0;
    padding: 0.95rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

.track-message.info[b-ke5y1n70s4] {
    background: var(--accent-soft);
    color: #5B2E5A;
}

.track-message.error[b-ke5y1n70s4] {
    background: var(--danger-soft);
    color: var(--danger);
}

/* The result, arriving ---------------------------------------------------- */

/* The order does not simply appear where the form was: each block rises into place a beat after
   the one above it, so the eye is walked down the page from the order number to the parcel. */
@keyframes rise-b-ke5y1n70s4 {
    from {
        opacity: 0;
        transform: translateY(1.1rem) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.result > *[b-ke5y1n70s4] {
    animation: rise-b-ke5y1n70s4 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result > *:nth-child(1)[b-ke5y1n70s4] { animation-delay: 0.02s; }
.result > *:nth-child(2)[b-ke5y1n70s4] { animation-delay: 0.10s; }
.result > *:nth-child(3)[b-ke5y1n70s4] { animation-delay: 0.18s; }
.result > *:nth-child(4)[b-ke5y1n70s4] { animation-delay: 0.26s; }
.result > *:nth-child(5)[b-ke5y1n70s4] { animation-delay: 0.34s; }
.result > *:nth-child(n+6)[b-ke5y1n70s4] { animation-delay: 0.4s; }

/* The way back to the form, in place of the hero once an order is on screen. */
.back[b-ke5y1n70s4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.9rem 0.5rem 0.6rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    animation: rise-b-ke5y1n70s4 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.back:hover[b-ke5y1n70s4] {
    color: var(--ink);
}

.back svg[b-ke5y1n70s4] {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .result > *[b-ke5y1n70s4],
    .back[b-ke5y1n70s4] {
        animation: none;
    }
}

/* Cards ---------------------------------------------------------------- */

.card[b-ke5y1n70s4] {
    margin-top: 1.25rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.order-summary h2[b-ke5y1n70s4] {
    margin: 0 0 0.85rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.order-summary dl[b-ke5y1n70s4] {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
}

.order-summary dl > div[b-ke5y1n70s4] {
    display: flex;
    gap: 0.75rem;
}

.order-summary dt[b-ke5y1n70s4] {
    min-width: 8.5rem;
    color: var(--muted);
}

.order-summary dd[b-ke5y1n70s4] {
    margin: 0;
    font-weight: 500;
}

/* Shipment ------------------------------------------------------------- */

.shipment header[b-ke5y1n70s4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.badge[b-ke5y1n70s4] {
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #5B2E5A;
    background: var(--accent-soft);
}

.badge.moving[b-ke5y1n70s4] { background: var(--accent-soft); color: #5B2E5A; }
.badge.close[b-ke5y1n70s4] { background: var(--warn-soft); color: var(--warn); }
.badge.delivered[b-ke5y1n70s4] { background: var(--ok-soft); color: var(--ok); }
.badge.problem[b-ke5y1n70s4] { background: var(--danger-soft); color: var(--danger); }
.badge.unknown[b-ke5y1n70s4] { background: var(--surface-sunken); color: var(--muted); }

.carrier[b-ke5y1n70s4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.tracking-number[b-ke5y1n70s4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

/* Copying the number is the most common thing done with it, so it gets a button rather than
   leaving the customer to select twelve digits by hand. */
.copy[b-ke5y1n70s4] {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--surface-line);
    border-radius: 0.6rem;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

.copy:hover[b-ke5y1n70s4] {
    color: var(--accent-deep);
    border-color: var(--accent);
}

.copy svg[b-ke5y1n70s4] {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Headline date ---------------------------------------------------------- */

/* The one line most visits are about, so it sits above the details and outweighs them. */
.headline-date[b-ke5y1n70s4] {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.headline-date.delivered[b-ke5y1n70s4] {
    color: var(--ok);
}

.order-summary address[b-ke5y1n70s4] {
    display: grid;
    font-style: normal;
    line-height: 1.45;
}

/* Order contents --------------------------------------------------------- */

.items h3[b-ke5y1n70s4] {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.items ul[b-ke5y1n70s4] {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.items li[b-ke5y1n70s4] {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.items figure[b-ke5y1n70s4] {
    margin: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--surface-sunken);
}

.items img[b-ke5y1n70s4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-title[b-ke5y1n70s4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.item-variant[b-ke5y1n70s4] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.item-qty[b-ke5y1n70s4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.status-text[b-ke5y1n70s4] {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.eta[b-ke5y1n70s4] {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.shipment-error[b-ke5y1n70s4] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--danger);
}

/* Timeline ------------------------------------------------------------- */

.timeline[b-ke5y1n70s4] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 0 1.35rem;
    border-left: 2px solid var(--surface-line);
}

.timeline li[b-ke5y1n70s4] {
    position: relative;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0;
}

.timeline li[b-ke5y1n70s4]::before {
    content: "";
    position: absolute;
    left: -1.79rem;
    top: 0.95rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--surface-line);
}

/* The newest event is the one the customer came to read. */
.timeline li:first-child[b-ke5y1n70s4]::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline time[b-ke5y1n70s4] {
    font-size: 0.78rem;
    color: var(--muted);
}

.timeline .description[b-ke5y1n70s4] {
    font-size: 0.95rem;
}

.timeline .location[b-ke5y1n70s4] {
    font-size: 0.85rem;
    color: var(--muted);
}

.carrier-link[b-ke5y1n70s4] {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.carrier-link:hover[b-ke5y1n70s4] {
    text-decoration: underline;
}

@media (max-width: 30rem) {
    .track-page[b-ke5y1n70s4] {
        padding-top: 2rem;
    }

    .page-head h1[b-ke5y1n70s4] {
        font-size: 1.7rem;
    }

    .order-summary dl > div[b-ke5y1n70s4] {
        flex-direction: column;
        gap: 0;
    }

    .order-summary dt[b-ke5y1n70s4] {
        min-width: 0;
    }
}

/* The globe -------------------------------------------------------------- */

/* The cards are lifted above the globe so it can hang behind them without ever covering a word
   of the tracking information. */
.result[b-ke5y1n70s4],
.back[b-ke5y1n70s4],
.track-message[b-ke5y1n70s4] {
    position: relative;
    z-index: 1;
}