/* ================================================================
   Newsletter Pro EVALAM — Display Rules Engine CSS
   v1.2.0
   ================================================================ */

/* ---- Overlay (popup_center backdrop) ---- */
.npe-dr-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}
.npe-dr-overlay.npe-dr-overlay-active {
    background: rgba(0, 0, 0, 0.55);
}

/* ---- Body scroll lock (popup only) ---- */
.npe-body-locked {
    overflow: hidden;
}

/* ================================================================
   Shared widget base
   ================================================================ */
.npe-dr {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.npe-dr *,
.npe-dr *::before,
.npe-dr *::after {
    box-sizing: inherit;
}

/* ---- Close button ---- */
.npe-dr-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.npe-dr-close:hover {
    color: #111827;
    background: #f3f4f6;
}

/* ---- Title & description ---- */
.npe-dr-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
    padding-right: 32px; /* room for close btn */
    line-height: 1.3;
}
.npe-dr-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.65;
}

/* Strip the npe-card wrapper shadow/padding when inside a display rule */
.npe-dr .npe-wrap {
    margin: 0;
}
.npe-dr .npe-card {
    box-shadow: none;
    border: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* ================================================================
   popup_center
   ================================================================ */
.npe-dr-popup_center {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99991;
    width: 92%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Start state: slightly below center + invisible */
    transform: translate(-50%, -44%) scale(0.94);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   0.25s ease;
}
.npe-dr-popup_center.npe-dr-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ================================================================
   slide_left
   ================================================================ */
.npe-dr-slide_left {
    position: fixed;
    top: 50%;
    left: -400px;
    z-index: 99991;
    width: 360px;
    max-width: calc(100vw - 16px);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 0 16px 16px 0;
    padding: 28px 24px 24px;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.15);

    transform: translateY(-50%);
    opacity: 0;
    transition: left 0.35s ease, opacity 0.25s ease;
}
.npe-dr-slide_left.npe-dr-active {
    left: 0;
    opacity: 1;
}

/* ================================================================
   slide_right
   ================================================================ */
.npe-dr-slide_right {
    position: fixed;
    top: 50%;
    right: -400px;
    z-index: 99991;
    width: 360px;
    max-width: calc(100vw - 16px);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px 0 0 16px;
    padding: 28px 24px 24px;
    box-shadow: -6px 0 40px rgba(0, 0, 0, 0.15);

    transform: translateY(-50%);
    opacity: 0;
    transition: right 0.35s ease, opacity 0.25s ease;
}
.npe-dr-slide_right.npe-dr-active {
    right: 0;
    opacity: 1;
}

/* ================================================================
   bar_top
   ================================================================ */
.npe-dr-bar_top {
    position: fixed;
    top: -120px;
    left: 0;
    right: 0;
    z-index: 99991;
    background: #1f2937;
    color: #fff;
    padding: 10px 48px 10px 20px; /* right padding for close btn */
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

    opacity: 0;
    transition: top 0.3s ease, opacity 0.25s ease;
}
.npe-dr-bar_top.npe-dr-active {
    top: 0;
    opacity: 1;
}
/* Shift down when WP admin bar is visible */
.admin-bar .npe-dr-bar_top.npe-dr-active { top: 32px; }

/* ================================================================
   bar_bottom
   ================================================================ */
.npe-dr-bar_bottom {
    position: fixed;
    bottom: -120px;
    left: 0;
    right: 0;
    z-index: 99991;
    background: #1f2937;
    color: #fff;
    padding: 10px 48px 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

    opacity: 0;
    transition: bottom 0.3s ease, opacity 0.25s ease;
}
.npe-dr-bar_bottom.npe-dr-active {
    bottom: 0;
    opacity: 1;
}

/* ---- Bar content styles ---- */
.npe-dr-bar_top .npe-dr-close,
.npe-dr-bar_bottom .npe-dr-close {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
}
.npe-dr-bar_top .npe-dr-close:hover,
.npe-dr-bar_bottom .npe-dr-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.npe-dr-bar_top .npe-dr-title,
.npe-dr-bar_bottom .npe-dr-title {
    font-size: 15px;
    color: #fff;
    margin: 0;
    padding-right: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.npe-dr-bar_top .npe-dr-desc,
.npe-dr-bar_bottom .npe-dr-desc {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    font-size: 13px;
    flex-shrink: 0;
}
.npe-dr-bar_top .npe-wrap,
.npe-dr-bar_bottom .npe-wrap {
    flex: 1;
    min-width: 200px;
}
/* Compact form inside bars */
.npe-dr-bar_top .npe-form,
.npe-dr-bar_bottom .npe-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.npe-dr-bar_top .npe-field,
.npe-dr-bar_bottom .npe-field {
    margin-bottom: 0;
    flex: 1;
    min-width: 150px;
}
.npe-dr-bar_top .npe-label,
.npe-dr-bar_bottom .npe-label {
    display: none; /* hide labels in bar for compact layout */
}
.npe-dr-bar_top .npe-btn,
.npe-dr-bar_bottom .npe-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.npe-dr-bar_top .npe-consent,
.npe-dr-bar_bottom .npe-consent {
    width: 100%;
    flex-basis: 100%;
}
.npe-dr-bar_top .npe-consent-text,
.npe-dr-bar_bottom .npe-consent-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

/* ================================================================
   Responsive — mobile adaptations
   ================================================================ */
@media (max-width: 600px) {
    /* Slide panels → bottom sheet */
    .npe-dr-slide_left,
    .npe-dr-slide_right {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -400px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 20px 18px 28px !important;
        transform: none !important;
        transition: bottom 0.35s ease, opacity 0.25s ease !important;
    }
    .npe-dr-slide_left.npe-dr-active,
    .npe-dr-slide_right.npe-dr-active {
        bottom: 0 !important;
        opacity: 1;
    }

    /* Bars: stack vertically on small screens */
    .npe-dr-bar_top,
    .npe-dr-bar_bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-right: 44px;
    }
    .npe-dr-bar_top .npe-form,
    .npe-dr-bar_bottom .npe-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Admin bar offset on mobile */
    .admin-bar .npe-dr-bar_top.npe-dr-active { top: 46px; }
}

@media (max-width: 782px) {
    .admin-bar .npe-dr-bar_top.npe-dr-active { top: 46px; }
}