/**
 * Mage2_Sharing — share button + popover styles.
 *
 * Explicit CSS (not relying on Tailwind arbitrary values) because module
 * templates may render in pages where the theme's Tailwind purge does not
 * scan our PHTML — same lesson learned in Mage2_BuildPc (grid + modal width).
 */

.buildpc-share-button-wrap {
    position: relative;
    display: inline-block;
}

.buildpc-share-popover {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin-top: 0.5rem;
    min-width: 16rem;
    max-width: 22rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    padding: 0.75rem;
}

/* Buildpc theme overlay support — these match the data-buildpc-theme attribute
 * convention used by the BuildPc module. If sharing is rendered inside a
 * .buildpc-shell[data-buildpc-theme="dark"|"neon"|"neon_retro"] subtree, the
 * popover should pick up the theme colors automatically. */
.buildpc-shell[data-buildpc-theme="dark"] .buildpc-share-popover {
    background-color: #3b3b3b;
    border-color: #555555;
    color: #ffffff;
}
.buildpc-shell[data-buildpc-theme="dark"] .buildpc-share-popover input[type="text"] {
    background-color: #2f2f2f;
    color: #ffffff;
    border-color: #555555;
}

.buildpc-shell[data-buildpc-theme="neon"] .buildpc-share-popover {
    background-color: #15082a;
    border-color: #4c1d95;
    color: #e9d5ff;
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.10), 0 8px 24px rgba(0, 240, 255, 0.08);
}
.buildpc-shell[data-buildpc-theme="neon"] .buildpc-share-popover input[type="text"] {
    background-color: #1f0d3a;
    color: #e9d5ff;
    border-color: #4c1d95;
}

.buildpc-shell[data-buildpc-theme="neon_retro"] .buildpc-share-popover {
    background-color: #4F200D;
    border-color: #7a3a1f;
    color: #F6F1E9;
    box-shadow: 0 0 0 1px rgba(255, 132, 0, 0.10), 0 8px 24px rgba(255, 132, 0, 0.10);
}
.buildpc-shell[data-buildpc-theme="neon_retro"] .buildpc-share-popover input[type="text"] {
    background-color: #5e2913;
    color: #F6F1E9;
    border-color: #7a3a1f;
}

/* Dark - Matte Black: monochrome luxury — Shoe Wax surface, Clouded Vision text,
 * subtle off-white inner glow (no harsh box-shadow — matte aesthetic). */
.buildpc-shell[data-buildpc-theme="dark_matte_black"] .buildpc-share-popover {
    background-color: #2B2B2B;
    border-color: #434343;
    color: #D1D1D1;
    box-shadow: 0 0 0 1px rgba(244, 244, 244, 0.06), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.buildpc-shell[data-buildpc-theme="dark_matte_black"] .buildpc-share-popover input[type="text"] {
    background-color: #1f1f1f;
    color: #D1D1D1;
    border-color: #434343;
}

/* Defensive: ensure the popover does not overflow the viewport on mobile */
@media (max-width: 480px) {
    .buildpc-share-popover {
        right: 0;
        left: auto;
        max-width: calc(100vw - 1rem);
    }
}

/* Icon-only variant — used on PDP next to the wishlist heart. Matches the
 * wishlist's visual weight (round, padded, neutral hover) so the two share
 * the same row without the share looking heavier. Explicit CSS because the
 * Tailwind purge of the host theme may not scan our PHTML. */
.buildpc-share-button--icon {
    padding: 0.5rem;
    border-radius: 9999px;
    margin-left: 1rem;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
.buildpc-share-button--icon:hover {
    background-color: #f3f4f6;
}