.push-preference {
    border-top: 1px solid var(--border, #eadff4);
    display: none;
    padding: 12px;
}

.push-preference__button {
    align-items: center;
    background: #faf7fd;
    border: 1px solid #eadff4;
    border-radius: 16px;
    color: #26163b;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 68px;
    padding: 10px 12px;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
}

.push-preference__button:hover,
.push-preference__button:focus-visible {
    border-color: #b99bda;
    box-shadow: 0 10px 28px rgba(82, 41, 132, .12);
    outline: none;
}

.push-preference__button:active { transform: scale(.99); }
.push-preference__button:disabled { cursor: not-allowed; opacity: .68; }

.push-preference__icon,
.push-preference__switch {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.push-preference__icon {
    background: linear-gradient(135deg, #fff2e9, #efe7ff);
    border-radius: 13px;
    color: #6d28d9;
    height: 42px;
    width: 42px;
}

.push-preference__icon svg { height: 21px; width: 21px; }
.push-preference__copy { min-width: 0; }
.push-preference__copy strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.push-preference__copy small { color: #746985; display: block; font-size: 12px; line-height: 1.35; margin-top: 3px; }

.push-preference__switch {
    background: #d9d0e3;
    border-radius: 999px;
    height: 24px;
    justify-content: flex-start;
    padding: 3px;
    transition: background .2s ease;
    width: 42px;
}

.push-preference__switch::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(28, 12, 47, .2);
    content: '';
    height: 18px;
    transition: transform .2s ease;
    width: 18px;
}

.push-preference[data-push-state="active"] .push-preference__switch { background: #6d28d9; }
.push-preference[data-push-state="active"] .push-preference__switch::after { transform: translateX(18px); }
.push-preference[data-push-state="active"] .push-preference__icon { background: #efe7ff; }
.push-preference.is-busy .push-preference__icon svg { animation: push-bell-pulse .8s ease-in-out infinite alternate; }

@keyframes push-bell-pulse { to { transform: scale(1.12) rotate(6deg); } }

@media (max-width: 640px) {
    .push-preference { display: block; padding: 10px; }
    .push-preference__button { min-height: 64px; }
}