/*
 * Reader push opt-in soft prompt.
 * Bottom-right card on desktop, bottom-sheet on mobile (≤600px).
 * Stays hidden until JS removes [hidden] after trigger thresholds elapse.
 */

.push-optin-soft {
    /* Top-center card. Sits below the sticky header (offset configurable via
       --push-optin-top-offset CSS variable so themes with taller headers can
       override). Centered on desktop, slim full-width strip on mobile. */
    position: fixed;
    top: var(--push-optin-top-offset, 88px);
    left: 50%;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: min(460px, calc(100vw - 32px));
    padding: 18px 18px 18px 16px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.32), 0 6px 16px -6px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-family: inherit;
    transform: translate(-50%, -12px);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
}

.push-optin-soft:not([hidden]) {
    transform: translate(-50%, 0);
    opacity: 1;
}

.push-optin-soft__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #4f46e5;
}

.push-optin-soft__body {
    flex: 1;
    min-width: 0;
}

.push-optin-soft__title {
    margin: 0 0 6px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;
}

.push-optin-soft__copy {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #4b5563;
}

.push-optin-soft__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.push-optin-soft__cta {
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.2;
    transition: background-color 150ms ease, transform 80ms ease;
}

.push-optin-soft__cta:active {
    transform: translateY(1px);
}

.push-optin-soft__cta--primary {
    background: #1f2937;
    color: #ffffff;
}

.push-optin-soft__cta--primary:hover,
.push-optin-soft__cta--primary:focus-visible {
    background: #111827;
    outline: none;
}

.push-optin-soft__cta--secondary {
    background: #f3f4f6;
    color: #374151;
}

.push-optin-soft__cta--secondary:hover,
.push-optin-soft__cta--secondary:focus-visible {
    background: #e5e7eb;
    outline: none;
}

.push-optin-soft__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.push-optin-soft__close:hover,
.push-optin-soft__close:focus-visible {
    color: #4b5563;
    background: #f3f4f6;
    outline: none;
}

/* Success toast variant — shown after subscribe success, auto-dismisses */
.push-optin-soft.is-success .push-optin-soft__icon {
    background: #ecfdf5;
    color: #059669;
}

.push-optin-soft.is-success .push-optin-soft__actions,
.push-optin-soft.is-success .push-optin-soft__close {
    display: none;
}

@media (max-width: 600px) {
    .push-optin-soft {
        /* On mobile drop closer to header and stretch nearly full-width.
           Stay at top so the prompt isn't competing with thumb-zone CTAs. */
        top: var(--push-optin-top-offset-mobile, 72px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        padding: 14px 16px 14px 14px;
        transform: translate(0, -12px);
    }

    .push-optin-soft:not([hidden]) {
        transform: translate(0, 0);
    }

    .push-optin-soft__title {
        font-size: 0.95rem;
    }

    .push-optin-soft__copy {
        font-size: 0.82rem;
    }

    .push-optin-soft__cta {
        flex: 1;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .push-optin-soft {
        transition: none;
    }
}

/* Honour reader dark themes if the site uses prefers-color-scheme or a
   data-theme attribute — sub-newsroom designs vary, keep selectors tight. */
@media (prefers-color-scheme: dark) {
    .push-optin-soft {
        background: #1f2937;
        color: #f9fafb;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .push-optin-soft__title {
        color: #f9fafb;
    }

    .push-optin-soft__copy {
        color: #d1d5db;
    }

    .push-optin-soft__icon {
        background: #312e81;
        color: #c7d2fe;
    }

    .push-optin-soft__cta--primary {
        background: #4f46e5;
    }

    .push-optin-soft__cta--primary:hover {
        background: #4338ca;
    }

    .push-optin-soft__cta--secondary {
        background: #374151;
        color: #e5e7eb;
    }

    .push-optin-soft__cta--secondary:hover {
        background: #4b5563;
    }

    .push-optin-soft__close {
        color: #9ca3af;
    }

    .push-optin-soft__close:hover {
        color: #f9fafb;
        background: #374151;
    }
}