/* WP Push Notify Pro - Public Widget Styles v1.0.0 */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
    --wppn-primary:    #0073aa;
    --wppn-danger:     #e74c3c;
    --wppn-white:      #ffffff;
    --wppn-dark:       #1e1e2e;
    --wppn-shadow:     0 4px 24px rgba(0,0,0,.18);
    --wppn-radius:     14px;
    --wppn-z:          99999;
    --wppn-anim:       .25s cubic-bezier(.4,0,.2,1);
}

/* ── Floating Widget Bell ───────────────────────────────────────────────────── */
#wppn-floating-widget {
    position:    fixed;
    z-index:     var(--wppn-z);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       56px;
    height:      56px;
    border-radius: 50%;
    border:      3px solid transparent;
    background:  var(--wppn-primary);
    box-shadow:  var(--wppn-shadow);
    transition:  transform var(--wppn-anim), box-shadow var(--wppn-anim);
    outline:     none;
    -webkit-tap-highlight-color: transparent;
}
#wppn-floating-widget:hover {
    transform:  scale(1.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
#wppn-floating-widget:active { transform: scale(.96); }

#wppn-floating-widget.wppn-position-bottom-right { bottom: 24px; right: 24px; }
#wppn-floating-widget.wppn-position-bottom-left  { bottom: 24px; left: 24px; }

/* pulse animation */
#wppn-floating-widget::after {
    content:      '';
    position:     absolute;
    inset:        0;
    border-radius: 50%;
    border:       3px solid var(--wppn-primary);
    animation:    wppn-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes wppn-pulse {
    0%   { transform: scale(1); opacity:.7; }
    70%  { transform: scale(1.7); opacity:0; }
    100% { opacity:0; }
}

#wppn-floating-widget svg { width:26px; height:26px; }

/* badge dot */
#wppn-badge-dot {
    position:      absolute;
    top:           6px;
    right:         6px;
    width:         11px;
    height:        11px;
    border-radius: 50%;
    background:    var(--wppn-danger);
    border:        2px solid var(--wppn-white);
    display:       none;
}

/* ── Overlay Backdrop ───────────────────────────────────────────────────────── */
.wppn-overlay-bg {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.48);
    z-index:    calc(var(--wppn-z) + 1);
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--wppn-anim), visibility var(--wppn-anim);
}
.wppn-overlay-bg.wppn-visible {
    opacity:    1;
    visibility: visible;
}

/* ── Soft Prompt Panel ──────────────────────────────────────────────────────── */
#wppn-soft-prompt {
    position:      fixed;
    z-index:       calc(var(--wppn-z) + 2);
    bottom:        90px;
    right:         24px;
    width:         340px;
    max-width:     calc(100vw - 32px);
    background:    var(--wppn-white);
    border-radius: var(--wppn-radius);
    box-shadow:    var(--wppn-shadow);
    padding:       28px 24px 22px;
    transform:     translateY(20px) scale(.97);
    opacity:       0;
    visibility:    hidden;
    transition:    transform var(--wppn-anim), opacity var(--wppn-anim), visibility var(--wppn-anim);
}
#wppn-soft-prompt.wppn-visible {
    transform:  translateY(0) scale(1);
    opacity:    1;
    visibility: visible;
}
#wppn-soft-prompt .wppn-prompt-icon {
    text-align: center;
    font-size:  2.4rem;
    margin-bottom: 10px;
}
#wppn-soft-prompt h3 {
    margin:      0 0 8px;
    font-size:   1.05rem;
    color:       var(--wppn-dark);
    text-align:  center;
}
#wppn-soft-prompt p {
    margin:      0 0 18px;
    font-size:   .88rem;
    color:       #555;
    text-align:  center;
    line-height: 1.5;
}

/* Urgency Countdown */
#wppn-urgency-bar {
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 8px;
    padding:       6px 12px;
    text-align:    center;
    font-size:     .82rem;
    margin-bottom: 14px;
    color:         #856404;
}
#wppn-countdown {
    font-weight: 700;
    font-size:   1rem;
    color:       #c0392b;
}

/* CTA Buttons */
.wppn-prompt-actions {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
}
.wppn-btn-allow {
    flex:          1;
    background:    var(--wppn-primary);
    color:         var(--wppn-white);
    border:        none;
    border-radius: 8px;
    padding:       10px 16px;
    font-size:     .9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--wppn-anim);
}
.wppn-btn-allow:hover { background: #005f8b; }
.wppn-btn-deny {
    background:    transparent;
    border:        1px solid #ccc;
    border-radius: 8px;
    padding:       10px 14px;
    font-size:     .85rem;
    color:         #777;
    cursor:        pointer;
    transition:    border-color var(--wppn-anim);
}
.wppn-btn-deny:hover { border-color: #999; color: #444; }

/* Close X */
#wppn-prompt-close {
    position:   absolute;
    top:        10px;
    right:      12px;
    background: none;
    border:     none;
    font-size:  1.2rem;
    cursor:     pointer;
    color:      #aaa;
    line-height: 1;
    padding:    2px 6px;
}
#wppn-prompt-close:hover { color: #333; }

/* Category Checkboxes */
.wppn-categories {
    margin-bottom: 14px;
    text-align:    left;
}
.wppn-categories label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   .85rem;
    color:       #444;
    margin:      5px 0;
    cursor:      pointer;
}

