/* MC Subscriptions - Frontend v1.7.0 */
/* Beauty Bags style: monochrome + colored action buttons only */

/* ─── Status pills (rounded, monochrome + SVG icon) ─── */

.mcs-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #999;
    background: #fff;
    color: #333;
    line-height: 1.4;
    white-space: nowrap;
}

.mcs-pill svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ─── Subscription card ─── */

.mcs-card {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.mcs-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
    gap: 12px;
}

.mcs-card__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcs-card__since {
    font-size: 13px;
    color: #888;
}

.mcs-card__amount {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.mcs-card__period {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

/* ─── Details grid ─── */

.mcs-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-bottom: 1px solid #e5e5e5;
}

.mcs-card__field {
    padding: 14px 20px;
    border-right: 1px solid #f0f0f0;
}

.mcs-card__field:last-child {
    border-right: none;
}

.mcs-card__label {
    display: block;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mcs-card__value {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

/* ─── Actions bar ─── */

.mcs-card__actions {
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    background: #fafafa;
}

.mcs-card__terminal-msg {
    font-size: 13px;
    color: #999;
}

/* ─── Action buttons (ONLY colored elements) ─── */

.mcs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
    text-decoration: none !important;
}

.mcs-btn:hover {
    opacity: 0.85;
}

.mcs-btn--activate {
    background: #16a34a;
    color: #fff;
}

.mcs-btn--pause {
    background: #f59e0b;
    color: #fff;
}

/* Cancelar: enlace de bajo énfasis, estilo "Ya hice el quiz" (no botón) */
.mcs-cancel-link {
    margin-left: auto;
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    transition: color 0.2s ease;
}

.mcs-cancel-link:hover {
    color: #333;
}

.mcs-cancel-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mcs-btn--subscribe {
    background: #1a1a1a;
    color: #fff;
    margin-left: auto;
    text-decoration: none !important;
}

/* Retomar pago de una suscripción pendiente (pago rechazado/abandonado) */
.mcs-btn--pay {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none !important;
}

.mcs-pending-note {
    padding: 12px 20px;
    background: #fff8e6;
    border-bottom: 1px solid #f3e7c0;
    font-size: 13px;
    color: #8a6d1a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcs-pending-note svg {
    flex-shrink: 0;
}

.mcs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mcs-pause-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* ─── Empty state ─── */

.mcs-empty-state {
    text-align: center;
    padding: 48px 20px;
}

.mcs-empty-state svg {
    display: block;
    margin: 0 auto 12px;
}

.mcs-empty-state p {
    font-size: 14px;
    color: #888;
    margin-bottom: 16px;
}

.mcs-empty-state .button {
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.mcs-btn--block {
    margin-left: 0;
}

/* ─── Historial ─── */

.mcs-history {
    margin-top: 28px;
}

.mcs-history__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin: 0 0 12px;
}

.mcs-history__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mcs-history__row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
}

.mcs-history__cell {
    min-width: 0;
}

.mcs-history__label {
    display: block;
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.mcs-history__value {
    display: block;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .mcs-history__row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ─── Product page subscription info ─── */

.mcs-subscription-info {
    margin: 1em 0;
    padding: 12px 16px;
    background: #fafafa;
    border-left: 3px solid #1a1a1a;
    border-radius: 3px;
}

.mcs-subscription-info p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

/* ─── Loading state ─── */

.mcs-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

/* ─── Responsive ─── */

@media (max-width: 600px) {
    .mcs-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mcs-card__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mcs-card__field {
        border-bottom: 1px solid #f0f0f0;
    }

    .mcs-card__actions {
        flex-direction: column;
    }

    .mcs-cancel-link {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }

    .mcs-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ─── Modal custom ─── */

#mcs-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
#mcs-modal-overlay.is-open {
    display: flex;
}
#mcs-modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    position: relative;
}
#mcs-modal-titulo {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}
#mcs-modal-mensaje {
    margin: 0 0 24px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.mcs-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
#mcs-modal-cancel {
    padding: 8px 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
#mcs-modal-cancel:hover {
    border-color: #aaa;
}
#mcs-modal-ok {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
#mcs-modal-ok:hover {
    background: #333;
}

/* ─── Mi Cuenta menu icon (FontAwesome: retweet) ─── */

.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--mi-suscripcion a::before {
    content: '\f079' !important;
}

/* ════════════════════════════════════════════════════════════
   Método de pago MercadoPago en el checkout (Variante C — minimal premium)
   ════════════════════════════════════════════════════════════ */

/* El <li> entero es la tarjeta. WooCommerce separa el título (label) de la
   descripción (.payment_box), así que el isotipo va posicionado absoluto a la
   izquierda y título + descripción se alinean a su derecha (como .pay-min). */
.wc_payment_method.payment_method_mcs_mercadopago {
    position: relative;
    list-style: none;
    border: 2px solid #009ee3;      /* celeste MercadoPago (método seleccionado) */
    border-radius: 12px;
    padding: 16px 18px 16px 76px;   /* 18 izq + 44 icono + 14 gap */
    margin: 0 0 14px;
    background: linear-gradient(180deg, #e6f6fd 0%, #fff 58%);   /* degradé MP */
}
.mcs-mp-icon {
    position: absolute;
    left: 18px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;               /* blanco para destacar sobre el degradé */
    border: 1px solid #d4ecfa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;         /* anula floats que mete el theme */
    margin: 0 !important;
    padding: 0 !important;
}
.mcs-mp-icon img {
    width: 30px;
    height: auto;
    max-height: none;               /* el theme suele topar la altura de íconos de gateway */
    display: block;
    margin: 0 !important;
}
/* Título: ocupa solo su línea, sin el subrayado/estilos de label del theme */
.wc_payment_method.payment_method_mcs_mercadopago > label {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
}

/* Bloque de descripción + línea de seguridad (alineado bajo el título) */
.payment_box.payment_method_mcs_mercadopago {
    background: transparent;
    padding: 0;
    margin: 3px 0 0;
    box-shadow: none;
}
.payment_box.payment_method_mcs_mercadopago::before {
    display: none;                  /* quita la flechita/triángulo por defecto de WC */
}
.mcs-mp-desc {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #555;
}
.mcs-mp-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #7a8a96;
}
.mcs-mp-secure svg {
    flex: 0 0 auto;
    color: #7a8a96;
}

/* ── Sincronización de pagos: aviso "Actualizando pagos…" ── */
.mcs-pay-count {
    display: block;
}
.mcs-paysync {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: #1a1a1a;
}
.mcs-paysync__spin {
    flex: 0 0 auto;
    animation: mcs-spin 0.9s linear infinite;
}
.mcs-paysync__text {
    color: #555;
}
@keyframes mcs-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mcs-paysync__spin { animation: none; }
}