/* Share buttons (Telegram, WhatsApp, Instagram, Bale, Eitaa) – resources/views/web/default/includes/share_networks.blade.php
   Same look as the footer social buttons: dark tile, thin border, the footer's colour icons. */
.psy-share { display: grid; gap: 10px; width: 100%; direction: rtl; }
.psy-share--grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.psy-share--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; }

.psy-share__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 0; padding: 10px 4px; margin: 0;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px;
    color: #A0A0AB; font: inherit; line-height: 1.3; text-decoration: none !important; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.psy-share__item:hover, .psy-share__item:focus-visible {
    background: rgba(110, 86, 207, 0.16); border-color: rgba(110, 86, 207, 0.35); color: #F0F0F2; outline: none;
}
.psy-share__item:active { transform: scale(.96); }
.psy-share__icon { display: inline-flex; width: 32px; height: 32px; flex: none; }
.psy-share__icon img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; border: 0; border-radius: 0; }
.psy-share__label { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.psy-share--inline .psy-share__item { width: 36px; height: 36px; padding: 0; border-radius: 8px; }
.psy-share--inline .psy-share__icon { width: 20px; height: 20px; opacity: .85; }
.psy-share--inline .psy-share__item:hover .psy-share__icon { opacity: 1; }

/* phones: 3 + 2 tiles so the names fit */
@media (max-width: 480px) {
    .psy-share--grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .psy-share--grid .psy-share__item { flex: 0 0 calc((100% - 16px) / 3); }
}

/* The public layout has no dark SweetAlert theme (the panel has one): the share modals are dark like the
   rest of the site, so their title, text and close button are readable. */
.swal2-popup:has(.psy-share) { background: #141418 !important; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px !important; color: #F0F0F2; }
.swal2-popup:has(.psy-share) h3 { color: #F0F0F2 !important; }
.swal2-popup:has(.psy-share) .close-swl { color: #F0F0F2; }