/* ============================================================================
   Esimarket Sales Ticker — «علی بستهٔ ای‌سیم ۱۰ گیگابایتی به مقصد چین تهیه کرد.»

   A social-proof card pinned to the bottom-left of every public page, showing a
   Tehran → destination flight: the plane flies the arc, the route draws in
   behind it, then the destination ripples and the signal bars come alive as the
   eSIM "connects".

   Markup is composed in the browser by assets/js/sales-ticker.js; the shell is
   printed on wp_footer by includes/class-sales-ticker.php.

   SELF-CONTAINED. The card renders on the Elementor/WP side where the Tailwind
   build is not available, so every value is declared here or comes from a token
   below. The palette mirrors the design tokens in apps/web/tailwind.config.ts —
   change them there and here together.

   KEEP IN SYNC with apps/web/src/app/sales-ticker.css — both sites render the
   same card from the same class names.

   The corner is PHYSICAL, not logical: bottom-left stays the visual bottom-left
   on this RTL site, which is also how it keeps clear of the Goftino chat bubble
   in the bottom-right.
   ========================================================================= */

.esi-ticker {
  --esi-tk-indigo: #4550e5;
  --esi-tk-indigo-soft: #eef0fb;
  --esi-tk-green: #22b07d;
  --esi-tk-green-soft: #e9f8f1;
  --esi-tk-ink: #171b2e;
  --esi-tk-muted: #9aa0b8;
  --esi-tk-line: #e6e9f5;
  /* One flight cycle. The arrival beats (ripple, bars, «آنلاین شد») are keyed
     to the tail of this same duration, so they land as the plane lands. */
  --esi-tk-flight: 3.4s;
  /* How long a card stays up. The JS holds the card for the same span — change
     both together or the timer bar will not reach the end. */
  --esi-tk-life: 6.9s;

  position: fixed;
  left: 18px;
  bottom: 18px;
  /* Above page content, below the Goftino chat widget. */
  z-index: 9999;
  direction: rtl;
  /* Own font-size base so a theme's rem scale cannot resize the card. */
  font-size: 16px;
  font-family: inherit;
}

.esi-ticker[hidden] { display: none; }

.esi-ticker__card {
  width: 318px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--esi-tk-line);
  border-radius: 16px;
  box-shadow: 0 16px 36px -14px rgba(23, 27, 46, .26);
  overflow: hidden;
  animation: esiTkIn .58s cubic-bezier(.2, .85, .3, 1.25) both;
}

.esi-ticker__card.is-leaving {
  animation: esiTkOut .5s cubic-bezier(.4, 0, .7, .2) both;
}

/* ------------------------------------------------------------------- head */
.esi-ticker__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 12px 5px 14px;
}

.esi-ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--esi-tk-green);
  animation: esiTkPulse 2s ease-out infinite;
}

.esi-ticker__live {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--esi-tk-green);
}

/* Fades in only once the plane has arrived — see the keyframe's delay band. */
.esi-ticker__online {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--esi-tk-green);
  background: var(--esi-tk-green-soft);
  padding: 2.5px 7px;
  border-radius: 99px;
  animation: esiTkOnchip var(--esi-tk-flight) cubic-bezier(.4, 0, .2, 1) infinite;
}

.esi-ticker__spacer { flex: 1; }

.esi-ticker__ago {
  font-size: 10px;
  color: var(--esi-tk-muted);
  white-space: nowrap;
}

