/* ═══════════════════════════════════════════════════════
   EdgeEngage Social Bar Pro  –  social-bar.css  v6.1
   ═══════════════════════════════════════════════════════ */

/* ── ROOT TOKENS ── */
:root {
    --csb-accent:      #EB7723;
    --csb-text:        #ffffff;
    --csb-radius:      999px;
    --csb-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --csb-popup-bg:    #1e1e1e;
    --csb-popup-border:#2e2e2e;
    --csb-overlay:     rgba(0, 0, 0, .55);
    --csb-transition:  .2s cubic-bezier(.4,0,.2,1);
}


/* ── BAR WRAPPER ── */
.csb-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--csb-font);
    margin: 16px 0;
}


/* ── PILL BASE ── */
.csb-pill {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    height:          42px;
    padding:         0 18px;
    border-radius:   var(--csb-radius);
    background:      #EB7723;
    color:           var(--csb-text);
    font-size:       15px;
    font-weight:     600;
    line-height:     1;
    cursor:          pointer;
    border:          none;
    text-decoration: none;
    user-select:     none;
    box-shadow:      none;
    transition:      transform var(--csb-transition);
    position:        relative;
    overflow:        hidden;
}

.csb-pill:hover {
    background:  #EB7723;
    transform:   translateY(-2px);
    box-shadow:  none;
}

.csb-pill:active {
    transform: translateY(0);
}

/* ripple on click */
.csb-pill::after {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    rgba(255,255,255,.15);
    border-radius: inherit;
    opacity:       0;
    transition:    opacity .15s;
}
.csb-pill:active::after { opacity: 1; }


/* ── ICON WRAPPER ── */
.csb-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}
.csb-icon svg { display: block; }


/* ── COUNT TEXT ── */
.csb-count {
    min-width:  26px;
    text-align: left;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.csb-count.bump {
    animation: csbBump .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes csbBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}


/* ── LIKE: DEFAULT – heart is black like other icons ── */
.csb-like .csb-heart-path {
    fill: #333;
}

/* ── LIKE: LIKED STATE – only heart turns blue, bg stays orange ── */
.csb-like.is-liked {
    background: #EB7723;
}
.csb-like.is-liked:hover {
    background: #EB7723;
    box-shadow: none;
}
.csb-like.is-liked .csb-heart-path {
    fill: #0081C8 !important;
}


/* ── VIEWS: non-interactive ── */
.csb-views {
    cursor: default;
}
.csb-views:hover {
    transform:   none;
    box-shadow:  none;
    background:  #EB7723;
}

/* icon stroke colors – dark on orange pill */
.csb-views .csb-icon svg path,
.csb-share .csb-icon svg path {
    stroke: #333;
}


/* ── OVERLAY ── */
.csb-overlay {
    position:       fixed;
    inset:          0;
    background:     var(--csb-overlay);
    z-index:        9998;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .3s ease;
    backdrop-filter: blur(2px);
}
.csb-overlay.active {
    opacity:        1;
    pointer-events: auto;
}


/* ── SHARE POPUP (bottom sheet) ── */
.csb-popup {
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    z-index:       9999;
    background:    var(--csb-popup-bg);
    border-radius: 24px 24px 0 0;
    padding:       0;
    font-family:   var(--csb-font);
    transform:     translateY(110%);
    transition:    transform .35s cubic-bezier(.32,.72,0,1);
    box-shadow:    0 -8px 40px rgba(0,0,0,.5);
    max-height:    90vh;
    overflow-y:    auto;
}
.csb-popup:not([hidden]) { display: block; }
.csb-popup.active        { transform: translateY(0); }

/* drag handle */
.csb-popup-handle {
    width:         48px;
    height:        5px;
    background:    rgba(255,255,255,.2);
    border-radius: 99px;
    margin:        12px auto 0;
}

/* inner padding */
.csb-popup-inner { padding: 16px 24px 32px; }

/* header row */
.csb-popup-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}
.csb-popup-title {
    margin:         0;
    font-size:      17px;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -.01em;
}
.csb-popup-close {
    background:      rgba(255,255,255,.1);
    border:          none;
    color:           #fff;
    font-size:       20px;
    line-height:     1;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--csb-transition);
    padding:         0;
}
.csb-popup-close:hover { background: rgba(255,255,255,.2); }


/* ── SHARE GRID ── */
.csb-share-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
}
@media (min-width: 480px) {
    .csb-share-grid { grid-template-columns: repeat(6, 1fr); }
}


/* ── SHARE ITEM ── */
.csb-share-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    text-decoration: none;
    color:           rgba(255,255,255,.85);
    font-size:       11.5px;
    font-weight:     500;
    cursor:          pointer;
    background:      none;
    border:          none;
    padding:         0;
    font-family:     var(--csb-font);
    transition:      transform var(--csb-transition), color var(--csb-transition);
}
.csb-share-item:hover { transform: translateY(-3px); color: #fff; }

/* icon circle */
.csb-share-icon {
    width:           52px;
    height:          52px;
    border-radius:   16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      box-shadow var(--csb-transition);
}
.csb-share-item:hover .csb-share-icon { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.csb-share-icon svg { width: 26px; height: 26px; }

/* platform colors */
.csb-wa { background: #25d366; color: #fff; }
.csb-fb { background: #1877f2; color: #fff; }
.csb-tw { background: #000;    color: #fff; }
.csb-li { background: #0077b5; color: #fff; }
.csb-tg { background: #2aabee; color: #fff; }
.csb-cp { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.15); }


/* ── LIVE BADGE ── */
.csb-live-badge {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-top:  20px;
    font-size:   12px;
    color:       rgba(255,255,255,.5);
    font-family: var(--csb-font);
}
.csb-live-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #4caf50;
    flex-shrink:   0;
    animation:     csbPulse 1.8s ease-in-out infinite;
}
@keyframes csbPulse {
    0%,100% { opacity: 1;  transform: scale(1); }
    50%     { opacity: .5; transform: scale(1.3); }
}


/* ── ACCESSIBILITY ── */
.csb-pill:focus-visible,
.csb-share-item:focus-visible,
.csb-popup-close:focus-visible {
    outline:        2px solid #EB7723;
    outline-offset: 3px;
}