/* Strike ICEBAR – gedeelde huisstijl (kassa, keuken, afhaalscherm, beheer) */
:root {
    --ice: #D3F2FB;          /* IJsblauw – achtergrond */
    --navy: #013278;         /* Strike-navy – tekst */
    --deep: #002F6E;         /* Diepnavy – knoppen en pills */
    --white: #FFFFFF;
    --glacier: #4477A1;      /* Gletsjerblauw */
    --glacier-light: #B1DEEC;/* Licht gletsjerblauw – lijnen en kaders */
    --pink: #FF66C4;         /* Accent, hoogstens één keer per scherm */
    --font-head: "ICEBAR Display", "Hammersmith One", "Century Gothic", "Avant Garde", Futura, "Trebuchet MS", sans-serif;
    --font-body: "ICEBAR Body", "Josefin Sans", "Century Gothic", "Segoe UI", system-ui, sans-serif;
    --radius: 16px;
    --shadow: 0 2px 0 rgba(1, 50, 120, .15), 0 8px 24px rgba(1, 50, 120, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--ice);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .head {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.15;
    margin: 0 0 .5em;
}
a { color: var(--navy); }
.muted { color: var(--glacier); }
.small { font-size: .875rem; }
code { background: var(--white); border: 1px solid var(--glacier-light); border-radius: 6px; padding: .05em .35em; }

/* Knoppen als pills */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: .55em 1.2em;
    border: 2px solid var(--deep); border-radius: 999px;
    background: var(--white); color: var(--deep);
    font: 700 1rem/1 var(--font-head); letter-spacing: .06em;
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background .12s, color .12s, transform .06s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--deep); color: var(--white); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
.btn-ghost { background: transparent; }
.btn-xl { min-height: 64px; font-size: 1.25rem; padding: .6em 1.6em; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.pill {
    display: inline-block; padding: .3em .85em; border-radius: 999px;
    background: var(--deep); color: var(--white);
    font: 700 .75rem/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
}
.pill-light { background: var(--glacier-light); color: var(--navy); }
.pill-outline { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.pill-accent { background: var(--pink); color: var(--white); }

.alert {
    background: var(--white); border-left: 6px solid var(--deep);
    padding: .75em 1em; border-radius: 10px; margin: 1em 0;
}
.alert-ok { border-left-color: var(--glacier); }

/* IJsbergrand onderaan (decor) */
.iceberg-edge {
    position: fixed; left: 0; right: 0; bottom: 0; height: 90px;
    background: url("../img/ijsbergen.svg") repeat-x bottom / 800px 90px;
    pointer-events: none; z-index: 0;
}

/* Koppelscherm */
.pair-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem 120px; }
.pair-card {
    position: relative; z-index: 1; width: min(460px, 100%);
    background: var(--white); border-radius: 24px; padding: 2rem; box-shadow: var(--shadow); text-align: center;
}
.pair-brand { margin-bottom: 1rem; }
.pair-logo { max-width: 70%; max-height: 120px; }
.pair-name, .brand-name { font: 700 1.6rem/1.1 var(--font-head); letter-spacing: .08em; }
.pair-input {
    display: block; width: 100%; margin: 1rem 0; padding: .5em;
    font: 700 2.2rem/1 var(--font-head); letter-spacing: .3em; text-align: center; text-transform: uppercase;
    color: var(--navy); border: 3px solid var(--glacier-light); border-radius: 16px; background: var(--ice);
}
.pair-input:focus { outline: none; border-color: var(--deep); }
.pair-penguin { position: fixed; right: 4vw; bottom: 40px; width: 140px; z-index: 1; pointer-events: none; }

/* Sneeuw (zoals op de website), enkel waar aangezet */
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.snow i {
    position: absolute; top: -20px; display: block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--white); opacity: .85; animation: fall linear infinite;
}
.snow i.flake {
    width: 18px; height: 18px; border-radius: 0; background: none; opacity: .9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0-9V9M-7.8-4.5L7.8 4.5M-7.8 4.5L7.8-4.5M0-6l-2-2M0-6l2-2M0 6l-2 2M0 6l2 2'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes fall {
    to { transform: translate3d(var(--drift, 30px), 110vh, 0) rotate(var(--spin, 180deg)); }
}
@media (prefers-reduced-motion: reduce) { .snow { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }