/* =========================================================
   Popup Notification renderer styles (shared)
   Used by the public popup engine (Views/Shared/_PopupNotification.cshtml)
   and the admin Live Preview (Views/ManageServices/AddPopupNotification.cshtml).
   ========================================================= */

     /* ── Design tokens ── */
     :root {
         --pn-primary: #192455;
         --pn-primary-h: #2a3870;
         --pn-cta: #5773DD;
         --pn-cta-h: #4560c8;
         --pn-accent: #5773DD;
         --pn-radius: 18px;
         --pn-shadow: 0 32px 80px rgba(0,0,0,.22), 0 4px 18px rgba(0,0,0,.10);
         --pn-font: 'Poppins', 'Segoe UI', sans-serif;
         --pn-title-size: 19px;
         --pn-body-size: 14px;
         --pn-sec-h-size: 13px;
         --pn-sec-b-size: 13px;
         --pn-pad: 26px;
     }

     /* ── Overlay ── */
     .pn-overlay {
         position: fixed;
         inset: 0;
         background: rgba(8,12,35,.55);
         backdrop-filter: blur(4px);
         -webkit-backdrop-filter: blur(4px);
         z-index: 9998;
         opacity: 0;
         transition: opacity .3s ease;
         pointer-events: none;
     }

         .pn-overlay.pn-show {
             opacity: 1;
             pointer-events: auto;
         }

     /* ── Modal shell ── */
    .pn-modal {
        /*         position: fixed;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%) scale(.96);
         z-index: 9999;
         width: min(580px, calc(100vw - 24px));
         background: #ffffff;
         border-radius: var(--pn-radius);
         box-shadow: var(--pn-shadow);
         opacity: 0;
         transition: opacity .38s ease, transform .38s cubic-bezier(.22,.68,0,1.18);
         pointer-events: none;
         overflow: hidden;
         font-family: var(--pn-font);*/
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(.96);
        z-index: 9999;
        width: min(580px, calc(100vw - 24px));
        max-height: 88vh;
        background: #ffffff;
        border-radius: var(--pn-radius);
        box-shadow: var(--pn-shadow);
        opacity: 0;
        transition: opacity .38s ease, transform .38s cubic-bezier(.22,.68,0,1.18);
        pointer-events: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-family: var(--pn-font);
    }

         .pn-modal.pn-show {
             opacity: 1;
             transform: translate(-50%, -50%) scale(1);
             pointer-events: auto;
         }

     /* ── Close button ── */
     .pn-close {
         position: absolute;
         top: 14px;
         right: 14px;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background: rgba(0,0,0,.07);
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 13px;
         color: #666;
         transition: background .15s, color .15s;
         z-index: 2;
         line-height: 1;
     }

         .pn-close:hover {
             background: rgba(0,0,0,.14);
             color: #111;
         }

     /* ── Badge ── */
     .pn-badge {
         display: inline-block;
         font-size: 12px;
         font-weight: 700;
         letter-spacing: .09em;
         padding: 4px 11px;
         border-radius: 20px;
         margin-bottom: 12px;
         width: fit-content;
         text-transform: uppercase;
     }

    .pn-badge-blue {
        background: #dde2fa;
/*        background: #eceffe;*/
        color: #3d56c0;
    }

    .pn-badge-green {
        background: #deefdf;
/*        background: #e8f5e9;*/
        color: #2e7d32;
    }

    .pn-badge-orange {
        background: #ffe9c6;
/*        background: #fff3e0;*/
        color: #e65100;
    }

     .pn-badge-red {
         background: #fce4ec;
         color: #c62828;
     }

     .pn-badge-purple {
         background: #f3e5f5;
         color: #6a1b9a;
     }

     /* ── Body area ── */
     .pn-body {
         padding: var(--pn-pad);
         padding-top: 22px;
     }

     /* ── Title ── */
     .pn-title {
         font-size: var(--pn-title-size);
         font-weight: 700;
         color: var(--pn-primary);
         margin: 0 0 9px;
         line-height: 1.3;
         padding-right: 28px;
     }

     /* ── Intro text ── */
     .pn-intro {
         font-size: var(--pn-body-size);
         color: #4a5068;
         line-height: 1.7;
         margin: 0 0 18px;
     }

     /* ── Feature / section rows ── */
     .pn-features {
         display: flex;
         flex-direction: column;
         gap: 13px;
         margin-bottom: 20px;
     }

     .pn-feature {
         display: flex;
         align-items: flex-start;
         gap: 13px;
     }

     .pn-feature-icon {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: #e6ebff;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         color: var(--pn-accent);
         font-size: 18px;
         transition: background .15s;
     }

         .pn-feature-icon.pn-icon-hidden {
             display: none;
         }

     .pn-feature-text {
         flex: 1;
     }

     .pn-feature-heading {
         font-size: var(--pn-sec-h-size);
         font-weight: 700;
         color: var(--pn-primary);
         margin: 0 0 2px;
         line-height: 1.3;
     }

     .pn-feature-body {
         font-size: var(--pn-sec-b-size);
         color: #5a6080;
         margin: 0;
         line-height: 1.55;
     }

     .pn-feature.pn-no-icon .pn-feature-text {
         padding-left: 0;
     }

     /* ── 3-column feature grid (template 2 hero style) ── */
     .pn-features-cols {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0;
         margin-bottom: 22px;
         border-top: 1px solid #eaedf5;
         padding-top: 18px;
     }

     .pn-feature-col {
         display: flex;
         align-items: flex-start;
         gap: 11px;
         padding: 0 18px 0 0;
         border-right: 1px solid #eaedf5;
     }

         .pn-feature-col:first-child {
             padding-left: 0;
         }

         .pn-feature-col:last-child {
             border-right: none;
             padding-right: 0;
             padding-left: 18px;
         }

         .pn-feature-col:not(:first-child):not(:last-child) {
             padding-left: 18px;
         }

         .pn-feature-col .pn-feature-icon {
             width: 34px;
             height: 34px;
             font-size: 17px;
             flex-shrink: 0;
         }

     /* ── Divider ── */
     .pn-divider {
         height: 1px;
         background: #f0f2f8;
         margin: 0 0 18px;
         border: none;
     }

     /* ── CTA button row ── */
     .pn-cta-wrap {
         margin-top: 6px;
         display: flex;
         align-items: center;
         gap: 16px;
     }

         .pn-cta-wrap.pn-cta-center {
             justify-content: center;
             gap: 24px;
         }

             .pn-cta-wrap.pn-cta-center .pn-maybe {
                 font-size: 13px;
             }

     .pn-cta {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         background: var(--pn-cta);
         color: #fff;
         padding: 12px 32px;
         border-radius: 10px;
         font-size: 14px;
         font-weight: 600;
         text-decoration: none;
         letter-spacing: .01em;
         white-space: nowrap;
         transition: background .15s, transform .12s, box-shadow .15s;
         box-shadow: 0 4px 16px rgba(87,115,221,.28);
         min-width: 220px;
         justify-content: center;
     }

         .pn-cta:hover {
             background: var(--pn-cta-h);
             color: #fff;
             text-decoration: none;
             transform: translateY(-1px);
             box-shadow: 0 6px 20px rgba(87,115,221,.38);
         }

     .pn-tpl1-cta,
     .pn-tpl2-cta {
         flex-direction: row !important;
         align-items: center;
     }

     .pn-tpl3-cta {
         flex-direction: column !important;
         align-items: center;
         gap: 12px !important;
     }

     .pn-maybe {
         font-size: 13px;
         color: #9aa2bf;
         cursor: pointer;
         background: none;
         border: none;
         padding: 0;
         white-space: nowrap;
         transition: color .15s;
     }

         .pn-maybe:hover {
             color: #555;
         }

     /* ════════════════════════════════════════
    TEMPLATE 2: Image top + feature rows
    ════════════════════════════════════════ */
    .pn-hero-img {
        width: 100%;
        /*         height: 260px;*/
        height: auto;
        object-fit: cover;
        object-position: center top;
        display: block;
        max-width: 100%;
        background: #f0f3ff;
    }

     /* ════════════════════════════════════════
    TEMPLATE 3: Offer card — image left
    ════════════════════════════════════════ */
     .pn-tpl3 {
         display: flex;
         min-height: 300px;
     }

    .pn-tpl3-img {
        width: 44%;
        object-fit: contain !important;
        object-position: center;
        display: block;
        flex-shrink: 0;
        border-radius: 0;
        background: #f0f3ff;
    }

     .pn-tpl3-right {
         flex: 1;
         padding: var(--pn-pad);
         display: flex;
         flex-direction: column;
         justify-content: center;
         overflow-y: auto;
     }

     /* ── Queue progress dots (hidden by default) ── */
     .pn-dots {
         display: none !important;
     }

     /* ── Reopen button ── */
/*     .pn-reopen {
         position: fixed;
         bottom: 22px;
         left: 22px;
         width: 52px;
         height: 52px;
         border-radius: 50%;
         background: var(--pn-primary);
         color: #fff;
         border: none;
         cursor: pointer;
         display: none;
         align-items: center;
         justify-content: center;
         font-size: 20px;
         z-index: 9997;
         box-shadow: 0 4px 20px rgba(25,36,85,.4);
         opacity: 1;
         transform: scale(1);
         transition: opacity .3s ease, transform .3s cubic-bezier(.22,.68,0,1.3);
         pointer-events: auto;
     }*/
    .pn-reopen {
        position: fixed;
        bottom: 22px;
        left: 22px;
        height: 52px;
        min-width: 52px;
        width: auto;
        padding: 0 16px;
        border-radius: 999px;
        background: var(--pn-cta);
        color: #fff;
        border: none;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 20px;
        white-space: nowrap;
        z-index: 9997;
        box-shadow: 0 4px 20px rgba(25,36,85,.4);
        opacity: 1;
        transform: scale(1);
        transition: opacity .3s ease, transform .3s cubic-bezier(.22,.68,0,1.3);
        pointer-events: auto;
    }
        .pn-reopen i {
            font-size: 20px;
            flex-shrink: 0;
        }

        .pn-reopen span {
            font-size: 13px;
            font-weight: 600;
            line-height: 1;
        }
        .pn-reopen.pn-icon-only {
            width: 52px;
            min-width: 52px;
            padding: 0;
        }

        .pn-reopen::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: inherit;
            border: 2px solid rgba(25,36,85,.20);
            animation: pn-ring 2.4s ease-in-out infinite;
        }
        .pn-reopen:not(.pn-icon-only)::after {
            display: none;
        }

     @keyframes pn-ring {
         0% {
             transform: scale(1);
             opacity: 0.8;
         }

         100% {
             transform: scale(1.15);
             opacity: 0;
         }
     }

