/**
 * Estilos para el carrito de suscripciones.
 *
 * @package Wooggins_Subscriptions
 */

/* ==========================================================================
   Indicador de período en nombre del producto
   ========================================================================== */

.wooggins-subscription-period {
    color: #666;
    font-weight: normal;
    font-size: 0.9em;
    display: inline-block;
    margin-left: 5px;
}

/* ==========================================================================
   Sufijo de período en precios
   ========================================================================== */

.wooggins-period-suffix {
    color: #999;
    font-size: 0.85em;
    font-weight: normal;
}

/* ==========================================================================
   Cuota de alta en subtotales
   ========================================================================== */

.wooggins-sign-up-fee {
    display: block;
    color: #666;
    margin-top: 5px;
}

/* ==========================================================================
   Fila de totales recurrentes
   ========================================================================== */

.wooggins-recurring-totals th {
    background-color: #f8f8f8;
    border-top: 2px solid #e5e5e5;
    padding-top: 15px;
    padding-bottom: 10px;
}

.wooggins-recurring-totals-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

/* ==========================================================================
   Filas individuales de totales recurrentes
   ========================================================================== */

.wooggins-recurring-total-row th,
.wooggins-recurring-total-row td {
    background-color: #fafafa;
}

.wooggins-recurring-total-row td strong {
    color: #333;
}

/* ==========================================================================
   Fila de cuota de alta
   ========================================================================== */

.wooggins-sign-up-fee-row th,
.wooggins-sign-up-fee-row td {
    background-color: #fafafa;
    font-size: 0.95em;
}

/* ==========================================================================
   Fila de primer pago
   ========================================================================== */

.wooggins-first-payment-row th,
.wooggins-first-payment-row td {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
}

.wooggins-first-payment-row td strong {
    color: #333;
    font-size: 1.1em;
}

.wooggins-first-payment-note {
    color: #666;
    display: block;
    margin-top: 5px;
}

/* ==========================================================================
   Nota de suscripción
   ========================================================================== */

.wooggins-subscription-note-row td {
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
}

.wooggins-subscription-note {
    margin: 0;
    padding: 10px 15px;
    background-color: #f0f7ff;
    border-left: 3px solid #0073aa;
    border-radius: 3px;
}

.wooggins-subscription-note small {
    color: #555;
    line-height: 1.5;
}

/* ==========================================================================
   Mini carrito
   ========================================================================== */

.wooggins-mini-cart-period {
    display: block;
    color: #999;
    font-size: 0.85em;
    margin-top: 3px;
}

/* ==========================================================================
   Checkout - Totales recurrentes
   ========================================================================== */

.woocommerce-checkout .wooggins-recurring-totals th {
    text-align: left;
}

.woocommerce-checkout .wooggins-recurring-total-row th,
.woocommerce-checkout .wooggins-recurring-total-row td,
.woocommerce-checkout .wooggins-sign-up-fee-row th,
.woocommerce-checkout .wooggins-sign-up-fee-row td,
.woocommerce-checkout .wooggins-first-payment-row th,
.woocommerce-checkout .wooggins-first-payment-row td {
    border-top: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .wooggins-subscription-period {
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }

    .wooggins-recurring-totals-title {
        font-size: 1em;
    }

    .wooggins-first-payment-row td strong {
        font-size: 1em;
    }

    .wooggins-subscription-note {
        padding: 8px 12px;
    }
}

/* ==========================================================================
   Temas oscuros (dark mode support)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .wooggins-subscription-period,
    .wooggins-period-suffix,
    .wooggins-sign-up-fee {
        color: #aaa;
    }

    .wooggins-recurring-totals th,
    .wooggins-recurring-total-row th,
    .wooggins-recurring-total-row td,
    .wooggins-sign-up-fee-row th,
    .wooggins-sign-up-fee-row td {
        background-color: #2a2a2a;
    }

    .wooggins-first-payment-row th,
    .wooggins-first-payment-row td {
        background-color: #333;
    }

    .wooggins-recurring-totals-title,
    .wooggins-recurring-total-row td strong,
    .wooggins-first-payment-row td strong {
        color: #eee;
    }

    .wooggins-subscription-note {
        background-color: #1e3a4a;
        border-left-color: #4ca6cf;
    }

    .wooggins-subscription-note small {
        color: #ccc;
    }
}