/* ── Spin-to-Win Wheel ──────────────────────────────────────────────────────── */
#wppn-spin-container {
    text-align: center;
    margin:     10px 0;
}
#wppn-spin-canvas {
    border-radius: 50%;
    box-shadow:    0 4px 16px rgba(0,0,0,.2);
    max-width:     220px;
    width:         100%;
}
#wppn-spin-btn {
    margin-top:    14px;
    background:    #2ecc71;
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px 28px;
    font-size:     .95rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background .2s;
}
#wppn-spin-btn:hover    { background: #27ae60; }
#wppn-spin-btn:disabled { background: #95a5a6; cursor: not-allowed; }
#wppn-spin-result {
    display:    none;
    margin-top: 12px;
    font-size:  1rem;
    font-weight: 600;
    color:      #27ae60;
}

/* ── Inbox Dropdown ─────────────────────────────────────────────────────────── */
#wppn-inbox-dropdown {
    position:      fixed;
    z-index:       calc(var(--wppn-z) + 2);
    bottom:        90px;
    right:         24px;
    width:         360px;
    max-width:     calc(100vw - 32px);
    max-height:    480px;
    overflow-y:    auto;
    background:    var(--wppn-white);
    border-radius: var(--wppn-radius);
    box-shadow:    var(--wppn-shadow);
    transform:     translateY(16px);
    opacity:       0;
    visibility:    hidden;
    transition:    transform var(--wppn-anim), opacity var(--wppn-anim), visibility var(--wppn-anim);
    scrollbar-width: thin;
}
#wppn-inbox-dropdown.wppn-visible {
    transform:  translateY(0);
    opacity:    1;
    visibility: visible;
}
.wppn-inbox-header {
    padding:       16px 20px 12px;
    border-bottom: 1px solid #eee;
    font-weight:   700;
    font-size:     .95rem;
    color:         var(--wppn-dark);
    display:       flex;
    align-items:   center;
    gap:           8px;
}
#wppn-inbox-list {
    list-style: none;
    margin:     0;
    padding:    0;
}
.wppn-inbox-item { border-bottom: 1px solid #f5f5f5; }
.wppn-inbox-item:last-child { border-bottom: none; }
.wppn-inbox-link {
    display:         flex;
    gap:             12px;
    padding:         14px 18px;
    text-decoration: none;
    color:           inherit;
    transition:      background var(--wppn-anim);
}
.wppn-inbox-link:hover { background: #f9f9f9; }
.wppn-inbox-img {
    width:         52px;
    height:        52px;
    object-fit:    cover;
    border-radius: 8px;
    flex-shrink:   0;
}
.wppn-inbox-content strong {
    display:     block;
    font-size:   .88rem;
    color:       var(--wppn-dark);
    margin-bottom: 3px;
}
.wppn-inbox-content p {
    margin:    0 0 4px;
    font-size: .8rem;
    color:     #666;
}
.wppn-inbox-content time {
    font-size: .75rem;
    color:     #aaa;
}
.wppn-inbox-empty {
    padding:    28px 18px;
    text-align: center;
    color:      #aaa;
    font-size:  .88rem;
}

/* Preference Center inside inbox */
.wppn-pref-toggle {
    padding:    12px 18px;
    border-top: 1px solid #eee;
    font-size:  .82rem;
    color:      #888;
}
.wppn-pref-toggle a { color: var(--wppn-primary); text-decoration: none; }

/* ── Success Toast ──────────────────────────────────────────────────────────── */
.wppn-toast {
    position:      fixed;
    bottom:        90px;
    left:          50%;
    transform:     translateX(-50%) translateY(20px);
    z-index:       calc(var(--wppn-z) + 10);
    background:    #2ecc71;
    color:         #fff;
    padding:       12px 24px;
    border-radius: 30px;
    font-size:     .9rem;
    font-weight:   600;
    box-shadow:    var(--wppn-shadow);
    opacity:       0;
    transition:    opacity .3s, transform .3s;
    pointer-events: none;
    white-space:   nowrap;
}
.wppn-toast.wppn-toast-show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ── Shortcode Bell ─────────────────────────────────────────────────────────── */
.wppn-shortcode-bell {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    border:        none;
    border-radius: 8px;
    padding:       10px 18px;
    font-size:     .92rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    filter var(--wppn-anim), transform var(--wppn-anim);
    vertical-align: middle;
}
.wppn-shortcode-bell:hover  { filter: brightness(1.1); transform: scale(1.03); }
.wppn-shortcode-bell svg    { width: 18px; height: 18px; }

/* ── Menu Bell ──────────────────────────────────────────────────────────────── */
.wppn-menu-bell-item a,
.wppn-menu-bell-item button { vertical-align: middle; }

/* ── Powered By Footer ──────────────────────────────────────────────────────── */
.wppn-powered-by {
    text-align:  center;
    font-size:   .7rem;
    color:       #bbb;
    padding:     6px 0 2px;
}
.wppn-powered-by a { color: #aaa; text-decoration: none; }
.wppn-powered-by a:hover { color: #777; }

/* White-label: hide attribution */
body.wppn-white-label .wppn-powered-by { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #wppn-soft-prompt,
    #wppn-inbox-dropdown {
        bottom:    0;
        right:     0;
        left:      0;
        width:     100%;
        max-width: 100%;
        border-radius: var(--wppn-radius) var(--wppn-radius) 0 0;
    }
    #wppn-floating-widget {
        bottom: 16px;
        right:  16px;
    }
}