@media (min-width: 461px) and (max-width: 768px) {
    .pn-modal { width: min(560px, calc(100vw - 32px)); }
    .pn-hero-img { height: auto; }
    .pn-features-cols { grid-template-columns: 1fr 1fr; }
    .pn-feature-col:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid #eaedf5;
        padding-top: 12px;
        margin-top: 4px;
        border-right: none;
        padding-left: 0;
    }

    /* Template 3: stack instead of squeeze — same reasoning as the
       460px rule below, just applied one breakpoint earlier since
       content-heavy offer cards break the side-by-side layout well
       before phone width. */
    .pn-tpl3 {
        flex-direction: column;
        min-height: unset;
    }
    .pn-tpl3-img {
        width: 100%;
        height: auto;
        max-height: 320px;
        object-fit: contain;
        background: #f0f3ff;
    }
    .pn-tpl3-right {
        width: 100%;
        overflow-y: visible;
    }
}

     /* ── Responsive ── */
     @media (max-width: 460px) {
         .pn-modal {
             top: auto !important;
             left: 0 !important;
             right: 0 !important;
             bottom: 0 !important;
             transform: translateY(40px) !important;
             width: 100% !important;
             max-height: 92dvh;
             border-radius: var(--pn-radius) var(--pn-radius) 0 0 !important;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
         }

             .pn-modal.pn-show {
                 transform: translateY(0) !important;
                 opacity: 1 !important;
             }

         :root {
             --pn-title-size: 17px;
             --pn-pad: 18px;
         }

        .pn-hero-img {
            /*             height: 200px !important;
             padding: 0 !important;
             object-fit: cover !important;
             object-position: center top !important;*/
            height: auto !important;
        }

         .pn-tpl3 {
             flex-direction: column !important;
             min-height: unset !important;
         }

        .pn-tpl3-img {
            /*             width: 100% !important;
             height: auto !important;
             max-height: 350px;
             object-fit: contain !important;
             object-position: center center !important;
             background: #fff;
             padding: 0 !important;*/
            display: none !important;
        }

         .pn-tpl3-right {
             overflow-y: visible;
             width: 100%;
         }

         .pn-features-cols {
             grid-template-columns: 1fr;
             border-top: none;
             padding-top: 0;
         }

         .pn-feature-col {
             border-right: none;
             border-bottom: 1px solid #eaedf5;
             padding: 0 0 12px 0 !important;
             margin-bottom: 4px;
         }

             .pn-feature-col:last-child {
                 border-bottom: none;
             }

         .pn-cta-wrap {
             align-items: center;
             gap: 16px;
             margin-top: 10px;
         }

             .pn-cta-wrap.pn-cta-center {
                 justify-content: center;
             }

         .pn-cta {
             padding: 12px 24px;
             font-size: 14px;
             flex-shrink: 0;
             white-space: nowrap;
         }

         .pn-maybe {
             font-size: 13px !important;
             flex-shrink: 0 !important;
             white-space: nowrap !important;
         }

         .pn-tpl1-cta,
         .pn-tpl2-cta,
         .pn-tpl3-cta {
             flex-direction: column !important;
             align-items: center !important;
             gap: 12px !important;
         }
     }