.groupsub-container {
    margin-bottom: 15px;
}

.groupsub-panel {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

.groupsub-header {
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.groupsub-body {
    padding: 15px;
}

#paypal-button-container {
    margin-top: 20px;
}

#paypal-success {
    color: green;
    font-weight: bold;
}

/* Custom styles for subscription page layout */
.package-container .package-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.package-container .column1 {
    flex: 2 1 0;       /* grow 1, shrink 1, base 64% */
    min-width: 420px;    /* evita que el texto se parta raro */
}

.package-description {
    display: flex;
    flex-direction: column;
    gap: .6rem;             /* separación título–texto */
}

.package-title {
    margin: 0;
    line-height: 1.2;
}

.package-text {
    margin: 0;
    line-height: 1.5;
    /* Si prefieres no usar nl2br, quita el filtro y usa: */
    /* white-space: pre-line;  */
}

.package-container .column1 .package-description h3 {
    margin-top: 0;
    text-align: center;
    font-size: 1.6em;      /* un poco más grande */
    font-weight: bold;     /* más marcado */
    margin-bottom: 1rem;   /* espacio con la descripción */
}

.package-container .column2 {
    flex: 1 1 0;       /* antes tenías flex-shrink:0 → ahora puede encoger */
  min-width: 250px;
  max-width: 420px;    /* tope para que no “coma” demasiado */
}

.package-container .column2 h4 {
    text-align: center;
    font-size: 1.4em;
    margin: 0 0 .5rem;   /* centrado y con poco espacio inferior */
}

.package-container .column2 .package-terms strong {
    display: block;
    text-align: center;
    font-size: 1.2em;
    margin: 0 0 .5rem;   /* menos espacio que antes */
}

/* Botones PayPal */
.package-container .paypal-button-container {
    display: flex;
    width: 100%;
    padding: 0;          /* margen lateral */
    margin-top: 1px;          /* menos separación superior */
}

/* contenedor que genera PayPal */
.package-container .paypal-button-container > div,
.package-container .paypal-button-container .paypal-buttons,
.package-container .paypal-button-container .paypal-button-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;     /* quita centrado automático */
    display: block !important;
}

/* iframe del botón */
.package-container .paypal-button-container iframe {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 6px;       /* opcional, suaviza bordes */
    display: block;
}

/* “Desarrollado por PayPal” alineado con el padding lateral */
.package-container .paypal-button-container .paypal-powered-by {
    padding: 0 0px !important;
    box-sizing: border-box;
}
/* Usa todo el ancho dentro de la columna 1 */
.package-container .column1 .postbody{
    float: none;          /* anula el float del tema */
    width: 100%;          /* elimina el 76% típico de prosilver */
    max-width: none;
    margin: 0;
  }
  
  .package-container .column1 .content{
    width: 100%;
    max-width: none;
  }
  
  /* por si el tema fija un max-width en párrafos o content */
  .package-container .column1 .content p{
    max-width: none;
  }

/* Responsive layout for smaller screens */
@media (max-width: 700px) {
    .package-container .package-layout {
        flex-direction: column;
    }

    .package-container .column1,
    .package-container .column2 {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
}