/* ============================================================
   PEM Dual Buttons for Divi
   v1.0.2
   ============================================================ */

.et_pb_pem_dual_buttons {
    overflow: visible;
}

.pem-dual-buttons__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--pem-db-align-desktop, flex-start);
    gap: var(--pem-db-gap-desktop, 12px);
    width: 100%;
}

.pem-dual-buttons__button {
    --pem-btn-text-default: #ffffff;
    --pem-btn-bg-default: #0a0a0a;
    --pem-btn-border-default: #0a0a0a;
    --pem-btn-hover-text-default: #ffffff;
    --pem-btn-hover-bg-default: #0a0a0a;
    --pem-btn-hover-border-default: #0a0a0a;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pem-db-min-height, 48px);
    padding-top: var(--pem-db-pad-y, 0px);
    padding-bottom: var(--pem-db-pad-y, 0px);
    padding-left: var(--pem-db-pad-x, 32px);
    padding-right: var(--pem-db-pad-x, 32px);

    font-family: "Manrope", sans-serif;
    font-size: var(--pem-db-font-desktop, 11px);
    line-height: 1.2;
    font-weight: var(--pem-db-weight, 600);
    letter-spacing: var(--pem-db-letter-spacing, 2.4px);
    text-decoration: none !important;
    white-space: nowrap;

    color: var(--pem-btn-text, var(--pem-btn-text-default));
    background: var(--pem-btn-bg, var(--pem-btn-bg-default));
    border: var(--pem-btn-border-width, 1px) solid var(--pem-btn-border, var(--pem-btn-border-default));
    border-radius: var(--pem-db-radius, 999px);

    transition:
        color var(--pem-db-transition, 300ms) ease,
        background-color var(--pem-db-transition, 300ms) ease,
        border-color var(--pem-db-transition, 300ms) ease,
        opacity var(--pem-db-transition, 300ms) ease,
        transform var(--pem-db-transition, 300ms) cubic-bezier(.22, 1, .36, 1),
        box-shadow var(--pem-db-transition, 300ms) cubic-bezier(.22, 1, .36, 1);

    transform: translateY(0);
    box-shadow: none;
    will-change: transform, box-shadow;
}

