/* ================================================================
   BOOKBUKA — POPUP & NOTIFICATION ENGINE
   ================================================================
   Frontend Visual System
   Version: 1.2.1

   Supports:
       - Promotional advertisements
       - Personal points notifications
       - Payroll reward notifications
       - 9 screen positions
       - Desktop / tablet / Android / iPhone
       - Responsive notification cards
       - Animated entrance / exit
       - Progress timer
       - Avatar images
       - Avatar fallback
       - Safe-area support
       - Reduced-motion accessibility
       - Dark/light BookBuka themes

   ================================================================ */


/* ================================================================
   1. ROOT VARIABLES
   ================================================================ */

:root {

    --bb-popup-z-index: 2147483000;

    --bb-popup-width: 390px;

    --bb-popup-max-width: calc(100vw - 28px);

    --bb-popup-radius: 20px;

    --bb-popup-bg:
        rgba(15, 23, 42, 0.98);

    --bb-popup-bg-secondary:
        rgba(30, 41, 59, 0.98);

    --bb-popup-text:
        #f8fafc;

    --bb-popup-muted:
        #cbd5e1;

    --bb-popup-soft:
        #94a3b8;

    --bb-popup-border:
        rgba(255, 255, 255, 0.12);

    --bb-popup-border-strong:
        rgba(255, 255, 255, 0.20);

    --bb-popup-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 10px 30px rgba(0, 0, 0, 0.25);

    --bb-popup-shadow-hover:
        0 36px 95px rgba(0, 0, 0, 0.50),
        0 12px 35px rgba(0, 0, 0, 0.28);

    --bb-popup-primary:
        #2563eb;

    --bb-popup-primary-dark:
        #1d4ed8;

    --bb-popup-primary-light:
        #60a5fa;

    --bb-popup-success:
        #22c55e;

    --bb-popup-warning:
        #f59e0b;

    --bb-popup-danger:
        #ef4444;

    --bb-popup-points-blue:
        #3b82f6;

    --bb-popup-points-blue-light:
        #60a5fa;

    --bb-popup-points-blue-soft:
        #bfdbfe;

    --bb-popup-gap:
        14px;

    --bb-popup-padding:
        14px;

    --bb-popup-animation-duration:
        420ms;

    --bb-popup-font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ================================================================
   2. GLOBAL BOX SIZING
   ================================================================ */

#bookbuka-popup-engine,
#bookbuka-popup-engine *,
#bookbuka-popup-engine *::before,
#bookbuka-popup-engine *::after {

    box-sizing: border-box;
}


/* ================================================================
   3. MAIN ENGINE LAYER
   ================================================================ */

#bookbuka-popup-engine {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    margin: 0 !important;

    padding: 0 !important;

    pointer-events: none !important;

    z-index: var(--bb-popup-z-index) !important;

    font-family: var(--bb-popup-font);

    isolation: isolate;

    visibility: visible !important;

    overflow: visible !important;

    contain: none !important;
}


#bookbuka-popup-engine {

    pointer-events: none !important;
}


/* ================================================================
   4. POSITION CONTAINERS
   ================================================================ */

.bookbuka-popup-position {

    position: fixed !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch;

    gap: var(--bb-popup-gap);

    width: var(--bb-popup-width);

    max-width: var(--bb-popup-max-width);

    margin: 0 !important;

    padding: var(--bb-popup-padding);

    pointer-events: none !important;

    z-index: var(--bb-popup-z-index) !important;

    visibility: visible !important;

    opacity: 1;

    overflow: visible !important;

    transform-origin: center center;
}


.bookbuka-popup-position > * {

    pointer-events: auto !important;
}


/* ================================================================
   5. TOP POSITIONS
   ================================================================ */

.bookbuka-popup-position-top-left {

    top: 0 !important;

    left: 0 !important;

    right: auto !important;

    bottom: auto !important;

    align-items: flex-start;
}


.bookbuka-popup-position-top-center {

    top: 0 !important;

    left: 50% !important;

    right: auto !important;

    bottom: auto !important;

    transform: translateX(-50%) !important;

    align-items: center;
}


.bookbuka-popup-position-top-right {

    top: 0 !important;

    right: 0 !important;

    left: auto !important;

    bottom: auto !important;

    align-items: flex-end;
}


/* ================================================================
   6. CENTER POSITIONS
   ================================================================ */

.bookbuka-popup-position-center-left {

    top: 50% !important;

    left: 0 !important;

    right: auto !important;

    bottom: auto !important;

    transform: translateY(-50%) !important;

    align-items: flex-start;
}


.bookbuka-popup-position-center {

    top: 50% !important;

    left: 50% !important;

    right: auto !important;

    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    align-items: center;
}


.bookbuka-popup-position-center-right {

    top: 50% !important;

    right: 0 !important;

    left: auto !important;

    bottom: auto !important;

    transform: translateY(-50%) !important;

    align-items: flex-end;
}


