/* ==========================================================
   NGS Product Sections
   Custom accordion (Flatsome-look) + floating Jump-to pill
   ========================================================== */

/* ==========================================================
   1. ACCORDION — Flatsome-style look with our + circle.
   Explicit pixel values so theme button/anchor resets don't
   shrink the text. Zero left padding for flush-left layout.
   ========================================================== */
.ngs-accordion{
    border-top:1px solid #ddd;
    margin:0;
    position:relative;
}
.ngs-accordion:last-of-type{
    border-bottom:1px solid #ddd;
}

/* Header row — button styled to look like a row.
   Important: !important on font reset to defeat Flatsome's
   button{font-size:14px} and similar theme defaults. */
.ngs-accordion__header{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    padding:18px 0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    cursor:pointer;
    text-align:left;
    user-select:none;
    color:#000 !important;
    font-family:inherit !important;
    font-size:18px !important;       /* explicit pixel value, defeats theme button shrinks */
    font-weight:400 !important;
    line-height:1.3 !important;
    text-transform:uppercase;
    letter-spacing:.04em;
    box-shadow:none !important;
    min-height:0;
    transition:color .2s;
}
.ngs-accordion__header:hover{color:#00b5bd !important;}
.ngs-accordion__header:focus-visible{
    outline:2px solid #00b5bd;
    outline-offset:2px;
}

/* Left icon (optional, only renders if [icon="..."] passed).
   Empty spans are not output at all — no phantom space. */
.ngs-accordion__icon-left{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    color:currentColor;
}

/* Title takes the remaining width — pushes + to the far right */
.ngs-accordion__title{
    flex:1 1 auto;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    font:inherit;
    color:inherit;
    text-align:left;
}

/* The + circle */
.ngs-accordion__icon{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid #1a1a1a;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1a1a1a;
    transition:transform .35s ease, background .2s, color .2s, border-color .2s;
}
.ngs-accordion__header:hover .ngs-accordion__icon{
    background:#00b5bd;
    border-color:#00b5bd;
    color:#fff;
}
.ngs-accordion.is-open .ngs-accordion__icon{
    transform:rotate(45deg);
    background:#1a1a1a;
    border-color:#1a1a1a;
    color:#fff;
}

/* Active row styling — bolder when open, matches Flatsome's
   active state without changing the size */
.ngs-accordion.is-open .ngs-accordion__header{
    font-weight:700 !important;
    color:#000 !important;
}

/* Panel collapse/expand */
.ngs-accordion__panel{
    overflow:hidden;
    max-height:0;
    transition:max-height .4s ease;
}
.ngs-accordion.is-open .ngs-accordion__panel{
    max-height:5000px;
}
.ngs-accordion__inner{
    padding:8px 0 24px;
    font-size:15px;
    color:#333;
    text-transform:none;
    letter-spacing:normal;
    font-weight:400;
    line-height:1.6;
}

/* Mobile — slightly smaller text, smaller + circle */
@media (max-width:600px){
    .ngs-accordion__header{
        gap:10px;
        padding:16px 0 !important;
        font-size:15px !important;
    }
    .ngs-accordion__icon{
        width:28px;
        height:28px;
    }
    .ngs-accordion__icon-left .ngs-icon{
        width:16px; height:16px;
    }
    .ngs-accordion__inner{
        font-size:14px;
        padding:6px 0 20px;
    }
}




/* ==========================================================
   2. FLOATING JUMP-TO PILL — sole UI element on both
      mobile and desktop. Bottom-left fixed position.
   ========================================================== */
.ngs-ps-floater{
    /* Outer container. Fixed to viewport bottom-left.
       Bubble positions itself relative to this. */
    position:fixed;
    left:16px;
    bottom:16px;
    z-index:99990;
    pointer-events:none;
}
.ngs-ps-floater *{pointer-events:auto;}

/* Desktop sits a bit further from the corner */
@media (min-width:992px){
    .ngs-ps-floater{
        left:24px;
        bottom:24px;
    }
}

/* iOS safe-area inset support */
@supports (padding:max(0px)){
    .ngs-ps-floater{
        bottom:max(16px, env(safe-area-inset-bottom));
        left:max(16px, env(safe-area-inset-left));
    }
}

/* ---- the pill ---- */
.ngs-ps-jump{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 18px 11px 15px;
    background:linear-gradient(135deg, #00b5bd, #0076bd) !important;
    color:#fff;
    border:0;
    border-radius:999px;
    font:700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    white-space:nowrap;
    position:relative;
    box-shadow:
        0 6px 20px rgba(0,118,189,0.45),
        0 0 0 1px rgba(255,255,255,0.08) inset;
    transition:transform .2s ease, box-shadow .25s ease;
}
.ngs-ps-jump:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 26px rgba(0,118,189,0.6),
        0 0 0 1px rgba(255,255,255,0.12) inset;
}
.ngs-ps-jump:active{
    transform:translateY(-1px);
}
.ngs-ps-jump:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

/* Glow halo behind the pill */
.ngs-ps-jump::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:999px;
    background:radial-gradient(closest-side, rgba(0,118,189,0.5), transparent 70%);
    z-index:-1;
    opacity:.85;
    animation:ngs-pulse 2.6s ease-in-out infinite;
    pointer-events:none;
}

