/* kiff-share.css — v3 (فشرده) */

/* ═══════════════════════════════════════════════════════════════
   دکمه اصلی — کوچک و ساده
   ═══════════════════════════════════════════════════════════════ */
.modal-box .share-btn,
#newsModal .share-btn,
#shareBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background: rgba(212,175,55,.08) !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all .2s !important;
}
.modal-box .share-btn:hover,
#shareBtn:hover {
    background: rgba(212,175,55,.18) !important;
    border-color: #D4AF37 !important;
}
.modal-box .share-btn > span,
.modal-box .share-btn > i,
.modal-box .share-btn > svg {
    display: none !important;
}
.modal-box .share-btn::before,
#shareBtn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='10.51' x2='15.42' y2='6.49'/%3E%3Cline x1='8.59' y1='13.49' x2='15.42' y2='17.51'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 2 !important;
    text-indent: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   پاپ‌آور — Grid افقی فشرده
   ═══════════════════════════════════════════════════════════════ */
.modal-box .share-dropdown,
#newsModal .share-dropdown,
#shareDropdown {
    display: none !important;
    position: fixed !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
    margin: 0 !important;
    background: linear-gradient(145deg, #223142, #1a2632) !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 100000 !important;
    font-size: initial !important;
    line-height: normal !important;
    color: #E8EDF2 !important;
    width: 208px !important;
    min-width: 208px !important;
    max-width: 208px !important;
    transform: none !important;
    bottom: auto !important; top: auto !important; left: auto !important; right: auto !important;
}
.modal-box .share-dropdown.open,
#newsModal .share-dropdown.open,
#shareDropdown.open {
    display: grid !important;
    animation: kiffSharePop .18s cubic-bezier(.2,.9,.3,1.2) !important;
}

@keyframes kiffSharePop {
    0%   { opacity: 0; transform: scale(.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* فلش */
.modal-box .share-dropdown::after,
#shareDropdown::after {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    background: #1a2632 !important;
    border: 1px solid rgba(212,175,55,.4) !important;
    transform: rotate(45deg) !important;
    z-index: -1 !important;
}
.modal-box .share-dropdown:not(.below)::after,
#shareDropdown:not(.below)::after {
    bottom: -7px !important;
    left: 50% !important;
    margin-left: -6px !important;
    border-top: 0 !important;
    border-left: 0 !important;
}
.modal-box .share-dropdown.below::after,
#shareDropdown.below::after {
    top: -7px !important;
    left: 50% !important;
    margin-left: -6px !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   هر آیکون — کوچک، مربعی با دایره رنگی
   ═══════════════════════════════════════════════════════════════ */
.modal-box .share-dropdown > a,
#shareDropdown > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 5px 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #9AA5B1 !important;
    font-family: inherit !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background .15s !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    float: none !important;
}
.modal-box .share-dropdown > a:hover,
#shareDropdown > a:hover {
    background: rgba(255,255,255,.06) !important;
}

.modal-box .share-dropdown > a .icon-wrap,
#shareDropdown > a .icon-wrap,
.modal-box .share-dropdown > a > .kiff-share-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #333 !important;
    flex-shrink: 0 !important;
    transition: transform .15s !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal-box .share-dropdown > a:hover .icon-wrap,
#shareDropdown > a:hover .icon-wrap {
    transform: scale(1.08) !important;
}
.modal-box .share-dropdown > a .icon-wrap svg,
#shareDropdown > a .icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    color: #fff !important;
    fill: #fff !important;
    display: block !important;
    line-height: 1 !important;
}

.modal-box .share-dropdown > a .label-text,
#shareDropdown > a .label-text {
    display: block !important;
    font-size: .58rem !important;
    color: #9AA5B1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-align: center !important;
    margin-top: 2px !important;
}

/* رنگ‌ها */
#shareDropdown > a[data-platform="telegram"] .icon-wrap { background: linear-gradient(135deg, #2AABEE, #229ED9) !important; }
#shareDropdown > a[data-platform="whatsapp"] .icon-wrap { background: linear-gradient(135deg, #25D366, #128C7E) !important; }
#shareDropdown > a[data-platform="facebook"] .icon-wrap { background: linear-gradient(135deg, #1877F2, #0C5FCC) !important; }
#shareDropdown > a[data-platform="instagram"] .icon-wrap { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%) !important; }
#shareDropdown > a[data-platform="bale"] .icon-wrap { background: linear-gradient(135deg, #1E88E5, #1565C0) !important; }
#shareDropdown > a[data-platform="eitaa"] .icon-wrap { background: linear-gradient(135deg, #E91E63, #AD1457) !important; }

/* ═══════════════════════════════════════════════════════════════
   موبایل — Bottom Sheet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .modal-box .share-btn, #shareBtn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }
    .modal-box .share-btn::before, #shareBtn::before {
        width: 17px !important;
        height: 17px !important;
    }

    /* پاپ‌آور به صورت bottom sheet */
    .modal-box .share-dropdown,
    #shareDropdown {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 14px 12px !important;
        border-radius: 20px !important;
        gap: 8px !important;
    }
    #shareDropdown::after { display: none !important; }
}