.hero-like { position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 18px; border: none; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 0.95rem; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .hero-like i, .hero-like svg { font-size: 1.3rem; } .hero-like:not(:disabled):hover { background: var(--color-canon-red); } .hero-like[aria-pressed="true"]:not(:disabled):hover { background: rgba(0, 0, 0, 0.72); } .hero-like:disabled { cursor: not-allowed; opacity: 0.6; } .hero-like::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.9); color: var(--color-white); font-size: 0.75rem; font-weight: var(--fw-regular); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out); z-index: 5; } .hero-like:disabled:not(.is-busy):hover::after, html:not([data-auth="user"]) .hero-like:not(.is-busy):hover::after { opacity: 1; visibility: visible; } html[data-auth="user"] .hero-like:disabled::after { content: none; } .hero-like__heart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; flex-shrink: 0; } .hero-like__heart-fill { display: none; } .hero-like[aria-pressed="true"] .hero-like__heart-outline { display: none; } .hero-like[aria-pressed="true"] .hero-like__heart-fill { display: block; color: var(--color-canon-red); } .cc-like-toast { position: fixed; left: 50%; bottom: 24px; z-index: 600; max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--radius-sm, 6px); background: rgba(20, 20, 20, 0.94); color: var(--color-white, #fff); font-size: 0.875rem; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); transform: translate(-50%, 12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .cc-like-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }