/* ALFIDAONE announcement card: one design for the Control Center preview and the Customer POS (popup, inbox and details).
 * Logical properties only, so Arabic (RTL) mirrors by itself. Colours come from the host page's tokens with the same fallbacks. */
.an-card {
  --an-navy: var(--navy-800, #13294f); --an-gold: var(--gold, #c9a349); --an-gold-text: var(--gold-text, #7a5a12); --an-gold-soft: var(--gold-soft, #f7f0de);
  --an-ink: var(--ink, #0f1c33); --an-muted: var(--muted, #5b6878); --an-line: var(--line, #dfe5ee); --an-surface: var(--surface, #fff);
  --an-info: #1d4ed8; --an-info-bg: #e8effd; --an-focus: var(--focus, #1d4ed8);
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%;
  padding: 14px 16px 14px; background: var(--an-surface); color: var(--an-ink);
  border: 1px solid var(--an-line); border-radius: 16px; box-shadow: 0 14px 38px rgba(15, 28, 51, 0.22), 0 2px 6px rgba(15, 28, 51, 0.08);
  font: 14px/1.5 var(--font, system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif); text-align: start; overflow-wrap: anywhere;
}
.an-card *, .an-card *::before, .an-card *::after { box-sizing: border-box; }
.an-card::before { content: ""; position: absolute; inset-inline: 16px; inset-block-start: -1px; height: 3px; border-radius: 0 0 6px 6px; background: var(--an-gold); }
.an-card.an-service::before { background: var(--an-info); }
.an-card .an-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.an-card .an-logo { display: block; height: 28px; width: auto; max-width: 150px; object-fit: contain; flex: none; }
.an-card .an-heading { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--an-gold-text); }
.an-card[dir="rtl"] .an-heading { letter-spacing: 0; text-transform: none; font-size: 12px; }
.an-card .an-x {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -4px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--an-muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.an-card .an-x:hover { background: #eef2f8; color: var(--an-ink); }
.an-card .an-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.an-card .an-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.4; }
.an-cat { background: #eef2f8; color: #34445e; }
.an-tag { background: var(--an-gold-soft); color: var(--an-gold-text); }
.an-service .an-tag { background: var(--an-info-bg); color: var(--an-info); }
.an-expired-tag { background: #f1f1f1; color: #555; }
.an-card .an-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 750; color: var(--an-ink); }
.an-card .an-sum { margin: 0; color: #34445e; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-card .an-body { margin: 0; color: #34445e; white-space: pre-line; }
.an-card .an-img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: cover; border-radius: 12px; background: #eef2f8; }
.an-card .an-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 2px; }
.an-card .an-date { color: var(--an-muted); font-size: 12px; }
.an-card .an-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.an-card .an-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--an-line);
  background: var(--an-surface); color: var(--an-ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.an-card .an-btn.an-primary { background: var(--an-navy); border-color: var(--an-navy); color: #fff; }
.an-card .an-btn.an-primary:hover { background: #0f2040; }
.an-card .an-btn.an-gold { background: var(--an-gold); border-color: var(--an-gold); color: #0f1c33; }
.an-card .an-btn[disabled], .an-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.an-card button:focus-visible, .an-card a:focus-visible { outline: 3px solid var(--an-focus); outline-offset: 2px; }

/* The popup: a compact card in the top corner (top-right in English, top-left in Arabic), below the top bar, never modal. */
.an-popup-host { position: fixed; z-index: 4000; inset-block-start: 72px; inset-inline-end: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 88px); pointer-events: none; display: flex; flex-direction: column; }
.an-popup-host > .an-card { pointer-events: auto; max-height: inherit; overflow: auto; animation: an-in 0.22s ease-out; }
.an-popup-host .an-card.an-leaving { animation: an-out 0.16s ease-in forwards; }
@keyframes an-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes an-out { to { opacity: 0; transform: translateY(-6px); } }
.an-card .an-grab { display: none; }

/* Phones and small tablets: a compact bottom sheet. It sits above the home bar and never covers the whole screen. */
@media (max-width: 640px) {
  .an-popup-host { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; width: auto; max-height: 78vh; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .an-popup-host > .an-card { border-radius: 20px 20px 14px 14px; animation-name: an-up; }
  .an-popup-host .an-grab { display: block; align-self: center; width: 40px; height: 4px; border-radius: 4px; background: #cfd6e2; margin: -4px 0 2px; flex: none; }
  .an-img { max-height: 24vh; }
}
@keyframes an-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-popup-host > .an-card, .an-popup-host .an-card.an-leaving { animation: none; } }

/* Inbox rows and the details panel use the same pieces. */
.an-detail { box-shadow: none; border-color: var(--an-line); }
.an-detail .an-title { font-size: 18px; }
.an-detail .an-img { max-height: 260px; }
.an-detail .an-sum { display: block; -webkit-line-clamp: unset; font-weight: 600; color: var(--an-ink); }

/* The Control Center preview frames. */
.an-frame { display: grid; place-items: start center; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #e9eef6, #f4f6fa); border: 1px dashed #c3cde0; min-width: 0; }
.an-frame .an-card { width: min(380px, 100%); }
.an-frame.an-mobile .an-card { width: min(340px, 100%); border-radius: 20px 20px 14px 14px; }
.an-frame .an-popup-host-static { width: 100%; display: grid; place-items: start center; }