/* Blinking white dot */
.ngs-ps-jump__dot{
    width:7px; height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 0 rgba(255,255,255,0.7);
    animation:ngs-blink 1.4s ease-in-out infinite;
    flex:0 0 auto;
}

.ngs-ps-jump__label{
    font:inherit;
}

.ngs-ps-jump__caret{
    display:inline-flex;
    transition:transform .25s ease;
    margin-left:1px;
}
.ngs-ps-jump[aria-expanded="true"] .ngs-ps-jump__caret{
    transform:rotate(180deg);
}
.ngs-ps-jump[aria-expanded="true"]::after{
    animation:none;
    opacity:0;
}

@keyframes ngs-pulse{
    0%, 100% { transform:scale(1);    opacity:.85; }
    50%      { transform:scale(1.14); opacity:.35; }
}
@keyframes ngs-blink{
    0%, 100% { box-shadow:0 0 0 0 rgba(255,255,255,0.7); }
    50%      { box-shadow:0 0 0 6px rgba(255,255,255,0); }
}

@media (prefers-reduced-motion: reduce){
    .ngs-ps-jump,
    .ngs-ps-jump::after,
    .ngs-ps-jump__dot{
        animation:none !important;
    }
}

/* ==========================================================
   3. BUBBLE MENU — pops above the pill, anchored bottom-left
   ========================================================== */
.ngs-ps-bubble{
    position:absolute;
    bottom:calc(100% + 14px);
    left:0;
    min-width:280px;
    max-width:360px;
    /* Black base + diagonal teal gradient — per design spec. */
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgb(28 29 29) 100%), #000;
    border:0;
    border-radius:18px;
    box-shadow:
        inset 0 0 0 1px rgb(0,140,189),       /* spec'd inset border */
        0 24px 60px rgba(0,0,0,0.55),
        0 0 40px rgba(0,141,189,0.20);
    padding:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(10px) scale(.96);
    transform-origin:bottom left;
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
    z-index:9999;
}
.ngs-ps-bubble.is-open{
    opacity:1;
    transform:translateY(0) scale(1);
}

.ngs-ps-bubble__inner{
    padding:14px 10px 10px;
}

