/* ─── Category Tabs ─── */
.category-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: transparent;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 10px;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0px;
}

.tab-btn {
    flex: 0 0 auto;
    padding: 10px 25px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--border-light);
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tab-btn.active {
    background: var(--primary);
    color: #fff;
}
.tab-btn:hover { opacity: 0.8; }

/* ─── Feed Container ─── */
#feed-container.feed-container {
    display: block;
    padding: 0 10px 20px 10px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ─── Masonry Grid – 2 columns on ALL screens ─── */
.feed-grid-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.feed-grid-inner .grid-item,
article.grid-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 14px;
    break-inside: avoid;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* ─── Images ─── */
.feed-grid-inner .grid-item .main-image, article.grid-item .main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

/* ─── Photo scroll (to-let) ─── */
.photo-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.photo-scroll img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
    display: block;
    width: 100%;
}

/* ─── Quick mood ─── */
.feed-grid-inner .grid-item .quick-mood-content,
article.grid-item .quick-mood-content {
    padding: 20px 16px 16px;
    text-align: center;
}
.feed-grid-inner .grid-item .quick-mood-content .mood-emoji-big,
article.grid-item .quick-mood-content .mood-emoji-big {
    font-size: 48px;
}
.feed-grid-inner .grid-item .quick-mood-content .mood-title,
article.grid-item .quick-mood-content .mood-title {
    font-size: 20px;
    margin: 4px 0 2px;
}
.feed-grid-inner .grid-item .quick-mood-content .mood-time,
article.grid-item .quick-mood-content .mood-time,
.feed-grid-inner .grid-item .quick-mood-content .mood-user,
article.grid-item .quick-mood-content .mood-user {
    font-size: 13px;
    color: var(--text-muted);
}

/* ─── Pin user row ─── */
.pin-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px 14px;
    position: absolute;
    z-index: 9;
}
.pin-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}
.pin-user-name {
    font-size: var(--font-sm);
    color: var(--text-light);
    font-weight: 500;
}

