@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Kanit:wght@300;400;500;600&display=swap');

:root {
    --ig-primary-text: #0f1419;
    --ig-secondary-text: #737373;
    --ig-border-color: #dbdbdb;
    --ig-bg: #ffffff;
    --ig-secondary-bg: #fafafa;
    --ig-link: #0095f6;
    --ig-link-hover: #1877f2;
}

body {
    background-color: var(--ig-bg);
    color: var(--ig-primary-text);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Plus Jakarta Sans', 'Kanit';
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
}

/* Instagram Story Gradient Ring */
.story-ring {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 2px;
    border-radius: 50%;
}

.story-ring-seen {
    background: #e0e0e0;
    padding: 2px;
    border-radius: 50%;
}

/* Hide scrollbars */
.hide-scrollbar::-webkit-scrollbar, 
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.hide-scrollbar, 
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Custom IG aspect ratio fallback */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Smooth modal transitions */
.modal-animate-enter {
    animation: fadeIn 0.15s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* แก้ไขให้ลากนิ้วเลื่อนหน้าเว็บขึ้น-ลงบนพื้นที่รูปภาพได้ปกติ */
.ig-media-slider {
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
}