/*
 * Store Analytics — reveal button and anti-flash guard.
 *
 * Scoped entirely to .mct-sa-* classes and the three contact value ids, so
 * nothing here can affect any existing brand styling. Loaded on landing pages
 * only (see the module's layout XML).
 */

/*
 * Anti-flash: while the guard class is on <html>, hide the CONTENTS of the three
 * contact values so a full number is never painted before masking runs.
 *
 * visibility (not display) keeps the row's height, so the card does not jump when
 * the masked value appears. The class is always removed within 2 s — on success by
 * the tracker, otherwise by the inline timer — so a script failure shows the full
 * values rather than hiding them forever.
 */
.mct-sa-mask-pending #pc-store-phone-val,
.mct-sa-mask-pending #pc-store-email-val,
.mct-sa-mask-pending .pc-store-whatsapp-row a {
    visibility: hidden;
}

/* The masked value itself, once rendered. */
.mct-sa-masked {
    font-variant-numeric: tabular-nums;
}

/*
 * Small grey pill, deliberately understated so it reads as a utility control on
 * both the Paycheap and Ojong cards rather than competing with their CTAs.
 */
.mct-sa-reveal {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    background: #f3f4f6;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    /* Reset the host theme's button styling without !important. */
    box-shadow: none;
    text-shadow: none;
    vertical-align: middle;
}

.mct-sa-reveal:hover,
.mct-sa-reveal:focus {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #111827;
}

/* Keyboard users must be able to see what is focused. */
.mct-sa-reveal:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/*
 * At phone width the contact rows are already tight, so let the button drop onto
 * its own line instead of forcing a horizontal scroll. 360px is the narrow target
 * the brief calls out.
 */
@media (max-width: 420px) {
    .mct-sa-reveal {
        display: inline-block;
        margin-left: 0;
        margin-top: 6px;
    }
}