/* ================================================================
   7. BOTTOM POSITIONS
   ================================================================ */

.bookbuka-popup-position-bottom-left {

    top: auto !important;

    left: 0 !important;

    right: auto !important;

    bottom: 0 !important;

    align-items: flex-start;
}


.bookbuka-popup-position-bottom-center {

    top: auto !important;

    left: 50% !important;

    right: auto !important;

    bottom: 0 !important;

    transform: translateX(-50%) !important;

    align-items: center;
}


.bookbuka-popup-position-bottom-right {

    top: auto !important;

    right: 0 !important;

    left: auto !important;

    bottom: 0 !important;

    align-items: flex-end;
}


/* ================================================================
   8. POPUP WRAPPER
   ================================================================ */

.bookbuka-popup-wrapper {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    pointer-events: auto !important;

    visibility: visible !important;

    opacity: 0;

    transform:
        translateY(18px)
        scale(0.94);

    filter: blur(3px);

    transition:
        opacity 360ms ease,
        transform 420ms cubic-bezier(.16, 1, .3, 1),
        filter 360ms ease;

    will-change:
        opacity,
        transform,
        filter;
}


.bookbuka-popup-wrapper.bookbuka-popup-visible {

    visibility: visible !important;

    opacity: 1 !important;

    transform:
        translateY(0)
        scale(1) !important;

    filter: blur(0);
}


.bookbuka-popup-wrapper.bookbuka-popup-closing {

    opacity: 0 !important;

    transform:
        translateY(12px)
        scale(0.95) !important;

    filter: blur(2px);
}


/* ================================================================
   9. BASE POPUP CARD
   ================================================================ */

.bookbuka-popup-card {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    color: var(--bb-popup-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.99),
            rgba(15, 23, 42, 0.995)
        ) !important;

    border:
        1px solid
        var(--bb-popup-border);

    border-radius:
        var(--bb-popup-radius);

    box-shadow:
        var(--bb-popup-shadow);

    pointer-events: auto !important;

    visibility: visible !important;

    isolation: isolate;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transform:
        translateZ(0);

    -webkit-transform:
        translateZ(0);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* ================================================================
   10. CARD DECORATION
   ================================================================ */

.bookbuka-popup-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.085),
            transparent 28%,
            transparent 68%,
            rgba(37,99,235,0.07)
        );

    z-index: 0;
}


.bookbuka-popup-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: 12%;

    width: 76%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(96,165,250,0.95),
            transparent
        );

    opacity: 0.9;

    pointer-events: none;

    z-index: 20;
}


/* ================================================================
   11. CONTENT LAYERS
   ================================================================ */

.bookbuka-popup-card .bookbuka-popup-body,
.bookbuka-popup-card .bookbuka-popup-notification,
.bookbuka-popup-card .bookbuka-popup-footer,
.bookbuka-popup-card .bookbuka-popup-badge,
.bookbuka-popup-card .bookbuka-popup-title,
.bookbuka-popup-card .bookbuka-popup-message,
.bookbuka-popup-card .bookbuka-popup-content {

    position: relative;

    z-index: 3;
}


/* ================================================================
   12. CLOSE BUTTON
   ================================================================ */

.bookbuka-popup-close {

    position: absolute !important;

    top: 10px !important;

    right: 10px !important;

    z-index: 100 !important;

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    min-height: 32px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 10px;

    color: #cbd5e1;

    background:
        rgba(15,23,42,0.72);

    box-shadow:
        0 4px 12px rgba(0,0,0,0.18);

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.bookbuka-popup-close span {

    display: block;

    font-size: 22px;

    line-height: 1;

    font-weight: 300;

    transform: translateY(-1px);
}


.bookbuka-popup-close:hover {

    color: #ffffff;

    background:
        rgba(239,68,68,0.22);

    border-color:
        rgba(239,68,68,0.30);

    transform:
        rotate(4deg)
        scale(1.03);
}


.bookbuka-popup-close:active {

    transform: scale(0.90);
}


.bookbuka-popup-close:focus {

    outline: none;
}


.bookbuka-popup-close:focus-visible {

    outline:
        2px solid
        #93c5fd;

    outline-offset: 2px;
}


/* ================================================================
   13. ADVERT IMAGE
   ================================================================ */

.bookbuka-popup-advert-image-wrap {

    position: relative;

    width: 100%;

    height: auto;

    aspect-ratio: 16 / 8.8;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #1e293b,
            #0f172a
        );

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}


.bookbuka-popup-advert-image-wrap::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02),
            transparent 45%,
            rgba(0,0,0,0.28)
        );

    z-index: 2;
}


.bookbuka-popup-advert-image {

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 650ms cubic-bezier(.16,1,.3,1);
}


.bookbuka-popup-card-advert:hover
.bookbuka-popup-advert-image {

    transform: scale(1.035);
}


