/* ============================================================
   NICE LEARNING PUBLIC PRODUCT PAGES
   Shared borders, radii and interaction patterns. Product color
   variables are intentionally different for Theme, Report, Form,
   and Notification.
============================================================ */

.nl-product-page {
    --nl-product-accent: #1f5f73;
    --nl-product-accent-dark: #174857;
    --nl-product-accent-soft: #eff6ff;
    --nl-product-accent-rgb: 31, 95, 115;
    --nl-product-border: rgba(var(--nl-product-accent-rgb), .18);
    --nl-product-border-strong: rgba(var(--nl-product-accent-rgb), .34);
    --nl-product-radius: 1.25rem;
    --nl-product-shadow: 0 8px 28px rgba(15, 23, 41, .07);
    --nl-product-shadow-hover: 0 14px 36px rgba(15, 23, 41, .11);
}

.nl-product-page--theme {
    --nl-product-accent: #1f5f73;
    --nl-product-accent-dark: #174857;
    --nl-product-accent-soft: #eff6ff;
    --nl-product-accent-rgb: 31, 95, 115;
}

.nl-product-page--report {
    --nl-product-accent: #a94f00;
    --nl-product-accent-dark: #7a3500;
    --nl-product-accent-soft: #fff3e7;
    --nl-product-accent-rgb: 169, 79, 0;
}

.nl-product-page--form {
    --nl-product-accent: #4a6cf7;
    --nl-product-accent-dark: #3538cd;
    --nl-product-accent-soft: #eef2ff;
    --nl-product-accent-rgb: 74, 108, 247;
}

.nl-product-page--notification {
    --nl-product-accent: #9a6a00;
    --nl-product-accent-dark: #735000;
    --nl-product-accent-soft: #fff6d8;
    --nl-product-accent-rgb: 154, 106, 0;
}

/* A single, predictable divider treatment across every product page. */
.nl-product-page > section + section {
    border-top: 1px solid var(--nl-product-border);
}

.nl-product-page :is(
    .nl-report-feature-card,
    .nr-site-feature-card,
    .nl-report-mini-card,
    .nl-report-export-card,
    .nl-report-ticket__card,
    .nl-form-feature-card,
    .nl-ticket__card,
    .nl-notification-feature-card,
    .nl-notification-mini-card,
    .nl-notification-channel-card,
    .nl-notification-delivery-card,
    .nl-notification-ticket__card,
    .nl-container,
    .nl-showcase
) {
    border: 1px solid var(--nl-product-border);
    border-radius: var(--nl-product-radius);
    box-shadow: var(--nl-product-shadow);
}

.nl-product-page :is(
    .nl-report-feature-card,
    .nr-site-feature-card,
    .nl-report-mini-card,
    .nl-report-export-card,
    .nl-form-feature-card,
    .nl-notification-feature-card,
    .nl-notification-mini-card,
    .nl-notification-channel-card,
    .nl-notification-delivery-card
) {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.nl-product-page :is(
    .nl-report-feature-card,
    .nr-site-feature-card,
    .nl-report-mini-card,
    .nl-report-export-card,
    .nl-form-feature-card,
    .nl-notification-feature-card,
    .nl-notification-mini-card,
    .nl-notification-channel-card,
    .nl-notification-delivery-card
):hover {
    border-color: var(--nl-product-border-strong);
    box-shadow: var(--nl-product-shadow-hover);
    transform: translateY(-2px);
}

/* Buttons share shape and motion; scoped page styles retain their colors. */
.nl-product-page .nl-btn {
    min-height: 42px;
    border-radius: .75rem;
    justify-content: center;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
        box-shadow .2s ease, transform .2s ease;
}

.nl-product-page .nl-btn:hover,
.nl-product-page .nl-btn:focus-visible {
    box-shadow: 0 9px 22px rgba(15, 23, 41, .11);
    transform: translateY(-1px);
}

.nl-product-page .nl-btn:focus-visible,
.nl-product-page a:focus-visible,
.nl-product-page button:focus-visible {
    outline: 3px solid rgba(var(--nl-product-accent-rgb), .27);
    outline-offset: 3px;
}

/* Theme uses the shared website button system, so apply its identity here. */
.nl-product-page--theme .nl-btn--primary {
    color: #ffffff;
    background: var(--nl-product-accent);
    border-color: var(--nl-product-accent);
}

.nl-product-page--theme .nl-btn--primary:hover,
.nl-product-page--theme .nl-btn--primary:focus-visible {
    color: #ffffff;
    background: var(--nl-product-accent-dark);
    border-color: var(--nl-product-accent-dark);
}

.nl-product-page--theme .nl-title-container {
    border-color: var(--nl-product-border);
    background: linear-gradient(135deg, var(--nl-product-accent-soft), #ffffff);
}

.nl-product-page--theme .nl-showcase__header {
    border-bottom-color: var(--nl-product-border);
    background: var(--nl-product-accent-soft);
}

.nl-product-page--theme :is(
    .nl-showcase__heading i,
    .nl-showcase__counter span
) {
    color: var(--nl-product-accent);
}

@media (prefers-reduced-motion: reduce) {
    .nl-product-page :is(
        .nl-report-feature-card,
        .nr-site-feature-card,
        .nl-report-mini-card,
        .nl-report-export-card,
        .nl-form-feature-card,
        .nl-notification-feature-card,
        .nl-notification-mini-card,
        .nl-notification-channel-card,
        .nl-notification-delivery-card,
        .nl-btn
    ) {
        transition: none;
    }
}