/* Paso 30 — Botón de like reusable.
   El partial `social/_like_button.html` envuelve un <button> dentro de un
   <form>. En estado anónimo es un <a>. La estética es mínima — el botón
   se integra como meta-acción dentro de cards (review, topic, comment). */

.like-form {
    display: inline-flex;
    margin: 0;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.like-btn:hover {
    border-color: #d33;
    color: #d33;
    background: rgba(221, 51, 51, 0.06);
}

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

.like-btn.is-active {
    color: #fff;
    background: #d33;
    border-color: #d33;
}

.like-btn.is-active:hover {
    background: #b22;
    border-color: #b22;
    color: #fff;
}

.like-btn .like-icon {
    font-size: 1.05em;
    line-height: 1;
}

.like-btn .like-count {
    font-variant-numeric: tabular-nums;
    min-width: 1ch;
}

.like-btn--anon {
    /* Visualmente igual al estado idle pero como link, no botón. */
    cursor: pointer;
}

/* Estado de "loading" mientras vuela el fetch, lo aplica el JS. */
.like-btn[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Contenedor del botón dentro de cards (review, topic, comment).
   Lo pintamos como una fila con separador suave, alineado a la derecha.
   `flex-wrap: wrap` evita que con 4+ acciones (Like + Helpful + Editar +
   Eliminar en F.4.a) los items se word-break-een en cards angostas. */
.card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Defensa contra el word-break dentro de cards angostas (grid-3 en
   book_detail, grid-2 en book_reviews_list). Combinado con `flex-wrap`
   arriba, los botones largos saltan a la siguiente línea sin romperse. */
.card-actions > .btn,
.card-actions > .like-btn,
.card-actions > .helpful-btn,
.card-actions form > .btn,
.card-actions form > .like-btn,
.card-actions form > .helpful-btn {
    white-space: nowrap;
}

/* Variante para la fila que también lleva acciones de edición/borrado:
   like a la izquierda, acciones empujadas a la derecha. */
.card-actions--with-edit {
    justify-content: space-between;
}


/* =================================================================== */
/* Paso F.4.a — Botón "Me ayudó a decidir" (Helpful)                    */
/* Calca .like-btn pero con acento verde/azul para diferenciar.         */
/* =================================================================== */

.helpful-form {
    display: inline-flex;
    margin: 0;
}

.helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.helpful-btn:hover {
    border-color: #2a8a6f;
    color: #2a8a6f;
    background: rgba(42, 138, 111, 0.08);
}

.helpful-btn:active {
    transform: scale(0.97);
}

.helpful-btn.is-active {
    color: #fff;
    background: #2a8a6f;
    border-color: #2a8a6f;
}

.helpful-btn.is-active:hover {
    background: #1f6a55;
    border-color: #1f6a55;
    color: #fff;
}

.helpful-btn .helpful-icon {
    font-size: 1em;
    line-height: 1;
}

.helpful-btn .helpful-label {
    font-weight: 500;
}

.helpful-btn .helpful-count {
    font-variant-numeric: tabular-nums;
    min-width: 1ch;
    opacity: 0.85;
}

.helpful-btn--anon {
    cursor: pointer;
}

.helpful-btn[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}