/* ================================================================
   14. ADVERT BODY
   ================================================================ */

.bookbuka-popup-card-advert
.bookbuka-popup-body {

    position: relative;

    padding:
        15px 16px 17px;
}



/* ================================================================
   14A. SPONSORED ADVERTISEMENT — COLOURFUL CARD
   ================================================================ */

.bookbuka-popup-card-advert {

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 45%,
            #eef5ff 100%
        ) !important;

    color:
        #172033 !important;

    border:
        1px solid
        rgba(37,99,235,0.18);

    box-shadow:
        0 24px 60px
        rgba(15,23,42,0.20),

        0 8px 25px
        rgba(37,99,235,0.12);

}


/* ================================================================
   SPONSORED AD — DECORATIVE LIGHT
   ================================================================ */

.bookbuka-popup-card-advert::before {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.75),
            transparent 35%,
            transparent 70%,
            rgba(96,165,250,0.08)
        );

    z-index:
        0;
}


/* ================================================================
   SPONSORED AD — TOP ACCENT
   ================================================================ */

.bookbuka-popup-card-advert::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            #60a5fa,
            #2563eb,
            #60a5fa,
            transparent
        );

    opacity:
        1;
}


/* ================================================================
   SPONSORED AD — BODY TEXT
   ================================================================ */

.bookbuka-popup-card-advert
.bookbuka-popup-title {

    color:
        #172033 !important;
}


.bookbuka-popup-card-advert
.bookbuka-popup-message {

    color:
        #475569 !important;
}


/* ================================================================
   SPONSORED AD — BADGE
   ================================================================ */

.bookbuka-popup-card-advert
.bookbuka-popup-badge {

    color:
        #1d4ed8;

    background:
        rgba(37,99,235,0.08);

    border-color:
        rgba(37,99,235,0.16);
}


/* ================================================================
   SPONSORED AD — IMAGE AREA
   ================================================================ */

.bookbuka-popup-card-advert
.bookbuka-popup-advert-image-wrap {

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eff6ff,
            #e0f2fe
        );

    border-bottom-color:
        rgba(37,99,235,0.10);
}

/* ================================================================
   15. BADGE
   ================================================================ */

.bookbuka-popup-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    max-width: 100%;

    margin-bottom: 8px;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(96,165,250,0.17);

    border-radius:
        999px;

    color:
        #bfdbfe;

    background:
        rgba(37,99,235,0.11);

    font-size: 9px;

    line-height: 1;

    font-weight: 850;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.bookbuka-popup-badge-dot {

    display: inline-block;

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        #60a5fa;

    box-shadow:
        0 0 8px
        rgba(96,165,250,0.75);
}


/* ================================================================
   16. TITLE
   ================================================================ */

.bookbuka-popup-title {

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.32;

    font-weight: 850;

    letter-spacing: -0.015em;

    overflow-wrap: anywhere;
}


/* ================================================================
   17. MESSAGE
   ================================================================ */

.bookbuka-popup-message {

    margin: 6px 0 0;

    padding: 0;

    color:
        var(--bb-popup-muted);

    font-size: 13px;

    line-height: 1.62;

    font-weight: 450;

    overflow-wrap: anywhere;
}


/* ================================================================
   18. FOOTER
   ================================================================ */

.bookbuka-popup-footer {

    display: flex;

    width: 100%;

    margin-top: 14px;
}


/* ================================================================
   19. ACTION BUTTON
   ================================================================ */

.bookbuka-popup-action {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 43px;

    padding:
        10px 15px;

    border:
        1px solid
        rgba(96,165,250,0.25);

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--bb-popup-primary),
            var(--bb-popup-primary-dark)
        );

    box-shadow:
        0 9px 24px
        rgba(37,99,235,0.25);

    font-size: 13px;

    line-height: 1.2;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    overflow: hidden;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}


.bookbuka-popup-action::before {

    content: "";

    position: absolute;

    top: 0;

    left: -80%;

    width: 45%;

    height: 100%;

    transform: skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.20),
            transparent
        );

    transition:
        left 500ms ease;
}


.bookbuka-popup-action:hover {

    color: #ffffff;

    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 13px 30px
        rgba(37,99,235,0.34);
}


.bookbuka-popup-action:hover::before {

    left: 135%;
}


.bookbuka-popup-action:active {

    transform:
        translateY(1px)
        scale(0.99);
}


.bookbuka-popup-action:focus {

    outline: none;
}


.bookbuka-popup-action:focus-visible {

    outline:
        2px solid
        #bfdbfe;

    outline-offset: 3px;
}


/* ================================================================
   20. NOTIFICATION CARDS
   ================================================================ */

.bookbuka-popup-card-points,
.bookbuka-popup-card-reward {

    padding: 11px 12px;
}


/* ================================================================
   21. NOTIFICATION ROW
   ================================================================ */

