/* PartsDone / Hyva-native fulfillment summary.
 * Keep the site's font and base foreground color, while giving the fulfillment
 * information enough visual weight to be noticed near the purchase controls.
 */
.pd-estimate {
    --pd-estimate-accent: oklch(0.46 0.2 265);
    --pd-estimate-border: color-mix(in oklab, var(--pd-estimate-accent) 18%, white);
    --pd-estimate-surface: color-mix(in oklab, var(--pd-estimate-accent) 5%, white);
    --pd-estimate-icon-surface: color-mix(in oklab, var(--pd-estimate-accent) 11%, white);
    font: inherit;
    color: inherit;
}

.pd-estimate-items {
    min-width: 0;
}

.pd-estimate-item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--pd-estimate-border);
    border-radius: .75rem;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--pd-estimate-accent) 9%, transparent) 0, transparent 42%),
        var(--pd-estimate-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}


.pd-estimate-icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    color: var(--pd-estimate-accent);
    background: var(--pd-estimate-icon-surface);
}

.pd-estimate-icon svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
}

.pd-estimate-content {
    min-width: 0;
}

.pd-estimate-kicker,
.pd-estimate-detail,
.pd-estimate-holiday {
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
}

.pd-estimate-kicker {
    margin-bottom: .125rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    opacity: .72;
}

.pd-estimate-detail {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.pd-estimate-detail p,
.pd-estimate-detail div {
    margin-top: 0;
    margin-bottom: 0;
}

.pd-estimate-holiday {
    margin-top: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    opacity: .72;
}

.pd-estimate-shared-timer {
    padding: .875rem 1rem;
    border: 1px solid var(--pd-estimate-border);
    border-radius: .75rem;
    font: inherit;
    color: inherit;
    background: var(--pd-estimate-surface) !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

@media (hover: hover) {
    .pd-estimate-item {
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .pd-estimate-item:hover {
        border-color: color-mix(in oklab, var(--pd-estimate-accent) 30%, white);
        box-shadow: 0 6px 18px rgb(15 23 42 / 7%);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-estimate-item {
        transition: none;
    }

    .pd-estimate-item:hover {
        transform: none;
    }
}