/* -------------------------------------------------------------------------
 * Free trial flash on a product card.
 *
 * Built as the mirror of the existing .sale flash in landing/css/globals.css:
 * same corner ribbon, same 8px offset from the top, same padding, shadow and
 * 12px extra-bold white Manrope, flipped to the opposite side. A product can
 * carry a sale and a trial at once, so the two sit on opposite corners and read
 * as one system rather than two.
 *
 * Green rather than the sale's amber, matching --slimy-green (#148a14), the
 * colour these cards already use for price.
 *
 * A theme copy rather than a reference to the plugin's stylesheet: these cards
 * have to keep rendering correctly when the plugin is deactivated, and a
 * template that pulls its own CSS from a plugin loses its styling the moment
 * that happens.
 * ---------------------------------------------------------------------- */

.trial,
.wpbay-product-card__trial {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 2;
    display: inline-flex;
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    align-items: center;
    justify-content: center;
    /* Mirrored: the sale flash is rounded on its left, this on its right. */
    border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, rgba(16, 112, 26, 1) 0%, rgba(20, 138, 20, 1) 100%);
    box-shadow: 0 1px 2px #0000004c;
    gap: 4px;
    padding: 4px 6px 4px 4px;
    color: #fff;
    font-family: var(--font-family-manrope, Manrope, Arial, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    /* The flash sits inside the image link on the loop card; clicks belong to
       the link underneath it. */
    pointer-events: none;
}

.trial .trial-icon,
.wpbay-product-card__trial .trial-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* The landing card nests its label in a .place-5 element, exactly as .sale
   does, so it picks up the shared typography class. The loop card writes the
   text directly. */
.trial .place-5 {
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .trial,
    .wpbay-product-card__trial {
        top: 6px;
        padding: 3px 5px 3px 3px;
        font-size: 11px;
    }

    .trial .trial-icon,
    .wpbay-product-card__trial .trial-icon {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }
}