/** * Product page "Share" popover styles. * * Matches speedcar123.com's product-detail share popover exactly * (confirmed live via its actual rendered DOM and click behavior): a small * bordered square toggle button, a white rounded popover with WhatsApp/ * Telegram icons + "Copy link", and a top-center "Copy successful" toast. * * Positioned `position: absolute` within `.wcvm-product-share` rather than * portaled to `` (contrast the Vehicle Filter widget's dropdown, * `vehicle-filter.css`) — there is no confirmed stacking-context trap here * yet, since the real single-product template can't be inspected live * while chinaspeedcar.com's store pages are in WooCommerce's "Coming Soon" * mode. If clipping is reported once visible, apply the same portal * pattern documented in TROUBLESHOOTING.md. */ .wcvm-product-share { --wcvm-share-border: #e2e2e2; --wcvm-share-icon: #b6b6b6; position: relative; display: inline-flex; } .wcvm-product-share__toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var( --wcvm-share-border ); border-radius: 6px; background: #fff; color: var( --wcvm-share-icon ); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .wcvm-product-share__toggle:hover, .wcvm-product-share__toggle[aria-expanded="true"] { color: #333; border-color: #333; } .wcvm-product-share__panel { position: absolute; top: calc( 100% + 10px ); right: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 ); white-space: nowrap; } .wcvm-product-share__panel[hidden] { display: none; } .wcvm-product-share__item { display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; cursor: pointer; color: #333; font-size: 14px; font-weight: 500; } .wcvm-product-share__item:not( :last-child )::after { content: ''; display: inline-block; width: 1px; height: 18px; margin-left: 10px; background: var( --wcvm-share-border ); } .wcvm-product-share__item--copy:hover { color: #2563eb; } /* "Copy successful" toast */ .wcvm-product-share__toast { position: fixed; top: 16px; left: 50%; z-index: 100001; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: #fff; border: 1px solid #d1fae5; border-radius: 8px; box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.15 ); font-size: 14px; color: #333; transform: translate( -50%, -12px ); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .wcvm-product-share__toast[hidden] { display: none; } .wcvm-product-share__toast.is-visible { transform: translate( -50%, 0 ); opacity: 1; } @media ( max-width: 480px ) { .wcvm-product-share__panel { right: auto; left: 50%; transform: translateX( -50% ); } }