/* ══════════════════════════════════════════════════════════════
   Плашка акций — финальные токены
   Тёмная тема: Изумруд | Светлая тема: Янтарь
   ══════════════════════════════════════════════════════════════ */

/* ── Светлая тема (Янтарь) ──────────────────────────────────── */
#ailo-chat-root[data-theme="light"] .ailo-promo-banner,
#ailo-chat-root:not([data-theme]) .ailo-promo-banner {
  background: linear-gradient(135deg,
    rgba(251,191,36, 0.14) 0%,
    rgba(245,158,11, 0.06) 100%
  );
  border: 1px solid rgba(251,191,36, 0.30);
}

#ailo-chat-root[data-theme="light"] .ailo-promo-banner__icon,
#ailo-chat-root:not([data-theme]) .ailo-promo-banner__icon {
  background: rgba(251,191,36, 0.18);
  border: 1px solid rgba(251,191,36, 0.30);
  color: #D97706;             /* иконка */
}

/* ── Тёмная тема (Изумруд) ──────────────────────────────────── */
#ailo-chat-root[data-theme="dark"] .ailo-promo-banner {
  background: linear-gradient(135deg,
    rgba(52,211,153, 0.18) 0%,
    rgba(16,185,129, 0.07) 100%
  );
  border: 1px solid rgba(52,211,153, 0.28);
}

#ailo-chat-root[data-theme="dark"] .ailo-promo-banner__icon {
  background: rgba(52,211,153, 0.16);
  border: 1px solid rgba(52,211,153, 0.28);
  color: #059669;             /* иконка */
}

/* ── Общие стили плашки (тема-независимые) ──────────────────── */
.ailo-promo-banner {
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.ailo-promo-banner:hover {
  opacity: 0.88;
}

/* Декоративный блоб в правом верхнем углу */
.ailo-promo-banner::before {
  content: '';
  position: absolute;
  right: -18px;
  top: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
}

#ailo-chat-root[data-theme="light"] .ailo-promo-banner::before,
#ailo-chat-root:not([data-theme]) .ailo-promo-banner::before {
  background: rgba(251,191,36, 0.09);
}

#ailo-chat-root[data-theme="dark"] .ailo-promo-banner::before {
  background: rgba(52,211,153, 0.08);
}

/* Иконка-бейдж */
.ailo-promo-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ailo-promo-banner__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Текстовый блок */
.ailo-promo-banner__body {
  flex: 1;
  min-width: 0;
}

.ailo-promo-banner__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ailo-text-1);
  margin-bottom: 2px;
}

.ailo-promo-banner__sub {
  font-size: 11px;
  color: var(--ailo-text-3);
}

/* Стрелка вправо */
.ailo-promo-banner__arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#ailo-chat-root[data-theme="dark"] .ailo-promo-banner__arrow {
  background: rgba(255,255,255, 0.06);
}

.ailo-promo-banner__arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--ailo-text-3);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}


/* ══════════════════════════════════════════════════════════════
   HTML-шаблон для справки:

   <a href="/sales" class="ailo-promo-banner">
     <div class="ailo-promo-banner__icon">
       <!-- tag SVG icon -->
       <svg viewBox="0 0 24 24">
         <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
         <line x1="7" y1="7" x2="7.01" y2="7"/>
       </svg>
     </div>
     <div class="ailo-promo-banner__body">
       <div class="ailo-promo-banner__title">Акции и скидки</div>
       <div class="ailo-promo-banner__sub">Смотреть актуальные предложения</div>
     </div>
     <div class="ailo-promo-banner__arrow">
       <!-- chevron right SVG -->
       <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
     </div>
   </a>

   ══════════════════════════════════════════════════════════════ */