/* ==========================================================================
   CasinoDrop Social — the share popover (assets/js/social-share.js) and the
   Share pill that opens it (cds_social_share_button / CDSocial.shareButton).
   inc/social.php enqueues this file on every social page; the script loads on
   the first Share click and appends the popover, its scrim and its toast to
   #cdSocial (.crx.scx). Pattern: the on-chain board's share popover, in the
   section's violet accent. A bottom sheet at 560px or narrower.
   Type floor 12px (16px in the phone textarea, so iOS does not zoom).
   Tap targets 44px or more under 760px.
   ========================================================================== */

.scx-share-pop{position:fixed;z-index:9995;left:12px;top:12px;width:400px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 16px;border-radius:16px;background:var(--card,#1B2030);border:1px solid var(--hair-2,rgba(255,255,255,.14));box-shadow:0 28px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(167,139,250,.16);color:var(--ink,#ECEEF6);font-size:13px;line-height:1.45;text-align:left}
.scx-share-pop[hidden],.scx-share-pop [hidden],.scx-share-scrim[hidden]{display:none!important}
.scx-share-pop:focus{outline:none}
.scx-share-pop:focus-visible{box-shadow:0 28px 70px -20px rgba(0,0,0,.85),0 0 0 2px var(--scx-accent,#A78BFA)}
.scx-share-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scx .scx-share-head h2{margin:0;font:700 16px/1.3 var(--font-display,"Sora","Inter",sans-serif);letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scx .scx-share-x{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;margin-right:-8px;border-radius:50%;font-size:22px;line-height:1;color:var(--ink-3,#A9AFC4)}
.scx .scx-share-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.scx .scx-share-x:focus-visible{outline:2px solid var(--scx-accent,#A78BFA);outline-offset:1px}
.scx-share-sub{margin:0 0 10px;color:var(--ink-3,#A9AFC4);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scx-share-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#12151F;border:1px solid var(--hair-2,rgba(255,255,255,.14))}
.scx-share-frame.is-portrait{aspect-ratio:4/5;max-height:44vh;max-height:44dvh;margin:0 auto}
.scx-share-preview{display:block;width:100%;height:100%}
.scx-share-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:14px 18px;background:#12151F;color:var(--ink-3,#A9AFC4);font-size:12.5px;text-align:center}
.scx .scx-share-flag{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:rgba(123,77,242,.08);border:1px solid rgba(123,77,242,.22);color:var(--ink-2,#CDD2E1);font-size:12.5px;line-height:1.45}
.scx .scx-share-flag .scx-sample{margin-top:-1px}
.scx-share-text{display:grid;gap:5px;margin:12px 0}
.scx-share-text span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#A9AFC4)}
.scx .scx-share-text textarea{display:block;width:100%;min-height:0;height:auto;margin:0;padding:8px 10px;border-radius:10px;border:1px solid var(--hair-2,rgba(255,255,255,.14));background:var(--card-2,#212739);color:var(--ink,#ECEEF6);font:13px/1.5 var(--font-body,"Inter",sans-serif);resize:vertical;word-break:break-word}
.scx .scx-share-text textarea:focus-visible{outline:2px solid var(--scx-accent,#A78BFA);outline-offset:1px}
.scx-share-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.scx .scx-share-act{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;min-width:0;padding:0 10px;border-radius:10px;border:1px solid var(--hair-2,rgba(255,255,255,.14));background:var(--card-2,#212739);color:var(--ink,#ECEEF6);font-size:13px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.scx .scx-share-act span{overflow:hidden;text-overflow:ellipsis}
.scx .scx-share-act svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scx .scx-share-act svg.is-fill{fill:currentColor;stroke:none}
.scx .scx-share-act:hover{border-color:rgba(167,139,250,.55);background:rgba(123,77,242,.1);color:#fff}
.scx .scx-share-act:focus-visible{outline:2px solid var(--scx-accent,#A78BFA);outline-offset:1px}
.scx .scx-share-act.is-native,.scx .scx-share-act[data-scx-share-act="download"]{grid-column:1/-1}
.scx .scx-share-act.is-native{border-color:transparent;background:var(--grad-aa,linear-gradient(115deg,#157A9C,#1F63B8 45%,#6A3DE0));color:#fff}
.scx .scx-share-act.is-native:hover{filter:brightness(1.08)}
.scx .scx-share-act[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.scx .scx-share-act[data-scx-share-act="copy_image"][hidden]+.scx-share-act{grid-column:1/-1}
.scx-share-note{margin:10px 0 0;color:var(--gold,#F5C451);font-size:12px;line-height:1.45}
.scx-share-scrim{position:fixed;inset:0;z-index:9994;background:rgba(8,10,16,.62)}

/* the bottom sheet (phones) */
.scx-share-pop.is-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:88vh;max-height:88dvh;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;border-bottom:0}
.scx-share-pop.is-sheet::before{content:"";display:block;width:40px;height:4px;margin:-4px auto 10px;border-radius:999px;background:var(--hair-2,rgba(255,255,255,.14))}
.scx .scx-share-pop.is-sheet .scx-share-act{height:48px;font-size:14px}
.scx .scx-share-pop.is-sheet .scx-share-x{width:48px;height:48px;margin-right:-10px}
.scx .scx-share-pop.is-sheet .scx-share-text textarea{font-size:16px}
.scx-share-pop.is-sheet .scx-share-frame.is-portrait{max-height:30vh;max-height:30dvh}
.scx-share-pop.is-sheet .scx-share-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.scx-share-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:9996;max-width:calc(100vw - 32px);margin:0;padding:10px 16px;border-radius:999px;background:#0F1220;border:1px solid rgba(167,139,250,.5);color:var(--ink,#ECEEF6);font-size:13px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
.scx-share-toast.is-on{opacity:1;transform:translate(-50%,0)}
.scx-share-toast:empty{display:none}

/* the Share buttons social.js reveals: busy while the module loads, 44px on phones */
.scx .scx-share-btn{-webkit-tap-highlight-color:transparent}
.scx .scx-share-btn[aria-busy="true"]{opacity:.6;cursor:progress}
.scx .scx-share-btn[aria-expanded="true"]{color:#fff;border-color:rgba(167,139,250,.6);background:rgba(123,77,242,.14)}
/* the Share pill (cds_social_share_button's default): the /sports-odds/ Share button (.sov-share-btn) at the 12px floor,
   first in a card's foot; cyan on hover and while its popover is open; beside a section head's small button it takes
   that button's height; 44px tall on phones */
.scx .scx-share-btn.is-pill{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;height:28px;min-height:0;min-width:0;margin:0;padding:0 11px 0 9px;border-radius:999px;border:1px solid var(--hair-2,rgba(255,255,255,.14));background:var(--card-2,#212739);color:var(--ink-2,#CDD2E1);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.scx .scx-share-btn.is-pill .scx-g{width:13px;height:13px;flex:0 0 13px;stroke-width:2.2}
.scx .scx-share-btn.is-pill:hover,.scx .scx-share-btn.is-pill[aria-expanded="true"]{color:#fff;border-color:rgba(79,199,234,.55);background:rgba(79,199,234,.1)}
.scx .scx-share-btn.is-pill:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.scx .crx-sec-head .scx-share-btn.is-pill{height:31px;padding:0 13px 0 11px;font-size:13px}
@media (max-width:760px){
	.scx .crx-btn.scx-share-btn{min-height:44px}
	.scx .scx-share-btn.is-pill,.scx .crx-sec-head .scx-share-btn.is-pill{height:44px;padding:0 14px 0 12px}
}
/* a story card's foot keeps one line at 390px (Share, two reactions, comments, receipts, Follow need ~328px of 324px with
   the word): under 420px its pill keeps the arrow and drops the word, which its aria-label still says */
@media (max-width:420px){
	.scx .scx-item-foot .scx-share-btn.is-pill{justify-content:center;min-width:44px;padding:0 13px}
	.scx .scx-item-foot .scx-share-btn.is-pill span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

@media (prefers-reduced-motion:reduce){
	.scx .scx-share-act,.scx-share-toast,.scx .scx-share-btn.is-pill{transition:none}
}