/* ==========================================================
   KIAN DEZH - INSTAGRAM FINAL V2
   Fixed Phone + Scrollable Feed + Desktop 3x3 Showcase

   Path:
   C:\Users\Victus\Documents\Projects\KianDezh\KianDezh-Web\
   KianDezh.Web\wwwroot\assets\css\instagram-final-v2.css
   ========================================================== */

.kd-instagram-page {
    --kd-instagram-gold: #d9a842;
    --kd-instagram-gold-dark: #a27631;
    --kd-instagram-text: #111111;
    --kd-instagram-muted: #707070;
    --kd-instagram-line: rgba(17, 17, 17, 0.08);
    --kd-instagram-soft: #f8f6f1;
    --kd-instagram-card: #ffffff;
    position: relative;
    background: #ffffff;
}

/* ==========================================================
   MAIN LAYOUT
   ========================================================== */

.kd-instagram-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: 38px !important;
    align-items: start !important;
}

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

.kd-instagram-phone-wrap {
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
    height: auto !important;
}

/* ==========================================================
   PHONE - FIXED SIZE
   ========================================================== */

.kd-phone {
    width: 390px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    border-radius: 46px !important;
    background: linear-gradient( 145deg, rgba(20, 18, 15, 0.99), rgba(52, 39, 18, 0.98) ) !important;
    box-shadow: 0 30px 86px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/*
   مهم:
   ارتفاع موبایل دیگر به ارتفاع پست‌ها وابسته نیست.
   حتی Script قبلی هم نمی‌تواند آن را تغییر دهد.
*/

.kd-phone-screen {
    position: relative !important;
    width: 100% !important;
    height: 700px !important;
    min-height: 700px !important;
    max-height: 700px !important;
    overflow: hidden !important;
    border-radius: 36px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   PHONE STATUS BAR
   ========================================================== */

.kd-phone-status {
    flex: 0 0 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    direction: ltr !important;
}

.kd-phone-island {
    width: 78px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: #111111 !important;
}

.kd-phone-icons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

/* ==========================================================
   INSTAGRAM TOP BAR
   ========================================================== */

.kd-ig-topbar {
    flex: 0 0 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
}

/* ==========================================================
   PHONE SCROLL AREA
   ========================================================== */

/*
   فقط این قسمت اسکرول می‌شود.
   خود قاب موبایل هیچ‌وقت بلندتر نمی‌شود.
*/

.kd-ig-profile-scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(162, 118, 49, 0.42) transparent !important;
    background: #ffffff !important;
}

    .kd-ig-profile-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .kd-ig-profile-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .kd-ig-profile-scroll::-webkit-scrollbar-thumb {
        background: rgba(162, 118, 49, 0.35);
        border-radius: 999px;
    }

/* ==========================================================
   PHONE BOTTOM NAV
   ========================================================== */

.kd-phone-nav {
    flex: 0 0 50px !important;
    height: 50px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 20px !important;
}

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

.kd-ig-profile {
    width: 100% !important;
    min-height: 100% !important;
    padding-bottom: 16px !important;
    background: #ffffff !important;
}

.kd-ig-profile-row {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 15px !important;
    align-items: center !important;
    padding: 18px 15px 10px !important;
}

.kd-ig-avatar {
    width: 86px !important;
    height: 86px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    background: conic-gradient( from 180deg, #d9a842, #9c6116, #f4d38a, #d9a842 ) !important;
}

    .kd-ig-avatar img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: contain !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        border-radius: 50% !important;
        background: #ffffff !important;
    }

/* ==========================================================
   PHONE GRID - NORMAL / LOCAL FEED
   ========================================================== */

.kd-phone-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 0 0 18px !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
}

