/* =========================================================
   PRODECI - Donar | Estilos del widget (frontend)
   Integrado al ecosistema de diseño del sitio (Divi):
   títulos Montserrat con línea inferior, cuerpo Raleway,
   botones píldora y layout de dos columnas en desktop.
   ========================================================= */
.pd-donar {
    --pd-primario: #0094a4;
    --pd-primario-osc: #007a88;
    --pd-secundario: #F5A82E;
    --pd-secundario-osc: #e0961c;
    --pd-fondo: #f9f9f9;
    --pd-texto: #333333;
    --pd-suave: #666666;
    --pd-borde: #e0e0e0;

    --pd-font-titulo: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    --pd-font-cuerpo: 'Raleway', Helvetica, Arial, Lucida, sans-serif;

    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--pd-font-cuerpo);
    color: var(--pd-suave);
    text-align: left;
}
.pd-donar *,
.pd-donar *::before,
.pd-donar *::after { box-sizing: border-box; }

/* El atributo [hidden] debe ocultar aunque haya un display de autor (ej: .pd-amounts es grid).
   Sin esto, los montos no desaparecen al pasar a "Suscripción mensual". */
.pd-donar [hidden] { display: none !important; }

/* ---------- Layout de dos columnas (desktop) ---------- */
.pd-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 981px) {
    /* Donación (izquierda) + Transferencias con más aire (derecha). */
    .pd-has-bank .pd-layout {
        grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.25fr);
        gap: 60px;
        align-items: start;
    }
}

/* ---------- Títulos estilo Divi (Montserrat + línea inferior) ---------- */
.pd-title,
.pd-bank-title {
    font-family: var(--pd-font-titulo);
    color: var(--pd-primario);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 22px;
}
.pd-title { font-size: 23px; }
.pd-bank-title { font-size: 26px; }
.pd-title::after,
.pd-bank-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: var(--pd-primario);
    margin-top: 10px;
}

/* ---------- Descripción ---------- */
.pd-desc {
    font-size: 17px;
    color: #555;
    line-height: 1.7;
    margin: 0 0 14px;
}

/* ---------- Frase destacada (llamado a la acción) ---------- */
/* Nunca más grande que el título .pd-title (23px). */
.pd-cta-frase {
    font-family: var(--pd-font-titulo);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pd-primario);
    margin: 0 0 24px;
}

/* ---------- Selector de plataformas (si hay más de 1) ---------- */
.pd-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.pd-platform-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 2px solid var(--pd-borde);
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--pd-font-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-texto);
    transition: all 0.2s ease;
}
.pd-platform-tab img { height: 22px; width: auto; display: block; filter: grayscale(100%); opacity: 0.7; }
.pd-platform-tab.active { border-color: var(--pd-primario); color: var(--pd-primario); }
.pd-platform-tab.active img { filter: none; opacity: 1; }

/* ---------- Paneles de plataforma ---------- */
.pd-panel { display: none; }
.pd-panel.active { display: block; }

/* ---------- Toggle única vez / mensual ---------- */
.pd-toggle {
    display: flex;
    background: var(--pd-fondo);
    border: 1px solid var(--pd-borde);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 22px;
}
.pd-toggle-btn {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    font-family: var(--pd-font-titulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-texto);
    cursor: pointer;
    transition: all 0.3s ease;
}
.pd-toggle-btn.active { background: var(--pd-primario); color: #fff; }

/* ---------- Grilla de montos (columnas definidas inline por PHP) ---------- */
.pd-amounts {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}
.pd-amount {
    padding: 16px 10px;
    border: 2px solid var(--pd-borde);
    background: #fff;
    border-radius: 10px;
    font-family: var(--pd-font-titulo);
    font-size: 17px;
    font-weight: 700;
    color: var(--pd-texto);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pd-amount:hover { border-color: var(--pd-secundario); color: var(--pd-secundario); }
.pd-amount.selected { border-color: var(--pd-secundario); background: var(--pd-secundario); color: #fff; }

/* ---------- Mensaje modo mensual ---------- */
.pd-monthly {
    margin-bottom: 22px;
    color: var(--pd-suave);
    font-size: 16px;
    line-height: 1.7;
}
.pd-monthly p { margin: 0; }

/* ---------- Botón CTA (píldora, como "DONAR AHORA") ---------- */
.pd-submit {
    display: block;
    width: 100%;
    padding: 15px 22px;
    background: var(--pd-primario);
    color: #fff !important;
    border: none;
    border-radius: 100px;
    font-family: var(--pd-font-titulo);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
}
.pd-submit:hover { background: var(--pd-primario-osc); color: #fff !important; }
.pd-submit:active { transform: scale(0.98); }
.pd-submit.pd-active-amount { background: var(--pd-secundario); }
.pd-submit.pd-active-amount:hover { background: var(--pd-secundario-osc); }
.pd-submit.pd-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ---------- Línea "Pagos procesados..." con logo B&N ---------- */
.pd-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: #999;
}
.pd-secure-logo {
    height: 28px;
    width: auto;
    display: inline-block;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.pd-secure:hover .pd-secure-logo { filter: grayscale(0); opacity: 1; }

/* ---------- Transferencias bancarias (texto plano, en columnas) ---------- */
.pd-bank-grid {
    display: grid;
    gap: 26px 32px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .pd-bank-grid.pd-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
.pd-bank-item {
    font-size: 15px;
    color: var(--pd-suave);
    line-height: 1.7;
}
.pd-bank-item strong {
    display: block;
    font-family: var(--pd-font-titulo);
    color: var(--pd-texto);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .pd-bank { margin-top: 8px; }
}