/* Header — product name (marquee if long) + smaller "Jump to menu" subline */
.ngs-ps-bubble__header{
    padding:4px 12px 12px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:6px;
}
.ngs-ps-bubble__product{
    position:relative;
    overflow:hidden;
    width:100%;
    margin-bottom:4px;
    /* Soft fade on the right edge so the marquee text disappears cleanly. */
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.ngs-ps-bubble__product-track{
    display:inline-block;
    white-space:nowrap;
    will-change:transform;
}
.ngs-ps-bubble__product-name{
    font:700 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing:.02em;
    color:#fff;
    text-transform:uppercase;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
/* Marquee — set as CSS vars by the JS (--ngs-marquee-distance, --ngs-marquee-duration) */
.ngs-ps-bubble__product.is-marquee .ngs-ps-bubble__product-track{
    animation:ngs-marquee var(--ngs-marquee-duration, 12s) linear infinite;
}
@keyframes ngs-marquee{
    0%   { transform:translateX(0); }
    8%   { transform:translateX(0); }                              /* hold at the start */
    50%  { transform:translateX(var(--ngs-marquee-distance, -100px)); }
    58%  { transform:translateX(var(--ngs-marquee-distance, -100px)); } /* hold at the end */
    100% { transform:translateX(0); }                              /* return */
}
@media (prefers-reduced-motion: reduce){
    .ngs-ps-bubble__product.is-marquee .ngs-ps-bubble__product-track{ animation:none; }
}

.ngs-ps-bubble__title{
    font:700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.55);
}
.ngs-ps-bubble__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.ngs-ps-bubble__list a,
.ngs-ps-bubble__list button{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 7px;
    border:0;
    width:100%;
    text-align:left;
    background:transparent;
    border-radius:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    transition:background .25s ease, color .25s ease;
    font-size: 15px;
    font-weight: 500;
}
.ngs-ps-bubble__list a .ngs-icon,
.ngs-ps-bubble__list button .ngs-icon{
    width:18px; height:18px;
    color:rgba(255,255,255,0.6);
    transition:color .25s ease;
    flex:0 0 auto;
}
.ngs-ps-bubble__list a:hover,
.ngs-ps-bubble__list button:hover{
    background:rgba(0,181,189,0.12);
    color:#fff;
}
.ngs-ps-bubble__list a:hover .ngs-icon,
.ngs-ps-bubble__list button:hover .ngs-icon{color:#00b5bd;}
.ngs-ps-bubble__list a.is-active{
    background:linear-gradient(135deg, rgba(0,181,189,0.35) 0%, rgba(0,138,144,0.22) 100%);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(0,181,189,0.4);
}
.ngs-ps-bubble__list a.is-active .ngs-icon{color:#00b5bd;}

/* "Jump to top" — visually distinct first item */
.ngs-ps-bubble__list .ngs-ps-bubble__top{
    border-bottom:1px solid rgba(255,255,255,0.08);
    margin-bottom:4px;
    padding-bottom:13px;
}
.ngs-ps-bubble__list .ngs-ps-bubble__top:hover .ngs-icon{
    color:#00b5bd;
    transform:translateY(-2px);
    transition:color .25s, transform .25s;
}

/* The little triangle pointer at the bottom-left of the bubble,
   pointing down to the Jump-to pill */
.ngs-ps-bubble__arrow{
    position:absolute;
    bottom:-7px;
    left:28px;
    width:14px;
    height:14px;
    background:linear-gradient(135deg, rgba(0,0,0,0) 0%, rgb(0,141,189) 100%), #000;
    border-right:1px solid rgb(0,140,189);
    border-bottom:1px solid rgb(0,140,189);
    transform:rotate(45deg);
}

/* ==========================================================
   6. AR VISUALIZER BUTTON (inside bubble, flush to bottom)
   --------------------------------------------------------------
   Bottom background now matches the Jump To pill's teal gradient
   (#00b5bd → #0076bd). Has a perpetual subtle pulse + shimmer
   sweep so it grabs attention without screaming.
   ========================================================== */
.ngs-ps-ar{
    /* Flat top, curved bottom corners matching bubble's 18px radius
       (account for 1px border: inner radius = 17px) */
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    border:0;
    margin:6px 0 0;
    padding:18px 18px;
    background:linear-gradient(135deg, #00b5bd 0%, #0076bd 100%);  /* matches Jump To pill */
    color:#fff;
    cursor:pointer;
    border-radius:0 0 17px 17px;
    font:700 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    position:relative;
    overflow:hidden;
    transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 0 rgba(0,0,0,0.10),
        0 -2px 24px rgba(0,181,189,0.32);
    /* Looping attention-grabber — gentle pulse glow + a slow shimmer sweep
       (the sweep lives in ::after; this animation is the breathing glow). */
    animation:ngs-ar-pulse 2.8s ease-in-out infinite;
}
.ngs-ps-ar:hover{
    filter:brightness(1.08) saturate(1.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.10),
        0 -4px 32px rgba(0,181,189,0.55);
    animation-play-state:paused;
}
.ngs-ps-ar:active{
    transform:scale(0.985);
}
.ngs-ps-ar:focus-visible{
    outline:2px solid #fff;
    outline-offset:-4px;
}
.ngs-ps-ar__logo{
    width:25px;
    height:25px;
    flex:0 0 auto;
    /* SVG colors are baked in; force white. */
    filter:brightness(0) invert(1);
    transition:transform .3s ease;
    animation:ngs-ar-logo-wobble 3.4s ease-in-out infinite;
    transform-origin:center;
}
.ngs-ps-ar:hover .ngs-ps-ar__logo{
    transform:rotate(-12deg) scale(1.18);
    animation-play-state:paused;
}
.ngs-ps-ar__label{
    font-size:20px;
    color:inherit;
    position:relative;
    z-index:1;
}

/* Continuous shimmer sweep — left-to-right every 3.2s for a perpetual
   "alive" feel. Pauses on hover so the hover shine takes over. */
.ngs-ps-ar::before{
    content:"";
    position:absolute;
    top:0; left:-40%;
    width:35%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transform:skewX(-22deg);
    pointer-events:none;
    animation:ngs-ar-shimmer 3.2s ease-in-out infinite;
}
.ngs-ps-ar:hover::before{
    animation-duration:0.9s; /* shimmer accelerates on hover */
}

@keyframes ngs-ar-pulse{
    0%, 100% { box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.10), 0 -2px 24px rgba(0,181,189,0.32); }
    50%      { box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 0 rgba(0,0,0,0.10), 0 -4px 38px rgba(0,181,189,0.65); }
}
@keyframes ngs-ar-logo-wobble{
    0%, 86%, 100% { transform:rotate(0deg) scale(1); }
    90%           { transform:rotate(-8deg) scale(1.06); }
    94%           { transform:rotate(6deg)  scale(1.06); }
}
@keyframes ngs-ar-shimmer{
    0%   { left:-40%; }
    60%  { left:120%; }
    100% { left:120%; }
}
@media (prefers-reduced-motion: reduce){
    .ngs-ps-ar,
    .ngs-ps-ar__logo,
    .ngs-ps-ar::before{ animation:none; }
}

/* When hidden (no Roomvo button on page), button collapses cleanly */
.ngs-ps-ar[hidden]{display:none;}

/* ==========================================================
   7. ORDER SAMPLE — last item in the bubble list
   ========================================================== */
.ngs-ps-bubble__list .ngs-ps-bubble__order-li{
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,0.10);
}
.ngs-ps-bubble__list .ngs-ps-bubble__order{
    background:linear-gradient(135deg, rgba(0,181,189,0.20) 0%, rgba(0,118,189,0.20) 100%);
    box-shadow:inset 0 0 0 1px rgba(0,181,189,0.35);
    color:#fff;
    font-weight:700;
}
.ngs-ps-bubble__list .ngs-ps-bubble__order .ngs-icon{
    color:#fff;
}
.ngs-ps-bubble__list .ngs-ps-bubble__order:hover{
    background:linear-gradient(135deg, rgba(0,181,189,0.40) 0%, rgba(0,118,189,0.40) 100%);
    box-shadow:inset 0 0 0 1px rgba(0,181,189,0.65);
}
.ngs-ps-bubble__list .ngs-ps-bubble__order:hover .ngs-icon{
    color:#fff;
    transform:translateY(-1px);
    transition:color .25s, transform .25s;
}