/**
 * NEF Donations · estilos públicos
 *
 * Todos los colores salen de variables CSS que escribe PHP en el atributo
 * style de cada bloque, con lo que hay en Ajustes → Apariencia. Aquí solo
 * están las medidas y la disposición. Los valores que se ven abajo son la
 * red de seguridad por si el bloque se pinta sin variables.
 *
 * La tipografía no se toca a propósito: se hereda la del tema para que el
 * bloque no cante al lado del resto de la ficha.
 */

.nefd {
    --nefd-bg: transparent;
    --nefd-label: #9a9a9a;
    --nefd-amount: #b3aca2;
    --nefd-accent: #3f3a66;
    --nefd-accent-hover: #524b80;
    --nefd-accent-text: #ffffff;
    --nefd-field-bg: #171717;
    --nefd-border: #2e2e2e;
    --nefd-muted: #6f6f6f;
    --nefd-amount-size: 64px;
    --nefd-radius: 6px;

    background: var(--nefd-bg);
    color: var(--nefd-amount);
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    max-width: 100%;
}

.nefd *,
.nefd *::before,
.nefd *::after {
    box-sizing: border-box;
}

.nefd-align-center { text-align: center; }
.nefd-align-right  { text-align: right; }

/* -------------------------------------------------------------------------
   Etiqueta ("Suggested price")
   ---------------------------------------------------------------------- */

.nefd-label {
    color: var(--nefd-label);
    font-size: 17px;
    letter-spacing: .02em;
    margin: 0 0 10px;
    text-align: center;
}

.nefd-align-left .nefd-label  { text-align: left; }
.nefd-align-right .nefd-label { text-align: right; }

/* -------------------------------------------------------------------------
   Modo "precio": la cifra grande y el botón al lado
   ---------------------------------------------------------------------- */

.nefd-precio-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 28px;
}

.nefd-align-center .nefd-precio-row { justify-content: center; }
.nefd-align-right .nefd-precio-row  { justify-content: flex-end; }

.nefd-bigamount {
    display: inline-flex;
    align-items: baseline;
    color: var(--nefd-amount);
    font-size: var(--nefd-amount-size);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.nefd-amount-big {
    /* El campo tiene que ser indistinguible del precio estático que había
       antes: sin fondo, sin borde y con la misma tipografía y tamaño. */
    background: none;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: right;
    width: auto;
    min-width: 2ch;
    border-radius: 0;
    box-shadow: none;
    -moz-appearance: textfield;
}

.nefd-amount-big::-webkit-outer-spin-button,
.nefd-amount-big::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* La cantidad sugerida se ve floja: está ahí como referencia, no como una
   cifra ya escrita. En cuanto el visitante teclea, desaparece. */
.nefd-amount-big::placeholder {
    color: var(--nefd-amount);
    opacity: .38;
}
.nefd-amount-big::-moz-placeholder { color: var(--nefd-amount); opacity: .38; }
.nefd-amount-big:-ms-input-placeholder { color: var(--nefd-amount); opacity: .38; }

/* Un subrayado muy tenue que solo aparece al pasar por encima: la pista de
   que ahí se puede escribir, sin ensuciar el diseño mientras no haga falta. */
.nefd-amount-big {
    border-bottom: 2px solid transparent;
    transition: border-color .18s ease;
}
.nefd-bigamount:hover .nefd-amount-big,
.nefd-amount-big:focus {
    border-bottom-color: rgba(255, 255, 255, .18);
}

.nefd-symbol {
    color: var(--nefd-amount);
    font-size: inherit;
    line-height: 1;
    margin-left: .02em;
}

/* -------------------------------------------------------------------------
   Botón principal
   ---------------------------------------------------------------------- */

.nefd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--nefd-accent);
    color: var(--nefd-accent-text);
    border: 0;
    border-radius: var(--nefd-radius);
    padding: 20px 38px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.nefd-cta:hover,
