/* ==========================================================
   COMPONENTES GLOBAIS
   ========================================================== */


/* ==========================================================
   BUTTON
   ========================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.625rem;

    min-height: 52px;

    padding:
        0.875rem
        1.5rem;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}


/* ----------------------------------------------------------
   ÍCONE DO BOTÃO
   ---------------------------------------------------------- */

.button__icon {
    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;

    stroke: currentColor;
    stroke-width: 1.75;

    fill: none;

    transition:
        transform var(--transition-base);
}


/* ==========================================================
   PRIMARY
   ========================================================== */

.button--primary {
    background: var(--color-surface-dark);

    border-color: var(--color-surface-dark);

    color: var(--color-text-inverse);
}


.button--primary:hover {
    background: var(--color-surface-navy);

    border-color: var(--color-surface-navy);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(16, 24, 32, 0.14);
}


.button--primary:hover .button__icon {
    transform: translateX(3px);
}


/* ==========================================================
   SECONDARY
   ========================================================== */

.button--secondary {
    background: transparent;

    border-color: var(--color-text-primary);

    color: var(--color-text-primary);
}


.button--secondary:hover {
    background: var(--color-text-primary);

    color: var(--color-text-inverse);

    transform: translateY(-2px);
}


.button--secondary:hover .button__icon {
    transform: translateX(3px);
}


/* ==========================================================
   GHOST
   ========================================================== */

.button--ghost {
    min-height: auto;

    padding:
        0.75rem
        0.25rem;

    background: transparent;

    color: var(--color-text-primary);
}


.button--ghost:hover {
    color: var(--color-accent);
}


.button--ghost:hover .button__icon {
    transform:
        translate(2px, -2px);
}


/* ==========================================================
   WHATSAPP
   Será utilizado posteriormente.
   ========================================================== */

.button--whatsapp {
    background: var(--color-whatsapp);

    border-color: var(--color-whatsapp);

    color: #FFFFFF;
}


.button--whatsapp:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(37, 211, 102, 0.22);
}


/* ==========================================================
   TAMANHO PEQUENO
   ========================================================== */

.button--sm {
    min-height: 44px;

    padding:
        0.75rem
        1.25rem;
}


/* ==========================================================
   DISABLED
   ========================================================== */

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.48;

    pointer-events: none;

    cursor: not-allowed;
}

/* ==========================================================
   BOTÃO DESTACADO
   Utilizado no Plano Profissional.
   ========================================================== */

.button--featured {
    background:
        var(--color-accent);

    border-color:
        var(--color-accent);

    color:
        var(--color-surface-dark);
}


.button--featured:hover {
    background:
        var(--color-accent-soft);

    border-color:
        var(--color-accent-soft);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(181, 154, 104, 0.20);
}


.button--featured:hover .button__icon {
    transform:
        translateX(2px);
}