/* ─── Pin info ─── */
.pin-info {
    padding: 0 14px 12px 14px;
    position: absolute;
    z-index: 99;
    bottom: 0px;
}
.pin-caption {
    font-size: var(--font-sm);
    color: var(--text-light);
    margin: 4px 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-only-pin {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ─── Pin details ─── */
.pin-details {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 8px 0;
    flex-wrap: wrap;
}
.price {
    font-weight: 700;
    color: var(--text);
    font-size: var(--font-lg);
}
.price cite {
    font-style: normal;
    font-size: var(--font-sm);
    font-weight: 400;
    color: var(--text-muted);
}
.condition-badge,
.property-type-badge {
    background: var(--border-light);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    text-transform: capitalize;
}

/* ─── Pin actions ─── */
.pin-actions {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.pin-actions button,
.pin-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    min-height: 30px;
    border: none;
    border-radius: var(--radius-pill, 30px);
    font-size: var(--font-sm, 13px);
    background: var(--border-light, #f0f0f0);
    color: var(--text, #333);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.pin-actions .like-btn.liked {
    background: #ffe0e6;
    color: #e91e63;
}
.pin-actions .delete-btn {
    background: var(--danger-bg, #ffe0e0);
    color: var(--danger, #e74c3c);
}
.pin-actions svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.like-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ─── Sub Tabs ─── */
.sub-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 0 12px 0;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-btn {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--border-light);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.sub-tab-btn.active {
    background: var(--primary);
    color: #fff;
}
.sub-tab-btn:hover { opacity: 0.8; }
.sub-tab-btn .sub-emoji {
    margin-right: 4px;
    font-size: 14px;
}
.sub-tabs-wrapper {
    display: none;
}

/* ─── Load More Sentinel ─── */
.load-more-sentinel {
    height: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* ─── Tab with select ─── */
.tab-with-select {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.sub-select {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--white);
    font-size: var(--font-sm);
    color: var(--text);
    cursor: pointer;
    outline: none;
    max-width: 160px;
}
.sub-select:focus {
    border-color: var(--primary);
}

/* ─── Tab wrapper active state ─── */
.tab-with-select.active {
    background: #fff;
    border-radius: 20px;
    padding-right: 0;
    padding-left: 10px;
}
.tab-with-select.active .tab-btn.active {
    background: #fff;
    color: #000;
    display: none;
}
.tab-with-select.active .sub-select {
    background: transparent;
    border: none;
    color: #000;
    font-weight: 500;
    margin-right: 10px;
}
#all-wrapper.tab-with-select.active .tab-btn.active {
    display: flex;
}
#all-wrapper.tab-with-select.active {
    background: #fff;
    border-radius: 20px;
    padding-right: 0;
    padding-left: 0px;
}

/* ─── Flair selector ─── */
.flair-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.flair-btn {
    background: var(--border-light);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: 6px 16px 6px 12px;
    font-size: 18px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}
.flair-btn:hover {
    background: #e0e0e0;
    transform: scale(1.05);
}
.flair-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ─── Sell condition selector ─── */
#sell-condition-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
#sell-condition-selector .flair-btn {
    flex: 1 1 0;
    text-align: center;
    justify-content: center;
    min-width: 0;
}

/* ─── Hidden file inputs ─── */
.hidden-file-input,
.pin-form input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ─── Caption heading styles ─── */
.caption-heading {
    margin: 8px 0 4px 0;
    font-weight: 600;
    line-height: 1.3;
}
.caption-heading:first-child { margin-top: 0; }
h2.caption-heading { font-size: 1.4rem; }
h3.caption-heading { font-size: 1.1rem; color: var(--text-light); }
.caption-line { margin: 4px 0; }

/* ─── Read-more container ─── */
.caption-read-more .caption-short { display: block; }
.caption-read-more .caption-full { display: none; }
.read-more-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 500;
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--font-sm);
}
.read-more-btn:hover { text-decoration: underline; }

/* ─── News text posts ─── */
.news .text-only-pin { font-size: 2rem; }

/* ─── Quick Mood Cards ─── */
.grid-item.quick-mood {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    background-size: cover !important;
    background-position: center !important;
}

.grid-item.quick-mood .quick-mood-content {
    position: relative;
    z-index: 2;
    padding: 32px 20px 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid-item.quick-mood .quick-mood-content .mood-title {
    color: #fff;
}
.grid-item.quick-mood .quick-mood-content .mood-time,
.grid-item.quick-mood .quick-mood-content .mood-user {
    color: rgba(255,255,255,0.85);
}

.mood-emoji-big {
    font-size: 64px;
}

.grid-item.quick-mood .pin-user-name {
    color: #fff;
}

.grid-item.quick-mood .pin-info {
    display: none;
    position: absolute;
    z-index: 99;
    bottom: 0px;
}

/* ─── Quick mood background colors (fallback) ─── */
.grid-item.happy-mood { background: #fff3cd; }
.grid-item.chill-mood { background: #d1ecf1; }
.grid-item.sad-mood { background: #e2e3e5; }
.grid-item.excited-mood { background: #f8d7da; }
.grid-item.tired-mood { background: #d6d8db; }
.grid-item.angry-mood { background: #f5c6cb; }
.grid-item.grateful-mood { background: #c3e6cb; }
.grid-item.bored-mood { background: #d4edda; }

/* ─── Full width posts (span 2 columns) ─── */
.feed-grid-inner .grid-item.moment.news,
.feed-grid-inner .grid-item.featured,
article.grid-item.moment.news,
article.grid-item.featured {
    grid-column: 1 / -1;
    width: 100%;
}

/* ─── Keep tabs at top when scrolling ─── */
.category-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Hide hero/mood when tabs are sticky */
.category-tabs.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ─── Prevent layout shift during tab switching ─── */
#feed-container {
    min-height: 200px;
}

/* Fix for flickering */
.feed-grid-inner {
    opacity: 1;
    transition: opacity 0.1s ease;
}

/* During HTMX swap, keep content stable */
.htmx-request .feed-grid-inner {
    opacity: 0.7;
}

/* ─── Loading state to prevent flicker ─── */
#feed-container.htmx-request {
    position: relative;
}

#feed-container.htmx-request::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* Smooth content swap */
.feed-grid-inner {
    transition: opacity 0.15s ease;
}

.feed-grid-inner.htmx-request {
    opacity: 0.5;
}

/* ─── Only hide top sections during tab switching ─── */

/* Keep tabs and feed visible during switch */
    opacity: 1 !important;
    pointer-events: auto !important;
}

    opacity: 1 !important;
}

/* Smooth restore */
.top-bar,
.hero-section,
#dharan-mood-container,
.mood-section,
.hero-container {
    transition: opacity 0.3s ease;
}

/* ─── Smooth feed loading animation ─── */
#feed-container .feed-grid-inner {
    opacity: 0;
    animation: fadeInFeed 0.4s ease forwards;
}

@keyframes fadeInFeed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent animation on first load if needed */
#feed-container.initial-load .feed-grid-inner {
    animation: none;
    opacity: 1;
}

/* Slight delay for items to appear one by one */
.feed-grid-inner .grid-item {
    opacity: 0;
    animation: fadeInItem 0.3s ease forwards;
}

.feed-grid-inner .grid-item:nth-child(1) { animation-delay: 0.05s; }
.feed-grid-inner .grid-item:nth-child(2) { animation-delay: 0.10s; }
.feed-grid-inner .grid-item:nth-child(3) { animation-delay: 0.15s; }
.feed-grid-inner .grid-item:nth-child(4) { animation-delay: 0.20s; }
.feed-grid-inner .grid-item:nth-child(5) { animation-delay: 0.25s; }
.feed-grid-inner .grid-item:nth-child(6) { animation-delay: 0.30s; }
.feed-grid-inner .grid-item:nth-child(7) { animation-delay: 0.35s; }
.feed-grid-inner .grid-item:nth-child(8) { animation-delay: 0.40s; }
.feed-grid-inner .grid-item:nth-child(9) { animation-delay: 0.45s; }
.feed-grid-inner .grid-item:nth-child(10) { animation-delay: 0.50s; }

@keyframes fadeInItem {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Initial load - no animation ─── */
#feed-container.initial-load .feed-grid-inner {
    opacity: 1;
    animation: none;
}

#feed-container.initial-load .feed-grid-inner .grid-item {
    opacity: 1;
    animation: none;
}

/* After tab switch - animate */
#feed-container.feed-loaded .feed-grid-inner {
    animation: fadeInFeed 0.4s ease forwards;
}

#feed-container.feed-loaded .feed-grid-inner .grid-item {
    animation: fadeInItem 0.3s ease forwards;
}

/* ─── Prevent flicker during tab switch ─── */
#feed-container {
    min-height: 300px;
    position: relative;
}

#feed-container .feed-grid-inner {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#feed-container .feed-grid-inner.show {
    opacity: 1;
}