.nefd-cta:focus {
    background: var(--nefd-accent-hover);
    color: var(--nefd-accent-text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.nefd-cta:active {
    transform: translateY(1px);
}

.nefd-cta[disabled] {
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

.nefd-cta-icon {
    display: inline-flex;
    align-items: center;
}

/* El hueco del icono se pinta siempre porque ahí va la rueda de "procesando".
   Mientras no haga falta, si está vacío se esconde para que no deje un
   espacio suelto dentro del botón. */
.nefd-cta-icon:empty { display: none; }
.nefd-cta.is-loading .nefd-cta-icon:empty { display: inline-flex; }

.nefd-icon {
    display: block;
}

/* Mientras se cobra, el botón se queda quieto y con una rueda girando: sin
   eso la gente pulsa tres veces y crea tres intentos de pago. */
.nefd-cta.is-loading {
    pointer-events: none;
    opacity: .75;
}
.nefd-cta.is-loading .nefd-cta-icon::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nefd-spin .7s linear infinite;
}
.nefd-cta.is-loading .nefd-icon { display: none; }

@keyframes nefd-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Modo "campo" y campo de otra cantidad
   ---------------------------------------------------------------------- */

.nefd-campo-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.nefd-align-center .nefd-campo-row { justify-content: center; }
.nefd-align-right .nefd-campo-row  { justify-content: flex-end; }

.nefd-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nefd-field-bg);
    border: 1px solid var(--nefd-border);
    border-radius: var(--nefd-radius);
    padding: 0 16px;
    min-width: 130px;
    flex: 1 1 130px;
    max-width: 220px;
    transition: border-color .18s ease;
}

.nefd-field:focus-within {
    border-color: var(--nefd-accent-hover);
}

.nefd-field .nefd-amount {
    background: none;
    border: 0;
    outline: 0;
    box-shadow: none;
    color: var(--nefd-amount);
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    padding: 16px 0;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.nefd-field .nefd-amount::placeholder { color: var(--nefd-amount); opacity: .35; }

.nefd-field-symbol {
    color: var(--nefd-amount);
    font-size: 24px;
    opacity: .85;
    flex: none;
}

.nefd-field-before .nefd-field-symbol { order: -1; }

/* -------------------------------------------------------------------------
   Modo "botones": la rejilla de importes
   ---------------------------------------------------------------------- */

.nefd-grid {
    display: grid;
    grid-template-columns: repeat(var(--nefd-cols, 3), minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.nefd-preset {
    background: var(--nefd-field-bg);
    border: 1px solid var(--nefd-border);
    border-radius: var(--nefd-radius);
    color: var(--nefd-amount);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 18px 8px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .1s ease;
    -webkit-appearance: none;
    appearance: none;
}

.nefd-preset:hover {
    border-color: var(--nefd-accent-hover);
    color: #fff;
}

.nefd-preset:active { transform: translateY(1px); }

.nefd-preset.is-active {
    background: var(--nefd-accent);
    border-color: var(--nefd-accent);
    color: var(--nefd-accent-text);
}

.nefd-otra-label {
    display: block;
    color: var(--nefd-label);
    font-size: 14px;
    margin: 0 0 8px;
}

/* -------------------------------------------------------------------------
   Nota, saltar y errores
   ---------------------------------------------------------------------- */

/* La nota y el enlace de saltar comparten línea: la nota debajo de la cifra y
   el enlace debajo del botón, alineados con lo que tienen encima. Apilados uno
   sobre otro el bloque crecía a lo alto y descolocaba la ficha. */
.nefd-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.nefd-note {
    color: var(--nefd-muted);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    flex: 1 1 240px;
    max-width: 34em;
}

/* Si no hay nota, el enlace no debe irse al centro: se queda a la derecha. */
.nefd-foot > .nefd-skip:only-child {
    margin-left: auto;
}

/* El enlace no puede sobresalir del bloque. Con la nota ocupando su ancho
   mínimo, en una columna estrecha el enlace se salía por la derecha en lugar
   de bajar a la línea siguiente: le faltaba permiso para encogerse. */
.nefd-foot > .nefd-skip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: right;
    word-break: break-word;
}

.nefd-foot > .nefd-note {
    min-width: 0;
}

.nefd-skip {
    background: none;
    border: 0;
    padding: 0;
    color: var(--nefd-muted);
    font-family: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    opacity: .9;
}

.nefd-skip:hover { color: var(--nefd-amount); }

.nefd-error {
    color: #e2646b;
    font-size: 14px;
    margin: 12px 0 0;
}

/* -------------------------------------------------------------------------
   Panel de pago
   ---------------------------------------------------------------------- */

.nefd-pay {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--nefd-border);
    animation: nefd-appear .22s ease;
    text-align: left;
}

@keyframes nefd-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.nefd-pay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.nefd-pay-total {
    color: var(--nefd-label);
    font-size: 15px;
}

.nefd-total-amount {
    color: var(--nefd-amount);
    font-size: 22px;
    font-weight: 600;
}

.nefd-pay-back {
    background: none;
    border: 0;
    padding: 0;
    color: var(--nefd-muted);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.nefd-pay-back:hover { color: var(--nefd-amount); }

.nefd-donor {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.nefd-donor input,
.nefd-donor textarea {
    background: var(--nefd-field-bg);
    border: 1px solid var(--nefd-border);
    border-radius: var(--nefd-radius);
    color: var(--nefd-amount);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 15px;
    width: 100%;
    outline: 0;
    box-shadow: none;
}

.nefd-donor input::placeholder,
.nefd-donor textarea::placeholder { color: var(--nefd-muted); }

.nefd-donor input:focus,
.nefd-donor textarea:focus { border-color: var(--nefd-accent-hover); }

.nefd-donor textarea { resize: vertical; }

.nefd-optin {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--nefd-muted);
    font-size: 13.5px;
    line-height: 1.45;
    cursor: pointer;
    margin-top: 2px;
}

.nefd-optin input { margin-top: 2px; flex: none; }

/* Pestañas de método */

.nefd-methods {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--nefd-border);
    margin-bottom: 18px;
}

.nefd-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--nefd-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}

