/* Sets · push-prompt.css
   De vraag om meldingen aan te zetten. Leunt op .pwa-install-banner voor
   plaatsing en animatie; hier alleen wat die banner niet dekt. Zie
   js/push-prompt.js. */

/* De installatiebanner zweeft vlak boven de onderrand, maar deze vraag komt
   op de startpagina — waar de tabbalk én de "Sessie loggen"-knop al staan.
   Zonder deze verhoging dekt de popup precies de knop af waar de gebruiker
   daarna heen wil. */
.push-prompt {
    bottom: calc(172px + env(safe-area-inset-bottom));
}

.push-prompt-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sets-accent-text);
    border-radius: 12px;
    background: rgba(198, 244, 50, 0.12);
    border: 1px solid rgba(198, 244, 50, 0.22);
}

.push-prompt-title {
    font-size: 14px;
    font-weight: 700;
    color: #f4f4f5;
    line-height: 1.3;
}

.push-prompt-text {
    font-size: 12px;
    color: #a1a1aa;
    margin-top: 2px;
    line-height: 1.45;
}

.push-prompt-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #71717a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s ease;
}

.push-prompt-close:active {
    color: #e4e4e7;
}

.push-prompt-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.push-prompt-later,
.push-prompt-accept {
    flex: 1;
    height: 40px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.push-prompt-later {
    background: transparent;
    border: 1px solid rgba(63, 63, 70, 0.6);
    color: #a1a1aa;
}

.push-prompt-accept {
    /* De hoofdactie in hetzelfde accentgroen als "Sessie loggen": dit is
       waar de gebruiker naartoe geleid wordt. */
    background: #c6f432;
    border: none;
    color: #09090b;
    font-weight: 800;
}

.push-prompt-accept:disabled {
    opacity: 0.6;
    cursor: default;
}

.push-prompt-later:active,
.push-prompt-accept:active:not(:disabled) {
    transform: scale(0.98);
}

/* ── Licht thema ─────────────────────────────────────────────── */
html:not(.dark) .push-prompt-title {
    color: #18181b;
}

html:not(.dark) .push-prompt-text {
    color: #52525b;
}

html:not(.dark) .push-prompt-icon {
    background: rgba(111, 140, 18, 0.12);
    border-color: rgba(111, 140, 18, 0.28);
}

html:not(.dark) .push-prompt-close {
    color: var(--sets-text-3);
}

html:not(.dark) .push-prompt-later {
    border-color: rgba(212, 212, 216, 0.9);
    color: #52525b;
}

@media (prefers-reduced-motion: reduce) {
    .push-prompt-later:active,
    .push-prompt-accept:active:not(:disabled) {
        transform: none;
    }
}