/* ==========================================================================
   AWCompany ApS — User Engagement & Retention (Master Prompt #8)
   Scoped to .eng-* only. Reuses the site's own tokens and the row-list /
   status-pill patterns already established in css/mit-byggeprojekt.css and
   css/marketplace.css — no new visual language, per spec §101 (Scandinavian,
   clean, calm — no social-media-style notification overload).
   ========================================================================== */

/* ---- Header bell (spec §31, §102 — subtle, never aggressive) ------------- */
.eng-bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:none; background:transparent; cursor:pointer;
  color:inherit; padding:0;
}
.eng-bell svg{ width:20px; height:20px; }
.eng-bell__count{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--c-timber-dark,#a05a2c); color:#fff;
  font-size:0.62rem; font-weight:700; line-height:16px; text-align:center;
}
.eng-bell__count[hidden]{ display:none; }

.eng-bell-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:min(360px, 92vw);
  background: var(--c-surface); border:1px solid var(--c-line); box-shadow:0 8px 24px rgba(0,0,0,0.12);
  z-index:60; max-height:70vh; overflow-y:auto;
}
.eng-bell-panel[hidden]{ display:none; }
.eng-bell-panel__head{ display:flex; justify-content:space-between; align-items:center; padding:0.85rem 1rem; border-bottom:1px solid var(--c-line); }
.eng-bell-panel__head h3{ font-size:0.95rem; margin:0; }

/* ---- Notification rows (reused by both the bell panel and the full page) - */
.eng-notif-list{ display:flex; flex-direction:column; }
.eng-notif-row{ display:flex; gap:0.75rem; padding:0.85rem 1rem; border-bottom:1px solid var(--c-line); text-align:left; }
.eng-notif-row:last-child{ border-bottom:none; }
.eng-notif-row.is-unread{ background: var(--c-bg-alt); }
.eng-notif-row__icon{ font-size:1.1rem; line-height:1; margin-top:0.1rem; }
.eng-notif-row__body{ flex:1; min-width:0; }
.eng-notif-row__title{ font-weight:600; font-size:0.88rem; margin:0 0 0.2rem; }
.eng-notif-row__message{ font-size: var(--fs-small); color:var(--c-ink-soft); margin:0 0 0.25rem; }
.eng-notif-row__date{ font-size:var(--fs-label); color:var(--c-ink-faint); }

.eng-empty-note{ padding:1.5rem 1rem; text-align:center; color:var(--c-ink-faint); font-size:var(--fs-small); }
.eng-empty-note .btn{ margin-top:0.85rem; }

/* ---- Mine opdateringer — section tabs -------------------------------------*/
.eng-tabs{ display:flex; flex-wrap:wrap; gap:0.5rem; border-bottom:1px solid var(--c-line); margin-bottom:1.5rem; }
.eng-tab{
  background:none; border:none; cursor:pointer; padding:0.75em 0.2em; margin-right:1.25rem;
  font-size:0.85rem; color:var(--c-ink-faint); border-bottom:2px solid transparent;
}
.eng-tab.is-active{ color:var(--c-ink); border-bottom-color:var(--c-ink); font-weight:600; }
.eng-tab__count{ font-size:var(--fs-label); color:var(--c-ink-faint); }

.eng-panel[hidden]{ display:none; }

/* ---- Favourite / alert / search row lists (shared row shape) -------------- */
.eng-row-list{ display:flex; flex-direction:column; border:1px solid var(--c-line); }
.eng-row{ display:flex; gap:1rem; align-items:center; padding:0.9rem 1rem; border-bottom:1px solid var(--c-line); flex-wrap:wrap; }
.eng-row:last-child{ border-bottom:none; }
.eng-row__media{ width:64px; height:64px; flex-shrink:0; background:var(--c-bg-alt); overflow:hidden; }
.eng-row__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.eng-row__main{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:0.15rem; }
.eng-row__title{ font-weight:600; font-size:0.92rem; }
.eng-row__meta{ font-size:var(--fs-small); color:var(--c-ink-faint); }
.eng-row__price{ font-family:var(--f-display); font-weight:700; }
.eng-row__price-old{ font-size:var(--fs-small); color:var(--c-ink-faint); text-decoration:line-through; margin-right:0.4em; }
.eng-row__price-down{ color:#1e6b3c; }
.eng-row__price-up{ color:#8a2e2e; }
.eng-row__actions{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.eng-row__actions .btn{ font-size:0.76rem; padding:0.6em 1em; }
.eng-row__badge{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.04em;
  padding:0.25em 0.6em; background:var(--c-bg-alt); color:var(--c-ink-soft); align-self:flex-start;
}
.eng-row__badge.is-inactive{ background:#fbeaea; color:#8a2e2e; }

/* ---- Preference center -----------------------------------------------------*/
.eng-pref-list{ display:flex; flex-direction:column; gap:1rem; max-width:52ch; }
.eng-pref-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--c-line); }
.eng-pref-row__label{ font-size:0.9rem; }
.eng-pref-row__hint{ font-size:var(--fs-label); color:var(--c-ink-faint); margin-top:0.15rem; }

.eng-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.eng-switch input{ opacity:0; width:0; height:0; }
.eng-switch__track{
  position:absolute; inset:0; background:var(--c-line); border-radius:999px; cursor:pointer; transition:background 0.15s;
}
.eng-switch__track::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff;
  border-radius:50%; transition:transform 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.eng-switch input:checked + .eng-switch__track{ background:var(--c-ink); }
.eng-switch input:checked + .eng-switch__track::before{ transform:translateX(18px); }

/* ---- First-time / empty guidance (spec §106) ------------------------------*/
.eng-guide-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); margin-top:1.5rem; }
.eng-guide-card{ background:var(--c-surface); padding:var(--sp-3); text-align:center; }
.eng-guide-card__icon{ font-size:1.5rem; margin-bottom:0.5rem; }
.eng-guide-card__title{ font-weight:600; font-size:0.9rem; margin-bottom:0.35rem; }
.eng-guide-card__desc{ font-size:var(--fs-small); color:var(--c-ink-faint); margin-bottom:0.85rem; }

@media (max-width:640px){
  .eng-bell-panel{ position:fixed; top:auto; bottom:0; left:0; right:0; width:100%; max-height:80vh; }
  .eng-row{ flex-direction:column; align-items:flex-start; }
  .eng-row__actions{ width:100%; }
}