/* ====================================================
   COMPONENTE — BOTÕES
   CSS Nesting + Grid Layout | Sem Flexbox
   ==================================================== */

.btn {
    display: inline-grid;
    place-items: center;
    position: relative;          /* necessário para o efeito ::after shine */
    overflow: hidden;            /* recorta o brilho dentro do botão       */
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    border: var(--border-width-base) solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    letter-spacing: var(--letter-spacing-wide);

    /* ── Primário — laranja com efeito shine ── */
    &.btn-primary {
        background-color: var(--color-primary-0);
        color: var(--color-neutral-900);
        border-color: var(--color-primary-0);

        /* Faixa de brilho — animada no hover */
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: -80%;
            width: 40%;
            height: 100%;
            background: linear-gradient(
                120deg,
                transparent,
                rgba(255, 255, 255, 0.45),
                transparent
            );
            transform: skewX(-20deg);
            pointer-events: none;
        }

        &:hover {
            background-color: var(--color-primary-0);
            border-color: var(--color-primary-0);
            color: var(--color-neutral-0);
            box-shadow: 0 1rem 2.25rem rgba(229, 114, 10, 0.35);
            transform: translateY(-0.25rem) scale(1.04);
        }

        &:hover::after {
            animation: btnShine 0.8s ease;
        }

        &:active {
            background-color: var(--color-primary-0);
            border-color: var(--color-primary-0);
            transform: translateY(0) scale(1);
        }

        &:focus-visible {
            outline: 3px solid var(--color-primary-300);
            outline-offset: 3px;
        }
    }

    /* ── Secundário — azul com efeito shine ── */
    &.btn-secondary {
        background-color: var(--color-secondary-500);
        color: var(--color-neutral-0);
        border-color: var(--color-secondary-500);

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: -80%;
            width: 40%;
            height: 100%;
            background: linear-gradient(
                120deg,
                transparent,
                rgba(255, 255, 255, 0.35),
                transparent
            );
            transform: skewX(-20deg);
            pointer-events: none;
        }

        &:hover {
            background-color: var(--color-secondary-600);
            border-color: var(--color-secondary-600);
            color: var(--color-neutral-0);
            box-shadow: 0 1rem 2.25rem rgba(26, 114, 170, 0.35);
            transform: translateY(-0.25rem) scale(1.04);
        }

        &:hover::after {
            animation: btnShine 0.8s ease;
        }

        &:active {
            background-color: var(--color-secondary-700);
            border-color: var(--color-secondary-700);
            transform: translateY(0) scale(1);
        }

        &:focus-visible {
            outline: 3px solid var(--color-secondary-300);
            outline-offset: 3px;
        }
    }

    /* ── Fantasma / Outline ── */
    &.btn-outline {
        background-color: transparent;
        color: var(--color-primary-0);
        border-color: var(--color-primary-0);

        &:hover {
            background-color: var(--color-primary-100);
            color: var(--color-primary-700);
        }
    }

    /* ── Mercado Pago ── */
    &.btn-mercado-pago {
        background-color: #009ee3;
        color: var(--color-neutral-0);
        border-color: #009ee3;

        &:hover {
            background-color: #0081c4;
            border-color: #0081c4;
            color: var(--color-neutral-0);
        }
    }

    /* ── Modificadores de tamanho ── */
    &.btn-sm {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-sm);
    }

    &.btn-lg {
        padding: var(--spacing-4) var(--spacing-10);
        font-size: var(--font-size-md);
        border-radius: var(--radius-lg);
    }

    /* ── Full width ── */
    &.btn-full {
        width: 100%;
    }

    /* ── Estado desativado ── */
    &:disabled,
    &[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* ── Animação de brilho deslizante — compartilhada ── */
@keyframes btnShine {
    from { left: -80%; }
    to   { left: 140%; }
}

/* ── Respeita preferência de movimento reduzido ── */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;

        &::after { display: none; }
        &:hover  { transform: none; }
    }
}