/**
 * Deliberately plain CSS, not Tailwind utility classes - this module's .phtml lives outside the
 * Gardoo theme's own directory, so it's not guaranteed to be inside whatever content paths the
 * theme's Tailwind build scans for class usage. Utility classes here would risk being purged
 * from a production build silently. Plain CSS with low-specificity, class-only selectors (no
 * !important, no id selectors) is also the easiest thing for a frontend dev to override from
 * theme CSS if the design needs to change.
 *
 * Class names are BEM-style and namespaced under .portalpeople-delivery-countdown so they're safe
 * to target without colliding with theme classes.
 */

.portalpeople-delivery-countdown {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}

.portalpeople-delivery-countdown__lozenge {
    /*
       Three-column grid, not padding-based centering. Confirmed live 2026-08-20 (Playwright
       against the real PDP): centering text with `justify-content:center`/`text-align:center`
       inside a box with ASYMMETRIC padding (this had 4.5rem left / 1.25rem right, for icon room)
       centers within the padded content box, not the visual box - so the text lands off-center
       by exactly half the padding difference (measured 26px offset = (72px-20px)/2, both desktop
       and mobile). A 3-column grid (icon | text | invisible spacer matching the icon column's
       width) centers the text against a genuinely symmetric layout regardless of icon size or
       text length - verified 0.0px offset after switching, same live-page check.
    */
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    column-gap: 0.75rem;
    width: 100%;
    text-align: center;
    /* var(--green) is Garry's brand token (confirmed value: rgb(87, 133, 92)). On its own that's
       only ~4.27:1 contrast against white text - just under WCAG AA's 4.5:1 for normal-size text
       (14px/0.875rem doesn't qualify for the "large text" 3:1 exception). color-mix() darkens it
       ~10% toward black, enough to clear 4.5:1 while keeping the same brand hue; the fallback
       (browsers without color-mix support) is a manually chosen accessible dark green, not the
       raw brand token, so old browsers don't silently regress below AA. */
    background-color: rgba(137, 170, 136, 0.2);
    padding: 0.15rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
    border: 1px solid var(--green);
}

.portalpeople-delivery-countdown__icon {
    grid-column: 1;
    justify-self: start;
    width: 2rem;
    height: auto;
}

.portalpeople-delivery-countdown__text {
    grid-column: 2;
    /* No color/weight of its own - inherits from the lozenge so overriding the lozenge's palette
       in theme CSS doesn't require also touching this element. */
}