/* Social Media Share BODY widget (HWC-3417) — the widget the FEE Add Element palette drops on an
 * ordinary page. Scoped to .widget-socialMediaShare, the wrapper class layouts/_widget.gsp derives
 * from the widget type.
 *
 * Why this file exists rather than adding to an existing stylesheet: the bar has to look right in the
 * FEE editor canvas (layouts/sitepagex.gsp), which loads NEITHER css/site/site-base-noncritical.css
 * NOR css/site/module/product-details.css — the two site stylesheets that already carry share-bar
 * rules. This file is therefore registered in BOTH ResourceList.fixedSiteNoCriticalCss (site) and
 * ResourceList.fixedFrontEndEditorCss (canvas).
 *
 * It repeats a few rules that product-details.css also defines for the product page's own share bar.
 * That duplication is deliberate and temporary: moving them would make an already-shipping render
 * depend on this newly registered file, which a production upgrade only picks up once the minified
 * bundles are regenerated. The follow-up that unifies the two bars removes the copy.
 *
 * Values are kept identical to product-details.css so the two bars stay visually the same.
 */

/* Layout. The H/V class sits on the wrapper; site-base-noncritical.css carries the matching
   per-item display rules for the site, and they are repeated here for the canvas. */
.widget-socialMediaShare .social-media-share-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
.widget-socialMediaShare .social-media-share-wrapper.vertical .social-media-share-bar { flex-direction: column; align-items: flex-start; }
.widget-socialMediaShare .horizontal .social-media-share { display: inline-block; }
.widget-socialMediaShare .vertical .social-media-share { display: block; margin-bottom: 3px; }

/* Chip + glyph */
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a { text-decoration: none; border: 0; width: 32px; height: 32px; padding: 2px; color: #fff; border-radius: 50%; background-color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a:hover { box-shadow: 0 0 1px 1px rgba(0,0,0,.1); opacity: .9; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg { fill: currentColor; width: 26px; height: 26px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-twitterx { width: 17px; height: 17px; }

/* Brand colours — only the platforms this widget offers
   (NamedConstants.SOCIAL_MEDIA_SHARE_PLATFORMS). */
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-share-icon { background-color: #3B5998; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.twitter-share-icon { background-color: #000; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.linkedin-share-icon { background: #007bb5; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.email-share-icon { background: #008DF2; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.reddit-share-icon { background: #ff5700; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.print-share-icon { background: #4b5563; }
/* Messenger keeps its own per-path colours, so it gets no chip background — matching how the product
   share bar renders the same mark. The class name is the legacy one the mark has always used. */
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-messenger-share-icon { background-color: transparent; width: auto; height: auto; padding: 0; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-messenger-share-icon svg { width: 31px; height: 31px; }

/* Shown only when every platform is switched off, and only in the editor (the GSP gates it) —
   without it the widget collapses to a zero-height box that cannot be selected or re-configured. */
.widget-socialMediaShare .social-media-share-placeholder { font-size: 13px; color: #6b7280; }