/**
 * likes.css
 *
 * Styles for the Stories blog like button component.
 * Supports light/dark themes via CSS custom properties.
 *
 * Components:
 *   .like-btn       — heart button
 *   .like-icon      — SVG heart (stroke/fill toggled by .liked class)
 *   .like-count     — numeric counter
 *   .like-label     — "Нравится" / "Like" text label
 *   .like-toast     — temporary notification
 */

/* ============================================================
   1. Design Tokens
   ============================================================ */

:root {
  --like-color:        #D4AF37;              /* Gold  */
  --like-color-hover:  #B8960A;              /* Darker gold */
  --like-active-bg:    rgba(212, 175, 55, 0.10);
  --like-text:         #6B7280;
  --like-count-color:  #374151;

  --toast-success-bg:  #10B981;
  --toast-error-bg:    #EF4444;
}

[data-theme="dark"] {
  --like-active-bg:    rgba(212, 175, 55, 0.20);
  --like-text:         #9CA3AF;
  --like-count-color:  #F3F4F6;
}

/* ============================================================
   2. Like Section
   ============================================================ */

.like-section {
  margin-bottom: 1.5rem;
}

/* ============================================================
   3. Like Button
   ============================================================ */

.like-btn {
  /* Layout */
  display:     inline-flex;
  align-items: center;
  gap:         8px;

  /* Box */
  padding:       8px 12px;
  border:        none;
  border-radius: 20px;
  background:    transparent;

  /* Type */
  font-family: inherit;
  font-size:   14px;
  line-height: 1;
  color:       var(--like-text);

  /* Interaction */
  cursor:                   pointer;
  user-select:              none;
  -webkit-tap-highlight-color: transparent;

  transition: background-color 0.2s ease, transform 0.1s ease;
}

.like-btn:hover {
  background-color: var(--like-active-bg);
  transform: scale(1.05);
}

.like-btn:active {
  transform: scale(0.95);
}

.like-btn:focus-visible {
  outline: 2px solid var(--cyan, #0891B2);
  outline-offset: 2px;
}

/* ============================================================
   4. Heart Icon (SVG)
   ============================================================ */

.like-icon {
  width:  20px;
  height: 20px;
  flex-shrink: 0;

  /* Default: outlined gray */
  stroke:       #9CA3AF;
  stroke-width: 2;
  fill:         transparent;

  transform-origin: center;
  transition: stroke 0.3s ease, fill 0.3s ease;
}

/* Liked state */
.like-btn.liked .like-icon {
  stroke: var(--like-color);
  fill:   var(--like-color);
}

/* ============================================================
   5. Counter & Label
   ============================================================ */

.like-count {
  font-size:   14px;
  font-weight: 600;
  color:       var(--like-count-color);
  min-width:   1ch;          /* prevent layout shift */
  transition:  color 0.3s ease;
}

.like-btn.liked .like-count {
  color: var(--like-color);
}

.like-label {
  font-size: 14px;
  color:     var(--like-text);
  transition: color 0.3s ease;
}

.like-btn.liked .like-label {
  color: var(--like-color);
}

/* ============================================================
   6. Animations
   ============================================================ */

/* Click burst */
@keyframes heartBeat {
  0%   { transform: scale(1.0); }
  15%  { transform: scale(1.3); }
  30%  { transform: scale(0.9); }
  45%  { transform: scale(1.1); }
  60%  { transform: scale(1.0); }
  100% { transform: scale(1.0); }
}

.like-btn.animating .like-icon {
  animation: heartBeat 0.5s ease-in-out;
}

/* Persistent subtle pulse on liked state */
@keyframes likePulse {
  0%,  100% { transform: scale(1.00); }
  50%        { transform: scale(1.06); }
}

.like-btn.liked:not(.animating) .like-icon {
  animation: likePulse 2.4s ease-in-out infinite;
}

/* ============================================================
   7. Toast Notifications
   ============================================================ */

.like-toast {
  position:    fixed;
  bottom:      20px;
  right:       20px;
  padding:     12px 16px;
  border-radius: 8px;
  font-size:   14px;
  color:       #ffffff;
  box-shadow:  0 4px 14px rgba(0, 0, 0, 0.18);
  z-index:     1001;
  opacity:     0;
  visibility:  hidden;
  transform:   translateY(12px);
  transition:  opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  max-width:   320px;
}

.like-toast.show {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.like-toast.error   { background: var(--toast-error-bg);   }
.like-toast.success { background: var(--toast-success-bg); }

/* ============================================================
   8. Mobile — 640px breakpoint
   ============================================================ */

@media (max-width: 640px) {
  .like-btn {
    padding: 6px 8px;
    gap:     4px;
  }

  .like-icon {
    width:  18px;
    height: 18px;
  }

  .like-count,
  .like-label {
    font-size: 12px;
  }

  .like-toast {
    bottom: 10px;
    right:  10px;
    left:   10px;
    max-width: none;
  }
}