.bookbuka-popup-notification {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    width: 100%;

    padding-right: 25px;
}


/* ================================================================
   22. NOTIFICATION CONTENT
   ================================================================ */

.bookbuka-popup-content {

    position: relative;

    min-width: 0;

    max-width: 100%;

    flex: 1;

    padding:
        0;
}


/* ================================================================
   23. SMALL LABEL
   ================================================================ */

.bookbuka-popup-small-label {

    display: block;

    margin-bottom: 2px;

    color:
        #94a3b8;

    font-size: 8px;

    line-height: 1.15;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


/* ================================================================
   24. AVATAR
   ================================================================ */

.bookbuka-popup-avatar {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    min-width: 42px;

    min-height: 42px;

    flex:
        0 0 42px;

    overflow: hidden;

    border:
        2px solid
        rgba(255,255,255,0.18);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );

    color: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,0.09),

        0 6px 15px
        rgba(0,0,0,0.22);
}


.bookbuka-popup-avatar img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;
}


.bookbuka-popup-avatar-fallback-text {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -0.02em;
}


.bookbuka-popup-avatar::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 1px;

    width: 9px;

    height: 9px;

    border:
        2px solid
        #111827;

    border-radius: 50%;

    background:
        var(--bb-popup-success);

    box-shadow:
        0 0 7px
        rgba(34,197,94,0.70);
}


/* ================================================================
   25. POINTS CARD — COMPACT PREMIUM BLUE DESIGN
   ================================================================ */

/* ================================================================
   25. POINTS CARD — BOOKBUKA ROYAL BLUE DESIGN
   ================================================================ */

.bookbuka-popup-card-points {

    position: relative;

    width: 100%;

    max-width: 315px;

    padding:
        10px 11px;

    /*
     * BookBuka premium blue.
     *
     * Deep navy at the top gradually changes
     * into a rich royal blue toward the bottom.
     */

    background:
        linear-gradient(
            155deg,
            #111e3d 0%,
            #182f70 34%,
            #20469c 67%,
            #2454c4 100%
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid
        rgba(129,172,255,0.38);

    border-radius:
        15px;

    box-shadow:
        0 16px 38px
        rgba(8,25,70,0.42),

        0 0 24px
        rgba(37,99,235,0.18);

    overflow:
        hidden;

    isolation:
        isolate;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


/* ================================================================
   POINTS CARD — DECORATIVE BLUE LIGHT
   ================================================================ */

.bookbuka-popup-card-points::before {

    content: "";

    position: absolute;

    top: -55px;

    right: -35px;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background:
        rgba(96,165,250,0.20);

    filter:
        blur(2px);

    pointer-events:
        none;

    z-index:
        0;
}


/* Second subtle light layer */

.bookbuka-popup-card-points::after {

    content: "";

    position: absolute;

    top: 0;

    left: 12%;

    width: 76%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(147,197,253,0.95),
            transparent
        );

    opacity:
        1;

    pointer-events:
        none;

    z-index:
        20;
}


/* ================================================================
   POINTS CARD — HOVER
   ================================================================ */

.bookbuka-popup-card-points:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(147,197,253,0.55);

    box-shadow:
        0 20px 45px
        rgba(8,25,70,0.48),

        0 0 30px
        rgba(37,99,235,0.25);
}


/* ================================================================
   POINTS CONTENT LAYER
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-notification {

    position:
        relative;

    z-index:
        3;
}


/* ================================================================
   POINTS TITLE
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-title {

    color:
        #ffffff !important;

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        800;

    letter-spacing:
        -0.01em;
}


/* ================================================================
   POINTS MESSAGE
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-message {

    margin-top:
        2px;

    color:
        #dbeafe !important;

    font-size:
        10px;

    line-height:
        1.4;

    font-weight:
        450;
}


/* ================================================================
   POINTS AMOUNT
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-message strong {

    display:
        inline-block;

    color:
        #ffffff !important;

    font-weight:
        900;

    text-shadow:
        0 1px 8px
        rgba(191,219,254,0.30);
}


/* ================================================================
   POINTS SMALL LABEL
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-small-label {

    color:
        #bfdbfe !important;

    font-size:
        8px;

    line-height:
        1.15;

    font-weight:
        850;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    opacity:
        0.95;
}


/* ================================================================
   POINTS AVATAR — BLUE
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-avatar {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    min-height:
        42px;

    flex:
        0 0 42px;

    border:
        2px solid
        rgba(191,219,254,0.72);

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #60a5fa
        );

    box-shadow:
        0 0 0 3px
        rgba(147,197,253,0.13),

        0 7px 18px
        rgba(0,0,0,0.28),

        0 0 18px
        rgba(96,165,250,0.20);

    overflow:
        hidden;
}


/* Avatar image */

.bookbuka-popup-card-points
.bookbuka-popup-avatar img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


/* Avatar fallback */

