.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
    text-decoration: none;
}

.btn:hover {
    opacity: 0.9;
}

.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.btn-md {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.4rem;
    border-radius: 0.3rem;
}

/*
.btn-wishlist {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.btn-wishlist:hover {
    color: #e50914;
}
*/

/* ── Colour variants ─────────────────────────────────────── */

.btn-primary {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

.btn-primary:hover {
    background: #6d28d9;
    border-color: #6d28d9;
    opacity: 1;
}

.btn-danger {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
}

.btn-danger:hover {
    background: #c40812;
    border-color: #c40812;
    opacity: 1;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.78rem;
    min-width: 5.9rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--platea-primary, #ba9eff) 0%, var(--platea-primary-dim, #8455ef) 100%);
    color: #fff;
    font-family: var(--platea-font-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 12px 24px rgba(132, 85, 239, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.btn-cta:visited {
    color: #fff;
}

.btn-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 14px 28px rgba(132, 85, 239, 0.24);
    opacity: 1;
}

.btn-cta.is-following {
    background: rgba(186, 158, 255, 0.1);
    color: var(--platea-primary, #ba9eff);
    border-color: rgba(186, 158, 255, 0.4);
    box-shadow: none;
}

.btn-cta.is-following:hover {
    transform: none;
    filter: none;
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow: none;
    opacity: 1;
}