/* Checkout minimalista (AC509, diseño F): lista de medios y panel del medio
   elegido, en una sola columna. functions.js oculta la lista al abrir un medio
   (display:none en línea); acá sigue visible, en filas compactas, con el panel
   debajo. Sin :has() ni :is(): funciona en los navegadores de 2020 (el piso de
   functions.js). */
.pm-min .card-right > .payment-modes > .section-brand[style*="display: none"] {
    display: block !important;
}

/* Con Deuna como único medio no hay otro que elegir */
.pm-min .payment-modes[data-solo-deuna] .pm-chosen-change {
    display: none;
}

/* Paneles: separados de la lista por una línea; entran desde abajo al mostrarse
   (animación: corre cada vez que el JS los vuelve a mostrar, en cualquier
   navegador) y salen al instante para que dos paneles no convivan en la columna */
.pm-min .card-right > .payment-modes > .card-form,
.pm-min .card-right > .payment-modes > .section-western,
.pm-min .card-right > .payment-modes > .section-de-una,
.pm-min .card-right > .payment-modes > #safetypay-payment {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--pm-line-2);
    scroll-margin-top: 12px;
    animation: pm-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition: margin 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pm-panel-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* Lista en filas compactas: el panel queda más cerca */
.pm-min .card-right > .payment-modes > .section-brand[style*="display: none"] ~ .card-form,
.pm-min .card-right > .payment-modes > .section-brand[style*="display: none"] ~ .section-western,
.pm-min .card-right > .payment-modes > .section-brand[style*="display: none"] ~ .section-de-una,
.pm-min .card-right > .payment-modes > .section-brand[style*="display: none"] ~ #safetypay-payment {
    margin-top: 18px;
    padding-top: 16px;
}

/* Elegido un medio: grupos más compactos (logos más chicos), así el panel queda
   a la vista. El nombre de cada grupo se mantiene visible para que se entienda. */
.pm-min .section-brand[style*="display: none"] .pm-methods {
    gap: 12px;
}

/* La pastilla "Selecciona un medio de pago" se pliega (no desaparece de golpe);
   el margen negativo descuenta el espacio entre filas de la lista */
.pm-min .section-brand[style*="display: none"] .pm-pick-pill {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -12px;
    opacity: 0;
}

/* El nombre del grupo sigue encima de sus logos (visible para que se entienda),
   más chico y pegado a ellos */
.pm-min .section-brand[style*="display: none"] .pm-group {
    gap: 4px;
}

.pm-min .section-brand[style*="display: none"] .pm-group-title {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.pm-min .section-brand[style*="display: none"] .pm-group-title svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

.pm-min .section-brand[style*="display: none"] .pm-group-icons {
    margin-bottom: -6px;
}

.pm-min .section-brand[style*="display: none"] .pm-methods .pm-ico {
    width: 46px;
    height: 36px;
    margin: 0 6px 6px 0;
    padding: 4px;
    --pm-check: 14px;
    --pm-check-at: -5px;
}

.pm-min .section-brand[style*="display: none"] .pm-ico img {
    height: 26px;
}

.pm-min .section-brand[style*="display: none"] .pm-methods .pm-group-cash .pm-ico {
    width: 64px;
}

/* Medio elegido según el panel abierto: solo con :has() (Chrome 105+, Safari
   15.4+). Son mejoras en reglas aparte; sin :has() el resto se ve igual (ver
   checkout-min-icons.css). */
/* Mejora con :has(): Billeteras o Efectivo abierto se resalta igual */
.pm-min .payment-modes:has(> .section-de-una:not([style*="display: none"])) .pm-methods .select-card-brand-de-una,
.pm-min .payment-modes:has(> .section-western:not([style*="display: none"])) .pm-methods .select-card-brand-western {
    border: 1.5px solid var(--pm-ink);
    box-shadow: 0 0 0 3px var(--pm-brand-soft);
}

/* Mejora con :has(): la marca deja de verse elegida mientras otro medio está abierto */
.pm-min .payment-modes:has(> .card-form[style*="display: none"]) .pm-methods .pm-card-tile[aria-pressed="true"] {
    border-color: transparent;
    box-shadow: none;
}

.pm-min .payment-modes:has(> .card-form[style*="display: none"]) .pm-methods .pm-card-tile[aria-pressed="true"]::after {
    content: none;
}

.pm-min .payment-modes:has(> .section-de-una:not([style*="display: none"])) .pm-methods .select-card-brand-de-una::after,
.pm-min .payment-modes:has(> .section-western:not([style*="display: none"])) .pm-methods .select-card-brand-western::after {
    content: "";
    position: absolute;
    top: var(--pm-check-at);
    right: var(--pm-check-at);
    width: var(--pm-check);
    height: var(--pm-check);
    border-radius: 50%;
    background: var(--pm-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / calc(var(--pm-check) * 0.66) no-repeat;
}

/* Banco emisor (solo Visa/Mastercard): aparece junto a Cuotas sin brotar de
   golpe. La animación corre cada vez que .show() lo vuelve visible. */
.pm-min .card-form .wpwl-wrapper-select-banks {
    animation: pm-bank-in 0.25s ease;
}

.pm-min .card-form .wpwl-label-bank {
    display: block;
    margin-bottom: 6px;
}

@keyframes pm-bank-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-min .card-form .wpwl-wrapper-select-banks {
        animation: none;
    }

    .pm-min .card-right > .payment-modes > * {
        animation: none;
        transition: none;
    }
}