.esi-ticker__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: -4px -3px -4px 0;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: #b9bed2;
  cursor: pointer;
  transition: .15s;
}
.esi-ticker__close:hover { background: #f2f3fa; color: #5b6178; }
.esi-ticker__close:focus-visible {
  outline: 2px solid var(--esi-tk-indigo);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ flight route */
.esi-ticker__route {
  position: relative;
  width: 286px;
  height: 48px;
  margin: 0 auto;
}
.esi-ticker__route svg { position: absolute; inset: 0; }

.esi-ticker__path-bg {
  fill: none;
  stroke: #e3e6f2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
}

/* The travelled portion, drawn in behind the plane. */
.esi-ticker__path-fg {
  fill: none;
  stroke: var(--esi-tk-indigo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 300;
  animation: esiTkDraw var(--esi-tk-flight) cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Origin pin — always Tehran, the departure point for this audience. */
.esi-ticker__origin {
  position: absolute;
  right: -5px;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.esi-ticker__origin i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--esi-tk-indigo);
}
.esi-ticker__origin span {
  font-size: 9px;
  color: var(--esi-tk-muted);
  font-weight: 700;
  font-style: normal;
}

/* Sized 4:3 to match the flag sprite's aspect ratio, so the marker is the
   shape of the flag rather than a disc the flag has to be cropped into. */
.esi-ticker__dest {
  position: absolute;
  left: -8px;
  top: 16px;
  width: 36px;
  height: 27px;
}

.esi-ticker__ripple {
  position: absolute;
  inset: 0;
  /* Matches the flag's rounded rectangle so the arrival pulse traces the
     marker's real outline instead of a circle around it. */
  border-radius: 6px;
  border: 2px solid var(--esi-tk-green);
  animation: esiTkRipple var(--esi-tk-flight) cubic-bezier(.2, .6, .3, 1) infinite;
}

/* The destination marker: a flag-shaped tile rather than a disc, so the
   flag-icons sprite sits in its natural 4:3 rectangle and nothing is cropped
   away. A hairline border and small radius keep it reading as a card. */
.esi-ticker__flag {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eaf3;
  box-shadow: 0 4px 9px -3px rgba(23, 27, 46, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Emoji fallback (region bundles / unknown ISO) — sized to the shorter axis
     so the globe never overflows the tile. */
  font-size: 17px;
}
/* flag-icons sizes by font-size, width = 1.333em. At 25.5px the sprite is
   34 × 25.5 — filling the 36 × 27 tile inside its 1px border exactly, with no
   crop and no letterboxing. */
.esi-ticker__flag .fi {
  font-size: 25.5px;
  line-height: 1;
  border-radius: 0;
  flex: none;
}

.esi-ticker__bars {
  position: absolute;
  left: -5px;
  bottom: -3px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  background: #fff;
  border-radius: 5px;
  padding: 2px 3px;
  box-shadow: 0 2px 6px -2px rgba(23, 27, 46, .3);
}
.esi-ticker__bars i {
  width: 2.5px;
  border-radius: 1px;
  background: var(--esi-tk-green);
  transform-origin: bottom;
  font-style: normal;
}
/* Staggered so the bars fill left-to-right as the eSIM registers on arrival. */
.esi-ticker__bars i:nth-child(1) { height: 4px;  animation: esiTkSig1 var(--esi-tk-flight) cubic-bezier(.4,0,.2,1) infinite; }
.esi-ticker__bars i:nth-child(2) { height: 7px;  animation: esiTkSig2 var(--esi-tk-flight) cubic-bezier(.4,0,.2,1) infinite; }
.esi-ticker__bars i:nth-child(3) { height: 10px; animation: esiTkSig3 var(--esi-tk-flight) cubic-bezier(.4,0,.2,1) infinite; }

/* The plane rides the same cubic curve the route is drawn from, so the two can
   never drift apart; offset-rotate:auto banks it into the turn. */
.esi-ticker__plane {
  position: absolute;
  top: 0;
  left: 0;
  offset-path: path('M 262 36 Q 143 -2 24 36');
  offset-rotate: auto;
  animation: esiTkFly var(--esi-tk-flight) cubic-bezier(.4, 0, .2, 1) infinite;
}
.esi-ticker__plane svg {
  display: block;
  /* Centre the glyph on the path point, then turn its nose along the travel
     direction (the source art points "up"). */
  transform: translate(-9.5px, -9.5px) rotate(90deg);
  fill: var(--esi-tk-indigo);
}

/* ------------------------------------------------------------------- body */
.esi-ticker__body { padding: 0 16px 13px; }

.esi-ticker__text {
  font-size: 12.5px;
  /* Persian needs looser leading than Latin at this size. */
  line-height: 1.95;
  color: var(--esi-tk-ink);
  font-weight: 600;
  text-wrap: pretty;
  margin: 0;
}
.esi-ticker__name { font-weight: 800; }
.esi-ticker__data { font-weight: 800; color: var(--esi-tk-indigo); }
.esi-ticker__dest-name { font-weight: 800; }

.esi-ticker__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

.esi-ticker__chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
}
.esi-ticker__chip--plan  { color: var(--esi-tk-indigo); background: var(--esi-tk-indigo-soft); }
.esi-ticker__chip--price { color: var(--esi-tk-green);  background: var(--esi-tk-green-soft); }

.esi-ticker__cta {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--esi-tk-indigo);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.esi-ticker__cta:hover { opacity: .7; }

.esi-ticker__timer { height: 3px; background: var(--esi-tk-indigo-soft); }
.esi-ticker__timer i {
  display: block;
  height: 3px;
  background: var(--esi-tk-indigo);
  /* RTL: drains right → left. */
  transform-origin: right;
  animation: esiTkBar var(--esi-tk-life) linear both;
}
/* Hovering holds the card up; freeze the timer to match so it never runs out
   from under a card the visitor is still reading. */
.esi-ticker:hover .esi-ticker__timer i,
.esi-ticker:focus-within .esi-ticker__timer i { animation-play-state: paused; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  .esi-ticker {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .esi-ticker__card { width: auto; max-width: none; animation-name: esiTkInM; }
  .esi-ticker__card.is-leaving { animation-name: esiTkOutM; }
  .esi-ticker__close { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; margin: -6px -4px -6px 0; }
  .esi-ticker__text { font-size: 12px; line-height: 1.9; }
  /* Thumb-sized tap target on touch, where a 10px text link is too small. */
  .esi-ticker__cta { padding: 8px 14px; border-radius: 9px; color: #fff; background: var(--esi-tk-indigo); }
}

/* -------------------------------------------------------------- keyframes */
@keyframes esiTkFly {
  0%   { offset-distance: 0%;   opacity: 0; }
  9%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes esiTkDraw { 0% { stroke-dashoffset: 300; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes esiTkSig1 { 0%, 62% { opacity: .18; transform: scaleY(.35); } 70%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes esiTkSig2 { 0%, 70% { opacity: .18; transform: scaleY(.35); } 78%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes esiTkSig3 { 0%, 78% { opacity: .18; transform: scaleY(.35); } 86%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes esiTkRipple { 0%, 74% { transform: scale(.35); opacity: 0; } 80% { opacity: .5; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes esiTkOnchip { 0%, 76% { opacity: 0; transform: translateY(4px) scale(.82); } 86% { opacity: 1; transform: translateY(0) scale(1.05); } 92%, 100% { opacity: 1; transform: none; } }
@keyframes esiTkPulse { 0% { box-shadow: 0 0 0 0 rgba(34,176,125,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,176,125,0); } 100% { box-shadow: 0 0 0 0 rgba(34,176,125,0); } }
@keyframes esiTkBar { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes esiTkIn   { 0% { opacity: 0; transform: translate3d(-26px, 12px, 0) scale(.95); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes esiTkOut  { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(-20px, 8px, 0) scale(.97); } }
@keyframes esiTkInM  { 0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes esiTkOutM { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); } }

/* ------------------------------------------------------------ a11y/motion */
@media (prefers-reduced-motion: reduce) {
  .esi-ticker__plane,
  .esi-ticker__path-fg,
  .esi-ticker__ripple,
  .esi-ticker__bars i,
  .esi-ticker__online,
  .esi-ticker__dot,
  .esi-ticker__timer i { animation: none; }
  .esi-ticker__online { opacity: 1; transform: none; }
  /* Without its draw animation the dashoffset would leave the route blank. */
  .esi-ticker__path-fg { stroke-dashoffset: 0; }
  /* Park the plane at the destination rather than looping motion at someone
     who asked the browser for none. */
  .esi-ticker__plane { offset-distance: 100%; }
  .esi-ticker__card,
  .esi-ticker__card.is-leaving { animation-duration: .01ms; }
}

@media print { .esi-ticker { display: none !important; } }