/* Share UI — modal + toast.
 *
 * Enqueued together with share.js (ZNO_Points_Module::share_assets), so these styles are present on
 * EVERY page the Share modal can open on. They previously lived only in member.css, but share.js is
 * loaded site-wide, so on public pages that load public.css but NOT member.css (coupon list,
 * merchant directory, single event/coupon) the modal had no CSS: .zno-share-dialog lost its
 * max-width and the 1fr-1fr link grid spread across the whole viewport — the reported "container
 * out of position".
 *
 * Self-contained on purpose: every custom property carries a literal fallback (the public.css base
 * values), so the modal renders correctly even with no other stylesheet on the page. Where the theme
 * variables ARE defined they win, so the modal still matches the surrounding dashboard.
 */

.zno-share-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s ease; }
.zno-share-modal.is-open { opacity: 1; }
.zno-share-scrim { position: absolute; inset: 0; background: rgba(15,17,26,.55); }
.zno-share-dialog { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--zno-card, #fff); color: var(--zno-text, #111827);
    border: 1px solid var(--zno-border, #e5e7eb); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 16px 18px; }
.zno-share-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.zno-share-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.zno-share-x { border: 0; background: none; cursor: pointer; color: var(--zno-muted, #6b7280); padding: 4px; border-radius: 8px; }
.zno-share-x:hover { color: var(--zno-text, #111827); }
.zno-share-copyrow { display: flex; gap: 8px; margin-bottom: 12px; }
.zno-share-url { flex: 1 1 auto; min-width: 0; border: 1px solid var(--zno-border, #e5e7eb); border-radius: 10px; padding: 9px 11px; font: inherit; background: var(--zno-bg, #fff); color: var(--zno-text, #111827); }
.zno-share-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zno-share-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--zno-border, #e5e7eb); border-radius: 10px;
    background: var(--zno-card, #fff); color: var(--zno-text, #111827); text-decoration: none; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.zno-share-link:hover { border-color: var(--zno-primary, #4f46e5); color: var(--zno-primary, #4f46e5); }
.zno-share-lbl { flex: 1 1 auto; }
.zno-share-help { flex: 1 1 100%; font-weight: 400; font-size: 11px; color: var(--zno-muted, #6b7280); margin-left: 26px; }
@media (max-width: 480px) { .zno-share-links { grid-template-columns: 1fr; } }

.zno-share-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); z-index: 99999; max-width: 90vw; padding: 12px 18px; border-radius: 10px; background: #111827; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.zno-share-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.zno-share-toast.is-error { background: #b42318; }