/* === General Page Styles === */
.delivery_page__P6vEu {
    background-color: var(--color-background-body);
    padding-block: calc(var(--space-xl) + var(--space-sm)); /* 40px */
    font-family:
        var(--font-nunito-sans),
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
}

/* === Header & Footer Section === */
.delivery_header__s7YKs,
.delivery_finalWords__4rehe {
    text-align: center;
    padding-inline: var(--space-lg);
}

.delivery_header__s7YKs {
    -webkit-margin-after: calc(var(--space-xl) * 2);
            margin-block-end: calc(var(--space-xl) * 2); /* ~60px */
}

.delivery_finalWords__4rehe {
    -webkit-margin-before: calc(var(--space-xl) + var(--space-sm));
            margin-block-start: calc(var(--space-xl) + var(--space-sm)); /* 40px */
}

.delivery_pageTitle__V7Res {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-text-primary);
    -webkit-margin-after: var(--space-md);
            margin-block-end: var(--space-md);
}

.delivery_subTitle__zEo71 {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 650px;
    margin-inline: auto;
    line-height: 1.6;
}

.delivery_finalTitle__zsVeU {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* === Timeline Section === */
.delivery_timelineContainer__y8BKQ {
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

/* The vertical line */
.delivery_timelineContainer__y8BKQ::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: var(--color-yellow-200); /* Muted brand color */
    inset-block: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.delivery_step__nYd67 {
    padding-block: var(--space-lg);
    padding-inline: calc(var(--space-xl) + var(--space-sm)); /* 40px */
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

/* The circle on the timeline */
.delivery_step__nYd67::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--clr-acc); /* Brand color */
    border: 4px solid var(--color-background-body);
    inset-block-start: calc(var(--space-lg) + var(--space-sm)); /* ~32px */
    border-radius: 50%;
    z-index: 2;
    transform: translateX(-50%);
}

.delivery_left__8m7BS {
    inset-inline-start: 0;
}

.delivery_right__b9GWV {
    inset-inline-start: 50%;
}

.delivery_left__8m7BS::after {
    inset-inline-start: 100%;
}

.delivery_right__b9GWV::after {
    inset-inline-start: 0;
}

.delivery_stepContent__OwCfY {
    padding: var(--space-lg);
    background-color: var(--color-background-surface-raised);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    position: relative;
    border: 1px solid var(--color-border-subtle);
}

/* Arrow pointing to the timeline */
.delivery_stepContent__OwCfY::before {
    content: " ";
    height: 0;
    position: absolute;
    inset-block-start: calc(var(--space-lg) + var(--space-xs)); /* 28px */
    width: 0;
    z-index: 1;
    border: 10px solid transparent;
}

.delivery_left__8m7BS .delivery_stepContent__OwCfY::before {
    inset-inline-end: -20px;
    border-inline-start-color: var(--color-background-surface-raised);
}

.delivery_right__b9GWV .delivery_stepContent__OwCfY::before {
    inset-inline-start: -20px;
    border-inline-end-color: var(--color-background-surface-raised);
}

/* Step Content Details */
.delivery_iconWrapper__QCqy_ {
    width: 50px;
    height: 50px;
    background-color: var(--clr-acc-sec);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-margin-after: var(--space-md);
            margin-block-end: var(--space-md);
    font-size: 1.8rem;
    color: var(--clr-acc);
}

.delivery_stepTitle__5GoHr {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.delivery_stepText__IL302 {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.delivery_stepText__IL302 b {
    color: var(--color-text-primary);
}

/* === Responsive Design === */
@media screen and (max-width: 768px) {
    .delivery_pageTitle__V7Res {
        font-size: 2.2rem;
    }

    .delivery_header__s7YKs,
    .delivery_finalWords__4rehe {
        text-align: start;
    }

    .delivery_subTitle__zEo71 {
        margin-inline: 0;
    }

    .delivery_timelineContainer__y8BKQ::after {
        inset-inline-start: 35px;
    }

    .delivery_step__nYd67 {
        width: 100%;
        -webkit-padding-start: 70px;
                padding-inline-start: 70px;
        -webkit-padding-end: 15px;
                padding-inline-end: 15px;
    }

    .delivery_step__nYd67.delivery_left__8m7BS,
    .delivery_step__nYd67.delivery_right__b9GWV {
        inset-inline-start: 0;
    }

    .delivery_left__8m7BS .delivery_stepContent__OwCfY::before,
    .delivery_right__b9GWV .delivery_stepContent__OwCfY::before {
        inset-inline-start: -20px;
        border-inline-end-color: var(--color-background-surface-raised);
        border-inline-start-color: transparent;
    }

    .delivery_left__8m7BS::after,
    .delivery_right__b9GWV::after {
        inset-inline-start: 35px;
    }
}

@media screen and (max-width: 480px) {
    .delivery_timelineContainer__y8BKQ::after {
        inset-inline-start: 15px;
        width: 2px;
    }

    .delivery_step__nYd67 {
        -webkit-padding-start: 40px;
                padding-inline-start: 40px;
        -webkit-padding-end: 10px;
                padding-inline-end: 10px;
    }

    .delivery_left__8m7BS::after,
    .delivery_right__b9GWV::after {
        inset-inline-start: 15px;
        width: 18px;
        height: 18px;
        border-width: 3px;
    }

    .delivery_left__8m7BS .delivery_stepContent__OwCfY::before,
    .delivery_right__b9GWV .delivery_stepContent__OwCfY::before {
        inset-inline-start: -18px;
    }

    .delivery_iconWrapper__QCqy_ {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .delivery_stepTitle__5GoHr {
        font-size: 1.2rem;
    }

    .delivery_stepText__IL302 {
        font-size: 0.9rem;
    }
}