/* The alerts card (alerts/card.php) on the account page's Alerts tab. */
.alerts-card { border: 1px solid var(--tmb-gray-300); border-radius: 8px; padding: 18px 20px; background: #fff; }
.alerts-msg { font-weight: 600; margin-bottom: 12px; }
#alerts-state[data-state="on"] .alerts-msg { color: var(--tmb-green-700); }
.alerts-card .btn { min-width: 180px; }
.alerts-card [hidden] { display: none !important; }
/* front.css forces every <button> to a grey background with !important,
   which left white text on grey. Re-assert the fills on this card only. */
.alerts-card .btn-success, .alerts-card .btn-success:focus {
    background-color: var(--tmb-green-700) !important; border-color: var(--tmb-green-700) !important; color: #fff !important;
}
.alerts-card .btn-success:hover:not(:disabled) { background-color: var(--tmb-in) !important; border-color: var(--tmb-in) !important; }
.alerts-card .btn-success:disabled { background-color: var(--tmb-gray-600) !important; border-color: var(--tmb-gray-600) !important; opacity: .65; }
.alerts-card .btn-outline-secondary { background-color: #fff !important; color: var(--tmb-gray-700) !important; border-color: var(--tmb-gray-500) !important; }
.alerts-ios { margin-top: 14px; padding: 12px 14px; background: var(--tmb-gray-100); border-radius: 6px; }
.alerts-ios ol { margin: 6px 0 0 18px; padding: 0; }
.alerts-topics { margin-top: 24px; border: 1px solid var(--tmb-gray-300); border-radius: 8px; padding: 16px 20px; background: #fff; }
.alerts-topics[hidden] { display: none !important; }
.alerts-topics-sub { color: var(--tmb-gray-600); font-size: 13px; margin-bottom: 6px; }
.alerts-topic-group { margin-top: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tmb-gray-600); }
/* Plays | Shortlists side by side (topics.json "columns"); stacked on a phone */
.alerts-topic-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 575.98px) { .alerts-topic-cols { grid-template-columns: 1fr; } }
/* A row is the topic's text and two switches, Push then Email (Oct 6 2026), each
   38px wide with a 14px gap; the group heading's column labels take the same
   widths so they sit over the switches. .alerts-topics prefix: MemberPress's
   `.mp_wrapper label { display: inline-block }` outranks a single class. */
.alerts-topics .alerts-topic { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; margin: 0; border-bottom: 1px solid var(--tmb-gray-100); font-weight: 400; }
.alerts-topics .alerts-topic-text { flex: 1 1 auto; line-height: 22px; }   /* = the switch height, so the label centres on it */
.alerts-topics .alerts-topic-text small { display: block; line-height: 1.4; margin-top: 2px; color: var(--tmb-gray-600); }
.alerts-topics .alerts-switch { display: flex; flex: 0 0 38px; margin: 0; cursor: pointer; }
.alerts-topics .alerts-topic-group { display: flex; align-items: flex-end; gap: 14px; }
.alerts-topics .alerts-topic-group > span:first-child { flex: 1 1 auto; }
.alerts-col-labels { display: flex; gap: 14px; }
.alerts-col-labels span { flex: 0 0 38px; text-align: center; font-size: 11px; }
/* the two channel rows above the list: name, All on / All off, a note (the email address) */
.alerts-channels { margin: 10px 0 4px; }
.alerts-channel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--tmb-gray-100); }
.alerts-channel[hidden] { display: none; }   /* Email, while api.php does not offer it */
.alerts-channel-name { font-weight: 600; min-width: 48px; }
.alerts-topics .alerts-all { font-size: 12px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--tmb-gray-400); border-radius: 12px;
    background: #fff !important; color: var(--tmb-gray-700) !important; cursor: pointer; line-height: 1.4; }
.alerts-topics .alerts-all:hover:not(:disabled) { border-color: var(--tmb-green-700); color: var(--tmb-green-700) !important; }
.alerts-topics .alerts-all:disabled { opacity: .5; cursor: not-allowed; }
.alerts-channel-note { flex: 1 1 100%; color: var(--tmb-gray-600); font-size: 12px; }
@media (min-width: 576px) { .alerts-channel-note { flex: 1 1 auto; text-align: right; } }
/* a switch drawn from a plain checkbox (no framework dependency on the WP page) */
.alerts-topic input[type=checkbox] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 38px; height: 22px; margin: 0;
    border-radius: 11px; background: var(--tmb-gray-400); position: relative; cursor: pointer; transition: background .15s;
}
.alerts-topic input[type=checkbox]::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: left .15s;
}
.alerts-topic input[type=checkbox]:checked { background: var(--tmb-green-700); }
.alerts-topic input[type=checkbox]:checked::after { left: 18px; }
.alerts-topic input[type=checkbox]:disabled { opacity: .6; }
/* locked: push is off on this device (alerts.js lockTopics): the PUSH switches
   only; the email switches and the text stay live */
.alerts-topics.is-locked .alerts-switch:has(input[data-channel=push]) { cursor: not-allowed; }
.alerts-topics.is-locked .alerts-topic input[data-channel=push] { background: var(--tmb-gray-300); opacity: 1; cursor: not-allowed; }
.alerts-topics.is-locked .alerts-topic input[data-channel=push]:checked { background: var(--tmb-gray-500); }   /* on vs off still readable */
.alerts-topic input[type=checkbox]:focus-visible { outline: 2px solid var(--tmb-blue); outline-offset: 2px; }
.alerts-what { margin-bottom: 20px; color: var(--tmb-gray-700); }   /* sits above the card */
/* bullets under the heading's first letter; div. outranks MemberPress's later
   `.mepr-account-container ul { margin-left: 3em }` (account.css) */
div.alerts-what > ul { margin: 6px 0 0; padding-left: 1.1em; }
div.alerts-what > ul[hidden] { display: none; }
.alerts-what li { margin-bottom: 4px; }