/* Aura Part Payment — selector de plan en el checkout y caja de las cuotas.
 *
 * El desplegable hereda de WPBS (el wrapper lleva .wpbs-form-field y
 * .wpbs-form-field-dropdown): alto, tipografía y flecha. Aquí solo se repone el
 * borde completo —el theme se come el superior— y se pintan las cajas.
 *
 * PALETA: la misma que los demás plugins de Aura de este sitio
 * (aura-custom-product-styles, aura-appointments), no una propia:
 *   beige #F3EDE6 en cajas · #FAF8F5 en superficies suaves
 *   bordes #9A9A9A en cajas · #E0E0E0 en separadores · #D4C5A9 en acentos
 *   texto #333 / #666 · titulares e importes en 'Alice', serif
 *   oliva de marca #687707, hover #5A6926 · radio 3px · botones planos.
 * Los mismos valores viven duplicados en el atributo `style` que genera
 * Aura_PP_Plan_Selector::sty(), porque a un correo no llega esta hoja: si se
 * cambia un color aquí, hay que cambiarlo allí. */

.aura-pp-native-hidden {
    display: none !important;
}

/* El borde del desplegable se fija inline desde el JS: el theme lo pisa con su
 * propio !important cargado después y aquí siempre perderíamos. */

/* Leyenda bajo el desplegable + resumen del plan en carrito/checkout de Woo:
 * misma caja para el mismo tipo de información. */
.aura-pp-legend,
.aura-pp-checkout-summary {
    padding: 12px 14px;
    border: 1px solid #9A9A9A;
    border-radius: 3px;
    background: #F3EDE6;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

.aura-pp-legend {
    margin-top: 10px;
}

.aura-pp-legend:empty {
    display: none;
}

.aura-pp-legend-desc {
    margin: 0 0 8px;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.aura-pp-legend-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.aura-pp-legend small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.aura-pp-checkout-summary {
    margin: 0 0 16px;
}

.aura-pp-checkout-summary ul {
    margin: 8px 0;
    padding-left: 18px;
    list-style: disc;
}

.aura-pp-checkout-summary li {
    margin-bottom: 4px;
}

.aura-pp-checkout-summary small {
    display: block;
    color: #666;
    font-size: 12px;
}

/* Título del plan e importes: 'Alice' como en las tarjetas de producto. El
 * cuerpo se queda en la tipografía del theme (font-family: inherit). */
.aura-pp-plan-title {
    display: block;
    margin: 0 0 8px;
    font-family: 'Alice', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    color: #333;
}

/* Una fila por cuota sobre la caja beige. Tabla y no flex porque el mismo HTML
 * se manda por correo y Outlook (motor de Word) ignora flex. */
.aura-pp-inst-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 8px;
}

.aura-pp-inst-row td {
    padding: 8px 0;
    border-top: 1px solid #E0E0E0;
    vertical-align: middle;
}

/* El theme tine TODA celda de tabla con rgba(128,128,128,.07) y sobre el beige
 * eso pinta un tablero gris dentro de la caja (verificado en la pagina real:
 * background-color computado de nuestros <td>). Se anula, dejando solo nuestra
 * linea separadora. En el correo no hace falta: alli no hay theme. */
.aura-pp-checkout-summary .aura-pp-inst-table,
.aura-pp-checkout-summary .aura-pp-inst-row,
.aura-pp-checkout-summary .aura-pp-inst-row td {
    background: transparent !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

.aura-pp-inst-amount {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-family: 'Alice', Georgia, serif;
    white-space: nowrap;
}

.aura-pp-inst-state {
    text-align: right;
    color: #666;
}

/* Pagado en el oliva de la marca, pendiente en gris: sin verdes ni azules
 * nuevos, el estado se lee por el color de Aura y no por un semáforo. */
.aura-pp-inst-row.is-paid .aura-pp-inst-state {
    color: #687707;
}

/* Estado transitorio (Redsys todavia no ha confirmado): se lee por la cursiva y
 * no por un color nuevo. Mismos valores en Aura_PP_Plan_Selector::sty(). */
.aura-pp-inst-row.is-confirming .aura-pp-inst-state {
    font-style: italic;
}

.aura-pp-inst-pay,
.woocommerce .aura-pp-inst-pay {
    display: inline-block;
    margin-left: 10px;
    padding: 8px 16px;
    border: 0;
    border-radius: 3px;
    background: #687707;
    color: #fff !important;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s;
}

.aura-pp-inst-pay:hover,
.aura-pp-inst-pay:focus,
.woocommerce .aura-pp-inst-pay:hover,
.woocommerce .aura-pp-inst-pay:focus {
    background: #5A6926;
    color: #fff !important;
    box-shadow: none;
}

.aura-pp-rule-notice {
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid #D4C5A9;
    border-radius: 3px;
    background: #FAF8F5;
    font-size: 13px;
    color: #666;
}

/* Botones "Pay"/"Cancel" de la fila Actions en el detalle de la orden: sobre el
 * verde oliva del theme el texto queda casi ilegible. Texto en blanco. */
a.button.order-actions-button,
a.button.order-actions-button:hover,
a.button.order-actions-button:focus,
.woocommerce a.button.order-actions-button,
.woocommerce a.button.order-actions-button:hover,
.woocommerce a.button.order-actions-button:focus {
    color: #fff !important;
}

/* Sin fechas elegidas no hay plan que ofrecer: el selector espera oculto. */
.aura-pp-selector.aura-pp-waiting {
    display: none !important;
}