/* ==========================================================
   KIAN DEZH - INSTAGRAM LIVE
   Path:
   KianDezh.Web\wwwroot\assets\css\instagram-live.css
   ========================================================== */

.kd-instagram-page {
    position: relative;
    background: #ffffff;
}

/* ==========================================================
   LIVE FEED BASE
   ========================================================== */

.kd-instagram-content {
    min-width: 0;
}

.kd-posts-grid,
.kd-phone-grid {
    position: relative;
}

.kd-posts-grid[hidden],
.kd-phone-grid[hidden] {
    display: none !important;
}

.kd-instagram-status {
    box-sizing: border-box;
}

/* ==========================================================
   FEED MEDIA
   ========================================================== */

.kd-feed-post-cover,
.kd-phone-post {
    position: relative;
    overflow: hidden;
    background: #f1f1f1;
}

.kd-feed-post-cover img,
.kd-phone-post img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.kd-feed-post-cover button,
.kd-phone-post button {
    font: inherit;
}

/* ==========================================================
   TYPE BADGE
   ========================================================== */

.kd-instagram-type-badge {
    pointer-events: none;
}

/* ==========================================================
   LOADING PLACEHOLDER
   ========================================================== */

.kd-posts-grid:empty::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    min-height: 280px;
    border-radius: 22px;

    background:
        linear-gradient(
            110deg,
            rgba(245, 245, 245, 0.96) 8%,
            rgba(236, 236, 236, 0.96) 18%,
            rgba(245, 245, 245, 0.96) 33%
        );

    background-size: 220% 100%;

    animation:
        kdInstagramSkeleton
        1.4s
        linear
        infinite;
}

@keyframes kdInstagramSkeleton {
    to {
        background-position-x: -220%;
    }
}

/* ==========================================================
   EXTERNAL LIVE PROVIDER
   ========================================================== */

.kd-instagram-external-widget {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}

.kd-instagram-external-widget iframe {
    display: block;
    width: 100%;
    border: 0;
}

.kd-instagram-page.is-external-live
.kd-posts-grid {
    display: none !important;
}

.kd-instagram-page.is-external-live
.kd-instagram-external-widget {
    display: block;
}

/* ==========================================================
   PHONE PROFILE
   ========================================================== */

.kd-phone {
    position: relative;
}

.kd-phone-screen {
    position: relative;
}

.kd-ig-profile-scroll {
    overscroll-behavior: contain;
}

.kd-phone-grid {
    min-height: 90px;
}

.kd-phone-post {
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* ==========================================================
   FEED BUTTON RESET
   ========================================================== */

.kd-feed-post-cover {
    width: 100%;
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}

/* ==========================================================
   MODAL
   ========================================================== */

.kd-instagram-modal {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease;
}

.kd-instagram-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.kd-instagram-modal-dialog {
    transform: translateY(18px) scale(0.985);

    transition:
        transform
        0.32s
        cubic-bezier(0.16, 1, 0.3, 1);
}

.kd-instagram-modal.is-open
.kd-instagram-modal-dialog {
    transform: translateY(0) scale(1);
}

.kd-instagram-modal-backdrop {
    cursor: pointer;
}

/* ==========================================================
   MODAL MEDIA
   ========================================================== */

.kd-modal-post-media {
    overflow: hidden;
}

.kd-modal-post-media img,
.kd-modal-post-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================
   MODAL SCROLL
   ========================================================== */

.kd-modal-comments,
.kd-modal-caption {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(162, 118, 49, 0.35)
        transparent;
}

.kd-modal-comments::-webkit-scrollbar,
.kd-modal-caption::-webkit-scrollbar {
    width: 6px;
}

.kd-modal-comments::-webkit-scrollbar-thumb,
.kd-modal-caption::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(162, 118, 49, 0.32);
}

/* ==========================================================
   ERROR MEDIA
   ========================================================== */

.kd-instagram-media-error {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #777777;
    background: #f5f5f5;
    text-align: center;
    font-size: 12px;
    font-weight: 850;
}

/* ==========================================================
   PROFILE IMAGE SAFETY
   ========================================================== */

[data-instagram-profile-image] {
    background: #ffffff;
}

/* ==========================================================
   VIDEO / REEL INDICATOR
   ========================================================== */

.kd-instagram-type-badge i {
    line-height: 1;
}

/* ==========================================================
   EXTERNAL LINK
   ========================================================== */

.kd-modal-instagram-link {
    cursor: pointer;
}

/* ==========================================================
   LIVE STATUS
   ========================================================== */

.kd-instagram-status.is-loading::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-left: 8px;
    border-radius: 50%;
    background: #d9a842;

    animation:
        kdInstagramPulse
        1.2s
        ease-in-out
        infinite;
}

@keyframes kdInstagramPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {

    .kd-instagram-external-widget iframe {
        min-height: 780px;
    }
}

@media (max-width: 760px) {

    .kd-instagram-modal {
        padding: 12px;
    }

    .kd-instagram-modal-dialog {
        width: 100%;
    }

    .kd-posts-grid:empty::before {
        min-height: 220px;
        border-radius: 16px;
    }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .kd-instagram-modal,
    .kd-instagram-modal-dialog,
    .kd-instagram-status.is-loading::before,
    .kd-posts-grid:empty::before {
        animation: none !important;
        transition: none !important;
    }
}