@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap');

/* =========================================
   Redesign Custom Utilities
   ========================================= */
.bg-gradient-pro {
    background: linear-gradient(135deg, #0f6fec 0%, #004085 100%) !important;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.text-gradient-pro {
    background: linear-gradient(135deg, #0f6fec 0%, #004085 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.font-inter {
    font-family: 'Inter', sans-serif !important;
}
/* =========================================
   Social Feed Redesign Styles
   ========================================= */

/* Feed Card Hover Effect */
.feed-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.feed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Post Creator Input Focus */
.post-input-container {
    transition: all 0.3s ease;
}
.post-input-container:focus-within {
    box-shadow: 0 0 0 3px rgba(15, 111, 236, 0.1);
    border-color: #0f6fec;
}

/* Action Button Hover */
.action-btn-hover {
    transition: background-color 0.2s ease, color 0.2s ease;
}
.action-btn-hover:hover {
    background-color: rgba(15, 111, 236, 0.05); /* Very light blue */
}

/* Like Heart Animation */
@keyframes heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.heart-animate {
    animation: heart-beat 0.3s ease-in-out;
}

/* =========================================
   Global Background Redesign
   ========================================= */
.bg-body-pro {
    background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 100%) !important;
    min-height: 100vh;
}