/* Hide top sections during switch */

    opacity: 1 !important;
}

/* Keep feed container stable */
    min-height: 400px;
}

/* ─── Initial load - no animation ─── */
#feed-container.initial-load .feed-grid-inner {
    opacity: 1 !important;
}

/* Remove the default animation that might cause flicker */
.feed-grid-inner {
    opacity: 1;
}

/* ─── CSS-based fade in (even smoother) ─── */
@keyframes feedFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.feed-grid-inner.fade-in {
    animation: feedFadeIn 0.3s ease forwards;
}

#feed-container .feed-grid-inner {
    opacity: 0;
}

#feed-container .feed-grid-inner.show {
    opacity: 1;
    animation: feedFadeIn 0.3s ease forwards;
}

/* ─── Loading Spinner ─── */
.feed-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    min-height: 200px;
}

.feed-loading .spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid #4a90d9;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Skeleton loading */
.feed-skeleton {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 10px;
}

.feed-skeleton .skeleton-item {
    background: #f0f0f0;
    border-radius: 8px;
    height: 200px;
    animation: shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ─── Only hide during loading, restore after ─── */

    opacity: 1 !important;
    pointer-events: auto !important;
}

    min-height: 300px;
}

/* Restore after loading */
body:not(.tab-switching) .top-bar,
body:not(.tab-switching) .hero-section,
body:not(.tab-switching) #dharan-mood-container {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease;
}

/* ─── Category Tabs - Always at Top ─── */
.category-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

/* When fixed/sticky */
.category-tabs.is-fixed {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0px !important;
    z-index: 100;
}

/* Remove any margin/padding above tabs */
.category-tabs-wrapper {
    padding-top: 0;
    margin-top: 0;
}

/* Ensure tabs container is at top */
.app-shell {
    padding-top: 0;
}

/* ─── Force tabs to stay at top ─── */
.category-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Prevent any margin pushing it down */
.category-tabs-wrapper,
.app-shell > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero section should be below tabs */
.hero-section {
    margin-top: 0 !important;
}

/* Fix for any spacing above */
body {
    padding-top: 0 !important;
}

/* ─── Fixed Tabs - Always at Top ─── */
.category-tabs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.category-tabs::-webkit-scrollbar {
    display: none !important;
}

/* Body padding to prevent content hiding behind fixed tabs */
body {
    padding-top: 56px !important;
}

/* On mobile, adjust padding */
@media (max-width: 600px) {
    body {
        padding-top: 48px !important;
    }
}

/* Remove any other sticky/fixed overrides */
.category-tabs.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* ─── Override any conflicting styles ─── */
.category-tabs.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0px !important;
    z-index: 1000 !important;
    padding: 8px 16px !important;
}

/* Ensure app shell doesn't interfere */
.app-shell {
    padding-top: 0 !important;
}

/* Hero section offset */
.hero-section {
    margin-top: 0 !important;
}