/* ── sk-sharebar.css v3 | Skymoon Infotech ──────────────────────────────────
   Upload to: /wp-content/themes/YOUR-CHILD-THEME/assets/sk-sharebar.css
   WP Rocket will minify + combine this with other stylesheets automatically.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Sharebar ───────────────────────────────────────────────────────────── */
.sk-sharebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-gap, 10px);
    align-items: center;
    /* CLS FIX: reserves button height before JS renders so no layout shift */
    min-height: var(--sb-size, 42px);
}
.sk-align-left    { justify-content: flex-start }
.sk-align-center  { justify-content: center }
.sk-align-right   { justify-content: flex-end }

.sk-prefix {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: #6b7280;
    white-space: nowrap;
}

/* Base button */
.sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--sb-size, 42px);
    width: var(--sb-size, 42px);
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    border: none;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    /* GPU-composited transforms only — no layout-triggering properties */
    transition: transform .15s, box-shadow .15s, filter .15s;
    -webkit-font-smoothing: antialiased;
    /* Prevent iOS tap highlight */
    -webkit-tap-highlight-color: transparent;
}
.sk-view-icon-text .sk-btn {
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
}
.sk-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
/* Use transform not top/margin — no layout shift on active */
.sk-btn:active { transform: translateY(0) }

/* Icon container */
.sk-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}
.sk-ico svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
    shape-rendering: geometricPrecision;
}
/* Force white fill inside brand buttons — overrides any theme reset */
.sk-style-brand .sk-btn .sk-ico svg,
.sk-style-brand .sk-btn .sk-ico svg * {
    fill: #ffffff !important;
    stroke: none !important;
}
/* Perplexity uses stroke — preserve it */
.sk-net-perplexity .sk-ico svg { fill: none !important }

.sk-txt { color: inherit; white-space: nowrap; font-size: .75rem; font-weight: 600 }

/* Brand fill variant */
.sk-style-brand .sk-btn {
    background: var(--sb-btn-bg, #64748b) !important;
    color: #ffffff !important;
    border-color: var(--sb-btn-border, #64748b) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* Outlined variant */
.sk-style-outlined .sk-btn {
    background: #ffffff;
    color: #334155;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.sk-style-outlined .sk-btn:hover {
    border-color: var(--sb-hover, #006cff);
    color: var(--sb-hover, #006cff);
}

/* States */
.sk-btn.sk-copied { opacity: .6; pointer-events: none }

@media (max-width: 767px) {
    .sk-sharebar { --sb-size: 40px; --sb-gap: 8px }
    .sk-ico svg  { width: 16px; height: 16px }
}


/* ── Ask AI ─────────────────────────────────────────────────────────────── */

/* FIX 7: <span> element → already inline, no display override needed */
.sk-ask-ai {
    position: relative;
    /* inline-flex keeps trigger + hidden menu together without block wrapping */
    display: inline-flex;
    vertical-align: middle;
}

.sk-askai-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--askai-h, 40px);
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #1e293b;
    border: 1.5px solid #e2e8f0;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sk-askai-trigger:hover {
    border-color: #006cff;
    box-shadow: 0 0 0 3px rgba(0, 108, 255, .1);
}
.sk-askai-trigger[aria-expanded="true"] {
    border-color: #006cff;
    background: #f0f6ff;
    box-shadow: 0 0 0 3px rgba(0, 108, 255, .12);
}

.sk-askai-spark { display: flex }
.sk-askai-spark svg { fill: #006cff }

.sk-askai-chevron {
    display: flex;
    color: #94a3b8;
    transition: transform .2s;
}
.sk-askai-trigger[aria-expanded="true"] .sk-askai-chevron {
    transform: rotate(180deg);
}

/* FIX 4: position:absolute — opens OVER content, zero layout shift */
.sk-askai-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
    padding: 5px;
    /* High z-index to float over Elementor sections */
    z-index: 99999;
    /* Use opacity+transform — GPU composited, no layout shift */
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
/* hidden attr — JS removes it, then CSS transition kicks in */
.sk-askai-menu:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Keep hidden working — override display:block from :not([hidden]) */
.sk-askai-menu[hidden] {
    display: none !important;
}

/* Flip to right-align if near viewport edge */
.sk-ask-ai.sk-align-right .sk-askai-menu {
    left: auto;
    right: 0;
}

.sk-askai-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: #1e293b;
    font-size: .82rem;
    font-weight: 500;
    transition: background .12s;
    cursor: pointer;
}
.sk-askai-item:hover { background: #f1f5f9 }
.sk-askai-item:hover .sk-askai-name { color: var(--item-color) }
.sk-askai-item:hover .sk-askai-ico svg { fill: var(--item-color) }

.sk-askai-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.sk-askai-ico svg {
    width: 16px;
    height: 16px;
    fill: var(--item-color, #64748b);
    shape-rendering: geometricPrecision;
    transition: fill .12s;
}
.sk-askai-name { flex: 1; line-height: 1 }

.sk-askai-arrow {
    opacity: 0;
    color: #94a3b8;
    flex-shrink: 0;
    transition: opacity .12s, transform .12s;
}
.sk-askai-item:hover .sk-askai-arrow {
    opacity: 1;
    transform: translate(1px, -1px);
}