/* tv-buttons.css — modern pill button system for listing detail pages.
   Visual language lifted from _SubscribeButtons.cshtml (the house reference
   for the modern look) with brand-palette variants. Works on <button> and <a>.

   Usage:
     .tv-btn                subtle default: white pill, slate text, hover lift
     .tv-btn--primary       solid navy CTA
     .tv-btn--accent        brand-yellow CTA (e.g. "Edit Listing")
     .tv-btn--danger        destructive: white pill with red text/border
     .tv-btn--sm            compact size
     .tv-btn--block         full-width
     .is-copied             transient success state (copy-to-clipboard flips)
*/

.tv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease,
                border-color 150ms ease, background-color 150ms ease;
}

.tv-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
    text-decoration: none;
}

.tv-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.tv-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.tv-btn:disabled,
.tv-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tv-btn i {
    font-size: 0.85em;
    opacity: 0.85;
}

/* Solid navy CTA */
.tv-btn--primary {
    background: #0B2D39;
    border-color: #0B2D39;
    color: #fff;
}

.tv-btn--primary:hover {
    background: #123D4E;
    border-color: #123D4E;
    color: #fff;
}

/* Brand-yellow CTA */
.tv-btn--accent {
    background: #F4B400;
    border-color: #F4B400;
    color: #0B2D39;
    font-weight: 600;
}

.tv-btn--accent:hover {
    background: #FFC21A;
    border-color: #FFC21A;
    color: #0B2D39;
}

/* Destructive */
.tv-btn--danger {
    color: #B02A37;
    border-color: rgba(176, 42, 55, 0.35);
}

.tv-btn--danger:hover {
    background: #FDF0F1;
    border-color: rgba(176, 42, 55, 0.55);
    color: #8F2129;
}

/* Sizes / layout */
.tv-btn--sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
}

.tv-btn--block {
    display: flex;
    width: 100%;
}

/* Favorite button: red heart on the subtle pill; solid red when favorited.
   State class .is-favorited is toggled by js/shared/favorites.js. */
.tv-btn.favorite-btn i {
    color: #dc3545;
    opacity: 1;
}

.tv-btn.favorite-btn.is-favorited {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.tv-btn.favorite-btn.is-favorited i {
    color: #fff;
}

.tv-btn.favorite-btn.is-favorited:hover {
    background: #c62f3d;
    border-color: #c62f3d;
    color: #fff;
}

/* Transient success state (copy-to-clipboard etc.) */
.tv-btn.is-copied {
    color: #047857;
    border-color: rgba(4, 120, 87, 0.45);
    background: #ecfdf5;
}

.tv-btn.is-copied i {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tv-btn {
        transition: none;
    }

    .tv-btn:hover {
        transform: none;
    }
}