.bookbuka-popup-card-points
.bookbuka-popup-avatar-fallback-text {

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;
}


/* ================================================================
   POINTS ONLINE INDICATOR
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-avatar::after {

    width:
        8px;

    height:
        8px;

    border:
        2px solid
        #17336f;

    border-radius:
        50%;

    background:
        #22c55e;

    box-shadow:
        0 0 8px
        rgba(34,197,94,0.75);
}


/* ================================================================
   POINTS CARD — INNER BLUE GLASS EFFECT
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-content {

    position:
        relative;

    z-index:
        3;
}


/* ================================================================
   POINTS CARD — PROGRESS BAR
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-progress {

    background:
        rgba(255,255,255,0.10);
}


.bookbuka-popup-card-points
.bookbuka-popup-progress-bar {

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #93c5fd,
            #dbeafe
        );

    box-shadow:
        0 0 10px
        rgba(147,197,253,0.55);
}


/* ================================================================
   POINTS CARD — SUBTLE LIGHT EFFECT
   ================================================================ */

.bookbuka-popup-card-points::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.13),
            transparent 30%,
            transparent 68%,
            rgba(147,197,253,0.08)
        );

    z-index: 0;
}


/*
 * Premium blue top highlight.
 */

.bookbuka-popup-card-points::after {

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #93c5fd,
            #60a5fa,
            transparent
        );

    opacity: 1;
}


/*
 * Subtle premium hover effect.
 */

.bookbuka-popup-card-points:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(147,197,253,0.58);

    box-shadow:
        0 18px 42px rgba(0,0,0,0.34),

        0 0 28px
        rgba(37,99,235,0.24);
}


/*
 * Compact points title.
 */

.bookbuka-popup-card-points
.bookbuka-popup-title {

    position: relative;

    z-index: 3;

    font-size: 12px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing:
        -0.01em;

    color:
        #ffffff;
}


/*
 * Compact points message.
 */

.bookbuka-popup-card-points
.bookbuka-popup-message {

    position: relative;

    z-index: 3;

    margin-top: 2px;

    color:
        #dbeafe;

    font-size: 10px;

    line-height: 1.35;

    font-weight: 450;
}


/*
 * Highlight the actual points amount.
 */

.bookbuka-popup-card-points
.bookbuka-popup-message strong {

    display: inline-block;

    color:
        #ffffff;

    font-weight: 900;

    text-shadow:
        0 0 10px
        rgba(191,219,254,0.28);
}


/* ================================================================
   25A. POINTS AVATAR — BLUE
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-avatar {

    width: 42px;

    height: 42px;

    min-width: 42px;

    min-height: 42px;

    flex-basis: 42px;

    border-color:
        rgba(191,219,254,0.65);

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #60a5fa
        );

    box-shadow:
        0 0 0 3px
        rgba(147,197,253,0.13),

        0 7px 17px
        rgba(0,0,0,0.24),

        0 0 16px
        rgba(96,165,250,0.18);
}


/*
 * Smaller points avatar initials.
 */

.bookbuka-popup-card-points
.bookbuka-popup-avatar-fallback-text {

    font-size:
        12px;
}


/*
 * Green online indicator remains intact.
 */

.bookbuka-popup-card-points
.bookbuka-popup-avatar::after {

    width: 8px;

    height: 8px;

    border-color:
        #12315c;

    background:
        #22c55e;
}


/* ================================================================
   25B. POINTS SMALL LABEL
   ================================================================ */

.bookbuka-popup-card-points
.bookbuka-popup-small-label {

    color:
        #bfdbfe;

    opacity:
        0.92;
}


/* ================================================================
   26. REWARD CARD
   ================================================================ */

.bookbuka-popup-card-reward {

    background:
        linear-gradient(
            145deg,
            rgba(6,78,59,0.98),
            rgba(15,23,42,0.99)
        );

    border-color:
        rgba(34,197,94,0.25);
}


.bookbuka-popup-card-reward::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(34,197,94,0.95),
            transparent
        );
}


.bookbuka-popup-card-reward
.bookbuka-popup-title {

    font-size: 14px;
}


.bookbuka-popup-card-reward
.bookbuka-popup-message {

    color: #d1fae5;

    font-size: 12px;

    line-height: 1.58;
}


.bookbuka-popup-card-reward
.bookbuka-popup-message strong {

    color: #86efac;

    font-weight: 900;
}


.bookbuka-popup-time {

    margin-top: 5px;

    color: #86a99a;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 600;
}


.bookbuka-popup-card-reward
.bookbuka-popup-avatar {

    background:
        linear-gradient(
            135deg,
            #059669,
            #22c55e
        );

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,0.10),

        0 9px 22px
        rgba(0,0,0,0.25);
}


/* ================================================================
   27. PROGRESS BAR
   ================================================================ */