.pem-dual-buttons__inner--uppercase .pem-dual-buttons__button {
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   ESTILOS BASE
   ------------------------------------------------------------ */

.pem-dual-buttons__button--solid {
    --pem-btn-text-default: var(--pem-white, #ffffff);
    --pem-btn-bg-default: var(--pem-black, #0a0a0a);
    --pem-btn-border-default: var(--pem-black, #0a0a0a);
    --pem-btn-hover-text-default: var(--pem-white, #ffffff);
    --pem-btn-hover-bg-default: var(--pem-black, #0a0a0a);
    --pem-btn-hover-border-default: var(--pem-black, #0a0a0a);
}

.pem-dual-buttons__button--outline {
    --pem-btn-text-default: var(--pem-black, #0a0a0a);
    --pem-btn-bg-default: transparent;
    --pem-btn-border-default: var(--pem-border, #dadad7);
    --pem-btn-hover-text-default: var(--pem-black, #0a0a0a);
    --pem-btn-hover-bg-default: transparent;
    --pem-btn-hover-border-default: var(--pem-black, #0a0a0a);
}

.pem-dual-buttons__button--accent {
    --pem-btn-text-default: var(--pem-accent-contrast, #ffffff);
    --pem-btn-bg-default: var(--pem-accent, #ed7024);
    --pem-btn-border-default: var(--pem-accent, #ed7024);
    --pem-btn-hover-text-default: var(--pem-accent-contrast, #ffffff);
    --pem-btn-hover-bg-default: var(--pem-accent, #ed7024);
    --pem-btn-hover-border-default: var(--pem-accent, #ed7024);
}

.pem-dual-buttons__button--light {
    --pem-btn-text-default: var(--pem-black, #0a0a0a);
    --pem-btn-bg-default: var(--pem-white, #ffffff);
    --pem-btn-border-default: var(--pem-white, #ffffff);
    --pem-btn-hover-text-default: var(--pem-black, #0a0a0a);
    --pem-btn-hover-bg-default: var(--pem-white, #ffffff);
    --pem-btn-hover-border-default: var(--pem-white, #ffffff);
}

/* ------------------------------------------------------------
   HOVER DINÂMICO DA PEM
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
    .pem-dual-buttons__button:hover {
        color: var(--pem-btn-hover-text, var(--pem-btn-hover-text-default));
        background: var(--pem-btn-hover-bg, var(--pem-btn-hover-bg-default));
        border-color: var(--pem-btn-hover-border, var(--pem-btn-hover-border-default));
    }

    /* Elevação nativa do módulo — padrão PEM: 6px */
    .pem-dual-buttons__inner--hover-lift .pem-dual-buttons__button:hover {
        transform: translateY(var(--pem-db-hover-lift, -6px));
    }

    /* Sombra projetada somente no hover */
    .pem-dual-buttons__inner--hover-shadow .pem-dual-buttons__button:hover {
        box-shadow:
            0 14px 28px rgba(10, 10, 10, .14),
            0 5px 12px rgba(10, 10, 10, .08);
    }

    /* Resposta de clique sem perder a sensação de elevação */
    .pem-dual-buttons__inner--hover-lift .pem-dual-buttons__button:active {
        transform: translateY(-2px);
    }

    .pem-dual-buttons__inner--hover-shadow .pem-dual-buttons__button:active {
        box-shadow:
            0 7px 16px rgba(10, 10, 10, .11),
            0 2px 7px rgba(10, 10, 10, .07);
    }

    .pem-dual-buttons__button--accent-hover.pem-dual-buttons__button--solid:hover,
    .pem-dual-buttons__button--accent-hover.pem-dual-buttons__button--light:hover {
        color: var(--pem-btn-hover-text, var(--pem-accent-contrast, #ffffff));
        background: var(--pem-btn-hover-bg, var(--pem-accent, #ed7024));
        border-color: var(--pem-btn-hover-border, var(--pem-accent, #ed7024));
    }

    .pem-dual-buttons__button--accent-hover.pem-dual-buttons__button--outline:hover {
        color: var(--pem-btn-hover-text, var(--pem-accent, #ed7024));
        background: var(--pem-btn-hover-bg, transparent);
        border-color: var(--pem-btn-hover-border, var(--pem-accent, #ed7024));
    }

    .pem-dual-buttons__button--accent-hover.pem-dual-buttons__button--accent:hover {
        opacity: .86;
    }

    .pem-dual-buttons__button--subtle-hover:hover {
        opacity: .82;
    }
}

.pem-dual-buttons__button:focus-visible {
    outline: 2px solid var(--pem-accent, #ed7024);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   MESMA LARGURA
   ------------------------------------------------------------ */

.pem-dual-buttons__inner--equal .pem-dual-buttons__button {
    flex: 1 1 0;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 980px) {
    .pem-dual-buttons__inner {
        justify-content: var(--pem-db-align-tablet, flex-start);
        gap: var(--pem-db-gap-tablet, 12px);
    }

    .pem-dual-buttons__button {
        font-size: var(--pem-db-font-tablet, 11px);
    }
}

/* ------------------------------------------------------------
   CELULAR — breakpoint estrutural PEM
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .pem-dual-buttons__inner {
        justify-content: var(--pem-db-align-phone, flex-start);
        gap: var(--pem-db-gap-phone, 10px);
    }

    .pem-dual-buttons__button {
        font-size: var(--pem-db-font-phone, 11px);
    }

    .pem-dual-buttons__inner--stack-phone {
        flex-direction: column;
        align-items: var(--pem-db-align-phone, flex-start);
    }

    .pem-dual-buttons__inner--full-phone .pem-dual-buttons__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pem-dual-buttons__button {
        transition: none !important;
        transform: none !important;
    }
}


/* Preview estável: mantém cores e dimensões, sem deslocar os botões ao editar. */
.pem-dual-buttons__inner--builder .pem-dual-buttons__button,
.pem-dual-buttons__inner--builder .pem-dual-buttons__button:hover,
.pem-dual-buttons__inner--builder .pem-dual-buttons__button:active {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}