/* instagram.css */
/* Philosophy: solid black buttons ALWAYS (Light & Dark Mode) */
/* Instagram Branding Color: #E1306C (Official Pink/Purple Accent) */

/* =========================================
   1. GLOBAL BUTTON OVERRIDES (Always Black)
   ========================================= */

/* Top Navigation Links (Home, About, Hub, etc.) */
body nav a,
body.light-mode nav a {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    transition: all 0.2s ease-in-out;
}

/* Control Buttons (Refresh & Theme Toggle) */
body #refresh-btn,
body #theme-toggle,
body.light-mode #refresh-btn,
body.light-mode #theme-toggle {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Primary "Share Post" Button */
/* Target specifically to force Black BG and Instagram Pink Text */
body #open-share-btn,
body.light-mode #open-share-btn {
    background-color: #000000 !important;
    color: #E1306C !important;            /* Instagram Pink */
    border: 2px solid #E1306C !important; /* Pink Border */
    background-image: none !important;    /* Remove gradients */
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-weight: 600;
}

/* =========================================
   2. HOVER STATES
   ========================================= */

/* Nav & Controls Hover */
nav a:hover, 
#refresh-btn:hover, 
#theme-toggle:hover {
    background-color: #1e293b !important; /* Dark Grey hover */
    border-color: #E1306C !important;     /* Pink Border Highlight */
    color: #ffffff !important;
}

/* Share Button Hover */
#open-share-btn:hover {
    background-color: #E1306C !important; /* Solid Pink BG on Hover */
    color: #ffffff !important;            /* White Text */
    border-color: #E1306C !important;
}

/* =========================================
   3. BACKGROUND & PATTERNS
   ========================================= */

/* Background Pattern (Specific to Instagram Vibe) */
.bg-pattern-dark {
    background-color: #0f172a !important;
    background-image:
        radial-gradient(at 40% 20%, hsla(330, 98%, 60%, 0.15) 0px, transparent 50%), /* Magenta Glow */
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.15) 0px, transparent 50%) !important; /* Cyan Glow */
    background-size: 120% 120%;
}

/* =========================================
   4. CARDS & EMBEDS
   ========================================= */

/* Glass Panels */
.glass-panel,
.embed-container {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(15, 23, 42, 0.85) !important; /* High opacity dark bg */
    border: 1px solid rgba(225, 48, 108, 0.2) !important; /* Faint pink tint border */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    border-radius: 1rem;
    overflow: hidden;
}

/* Embed Container */
.embed-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000 !important; /* Solid black behind embed */
    border-radius: 0.75rem;
    min-height: 480px; /* Adjusted slightly taller for Reels compatibility */
    padding: 1rem;
    border: 1px solid rgba(225, 48, 108, 0.15) !important;
}

/* Instagram Specific Embed Overrides */
.instagram-media {
    background: transparent !important;
    min-width: unset !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================
   5. UTILITIES & ANIMATIONS
   ========================================= */

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.animate-fade-in-up { animation: fadeInUp 0.35s ease-out forwards; }
.animate-fade-in    { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }