/* Prices hidden from visitors who are not logged in
   (Admin → Settings → Login gate → "Show prices to visitors who are not logged
   in"). The real value is never rendered: the server sends a masked placeholder
   and no number at all, so the blur is decoration on the placeholder rather
   than a veil over the price. */

/* Plain inline content, not a flex row. As flex items the currency and the mask
   were laid out with the flex gaps, and any tracking had to be added by hand —
   which spread the run wider than the price it replaces. Inline, the blurred
   run inherits the price's own spacing, size and baseline exactly. */
.price-hidden {
    /* The padlock carries the meaning visually; a hover title spells it out. */
    cursor: help;
}

.price-hidden-blur {
    /* Purely decorative: without filter support the mask alone is still
       uninformative. Relative, not a fixed px: the same blur would over-inflate
       the mask on the card's smaller price and look mild on the detail page's
       larger one. */
    filter: blur(0.2em);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    color: inherit;
}

/* The padlock follows the price (see hiddenPriceMarkup), sitting on the text's
   optical centre rather than the baseline. */
.price-hidden svg {
    vertical-align: middle;
}

/* The padlock is the way in to logging in. Inline, not inline-flex: an inline
   box's padding grows the tap target (a 12px glyph is a poor one) without
   growing the line box, and the negative margins pull the extra padding back out
   so the glyph sits 6px after the price exactly as before. */
.price-hidden-lock {
    padding: 4px;
    margin: -4px -4px -4px 2px;
    cursor: pointer;
    color: inherit;
}

/* The words behind the padlock and the blur: there for a screen reader, with no
   visual weight. */
.price-hidden-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}