/* Live alerts: header bell, "notify me" buttons and the sheet (shared/alerts.js).
   Each page sets the --al-* colours to fit its own look. */
.alerts-bell { position: relative; }
.alerts-bell svg { width: 20px; height: 20px; }
.alerts-bell.is-on svg { animation: none; }
/* Small red dot on the bell once this device gets alerts */
.alerts-bell.is-on::after {
    content: ""; position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff3b4e; box-shadow: 0 0 0 2px var(--al-dot-ring, #041312);
}
@media (hover: hover) { .alerts-bell:hover svg { animation: alerts-ring .7s ease-in-out; } }
@keyframes alerts-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); }
}

.alerts-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem; padding: .7rem 1.2rem; border-radius: 999px;
    font: 700 .95rem var(--font-body, 'Tajawal', sans-serif); cursor: pointer;
    color: var(--al-cta-fg, #fff); background: var(--al-cta-bg, rgba(255, 255, 255, .1));
    border: 1px solid var(--al-cta-line, rgba(255, 255, 255, .25));
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s;
}
.alerts-cta svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .alerts-cta:hover { transform: translateY(-2px); } }

/* ---- The sheet: a centred card on computers, a bottom sheet on phones ---- */
.alerts-sheet {
    border: 0; padding: 0; margin: auto; background: transparent; color: inherit;
    width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible;
}
.alerts-sheet [hidden] { display: none !important; }
.alerts-sheet::backdrop { background: rgba(0, 0, 0, .55); }
.alerts-sheet[open] .alerts-card { animation: alerts-in .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes alerts-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }

.alerts-card {
    position: relative; text-align: center;
    padding: 2rem 1.5rem 1.4rem; border-radius: 24px;
    font-family: var(--font-body, 'Tajawal', sans-serif);
    color: var(--al-text, #eef7f5); background: var(--al-bg, #0b2423);
    border: 1px solid var(--al-line, rgba(160, 255, 235, .14));
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
    max-height: calc(100dvh - 32px); overflow-y: auto;
}
.alerts-close {
    position: absolute; top: .7rem; left: .7rem;
    width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: inherit; background: var(--al-soft, rgba(255, 255, 255, .07));
}
.alerts-icon {
    width: 60px; height: 60px; margin: 0 auto .8rem; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--al-accent-fg, #041312); background: var(--al-accent, #3fe0c5);
}
.alerts-icon svg { width: 30px; height: 30px; animation: alerts-ring 1.2s .3s ease-in-out; }
.alerts-card h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; }
.alerts-lead { margin: 0 0 1.2rem; color: var(--al-dim, #9db8b4); line-height: 1.7; }

.alerts-picks { border: 0; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .6rem; text-align: start; }
.alerts-picks legend { font-weight: 700; margin-bottom: .5rem; font-size: .95rem; }
.alerts-picks label {
    display: flex; align-items: center; gap: .75rem; cursor: pointer;
    padding: .7rem .85rem; border-radius: 14px;
    background: var(--al-soft, rgba(255, 255, 255, .05));
    border: 1px solid var(--al-line, rgba(160, 255, 235, .14));
    font-weight: 700; transition: border-color .2s, background .2s;
}
.alerts-picks label:has(input:checked) { border-color: var(--al-accent, #3fe0c5); }
.alerts-picks input { width: 20px; height: 20px; accent-color: var(--al-accent, #3fe0c5); flex: none; margin: 0; }
.pick-mark { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; padding: 4px; }
.pick-mark { overflow: hidden; }
.alerts-sheet .pick-mark img { width: 26px; height: 26px; max-width: none; object-fit: contain; }

.alerts-btn {
    display: block; width: 100%; padding: .85rem 1rem; border-radius: 14px; border: 0; cursor: pointer;
    font: 800 1.05rem var(--font-body, 'Tajawal', sans-serif); text-decoration: none; text-align: center;
    color: var(--al-accent-fg, #041312); background: var(--al-accent, #3fe0c5);
    transition: filter .2s, opacity .2s;
}
.alerts-btn:disabled { opacity: .55; cursor: wait; }
@media (hover: hover) { .alerts-btn:not(:disabled):hover { filter: brightness(1.08); } }
.alerts-link {
    display: block; margin: .7rem auto 0; padding: .3rem .6rem; border: 0; background: none; cursor: pointer;
    font: 600 .9rem var(--font-body, 'Tajawal', sans-serif); color: var(--al-dim, #9db8b4); text-decoration: underline;
}
.alerts-status:empty { display: none; }
.alerts-status { margin: .9rem 0 0; font-weight: 700; line-height: 1.6; }

.alerts-body[data-view="ios"], .alerts-body[data-view="elsewhere"] { text-align: start; line-height: 1.8; }
.alerts-body ol { margin: .4rem 0 0; padding-inline-start: 1.3rem; }
.alerts-body ol li { margin-bottom: .45rem; }
.alerts-body ol svg { display: inline; vertical-align: -3px; color: #0a84ff; }
.alerts-body p { margin: 0 0 .6rem; }

@media (max-width: 560px) {
    .alerts-sheet { margin: auto auto 0; width: 100vw; max-width: 100vw; }
    .alerts-card { border-radius: 24px 24px 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
    .alerts-sheet[open] .alerts-card { animation-name: alerts-up; }
    @keyframes alerts-up { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
    .alerts-sheet[open] .alerts-card, .alerts-icon svg, .alerts-bell:hover svg { animation: none !important; }
}