/* The licence banners: a trial countdown, an upsell, or a locked notice.
 *
 * One shape for all three so the eye learns it once — icon, two lines, action — with the
 * state carried by colour rather than by layout. The trial one has a slow sheen crossing
 * it: it is the only element on the page advertising something, and it has to be findable
 * without shouting over the work.
 */
.licence-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-2xl, 18px);
  text-decoration: none;
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.licence-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.licence-banner-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.licence-banner-icon svg { width: 1.1rem; height: 1.1rem; }
.licence-banner-copy { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.licence-banner-copy strong { font-size: 0.82rem; }
/* Вторая строка — та, ради которой баннер и висит (сколько дней осталось), поэтому
   она в полную яркость: приглушённая до 0.85 она читалась как выключенная. */
.licence-banner-copy span { font-size: 0.72rem; opacity: 1; font-weight: 600; }
.licence-banner-cta {
  margin-left: auto;
  flex: none;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  background: currentColor;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
/* The pill's text takes the banner's background, so one colour drives the whole thing. */
.licence-banner.is-trial .licence-banner-copy strong,
.licence-banner.is-trial .licence-banner-copy span { color: var(--licence-copy); }
.licence-banner.is-trial .licence-banner-cta { color: var(--color-primary-bg); }
.licence-banner.is-owned .licence-banner-cta { color: var(--color-surface); }
.licence-banner.is-expired .licence-banner-cta { color: var(--color-danger-bg, var(--color-surface)); }

.licence-banner.is-trial {
  color: var(--color-primary-hover);
  /* Чуть плотнее фон под тем же фиолетовым текстом: контраст вырос, вид прежний. */
  --licence-copy: color-mix(in srgb, var(--color-primary-hover) 88%, #fff);
  background: var(--color-primary-bg);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.licence-banner.is-owned {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}
.licence-banner.is-expired {
  color: var(--color-danger);
  background: var(--color-danger-bg, var(--color-surface-muted));
  border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
}

/* The sheen. Only on the trial banner, only while the trial is running, and slow enough
   to read as a material rather than as an animation demanding attention. */
.licence-banner.is-trial::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--color-primary) 18%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: licence-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes licence-sheen {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* In the sidebar, where the row is narrow and the countdown is the whole message. */
.licence-banner.is-compact {
  margin-bottom: 0.5rem;
  padding: 0.55rem 0.65rem;
  gap: 0.5rem;
}
.licence-banner.is-compact .licence-banner-cta { display: none; }
.licence-banner.is-compact .licence-banner-icon { width: 1.7rem; height: 1.7rem; }
.licence-banner.is-compact .licence-banner-copy strong { font-size: 0.76rem; }
.licence-banner.is-compact .licence-banner-copy span { font-size: 0.68rem; }

/* Inside the account dropdown: the same banner, fitted to the menu's own padding. */
.tb-menu-licence-slot { padding: 0.35rem 0.5rem 0; }
.tb-menu-licence-slot .licence-banner { margin-bottom: 0.35rem; }

/* The sidebar copy sits above the Выход row (see .sidebar-licence in base.html) and
   shrinks to its icon when the sidebar is collapsed — the countdown has nowhere to go at
   64px wide, and the tooltip carries it instead. */
.sidebar-licence { padding: 0 0.75rem; }
.sidebar-licence .licence-banner { margin-bottom: 0.35rem; }
html.sidebar-collapsed .sidebar-licence { padding: 0 0.5rem; }
html.sidebar-collapsed .sidebar-licence .licence-banner {
  justify-content: center;
  padding: 0.5rem;
}
html.sidebar-collapsed .sidebar-licence .licence-banner-copy { display: none; }

@media (prefers-reduced-motion: reduce) {
  .licence-banner.is-trial::after { animation: none; }
  .licence-banner:hover { transform: none; }
}