/* Checkout minimalista (AC509): encabezado de cada sección y formulario de
   Datafast. Solo estilos bajo body.pm-min; clases, ids y atributos de
   functions.js intactos. La lista de medios está en checkout-min-icons.css. */
.pm-min .payment-modes,
.pm-min .card-modes {
    height: auto;
    background: none;
    border-radius: 0;
}

.pm-min .card-mode-title {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding-bottom: 10px;
}

.pm-min .card-mode-logo {
    flex: 0 0 44px;
}

.pm-min .card-mode-subtitle {
    flex: 1;
    color: var(--pm-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* La lista y los paneles (Tarjeta: "Datos de tu tarjeta") traen su propio
   título: el encabezado viejo de sección no se muestra */
.pm-min .section-brand > .card-modes,
.pm-min .card-form > .card-modes {
    display: none;
}

/* Formulario de tarjeta (widget de Datafast): solo apariencia */
.pm-min .card-form .wpwl-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pm-ink-2);
}

.pm-min .card-form .wpwl-control,
.pm-min .card-form .wp-control-select-banks {
    height: 40px;
    border: 1.5px solid var(--pm-line);
    border-radius: 9px;
    background: #fff;
    color: var(--pm-ink);
    font-size: 0.95rem;
    box-shadow: none;
}

/* Mismo margen interno del texto en todos los campos (~13px desde el borde). Los
   de número y CVV son iframes de Datafast con su propio margen adentro: el
   padding del iframe lo completa hasta igualar al resto. */
.pm-min .card-form input.wpwl-control {
    padding: 0 12px;
}

.pm-min .card-form select.wpwl-control,
.pm-min .card-form .wp-control-select-banks {
    padding: 0 8px;
}

.pm-min .card-form .wpwl-wrapper-cardNumber .wpwl-control {
    padding: 0 9px;
}

.pm-min .card-form .wpwl-wrapper-cvv .wpwl-control {
    padding: 0 10px;
}

.pm-min .card-form .wpwl-control:focus,
.pm-min .card-form .wp-control-select-banks:focus {
    outline: none;
    border-color: var(--pm-brand);
    box-shadow: 0 0 0 3px var(--pm-brand-soft);
}

.pm-min .card-form .wpwl-control.wpwl-has-error {
    border-color: var(--pm-bad);
}

.pm-min .card-form .wpwl-form .wpwl-button-pay {
    height: 48px;
    border-radius: 10px;
    border-color: var(--pm-ink);
    background: var(--pm-ink);
    font-weight: 800;
    font-size: 1rem;
}

/* El widget centra su formulario (max-width 480px, padding 12px): se alinea
   al borde del panel, a todo el ancho, con Expira y CVV a la mitad. */
.pm-min .card-form .wpwl-form {
    max-width: none;
    margin: 0 0 24px;
    padding: 0;
}

.pm-min .card-form .wpwl-group,
.pm-min .card-form .wpwl-wrapper-select-banks {
    padding-right: 0;
}

.pm-min .card-form .wpwl-group-expiry,
.pm-min .card-form .wpwl-group-cvv {
    width: calc(50% - 8px);
}

.pm-min .card-form .wpwl-group-expiry {
    margin-right: 16px;
}

/* Registro de tarjeta: "Tipo de tarjeta" se ve como logos (functions.js,
   pmBrandLogos). El select del widget sigue en el formulario y es el que se
   envía; solo deja de verse una vez armados los logos (.pm-has-logos). */
.pm-min .wpwl-group-brand.pm-has-logos > .wpwl-wrapper-brand,
.pm-min .wpwl-group-brand.pm-has-logos > .wpwl-brand-card {
    display: none;
}

.pm-min .pm-brand-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, 72px);
    gap: 10px;
    padding-top: 6px;
    clear: both;
}

/* La lista de íconos sigue a la vista sobre el panel: "Seleccionar otro medio
   de pago" (recarga la página) no hace falta en ningún panel */
.pm-min .card-form .return,
.pm-min .section-de-una .return,
.pm-min .section-western .return {
    display: none;
}

/* Tarjeta guardada: el widget arma el renglón con floats alineados arriba y el CVV,
   más alto que el texto, se ve corrido hacia abajo. En flex todo queda centrado en
   la línea con los anchos del widget; en el celular el CVV (100% de ancho) pasa a
   su propia línea, como antes. El margen se reparte arriba y abajo para que el
   tacho quede a la altura del CVV. */
.pm-min .card-form .wpwl-registration {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 4px 0;
}