@charset "UTF-8";

/*
 * QuestDL Neon Gaming — Stage 1 notification UI token bridge.
 *
 * This is a theme-owned presentation adapter. It does not edit the notification
 * plugin, does not restyle WordPress admin, and intentionally preserves the
 * plugin's readable light surfaces while aligning its semantic tokens with QNG.
 * All variables are scoped to the official notification roots; no :root token is
 * replaced, so unrelated site components keep their existing palette.
 */
.qdl-notification-shell.qdl-notification-header,
.qdl-center,
.qdl-preferences,
.qdl-toast-container {
    --qdl-color-brand-primary: var(--qng-purple-deep, #6f48ce);
    --qdl-color-brand-primary-strong: #5732b2;
    --qdl-color-brand-quest: var(--qng-purple-deep, #6f48ce);
    --qdl-color-brand-cyan: #087b95;
    --qdl-color-accent-pink: #b42369;
    --qdl-color-accent-yellow: #875d09;

    --qdl-color-text-primary: #202941;
    --qdl-color-text-secondary: #56627a;
    --qdl-color-text-tertiary: #66738b;
    --qdl-color-text-subtle: #66738b;
    --qdl-color-text-on-brand: #ffffff;
    --qdl-color-text-success: #23725e;
    --qdl-color-text-info: #216d80;
    --qdl-color-text-warning: #805d16;
    --qdl-color-text-danger: #a33e5d;

    --qdl-color-surface: #ffffff;
    --qdl-color-surface-soft: #f7f8fd;
    --qdl-color-surface-muted: #eef1f8;
    --qdl-color-border: rgba(111, 72, 206, .16);
    --qdl-color-border-strong: rgba(111, 72, 206, .29);
    --qdl-color-focus: var(--qng-purple-deep, #6f48ce);
    --qdl-color-focus-ring: rgba(111, 72, 206, .34);

    /* Interactive state matrix: keep selected/focus/loading states on QNG's palette. */
    --qdl-interactive-text: var(--qdl-color-text-secondary);
    --qdl-interactive-text-strong: var(--qdl-color-brand-primary-strong);
    --qdl-interactive-danger: var(--qdl-color-text-danger);
    --qdl-interactive-surface: var(--qdl-color-surface);
    --qdl-interactive-surface-soft: var(--qdl-color-surface-soft);
    --qdl-interactive-primary-start: var(--qdl-color-brand-primary);
    --qdl-interactive-primary-mid: var(--qdl-color-brand-primary-strong);
    --qdl-interactive-primary-end: #452a94;
    --qdl-interactive-active-surface: rgba(111, 72, 206, .10);
    --qdl-interactive-selected-start: var(--qdl-color-brand-primary);
    --qdl-interactive-selected-mid: var(--qdl-color-brand-primary-strong);
    --qdl-interactive-selected-end: #452a94;
    --qdl-interactive-focus-solid: var(--qdl-color-focus);
    --qdl-interactive-loading-track: rgba(111, 72, 206, .22);
    --qdl-interactive-loading-indicator: var(--qdl-color-brand-primary-strong);

    /* Settings panel variables are local to its root in the plugin stylesheet. */
    --qdl-settings-surface: rgba(255, 255, 255, .97);
    --qdl-settings-soft: var(--qdl-color-surface-soft);
    --qdl-settings-border: rgba(111, 72, 206, .14);

    /* Backward-compatible aliases still used by existing plugin CSS layers. */
    --qdl-purple: var(--qdl-color-brand-primary-strong);
    --qdl-cyan: var(--qdl-color-brand-cyan);
    --qdl-pink: var(--qdl-color-accent-pink);
    --qdl-yellow: var(--qdl-color-accent-yellow);
    --qdl-ink: var(--qdl-color-text-primary);
    --qdl-muted: var(--qdl-color-text-secondary);
    --qdl-text-primary: var(--qdl-color-text-primary);
    --qdl-text-secondary: var(--qdl-color-text-secondary);
    --qdl-text-tertiary: var(--qdl-color-text-tertiary);
    --qdl-text-subtle: var(--qdl-color-text-subtle);
    --qdl-text-accent: var(--qdl-color-brand-primary-strong);
    --qdl-text-positive: var(--qdl-color-text-success);
    --qdl-text-danger: var(--qdl-color-text-danger);
    --qdl-focus-solid: var(--qdl-color-focus);
    --qdl-focus-ring: var(--qdl-color-focus-ring);

    /* Shared surface tokens used by Popover, Toast, Center and Preferences. */
    --qdl-surface: rgba(255, 255, 255, .97);
    --qdl-surface-solid: rgba(255, 255, 255, .985);
    --qdl-surface-soft: #f7f8fd;
    --qdl-surface-muted: #eef1f8;
    --qdl-surface-line: rgba(111, 72, 206, .14);
    --qdl-surface-base: #ffffff;
    --qdl-surface-border: rgba(111, 72, 206, .16);
    --qdl-surface-shadow: 0 18px 46px rgba(8, 11, 21, .16);
    --qdl-border: rgba(111, 72, 206, .16);
    --qdl-shadow: 0 18px 46px rgba(8, 11, 21, .16);

    /* Keep interface copy readable while inheriting the theme's Latin/Persian stack. */
    --qdl-font-popover-title: 16px;
    --qdl-font-summary: 12px;
    --qdl-font-card-title: 14px;
    --qdl-font-card-body: 13px;
    --qdl-font-meta: 11px;
    --qdl-font-chip: 11px;
    --qdl-font-action: 12px;
    --qdl-font-primary-action: 13px;
    --qdl-font-center-title: clamp(22px, 2.4vw, 28px);
    --qdl-font-detail-title: 20px;

    color: var(--qdl-color-text-primary);
    font-family: var(--qng-font, "Oxanium", "Vazirmatn", "Noto Sans Arabic", Tahoma, Arial, sans-serif);
}

/* Main overlay surfaces use the theme's restrained elevation and border language. */
.qdl-notification-header .qdl-notification-popover {
    --qdl-surface-shadow: 0 18px 44px rgba(8, 11, 21, .16);
    border-color: var(--qdl-color-border);
    border-radius: var(--qng-radius-lg, 22px);
    box-shadow: var(--qdl-surface-shadow);
}

.qdl-toast {
    --qdl-surface-shadow: 0 18px 44px rgba(8, 11, 21, .16);
    --qdl-toast-surface-top: rgba(255, 255, 255, .985);
    --qdl-toast-surface-bottom: #f8f6ff;
    border-color: var(--qdl-color-border);
    border-radius: var(--qng-radius, 16px);
    box-shadow: var(--qdl-surface-shadow);
}

/* Explicit focus tokens stay inside notification UI and respect each control's behavior. */
.qdl-notification-shell.qdl-notification-header :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.qdl-center :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.qdl-preferences :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.qdl-toast-container :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--qdl-color-focus, #6f48ce);
}



/* Stage 2 — notification header and popover interaction polish.
 * Kept in the theme adapter so plugin source and notification behavior remain owned by the plugin.
 */
.qng-header-notification-slot .qdl-notification-header .qdl-notification-popover {
    width: min(424px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border-radius: 20px;
    border-color: rgba(111,72,206,.23);
    box-shadow: 0 24px 68px rgba(8,11,21,.22), 0 0 0 1px rgba(155,114,255,.06), 0 1px 0 rgba(255,255,255,.96) inset;
    scrollbar-gutter: stable;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-head {
    padding: 14px 15px 12px;
    gap: 10px;
    background: linear-gradient(112deg, rgba(243,238,255,.88) 0%, rgba(255,255,255,.97) 48%, rgba(231,251,255,.88) 100%);
    border-bottom: 1px solid rgba(111,72,206,.13);
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-head-main {
    gap: 8px !important;
    align-items: center !important;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-title-copy > strong {
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-sync {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.3;
    box-shadow: 0 2px 7px rgba(39,199,244,.08), 0 1px 0 rgba(255,255,255,.92) inset;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-head-actions {
    align-items: center !important;
    gap: 6px !important;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-read-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 10px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}
.qng-header-notification-slot .qdl-notification-header .qdl-read-all-icon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 6px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-read-all-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-close .qdl-ui-icon svg {
    width: 17px;
    height: 17px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list {
    padding: 9px;
    max-height: min(64vh, 470px);
    scrollbar-width: thin;
    scrollbar-color: rgba(111,72,206,.36) rgba(243,238,255,.75);
    overscroll-behavior: contain;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-item {
    gap: 10px;
    padding: 12px 11px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(8,11,21,.045), 0 1px 0 rgba(255,255,255,.88) inset;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong {
    font-size: 13px;
    line-height: 1.55;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-content p {
    margin-top: 5px;
    margin-bottom: 8px;
    font-size: 12px !important;
    line-height: 1.75;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-meta,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-time,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-source,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-unread-pill {
    font-size: 12px;
    line-height: 1.45;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-source {
    padding: 3px 7px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-action,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-expand,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-more,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-delete {
    min-height: 34px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-delete {
    width: 34px;
    min-width: 34px;
    height: 34px;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-item:focus-visible,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-action:focus-visible,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-expand:focus-visible,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-more:focus-visible,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-delete:focus-visible {
    outline: 2px solid #6F48CE;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(57,199,244,.16);
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-footer {
    gap: 8px;
    padding: 11px 13px;
    border-top-color: rgba(111,72,206,.14);
    background: linear-gradient(112deg, rgba(243,238,255,.9), rgba(255,255,255,.96) 50%, rgba(231,251,255,.9));
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-footer a {
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary,
.qng-header-notification-slot .qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary {
    box-shadow: 0 4px 12px rgba(111,72,206,.15), 0 1px 0 rgba(255,255,255,.16) inset;
}
.qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-empty {
    padding: 24px 14px;
    font-size: 12px;
    line-height: 1.8;
}

@media (max-width: 680px) {
    .qng-header-notification-slot .qdl-notification-header .qdl-notification-popover {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: min(82vh, 720px);
        border-radius: 20px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-head {
        padding: 12px 12px 10px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-head-main {
        gap: 5px !important;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-head-actions {
        gap: 4px !important;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-read-all {
        min-height: 40px;
        padding-inline: 8px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-close {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-list {
        padding: 7px;
        max-height: 56vh;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-item {
        padding: 11px 9px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-footer {
        gap: 6px;
        padding-inline: 9px;
    }
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-footer a {
        min-height: 42px;
        padding-inline: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qng-header-notification-slot .qdl-notification-header .qdl-notification-popover,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-item,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-footer a,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-read-all,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-close { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    .qng-header-notification-slot .qdl-notification-header .qdl-notification-popover,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-head,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-footer,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-list .qdl-notification-item,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-read-all,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-close,
    .qng-header-notification-slot .qdl-notification-header .qdl-popover-footer a {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: ButtonText !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}