/* SupportPop — floating widget styles.
   Admin-configurable values (color, offsets, z-index) arrive as CSS custom
   properties set inline on #supportpop-widget (see includes/frontend.php);
   this file itself stays fully static so it can be cached normally. */

#supportpop-widget,
#supportpop-widget * {
    box-sizing: border-box !important;
    font-family: 'Hind Siliguri', sans-serif !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    -webkit-font-smoothing: antialiased;
}
#supportpop-widget {
    position: fixed !important;
    bottom: var(--sp-bot, 28px) !important;
    z-index: var(--sp-z, 9999) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
#supportpop-widget.sp-pos-right { right: var(--sp-side, 24px) !important; left: auto !important; }
#supportpop-widget.sp-pos-left  { left: var(--sp-side, 24px) !important; right: auto !important; }

/* Toggle button */
#supportpop-widget .sp-btn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: var(--sp-color, #c91f2d) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
    transition: transform .2s, filter .2s !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#supportpop-widget .sp-btn:hover { filter: brightness(.88) !important; transform: scale(1.07) !important; }
#supportpop-widget .sp-btn svg { width: 25px !important; height: 25px !important; fill: #fff !important; transition: transform .3s !important; display: block !important; }
#supportpop-widget .sp-btn.open svg { transform: rotate(45deg) !important; }

#supportpop-widget.sp-pulse .sp-btn::before {
    content: '' !important;
    position: absolute !important;
    width: 54px !important; height: 54px !important;
    border-radius: 50% !important;
    background: var(--sp-color, #c91f2d) !important;
    opacity: .25 !important;
    animation: sp-pulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes sp-pulse { 0%{transform:scale(1);opacity:.28;} 100%{transform:scale(1.9);opacity:0;} }

/* Panel */
#supportpop-widget .sp-panel {
    position: fixed !important;
    bottom: calc(var(--sp-bot, 28px) + 66px) !important;
    width: 272px !important;
    max-height: calc(100vh - (var(--sp-bot, 28px) + 120px)) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 36px rgba(0,0,0,.16) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: scale(.85) translateY(10px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#supportpop-widget.sp-pos-right .sp-panel { right: 0 !important; left: auto !important; margin-right: 5px !important; transform-origin: bottom right !important; }
#supportpop-widget.sp-pos-left  .sp-panel { left: 0 !important; right: auto !important; margin-left: 5px !important; transform-origin: bottom left !important; }
#supportpop-widget .sp-panel.open {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Header */
#supportpop-widget .sp-hdr {
    background: var(--sp-color, #c91f2d) !important;
    padding: 14px 16px !important;
    flex-shrink: 0 !important;
    border: none !important;
    outline: none !important;
    text-align: left !important;
    margin: 0 !important;
}
#supportpop-widget .sp-hdr-title {
    display: block !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    text-align: left !important;
}
#supportpop-widget .sp-hdr-sub {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: rgba(255,255,255,.82) !important;
    border: none !important;
    background: none !important;
    text-align: left !important;
}

/* Body */
#supportpop-widget .sp-body { overflow-y: auto !important; flex: 1 !important; background: #fff !important; }

/* Section */
#supportpop-widget .sp-sec { border-bottom: 1px solid #f0f0f0 !important; }
#supportpop-widget .sp-sec:last-child { border-bottom: none !important; }
#supportpop-widget .sp-sec-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background .15s !important;
    background: #fff !important;
    border: none !important;
    margin: 0 !important;
}
#supportpop-widget .sp-sec-hdr:hover { background: #fafafa !important; }

/* Section icon */
#supportpop-widget .sp-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#supportpop-widget .sp-icon.ph {
    background: rgba(var(--sp-r, 201), var(--sp-g, 31), var(--sp-b, 45), .12) !important;
}
#supportpop-widget .sp-icon.ph svg { stroke: var(--sp-color, #c91f2d) !important; fill: none !important; }
#supportpop-widget .sp-icon.wa { background: #e8f8ef !important; }
#supportpop-widget .sp-icon svg { width: 16px !important; height: 16px !important; display: block !important; }

/* Section label & arrow */
#supportpop-widget .sp-sec-lbl {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f0f0f !important;
    flex: 1 !important;
}
#supportpop-widget .sp-arr {
    width: 16px !important;
    height: 16px !important;
    stroke: #c0c0c0 !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    transition: transform .25s !important;
    flex-shrink: 0 !important;
    display: block !important;
}
#supportpop-widget .sp-sec-hdr.open .sp-arr { transform: rotate(180deg) !important; }

/* List */
#supportpop-widget .sp-list {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    transition: max-height .3s ease, padding .3s ease !important;
    background: #fff !important;
}
#supportpop-widget .sp-list.open { max-height: 600px !important; padding: 0 12px 12px !important; }

/* Branch label */
#supportpop-widget .sp-bl {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin: 6px 0 2px !important;
}

/* Number button */
#supportpop-widget .sp-nb {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    background: #f7f7f7 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s !important;
    border: 1px solid #eeeeee !important;
    margin: 0 !important;
}
#supportpop-widget .sp-nb:hover { background: #f0f0f0 !important; }
#supportpop-widget .sp-nb.ph:hover {
    background: rgba(var(--sp-r, 201), var(--sp-g, 31), var(--sp-b, 45), .07) !important;
    border-color: rgba(var(--sp-r, 201), var(--sp-g, 31), var(--sp-b, 45), .3) !important;
}
#supportpop-widget .sp-nb.wa:hover { background: #e8f8ef !important; border-color: #b7e5cc !important; }

/* Number info */
#supportpop-widget .sp-ni { flex: 1 !important; }
#supportpop-widget .sp-role {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #b0b0b0 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    display: block !important;
}
#supportpop-widget .sp-num {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1 !important;
    display: block !important;
}
#supportpop-widget .sp-na {
    width: 14px !important;
    height: 14px !important;
    stroke: #c0c0c0 !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    flex-shrink: 0 !important;
    display: block !important;
}

@media(max-width:480px){
    #supportpop-widget { bottom: max(14px, calc(var(--sp-bot, 28px) - 8px)) !important; }
    #supportpop-widget.sp-pos-right { right: 14px !important; left: auto !important; }
    #supportpop-widget.sp-pos-left  { left: 14px !important; right: auto !important; }
    #supportpop-widget .sp-panel { width: 250px !important; }
}