/* Checkout minimalista (AC509): componentes del tema (tokens en
   checkout-min-theme.css). Mismos selectores que las hojas de origen; solo leen
   tokens, así en claro todo queda como hoy. */
.pm-min {
    background: var(--pm-surface);
}

/* Placa de los logos: en claro no se ve (transparente, sin relleno ni esquinas
   redondeadas: el logo queda exactamente como hoy) */
.pm-min .pm-methods .pm-ico img,
.pm-min .pm-brand-logos .pm-ico img,
.pm-min .pm-chosen img,
.pm-min .pm-voucher-brand {
    padding: var(--pm-plate-pad);
    border-radius: var(--pm-plate-radius);
    background: var(--pm-plate);
}

.pm-min .pm-chosen img,
.pm-min .pm-voucher-brand {
    border-radius: var(--pm-plate-radius-sm);
}

/* Logo del comercio: en oscuro solo lleva blanco detrás de sus partes
   transparentes (vienen pensados para blanco) */
.pm-min .pm-head-logo img {
    background: var(--pm-plate);
}

/* Logos que ya traen su propio fondo de color (American Express, Deuna,
   Western Union): sin placa y llenando el recuadro, del mismo tamaño que las
   placas blancas (su dibujo es un poco más apaisado que el recuadro) */
.pm-min .pm-ico img[alt="American Express"],
.pm-min .pm-ico.select-card-brand-de-una img,
.pm-min .pm-ico.select-card-brand-western img {
    padding: 0;
    background: transparent;
    object-fit: fill;
}

.pm-min .section-de-una .pm-chosen img,
.pm-min .section-western .pm-chosen img {
    padding: 0;
    background: transparent;
}

/* Todos los logos de los íconos en la misma caja, el logo centrado dentro: la
   placa del oscuro queda del mismo tamaño en todos (PayPal es casi cuadrado) */
.pm-min .pm-methods .pm-ico img,
.pm-min .pm-brand-logos .pm-ico img {
    width: 100%;
}

/* Íconos de medios: la baldosa sigue al tema (en oscuro, transparente) */
.pm-min .pm-methods .pm-ico,
.pm-min .pm-brand-logos .pm-ico {
    grid-template-columns: minmax(0, 1fr);
    background: var(--pm-tile);
}

/* Campos: tarjeta (widget de Datafast) y formulario del link abierto. Los de
   número y CVV son iframes de Datafast: el widget copia color y fondo del campo */
.pm-min .card-form .wpwl-control,
.pm-min .card-form .wp-control-select-banks,
.pm-min .pm-link-form .form-control {
    background: var(--pm-field);
    color: var(--pm-ink);
}

.pm-min .card-form .wpwl-control::placeholder,
.pm-min .pm-link-form .form-control::placeholder {
    color: var(--pm-muted);
}

/* Código OTP del widget: su diseño de casillas (el estilo de campo no le aplica)
   y el color del tema; Datafast lo trae negro con !important */
.pm-min .card-form .wpwl-control.wpwl-control-otp {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--pm-muted) 0, var(--pm-muted) 1ch, transparent 0, transparent 1.5ch) 0 100% / 8.5ch 2px no-repeat;
    font-size: 4ch;
    color: var(--pm-ink) !important;
}

.pm-min .card-form .wpwl-hint {
    color: var(--pm-hint);
}

.pm-min .pm-link-form .has-error .form-control:focus {
    box-shadow: 0 0 0 3px var(--pm-bad-soft);
}

.pm-min .iti__country-list {
    border-color: var(--pm-line);
    background: var(--pm-sheet);
    color: var(--pm-ink);
}

.pm-min .iti__country.iti__highlight {
    background: var(--pm-page);
}

/* Registro de tarjeta: texto de ayuda en el azul de marca */
.pm-min .description {
    color: var(--pm-brand);
}

/* Botones principales: el texto sigue al fondo (tinta) */
.pm-min .card-form .wpwl-form .wpwl-button-pay,
.pm-min .pm-link-form .btn,
.pm-min .pm-link-form .btn:hover,
.pm-min .pm-link-form .btn:focus,
.pm-min .pm-deuna-regenerate,
.pm-min .section-western #btn-code {
    color: var(--pm-on-ink);
}

.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: var(--pm-ink-hover);
    border-color: var(--pm-ink-hover);
}

.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: var(--pm-ink-active);
    border-color: var(--pm-ink-active);
}

/* Hoja del detalle */
.pm-min .pm-sheet,
.pm-min .pm-sheet-head {
    background: var(--pm-sheet);
}

.pm-min .pm-sheet {
    box-shadow: 0 24px 60px var(--pm-shadow);
}

/* ::backdrop no hereda variables antes de Chrome 122 / Safari 17.4 / Firefox 120:
   sin el valor de respaldo el fondo quedaría transparente en esos navegadores */
.pm-min .pm-sheet::backdrop {
    background: var(--pm-scrim, rgba(18, 22, 51, 0.38));
}

/* Pago exitoso / reversado */
.pm-min .pm-head-status {
    background: var(--pm-ok-soft);
}

.pm-min .pm-head-status svg {
    color: var(--pm-on-ok);
}

.pm-min .pm-head-status.is-reversed {
    background: var(--pm-warn-soft);
    color: var(--pm-warn);
}

.pm-min .pm-head-status.is-reversed svg {
    background: var(--pm-warn);
}

/* Pie: sellos y logo de Pagomedios en blanco sobre fondo oscuro */
.pm-min .pm-trust img {
    filter: var(--pm-trust-filter);
}

.pm-min .pm-logo-mask {
    background: var(--pm-foot-logo);
}

/* Aviso "Pago recibido, validando…" (SweetAlert dentro de body.pm-min) */
.pm-min .swal2-popup {
    background: var(--pm-sheet);
    color: var(--pm-ink);
}

.pm-min .pm-verify-icon,
.pm-min .pm-verify strong {
    color: var(--pm-ink);
}

.pm-min .pm-verify small {
    color: var(--pm-muted);
}

.pm-min .pm-verify-ring {
    border-color: var(--pm-line);
    border-top-color: var(--pm-brand);
}