/*
 * components/notification.css
 *
 * What:  The notifications page (/notifications) and the header bell badge.
 * Why:   One component file per surface, per the project layout — the page
 *        chrome, the row, the tabs and the opt-in banner all belong to the
 *        same feature and change together.
 *
 *        Every colour, space and radius comes from the base.css tokens so the
 *        page follows the brand automatically; nothing here hard-codes a hex.
 *
 * Used:  linked from views/_layout.ejs; markup in views/notification/list.ejs
 *        and views/partials/header.ejs.
 */

/* ── Page shell ─────────────────────────────────────────────── */

.ntf {
    max-width: 760px;                    /* a reading column, not full width */
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-16);
}

.ntf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ntf__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.ntf__mark-all {
    border: 0;
    background: none;
    padding: var(--space-2);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.ntf__mark-all:hover { background: var(--color-primary-soft); }

/* ── Push opt-in banner ─────────────────────────────────────── */
/* Revealed by pages/notifications.js only when this device could receive
   push and has not been asked yet — see maybeShowOptin(). */

.ntf-optin {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--color-primary-soft);
    border-radius: var(--radius-lg);
}

.ntf-optin__text  { flex: 1; min-width: 0; }

.ntf-optin__title {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.ntf-optin__body {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.ntf-optin__btn {
    flex-shrink: 0;
    border: 0;
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: #FFFFFF;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.ntf-optin__btn:hover { background: var(--color-primary-dark); }

/* ── Filter tabs ────────────────────────────────────────────── */
/* Scrollable rather than wrapping: five tabs wrap to two lines on a narrow
   phone, which pushes the list below the fold on the page's first paint. */

.ntf-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ntf-tabs::-webkit-scrollbar { display: none; }

.ntf-tabs__tab {
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.ntf-tabs__tab:hover { border-color: var(--color-text-soft); }

.ntf-tabs__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ── The list ───────────────────────────────────────────────── */

.ntf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ntf-row + .ntf-row { border-top: 1px solid var(--color-border-soft); }

.ntf-row__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
}

.ntf-row__link:hover { background: var(--color-bg-alt); }

/* Unread rows carry a tinted ground AND a dot. Colour alone would be
   invisible to a colour-blind customer, and the dot alone is easy to miss
   when scanning a long list. */
.ntf-row--unread                  { background: var(--color-bg-soft); }
.ntf-row--unread .ntf-row__title  { font-weight: 600; }

.ntf-row__ic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

/* One tint per category, so the customer can tell an order update from an
   offer without reading either. */
.ntf-row__ic--order     { background: var(--color-primary-soft); color: var(--color-primary); }
.ntf-row__ic--loyalty   { background: #E6F6EE;                   color: var(--color-success); }
.ntf-row__ic--offers    { background: #FEF3DC;                   color: #B87900; }
.ntf-row__ic--community { background: #E7F0FE;                   color: var(--color-info); }
.ntf-row__ic--account   { background: var(--color-bg-alt);       color: var(--color-text-muted); }

.ntf-row__main {
    flex: 1;
    min-width: 0;                        /* lets long words wrap, not overflow */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ntf-row__title {
    font-size: 0.9375rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.ntf-row__body {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.ntf-row__time {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-soft);
}

.ntf-row__dot {
    flex-shrink: 0;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── States ─────────────────────────────────────────────────── */

.ntf-state {
    padding: var(--space-8) 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

.ntf-empty {
    padding: var(--space-16) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.ntf-empty__icon  { color: var(--color-text-soft); margin-bottom: var(--space-4); }

.ntf-empty__title {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.ntf-empty__body  { margin: 0; font-size: 0.875rem; }

.ntf__more {
    display: block;
    width: 100%;
    margin-top: var(--space-5);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.ntf__more:hover { background: var(--color-bg-alt); }

/* ── Header bell ────────────────────────────────────────────── */
/* The bell reuses .header-quick__item wholesale; only the badge tint is
   its own, so an unread count reads as an alert rather than as a cart
   quantity. */

.header-quick__bell { position: relative; }

.header-quick__bell .header-quick__badge {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* ── Bell ring, on arrival only ──────────────────────────────── */
/* Played by EatNDealNotifyBell.ring(), which only the push handler calls.
   The bell must never move on a page load or a poll: a bell that shakes
   when nothing arrived teaches the customer to ignore it. */

@keyframes ntf-bell-ring {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(14deg); }
    30%      { transform: rotate(-12deg); }
    45%      { transform: rotate(9deg); }
    60%      { transform: rotate(-7deg); }
    75%      { transform: rotate(4deg); }
}

.header-quick__bell.is-ringing svg {
    animation: ntf-bell-ring 0.9s ease-in-out;
    transform-origin: 50% 15%;   /* swings from the crown, like a real bell */
}

/* Someone who has asked for less motion still gets the badge and the toast;
   they just do not get the swing. */
@media (prefers-reduced-motion: reduce) {
    .header-quick__bell.is-ringing svg { animation: none; }
}