.bookbuka-popup-progress {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 3px;

    overflow: hidden;

    border-radius:
        0 0
        var(--bb-popup-radius)
        var(--bb-popup-radius);

    background:
        rgba(255,255,255,0.07);

    z-index: 40;

    pointer-events: none;
}


.bookbuka-popup-progress-bar {

    display: block;

    width: 100%;

    height: 100%;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa,
            #93c5fd
        );

    animation:
        bbPopupProgress
        var(--bb-popup-duration, 7s)
        linear
        forwards;
}


@keyframes bbPopupProgress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


/*
 * POINTS PROGRESS BAR — BLUE
 */

.bookbuka-popup-card-points
.bookbuka-popup-progress-bar {

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #3b82f6,
            #93c5fd
        );

    box-shadow:
        0 0 8px
        rgba(96,165,250,0.45);
}


/*
 * REWARD PROGRESS BAR — GREEN
 */

.bookbuka-popup-card-reward
.bookbuka-popup-progress-bar {

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #10b981,
            #34d399
        );
}


.bookbuka-popup-card:hover
.bookbuka-popup-progress-bar {

    animation-play-state: paused;
}


/* ================================================================
   28. TEXT SAFETY
   ================================================================ */

.bookbuka-popup-card,
.bookbuka-popup-wrapper,
.bookbuka-popup-position {

    overflow-wrap: anywhere;
}


.bookbuka-popup-title,
.bookbuka-popup-message,
.bookbuka-popup-content {

    min-width: 0;

    max-width: 100%;

    word-break: normal;

    overflow-wrap: anywhere;
}


.bookbuka-popup-advert-image {

    max-width: 100%;
}


/* ================================================================
   29. MOBILE TOUCH
   ================================================================ */

.bookbuka-popup-close,
.bookbuka-popup-action {

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    user-select: none;

    -webkit-user-select: none;
}


/* ================================================================
   30. MOBILE
   ================================================================ */

@media screen and (max-width: 767.98px) {

    :root {

        --bb-popup-width:
            calc(100vw - 20px);

        --bb-popup-max-width:
            calc(100vw - 20px);

        --bb-popup-gap:
            8px;

        --bb-popup-padding:
            10px;

        --bb-popup-radius:
            17px;
    }


    #bookbuka-popup-engine {

        width: 100vw !important;

        height: 100vh !important;

        height: 100dvh !important;

        max-width: 100vw !important;

        max-height: 100dvh !important;

        overflow: visible !important;

        z-index: 2147483000 !important;
    }


    .bookbuka-popup-position {

        position: fixed !important;

        width:
            calc(100vw - 20px) !important;

        max-width:
            calc(100vw - 20px) !important;

        overflow:
            visible !important;

        z-index:
            2147483000 !important;
    }


    .bookbuka-popup-position-top-center {

        top: 0 !important;

        left: 50% !important;

        right: auto !important;

        width:
            calc(100vw - 20px) !important;

        max-width:
            calc(100vw - 20px) !important;

        transform:
            translateX(-50%) !important;
    }


    .bookbuka-popup-position-top-left {

        top: 0 !important;

        left: 0 !important;

        right: auto !important;
    }


    .bookbuka-popup-position-top-right {

        top: 0 !important;

        right: 0 !important;

        left: auto !important;
    }


    .bookbuka-popup-position-center {

        top: 50% !important;

        left: 50% !important;

        right: auto !important;

        width:
            calc(100vw - 20px) !important;

        max-width:
            calc(100vw - 20px) !important;

        transform:
            translate(-50%, -50%) !important;
    }


    .bookbuka-popup-position-center-left {

        top: 50% !important;

        left: 0 !important;

        right: auto !important;

        transform:
            translateY(-50%) !important;
    }


    .bookbuka-popup-position-center-right {

        top: 50% !important;

        right: 0 !important;

        left: auto !important;

        transform:
            translateY(-50%) !important;
    }


    .bookbuka-popup-position-bottom-center {

        top: auto !important;

        bottom: 0 !important;

        left: 50% !important;

        right: auto !important;

        transform:
            translateX(-50%) !important;
    }


    .bookbuka-popup-position-bottom-left {

        top: auto !important;

        bottom: 0 !important;

        left: 0 !important;

        right: auto !important;
    }


    .bookbuka-popup-position-bottom-right {

        top: auto !important;

        bottom: 0 !important;

        right: 0 !important;

        left: auto !important;
    }


    .bookbuka-popup-wrapper {

        width: 100% !important;

        max-width: 100% !important;
    }


    .bookbuka-popup-card {

        width: 100% !important;

        max-width: 100% !important;

        border-radius:
            var(--bb-popup-radius);
    }


    .bookbuka-popup-card-advert
    .bookbuka-popup-body {

        padding:
            13px 14px 15px;
    }


    .bookbuka-popup-notification {

        gap: 8px;

        padding-right:
            22px;
    }


    .bookbuka-popup-avatar {

        width: 38px;

        height: 38px;

        min-width: 38px;

        min-height: 38px;

        flex-basis: 38px;
    }


    .bookbuka-popup-avatar-fallback-text {

        font-size: 11px;
    }


    .bookbuka-popup-title {

        font-size: 14px;
    }


    .bookbuka-popup-message {

        font-size: 12px;

        line-height: 1.55;
    }


    /* ============================================================
       POINTS CARD — MOBILE BLUE DESIGN
       ============================================================ */

 /* ============================================================
   POINTS CARD — MOBILE BOOKBUKA BLUE
   ============================================================ */