.nefd-method:hover { color: var(--nefd-amount); }

.nefd-method.is-active {
    color: var(--nefd-amount);
    border-bottom-color: var(--nefd-accent-hover);
}

.nefd-method-icon { display: inline-flex; }

.nefd-pane { display: none; }
.nefd-pane.is-active { display: block; }

/* Tarjeta de Stripe */

.nefd-card-element {
    background: var(--nefd-field-bg);
    border: 1px solid var(--nefd-border);
    border-radius: var(--nefd-radius);
    padding: 15px;
    margin-bottom: 14px;
    min-height: 46px;
}

.nefd-pay-now { width: 100%; }

.nefd-wallet-button { min-height: 46px; }

.nefd-wallet-missing {
    color: var(--nefd-muted);
    font-size: 13.5px;
    margin: 0;
}

.nefd-paypal-buttons { min-height: 46px; }

.nefd-secure {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--nefd-muted);
    font-size: 12.5px;
    margin: 16px 0 0;
}

/* -------------------------------------------------------------------------
   Gracias
   ---------------------------------------------------------------------- */

.nefd-thanks {
    text-align: center;
    padding: 26px 10px;
    animation: nefd-appear .25s ease;
}

.nefd-thanks-check {
    color: #6fd08c;
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.nefd-thanks-title {
    color: var(--nefd-amount);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

.nefd-thanks-text {
    color: var(--nefd-muted);
    font-size: 15px;
    margin: 0 auto;
    max-width: 34em;
}

.nefd-thanks-amount {
    color: var(--nefd-label);
    font-size: 14px;
    margin: 14px 0 0;
}

.nefd-thanks-coupon {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 18px;
    border: 1px dashed var(--nefd-accent-hover);
    border-radius: var(--nefd-radius);
    color: var(--nefd-amount);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* -------------------------------------------------------------------------
   El panel de pago en ventana
   -------------------------------------------------------------------------
   Es distinto del modo "modal" de más abajo. Ahí lo que se abre en ventana es
   el selector de cantidad, desde un único botón. Aquí el bloque se ve entero
   en la página, como siempre, y lo que se abre en ventana al pulsar Donate es
   el panel de pago: así la página no se estira ni se descoloca cuando aparece
   el formulario, que en una columna estrecha empujaba todo lo de abajo.
   ---------------------------------------------------------------------- */

/* El panel gratuito es hermano del de pago: mismo sitio, mismo aspecto y
   mismo comportamiento en ventana. Lo único que cambia es que dentro no hay
   pasarelas, porque no hay nada que cobrar. */
.nefd-regpanel,
.nefd-freepanel {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--nefd-border);
    animation: nefd-appear .22s ease;
    text-align: left;
}

.nefd-regpanel .nefd-cta,
.nefd-freepanel .nefd-cta {
    width: 100%;
}

.nefd-reg-note {
    color: var(--nefd-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.nefd-reg-login {
    margin: 12px 0 0;
    font-size: 14px;
}

.nefd-reg-login a {
    color: var(--nefd-amount);
    text-decoration: underline;
}

/* Quién está donando, una vez identificado. */
.nefd-identity {
    color: var(--nefd-muted);
    font-size: 13.5px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nefd-border);
    word-break: break-word;
}

.nefd-panel-modal .nefd-regpanel:not([hidden]),
.nefd-panel-modal .nefd-freepanel:not([hidden]),
.nefd-panel-modal .nefd-pay:not([hidden]) {
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;   /* respaldo para navegadores sin inset */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0;
    border-top: 0;
    background: rgba(0, 0, 0, .74);
    animation: nefd-fade .2s ease;
    overflow-y: auto;
}

.nefd-panel-modal .nefd-regpanel .nefd-pay-inner,
.nefd-panel-modal .nefd-freepanel .nefd-pay-inner,
.nefd-panel-modal .nefd-pay .nefd-pay-inner {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #101010;
    border: 1px solid var(--nefd-border);
    border-radius: calc(var(--nefd-radius) + 4px);
    padding: 24px 26px 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

/* La X solo tiene sentido cuando hay una ventana que cerrar. */
.nefd-pay-close {
    display: none;
    background: none;
    border: 0;
    padding: 0 2px;
    color: var(--nefd-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.nefd-pay-close:hover { color: var(--nefd-amount); }

.nefd-panel-modal .nefd-pay-close { display: block; }

/* El botón de ir a las descargas. Va a lo ancho porque en la ventana es la
   única acción que queda por hacer, y no tiene sentido hacérsela buscar. */
.nefd-thanks-go {
    display: inline-flex;
    margin-top: 18px;
    text-decoration: none;
}

.nefd-panel-modal .nefd-thanks-go,
.nefd-mode-modal .nefd-thanks-go {
    display: flex;
    width: 100%;
}

.nefd-thanks-redirect {
    color: var(--nefd-muted);
    font-size: 13.5px;
    margin: 16px 0 0;
}

/* -------------------------------------------------------------------------
   Modo ventana
   ---------------------------------------------------------------------- */

.nefd-mode-modal .nefd-body {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .72);
    animation: nefd-fade .2s ease;
}

.nefd-mode-modal .nefd-body[hidden] { display: none; }

@keyframes nefd-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* El fondo oscuro es el propio .nefd-body; el contenido va dentro de
   .nefd-inner, que en esta presentación se convierte en la tarjeta. */
.nefd-mode-modal .nefd-inner {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #101010;
    border: 1px solid var(--nefd-border);
    border-radius: calc(var(--nefd-radius) + 4px);
    padding: 26px 26px 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    text-align: left;
}

.nefd-mode-modal .nefd-pay { border-top-color: var(--nefd-border); }

.nefd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.nefd-modal-title {
    color: var(--nefd-amount);
    font-size: 19px;
    font-weight: 700;
}

.nefd-modal-close {
    background: none;
    border: 0;
    color: var(--nefd-muted);
    font-size: 28px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.nefd-modal-close:hover { color: var(--nefd-amount); }

/* -------------------------------------------------------------------------
   Aviso que solo ve el administrador
   ---------------------------------------------------------------------- */

.nefd-admin-warning {
    border: 1px dashed #c98a2e;
    background: rgba(201, 138, 46, .08);
    color: #c98a2e;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Blindaje contra los estilos del tema
   -------------------------------------------------------------------------

   Este bloque no es decoración: es lo que hace que el bloque se vea igual en
   la web que en la vista previa del panel.

   El motivo es la especificidad de CSS. Una regla mía como `.nefd-amount-big`
   vale 0-1-0, mientras que la típica del tema, `input[type="text"]`, vale
   0-1-1 y por tanto GANA. Resultado: la cifra enorme se convertía en un
   campito de 14px con borde, que es justo lo que no se quiere.

   Aquí se repiten las declaraciones críticas con el selector reforzado
   (`.nefd input.nefd-amount-big`, 0-2-1) y con !important en las propiedades
   que los temas y Elementor tocan sin falta: fondo, borde, sombra, alto,
   relleno y tipografía. El !important está justificado porque este bloque se
   incrusta en temas de terceros que no se conocen de antemano; no es pereza.
   ---------------------------------------------------------------------- */

.nefd input.nefd-amount-big {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    color: var(--nefd-amount) !important;
    text-align: right !important;
    text-transform: none !important;
}

.nefd .nefd-bigamount:hover input.nefd-amount-big,
.nefd input.nefd-amount-big:focus {
    border-bottom-color: rgba(255, 255, 255, .18) !important;
}

.nefd .nefd-field input.nefd-amount {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-family: inherit !important;
    font-size: 24px !important;
    color: var(--nefd-amount) !important;
    text-transform: none !important;
}

.nefd button.nefd-cta,
.nefd button.nefd-preset,
.nefd button.nefd-method,
.nefd button.nefd-skip,
.nefd button.nefd-pay-back,
.nefd button.nefd-modal-close {
    font-family: inherit !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

.nefd button.nefd-cta {
    background: var(--nefd-accent) !important;
    background-image: none !important;
    color: var(--nefd-accent-text) !important;
    border: 0 !important;
    border-radius: var(--nefd-radius) !important;
    padding: 20px 38px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    text-decoration: none !important;
}

.nefd button.nefd-cta:hover,
.nefd button.nefd-cta:focus {
    background: var(--nefd-accent-hover) !important;
    color: var(--nefd-accent-text) !important;
}

.nefd button.nefd-preset {
    background: var(--nefd-field-bg) !important;
    background-image: none !important;
    color: var(--nefd-amount) !important;
    border: 1px solid var(--nefd-border) !important;
    border-radius: var(--nefd-radius) !important;
    padding: 18px 8px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    width: 100%;
}

.nefd button.nefd-preset.is-active {
    background: var(--nefd-accent) !important;
    border-color: var(--nefd-accent) !important;
    color: var(--nefd-accent-text) !important;
}

.nefd button.nefd-skip,
.nefd button.nefd-pay-back {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
}

.nefd .nefd-donor input,
.nefd .nefd-donor textarea {
    background: var(--nefd-field-bg) !important;
    background-image: none !important;
    border: 1px solid var(--nefd-border) !important;
    border-radius: var(--nefd-radius) !important;
    box-shadow: none !important;
    color: var(--nefd-amount) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    padding: 13px 15px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    text-transform: none !important;
}

/* El símbolo de la moneda tiene que crecer con la cifra, no con el texto del
   tema: si el tema le mete un font-size a los span, se queda diminuto al lado
   de un número de 64px. */
.nefd .nefd-bigamount .nefd-symbol {
    font-size: inherit !important;
    line-height: 1 !important;
    color: var(--nefd-amount) !important;
}

/* Algunos temas ponen los botones e inputs en display:block con márgenes
   propios, y eso rompe la fila de "cifra + botón". */
.nefd .nefd-precio-row,
.nefd .nefd-campo-row {
    display: flex !important;
}

.nefd .nefd-bigamount {
    display: inline-flex !important;
    align-items: baseline !important;
}

/* -------------------------------------------------------------------------
   Pantallas estrechas
   ---------------------------------------------------------------------- */

/* Ojo al orden: estas reglas tienen que ganarle al bloque de blindaje de
   arriba, así que repiten su misma especificidad reforzada y su !important.
   Si se escribieran "normales", en el móvil no se aplicaría ninguna. */
@media (max-width: 640px) {
    .nefd {
        --nefd-amount-size: 44px;
    }

    .nefd .nefd-precio-row {
        gap: 18px;
    }

    .nefd button.nefd-cta {
        padding: 16px 24px !important;
        font-size: 17px !important;
        width: 100%;
    }

    .nefd .nefd-field {
        max-width: none;
    }

    .nefd .nefd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}