/* ==========================================================================
   Ekal — the lawyer first-month offer's banner (B20, D12): "glass bar + light
   sweep". templates/partials/_promo_banner.html, static/js/ek-promo.js.

   A slim navy glass bar in normal flow under the top navigation (never fixed:
   it must not cover the cookie notice or the phone tab bar). The text is
   static; a soft light sweeps across it every ~6 s, drawn by a pseudo-element,
   right to left in Arabic. Nothing moves under prefers-reduced-motion. Its own
   tokens (the shell's navy), so it renders on the public pages and inside the
   dashboard the same. White on #2a306e is 12.6:1, the gold lead 10:1 (AA).
   ========================================================================== */
.ekp {
  --ekp-navy: #2a306e; --ekp-navy-2: #3b45b0; --ekp-deep: #1d2257; --ekp-gold: #fde68a;
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  color: #fff; line-height: normal;
  background: linear-gradient(100deg, rgba(29, 34, 87, .97) 0%, rgba(42, 48, 110, .96) 48%, rgba(59, 69, 176, .94) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(30, 36, 100, .12);
}
.ekp[hidden] { display: none !important; }
.ekp *, .ekp *::before, .ekp *::after { box-sizing: border-box; }
/* the light sweep: a soft band crossing the bar once, then resting off-screen until the next ~6 s */
.ekp::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: ekp-sweep 6s cubic-bezier(.45, .05, .35, 1) 1.2s infinite;
}
html[dir="rtl"] .ekp::after { transform: translateX(100%); animation-name: ekp-sweep-rtl; }
@keyframes ekp-sweep { 0% { transform: translateX(-100%); } 26%, 100% { transform: translateX(100%); } }
@keyframes ekp-sweep-rtl { 0% { transform: translateX(100%); } 26%, 100% { transform: translateX(-100%); } }

.ekp-in {
  max-width: 1280px; margin-inline: auto; min-height: 48px; padding: 7px 16px;
  display: flex; align-items: center; gap: 12px;
}
/* the message and its button, centred together; the close at the line's end (balanced by a spacer) */
.ekp-in::before { content: ''; width: 34px; flex: none; }
.ekp.is-inline .ekp-in::before { display: none; }
.ekp-msg { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ekp .ekb-ico { width: 18px; height: 18px; display: block; flex: none; fill: currentColor; }
.ekp-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: var(--ekp-gold); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ekp-tx { margin: 0; flex: 0 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: #fff; }
.ekp-tx b { font-weight: 800; color: var(--ekp-gold); }
.ekp-until { color: rgba(255, 255, 255, .82); font-weight: 600; white-space: nowrap; }
.ekp-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 16px;
  border-radius: 999px; background: #fff; color: var(--ekp-navy); font-size: 13.5px; font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(10, 14, 50, .22);
  transition: background-color .15s ease, transform .15s ease;
}
.ekp-cta:hover { background: #eef0fb; color: var(--ekp-deep); }
.ekp-cta:active { transform: translateY(1px); }
.ekp-x {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .86); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ekp-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ekp-cta:focus-visible, .ekp-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ekp-x .ekb-ico { width: 16px; height: 16px; }

/* inside a dashboard page (the lawyer's Plan & billing banner slot): a card */
.ekp.is-inline { border-radius: 18px; border: 1px solid rgba(42, 48, 110, .35); margin-bottom: 14px; }
.ekp.is-inline .ekp-in { min-height: 52px; padding-block: 8px; padding-inline: 14px 10px; }
.ekp.is-inline .ekp-msg { justify-content: flex-start; }
.ekp.is-inline .ekp-tx { flex: 1 1 auto; }

@media (max-width: 640px) {
  .ekp-in { padding: 8px 12px; gap: 8px; align-items: center; }
  .ekp-in::before { display: none; }
  .ekp-msg { justify-content: flex-start; gap: 10px; }
  .ekp-ic { display: none; }
  .ekp-tx { flex: 1 1 auto; font-size: 13.5px; }
  .ekp-cta { min-height: 32px; padding: 5px 12px; font-size: 13px; }
  .ekp-x { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ekp::after { animation: none; display: none; }
  .ekp-cta, .ekp-x { transition: none; }
}
@media print { .ekp { display: none !important; } }