.bookbuka-popup-card-points {

    width:
        100%;

    max-width:
        290px;

    padding:
        9px 10px;

    border-radius:
        13px;

    background:
        linear-gradient(
            155deg,
            #111e3d 0%,
            #182f70 34%,
            #20469c 67%,
            #2454c4 100%
        ) !important;

    box-shadow:
        0 14px 32px
        rgba(8,25,70,0.44),

        0 0 20px
        rgba(37,99,235,0.18);
}


.bookbuka-popup-card-points
.bookbuka-popup-notification {

    gap:
        8px;

    padding-right:
        20px;
}


.bookbuka-popup-card-points
.bookbuka-popup-avatar {

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    min-height:
        38px;

    flex-basis:
        38px;

    border-width:
        2px;
}


.bookbuka-popup-card-points
.bookbuka-popup-title {

    font-size:
        11px;

    line-height:
        1.2;

    color:
        #ffffff !important;
}


.bookbuka-popup-card-points
.bookbuka-popup-message {

    margin-top:
        2px;

    font-size:
        9px;

    line-height:
        1.35;

    color:
        #dbeafe !important;
}


.bookbuka-popup-card-points
.bookbuka-popup-small-label {

    font-size:
        7px;

    margin-bottom:
        2px;

    color:
        #bfdbfe !important;
}


    .bookbuka-popup-card-points
    .bookbuka-popup-notification {

        gap:
            8px;

        padding-right:
            20px;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-avatar {

        width:
            38px;

        height:
            38px;

        min-width:
            38px;

        min-height:
            38px;

        flex-basis:
            38px;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-title {

        font-size:
            11px;

        line-height:
            1.2;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-message {

        margin-top:
            2px;

        color:
            #dbeafe;

        font-size:
            9px;

        line-height:
            1.3;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-small-label {

        font-size:
            7px;

        margin-bottom:
            2px;

        color:
            #bfdbfe;
    }


    .bookbuka-popup-close {

        top: 8px !important;

        right: 8px !important;

        width: 30px !important;

        height: 30px !important;

        min-width: 30px !important;

        min-height: 30px !important;
    }


    .bookbuka-popup-advert-image-wrap {

        aspect-ratio:
            16 / 9;
    }


    .bookbuka-popup-action {

        min-height:
            41px;

        font-size:
            12px;
    }
}


/* ================================================================
   31. VERY SMALL PHONES
   ================================================================ */

@media screen and (max-width: 380px) {

    :root {

        --bb-popup-width:
            calc(100vw - 12px);

        --bb-popup-max-width:
            calc(100vw - 12px);

        --bb-popup-padding:
            6px;

        --bb-popup-radius:
            15px;
    }


    .bookbuka-popup-position {

        width:
            calc(100vw - 12px) !important;

        max-width:
            calc(100vw - 12px) !important;

        padding:
            6px;
    }


    .bookbuka-popup-position-top-center,
    .bookbuka-popup-position-center,
    .bookbuka-popup-position-bottom-center {

        width:
            calc(100vw - 12px) !important;

        max-width:
            calc(100vw - 12px) !important;
    }


    .bookbuka-popup-notification {

        gap: 9px;

        padding-right: 22px;
    }


    .bookbuka-popup-avatar {

        width: 36px;

        height: 36px;

        min-width: 36px;

        min-height: 36px;

        flex-basis: 36px;
    }


    .bookbuka-popup-card-points {

        max-width:
            275px;

        padding:
            8px 9px;

        border-radius:
            12px;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-avatar {

        width:
            36px;

        height:
            36px;

        min-width:
            36px;

        min-height:
            36px;

        flex-basis:
            36px;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-title {

        font-size:
            10px;
    }


    .bookbuka-popup-card-points
    .bookbuka-popup-message {

        font-size:
            8px;

        color:
            #dbeafe;
    }


    .bookbuka-popup-card-advert
    .bookbuka-popup-body {

        padding:
            11px 12px 13px;
    }


    .bookbuka-popup-title {

        font-size: 13px;
    }


    .bookbuka-popup-message {

        font-size: 11px;
    }


    .bookbuka-popup-small-label {

        font-size: 8px;
    }


    .bookbuka-popup-close {

        width: 28px !important;

        height: 28px !important;

        min-width: 28px !important;

        min-height: 28px !important;
    }
}


/* ================================================================
   32. TABLET
   ================================================================ */

@media screen and
(min-width: 768px) and
(max-width: 991.98px) {

    :root {

        --bb-popup-width:
            370px;

        --bb-popup-max-width:
            calc(100vw - 28px);
    }
}


/* ================================================================
   33. LARGE DESKTOP
   ================================================================ */

@media screen and (min-width: 1400px) {

    :root {

        --bb-popup-width:
            410px;
    }


    .bookbuka-popup-title {

        font-size: 17px;
    }


    .bookbuka-popup-message {

        font-size: 13px;
    }


    /*
     * Keep points notification compact even on
     * very large desktop screens.
     */

    .bookbuka-popup-card-points {

        max-width:
            315px;
    }
}


/* ================================================================
   34. SAFE AREA — TOP
   ================================================================ */

@supports (padding-top: env(safe-area-inset-top)) {

    .bookbuka-popup-position-top-left,
    .bookbuka-popup-position-top-center,
    .bookbuka-popup-position-top-right {

        padding-top:
            max(
                var(--bb-popup-padding),
                env(safe-area-inset-top)
            );
    }
}


/* ================================================================
   35. SAFE AREA — BOTTOM
   ================================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .bookbuka-popup-position-bottom-left,
    .bookbuka-popup-position-bottom-center,
    .bookbuka-popup-position-bottom-right {

        padding-bottom:
            max(
                var(--bb-popup-padding),
                env(safe-area-inset-bottom)
            );
    }
}


/* ================================================================
   36. MOBILE SAFE AREA OVERRIDE
   ================================================================ */

@media screen and (max-width: 767.98px) {

    @supports (padding-top: env(safe-area-inset-top)) {

        .bookbuka-popup-position-top-center,
        .bookbuka-popup-position-top-left,
        .bookbuka-popup-position-top-right {

            padding-top:
                max(
                    10px,
                    env(safe-area-inset-top)
                );
        }
    }


    @supports (padding-bottom: env(safe-area-inset-bottom)) {

        .bookbuka-popup-position-bottom-center,
        .bookbuka-popup-position-bottom-left,
        .bookbuka-popup-position-bottom-right {

            padding-bottom:
                max(
                    10px,
                    env(safe-area-inset-bottom)
                );
        }
    }
}


/* ================================================================
   37. ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .bookbuka-popup-wrapper {

        transition:
            opacity 1ms linear,
            transform 1ms linear,
            filter 1ms linear;
    }


    .bookbuka-popup-card,
    .bookbuka-popup-card *,
    .bookbuka-popup-advert-image,
    .bookbuka-popup-action,
    .bookbuka-popup-close,
    .bookbuka-popup-progress-bar {

        animation:
            none !important;

        transition:
            none !important;
    }
}


/* ================================================================
   38. DARK THEME
   ================================================================ */

[data-theme="dark"]
#bookbuka-popup-engine
.bookbuka-popup-card {

    color:
        #f8fafc;
}


/* ================================================================
   39. LIGHT THEME
   ================================================================ */

[data-theme="light"]
#bookbuka-popup-engine
.bookbuka-popup-card {

    color:
        #f8fafc;
}


/* ================================================================
   40. HIGH CONTRAST
   ================================================================ */

@media (prefers-contrast: more) {

    .bookbuka-popup-card {

        border-color:
            rgba(255,255,255,0.30);
    }


    .bookbuka-popup-title {

        color:
            #ffffff;
    }


    .bookbuka-popup-message {

        color:
            #e2e8f0;
    }


    .bookbuka-popup-close {

        border-color:
            rgba(255,255,255,0.24);
    }
}


/* ================================================================
   41. PRINT
   ================================================================ */

@media print {

    #bookbuka-popup-engine {

        display:
            none !important;
    }
}


/* ================================================================
   BOOKBUKA — SPONSORED AD CARD BLUE THEME
   ================================================================ */

.bookbuka-popup-card.bookbuka-popup-card-advert {
    background:
        linear-gradient(
            145deg,
            #2563eb 0%,
            #1d4ed8 45%,
            #1e40af 100%
        ) !important;

    color: #ffffff !important;
}

/* Advert title */
.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-title {
    color: #ffffff !important;
}

/* Advert message */
.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-message {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Sponsored badge */
.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-advert-badge {
    color: #ffffff !important;
}

/* Close button */
.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-close {
    color: #ffffff !important;
}

/* Learn More button */
.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-button {
    background: #ffffff !important;
    color: #1d4ed8 !important;
}

.bookbuka-popup-card.bookbuka-popup-card-advert
.bookbuka-popup-button:hover {
    background: #eff6ff !important;
    color: #1e40af !important;
}

/* ================================================================
   END OF BOOKBUKA POPUP & NOTIFICATION ENGINE CSS
   ================================================================ */