.kd-phone-post {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #eeeeee !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

    .kd-phone-post img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

/* ==========================================================
   PHONE - SOCIABLEKIT LIVE FEED
   ========================================================== */

/*
   وقتی Feed خارجی داخل موبایل است، Grid والد
   دیگر نباید خودش سه ستون بسازد.
   خود SociableKIT چیدمان 3 ستونه را انجام می‌دهد.
*/

.kd-phone-grid--external {
    display: block !important;
    width: 100% !important;
    min-height: 300px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.kd-sk-phone-feed {
    display: block !important;
    width: 100% !important;
    min-height: 300px !important;
    overflow: visible !important;
    background: #ffffff !important;
}

    .kd-sk-phone-feed .sk-instagram-feed {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* ==========================================================
   LIVE HEADER
   ========================================================== */

.kd-live-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    color: #9b6c22 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.14em !important;
}

    .kd-live-kicker i {
        font-size: 15px !important;
    }

.kd-live-lead {
    max-width: 820px !important;
}

/* ==========================================================
   HOW IT WORKS
   ========================================================== */

.kd-live-how {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 22px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient( 135deg, rgba(217, 168, 66, 0.07), rgba(255, 255, 255, 0.95) ) !important;
    border: 1px solid rgba(162, 118, 49, 0.10) !important;
}

    .kd-live-how span {
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        color: #242424 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.7 !important;
    }

        .kd-live-how span b {
            flex: 0 0 auto !important;
            width: 28px !important;
            height: 28px !important;
            display: inline-grid !important;
            place-items: center !important;
            border-radius: 50% !important;
            color: #ffffff !important;
            background: linear-gradient( 135deg, #d9a842, #a27631 ) !important;
            font-size: 11px !important;
            font-weight: 950 !important;
        }

    .kd-live-how > i {
        color: rgba(162, 118, 49, 0.48) !important;
    }

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

.kd-instagram-status {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 13px 16px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    color: #4d4d4d !important;
    background: #f7f7f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.8 !important;
}

    .kd-instagram-status[hidden] {
        display: none !important;
    }

    .kd-instagram-status.is-loading {
        color: #7a5b22 !important;
        background: rgba(217, 168, 66, 0.08) !important;
    }

    .kd-instagram-status.is-success {
        color: #2d6a42 !important;
        background: rgba(44, 141, 80, 0.07) !important;
    }

    .kd-instagram-status.is-error {
        color: #9d3535 !important;
        background: rgba(175, 51, 51, 0.06) !important;
    }

/* ==========================================================
   DESKTOP LOCAL GRID
   ========================================================== */

.kd-posts-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.kd-feed-post {
    margin: 0 !important;
    opacity: 0;
    transform: translateY(16px);
    animation: kdInstagramReveal 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--kd-delay, 0ms);
}

@keyframes kdInstagramReveal {

    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kd-feed-post-cover {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #eeeeee !important;
    cursor: pointer !important;
}

    .kd-feed-post-cover img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

/* ==========================================================
   DESKTOP SOCIABLEKIT - 9 POST VIEWPORT
   ========================================================== */

.kd-instagram-external-widget {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .kd-instagram-external-widget[hidden] {
        display: none !important;
    }

/*
   قاب ویترین اصلی فقط به اندازه سه ردیف
   از گرید 3 ستونه دیده می‌شود.
*/

.kd-sk-desktop-viewport {
    position: relative !important;
    width: 100% !important;
    height: 855px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

    .kd-sk-desktop-viewport::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 18px;
        z-index: 20;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0), #ffffff );
    }

    .kd-sk-desktop-viewport .sk-instagram-feed {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

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

.kd-instagram-type-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 6 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.56) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    pointer-events: none !important;
}

/* ==========================================================
   HOVER
   ========================================================== */

.kd-feed-hover {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    opacity: 0 !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.34) !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
}

.kd-feed-post-cover:hover
.kd-feed-hover {
    opacity: 1 !important;
}

/* ==========================================================
   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);
}

#modalPostVideo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #111111 !important;
}

    #modalPostVideo[hidden],
    #modalPostImage[hidden] {
        display: none !important;
    }

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1180px) {

    .kd-instagram-layout {
        grid-template-columns: minmax(0, 1fr) 350px !important;
        gap: 26px !important;
    }

    .kd-phone {
        width: 350px !important;
    }

    .kd-phone-screen {
        height: 660px !important;
        min-height: 660px !important;
        max-height: 660px !important;
    }

    .kd-sk-desktop-viewport {
        height: 760px !important;
    }
}

/* ==========================================================
   SINGLE COLUMN
   ========================================================== */

@media (max-width: 980px) {

    .kd-instagram-layout {
        grid-template-columns: 1fr !important;
    }

    .kd-instagram-phone-wrap {
        position: relative !important;
        top: auto !important;
        order: 1 !important;
    }

    .kd-instagram-content {
        order: 2 !important;
    }

    .kd-phone {
        width: 390px !important;
    }

    .kd-phone-screen {
        height: 700px !important;
        min-height: 700px !important;
        max-height: 700px !important;
    }

    .kd-live-how {
        grid-template-columns: 1fr !important;
    }

        .kd-live-how > i {
            display: none !important;
        }

    .kd-sk-desktop-viewport {
        height: 920px !important;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .kd-phone {
        width: min( 390px, 100% ) !important;
        padding: 8px !important;
        border-radius: 38px !important;
    }

    .kd-phone-screen {
        height: 650px !important;
        min-height: 650px !important;
        max-height: 650px !important;
        border-radius: 30px !important;
    }

    .kd-ig-avatar {
        width: 74px !important;
        height: 74px !important;
    }

    .kd-ig-profile-row {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .kd-posts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .kd-feed-post-cover {
        border-radius: 8px !important;
    }

    .kd-sk-desktop-viewport {
        height: 760px !important;
    }
}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 430px) {

    .kd-phone-screen {
        height: 620px !important;
        min-height: 620px !important;
        max-height: 620px !important;
    }

    .kd-sk-desktop-viewport {
        height: 680px !important;
    }
}

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

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

    .kd-feed-post,
    .kd-instagram-modal,
    .kd-instagram-modal-dialog {
        animation: none !important;
        transition: none !important;
    }

    .kd-feed-post {
        opacity: 1 !important;
        transform: none !important;
    }
}