/* Checkout minimalista (AC509): estados de los botones. Hover sin @media (hover:
   hover): en el celular es la respuesta visible al tocar (queda hasta tocar otra
   cosa; el :active dura lo que el dedo). Solo apariencia.
   Botones principales: Pagar (widget de Datafast), Continuar con el pago (link
   abierto), Generar nuevo código (Deuna) y Generar código de pago (Western Union). */
.pm-min .card-form .wpwl-form .wpwl-button-pay,
.pm-min .pm-link-form .btn,
.pm-min .pm-deuna-regenerate,
.pm-min .section-western #btn-code {
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.pm-min .card-form .wpwl-form .wpwl-button-pay:not([disabled]):hover,
.pm-min .pm-link-form .btn:not([disabled]):hover,
.pm-min .pm-deuna-regenerate:not([disabled]):hover,
.pm-min .section-western #btn-code:not([disabled]):hover {
    background: #1c2143;
    border-color: #1c2143;
    box-shadow: 0 3px 10px rgba(18, 22, 51, 0.12);
}
.pm-min .card-form .wpwl-form .wpwl-button-pay:not([disabled]):active,
.pm-min .pm-link-form .btn:not([disabled]):active,
.pm-min .pm-deuna-regenerate:not([disabled]):active,
.pm-min .section-western #btn-code:not([disabled]):active {
    background: #0b0e24;
    border-color: #0b0e24;
    box-shadow: none;
    transform: scale(0.98);
}

/* "Seleccionar otro medio de pago": debajo del botón de pagar (o al final del
   panel), como acción secundaria; vuelve a la lista con los logos grandes */
.pm-min .pm-chosen-change {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pm-page);
    color: var(--pm-ink-2);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

/* Flecha hacia atrás (máscara con el color del texto); al pasar se corre a la izquierda */
.pm-min .pm-chosen-change::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s;
}

.pm-min .pm-chosen-change:hover {
    background: var(--pm-line-2);
    color: var(--pm-ink);
}

.pm-min .pm-chosen-change:hover::before {
    transform: translateX(-3px);
}
.pm-min .pm-chosen-change:active {
    background: var(--pm-line);
    color: var(--pm-ink);
    transform: scale(0.97);
}

/* El form del widget deja 24px abajo: el enlace queda pegado al botón de pagar */
.pm-min .card-form .pm-chosen-change {
    margin-top: -16px;
}

.pm-min .section-de-una .pm-chosen-change,
.pm-min .section-western .pm-chosen-change {
    margin-top: 12px;
}

.pm-min .pm-chosen-change:focus-visible {
    outline: 2px solid var(--pm-brand);
    outline-offset: 2px;
}

/* "Pagar con otra tarjeta de crédito/débito" (debajo de las tarjetas guardadas):
   el widget lo arma con la clase del botón de pagar; va como vínculo con el ícono
   de tarjeta de la lista de medios. Selectores más específicos que los del botón
   de pagar (también los del tema), así no depende del orden de las hojas. */
.pm-min .card-form .wpwl-form .wpwl-button-pay[data-action="show-initial-forms"] {
    height: auto;
    padding: 8px 12px;
    border-color: transparent;
    background: var(--pm-surface, #fff);
    color: var(--pm-brand);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pm-min .card-form .wpwl-form .wpwl-button-pay[data-action="show-initial-forms"]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pm-min .card-form .wpwl-form .wpwl-button-pay[data-action="show-initial-forms"]:not([disabled]):hover,
.pm-min .card-form .wpwl-form .wpwl-button-pay[data-action="show-initial-forms"]:not([disabled]):active {
    border-color: transparent;
    background: var(--pm-page);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .pm-min .card-form .wpwl-form .wpwl-button-pay,
    .pm-min .pm-link-form .btn,
    .pm-min .pm-deuna-regenerate,
    .pm-min .section-western #btn-code,
    .pm-min .pm-chosen-change,
    .pm-min .pm-chosen-change::before {
        transition: none;
    }
}