/* ============================================================
   ShowCards card-share lander
   A light, bright page; the shared card carries its own brand
   colour as a contained card (like a real loyalty card). Matches
   the main site's "Kind Utility" system. See index.php for the
   shell markup; share.js injects the card preview.
   ============================================================ */

:root {
    --sc-blue: #2f73f0;
    --sc-blue-deep: #1e56c4;
    /* Hetzelfde blauw, maar dit blijft staan: een winkelierspagina overschrijft `--sc-blue` met
       zijn eigen knopkleur, en dan zou de tweede knop bij het aanwijzen die kleur aannemen. Bij
       een lichte knopkleur wordt hij dan wit op wit en staat er niets meer. Wat van ons is (de
       tweede knop, de focusrand) houdt onze kleur; wat van hem is krijgt de zijne. */
    --sc-blue-vast: #2f73f0;
    /* De letter op de hoofdknop. Een winkelierspagina mag hem overschrijven; zie share.js. */
    --sc-knop-ink: #fff;
    /* De maat van de twee regels boven de kaart. Een winkelierspagina zet ze zelf; zie index.php. */
    --sc-kop: 1.05rem;
    --sc-note: .88rem;
    --sc-navy: #0b1b3a;
    --sc-ink: #0e1729;
    --sc-ink-soft: #4b5565;
    --sc-line: #e5e9f0;
    --sc-canvas: #fbfcfe;
    --sc-surface: #ffffff;

    --sc-r-md: 14px;
    --sc-r-lg: 20px;
    --sc-r-xl: 26px;
    --sc-r-pill: 999px;

    --sc-ease: cubic-bezier(.22, 1, .36, 1);
    --sc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --sc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* the shared card's brand colour, set inline by share.js */
    --brand: var(--sc-blue);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sc-font);
    background: var(--sc-canvas);
    color: var(--sc-ink);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 22px calc(30px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* a soft, light hint of the card's colour at the top — keeps the page bright */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 55vh;
    pointer-events: none;
    background: radial-gradient(75% 65% at 50% -8%,
                color-mix(in srgb, var(--brand) 15%, transparent), transparent 72%);
}

.wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: share-in .55s var(--sc-ease) both;
}
@keyframes share-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* intro line ("Someone shared a loyalty card with you.") */
/* De regel bovenaan draagt de naam van de winkel, en dat is de eerste vraag van de bezoeker: van
   wie is dit? Daarom altijd vet, los van de maat die de winkelier kiest. */
.sub {
    font-size: var(--sc-kop);
    font-weight: 700;
    line-height: 1.4;
    color: var(--sc-ink-soft);
    margin: 0 0 24px;
}

/* De regel onder de zin op een winkelierspagina: kleiner en rustiger, want het is achtergrond
   en geen mededeling. De marge van .sub gaat eraf, anders staan de twee regels los van elkaar
   terwijl ze samen een alinea zijn. */
.sub:has(+ .note) { margin-bottom: 8px; }
.note {
    font-size: var(--sc-note);
    line-height: 1.5;
    color: var(--sc-ink-soft);
    opacity: .85;
    margin: 0 0 24px;
}

/* the shared card — brand colour + fg set inline by share.js */
.card {
    border-radius: var(--sc-r-xl);
    padding: 26px 22px;
    margin: 0 auto 24px;
    box-shadow: 0 26px 60px -16px rgba(11, 27, 58, .42),
                inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* brand logo — the catalog logos carry the brand colour as their own bg, so on
   a card of that colour the mark blends in cleanly */
.brandlogo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px auto 18px;
}
.brandlogo img { max-width: 78%; max-height: 66px; object-fit: contain; }

.label {
    font-size: 1rem;
    font-weight: 700;
    opacity: .95;
    margin: 0 0 14px;
}

/* the barcode always sits on white so any till scanner can read it */
.barcode {
    background: #fff;
    border-radius: var(--sc-r-md);
    padding: 18px 16px 12px;
    box-shadow: 0 6px 18px rgba(11, 27, 58, .18);
}
.barcode canvas {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.barcode .bcnum {
    font-family: var(--sc-mono);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--sc-ink);
    margin-top: 10px;
    word-break: break-all;
    font-size: .92rem;
}

/* ---- CTAs, on the light page: the main-site blue primary + ghost ---- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .95rem 1.4rem;
    border-radius: var(--sc-r-pill);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .18s var(--sc-ease), box-shadow .18s var(--sc-ease), background .18s var(--sc-ease), border-color .18s var(--sc-ease), color .18s var(--sc-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--sc-blue-vast); outline-offset: 3px; }

.btn.primary {
    background: var(--sc-blue);
    color: var(--sc-knop-ink);
    margin-top: 4px;
    margin-bottom: 12px;
    /* De gloed komt uit de knopkleur zelf en staat niet vast op blauw. Een winkelier die zijn
       knop rood maakt kreeg anders een rode knop met een blauwe schaduw eronder. */
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--sc-blue) 50%, transparent);
}
.btn.primary:hover {
    background: var(--sc-blue-deep);
    box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--sc-blue) 55%, transparent);
}

.btn.ghost {
    background: var(--sc-surface);
    color: var(--sc-ink);
    box-shadow: inset 0 0 0 1.5px var(--sc-line);
}
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sc-blue-vast); color: var(--sc-blue-vast); }

/* the small ShowCards app-icon on the primary button */
.btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

/* loading + invalid states */
.err {
    font-size: 1.05rem;
    color: var(--sc-ink-soft);
    margin: 0 0 20px;
    line-height: 1.5;
}

.foot {
    margin: 26px 0 0;
    font-size: .82rem;
    color: var(--sc-ink-soft);
    opacity: .9;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .wrap { animation: none; }
    .btn { transition: none; }
}